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/item-list/ItemList.jsx

@@ -0,0 +1,105 @@
+import React, { useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { useItemListSync } from '../../utils/hooks/';
+import { PositiveIntegerOrZero } from '../../utils/helpers';
+import { PendingItemsList } from './PendingItemsList';
+import { ListItem, listItemProps } from '../list-item/ListItem';
+import { ItemsStaticListHandler } from './includes/itemLists/ItemsStaticListHandler';
+
+export function ItemList(props) {
+  const [
+    countedItems,
+    items,
+    listHandler,
+    setListHandler,
+    classname,
+    itemsListWrapperRef,
+    itemsListRef,
+    onItemsCount,
+    onItemsLoad,
+    renderBeforeListWrap,
+    renderAfterListWrap,
+  ] = useItemListSync(props);
+
+  useEffect(() => {
+    setListHandler(new ItemsStaticListHandler(props.items, props.pageItems, props.maxItems, onItemsCount, onItemsLoad));
+
+    return () => {
+      if (listHandler) {
+        listHandler.cancelAll();
+        setListHandler(null);
+      }
+    };
+  }, []);
+
+  return !countedItems ? (
+    <PendingItemsList className={classname.listOuter} />
+  ) : !items.length ? null : (
+    <div className={classname.listOuter}>
+      {renderBeforeListWrap()}
+
+      <div ref={itemsListWrapperRef} className="items-list-wrap">
+        <div ref={itemsListRef} className={classname.list}>
+          {items.map((itm, index) => (
+            <ListItem key={index} {...listItemProps(props, itm, index)} />
+          ))}
+        </div>
+      </div>
+
+      {renderAfterListWrap()}
+    </div>
+  );
+}
+
+ItemList.propTypes = {
+  items: PropTypes.array.isRequired,
+  className: PropTypes.string,
+  hideDate: PropTypes.bool,
+  hideViews: PropTypes.bool,
+  hideAuthor: PropTypes.bool,
+  hidePlaylistOptions: PropTypes.bool,
+  hidePlaylistOrderNumber: PropTypes.bool,
+  hideAllMeta: PropTypes.bool,
+  preferSummary: PropTypes.bool,
+  inPlaylistView: PropTypes.bool,
+  inPlaylistPage: PropTypes.bool,
+  playlistActiveItem: PositiveIntegerOrZero,
+  playlistId: PropTypes.string,
+  /* ################################################## */
+  maxItems: PropTypes.number.isRequired,
+  pageItems: PropTypes.number.isRequired,
+  horizontalItemsOrientation: PropTypes.bool.isRequired,
+  singleLinkContent: PropTypes.bool.isRequired,
+  inTagsList: PropTypes.bool,
+  inCategoriesList: PropTypes.bool,
+  itemsCountCallback: PropTypes.func,
+  itemsLoadCallback: PropTypes.func,
+  firstItemViewer: PropTypes.bool,
+  firstItemDescr: PropTypes.bool,
+  canEdit: PropTypes.bool,
+};
+
+ItemList.defaultProps = {
+  hideDate: false,
+  hideViews: false,
+  hideAuthor: false,
+  hidePlaylistOptions: true,
+  hidePlaylistOrderNumber: true,
+  hideAllMeta: false,
+  preferSummary: false,
+  inPlaylistView: false,
+  inPlaylistPage: false,
+  playlistActiveItem: 1,
+  playlistId: void 0,
+  /* ################################################## */
+  maxItems: 99999,
+  // pageItems: 48,
+  pageItems: 24,
+  horizontalItemsOrientation: false,
+  singleLinkContent: false,
+  inTagsList: false,
+  inCategoriesList: false,
+  firstItemViewer: false,
+  firstItemDescr: false,
+  canEdit: false,
+};