From e183daa49f2366bd880d08100eb55e5b7d18f599 Mon Sep 17 00:00:00 2001
From: justusmattern27 <justus.mattern@rwth-aachen.de>
Date: Mon, 23 Sep 2024 12:54:01 +0200
Subject: [PATCH] fix: handle player resize correctly

---
 packages/2d/src/lib/scenes/Scene2D.ts |  1 -
 packages/player-react/src/index.tsx   | 17 +++++++++--------
 packages/player-react/src/internal.ts |  7 +++++--
 3 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/packages/2d/src/lib/scenes/Scene2D.ts b/packages/2d/src/lib/scenes/Scene2D.ts
index 14f4fd15..a3b6daad 100644
--- a/packages/2d/src/lib/scenes/Scene2D.ts
+++ b/packages/2d/src/lib/scenes/Scene2D.ts
@@ -220,7 +220,6 @@ export class Scene2D extends GeneratorScene<View2D> implements Inspectable {
 
     for (const media of mediaNodes) {
       media.setVolume(media.getVolume() * volumeScale);
-      console.log(media.key);
     }
   }
 
diff --git a/packages/player-react/src/index.tsx b/packages/player-react/src/index.tsx
index 90787f9a..0e63b9d3 100644
--- a/packages/player-react/src/index.tsx
+++ b/packages/player-react/src/index.tsx
@@ -14,6 +14,7 @@ interface RevideoPlayerProps {
   height?: number;
   quality?: number;
   fps?: number;
+  volume?: number;
 }
 
 declare global {
@@ -140,19 +141,18 @@ export function Player({
   const handlePlayerResize = useCallback(
     (entries: ResizeObserverEntry[]) => {
       const [firstEntry] = entries;
-      if (!firstEntry || !wrapperRef.current) {
+      if (!firstEntry || !wrapperRef.current || !lastRect.current) {
         return;
       }
 
       const newRect = firstEntry.contentRect;
-      const sameWidth = newRect.width === lastRect.current.width;
-      const sameHeight = newRect.height === lastRect.current.height;
-      if (lastRect.current && sameWidth && sameHeight) {
-        return;
+      if (
+        newRect.width !== lastRect.current.width ||
+        newRect.height !== lastRect.current.height
+      ) {
+        lastRect.current = newRect;
+        onPlayerResize(newRect);
       }
-
-      lastRect.current = newRect;
-      onPlayerResize(newRect);
     },
     [onPlayerResize],
   );
@@ -234,6 +234,7 @@ export function Player({
             height={height}
             quality={quality}
             fps={fps}
+            volume={volumeState}
           />
           <div
             className={`p-absolute p-bottom-0 p-w-full p-transition-opacity p-duration-200 ${
diff --git a/packages/player-react/src/internal.ts b/packages/player-react/src/internal.ts
index 80e270da..4517dc7a 100644
--- a/packages/player-react/src/internal.ts
+++ b/packages/player-react/src/internal.ts
@@ -48,6 +48,7 @@ class RevideoPlayer extends HTMLElement {
       'quality',
       'width',
       'height',
+      'volume',
     ];
   }
 
@@ -99,7 +100,7 @@ class RevideoPlayer extends HTMLElement {
   private duration: number = 0; // in frames
   private looping = true;
   private volume = 1;
-  private volumeChangeRequested = false;
+  private volumeChangeRequested = true;
 
   public constructor() {
     super();
@@ -110,7 +111,6 @@ class RevideoPlayer extends HTMLElement {
     this.canvas = this.stage.finalBuffer;
     this.canvas.classList.add('canvas');
     this.root.prepend(this.canvas);
-
     this.setState(State.Initial);
   }
 
@@ -205,6 +205,9 @@ class RevideoPlayer extends HTMLElement {
       case 'height':
         this.updateSettings();
         break;
+      case 'volume':
+        this.volume = newValue;
+        this.volumeChangeRequested = true;
     }
   }