diff --git a/front/packages/ui/src/player/video.web.tsx b/front/packages/ui/src/player/video.web.tsx index 9e66a7a8..75d15dea 100644 --- a/front/packages/ui/src/player/video.web.tsx +++ b/front/packages/ui/src/player/video.web.tsx @@ -31,12 +31,12 @@ import { } from "react"; import { VideoProps } from "react-native-video"; import { useAtomValue, useSetAtom, useAtom } from "jotai"; -import { useYoshiki } from "yoshiki"; +import { useForceRerender, useYoshiki } from "yoshiki"; import Jassub from "jassub"; import { playAtom, PlayMode, playModeAtom, progressAtom, subtitleAtom } from "./state"; import Hls, { Level, LoadPolicy } from "hls.js"; import { useTranslation } from "react-i18next"; -import { Menu } from "@kyoo/primitives"; +import { Menu, tooltip } from "@kyoo/primitives"; import toVttBlob from "srt-webvtt"; let hls: Hls | null = null; @@ -331,8 +331,21 @@ const toWebVtt = async (srtUrl: string) => { export const AudiosMenu = ({ audios, ...props -}: ComponentProps & { audios?: Audio[] }) => { - if (!hls || hls.audioTracks.length < 2) return null; +}: ComponentProps> & { audios?: Audio[] }) => { + const { t } = useTranslation(); + const rerender = useForceRerender(); + // force rerender when mode changes + useAtomValue(playModeAtom); + + useEffect(() => { + if (!hls) return; + hls.on(Hls.Events.AUDIO_TRACK_LOADED, rerender); + return () => hls!.off(Hls.Events.AUDIO_TRACK_LOADED, rerender); + }); + + if (!hls || hls.audioTracks.length < 2) + return ; + return ( {hls.audioTracks.map((x, i) => ( @@ -350,7 +363,7 @@ export const AudiosMenu = ({ export const QualitiesMenu = (props: ComponentProps) => { const { t } = useTranslation(); const [mode, setPlayMode] = useAtom(playModeAtom); - const [_, rerender] = useReducer((x) => x + 1, 0); + const rerender = useForceRerender(); useEffect(() => { if (!hls) return; diff --git a/front/translations/en.json b/front/translations/en.json index e78045f1..b4b9a8ce 100644 --- a/front/translations/en.json +++ b/front/translations/en.json @@ -150,7 +150,8 @@ "fullscreen": "Fullscreen", "direct": "Pristine", "transmux": "Original", - "auto": "Auto" + "auto": "Auto", + "notInPristine": "Unavailable in pristine" }, "search": { "empty": "No result found. Try a different query."