diff --git a/front/packages/models/src/utils.ts b/front/packages/models/src/utils.ts index 508d92f4..5a22e70f 100644 --- a/front/packages/models/src/utils.ts +++ b/front/packages/models/src/utils.ts @@ -18,8 +18,11 @@ * along with Kyoo. If not, see . */ +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; +} diff --git a/front/packages/ui/src/player/state.tsx b/front/packages/ui/src/player/state.tsx index d388101d..df004da6 100644 --- a/front/packages/ui/src/player/state.tsx +++ b/front/packages/ui/src/player/state.tsx @@ -18,7 +18,7 @@ * along with Kyoo. If not, see . */ -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.Direct); +export const playModeAtom = atom( + getLocalSetting("playmode", "direct") !== "auto" ? PlayMode.Direct : PlayMode.Hls, +); export const bufferedAtom = atom(0); export const durationAtom = atom(undefined); diff --git a/front/packages/ui/src/settings/base.tsx b/front/packages/ui/src/settings/base.tsx index 8a9e3265..4ed14211 100644 --- a/front/packages/ui/src/settings/base.tsx +++ b/front/packages/ui/src/settings/base.tsx @@ -18,7 +18,7 @@ * along with Kyoo. If not, see . */ -import { Account, User, queryFn, useAccount } from "@kyoo/models"; +import { User, queryFn, useAccount } from "@kyoo/models"; import { Container, H1, diff --git a/front/packages/ui/src/settings/playback.tsx b/front/packages/ui/src/settings/playback.tsx index 12759759..83aa82e6 100644 --- a/front/packages/ui/src/settings/playback.tsx +++ b/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 ( + +