From 504347aa9514ceea0ac28fb04b5758871810fa63 Mon Sep 17 00:00:00 2001
From: Tom Hicks <tomhicks@users.noreply.github.com>
Date: Wed, 2 Dec 2020 13:57:22 +0000
Subject: [PATCH 1/2] Ensure dimension changes invalidate view

The track.dimensions object remains the same throughout the lifespan of the track, but its values are updated. This means that the setter always receives the same object and therefore doesn't result in the state actually changing.

By copying the dimension values into a new object, we ensure that consumers of this hook are always kept up to date with the new dimensions.
---
 .../useVideoTrackDimensions/useVideoTrackDimensions.tsx      | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/hooks/useVideoTrackDimensions/useVideoTrackDimensions.tsx b/src/hooks/useVideoTrackDimensions/useVideoTrackDimensions.tsx
index 100e94614..0f55c3e29 100644
--- a/src/hooks/useVideoTrackDimensions/useVideoTrackDimensions.tsx
+++ b/src/hooks/useVideoTrackDimensions/useVideoTrackDimensions.tsx
@@ -10,7 +10,10 @@ export default function useVideoTrackDimensions(track?: TrackType) {
     setDimensions(track?.dimensions);
 
     if (track) {
-      const handleDimensionsChanged = (track: TrackType) => setDimensions(track?.dimensions);
+      const handleDimensionsChanged = (track: TrackType) => setDimensions({
+        width: track.dimensions.width,
+        height: track.dimensions.height
+      });
       track.on('dimensionsChanged', handleDimensionsChanged);
       return () => {
         track.off('dimensionsChanged', handleDimensionsChanged);

From 739c900f9e30d900b7fc0b5b1f4c94584e15abf3 Mon Sep 17 00:00:00 2001
From: Tim Mendoza <tmendoza@twilio.com>
Date: Wed, 16 Dec 2020 16:33:49 -0700
Subject: [PATCH 2/2] Add test for dimensionsChanged fix

---
 .../useVideoTrackDimensions.test.tsx               | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/src/hooks/useVideoTrackDimensions/useVideoTrackDimensions.test.tsx b/src/hooks/useVideoTrackDimensions/useVideoTrackDimensions.test.tsx
index 57d577382..cbf698ab4 100644
--- a/src/hooks/useVideoTrackDimensions/useVideoTrackDimensions.test.tsx
+++ b/src/hooks/useVideoTrackDimensions/useVideoTrackDimensions.test.tsx
@@ -30,6 +30,20 @@ describe('the useVideoTrackDimensions hook', () => {
     expect(result.current).toEqual({ height: 300, width: 600 });
   });
 
+  it('should return a new object reference on "dimensionsChanged" event', () => {
+    mockTrack.dimensions = { height: 123, width: 456 };
+    const { result } = renderHook(() => useVideoTrackDimensions(mockTrack));
+
+    act(() => {
+      mockTrack.dimensions.height = 300;
+      mockTrack.dimensions.width = 600;
+      mockTrack.emit('dimensionsChanged', mockTrack);
+    });
+
+    expect(result.current).toEqual({ height: 300, width: 600 });
+    expect(result.current).not.toBe(mockTrack.dimensions);
+  });
+
   it('should clean up listeners on unmount', () => {
     const { unmount } = renderHook(() => useVideoTrackDimensions(mockTrack));
     unmount();