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/MediaDislikeIcon.jsx

@@ -0,0 +1,58 @@
+import React, { useState, useEffect } from 'react';
+import { TextsContext } from '../../utils/contexts/';
+import { MediaPageStore } from '../../utils/stores/';
+import { formatViewsNumber } from '../../utils/helpers/';
+import { PageActions, MediaPageActions } from '../../utils/actions/';
+import { CircleIconButton, MaterialIcon } from '../_shared/';
+
+export function MediaDislikeIcon() {
+  const [dislikedMedia, setDislikedMedia] = useState(MediaPageStore.get('user-liked-media'));
+  const [dislikesCounter, setDislikesCounter] = useState(formatViewsNumber(MediaPageStore.get('media-likes'), false));
+
+  function updateStateValues() {
+    setDislikedMedia(MediaPageStore.get('user-disliked-media'));
+    setDislikesCounter(formatViewsNumber(MediaPageStore.get('media-dislikes'), false));
+  }
+
+  function onCompleteMediaDislike() {
+    updateStateValues();
+    PageActions.addNotification(TextsContext._currentValue.messages.addToDisliked, 'mediaDislike');
+  }
+
+  function onCompleteMediaDislikeCancel() {
+    updateStateValues();
+    PageActions.addNotification(TextsContext._currentValue.messages.removeFromDisliked, 'cancelMediaDislike');
+  }
+
+  function onFailMediaDislikeRequest() {
+    PageActions.addNotification('Action failed', 'mediaDislikeRequestFail');
+  }
+
+  function toggleDislike(ev) {
+    ev.preventDefault();
+    ev.stopPropagation();
+    MediaPageActions[dislikedMedia ? 'undislikeMedia' : 'dislikeMedia']();
+  }
+
+  useEffect(() => {
+    MediaPageStore.on('disliked_media', onCompleteMediaDislike);
+    MediaPageStore.on('undisliked_media', onCompleteMediaDislikeCancel);
+    MediaPageStore.on('disliked_media_failed_request', onFailMediaDislikeRequest);
+    return () => {
+      MediaPageStore.removeListener('disliked_media', onCompleteMediaDislike);
+      MediaPageStore.removeListener('undisliked_media', onCompleteMediaDislikeCancel);
+      MediaPageStore.removeListener('disliked_media_failed_request', onFailMediaDislikeRequest);
+    };
+  }, []);
+
+  return (
+    <div className="like">
+      <button onClick={toggleDislike}>
+        <CircleIconButton type="span">
+          <MaterialIcon type="thumb_down" />
+        </CircleIconButton>
+        <span className="dislikes-counter">{dislikesCounter}</span>
+      </button>
+    </div>
+  );
+}