Fix fullscreen on Safari (#814)

* Fix fullscreen on Safari

Safari only supports it via the webkit prefix

Fixes https://github.com/vector-im/element-call/issues/539

* NOT THAT LOGGER, VSCODE
This commit is contained in:
David Baker 2023-01-03 11:24:10 +00:00 committed by GitHub
parent fef503c65d
commit b9ee9583e4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 13 additions and 1 deletions

View file

@ -27,4 +27,9 @@ declare global {
interface MediaElement extends HTMLVideoElement { interface MediaElement extends HTMLVideoElement {
setSinkId: (id: string) => void; setSinkId: (id: string) => void;
} }
interface HTMLElement {
// Safari only supports this prefixed, so tell the type system about it
webkitRequestFullscreen: () => void;
}
} }

View file

@ -15,6 +15,7 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
import { logger } from "matrix-js-sdk/src/logger";
import { useCallback, useEffect, useState } from "react"; import { useCallback, useEffect, useState } from "react";
import { useEventTarget } from "../useEvents"; import { useEventTarget } from "../useEvents";
@ -36,7 +37,13 @@ export function useFullscreen(ref: React.RefObject<HTMLElement>): {
setFullscreenParticipant(null); setFullscreenParticipant(null);
} else { } else {
try { try {
if (ref.current.requestFullscreen) {
ref.current.requestFullscreen(); ref.current.requestFullscreen();
} else if (ref.current.webkitRequestFullscreen) {
ref.current.webkitRequestFullscreen();
} else {
logger.error("No available fullscreen API!");
}
setFullscreenParticipant(tileDes); setFullscreenParticipant(tileDes);
} catch (error) { } catch (error) {
console.warn("Failed to fullscreen:", error); console.warn("Failed to fullscreen:", error);