Merge pull request #30 from mconf/develop

chore: update from develop

package.json

@@ -1,19 +1,20 @@
 {
   "name": "bbb-playback",
-  "version": "3.4.0",
+  "version": "4.0.0",
   "homepage": "/playback/presentation/2.3",
   "dependencies": {
     "classnames": "^2.3.1",
     "darkreader": "^4.9.46",
-    "linkifyjs": "^2.1.9",
+    "linkify-react": "^3.0.4",
+    "linkifyjs": "^3.0.5",
     "prop-types": "^15.8.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-intl": "^5.24.6",
-    "react-router-dom": "^5.3.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-intl": "^5.25.0",
+    "react-router-dom": "^6.3.0",
     "react-scripts": "^4.0.3",
-    "sass": "^1.49.9",
-    "video.js": "^7.17.0",
+    "sass": "^1.50.0",
+    "video.js": "^7.18.1",
     "xml2js": "^0.4.23"
   },
   "scripts": {

src/components/bars/top/buttons/theme.js

@@ -19,12 +19,35 @@ const intlMessages = defineMessages({
   },
 });
 
+const themeOptions = {};
+
+const css = `
+.video-js .vjs-volume-level,
+.video-js .vjs-play-progress {
+  background-color: white;
+}
+`;
+
+const ignoreInlineStyle = [
+  'g > circle',
+  'g > line',
+  'g > path',
+  'g > polygon',
+  'g > polyline',
+  'g > foreignObject',
+];
+
+const fixes = {
+  css,
+  ignoreInlineStyle,
+};
+
 const Theme = () => {
   const intl = useIntl();
   const [dark, setDark] = useState(false);
 
   const toggleTheme = () => {
-    dark ? disable() : enable();
+    dark ? disable() : enable(themeOptions, fixes);
     setDark(prevDark => !prevDark);
   };
 

src/components/chat/messages/system/video/url.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { isEmpty } from 'utils/data/validators';
-import Linkify from 'linkifyjs/react';
+import Linkify from 'linkify-react';
 import cx from 'classnames';
 
 const propTypes = {
@@ -22,6 +22,7 @@ const Url = ({
 
   const options = {
     className: cx('linkified', { inactive: !active }),
+    target: '_blank',
   };
 
   return (

src/components/chat/messages/user/text.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Linkify from 'linkifyjs/react';
+import Linkify from 'linkify-react';
 import cx from 'classnames';
 
 const propTypes = {
@@ -23,6 +23,7 @@ const Text = ({
   if (hyperlink) {
     const options = {
       className: cx('linkified', { inactive: !active }),
+      target: '_blank',
     };
 
     return (

src/components/loader/index.js

@@ -1,4 +1,5 @@
 import React, { useRef, useState } from 'react';
+import { useParams } from "react-router-dom";
 import {
   defineMessages,
   useIntl,
@@ -16,7 +17,7 @@ import layout from 'utils/layout';
 import logger from 'utils/logger';
 import {
   getLayout,
-  getRecordId,
+  parseRecordId,
 } from 'utils/params';
 import './index.scss';
 
@@ -33,8 +34,9 @@ const initError = (recordId) => recordId ? null : ERROR.BAD_REQUEST;
 
 const Loader = ({ match }) => {
   const intl = useIntl();
+  const params = useParams();
+  const recordId = useRef(parseRecordId(params));
   const counter = useRef(0);
-  const recordId = useRef(getRecordId(match));
 
   const [error, setError] = useState(initError(recordId.current));
   const [, setUpdate] = useState(0);

src/components/notes/index.js

@@ -25,7 +25,10 @@ const Notes = () => {
       tabIndex="0"
     >
       <div className="notes">
-        <div dangerouslySetInnerHTML={{ __html: storage.notes }} />
+        <div
+          dangerouslySetInnerHTML={{ __html: storage.notes }}
+          style={{ width: '100%' }}
+        />
       </div>
     </div>
   );

src/components/router.js

@@ -2,7 +2,7 @@ import React from 'react';
 import {
   BrowserRouter,
   Route,
-  Switch,
+  Routes,
 } from 'react-router-dom';
 import { ERROR } from 'utils/constants';
 import Error from './error';
@@ -12,13 +12,13 @@ const Router = () => {
 
   return (
     <BrowserRouter basename={process.env.PUBLIC_URL}>
-      <Switch>
+      <Routes>
         <Route
           path="/:recordId"
-          component={Loader}
+          element={<Loader />}
         />
         <Route render={() => <Error code={ERROR.NOT_FOUND} />} />
-      </Switch>
+      </Routes>
     </BrowserRouter>
   );
 };

src/components/webcams/index.scss

@@ -39,11 +39,11 @@
   width: 100%;
 }
 
-.vjs-control-bar {
-  background-color: var(--control-bar-background-color) !important;
-  display: flex !important;
-  position: fixed !important;
-  z-index: 1 !important;
+.video-js .vjs-control-bar {
+  background-color: var(--control-bar-background-color);
+  display: flex;
+  position: fixed;
+  z-index: 1;
 }
 
 .vjs-menu-button-popup {

src/config.js

@@ -0,0 +1,91 @@
+const chat = {
+  align: 'bottom',
+  scroll: true,
+};
+
+const controls = {
+  about: true,
+  fullscreen: true,
+  search: true,
+  section: true,
+  swap: true,
+  theme: true,
+};
+
+const date = { enabled: true };
+
+const files = {
+  alternates: 'presentation_text.json',
+  captions: 'captions.json',
+  chat: 'slides_new.xml',
+  cursor: 'cursor.xml',
+  metadata: 'metadata.xml',
+  notes: 'notes.html',
+  panzooms: 'panzooms.xml',
+  polls: 'polls.json',
+  questions: 'questions.json',
+  screenshare: 'deskshare.xml',
+  shapes: 'shapes.svg',
+  videos: 'external_videos.json',
+};
+
+const locale = { default: 'en' };
+
+const medias = [
+  'mp4',
+  'webm',
+]
+
+const player = {
+  rps: 10,
+  rates: [ 0.5, 1, 1.25, 1.5, 1.75, 2 ],
+};
+
+const search = {
+  length: {
+    min: 3,
+    max: 32,
+  },
+};
+
+const shortcuts = {
+  enabled: true,
+  fullscreen: 'K',
+  play: 'Enter',
+  section: 'L',
+  seek: {
+    backward: 'ArrowLeft',
+    forward: 'ArrowRight',
+    seconds: 15,
+  },
+  skip: {
+    next: 'ArrowUp',
+    previous: 'ArrowDown',
+  },
+  swap: 'M',
+};
+
+const styles = {
+  default: null,
+  url: 'HOST',
+  valid: [],
+};
+
+const thumbnails = {
+  align: 'center',
+  scroll: true,
+};
+
+export {
+  chat,
+  controls,
+  date,
+  files,
+  locale,
+  medias,
+  player,
+  search,
+  shortcuts,
+  styles,
+  thumbnails,
+};

src/styles/colors.scss

@@ -1,7 +1,7 @@
 :root {
   --gray-darkest: rgb(17, 17, 17);
   --gray-darker: rgb(6, 23, 42);
-  --gray-dark: rgb(6, 23, 42);
+  --gray-dark: rgb(51, 51, 51);
   --gray: rgb(78, 90, 102);
   --gray-light: rgb(139, 154, 168);
   --gray-lighter: rgb(167, 179, 189);

src/utils/data/index.test.js

@@ -7,15 +7,9 @@ import {
   getMessageType,
   getPercentage,
   getPollLabel,
-  getRecordId,
 } from '.';
 import { ID } from 'utils/constants';
 
-const {
-  PRESENTATION,
-  SCREENSHARE,
-} = ID;
-
 it('get a poll bar from a percentage value', () => {
   expect(getBar(0))
     .toEqual('-');