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-10-06 22:32:41 +07:00 · 2021-07-11 18:01:34 +03:00
parent 060bb45725
commit aa6520daac
555 changed files with 201927 additions and 66002 deletions
@@ -0,0 +1,71 @@
+import React, { useState, useRef, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { PageStore } from '../../utils/stores/';
+
+export function ReportForm(props) {
+  const formActionsBottomRef = useRef(null);
+  const reportMessageTextRef = useRef(null);
+
+  const [maxFormContentHeight, setMaxFormContentHeight] = useState(null);
+
+  function onWindowResize() {
+    setMaxFormContentHeight(window.innerHeight - (56 + 2 * 24 + formActionsBottomRef.current.offsetHeight));
+  }
+
+  function cancelReportForm(ev) {
+    ev.preventDefault();
+    if (void 0 !== props.cancelReportForm) {
+      props.cancelReportForm();
+    }
+  }
+
+  function submitReportForm(ev) {
+    const descr = reportMessageTextRef.current.value.trim();
+    if ('' !== descr) {
+      ev.preventDefault();
+      if (void 0 !== props.submitReportForm) {
+        props.submitReportForm(descr);
+      }
+    }
+  }
+
+  useEffect(() => {
+    onWindowResize();
+    PageStore.on('window_resize', onWindowResize);
+    return () => {
+      PageStore.removeListener('window_resize', onWindowResize);
+    };
+  }, []);
+
+  return (
+    <form>
+      <div
+        className="report-form"
+        style={null !== maxFormContentHeight ? { maxHeight: maxFormContentHeight + 'px' } : null}
+      >
+        <div className="form-title">Report media</div>
+        <div className="form-field">
+          <span className="label">URL</span>
+          <input type="text" readOnly value={props.mediaUrl} />
+        </div>
+        <div className="form-field">
+          <span className="label">Description</span>
+          <textarea ref={reportMessageTextRef} required></textarea>
+        </div>
+        <div className="form-field form-help-text">Reported media is reviewed</div>
+      </div>
+      <div ref={formActionsBottomRef} className="form-actions-bottom">
+        <button className="cancel" onClick={cancelReportForm}>
+          CANCEL
+        </button>
+        <button onClick={submitReportForm}>SUBMIT</button>
+      </div>
+    </form>
+  );
+}
+
+ReportForm.propTypes = {
+  mediaUrl: PropTypes.string.isRequired,
+  cancelReportForm: PropTypes.func,
+  submitReportForm: PropTypes.func,
+};