fix: handle player resize correctly (#300)

Author: justusmattern27

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);
     }
   }
 

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 ${

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;
     }
   }