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-11-20 21:46:04 -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-actions/VideoMediaDownloadLink.jsx
+++ b/frontend/src/static/js/components/media-actions/VideoMediaDownloadLink.jsx
@@ -0,0 +1,92 @@
+import React, { useState } from 'react';
+import { usePopup } from '../../utils/hooks/';
+import { SiteContext } from '../../utils/contexts/';
+import { MediaPageStore } from '../../utils/stores/';
+import { formatInnerLink } from '../../utils/helpers/';
+import { CircleIconButton, MaterialIcon, NavigationContentApp, NavigationMenuList, PopupMain } from '../_shared/';
+
+function downloadOptionsList() {
+  const media_data = MediaPageStore.get('media-data');
+
+  const title = media_data.title;
+  const encodings_info = media_data.encodings_info;
+
+  const optionsList = {};
+
+  let k, g;
+  for (k in encodings_info) {
+    if (encodings_info.hasOwnProperty(k)) {
+      if (Object.keys(encodings_info[k]).length) {
+        for (g in encodings_info[k]) {
+          if (encodings_info[k].hasOwnProperty(g)) {
+            if ('success' === encodings_info[k][g].status && 100 === encodings_info[k][g].progress) {
+              optionsList[encodings_info[k][g].title] = {
+                text: k + ' - ' + g.toUpperCase() + ' (' + encodings_info[k][g].size + ')',
+                link: formatInnerLink(encodings_info[k][g].url, SiteContext._currentValue.url),
+                linkAttr: {
+                  target: '_blank',
+                  download: media_data.title + '_' + k + '_' + g.toUpperCase(),
+                },
+              };
+            }
+          }
+        }
+      }
+    }
+  }
+
+  optionsList.original_media_url = {
+    text: 'Original file (' + media_data.size + ')',
+    link: formatInnerLink(media_data.original_media_url, SiteContext._currentValue.url),
+    linkAttr: {
+      target: '_blank',
+      download: media_data.title,
+    },
+  };
+
+  return Object.values(optionsList);
+}
+
+function downloadOptionsPages() {
+  return {
+    main: (
+      <div className="main-options">
+        <PopupMain>
+          <NavigationMenuList items={downloadOptionsList()} />
+        </PopupMain>
+      </div>
+    ),
+  };
+}
+
+export function VideoMediaDownloadLink(props) {
+  const [popupContentRef, PopupContent, PopupTrigger] = usePopup();
+
+  const [downloadOptionsCurrentPage, setDownloadOptionsCurrentPage] = useState('main');
+
+  return (
+    <div className="video-downloads hidden-only-in-small">
+      <PopupTrigger contentRef={popupContentRef}>
+        <button>
+          <CircleIconButton type="span">
+            <MaterialIcon type="arrow_downward" />
+          </CircleIconButton>
+          <span>DOWNLOAD</span>
+        </button>
+      </PopupTrigger>
+
+      <div className={'nav-page-' + downloadOptionsCurrentPage}>
+        <PopupContent contentRef={popupContentRef}>
+          <NavigationContentApp
+            pageChangeCallback={null}
+            initPage="main"
+            focusFirstItemOnPageChange={false}
+            pages={downloadOptionsPages()}
+            pageChangeSelector={'.change-page'}
+            pageIdSelectorAttr={'data-page-id'}
+          />
+        </PopupContent>
+      </div>
+    </div>
+  );
+}