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-actions/MediaShareButton.jsx

@@ -0,0 +1,73 @@
+import React, { useState } from 'react';
+import { usePopup } from '../../utils/hooks/';
+import { CircleIconButton, MaterialIcon, NavigationContentApp, PopupMain } from '../_shared/';
+import { MediaShareEmbed } from './MediaShareEmbed';
+import { MediaShareOptions } from './MediaShareOptions';
+
+function mediaSharePopupPages() {
+  return {
+    shareOptions: (
+      <div className="popup-fullscreen">
+        <PopupMain>
+          <span className="popup-fullscreen-overlay"></span>
+          <MediaShareOptions />
+        </PopupMain>
+      </div>
+    ),
+  };
+}
+
+function videoSharePopupPages(onTriggerPopupClose) {
+  return {
+    ...mediaSharePopupPages(),
+    shareEmbed: (
+      <div className="popup-fullscreen share-embed-popup">
+        <PopupMain>
+          <span className="popup-fullscreen-overlay"></span>
+          <MediaShareEmbed triggerPopupClose={onTriggerPopupClose} />
+        </PopupMain>
+      </div>
+    ),
+  };
+}
+
+export function MediaShareButton(props) {
+  const [popupContentRef, PopupContent, PopupTrigger] = usePopup();
+
+  const [popupCurrentPage, setPopupCurrentPage] = useState('shareOptions');
+
+  function triggerPopupClose() {
+    popupContentRef.current.toggle();
+  }
+
+  function onPopupPageChange(newPage) {
+    setPopupCurrentPage(newPage);
+  }
+  function onPopupHide() {
+    setPopupCurrentPage('shareOptions');
+  }
+
+  return (
+    <div className="share">
+      <PopupTrigger contentRef={popupContentRef}>
+        <button>
+          <CircleIconButton type="span">
+            <MaterialIcon type="share" />
+          </CircleIconButton>
+          <span>SHARE</span>
+        </button>
+      </PopupTrigger>
+
+      <PopupContent contentRef={popupContentRef} hideCallback={onPopupHide}>
+        <NavigationContentApp
+          initPage={popupCurrentPage}
+          pageChangeSelector={'.change-page'}
+          pageIdSelectorAttr={'data-page-id'}
+          pages={props.isVideo ? videoSharePopupPages(triggerPopupClose) : mediaSharePopupPages()}
+          focusFirstItemOnPageChange={false}
+          pageChangeCallback={onPopupPageChange}
+        />
+      </PopupContent>
+    </div>
+  );
+}