Add audio menu and rework qualities menu

back/src/Kyoo.Abstractions/Models/WatchItem.cs

@@ -141,23 +141,14 @@ namespace Kyoo.Abstractions.Models
 		/// </summary>
 		public ICollection<Chapter> Chapters { get; set; }
 
-		string _Type => IsMovie ? "movie" : "episode";
+		[SerializeIgnore]
+		private string _Type => IsMovie ? "movie" : "episode";
 
 		/// <inheritdoc/>
-		public object Link => new[]
+		public object Link => new
 		{
-			new { Name = "Pristine", Link = $"/video/{_Type}/{Slug}/direct", Type = "direct" },
-			new { Name = "Original", Link = $"/video/{_Type}/{Slug}/original/index.m3u8", Type = "transmux" },
-			new { Name = "Auto", Link = $"/video/{_Type}/{Slug}/master.m3u8", Type = "transcode-auto" },
-
-			new { Name = "8K", Link = $"/video/{_Type}/{Slug}/8k/index.m3u8", Type = "transcode", },
-			new { Name = "4K", Link = $"/video/{_Type}/{Slug}/4k/index.m3u8", Type = "transcode" },
-			new { Name = "1440p", Link = $"/video/{_Type}/{Slug}/1440p/index.m3u8", Type = "transcode" },
-			new { Name = "1080p", Link = $"/video/{_Type}/{Slug}/1080p/index.m3u8", Type = "transcode" },
-			new { Name = "720p", Link = $"/video/{_Type}/{Slug}/720p/index.m3u8", Type = "transcode" },
-			new { Name = "480p", Link = $"/video/{_Type}/{Slug}/480p/index.m3u8", Type = "transcode" },
-			new { Name = "360p", Link = $"/video/{_Type}/{Slug}/360p/index.m3u8", Type = "transcode" },
-			new { Name = "240p", Link = $"/video/{_Type}/{Slug}/240p/index.m3u8", Type = "transcode" },
+			Direct = $"/video/{_Type}/{Slug}/direct",
+			Hls = $"/video/{_Type}/{Slug}/master.m3u8",
 		};
 
 		/// <summary>

front/packages/models/src/login.ts

@@ -78,7 +78,6 @@ export const getTokenWJ = async (cookies?: string): Promise<[string, Token] | [n
 export const getToken = async (cookies?: string): Promise<string | null> =>
 	(await getTokenWJ(cookies))[0]
 
-
 export const logout = async () =>{
 	deleteSecureItem("auth")
 }

front/packages/models/src/resources/watch-item.ts

@@ -156,13 +156,10 @@ const WatchMovieP = z.preprocess(
 		/**
 		 * The links to the videos of this watch item.
 		 */
-		link: z.array(
-			z.object({
-				name: z.string(),
-				link: z.string().transform(imageFn),
-				type: z.enum(["direct", "transmux", "transcode-auto", "transcode"])
-			}),
-		),
+		link: z.object({
+			direct: z.string().transform(imageFn),
+			hls: z.string().transform(imageFn),
+		}),
 	}),
 );
 

front/packages/primitives/src/menu.tsx

@@ -43,7 +43,7 @@ const Menu = <AsProps,>({
 	...props
 }: {
 	Trigger: ComponentType<AsProps>;
-	children: ReactNode | ReactNode[] | null;
+	children?: ReactNode | ReactNode[] | null;
 	onMenuOpen?: () => void;
 	onMenuClose?: () => void;
 } & Omit<AsProps, "onPress">) => {

front/packages/ui/src/player/components/right-buttons.tsx

@@ -28,8 +28,10 @@ import ClosedCaption from "@material-symbols/svg-400/rounded/closed_caption-fill
 import Fullscreen from "@material-symbols/svg-400/rounded/fullscreen-fill.svg";
 import FullscreenExit from "@material-symbols/svg-400/rounded/fullscreen_exit-fill.svg";
 import SettingsIcon from "@material-symbols/svg-400/rounded/settings-fill.svg";
+import MusicNote from "@material-symbols/svg-400/rounded/music_note-fill.svg";
 import { Stylable, useYoshiki } from "yoshiki/native";
-import { fullscreenAtom, qualityAtom, subtitleAtom } from "../state";
+import { fullscreenAtom, subtitleAtom } from "../state";
+import { AudiosMenu, QualitiesMenu } from "../video";
 
 export const RightButtons = ({
 	subtitles,
@@ -49,7 +51,6 @@ export const RightButtons = ({
 	const { t } = useTranslation();
 	const [isFullscreen, setFullscreen] = useAtom(fullscreenAtom);
 	const setSubAtom = useSetAtom(subtitleAtom);
-	const [quality, setQuality] = useAtom(qualityAtom);
 	const [selectedSubtitle, setSubtitle] = useState<string | undefined>(undefined);
 
 	useEffect(() => {
@@ -64,7 +65,7 @@ export const RightButtons = ({
 
 	return (
 		<View {...css({ flexDirection: "row" }, props)}>
-			{subtitles && (
+			{subtitles && subtitles.length && (
 				<Menu
 					Trigger={IconButton}
 					icon={ClosedCaption}
@@ -88,23 +89,22 @@ export const RightButtons = ({
 					))}
 				</Menu>
 			)}
-			<Menu
+			<AudiosMenu
+				Trigger={IconButton}
+				icon={MusicNote}
+				onMenuOpen={onMenuOpen}
+				onMenuClose={onMenuClose}
+				{...tooltip(t("player.audios"), true)}
+				{...spacing}
+			/>
+			<QualitiesMenu
 				Trigger={IconButton}
 				icon={SettingsIcon}
 				onMenuOpen={onMenuOpen}
 				onMenuClose={onMenuClose}
 				{...tooltip(t("player.quality"), true)}
 				{...spacing}
-			>
-				{qualities?.map((x) => (
-					<Menu.Item
-						key={x.link}
-						label={x.name}
-						selected={quality === x.name}
-						onSelect={() => setQuality(x.name)}
-					/>
-				))}
-			</Menu>
+			/>
 			{Platform.OS === "web" && (
 				<IconButton
 					icon={isFullscreen ? FullscreenExit : Fullscreen}

front/packages/ui/src/player/state.tsx

@@ -26,8 +26,13 @@ import { Platform } from "react-native";
 
 export const playAtom = atom(true);
 export const loadAtom = atom(false);
+
 // TODO: Default to auto or pristine depending on the user settings.
-export const qualityAtom = atom<string>("Pristine");
+export enum PlayMode {
+	Direct,
+	Hls,
+}
+export const playModeAtom = atom<PlayMode>(PlayMode.Direct);
 
 export const bufferedAtom = atom(0);
 export const durationAtom = atom<number | undefined>(undefined);
@@ -78,8 +83,8 @@ export const Video = memo(function _Video({
 	const ref = useRef<NativeVideo | null>(null);
 	const [isPlaying, setPlay] = useAtom(playAtom);
 	const setLoad = useSetAtom(loadAtom);
-	const [source, setSource] = useState<WatchItem["link"][0] | null>(null);
-	const [quality, setQuality] = useAtom(qualityAtom);
+	const [source, setSource] = useState<string | null>(null);
+	const [mode, setPlayMode] = useAtom(playModeAtom);
 
 	const publicProgress = useAtomValue(publicProgressAtom);
 	const setPrivateProgress = useSetAtom(privateProgressAtom);
@@ -91,11 +96,11 @@ export const Video = memo(function _Video({
 
 	useLayoutEffect(() => {
 		// Reset the state when a new video is loaded.
-		setSource(links?.find(x => x.name == quality) ?? null)
+		setSource((mode === PlayMode.Direct ? links?.direct : links?.hls) ?? null);
 		setLoad(true);
 		setPrivateProgress(0);
 		setPlay(true);
-	}, [quality, links, setLoad, setPrivateProgress, setPlay]);
+	}, [mode, links, setLoad, setPrivateProgress, setPlay]);
 
 	const volume = useAtomValue(volumeAtom);
 	const isMuted = useAtomValue(mutedAtom);
@@ -112,12 +117,12 @@ export const Video = memo(function _Video({
 
 	const subtitle = useAtomValue(subtitleAtom);
 
-	if (!source) return null;
+	if (!source || !links) return null;
 	return (
 		<NativeVideo
 			ref={ref}
 			{...props}
-			source={{ uri: source.link, ...source }}
+			source={{ uri: source, ...links }}
 			paused={!isPlaying}
 			muted={isMuted}
 			volume={volume}
@@ -142,15 +147,9 @@ export const Video = memo(function _Video({
 			}
 			fonts={fonts}
 			onMediaUnsupported={() => {
-				if (source.type === "direct")
-					setQuality(links?.find(x => x.type == "transmux")!.name!)
-
-				// TODO: Replace transcode with transcode-auto when supported.
-				if (source.type === "transmux")
-					setQuality(links?.find(x => x.type == "transcode")!.name!)
-
+				if (mode == PlayMode.Direct)
+					setPlayMode(PlayMode.Hls);
 			}}
-
 			// TODO: textTracks: external subtitles
 		/>
 	);

front/packages/ui/src/player/video.tsx

@@ -25,12 +25,25 @@ declare module "react-native-video" {
 		onMediaUnsupported?: () => void;
 	}
 	export type VideoProps = Omit<VideoProperties, "source"> & {
-		source: { uri: string } & WatchItem["link"][0];
+		source: { uri: string; hls: string };
 	};
 }
 
 export * from "react-native-video";
 
-import { Font, WatchItem } from "@kyoo/models";
+import { Font } from "@kyoo/models";
+import { IconButton, Menu } from "@kyoo/primitives";
+import { ComponentProps } from "react";
 import Video from "react-native-video";
 export default Video;
+
+// TODO: Implement those for mobile.
+
+type CustomMenu = ComponentProps<typeof Menu<ComponentProps<typeof IconButton>>>;
+export const AudiosMenu = (props: CustomMenu) => {
+	return <Menu {...props}></Menu>;
+};
+
+export const QualitiesMenu = (props: CustomMenu) => {
+	return <Menu {...props}></Menu>;
+};

front/packages/ui/src/player/video.web.tsx

@@ -26,15 +26,19 @@ import {
 	useImperativeHandle,
 	useLayoutEffect,
 	useRef,
+	useReducer,
+	ComponentProps,
 } from "react";
 import { VideoProps } from "react-native-video";
-import { useAtomValue, useSetAtom } from "jotai";
+import { useAtomValue, useSetAtom, useAtom } from "jotai";
 import { useYoshiki } from "yoshiki";
 import SubtitleOctopus from "libass-wasm";
-import { playAtom, subtitleAtom } from "./state";
+import { playAtom, PlayMode, playModeAtom, subtitleAtom } from "./state";
 import Hls from "hls.js";
+import { useTranslation } from "react-i18next";
+import { Menu } from "@kyoo/primitives";
 
-let hls: Hls | null = null;
+let hls: Hls = null!;
 
 function uuidv4(): string {
 	// @ts-ignore I have no clue how this works, thanks https://stackoverflow.com/questions/105034/how-do-i-create-a-guid-uuid
@@ -45,6 +49,17 @@ function uuidv4(): string {
 
 let client_id = typeof window === "undefined" ? "ssr" : uuidv4();
 
+const initHls = async () => {
+	if (hls !== null) return;
+	const token = await getToken();
+	hls = new Hls({
+		xhrSetup: (xhr) => {
+			if (token) xhr.setRequestHeader("Authorization", `Bearer: {token}`);
+			xhr.setRequestHeader("X-CLIENT-ID", client_id);
+		},
+	});
+};
+
 const Video = forwardRef<{ seek: (value: number) => void }, VideoProps>(function _Video(
 	{
 		source,
@@ -62,8 +77,8 @@ const Video = forwardRef<{ seek: (value: number) => void }, VideoProps>(function
 	},
 	forwaredRef,
 ) {
-	const { uri, type } = source;
 	const ref = useRef<HTMLVideoElement>(null);
+	const oldHls = useRef<string | null>(null);
 	const { css } = useYoshiki();
 
 	useImperativeHandle(
@@ -78,7 +93,7 @@ const Video = forwardRef<{ seek: (value: number) => void }, VideoProps>(function
 
 	useEffect(() => {
 		if (paused) ref.current?.pause();
-		else ref.current?.play().catch(() => {});
+		else ref.current?.play().catch(() => { });
 	}, [paused]);
 	useEffect(() => {
 		if (!ref.current || !volume) return;
@@ -89,33 +104,39 @@ const Video = forwardRef<{ seek: (value: number) => void }, VideoProps>(function
 	const subtitle = useAtomValue(subtitleAtom);
 	useSubtitle(ref, subtitle, fonts);
 
+
 	useLayoutEffect(() => {
 		(async () => {
-			if (!ref?.current || !uri || !type) return;
-			// TODO: Use hls.js even for safari or handle XHR requests with tokens,auto...
-			if (type === "direct" || ref.current.canPlayType("application/vnd.apple.mpegurl")) {
-				ref.current.src = uri;
+			await initHls();
+			// Still load the hls source to list available qualities.
+			// Note: This may ask the server to transmux the audio/video by loading the index.m3u8
+			hls.loadSource(source.hls);
+		})();
+	}, [source.hls]);
+	useLayoutEffect(() => {
+		(async () => {
+			if (!ref?.current || !source.uri) return;
+			await initHls();
+			if (oldHls.current !== source.hls) {
+				// Still load the hls source to list available qualities.
+				// Note: This may ask the server to transmux the audio/video by loading the index.m3u8
+				hls.loadSource(source.hls);
+				oldHls.current = source.hls;
+			}
+			if (!source.uri.endsWith(".m3u8")) {
+				hls.detachMedia();
+				ref.current.src = source.uri;
 			} else {
-				if (hls === null) {
-					const token = await getToken();
-					hls = new Hls({
-						xhrSetup: (xhr) => {
-							if (token) xhr.setRequestHeader("Authorization", `Bearer: {token}`);
-							xhr.setRequestHeader("X-CLIENT-ID", client_id);
-						},
-					});
-				}
-				hls.loadSource(uri);
 				hls.attachMedia(ref.current);
 				// TODO: Enable custom XHR for tokens
 				hls.on(Hls.Events.MANIFEST_LOADED, async () => {
 					try {
 						await ref.current?.play();
-					} catch {}
+					} catch { }
 				});
 			}
 		})();
-	}, [uri, type]);
+	}, [source.uri, source.hls]);
 
 	const setPlay = useSetAtom(playAtom);
 	useEffect(() => {
@@ -221,3 +242,66 @@ const useSubtitle = (player: RefObject<HTMLVideoElement>, value: Track | null, f
 		}
 	}, [player, value, fonts]);
 };
+
+export const AudiosMenu = (props: ComponentProps<typeof Menu>) => {
+	if (!hls || hls.audioTracks.length < 2) return null;
+	return (
+		<Menu {...props}>
+			{hls.audioTracks.map((x, i) => (
+				<Menu.Item
+					key={i.toString()}
+					label={x.name}
+					selected={hls!.audioTrack === i}
+					onSelect={() => (hls!.audioTrack = i)}
+				/>
+			))}
+		</Menu>
+	);
+};
+
+export const QualitiesMenu = (props: ComponentProps<typeof Menu>) => {
+	const { t } = useTranslation();
+	const [mode, setPlayMode] = useAtom(playModeAtom);
+	const [_, rerender] = useReducer((x) => x + 1, 0);
+
+	useEffect(() => {
+		if (!hls) return;
+		hls.on(Hls.Events.LEVEL_SWITCHED, rerender);
+		return () => hls!.off(Hls.Events.LEVEL_SWITCHED, rerender);
+	});
+
+	return (
+		<Menu {...props}>
+			<Menu.Item
+				label={t("player.direct")}
+				selected={hls === null || mode == PlayMode.Direct}
+				onSelect={() => setPlayMode(PlayMode.Direct)}
+			/>
+			<Menu.Item
+				label={
+					hls != null && hls.autoLevelEnabled && hls.currentLevel >= 0
+						? `${t("player.auto")} (${hls.levels[hls.currentLevel].height}p)`
+						: t("player.auto")
+				}
+				selected={hls?.autoLevelEnabled && mode === PlayMode.Hls}
+				onSelect={() => {
+					setPlayMode(PlayMode.Hls);
+					if (hls) hls.nextLevel = -1;
+				}}
+			/>
+			{hls?.levels
+				.map((x, i) => (
+					<Menu.Item
+						key={i.toString()}
+						label={`${x.height}p`}
+						selected={mode === PlayMode.Hls && hls!.currentLevel === i && !hls?.autoLevelEnabled}
+						onSelect={() => {
+							setPlayMode(PlayMode.Hls);
+							hls!.nextLevel = i;
+						}}
+					/>
+				))
+				.reverse()}
+		</Menu>
+	);
+};

front/translations/en.json

@@ -44,9 +44,12 @@
 		"mute": "Toggle mute",
 		"volume": "Volume",
 		"quality": "Quality",
+		"audios": "Audio",
 		"subtitles": "Subtitles",
 		"subtitle-none": "None",
-		"fullscreen": "Fullscreen"
+		"fullscreen": "Fullscreen",
+		"direct": "Pristine",
+		"auto": "Auto"
 	},
 	"search": {
 		"empty": "No result found. Try a different query."

front/translations/fr.json

@@ -44,9 +44,12 @@
 		"mute": "Muet",
 		"volume": "Volume",
 		"quality": "Qualité",
+		"audios": "Audio",
 		"subtitles": "Sous titres",
 		"subtitle-none": "Aucun",
-		"fullscreen": "Plein-écran"
+		"fullscreen": "Plein-écran",
+		"direct": "Pristine",
+		"auto": "Auto"
 	},
 	"search": {
 		"empty": "Aucun résultat trouvé. Essayer avec une autre recherche."