diff --git a/package.json b/package.json index 9c24c382..7ab510b9 100644 --- a/package.json +++ b/package.json @@ -63,6 +63,6 @@ "prettier-plugin-tailwindcss": "^0.1.7", "tailwind-scrollbar": "^1.3.1", "tailwindcss": "^3.0.20", - "typescript": "^4.6.2" + "typescript": "^4.6.4" } } diff --git a/src/components/media/VideoPlayer.tsx b/src/components/media/VideoPlayer.tsx index 947b782a..28a7ff6b 100644 --- a/src/components/media/VideoPlayer.tsx +++ b/src/components/media/VideoPlayer.tsx @@ -3,6 +3,7 @@ import { Icons } from "components/Icon"; import { Loading } from "components/layout/Loading"; import { MWMediaCaption, MWMediaStream } from "providers"; import { ReactElement, useEffect, useRef, useState } from "react"; +import Hls from "hls.js"; export interface VideoPlayerProps { source: MWMediaStream; @@ -40,7 +41,34 @@ export function VideoPlayer(props: VideoPlayerProps) { useEffect(() => { setLoading(true); setErrored(false); - }, [props.source.url]); + + // hls support + if (mustUseHls) { + if (!videoRef.current) + return; + + if (!Hls.isSupported()) { + setLoading(false); + setErrored(true); + return; + } + + const hls = new Hls(); + + if (videoRef.current.canPlayType('application/vnd.apple.mpegurl')) { + videoRef.current.src = props.source.url; + return; + } + + hls.attachMedia(videoRef.current); + hls.loadSource(props.source.url); + + hls.on(Hls.Events.ERROR, (event, data) => { + setErrored(true); + console.error(data); + }); + } + }, [props.source.url, videoRef, mustUseHls]); let skeletonUi: null | ReactElement = null; if (hasErrored) { @@ -53,9 +81,8 @@ export function VideoPlayer(props: VideoPlayerProps) { <> {skeletonUi}