xmj/element-call
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Merge pull request #541 from vector-im/SimonBrandner/fix/full-screen

Browse source
This commit is contained in:
Šimon Brandner 2022-08-19 17:36:04 +02:00 committed by GitHub
commit 1d7da9c455
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 14 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -38,7 +38,7 @@
"classnames": "^2.3.1", "classnames": "^2.3.1",
"color-hash": "^2.0.1", "color-hash": "^2.0.1",
"events": "^3.3.0", "events": "^3.3.0",
"matrix-js-sdk": "github:matrix-org/matrix-js-sdk#3334c01191bcd82b5243916284c9a08d08fd9795", "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#45e56f8cc36c459ed43e405be4206e5e66b3ad98",
"matrix-widget-api": "^1.0.0", "matrix-widget-api": "^1.0.0",
"mermaid": "^8.13.8", "mermaid": "^8.13.8",
"normalize.css": "^8.0.1", "normalize.css": "^8.0.1",

3
src/video-grid/useCallFeed.ts
View file

@ -26,6 +26,7 @@ interface CallFeedState {
videoMuted: boolean; videoMuted: boolean;
audioMuted: boolean; audioMuted: boolean;
localVolume: number; localVolume: number;
disposed: boolean;
stream: MediaStream; stream: MediaStream;
purpose: SDPStreamMetadataPurpose; purpose: SDPStreamMetadataPurpose;
} }
@ -37,6 +38,7 @@ function getCallFeedState(callFeed: CallFeed): CallFeedState {
videoMuted: callFeed ? callFeed.isVideoMuted() : true, videoMuted: callFeed ? callFeed.isVideoMuted() : true,
audioMuted: callFeed ? callFeed.isAudioMuted() : true, audioMuted: callFeed ? callFeed.isAudioMuted() : true,
localVolume: callFeed ? callFeed.getLocalVolume() : 0, localVolume: callFeed ? callFeed.getLocalVolume() : 0,
disposed: callFeed ? callFeed.disposed : undefined,
stream: callFeed ? callFeed.stream : undefined, stream: callFeed ? callFeed.stream : undefined,
purpose: callFeed ? callFeed.purpose : undefined, purpose: callFeed ? callFeed.purpose : undefined,
}; };
@ -69,6 +71,7 @@ export function useCallFeed(callFeed: CallFeed): CallFeedState {
callFeed.on(CallFeedEvent.MuteStateChanged, onMuteStateChanged); callFeed.on(CallFeedEvent.MuteStateChanged, onMuteStateChanged);
callFeed.on(CallFeedEvent.LocalVolumeChanged, onLocalVolumeChanged); callFeed.on(CallFeedEvent.LocalVolumeChanged, onLocalVolumeChanged);
callFeed.on(CallFeedEvent.NewStream, onUpdateCallFeed); callFeed.on(CallFeedEvent.NewStream, onUpdateCallFeed);
callFeed.on(CallFeedEvent.Disposed, onUpdateCallFeed);
} }
onUpdateCallFeed(); onUpdateCallFeed();

11
src/video-grid/useFullscreen.tsx
View file

@ -15,10 +15,11 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
import { useCallback, useState } from "react"; import { useCallback, useEffect, useState } from "react";
import { Participant } from "../room/InCallView"; import { Participant } from "../room/InCallView";
import { useEventTarget } from "../useEvents"; import { useEventTarget } from "../useEvents";
import { useCallFeed } from "./useCallFeed";
export function useFullscreen(ref: React.RefObject<HTMLElement>): { export function useFullscreen(ref: React.RefObject<HTMLElement>): {
toggleFullscreen: (participant: Participant) => void; toggleFullscreen: (participant: Participant) => void;
@ -26,6 +27,7 @@ export function useFullscreen(ref: React.RefObject<HTMLElement>): {
} { } {
const [fullscreenParticipant, setFullscreenParticipant] = const [fullscreenParticipant, setFullscreenParticipant] =
useState<Participant | null>(null); useState<Participant | null>(null);
const { disposed } = useCallFeed(fullscreenParticipant?.callFeed);
const toggleFullscreen = useCallback( const toggleFullscreen = useCallback(
(participant: Participant) => { (participant: Participant) => {
@ -52,5 +54,12 @@ export function useFullscreen(ref: React.RefObject<HTMLElement>): {
useEventTarget(ref.current, "fullscreenchange", onFullscreenChanged); useEventTarget(ref.current, "fullscreenchange", onFullscreenChanged);
useEffect(() => {
if (disposed) {
document.exitFullscreen();
setFullscreenParticipant(null);
}
}, [disposed]);
return { toggleFullscreen, fullscreenParticipant }; return { toggleFullscreen, fullscreenParticipant };
} }