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/MediaLikeIcon.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 MediaLikeIcon() {
+  const [likedMedia, setLikedMedia] = useState(MediaPageStore.get('user-liked-media'));
+  const [likesCounter, setLikesCounter] = useState(formatViewsNumber(MediaPageStore.get('media-likes'), false));
+
+  function updateStateValues() {
+    setLikedMedia(MediaPageStore.get('user-liked-media'));
+    setLikesCounter(formatViewsNumber(MediaPageStore.get('media-likes'), false));
+  }
+
+  function onCompleteMediaLike() {
+    updateStateValues();
+    PageActions.addNotification(TextsContext._currentValue.addToLiked, 'likedMedia');
+  }
+
+  function onCompleteMediaLikeCancel() {
+    updateStateValues();
+    PageActions.addNotification(TextsContext._currentValue.removeFromLiked, 'unlikedMedia');
+  }
+
+  function onFailMediaLikeRequest() {
+    PageActions.addNotification('Action failed', 'likedMediaRequestFail');
+  }
+
+  function toggleLike(ev) {
+    ev.preventDefault();
+    ev.stopPropagation();
+    MediaPageActions[likedMedia ? 'unlikeMedia' : 'likeMedia']();
+  }
+
+  useEffect(() => {
+    MediaPageStore.on('liked_media', onCompleteMediaLike);
+    MediaPageStore.on('unliked_media', onCompleteMediaLikeCancel);
+    MediaPageStore.on('liked_media_failed_request', onFailMediaLikeRequest);
+    return () => {
+      MediaPageStore.removeListener('liked_media', onCompleteMediaLike);
+      MediaPageStore.removeListener('unliked_media', onCompleteMediaLikeCancel);
+      MediaPageStore.removeListener('liked_media_failed_request', onFailMediaLikeRequest);
+    };
+  }, []);
+
+  return (
+    <div className="like">
+      <button onClick={toggleLike}>
+        <CircleIconButton type="span">
+          <MaterialIcon type="thumb_up" />
+        </CircleIconButton>
+        <span className="likes-counter">{likesCounter}</span>
+      </button>
+    </div>
+  );
+}