Add chromecasting display interface

Co-authored-by: William Oldham <github@binaryoverload.co.uk>
This commit is contained in:
mrjvs 2023-12-10 17:12:05 +01:00
parent 09da337362
commit fac61d26da
5 changed files with 152 additions and 26 deletions

View File

@ -282,6 +282,8 @@ export function makeVideoElementDisplayInterface(): DisplayInterface {
processContainerElement(container) {
containerElement = container;
},
setMeta() {},
setCaption() {},
pause() {
videoElement?.pause();

View File

@ -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<DisplayInterfaceEvents>();
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);

View File

@ -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<DisplayInterfaceEvents> {
play(): void;
pause(): void;
@ -52,4 +64,6 @@ export interface DisplayInterface extends Listener<DisplayInterfaceEvents> {
destroy(): void;
startAirplay(): void;
setPlaybackRate(rate: number): void;
setMeta(meta: DisplayMeta): void;
setCaption(caption: DisplayCaption | null): void;
}

View File

@ -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;

View File

@ -132,6 +132,8 @@ export const createSourceSlice: MakeSlice<SourceSlice> = (set, get) => ({
});
},
setCaption(caption) {
const store = get();
store.display?.setCaption(caption);
set((s) => {
s.caption.selected = caption;
});