Frontent dev env (#247)

* Added frontend development files/environment

* More items-categories related removals

* Improvements in pages templates (inc. static pages)

* Improvements in video player

* Added empty home page message + cta

* Updates in media, playlist and management pages

* Improvements in material icons font loading

* Replaced media & playlists links in frontend dev-env

* frontend package version update

* chnaged frontend dev url port

* static files update

* Changed default position of theme switcher

* enabled frontend docker container

frontend/src/static/js/components/media-viewer/ImageViewer.js

@@ -0,0 +1,52 @@
+import React, { useContext, useEffect, useState } from 'react';
+import { SiteContext } from '../../utils/contexts/';
+import { MediaPageStore } from '../../utils/stores/';
+
+export default function ImageViewer(props) {
+  const site = useContext(SiteContext);
+
+  let initialImage = getImageUrl();
+
+  initialImage = initialImage ? initialImage : MediaPageStore.get('media-data').thumbnail_url;
+  initialImage = initialImage ? initialImage : '';
+
+  const [image, setImage] = useState(initialImage);
+
+  function onImageLoad() {
+    setImage(getImageUrl());
+  }
+
+  function getImageUrl() {
+    const media_data = MediaPageStore.get('media-data');
+
+    let imgUrl = 'string' === typeof media_data.poster_url ? media_data.poster_url.trim() : '';
+
+    if ('' === imgUrl) {
+      imgUrl = 'string' === typeof media_data.thumbnail_url ? media_data.thumbnail_url.trim() : '';
+    }
+
+    if ('' === imgUrl) {
+      imgUrl =
+        'string' === typeof MediaPageStore.get('media-original-url')
+          ? MediaPageStore.get('media-original-url').trim()
+          : '';
+    }
+
+    if ('' === imgUrl) {
+      return '#';
+    }
+
+    return site.url + '/' + imgUrl.replace(/^\//g, '');
+  }
+
+  useEffect(() => {
+    MediaPageStore.on('loaded_image_data', onImageLoad);
+    return () => MediaPageStore.removeListener('loaded_image_data', onImageLoad);
+  }, []);
+
+  return !image ? null : (
+    <div className="viewer-image-container">
+      <img src={image} alt={MediaPageStore.get('media-data').title || null} />
+    </div>
+  );
+}