Add default playmode setting

front/packages/models/src/utils.ts

@@ -18,8 +18,11 @@
  * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
  */
 
+import { Platform } from "react-native";
 import { Movie, Show } from "./resources";
 import { z } from "zod";
+import { useMMKVString } from "react-native-mmkv";
+import { storage } from "./account-internal";
 
 export const zdate = z.coerce.date;
 
@@ -39,3 +42,15 @@ export const getDisplayDate = (data: Show | Movie) => {
 		return airDate.getFullYear().toString();
 	}
 };
+
+export const useLocalSetting = (setting: string, def: string) => {
+	if (Platform.OS === "web" && typeof window === "undefined") return [def, null!] as const;
+	// eslint-disable-next-line react-hooks/rules-of-hooks
+	const [val, setter] = useMMKVString(`settings.${setting}`, storage);
+	return [val ?? def, setter] as const;
+};
+
+export const getLocalSetting = (setting: string, def: string) => {
+	if (Platform.OS === "web" && typeof window === "undefined") return def;
+	return storage.getString(`settings.${setting}`) ?? setting;
+}

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

@@ -18,7 +18,7 @@
  * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
  */
 
-import { Audio, Episode, Subtitle, useAccount } from "@kyoo/models";
+import { Audio, Episode, Subtitle, getLocalSetting, useAccount } from "@kyoo/models";
 import { atom, useAtom, useAtomValue, useSetAtom } from "jotai";
 import { useAtomCallback } from "jotai/utils";
 import { ElementRef, memo, useEffect, useLayoutEffect, useRef, useState, useCallback } from "react";
@@ -30,12 +30,13 @@ import { useTranslation } from "react-i18next";
 export const playAtom = atom(true);
 export const loadAtom = atom(false);
 
-// TODO: Default to auto or pristine depending on the user settings.
 export enum PlayMode {
 	Direct,
 	Hls,
 }
-export const playModeAtom = atom<PlayMode>(PlayMode.Direct);
+export const playModeAtom = atom<PlayMode>(
+	getLocalSetting("playmode", "direct") !== "auto" ? PlayMode.Direct : PlayMode.Hls,
+);
 
 export const bufferedAtom = atom(0);
 export const durationAtom = atom<number | undefined>(undefined);

front/packages/ui/src/settings/base.tsx

@@ -18,7 +18,7 @@
  * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
  */
 
-import { Account, User, queryFn, useAccount } from "@kyoo/models";
+import { User, queryFn, useAccount } from "@kyoo/models";
 import {
 	Container,
 	H1,

front/packages/ui/src/settings/playback.tsx

@@ -19,11 +19,15 @@
  */
 
 import { Select } from "@kyoo/primitives";
+import { useLocalSetting } from "@kyoo/models";
 import { useTranslation } from "react-i18next";
+import { useSetAtom } from "jotai";
 import { Preference, SettingsContainer, useSetting } from "./base";
+import { PlayMode, playModeAtom } from "../player/state";
 
-import SubtitleLanguage from "@material-symbols/svg-400/rounded/closed_caption-fill.svg";
+import PlayModeI from "@material-symbols/svg-400/rounded/display_settings-fill.svg";
 import AudioLanguage from "@material-symbols/svg-400/rounded/music_note-fill.svg";
+import SubtitleLanguage from "@material-symbols/svg-400/rounded/closed_caption-fill.svg";
 
 // I gave up on finding a way to retrive this using the Intl api (probably does not exist)
 // Simply copy pasted the list of languages from https://www.localeplanet.com/api/codelist.json
@@ -32,6 +36,8 @@ const allLanguages = ["af", "agq", "ak", "am", "ar", "as", "asa", "ast", "az", "
 
 export const PlaybackSettings = () => {
 	const { t, i18n } = useTranslation();
+	const [playMode, setDefaultPlayMode] = useLocalSetting("playmode", "direct");
+	const setCurrentPlayMode = useSetAtom(playModeAtom);
 	const [audio, setAudio] = useSetting("audioLanguage")!;
 	const [subtitle, setSubtitle] = useSetting("subtitleLanguage")!;
 	const languages = new Intl.DisplayNames([i18n.language ?? "en"], {
@@ -41,6 +47,22 @@ export const PlaybackSettings = () => {
 
 	return (
 		<SettingsContainer title={t("settings.playback.label")}>
+			<Preference
+				icon={PlayModeI}
+				label={t("settings.playback.playmode.label")}
+				description={t("settings.playback.playmode.description")}
+			>
+				<Select
+					label={t("settings.playback.playmode.label")}
+					value={playMode}
+					onValueChange={(value) => {
+						setDefaultPlayMode(value);
+						setCurrentPlayMode(value === "direct" ? PlayMode.Direct : PlayMode.Hls);
+					}}
+					values={["direct", "auto"]}
+					getLabel={(key) => t(`player.${key}`)}
+				/>
+			</Preference>
 			<Preference
 				icon={AudioLanguage}
 				label={t("settings.playback.audioLanguage.label")}

front/translations/en.json

@@ -94,6 +94,10 @@
 		},
 		"playback": {
 			"label": "Playback",
+			"playmode": {
+				"label": "Default play mode",
+				"description": "The default play mode used on this client. Pristine is lighter on the server but does not allow automatic quality changes"
+			},
 			"audioLanguage": {
 				"label": "Audio language",
 				"description": "The default audio language used when playing multi-audio videos"

front/translations/fr.json

@@ -94,6 +94,10 @@
 		},
 		"playback": {
 			"label": "Lecteur",
+			"playmode": {
+				"label": "Mode de lecture par default",
+				"description": "Mode de lecture par défaut utilisé sur ce client. Pristine est plus léger pour le serveur mais ne permet pas de modifier automatiquement la qualité"
+			},
 			"audioLanguage": {
 				"label": "Langue audio",
 				"description": "Langue audio par défaut utilisée lors de la lecture de vidéos multi-audio"