diff --git a/src/components/player/display/base.ts b/src/components/player/display/base.ts index 3f44bf21..5cbf1045 100644 --- a/src/components/player/display/base.ts +++ b/src/components/player/display/base.ts @@ -282,6 +282,8 @@ export function makeVideoElementDisplayInterface(): DisplayInterface { processContainerElement(container) { containerElement = container; }, + setMeta() {}, + setCaption() {}, pause() { videoElement?.pause(); diff --git a/src/components/player/display/chromecast.ts b/src/components/player/display/chromecast.ts index d823e468..c8bfc3c7 100644 --- a/src/components/player/display/chromecast.ts +++ b/src/components/player/display/chromecast.ts @@ -1,8 +1,11 @@ import fscreen from "fscreen"; +import { MWMediaType } from "@/backend/metadata/types/mw"; import { + DisplayCaption, DisplayInterface, DisplayInterfaceEvents, + DisplayMeta, } from "@/components/player/display/displayInterface"; import { LoadableSource } from "@/stores/player/utils/qualities"; import { @@ -18,13 +21,17 @@ export interface ChromeCastDisplayInterfaceOptions { instance: cast.framework.CastContext; } -// TODO check all functionality -// TODO listen for events to update the state +/* + ** Chromecasting is unfinished, here is its limitations: + ** 1. Captions - chromecast requires only VTT, but needs it from a URL. we only have SRT urls + ** 2. HLS - we've having some issues with content types. sometimes it loads, sometimes it doesn't + */ + export function makeChromecastDisplayInterface( ops: ChromeCastDisplayInterfaceOptions ): DisplayInterface { const { emit, on, off } = makeEmitter(); - const isPaused = false; + let isPaused = false; let playbackRate = 1; let source: LoadableSource | null = null; let videoElement: HTMLVideoElement | null = null; @@ -33,8 +40,64 @@ export function makeChromecastDisplayInterface( let isPausedBeforeSeeking = false; let isSeeking = false; let startAt = 0; - // let automaticQuality = false; - // let preferenceQuality: SourceQuality | null = null; + let meta: DisplayMeta = { + title: "", + type: MWMediaType.MOVIE, + }; + // eslint-disable-next-line @typescript-eslint/no-unused-vars + let caption: DisplayCaption | null = null; + + function listenForEvents() { + const listen = async (e: cast.framework.RemotePlayerChangedEvent) => { + switch (e.field) { + case "volumeLevel": + if (await canChangeVolume()) emit("volumechange", e.value); + break; + case "currentTime": + emit("time", e.value); + break; + case "duration": + emit("duration", e.value ?? 0); + break; + case "mediaInfo": + if (e.value) emit("duration", e.value.duration ?? 0); + break; + case "playerState": + emit("loading", e.value === "BUFFERING"); + if (e.value === "PLAYING") emit("play", undefined); + else if (e.value === "PAUSED") emit("pause", undefined); + isPaused = e.value === "PAUSED"; + break; + case "isMuted": + emit("volumechange", e.value ? 1 : 0); + break; + case "displayStatus": + case "canSeek": + case "title": + case "isPaused": + case "canPause": + case "isMediaLoaded": + case "statusText": + case "isConnected": + case "displayName": + case "canControlVolume": + case "savedPlayerState": + break; + default: + break; + } + }; + ops.controller?.addEventListener( + cast.framework.RemotePlayerEventType.ANY_CHANGE, + listen + ); + return () => { + ops.controller?.removeEventListener( + cast.framework.RemotePlayerEventType.ANY_CHANGE, + listen + ); + }; + } function setupSource() { if (!source) { @@ -42,30 +105,33 @@ export function makeChromecastDisplayInterface( return; } - if (source.type === "hls") { - // TODO hls support - return; - } + let type = "video/mp4"; + if (source.type === "hls") type = "application/x-mpegurl"; - // TODO movie meta - const movieMeta = new chrome.cast.media.MovieMediaMetadata(); - movieMeta.title = ""; + const metaData = new chrome.cast.media.GenericMediaMetadata(); + metaData.title = meta.title; - const mediaInfo = new chrome.cast.media.MediaInfo("video", "video/mp4"); + const mediaInfo = new chrome.cast.media.MediaInfo("video", type); (mediaInfo as any).contentUrl = source.url; mediaInfo.streamType = chrome.cast.media.StreamType.BUFFERED; - mediaInfo.metadata = movieMeta; + mediaInfo.metadata = metaData; mediaInfo.customData = { playbackRate, }; const request = new chrome.cast.media.LoadRequest(mediaInfo); request.autoplay = true; + request.currentTime = startAt; + + if (source.type === "hls") { + const staticMedia = chrome.cast.media as any; + const media = request.media as any; + media.hlsSegmentFormat = staticMedia.HlsSegmentFormat.FMP4; + media.hlsVideoSegmentFormat = staticMedia.HlsVideoSegmentFormat.FMP4; + } - ops.player.currentTime = startAt; const session = ops.instance.getCurrentSession(); session?.loadMedia(request); - ops.controller.seek(); } function setSource() { @@ -86,25 +152,29 @@ export function makeChromecastDisplayInterface( } fscreen.addEventListener("fullscreenchange", fullscreenChange); + // start listening immediately + const stopListening = listenForEvents(); + return { on, off, destroy: () => { + stopListening(); destroyVideoElement(); fscreen.removeEventListener("fullscreenchange", fullscreenChange); }, load(loadOps) { - // automaticQuality = loadOps.automaticQuality; - // preferenceQuality = loadOps.preferredQuality; source = loadOps.source; emit("loading", true); startAt = loadOps.startAt; setSource(); }, - changeQuality(_newAutomaticQuality, _newPreferredQuality) { - // if (source?.type !== "hls") return; - // automaticQuality = newAutomaticQuality; - // preferenceQuality = newPreferredQuality; + changeQuality() { + // cant control qualities + }, + setCaption(newCaption) { + caption = newCaption; + setSource(); }, processVideoElement(video) { @@ -115,12 +185,22 @@ export function makeChromecastDisplayInterface( processContainerElement(container) { containerElement = container; }, + setMeta(data) { + meta = data; + setSource(); + }, pause() { - if (!isPaused) ops.controller.playOrPause(); + if (!isPaused) { + ops.controller.playOrPause(); + isPaused = true; + } }, play() { - if (isPaused) ops.controller.playOrPause(); + if (isPaused) { + ops.controller.playOrPause(); + isPaused = false; + } }, setSeeking(active) { if (active === isSeeking) return; @@ -156,6 +236,7 @@ export function makeChromecastDisplayInterface( if (isChangeable) { ops.player.volumeLevel = volume; ops.controller.setVolumeLevel(); + emit("volumechange", volume); } else { // For browsers where it can't be changed emit("volumechange", volume === 0 ? 0 : 1); diff --git a/src/components/player/display/displayInterface.ts b/src/components/player/display/displayInterface.ts index c4c33d0d..0b76fd79 100644 --- a/src/components/player/display/displayInterface.ts +++ b/src/components/player/display/displayInterface.ts @@ -1,3 +1,4 @@ +import { MWMediaType } from "@/backend/metadata/types/mw"; import { LoadableSource, SourceQuality } from "@/stores/player/utils/qualities"; import { Listener } from "@/utils/events"; @@ -34,6 +35,17 @@ export interface qualityChangeOptions { startAt: number; } +export interface DisplayMeta { + title: string; + type: MWMediaType; +} + +export interface DisplayCaption { + srtData: string; + language: string; + url?: string; +} + export interface DisplayInterface extends Listener { play(): void; pause(): void; @@ -52,4 +64,6 @@ export interface DisplayInterface extends Listener { destroy(): void; startAirplay(): void; setPlaybackRate(rate: number): void; + setMeta(meta: DisplayMeta): void; + setCaption(caption: DisplayCaption | null): void; } diff --git a/src/components/player/internals/CastingInternal.tsx b/src/components/player/internals/CastingInternal.tsx index 49d6d363..a46a1968 100644 --- a/src/components/player/internals/CastingInternal.tsx +++ b/src/components/player/internals/CastingInternal.tsx @@ -1,5 +1,6 @@ import { useEffect, useRef } from "react"; +import { mediaItemTypeToMediaType } from "@/backend/metadata/tmdb"; import { makeVideoElementDisplayInterface } from "@/components/player/display/base"; import { makeChromecastDisplayInterface } from "@/components/player/display/chromecast"; import { useChromecastAvailable } from "@/hooks/useChromecastAvailable"; @@ -11,26 +12,39 @@ export function CastingInternal() { const setPlayer = usePlayerStore((s) => s.casting.setPlayer); const setIsCasting = usePlayerStore((s) => s.casting.setIsCasting); const isCasting = usePlayerStore((s) => s.interface.isCasting); + const caption = usePlayerStore((s) => s.caption?.selected); const setDisplay = usePlayerStore((s) => s.setDisplay); const redisplaySource = usePlayerStore((s) => s.redisplaySource); const available = useChromecastAvailable(); + const display = usePlayerStore((s) => s.display); const controller = usePlayerStore((s) => s.casting.controller); const player = usePlayerStore((s) => s.casting.player); const instance = usePlayerStore((s) => s.casting.instance); + const time = usePlayerStore((s) => s.progress.time); + const metaTitle = usePlayerStore((s) => s.meta?.title); + const metaType = usePlayerStore((s) => s.meta?.type); const dataRef = useRef({ controller, player, instance, + time, + metaTitle, + metaType, + caption, }); useEffect(() => { dataRef.current = { controller, player, instance, + time, + metaTitle, + metaType, + caption, }; - }, [controller, player, instance]); + }, [controller, player, instance, time, metaTitle, metaType, caption]); useEffect(() => { if (isCasting) { @@ -44,15 +58,28 @@ export function CastingInternal() { instance: dataRef.current.instance, player: dataRef.current.player, }); + newDisplay.setMeta({ + title: dataRef.current.metaTitle ?? "", + type: mediaItemTypeToMediaType(dataRef.current.metaType ?? "movie"), + }); + newDisplay.setCaption(dataRef.current.caption); setDisplay(newDisplay); - redisplaySource(0); // TODO right start time + redisplaySource(dataRef.current.time ?? 0); } } else { const newDisplay = makeVideoElementDisplayInterface(); setDisplay(newDisplay); + redisplaySource(dataRef.current.time ?? 0); } }, [isCasting, setDisplay, redisplaySource]); + useEffect(() => { + display?.setMeta({ + title: dataRef.current.metaTitle ?? "", + type: mediaItemTypeToMediaType(dataRef.current.metaType ?? "movie"), + }); + }, [metaTitle, metaType, display]); + useEffect(() => { if (!available) return; diff --git a/src/stores/player/slices/source.ts b/src/stores/player/slices/source.ts index 9f1ea9a3..c210cbef 100644 --- a/src/stores/player/slices/source.ts +++ b/src/stores/player/slices/source.ts @@ -132,6 +132,8 @@ export const createSourceSlice: MakeSlice = (set, get) => ({ }); }, setCaption(caption) { + const store = get(); + store.display?.setCaption(caption); set((s) => { s.caption.selected = caption; });