From bc2cf2820e64d612035b573f4f60172115d10d7c Mon Sep 17 00:00:00 2001 From: Pedro Beschorner Marin Date: Sat, 31 Jul 2021 16:46:03 -0300 Subject: [PATCH 1/4] fix(loader): record id mismatch error --- src/components/loader/index.js | 17 ++++++++++------- src/components/router.js | 4 ++-- src/config.json | 13 ------------- src/utils/constants.js | 15 +++++++++++++++ 4 files changed, 27 insertions(+), 22 deletions(-) diff --git a/src/components/loader/index.js b/src/components/loader/index.js index 4c8a09f9..f0aad102 100644 --- a/src/components/loader/index.js +++ b/src/components/loader/index.js @@ -8,7 +8,10 @@ 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, @@ -29,7 +32,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 +43,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 +62,7 @@ const Loader = ({ match }) => { case 'xml': return response.text(); default: - setError(config.error['BAD_REQUEST']); + setError(ERROR.BAD_REQUEST); return null; } } else { @@ -71,8 +74,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 +99,7 @@ const Loader = ({ match }) => { update(); } else { // TODO: Handle audio medias - setError(config.error['NOT_FOUND']); + setError(ERROR.NOT_FOUND); } }); }; diff --git a/src/components/router.js b/src/components/router.js index f034d887..473df4d9 100644 --- a/src/components/router.js +++ b/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} /> - } /> + } /> ); diff --git a/src/config.json b/src/config.json index ecedc642..53864d41 100644 --- a/src/config.json +++ b/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", diff --git a/src/utils/constants.js b/src/utils/constants.js index f58aa4c3..ca442d79 100644 --- a/src/utils/constants.js +++ b/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', @@ -72,6 +86,7 @@ const ROUTER = getRouter(); export { BUILD, + ERROR, ID, LAYOUT, MEDIA_ROOT_URL, From 8b64195f51faa6b8fc23efa186a0fc6c55fd6c61 Mon Sep 17 00:00:00 2001 From: Pedro Beschorner Marin Date: Sat, 31 Jul 2021 19:21:23 -0300 Subject: [PATCH 2/4] feat(loader): content feedback --- src/components/loader/data/index.js | 21 +++++++++++++++++ src/components/loader/data/index.scss | 24 +++++++++++++++++++ src/components/loader/data/item.js | 34 +++++++++++++++++++++++++++ src/components/loader/index.js | 10 +++++++- src/components/loader/index.scss | 13 ++++++++++ src/components/modals/about/body.js | 27 ++++++++------------- src/utils/constants.js | 11 +++++++++ src/utils/data/index.js | 24 +++++++++++++++++++ src/utils/data/validators.js | 3 +++ 9 files changed, 149 insertions(+), 18 deletions(-) create mode 100644 src/components/loader/data/index.js create mode 100644 src/components/loader/data/index.scss create mode 100644 src/components/loader/data/item.js diff --git a/src/components/loader/data/index.js b/src/components/loader/data/index.js new file mode 100644 index 00000000..acb69b4a --- /dev/null +++ b/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 ( +
+ {CONTENT.map((item) => ( + + ))} +
+ ); +}; + +export default Data; diff --git a/src/components/loader/data/index.scss b/src/components/loader/data/index.scss new file mode 100644 index 00000000..cbc59902 --- /dev/null +++ b/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; + } +} diff --git a/src/components/loader/data/item.js b/src/components/loader/data/item.js new file mode 100644 index 00000000..036c26d5 --- /dev/null +++ b/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 ( +
+
+
+ ); +}; + +Item.propTypes = propTypes; +Item.defaultProps = defaultProps; + +export default Item; diff --git a/src/components/loader/index.js b/src/components/loader/index.js index f0aad102..500ad96f 100644 --- a/src/components/loader/index.js +++ b/src/components/loader/index.js @@ -4,6 +4,7 @@ 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'; @@ -16,6 +17,7 @@ import { buildFileURL, getFileName, getFileType, + getLoadedData, } from 'utils/data'; import { getLayout, @@ -143,7 +145,13 @@ const Loader = ({ match }) => { className="loader-wrapper" id={ID.LOADER} > - +
+
+ +
+
+ +
); }; diff --git a/src/components/loader/index.scss b/src/components/loader/index.scss index 3db44c49..35ecad7e 100644 --- a/src/components/loader/index.scss +++ b/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; diff --git a/src/components/modals/about/body.js b/src/components/modals/about/body.js index 884d54d6..1fc0b253 100644 --- a/src/components/modals/about/body.js +++ b/src/components/modals/about/body.js @@ -1,20 +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.EXTERNAL_VIDEOS, - ID.NOTES, - ID.SCREENSHARE, - ID.CAPTIONS, -]; - const propTypes = { content: PropTypes.object, users: PropTypes.number, @@ -29,18 +21,19 @@ const Body = ({ content, users, }) => { - const data = { - ...content, - users, - }; return (
+ {CONTENT.map((item) => ( ))}
diff --git a/src/utils/constants.js b/src/utils/constants.js index ca442d79..94558306 100644 --- a/src/utils/constants.js +++ b/src/utils/constants.js @@ -42,6 +42,16 @@ const ID = { VIDEO: 'video', }; +const CONTENT = [ + ID.PRESENTATION, + ID.CHAT, + ID.POLLS, + ID.EXTERNAL_VIDEOS, + ID.NOTES, + ID.SCREENSHARE, + ID.CAPTIONS, +]; + const LAYOUT = { CONTENT: 'content', DISABLED: 'disabled', @@ -86,6 +96,7 @@ const ROUTER = getRouter(); export { BUILD, + CONTENT, ERROR, ID, LAYOUT, diff --git a/src/utils/data/index.js b/src/utils/data/index.js index 2ee079f5..30e2705b 100644 --- a/src/utils/data/index.js +++ b/src/utils/data/index.js @@ -4,6 +4,7 @@ import { hasPresentation, hasProperty, isCurrent, + isDefined, isEmpty, isEnabled, isVisible, @@ -222,6 +223,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; @@ -313,6 +336,7 @@ export { getDraws, getFileName, getFileType, + getLoadedData, getMessageType, getPercentage, getPollLabel, diff --git a/src/utils/data/validators.js b/src/utils/data/validators.js index 39ab0fdb..b453d7de 100644 --- a/src/utils/data/validators.js +++ b/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, From 172d4d1150a9c375c81452661934c2c1df7c7d63 Mon Sep 17 00:00:00 2001 From: Pedro Beschorner Marin Date: Wed, 11 Aug 2021 09:05:17 -0300 Subject: [PATCH 3/4] fix(presentation): check on slide index change --- src/components/presentation/index.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/presentation/index.js b/src/components/presentation/index.js index 87d4cbe0..c1319a87 100644 --- a/src/components/presentation/index.js +++ b/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; From a0435fe88c55cc32e7d0b8dfbed1a502754a1623 Mon Sep 17 00:00:00 2001 From: Pedro Beschorner Marin Date: Wed, 11 Aug 2021 09:17:24 -0300 Subject: [PATCH 4/4] refactor(loader): disable temporarily data feedback There's some extra refurbish to be done on this feature before shipping it. --- src/components/loader/index.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/loader/index.js b/src/components/loader/index.js index 500ad96f..dcd02757 100644 --- a/src/components/loader/index.js +++ b/src/components/loader/index.js @@ -4,7 +4,7 @@ import { useIntl, } from 'react-intl'; import config from 'config'; -import Data from './data'; +//import Data from './data'; import Dots from './dots'; import Error from 'components/error'; import Player from 'components/player'; @@ -17,7 +17,7 @@ import { buildFileURL, getFileName, getFileType, - getLoadedData, +// getLoadedData, } from 'utils/data'; import { getLayout, @@ -150,7 +150,7 @@ const Loader = ({ match }) => {
- + {/**/}
);