railbird/react-native-video
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix never ending loading, try to respect crops

Browse Source
This commit is contained in:
Ivan Malison 2024-10-17 18:19:05 -06:00
parent bd64379837
commit 4f18e9b238
1 changed files with 35 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
src/Video.web.tsx
View File

@ -4,6 +4,7 @@ import React, {
useEffect, useEffect,
useImperativeHandle, useImperativeHandle,
useRef, useRef,
useState,
type RefObject, type RefObject,
} from 'react'; } from 'react';
//@ts-ignore //@ts-ignore
@ -40,6 +41,7 @@ const Video = forwardRef<VideoRef, ReactVideoProps>(
) => { ) => {
const nativeRef = useRef<HTMLVideoElement>(null); const nativeRef = useRef<HTMLVideoElement>(null);
const shakaPlayerRef = useRef<shaka.Player | null>(null); const shakaPlayerRef = useRef<shaka.Player | null>(null);
const [ currentSource, setCurrentSource ] = useState<string | null>(null);
const isSeeking = useRef(false); const isSeeking = useRef(false);
const seek = useCallback( const seek = useCallback(
@ -228,16 +230,28 @@ const Video = forwardRef<VideoRef, ReactVideoProps>(
nativeRef.current.playbackRate = rate; nativeRef.current.playbackRate = rate;
}, [rate]); }, [rate]);
useEffect(() => {
if (!nativeRef.current) { const makeNewShaka = useCallback(() => {
console.log("Not starting shaka yet bc undefined")
return;
}
if (shakaPlayerRef.current) { if (shakaPlayerRef.current) {
shakaPlayerRef.current.unload() shakaPlayerRef.current.unload()
} }
shakaPlayerRef.current = new shaka.Player(); shakaPlayerRef.current = new shaka.Player();
if (source?.cropStart) {
shakaPlayerRef.current.configure({playRangeStart: source?.cropStart / 1000})
}
if (source?.cropEnd) {
shakaPlayerRef.current.configure({playRangeEnd: source?.cropEnd / 1000})
}
if (source?.cropStart) {
shakaPlayerRef.current.configure({playRangeStart: source?.cropStart / 1000})
}
if (source?.cropEnd) {
shakaPlayerRef.current.configure({playRangeEnd: source?.cropEnd / 1000})
}
//@ts-ignore //@ts-ignore
setCurrentSource(source);
shakaPlayerRef.current.addEventListener("error", (event) => { shakaPlayerRef.current.addEventListener("error", (event) => {
//@ts-ignore //@ts-ignore
const shakaError = event.detail; const shakaError = event.detail;
@ -250,14 +264,28 @@ const Video = forwardRef<VideoRef, ReactVideoProps>(
}); });
}); });
console.log("Initializing and attaching shaka") console.log("Initializing and attaching shaka")
shakaPlayerRef.current.attach(nativeRef.current, true); //@ts-ignore
shakaPlayerRef.current.attach(nativeRef.current);
//@ts-ignore //@ts-ignore
shakaPlayerRef.current.load(source?.uri).then( shakaPlayerRef.current.load(source?.uri).then(
() => console.log(`${source?.uri} finished loading`) () => console.log(`${source?.uri} finished loading`)
); );
console.log("Started shaka loading"); console.log("Started shaka loading");
}, [source, nativeRef.current]) }, [source, setCurrentSource]);
const nativeRefDefined = nativeRef.current ? true : false;
useEffect(() => {
if (!nativeRef.current) {
console.log("Not starting shaka yet bc undefined")
return;
}
if (source !== currentSource) {
console.log("Making new shaka, Old source: ", currentSource, "New source", source);
makeNewShaka()
}
}, [source, nativeRefDefined, currentSource])
useMediaSession(source?.metadata, nativeRef, showNotificationControls); useMediaSession(source?.metadata, nativeRef, showNotificationControls);