chore: update from develop

deploy.sh

@@ -9,10 +9,12 @@ export REACT_APP_BBB_PLAYBACK_BUILD=$(git rev-parse --short HEAD)
 
 npm run-script build
 sudo rm -rf $BBB_PLAYBACK
-sudo cp -r ./build $BBB_PLAYBACK
+grep \"version\"\: package.json | sed -e 's|.*\ \"||g' -e 's|\".*||g' > bbb-playback-version
+sudo mkdir -p $BBB_PLAYBACK
+sudo cp -r ./build bbb-playback-version $BBB_PLAYBACK
 sudo chown --recursive bigbluebutton:bigbluebutton $BBB_PLAYBACK
 
-BBB_NGINX_FILES_PATH=/etc/bigbluebutton/nginx
+BBB_NGINX_FILES_PATH=/usr/share/bigbluebutton/nginx
 if [ ! -f $BBB_NGINX_FILES_PATH/playback.nginx ]; then
   sudo cp ./playback.nginx $BBB_NGINX_FILES_PATH
   sudo systemctl reload nginx

package.json

@@ -1,21 +1,29 @@
 {
   "name": "bbb-playback",
-  "version": "4.0.0",
+  "version": "5.0.2",
   "homepage": "/playback/presentation/2.3",
   "dependencies": {
+    "@tldraw/tldraw": "^1.27.0",
     "classnames": "^2.3.1",
     "darkreader": "^4.9.46",
     "linkify-react": "^3.0.4",
     "linkifyjs": "^3.0.5",
     "prop-types": "^15.8.1",
-    "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.50.0",
-    "video.js": "^7.18.1",
-    "xml2js": "^0.4.23"
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
+    "react-intl": "^6.2.5",
+    "react-router-dom": "^6.4.3",
+    "react-sizeme": "^3.0.2",
+    "sass": "^1.52.1",
+    "semver": "^7.5.2",
+    "video.js": "^7.21.1",
+    "videojs-seek-buttons": "^3.0.1"
+  },
+  "devDependencies": {
+    "react-scripts": "^5.0.1"
+  },
+  "overrides": {
+    "nth-check": "2.0.1"
   },
   "scripts": {
     "start": "react-scripts start",

public/index.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <link href="%PUBLIC_URL%/styles/video-js.min.css" rel="stylesheet" />
+    <link href="%PUBLIC_URL%/styles/videojs-seek-buttons.css" rel="stylesheet" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta

src/components/chat/messages/index.js

@@ -83,6 +83,8 @@ const Messages = ({
                     url={item.url}
                     timestamp={timestamp}
                     type={item.type}
+                    isAudio={item.isAudio}
+                    isLocal={item.isLocal}
                   />
                 </span>
               );

src/components/chat/messages/system/poll/result.js

@@ -35,7 +35,7 @@ const Result = ({
 
         return(
           <div className="poll-label">
-            {id + 1}: <span className="poll-bar">{getBar(percentage)}</span> {percentage}%
+            {id + 1}: {numVotes} <span className="poll-bar">{getBar(percentage)}</span> {percentage}%
           </div>
         );
       })}

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

@@ -9,41 +9,57 @@ import SystemMessage from 'components/chat/messages/system/message';
 import { ID } from 'utils/constants';
 
 const intlMessages = defineMessages({
-  name: {
+  videoName: {
     id: 'player.chat.message.video.name',
     description: 'Label for the video message name',
   },
+  audioName: {
+    id: 'player.chat.message.audio.name',
+    description: 'Label for the audio message name',
+  },
 });
 
 const propTypes = {
   active: PropTypes.bool,
   url: PropTypes.url,
   timestamp: PropTypes.number,
+  isAudio: PropTypes.bool,
+  isLocal: PropTypes.bool,
 };
 
 const defaultProps = {
   active: false,
   url: '',
   timestamp: 0,
+  isAudio: false,
+  isLocal: false,
 };
 
+// leave just the fileName for local files
+const formatUrl = (url) => {
+  const urlParams = new URLSearchParams(url);
+  return Array.from(urlParams.values())[0];
+}
+
 const Video = ({
   active,
   url,
   timestamp,
+  isAudio,
+  isLocal,
 }) => {
   const intl = useIntl();
 
   return (
     <SystemMessage
       active={active}
-      icon={ID.VIDEOS}
-      name={intl.formatMessage(intlMessages.name)}
+      icon={isAudio ? 'audios' : ID.VIDEOS}
+      name={isAudio ? intl.formatMessage(intlMessages.audioName) : intl.formatMessage(intlMessages.videoName)}
       timestamp={timestamp}
     >
       <Url
         active={active}
-        url={url}
+        url={isLocal ? formatUrl(url) : url}
       />
     </SystemMessage>
   );

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

@@ -28,7 +28,7 @@ const Text = ({
 
     return (
       <Linkify options={options}>
-        {text}
+        {text.replace(/(\S)(https?:\/\/)/g, '$1 $2')}
       </Linkify>
     );
   }

src/components/player/buttons/index.scss

@@ -21,7 +21,7 @@
 .fullscreen-button {
   margin-top: $margin;
   position: fixed;
-  z-index: 1;
+  z-index: 2;
 
   [dir="ltr"] & {
     right: 0;

src/components/player/content/index.js

@@ -1,12 +1,14 @@
 import React from 'react';
 import cx from 'classnames';
 import Presentation from 'components/presentation';
+import TldrawPresentation from 'components/tldraw';
 import Screenshare from 'components/screenshare';
 import Thumbnails from 'components/thumbnails';
 import FullscreenButton from 'components/player/buttons/fullscreen';
 import { LAYOUT } from 'utils/constants';
 import { isEqual } from 'utils/data/validators';
 import layout from 'utils/layout';
+import storage from 'utils/data/storage';
 import './index.scss';
 
 const Content = ({
@@ -18,6 +20,10 @@ const Content = ({
 }) => {
   if (layout.single) return null;
 
+  const isTldrawWhiteboard = storage.tldraw.length ||
+                             storage.panzooms.tldraw ||
+                             storage.cursor.tldraw;
+
   return (
     <div className={cx('content', { 'swapped-content': swap })}>
       <FullscreenButton
@@ -27,7 +33,7 @@ const Content = ({
         toggleFullscreen={toggleFullscreen}
       />
       <div className="top-content">
-        <Presentation />
+        {isTldrawWhiteboard ? <TldrawPresentation /> : <Presentation />}
         {layout.screenshare ? <Screenshare /> : null}
       </div>
       <div className={cx('bottom-content', { 'inactive': fullscreen })}>

src/components/presentation/canvas/index.js

@@ -48,28 +48,28 @@ const Canvas = () => {
         canvas.push(
           <circle
             style={style}
-            cx={data.cx}
-            cy={data.cy}
-            r={data.r}
+            cx={data._cx}
+            cy={data._cy}
+            r={data._r}
           />
         );
         break;
       case SHAPES.LINE:
         canvas.push(
           <line
             style={style}
-            x1={data.x1}
-            y1={data.y1}
-            x2={data.x2}
-            y2={data.y2}
+            x1={data._x1}
+            y1={data._y1}
+            x2={data._x2}
+            y2={data._y2}
           />
         );
         break;
       case SHAPES.PATH:
         canvas.push(
           <path
             style={style}
-            d={data.d}
+            d={data._d}
           />
         );
         break;
@@ -86,26 +86,26 @@ const Canvas = () => {
         canvas.push(
           <polygon
             style={style}
-            points={data.points}
+            points={data._points}
           />
         );
         break;
       case SHAPES.POLYLINE:
         canvas.push(
           <polyline
             style={style}
-            points={data.points}
+            points={data._points}
           />
         );
         break;
       case SHAPES.TEXT:
         canvas.push(
           <foreignObject
             style={style}
-            height={data.height}
-            width={data.width}
-            x={data.x}
-            y={data.y}
+            height={data._height}
+            width={data._width}
+            x={data._x}
+            y={data._y}
           >
             <div xmlns="http://www.w3.org/1999/xhtml">
               {data.text.split('\r').map(line => <span>{line}<br /></span>)}

src/components/presentation/canvas/poll.js

@@ -16,21 +16,21 @@ const Poll = ({
     return (
       <g style={style}>
         <rect
-          fill={rect.fill}
-          height={rect.height}
-          stroke={rect.stroke}
-          strokeWidth={rect['stroke-width']}
-          width={rect.width}
-          x={rect.x}
-          y={rect.y}
+          fill={rect._fill}
+          height={rect._height}
+          stroke={rect._stroke}
+          strokeWidth={rect['_stroke-width']}
+          width={rect._width}
+          x={rect._x}
+          y={rect._y}
         />
         <image
-          height={image.height}
-          transform={image.transform}
-          width={image.width}
-          x={image.x}
-          href={buildFileURL(image['xlink:href'])}
-          y={image.y}
+          height={image._height}
+          transform={image._transform}
+          width={image._width}
+          x={image._x}
+          href={buildFileURL(image['_xlink:href'])}
+          y={image._y}
         />
       </g>
     );
@@ -39,11 +39,11 @@ const Poll = ({
      return (
       <g style={style}>
         <image
-          height={image.height}
-          width={image.width}
-          x={image.x}
-          href={buildFileURL(image['xlink:href'])}
-          y={image.y}
+          height={image._height}
+          width={image._width}
+          x={image._x}
+          href={buildFileURL(image['_xlink:href'])}
+          y={image._y}
         />
       </g>
     );

src/components/tldraw/cursor.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import { useCurrentIndex } from 'components/utils/hooks';
+import storage from 'utils/data/storage';
+import './index.scss';
+
+const getCursor = (index, size, pageState) => {
+  const inactive = {
+    x: -1,
+    y: -1,
+  }
+
+  if (index === -1) return inactive;
+
+  const currentData = storage.cursor[index];
+  if (currentData.x === -1 && currentData.y === -1) return inactive;
+
+  let _x = null;
+  let _y = null;
+
+  _x = (currentData.x + pageState?.camera?.point[0]) * pageState?.camera?.zoom;
+  _y = (currentData.y + pageState?.camera?.point[1]) * pageState?.camera?.zoom;
+
+  if (_x > size.width || _y > size.height ) return inactive;
+
+  return {
+    x: _x,
+    y: _y
+  };
+};
+
+const Cursor = ({ tldrawAPI, size }) => {
+  const currentIndex = useCurrentIndex(storage.cursor);
+  const { x, y } = getCursor(currentIndex, size, tldrawAPI?.getPageState());
+
+  if (x === -1 || y === -1) return null;
+
+  return (
+    <div
+      style={{
+        zIndex: 2,
+        position: "absolute",
+        left: x - 5.0,
+        top: y - 5.0,
+        width: 10,
+        height: 10,
+        borderRadius: "50%",
+        background: "#C70039",
+        pointerEvents: "none",
+      }}
+    />
+  );
+};
+
+export default Cursor;