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
2025-12-10 14:02:31 -05:00 · 2021-07-11 18:01:34 +03:00
parent 060bb45725
commit aa6520daac
555 changed files with 201927 additions and 66002 deletions
--- a/frontend/src/static/js/components/media-playlist-options/MediaPlaylistOptions.jsx
+++ b/frontend/src/static/js/components/media-playlist-options/MediaPlaylistOptions.jsx
@@ -0,0 +1,129 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { putRequest, csrfToken } from '../../utils/helpers/';
+import { usePopup } from '../../utils/hooks/';
+import { PageStore } from '../../utils/stores/';
+import { PageActions, PlaylistPageActions } from '../../utils/actions/';
+import { CircleIconButton, MaterialIcon, NavigationContentApp, NavigationMenuList, PopupMain } from '../_shared';
+
+function mediaPlaylistPopupPages(proceedRemoval, cancelRemoval) {
+  const settingOptionsList = {
+    deleteMedia: {
+      itemType: 'open-subpage',
+      text: 'Remove from playlist',
+      icon: 'delete',
+      buttonAttr: {
+        className: 'change-page',
+        'data-page-id': 'proceedMediaPlaylistRemoval',
+      },
+    },
+  };
+
+  const pages = {
+    main: (
+      <PopupMain>
+        <NavigationMenuList items={[settingOptionsList.deleteMedia]} />
+      </PopupMain>
+    ),
+    proceedMediaPlaylistRemoval: (
+      <PopupMain>
+        <div className="popup-message">
+          <span className="popup-message-title">Media playlist removal</span>
+          <span className="popup-message-main">You're willing to remove media from playlist permanently?</span>
+        </div>
+        <hr />
+        <span className="popup-message-bottom">
+          <button className="button-link cancel-playlist-removal" onClick={cancelRemoval}>
+            CANCEL
+          </button>
+          <button className="button-link proceed-playlist-removal" onClick={proceedRemoval}>
+            PROCEED
+          </button>
+        </span>
+      </PopupMain>
+    ),
+  };
+
+  return pages;
+}
+
+export function MediaPlaylistOptions(props) {
+  const [popupContentRef, PopupContent, PopupTrigger] = usePopup();
+
+  const [popupCurrentPage, setPopupCurrentPage] = useState('main');
+
+  const [popupPages] = useState(mediaPlaylistPopupPages(proceedRemoval, cancelRemoval));
+
+  function mediaPlaylistRemovalCompleted() {
+    popupContentRef.current.tryToHide();
+    const props_media_id = props.media_id;
+    const props_playlist_id = props.playlist_id;
+    setTimeout(function () {
+      // FIXME: Without delay creates conflict [ Uncaught Error: Dispatch.dispatch(...): Cannot dispatch in the middle of a dispatch. ].
+      PageActions.addNotification('Media removed from playlist', 'mediaPlaylistRemove');
+      PlaylistPageActions.removedMediaFromPlaylist(props_media_id, props_playlist_id);
+    }, 100);
+  }
+
+  function mediaPlaylistRemovalFailed() {
+    popupContentRef.current.tryToHide();
+    setTimeout(function () {
+      // FIXME: Without delay creates conflict [ Uncaught Error: Dispatch.dispatch(...): Cannot dispatch in the middle of a dispatch. ].
+      PageActions.addNotification('Media removal from playlist failed', 'mediaPlaylistRemoveFail');
+    }, 100);
+  }
+
+  function proceedRemoval() {
+    putRequest(
+      PageStore.get('api-playlists') + '/' + props.playlist_id,
+      {
+        type: 'remove',
+        media_friendly_token: props.media_id,
+      },
+      {
+        headers: {
+          'X-CSRFToken': csrfToken(),
+        },
+      },
+      false,
+      mediaPlaylistRemovalCompleted,
+      mediaPlaylistRemovalFailed
+    );
+  }
+
+  function cancelRemoval() {
+    popupContentRef.current.toggle();
+  }
+
+  function onPopupPageChange(newPage) {
+    setPopupCurrentPage(newPage);
+  }
+  function onPopupHide() {
+    setPopupCurrentPage('main');
+  }
+
+  return (
+    <div className={'item-playlist-options-wrap' + ('main' === popupCurrentPage ? ' item-playlist-options-main' : '')}>
+      <PopupTrigger contentRef={popupContentRef}>
+        <CircleIconButton>
+          <MaterialIcon type="more_vert" />
+        </CircleIconButton>
+      </PopupTrigger>
+
+      <PopupContent contentRef={popupContentRef} hideCallback={onPopupHide}>
+        <NavigationContentApp
+          pageChangeCallback={onPopupPageChange}
+          initPage={popupCurrentPage}
+          focusFirstItemOnPageChange={false}
+          pages={popupPages}
+          pageChangeSelector={'.change-page'}
+          pageIdSelectorAttr={'data-page-id'}
+        />
+      </PopupContent>
+    </div>
+  );
+}
+
+MediaPlaylistOptions.propTypes = {};
+MediaPlaylistOptions.propTypes.media_id = PropTypes.string.isRequired;
+MediaPlaylistOptions.propTypes.playlist_id = PropTypes.string.isRequired;