Merge pull request #13 from mconf/develop

chore: update from develop

src/components/loader/data/index.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import Item from './item';
+import { CONTENT } from 'utils/constants';
+import './index.scss';
+
+const Data = ({ data }) => {
+
+  return (
+    <div className="data-wrapper">
+       {CONTENT.map((item) => (
+        <Item
+          icon={item}
+          key={item}
+          value={data[item]}
+        />
+      ))}
+    </div>
+  );
+};
+
+export default Data;

src/components/loader/data/index.scss

@@ -0,0 +1,24 @@
+@import 'src/styles/icons';
+@import 'src/styles/sizes';
+
+.data-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-evenly;
+  overflow-x: hidden;
+  overflow-y: auto;
+
+  .item {
+    box-sizing: border-box;
+    color: var(--loader-color);
+    display: flex;
+    font-size: xx-large;
+    font-weight: var(--font-weight-semi-bold);
+    padding: $padding;
+    opacity: .5;
+  }
+
+  .loaded {
+    opacity: 1;
+  }
+}

src/components/loader/data/item.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import './index.scss';
+
+const propTypes = {
+  icon: PropTypes.string,
+  value: PropTypes.oneOfType([
+    PropTypes.bool,
+    PropTypes.string,
+  ]),
+};
+
+const defaultProps = {
+  icon: '',
+  value: false,
+};
+
+const Item = ({
+  icon,
+  value,
+}) => {
+
+  return (
+    <div className={cx('item', { loaded: value })}>
+      <div className={`icon-${icon}`} />
+    </div>
+  );
+};
+
+Item.propTypes = propTypes;
+Item.defaultProps = defaultProps;
+
+export default Item;

src/components/loader/index.js

@@ -4,15 +4,20 @@ import {
   useIntl,
 } from 'react-intl';
 import config from 'config';
+//import Data from './data';
 import Dots from './dots';
 import Error from 'components/error';
 import Player from 'components/player';
 import { build } from 'utils/builder';
-import { ID } from 'utils/constants';
+import {
+  ERROR,
+  ID,
+} from 'utils/constants';
 import {
   buildFileURL,
   getFileName,
   getFileType,
+//  getLoadedData,
 } from 'utils/data';
 import {
   getLayout,
@@ -29,7 +34,7 @@ const intlMessages = defineMessages({
   },
 });
 
-const initError = (recordId) => recordId ? null : config.error['NOT_FOUND'];
+const initError = (recordId) => recordId ? null : ERROR.BAD_REQUEST;
 
 const Loader = ({ match }) => {
   const intl = useIntl();
@@ -40,7 +45,7 @@ const Loader = ({ match }) => {
   const started = useRef(false);
   const time = useRef(getTime());
 
-  const [error, setError] = useState(initError(recordId));
+  const [error, setError] = useState(initError(recordId.current));
   const [loaded, setLoaded] = useState(false);
 
   const fetchFile = (file) => {
@@ -59,7 +64,7 @@ const Loader = ({ match }) => {
           case 'xml':
             return response.text();
           default:
-            setError(config.error['BAD_REQUEST']);
+            setError(ERROR.BAD_REQUEST);
             return null;
         }
       } else {
@@ -71,8 +76,8 @@ const Loader = ({ match }) => {
         if (content) logger.debug(ID.LOADER, 'builded', file);
         data.current[getFileName(file)] = content;
         update();
-      }).catch(error => setError(config.error['BAD_REQUEST']));
-    }).catch(error => setError(config.error['NOT_FOUND']));
+      }).catch(error => setError(ERROR.BAD_REQUEST));
+    }).catch(error => setError(ERROR.NOT_FOUND));
   };
 
   const fetchMedia = () => {
@@ -96,7 +101,7 @@ const Loader = ({ match }) => {
         update();
       } else {
         // TODO: Handle audio medias
-        setError(config.error['NOT_FOUND']);
+        setError(ERROR.NOT_FOUND);
       }
     });
   };
@@ -140,7 +145,13 @@ const Loader = ({ match }) => {
       className="loader-wrapper"
       id={ID.LOADER}
     >
-      <Dots />
+      <div className="loader-top" />
+      <div className="loader-middle">
+        <Dots />
+      </div>
+      <div className="loader-bottom">
+        {/*<Data data={getLoadedData(data.current)} />*/}
+      </div>
     </div>
   );
 };

src/components/loader/index.scss

@@ -6,10 +6,23 @@ $dots-wrapper-width: 100px;
 .loader-wrapper {
   background-color: var(--loader-background-color);
   display: flex;
+  flex-direction: column;
   height: 100%;
   width: 100%;
 }
 
+.loader-top,
+.loader-middle,
+.loader-bottom {
+  display: flex;
+  height: 100%;
+}
+
+.loader-bottom {
+  align-items: flex-start;
+  justify-content: center;
+}
+
 .dots-wrapper {
   margin: auto;
   text-align: center;

src/components/modals/about/body.js

@@ -1,21 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Item from './item';
-import { ID } from 'utils/constants';
+import {
+  CONTENT,
+  ID,
+} from 'utils/constants';
 import './index.scss';
 
-const CONTENT = [
-  ID.USERS,
-  ID.PRESENTATION,
-  ID.CHAT,
-  ID.POLLS,
-  ID.QUESTIONS,
-  ID.EXTERNAL_VIDEOS,
-  ID.NOTES,
-  ID.SCREENSHARE,
-  ID.CAPTIONS,
-];
-
 const propTypes = {
   content: PropTypes.object,
   users: PropTypes.number,
@@ -30,18 +21,19 @@ const Body = ({
   content,
   users,
 }) => {
-  const data = {
-    ...content,
-    users,
-  };
 
   return (
     <div className="about-body">
+      <Item
+        icon={ID.USERS}
+        key={ID.USERS}
+        value={users}
+      />
       {CONTENT.map((item) => (
         <Item
           icon={item}
           key={item}
-          value={data[item]}
+          value={content[item]}
         />
       ))}
     </div>

src/components/presentation/index.js

@@ -145,6 +145,8 @@ const areEqual = (prevProps, nextProps) => {
 
   if (prevProps.currentPanzoomIndex !== nextProps.currentPanzoomIndex) return false;
 
+  if (prevProps.currentSlideIndex !== nextProps.currentSlideIndex) return false;
+
   if (!isEqual(prevProps.draws, nextProps.draws)) return false;
 
   if (!isEqual(prevProps.drawsInterval, nextProps.drawsInterval)) return false;

src/components/router.js

@@ -4,7 +4,7 @@ import {
   Route,
   Switch,
 } from 'react-router-dom';
-import { error } from 'config';
+import { ERROR } from 'utils/constants';
 import Error from './error';
 import Loader from './loader';
 
@@ -17,7 +17,7 @@ const Router = () => {
           path="/:recordId"
           component={Loader}
         />
-        <Route render={() => <Error code={error['NOT_FOUND']} />} />
+        <Route render={() => <Error code={ERROR.NOT_FOUND} />} />
       </Switch>
     </BrowserRouter>
   );

src/config.json

@@ -11,19 +11,6 @@
     "swap": true,
     "thumbnails": true
   },
-  "error": {
-    "BAD_REQUEST": 400,
-    "UNAUTHORIZED": 401,
-    "PAYMENT_REQUIRED": 402,
-    "FORBIDDEN": 403,
-    "NOT_FOUND": 404,
-    "METHOD_NOT_ALLOWED": 405,
-    "NOT_ACCEPTABLE": 406,
-    "PROXY_AUTHENTICATION_REQUIRED": 407,
-    "REQUEST_TIMEOUT": 408,
-    "CONFLICT": 409,
-    "GONE": 410
-  },
   "files": {
     "data": {
       "alternates": "presentation_text.json",

src/utils/constants.js

@@ -2,6 +2,20 @@ const BUILD = process.env.REACT_APP_BBB_PLAYBACK_BUILD;
 const MEDIA_ROOT_URL = process.env.REACT_APP_MEDIA_ROOT_URL;
 const NO_ROUTER = process.env.REACT_APP_NO_ROUTER;
 
+const ERROR = {
+  BAD_REQUEST: 400,
+  UNAUTHORIZED: 401,
+  PAYMENT_REQUIRED: 402,
+  FORBIDDEN: 403,
+  NOT_FOUND: 404,
+  METHOD_NOT_ALLOWED: 405,
+  NOT_ACCEPTABLE: 406,
+  PROXY_AUTHENTICATION_REQUIRED: 407,
+  REQUEST_TIMEOUT: 408,
+  CONFLICT: 409,
+  GONE: 410,
+};
+
 const ID = {
   ABOUT: 'about',
   ALTERNATES: 'alternates',
@@ -29,6 +43,17 @@ const ID = {
   VIDEO: 'video',
 };
 
+const CONTENT = [
+  ID.PRESENTATION,
+  ID.CHAT,
+  ID.POLLS,
+  ID.QUESTIONS,
+  ID.EXTERNAL_VIDEOS,
+  ID.NOTES,
+  ID.SCREENSHARE,
+  ID.CAPTIONS,
+];
+
 const LAYOUT = {
   CONTENT: 'content',
   DISABLED: 'disabled',
@@ -73,6 +98,8 @@ const ROUTER = getRouter();
 
 export {
   BUILD,
+  CONTENT,
+  ERROR,
   ID,
   LAYOUT,
   MEDIA_ROOT_URL,

src/utils/data/index.js

@@ -4,6 +4,7 @@ import {
   hasPresentation,
   hasProperty,
   isCurrent,
+  isDefined,
   isEmpty,
   isEnabled,
   isVisible,
@@ -225,6 +226,28 @@ const getFileName = file => file.split('.').shift();
 
 const getFileType = file => file.split('.').pop();
 
+const getLoadedData = data => {
+  const captions = getData(data, ID.CAPTIONS);
+  const chat = getData(data, ID.CHAT);
+  const notes = getData(data, ID.NOTES);
+  const polls = getData(data, ID.POLLS);
+  const externalVideos = getData(data, ID.EXTERNAL_VIDEOS);
+  const screenshare = getData(data, ID.SCREENSHARE);
+  const shapes = getData(data, ID.SHAPES);
+
+  const loadedData = {
+    captions: isDefined(captions),
+    chat: isDefined(chat),
+    notes: isDefined(notes),
+    polls: isDefined(polls),
+    externalVideos: isDefined(externalVideos),
+    presentation: isDefined(shapes),
+    screenshare: isDefined(screenshare),
+  };
+
+  return loadedData;
+};
+
 const getPercentage = (value, total) => {
   if (total === 0) return 0;
 
@@ -317,6 +340,7 @@ export {
   getDraws,
   getFileName,
   getFileType,
+  getLoadedData,
   getMessageType,
   getPercentage,
   getPollLabel,

src/utils/data/validators.js

@@ -92,6 +92,8 @@ const isCurrent = (data, index, time) => {
   return current;
 };
 
+const isDefined = data => typeof data !== 'undefined';
+
 const isEmpty = data => {
   const isArray = isValid('array', data);
   const isString = isValid('string', data);
@@ -171,6 +173,7 @@ export {
   isActive,
   isContentVisible,
   isCurrent,
+  isDefined,
   isEmpty,
   isEnabled,
   isEqual,