From ed8155212bf14ea7a0caf2e02da4659a01f00b21 Mon Sep 17 00:00:00 2001 From: Christopher Whilar Date: Mon, 19 May 2025 14:57:48 -0400 Subject: [PATCH 1/7] equal height dual pin --- Project/src/App.css | 20 ++++++++++++++++++-- Project/src/MakeCall/StreamRenderer.js | 14 +++++++------- 2 files changed, 25 insertions(+), 9 deletions(-) diff --git a/Project/src/App.css b/Project/src/App.css index c610f22..8594849 100644 --- a/Project/src/App.css +++ b/Project/src/App.css @@ -474,11 +474,27 @@ div.ms-Checkbox>input[type="checkbox"]+label.ms-Checkbox-label>span.ms-Checkbox- .remote-video-container { position: relative; - height: 100%; +} + +.remote-video-container.pinning-is-active { + height: 360px !important; + justify-self: center; +} + +.remote-video-container.pinned { + height: 720px !important; + justify-self: center; +} + +@media screen and (max-width: 1024px){ + .remote-video-container.pinned { + height: 100% !important; + justify-self: unset; + } } .remote-video-container video { - object-fit: cover !important; + object-fit: contain !important; object-position: center center; } diff --git a/Project/src/MakeCall/StreamRenderer.js b/Project/src/MakeCall/StreamRenderer.js index 1d87f36..d409a33 100644 --- a/Project/src/MakeCall/StreamRenderer.js +++ b/Project/src/MakeCall/StreamRenderer.js @@ -149,7 +149,7 @@ export const StreamRenderer = forwardRef(({ ${stream.mediaStreamType === 'ScreenSharing' ? `ms-xxl12` : ``} ${stream.isAvailable ? 'rendering' : ''} ${isPinned ? 'pinned' : (isPinningActive ? 'pinning-is-active' : '')}`}> -

@@ -172,13 +172,13 @@ export const StreamRenderer = forwardRef(({ { isLoading &&
} + { + videoStats && showMediaStats && +

+ +

+ }
- { - videoStats && showMediaStats && -

- -

- } ); } From 81f35553a953685da922527b340cf9db2bae411f Mon Sep 17 00:00:00 2001 From: Christopher Whilar Date: Mon, 19 May 2025 23:21:39 -0400 Subject: [PATCH 2/7] portrait --- Project/src/App.css | 7 ++++++- Project/src/MakeCall/StreamRenderer.js | 12 +++++++++--- 2 files changed, 15 insertions(+), 4 deletions(-) diff --git a/Project/src/App.css b/Project/src/App.css index 8594849..48eb3eb 100644 --- a/Project/src/App.css +++ b/Project/src/App.css @@ -486,8 +486,13 @@ div.ms-Checkbox>input[type="checkbox"]+label.ms-Checkbox-label>span.ms-Checkbox- justify-self: center; } +.remote-video-container.pinned.portrait { + height: 1280px !important; + justify-self: center; +} + @media screen and (max-width: 1024px){ - .remote-video-container.pinned { + .remote-video-container.pinned, .remote-video-container.pinned.portrait { height: 100% !important; justify-self: unset; } diff --git a/Project/src/MakeCall/StreamRenderer.js b/Project/src/MakeCall/StreamRenderer.js index d409a33..ccb853b 100644 --- a/Project/src/MakeCall/StreamRenderer.js +++ b/Project/src/MakeCall/StreamRenderer.js @@ -126,6 +126,10 @@ export const StreamRenderer = forwardRef(({ } } + const isPortrait = () => { + return view.current?.target?.offsetHeight > view.current?.target?.offsetWidth; + } + useImperativeHandle(ref, () => ({ updateReceiveStats(videoStatsReceived, transportStatsReceived) { if (videoStatsReceived) { @@ -149,9 +153,11 @@ export const StreamRenderer = forwardRef(({ ${stream.mediaStreamType === 'ScreenSharing' ? `ms-xxl12` : ``} ${stream.isAvailable ? 'rendering' : ''} ${isPinned ? 'pinned' : (isPinningActive ? 'pinning-is-active' : '')}`}> -
+

{displayName ? displayName : remoteParticipant.displayName ? remoteParticipant.displayName : utils.getIdentifierText(remoteParticipant.identifier)}

From 750573950a58802bba4647d8e92546febe75a0b5 Mon Sep 17 00:00:00 2001 From: Christopher Whilar Date: Tue, 20 May 2025 11:35:06 -0400 Subject: [PATCH 3/7] align ceneter pin --- Project/src/App.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/Project/src/App.css b/Project/src/App.css index 48eb3eb..9e73423 100644 --- a/Project/src/App.css +++ b/Project/src/App.css @@ -414,6 +414,8 @@ div.ms-Checkbox>input[type="checkbox"]+label.ms-Checkbox-label>span.ms-Checkbox- .stream-container.pinned { order: 0; flex: 0 100% !important; + text-align: -webkit-center; + text-align: center; } .stream-container.pinning-is-active { @@ -478,22 +480,26 @@ div.ms-Checkbox>input[type="checkbox"]+label.ms-Checkbox-label>span.ms-Checkbox- .remote-video-container.pinning-is-active { height: 360px !important; + width: 640px !important; justify-self: center; } .remote-video-container.pinned { height: 720px !important; + width: 1280px !important; justify-self: center; } .remote-video-container.pinned.portrait { height: 1280px !important; + width: 720px !important; justify-self: center; } @media screen and (max-width: 1024px){ .remote-video-container.pinned, .remote-video-container.pinned.portrait { height: 100% !important; + width: 100% !important; justify-self: unset; } } From 036acdfded0d724c80a0ff43cd86cb0460582706 Mon Sep 17 00:00:00 2001 From: Christopher Whilar Date: Tue, 20 May 2025 11:58:44 -0400 Subject: [PATCH 4/7] fix webkit --- Project/src/App.css | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/Project/src/App.css b/Project/src/App.css index 9e73423..d5043b7 100644 --- a/Project/src/App.css +++ b/Project/src/App.css @@ -414,8 +414,7 @@ div.ms-Checkbox>input[type="checkbox"]+label.ms-Checkbox-label>span.ms-Checkbox- .stream-container.pinned { order: 0; flex: 0 100% !important; - text-align: -webkit-center; - text-align: center; + text-align: -webkit-center, center; } .stream-container.pinning-is-active { From aeb4a5cc3c858ccd9dd0b8a29039376685d703e6 Mon Sep 17 00:00:00 2001 From: Christopher Whilar Date: Tue, 20 May 2025 12:04:38 -0400 Subject: [PATCH 5/7] webkit center --- Project/src/App.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Project/src/App.css b/Project/src/App.css index d5043b7..f6366a8 100644 --- a/Project/src/App.css +++ b/Project/src/App.css @@ -414,7 +414,7 @@ div.ms-Checkbox>input[type="checkbox"]+label.ms-Checkbox-label>span.ms-Checkbox- .stream-container.pinned { order: 0; flex: 0 100% !important; - text-align: -webkit-center, center; + text-align: -webkit-center; } .stream-container.pinning-is-active { From e1d9bafcb44f0108bfdd0711209fcf56e29aa48c Mon Sep 17 00:00:00 2001 From: Christopher Whilar Date: Tue, 20 May 2025 14:49:05 -0400 Subject: [PATCH 6/7] smaller non-pinned res --- Project/src/App.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Project/src/App.css b/Project/src/App.css index f6366a8..94449c9 100644 --- a/Project/src/App.css +++ b/Project/src/App.css @@ -478,8 +478,8 @@ div.ms-Checkbox>input[type="checkbox"]+label.ms-Checkbox-label>span.ms-Checkbox- } .remote-video-container.pinning-is-active { - height: 360px !important; - width: 640px !important; + height: 234px !important; + width: 416px !important; justify-self: center; } From ccb19da3ab7aa74e782c0e85b7909035592c1e2b Mon Sep 17 00:00:00 2001 From: Christopher Whilar Date: Tue, 20 May 2025 14:57:57 -0400 Subject: [PATCH 7/7] use size api --- Project/src/MakeCall/StreamRenderer.js | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/Project/src/MakeCall/StreamRenderer.js b/Project/src/MakeCall/StreamRenderer.js index ccb853b..e014796 100644 --- a/Project/src/MakeCall/StreamRenderer.js +++ b/Project/src/MakeCall/StreamRenderer.js @@ -27,11 +27,14 @@ export const StreamRenderer = forwardRef(({ const [displayName, setDisplayName] = useState(remoteParticipant?.displayName?.trim() ?? ''); const [videoStats, setVideoStats] = useState(); const [transportStats, setTransportStats] = useState(); + const [height, setHeight] = useState(stream.size.height); + const [width, setWidth] = useState(stream.size.width); useEffect(() => { initializeComponent(); return () => { stream.off('isReceivingChanged', isReceivingChanged); + stream.off('sizeChanged', sizeChanged); remoteParticipant.off('isSpeakingChanged', isSpeakingChanged); remoteParticipant.off('isMutedChanged', isMutedChanged); remoteParticipant.off('displayNameChanged', isDisplayNameChanged); @@ -94,6 +97,11 @@ export const StreamRenderer = forwardRef(({ } }; + const sizeChanged = () => { + setHeight(stream.size.height); + setWidth(stream.size.width); + } + const isMutedChanged = () => { setIsMuted(remoteParticipant && remoteParticipant?.isMuted); }; @@ -110,6 +118,7 @@ export const StreamRenderer = forwardRef(({ */ const initializeComponent = async () => { stream.on('isReceivingChanged', isReceivingChanged); + stream.on('sizeChanged', sizeChanged); remoteParticipant.on('isMutedChanged', isMutedChanged); remoteParticipant.on('isSpeakingChanged', isSpeakingChanged); if (dominantSpeakerMode && dominantRemoteParticipant !== remoteParticipant) { @@ -126,10 +135,6 @@ export const StreamRenderer = forwardRef(({ } } - const isPortrait = () => { - return view.current?.target?.offsetHeight > view.current?.target?.offsetWidth; - } - useImperativeHandle(ref, () => ({ updateReceiveStats(videoStatsReceived, transportStatsReceived) { if (videoStatsReceived) { @@ -157,7 +162,7 @@ export const StreamRenderer = forwardRef(({ ref={videoContainer} className={`remote-video-container ${isSpeaking && !isMuted ? `speaking-border-for-video` : ``} ${isPinned ? 'pinned' : (isPinningActive ? 'pinning-is-active' : '')} - ${isPortrait() ? 'portrait' : ''}`}> + ${height > width ? 'portrait' : ''}`}>

{displayName ? displayName : remoteParticipant.displayName ? remoteParticipant.displayName : utils.getIdentifierText(remoteParticipant.identifier)}