diff --git a/front/bun.lock b/front/bun.lock index 033836e2a..96f5b94f8 100644 --- a/front/bun.lock +++ b/front/bun.lock @@ -44,7 +44,7 @@ "react-native-localization-settings": "^1.2.0", "react-native-mmkv": "^4.3.1", "react-native-nitro-modules": "^0.35.7", - "react-native-omni": "^1.0.2", + "react-native-omni": "^1.0.3", "react-native-pager-view": "8.0.1", "react-native-reanimated": "4.3.1", "react-native-safe-area-context": "~5.7.0", @@ -1292,7 +1292,7 @@ "react-native-nitro-modules": ["react-native-nitro-modules@0.35.7", "", { "peerDependencies": { "react": "*", "react-native": "*" } }, "sha512-3EiU27EmnxTlD3pAXR2OBWeDg7+9tdjKrNQOPX08rFX5hJPNIT/h1i2PjvTUieOypCGTEi9nW/SNBtK3F+4HYg=="], - "react-native-omni": ["react-native-omni@1.0.2", "", { "dependencies": { "@expo/config-plugins": "^57.0.3", "@videojs/react": "10.0.0-beta.25", "jassub": "^2.5.7", "libpgs": "^0.8.1" }, "peerDependencies": { "react": ">=19.0.0", "react-native": ">=0.86.0", "react-native-nitro-modules": ">=0.36.0" } }, "sha512-Q9EPdtW7niEQrouIQIrDMdmbb4bgLlXV1JfxXbVUn+we76dlKNPDhg7vqba3tTfZPkACPRyWdFlV9scEksujdA=="], + "react-native-omni": ["react-native-omni@1.0.3", "", { "dependencies": { "@expo/config-plugins": "^57.0.3", "@videojs/react": "10.0.0-beta.25", "jassub": "^2.5.7", "libpgs": "^0.8.1" }, "peerDependencies": { "react": ">=19.0.0", "react-native": ">=0.86.0", "react-native-nitro-modules": ">=0.36.0" } }, "sha512-gEOOmSbX/mMBgZENo1toxml08njrgwblYLuywi3VRFV8gv7q1SQwh99bhAXJMLTQfXT0kRO3lop6AMUHeqyA1Q=="], "react-native-pager-view": ["react-native-pager-view@8.0.1", "", { "peerDependencies": { "react": "*", "react-native": "*" } }, "sha512-pGOne2o0y0HOQLrlTLcGgOE48uJlqSZHRRwdW8nL6JJozMkPGJYi/G9e0EsJoWFpXYONjiDgr8IwxC4F6/r7Lg=="], diff --git a/front/package.json b/front/package.json index a53703bd8..9f102256e 100644 --- a/front/package.json +++ b/front/package.json @@ -55,7 +55,7 @@ "react-native-localization-settings": "^1.2.0", "react-native-mmkv": "^4.3.1", "react-native-nitro-modules": "^0.35.7", - "react-native-omni": "^1.0.2", + "react-native-omni": "^1.0.3", "react-native-pager-view": "8.0.1", "react-native-reanimated": "4.3.1", "react-native-safe-area-context": "~5.7.0", diff --git a/front/src/ui/player/controls/progress.tsx b/front/src/ui/player/controls/progress.tsx index 58d489f77..a18a89c2f 100644 --- a/front/src/ui/player/controls/progress.tsx +++ b/front/src/ui/player/controls/progress.tsx @@ -1,5 +1,5 @@ import { type CSSProperties, useState } from "react"; -import type { TextProps } from "react-native"; +import { type TextProps, useWindowDimensions } from "react-native"; import { usePlayer, usePlayerState } from "react-native-omni"; import { useResolveClassNames } from "uniwind"; import type { Chapter } from "~/models"; @@ -22,7 +22,13 @@ export const ProgressBar = ({ const { data } = useFetch(Info.infoQuery(slug)); const player = usePlayer(); - const progress = usePlayerState("currentTime"); + // only refresh when the slider would visually move by ~1px (once per second + // at most), instead of every second regardless of the video's length. + const { width } = useWindowDimensions(); + const refreshInterval = data?.durationSeconds + ? Math.max(1, data.durationSeconds / width) + : 1; + const progress = usePlayerState("currentTime", refreshInterval); const buffer = usePlayerState("buffered"); const [hoverProgress, setHoverProgress] = useState(null);