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/utils/hooks/useItemListSync.js

@@ -0,0 +1,58 @@
+import React, { useEffect, useRef } from 'react';
+import { useItemList } from './useItemList';
+
+export function useItemListSync(props) {
+  const itemsListRef = useRef(null);
+  const itemsListWrapperRef = useRef(null);
+
+  const [items, countedItems, listHandler, setListHandler, onItemsLoad, onItemsCount, addListItems] = useItemList(
+    props,
+    itemsListRef
+  );
+
+  let classname = {
+    list: 'items-list',
+    listOuter: 'items-list-outer' + ('string' === typeof props.className ? ' ' + props.className.trim() : ''),
+  };
+
+  function onClickLoadMore() {
+    listHandler.loadItems();
+  }
+
+  function afterItemsLoad() { }
+
+  function renderBeforeListWrap() {
+    return null;
+  }
+
+  function renderAfterListWrap() {
+    if (!listHandler) {
+      return null;
+    }
+
+    return 1 > listHandler.totalPages() || listHandler.loadedAllItems() ? null : (
+      <button className="load-more" onClick={onClickLoadMore}>
+        SHOW MORE
+      </button>
+    );
+  }
+
+  useEffect(() => {
+    addListItems();
+    afterItemsLoad();
+  }, [items]);
+
+  return [
+    countedItems,
+    items,
+    listHandler,
+    setListHandler,
+    classname,
+    itemsListWrapperRef,
+    itemsListRef,
+    onItemsCount,
+    onItemsLoad,
+    renderBeforeListWrap,
+    renderAfterListWrap,
+  ];
+}