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/useItem.js

@@ -0,0 +1,60 @@
+import React, { useState, useEffect } from 'react';
+import { formatInnerLink } from '../helpers/';
+import {
+  ItemDescription,
+  ItemMain,
+  ItemMainInLink,
+  ItemTitle,
+  ItemTitleLink,
+} from '../../components/list-item/includes/items';
+
+import PageStore from '../stores/PageStore.js';
+
+export function useItem(props) {
+  const [duration, setDuration] = useState('');
+  const [publishDate, setPublishDate] = useState('');
+  const [publishDateTime, setPublishDateTime] = useState('');
+
+  const itemType = props.type;
+
+  const UnderThumbWrapper = props.singleLinkContent ? ItemMainInLink : ItemMain;
+
+  const thumbnailUrl =
+    '' === props.thumbnail ? null : formatInnerLink(props.thumbnail, PageStore.get('config-site').url);
+
+  function titleComponent() {
+    let ariaLabel = props.title;
+
+    if ('' !== publishDate) {
+      ariaLabel += ' ' + publishDate;
+    }
+
+    if ('' !== duration) {
+      ariaLabel += ' ' + duration;
+    }
+
+    if (props.singleLinkContent) {
+      return <ItemTitle title={props.title} ariaLabel={ariaLabel} />;
+    }
+
+    return <ItemTitleLink title={props.title} ariaLabel={ariaLabel} link={props.link} />;
+  }
+
+  function descriptionComponent() {
+    if (props.hasMediaViewer && props.hasMediaViewerDescr) {
+      return [
+        <ItemDescription key="1" description={props.meta_description ? props.meta_description.trim() : ' '} />,
+        <ItemDescription key="2" description={props.description ? props.description.trim() : ' '} />,
+      ];
+    }
+    return <ItemDescription description={props.description.trim()} />;
+  }
+
+  useEffect(() => {
+    if (void 0 !== props.onMount) {
+      props.onMount();
+    }
+  }, []);
+
+  return { titleComponent, descriptionComponent, thumbnailUrl, UnderThumbWrapper };
+}