Merge pull request #42 from bigbluebutton/develop

Sync upstream@v5.4.3

Author: prlanzarin

.github/workflows/publish-docker-image.yml

@@ -2,21 +2,34 @@ name: Publish Docker image
 
 on:
   push:
+    branches:
+      - "**"
     tags:
       - "v*.*.*"
-  pull_request:
 
 jobs:
-  build_and_publish:
-    name: Build and push Docker image to container registry
+  build:
+    name: Build Docker image for ${{ matrix.platform }}
     runs-on: ubuntu-latest
     permissions:
       packages: write
       contents: read
+      attestations: write
+      id-token: write
+    strategy:
+      matrix:
+        platform:
+          - linux/amd64
+          - linux/arm64
     steps:
       - name: Check out the repo
         uses: actions/checkout@v4
 
+      - name: Prepare
+        run: |
+          platform=${{ matrix.platform }}
+          echo "PLATFORM_PAIR=${platform//\//-}" >> $GITHUB_ENV
+
       - name: Log in to the Container registry
         uses: docker/login-action@v3
         with:
@@ -30,11 +43,11 @@ jobs:
         with:
           images: ghcr.io/${{ github.repository }}
           tags: |
+            type=ref,event=branch,prefix=dev-
             type=ref,event=pr
             type=semver,pattern={{version}}
             type=semver,pattern={{major}}.{{minor}}
             type=semver,pattern={{major}}
-            type=sha
 
       - name: Set up QEMU
         uses: docker/setup-qemu-action@v3
@@ -44,8 +57,70 @@ jobs:
 
       - name: Build and push Docker images
         uses: docker/build-push-action@v6
+        id: push
+        env:
+          DOCKER_BUILDKIT: 1
         with:
           context: .
+          platforms: ${{ matrix.platform }}
           push: ${{ github.event_name != 'pull_request' }}
           tags: ${{ steps.meta.outputs.tags }}
           labels: ${{ steps.meta.outputs.labels }}
+          annotations: ${{ steps.meta.outputs.annotations }}
+      - name: Export digest
+        run: |
+          mkdir -p ${{ runner.temp }}/digests
+          digest="${{ steps.push.outputs.digest }}"
+          touch "${{ runner.temp }}/digests/${digest#sha256:}"
+      - name: Upload digest
+        uses: actions/upload-artifact@v4
+        with:
+          name: digests-${{ env.PLATFORM_PAIR }}
+          path: ${{ runner.temp }}/digests/*
+          if-no-files-found: error
+          retention-days: 1
+
+  merge:
+    # This job merges the Docker manifests for the different platforms built in the previous job.
+    name: Merge Docker manifests
+    runs-on: ubuntu-latest
+    permissions:
+      packages: write
+      contents: read
+
+    needs:
+      - build
+    steps:
+      - name: Download digests
+        uses: actions/download-artifact@v6
+        with:
+          path: ${{ runner.temp }}/digests
+          pattern: digests-*
+          merge-multiple: true
+      - name: Log into GitHub Container Registry
+        uses: docker/login-action@v3
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+      - name: Setup Docker Buildx
+        uses: docker/setup-buildx-action@v3
+      - name: Extract metadata (tags, labels) for Docker
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: ghcr.io/${{ github.repository }}
+          tags: |
+            type=ref,event=branch,prefix=dev-
+            type=ref,event=branch
+            type=ref,event=pr
+            type=semver,pattern={{version}}
+            type=semver,pattern={{major}}.{{minor}}
+      - name: Create manifest list and push
+        working-directory: ${{ runner.temp }}/digests
+        run: |
+          docker buildx imagetools create $(jq -cr '.tags | map("-t " + .) | join(" ")' <<< "$DOCKER_METADATA_OUTPUT_JSON") \
+            $(printf 'ghcr.io/${{ github.repository }}@sha256:%s ' *)
+      - name: Inspect Image
+        run: |
+          docker buildx imagetools inspect ghcr.io/${{ github.repository }}:${{ steps.meta.outputs.version }}

package-lock.json

@@ -1,12 +1,13 @@
 {
   "name": "bbb-playback",
-  "version": "5.4.1",
+  "version": "5.4.3",
   "homepage": "/playback/presentation/2.3",
   "dependencies": {
     "@bigbluebutton/tldraw": "^2.0.0-alpha.29",
     "bowser": "^2.11.0",
     "classnames": "^2.3.1",
     "darkreader": "^4.9.46",
+    "dompurify": "^3.3.0",
     "linkify-react": "^3.0.4",
     "linkifyjs": "^3.0.5",
     "prop-types": "^15.8.1",
@@ -15,13 +16,13 @@
     "react-intl": "^6.2.5",
     "react-router-dom": "^6.4.3",
     "react-sizeme": "^3.0.2",
+    "recharts": "^2.12.7",
     "sass": "^1.52.1",
     "semver": "^7.5.2",
+    "styled-components": "^6.1.13",
     "tldraw-v1": "npm:@tldraw/tldraw@^1.2.7",
     "video.js": "^7.21.1",
-    "videojs-seek-buttons": "^3.0.1",
-    "recharts": "^2.12.7",
-    "styled-components": "^6.1.13"
+    "videojs-seek-buttons": "^3.0.1"
   },
   "devDependencies": {
     "react-scripts": "^5.0.1"

package.json

@@ -26,6 +26,14 @@ const css = `
 .video-js .vjs-play-progress {
   background-color: white;
 }
+.tl-container {
+  .tl-image {
+    background-color: white !important;
+  }
+}
+.tl-background {
+    background-color: #222425 !important;
+}
 `;
 
 const ignoreInlineStyle = [
@@ -35,6 +43,22 @@ const ignoreInlineStyle = [
   'g > polygon',
   'g > polyline',
   'g > foreignObject',
+  'path',
+  'svg',
+  'g',
+  'line',
+  'textarea',
+  'rect',
+  'circle',
+  '.tl-html-container > div.tl-text-shape__wrapper.tl-text-shadow',
+  '.tl-text',
+  '.tl-text-input',
+  '.tl-text-content',
+  '.tl-text-label__inner',
+  '.tl-note__container',
+  '.tl-text.tl-text-content',
+  '.tl-arrow-label',
+  '.tl-arrow-label__inner',
 ];
 
 const fixes = {

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

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import '../index.scss';
+import DOMPurify from 'dompurify';
 
 const propTypes = {
   active: PropTypes.bool,
@@ -34,9 +35,9 @@ const Reply = ({
   return (
     <span
       onClick={handleClickReply}
-      className={cx('reply-tag', {inactive: !active})}
+      className={cx('reply-tag', 'text-vanilla', {inactive: !active})}
+      dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(text) }}
     >
-      {text}
     </span>
   );
 };

src/components/chat/messages/reply/index.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import DOMPurify from 'dompurify';
 
 const propTypes = {
   active: PropTypes.bool,
@@ -21,7 +22,7 @@ const Text = ({
   return (
     <div
       className='text-vanilla'
-      dangerouslySetInnerHTML={{ __html: text }}
+      dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(text) }}
     />
   );
 };

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

@@ -6,6 +6,7 @@ import {
 import { ID } from 'utils/constants';
 import storage from 'utils/data/storage';
 import './index.scss';
+import DOMPurify from 'dompurify';
 
 const intlMessages = defineMessages({
   aria: {
@@ -26,7 +27,7 @@ const Notes = () => {
     >
       <div className="notes">
         <div
-          dangerouslySetInnerHTML={{ __html: storage.notes }}
+          dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(storage.notes) }}
           style={{ width: '100%' }}
         />
       </div>

src/components/notes/index.js

@@ -34,7 +34,7 @@ const propTypes = {
 };
 
 const defaultProps = {
-  handleSearch: () => {},
+  handleSearch: () => { },
   interactive: false,
   search: [],
 };
@@ -76,29 +76,34 @@ const Thumbnails = ({
     }
   });
 
-  const items = useMemo(()=> {
+  const items = useMemo(() => {
     const thumbnails = storage.thumbnails;
     const layoutSwap = storage.layoutSwap ?? [];
     const merged = [...thumbnails, ...layoutSwap];
     const sorted = merged.sort((a, b) => a.timestamp - b.timestamp);
-    
+
     const addThumbsForSwap = sorted.map((item, index, arr) => {
       const previousItem = arr[index - 1];
       const nextItem = arr[index + 1];
       if (item.hasOwnProperty('showScreenshare')) {
         if (!item.showScreenshare) {
           const previousThumbs = arr.slice(0, index)
           const Thumbnail = previousThumbs.find((t) => t.src && t.src !== 'screenshare');
-          return {
-            ...item,
-            src: Thumbnail?.src ?? '',
-            alt: Thumbnail?.alt ?? '',
-          };
+          // don't add if the src is the same as before
+          if (Thumbnail?.src === previousItem?.src) {
+            return null;
+          } else {
+            return {
+              ...item,
+              src: Thumbnail?.src ?? '',
+              alt: Thumbnail?.alt ?? '',
+            };
+          }
         } else if (
-            item.showScreenshare 
-            && (nextItem && nextItem.src !== 'screenshare') 
-            && (previousItem && previousItem.src !== 'screenshare')
-          ) {
+          item.showScreenshare
+          && (nextItem && nextItem.src !== 'screenshare')
+          && (previousItem && previousItem.src !== 'screenshare')
+        ) {
           return {
             ...item,
             src: 'screenshare',
@@ -116,9 +121,9 @@ const Thumbnails = ({
         id: index + 1,
       }
     });
-  
+
     return reworkIds;
-  }, [storage.thumbnails, storage.layoutSwap]);
+  }, []);
 
   const currentIndex = useCurrentIndex(items);
 

src/components/thumbnails/index.js

@@ -67,6 +67,12 @@ const SlideData = (tldrawAPI) => {
   assets[`slide-background-asset-${id}`] = createTldrawImageAsset(assetId, buildFileURL(src), scaledWidth, scaledHeight)
   shapes["slide-background-shape"] = createTldrawBackgroundShape(assetId, curPageId, scaledWidth, scaledHeight)
 
+  const { x, y } = getCursor(currentCursorIndex);
+
+  if (!(x === -1 || y === -1)) {
+    shapes['cursor'] = createTldrawCursorShape(x, y, curPageId);
+  }
+
   if (index === -1 || isEmpty(interval)) return { assets, shapes, scaleRatio }
 
   for (let i = 0; i < interval.length; i++) {
@@ -84,13 +90,6 @@ const SlideData = (tldrawAPI) => {
     }
   }
 
-  const camera = tldrawAPI?.getCamera();
-  const { x, y } = getCursor(currentCursorIndex, camera);
-
-  if (!(x === -1 || y === -1)) {
-    shapes['cursor'] = createTldrawCursorShape(x, y, curPageId);
-  }
-
   return { assets, shapes, scaleRatio }
 }