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-06 12:32:30 -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/pages/_VideoMediaPage.js
+++ b/frontend/src/static/js/pages/_VideoMediaPage.js
@@ -0,0 +1,128 @@
+import React from 'react';
+// FIXME: 'VideoViewerStore' is used only in case of video media, but is included in every media page code.
+import { PageStore, MediaPageStore, VideoViewerStore } from '../utils/stores/';
+import { MediaPageActions } from '../utils/actions/';
+import ViewerInfoVideo from '../components/media-page/ViewerInfoVideo';
+import ViewerError from '../components/media-page/ViewerError';
+import ViewerSidebar from '../components/media-page/ViewerSidebar';
+import { Page } from './_Page';
+import _MediaPage from './_MediaPage';
+
+const wideLayoutBreakpoint = 1216;
+
+export class _VideoMediaPage extends Page {
+  constructor(props) {
+    super(props, 'media');
+
+    this.state = {
+      wideLayout: wideLayoutBreakpoint <= window.innerWidth,
+      mediaLoaded: false,
+      mediaLoadFailed: false,
+      isVideoMedia: false,
+      theaterMode: false, // FIXME: Used only in case of video media, but is included in every media page code.
+      pagePlaylistLoaded: false,
+      pagePlaylistData: MediaPageStore.get('playlist-data'),
+    };
+
+    this.onWindowResize = this.onWindowResize.bind(this);
+    this.onMediaLoad = this.onMediaLoad.bind(this);
+    this.onMediaLoadError = this.onMediaLoadError.bind(this);
+    this.onPagePlaylistLoad = this.onPagePlaylistLoad.bind(this);
+
+    MediaPageStore.on('loaded_media_data', this.onMediaLoad);
+    MediaPageStore.on('loaded_media_error', this.onMediaLoadError);
+    MediaPageStore.on('loaded_page_playlist_data', this.onPagePlaylistLoad);
+  }
+
+  componentDidMount() {
+    MediaPageActions.loadMediaData();
+    // FIXME: Is not neccessary to check on every window dimension for changes...
+    PageStore.on('window_resize', this.onWindowResize);
+  }
+
+  onWindowResize() {
+    this.setState({
+      wideLayout: wideLayoutBreakpoint <= window.innerWidth,
+    });
+  }
+
+  onPagePlaylistLoad() {
+    this.setState({
+      pagePlaylistLoaded: true,
+      pagePlaylistData: MediaPageStore.get('playlist-data'),
+    });
+  }
+
+  onMediaLoad() {
+    const isVideoMedia = 'video' === MediaPageStore.get('media-type');
+
+    if (isVideoMedia) {
+      this.onViewerModeChange = this.onViewerModeChange.bind(this);
+
+      VideoViewerStore.on('changed_viewer_mode', this.onViewerModeChange);
+
+      this.setState({
+        mediaLoaded: true,
+        isVideoMedia: isVideoMedia,
+        theaterMode: VideoViewerStore.get('in-theater-mode'),
+      });
+    } else {
+      this.setState({
+        mediaLoaded: true,
+        isVideoMedia: isVideoMedia,
+      });
+    }
+  }
+
+  onViewerModeChange() {
+    this.setState({ theaterMode: VideoViewerStore.get('in-theater-mode') });
+  }
+
+  onMediaLoadError(a) {
+    this.setState({ mediaLoadFailed: true });
+  }
+
+  pageContent() {
+    const viewerClassname = 'cf viewer-section' + (this.state.theaterMode ? ' theater-mode' : ' viewer-wide');
+    const viewerNestedClassname = 'viewer-section-nested' + (this.state.theaterMode ? ' viewer-section' : '');
+
+    return this.state.mediaLoadFailed ? (
+      <div className={viewerClassname}>
+        <ViewerError />
+      </div>
+    ) : (
+      <div className={viewerClassname}>
+        {[
+          <div className="viewer-container" key="viewer-container">
+            {this.state.mediaLoaded && this.state.pagePlaylistLoaded
+              ? this.viewerContainerContent(MediaPageStore.get('media-data'))
+              : null}
+          </div>,
+          <div key="viewer-section-nested" className={viewerNestedClassname}>
+            {!this.state.wideLayout || (this.state.isVideoMedia && this.state.theaterMode)
+              ? [
+                  <ViewerInfoVideo key="viewer-info" />,
+                  this.state.pagePlaylistLoaded ? (
+                    <ViewerSidebar
+                      key="viewer-sidebar"
+                      mediaId={MediaPageStore.get('media-id')}
+                      playlistData={MediaPageStore.get('playlist-data')}
+                    />
+                  ) : null,
+                ]
+              : [
+                  this.state.pagePlaylistLoaded ? (
+                    <ViewerSidebar
+                      key="viewer-sidebar"
+                      mediaId={MediaPageStore.get('media-id')}
+                      playlistData={MediaPageStore.get('playlist-data')}
+                    />
+                  ) : null,
+                  <ViewerInfoVideo key="viewer-info" />,
+                ]}
+          </div>,
+        ]}
+      </div>
+    );
+  }
+}