From dabdc4d876a74593eaeaa3d3a913b51eedffff17 Mon Sep 17 00:00:00 2001 From: Zoe Roux Date: Fri, 20 Mar 2026 19:27:43 +0100 Subject: [PATCH] Update to expo55 --- front/bun.lock | 4 ++-- front/package.json | 2 +- front/src/app/(app)/watch/[slug].tsx | 2 +- front/src/ui/player/controls/tracks-menu.tsx | 21 +++++++++++++------- front/src/ui/player/index.tsx | 6 ++++-- front/src/ui/player/subtitles.web.ts | 7 +++---- 6 files changed, 25 insertions(+), 17 deletions(-) diff --git a/front/bun.lock b/front/bun.lock index 8c1e81a7..d0eda66b 100644 --- a/front/bun.lock +++ b/front/bun.lock @@ -52,7 +52,7 @@ "react-native-screens": "~4.23.0", "react-native-svg": "15.15.3", "react-native-svg-transformer": "^1.5.3", - "react-native-video": "zoriya/react-native-video#build", + "react-native-video": "zoriya/react-native-video#v7-b8", "react-native-web": "^0.21.2", "react-native-worklets": "0.7.2", "react-tooltip": "^5.30.0", @@ -1344,7 +1344,7 @@ "react-native-svg-transformer": ["react-native-svg-transformer@1.5.3", "", { "dependencies": { "@svgr/core": "^8.1.0", "@svgr/plugin-jsx": "^8.1.0", "@svgr/plugin-svgo": "^8.1.0", "path-dirname": "^1.0.2" }, "peerDependencies": { "react-native": ">=0.59.0", "react-native-svg": ">=12.0.0" } }, "sha512-M4uFg5pUt35OMgjD4rWWbwd6PmxV96W7r/gQTTa+iZA5B+jO6aURhzAZGLHSrg1Kb91cKG0Rildy9q1WJvYstg=="], - "react-native-video": ["react-native-video@github:zoriya/react-native-video#b8ce1c9", { "peerDependencies": { "react": "*", "react-native": "*", "react-native-nitro-modules": ">=0.27.2" } }, "zoriya-react-native-video-b8ce1c9", "sha512-hp82nO1Ey1UyF8L70CuWpq4PZJ5MxS0Y9BHMhOSoUdPY4sVXz7EXSn3n3fn2P2MuYUSDkkAjl4eR7MJ9RnFe/A=="], + "react-native-video": ["react-native-video@github:zoriya/react-native-video#b5d793e", { "peerDependencies": { "react": "*", "react-native": "*", "react-native-nitro-modules": ">=0.35.0" } }, "zoriya-react-native-video-b5d793e", "sha512-auOw9a134IY1lZXbYn/IBQOzTzeUyxb8pq1jGGP36fNadTigrhoZLi+mkXl25Q4UrBlZG/U/L+XmqdMBLXJI+g=="], "react-native-web": ["react-native-web@0.21.2", "", { "dependencies": { "@babel/runtime": "^7.18.6", "@react-native/normalize-colors": "^0.74.1", "fbjs": "^3.0.4", "inline-style-prefixer": "^7.0.1", "memoize-one": "^6.0.0", "nullthrows": "^1.1.1", "postcss-value-parser": "^4.2.0", "styleq": "^0.1.3" }, "peerDependencies": { "react": "^18.0.0 || ^19.0.0", "react-dom": "^18.0.0 || ^19.0.0" } }, "sha512-SO2t9/17zM4iEnFvlu2DA9jqNbzNhoUP+AItkoCOyFmDMOhUnBBznBDCYN92fGdfAkfQlWzPoez6+zLxFNsZEg=="], diff --git a/front/package.json b/front/package.json index 5a7f8c38..70914f1d 100644 --- a/front/package.json +++ b/front/package.json @@ -63,7 +63,7 @@ "react-native-screens": "~4.23.0", "react-native-svg": "15.15.3", "react-native-svg-transformer": "^1.5.3", - "react-native-video": "zoriya/react-native-video#build", + "react-native-video": "zoriya/react-native-video#v7-b8", "react-native-web": "^0.21.2", "react-native-worklets": "0.7.2", "react-tooltip": "^5.30.0", diff --git a/front/src/app/(app)/watch/[slug].tsx b/front/src/app/(app)/watch/[slug].tsx index 1086ab19..ff9f0d22 100644 --- a/front/src/app/(app)/watch/[slug].tsx +++ b/front/src/app/(app)/watch/[slug].tsx @@ -1,5 +1,5 @@ import { Player } from "~/ui/player"; -export { ErrorBoundary } from "~/ui/error-boundary"; +export { LayoutErrorBoundary as ErrorBoundary } from "~/ui/error-boundary"; export default Player; diff --git a/front/src/ui/player/controls/tracks-menu.tsx b/front/src/ui/player/controls/tracks-menu.tsx index c4712bc8..50263c52 100644 --- a/front/src/ui/player/controls/tracks-menu.tsx +++ b/front/src/ui/player/controls/tracks-menu.tsx @@ -2,7 +2,12 @@ import ClosedCaption from "@material-symbols/svg-400/rounded/closed_caption-fill import MusicNote from "@material-symbols/svg-400/rounded/music_note-fill.svg"; import SettingsIcon from "@material-symbols/svg-400/rounded/settings-fill.svg"; import VideoSettings from "@material-symbols/svg-400/rounded/video_settings-fill.svg"; -import { type ComponentProps, createContext, useContext } from "react"; +import { + type ComponentProps, + createContext, + useContext, + useState, +} from "react"; import { useTranslation } from "react-i18next"; import { useEvent, type VideoPlayer } from "react-native-video"; import { IconButton, Menu, tooltip } from "~/primitives"; @@ -22,18 +27,20 @@ export const SubtitleMenu = ({ const { t } = useTranslation(); const getDisplayName = useSubtitleName(); - const rerender = useForceRerender(); - useEvent(player, "onTrackChange", rerender); + const [selectedIdx, setSelectedIdx] = useState( + player.getAvailableTextTracks().findIndex((x) => x.selected), + ); + useEvent(player, "onTrackChange", () => { + setSelectedIdx( + player.getAvailableTextTracks().findIndex((x) => x.selected), + ); + }); const [slug] = useQueryState("slug", undefined!); const { data } = useFetch(Info.infoQuery(slug)); if (data?.subtitles.length === 0) return null; - const selectedIdx = player - .getAvailableTextTracks() - .findIndex((x) => x.selected); - return ( { // we'll also want to replace source here once https://github.com/TheWidlarzGroup/react-native-video/issues/4722 is ready useEffect(() => { - if (Platform.OS === "web") player.__ass.fonts = info?.fonts ?? []; + if (Platform.OS !== "web") return; + enhanceSubtitles(player); + player.__ass.fonts = info?.fonts ?? []; }, [player, info?.fonts]); const router = useRouter(); @@ -180,7 +182,7 @@ export const Player = () => { pictureInPicture autoEnterPictureInPicture resizeMode={"contain"} - style={StyleSheet.absoluteFillObject} + style={StyleSheet.absoluteFill} /> diff --git a/front/src/ui/player/subtitles.web.ts b/front/src/ui/player/subtitles.web.ts index 3c25e75f..1f046c9e 100644 --- a/front/src/ui/player/subtitles.web.ts +++ b/front/src/ui/player/subtitles.web.ts @@ -16,11 +16,13 @@ declare module "react-native-video" { } export const enhanceSubtitles = (player: VideoPlayer) => { + if (player.__ass) return; player.__ass = { fonts: [] }; const select = player.selectTextTrack.bind(player); player.selectTextTrack = async (track) => { player.__currentId = undefined; + select(track); if (!track) { player.__unselect?.(); @@ -33,10 +35,7 @@ export const enhanceSubtitles = (player: VideoPlayer) => { switch (newMode) { case "vtt": - select(track); - player.__unselect = (newMode) => { - if (newMode !== "vtt") select(null); - }; + player.__unselect = () => {}; break; case "ass": player.__currentId = track.id;