fix player issue

This commit is contained in:
PhilReact 2024-12-21 10:59:38 +02:00
parent 9b88887a63
commit 0e97ee83a1
2 changed files with 19 additions and 14 deletions

View File

@ -5,7 +5,6 @@ import { getBaseApiReact } from '../App';
export const useFetchResources = () => { export const useFetchResources = () => {
const [resources, setResources] = useRecoilState(resourceDownloadControllerAtom); const [resources, setResources] = useRecoilState(resourceDownloadControllerAtom);
const intervalId = useRef(null)
const downloadResource = useCallback(({ service, name, identifier }, build) => { const downloadResource = useCallback(({ service, name, identifier }, build) => {
setResources((prev) => ({ setResources((prev) => ({
@ -24,7 +23,8 @@ export const useFetchResources = () => {
let timer = 24; let timer = 24;
let tries = 0; let tries = 0;
let calledFirstTime = false let calledFirstTime = false
let intervalId
let timeoutId
const callFunction = async ()=> { const callFunction = async ()=> {
if (isCalling) return; if (isCalling) return;
isCalling = true; isCalling = true;
@ -43,8 +43,11 @@ export const useFetchResources = () => {
}); });
res = await resCall.json() res = await resCall.json()
if(tries > 18 ){ if(tries > 18 ){
if(intervalId?.current){ if(intervalId){
clearInterval(intervalId?.current) clearInterval(intervalId)
}
if(timeoutId){
clearTimeout(timeoutId)
} }
setResources((prev) => ({ setResources((prev) => ({
...prev, ...prev,
@ -64,7 +67,7 @@ export const useFetchResources = () => {
if(build || (calledFirstTime === false && res?.status !== 'READY')){ if(build || (calledFirstTime === false && res?.status !== 'READY')){
const url = `${getBaseApiReact()}/arbitrary/resource/status/${service}/${name}/${identifier}?build=true`; const url = `${getBaseApiReact()}/arbitrary/resource/properties/${service}/${name}/${identifier}?build=true`;
const resCall = await fetch(url, { const resCall = await fetch(url, {
method: "GET", method: "GET",
headers: { headers: {
@ -101,7 +104,7 @@ export const useFetchResources = () => {
}, },
})); }));
setTimeout(() => { timeoutId = setTimeout(() => {
isCalling = false; isCalling = false;
downloadResource({ name, service, identifier }, true); downloadResource({ name, service, identifier }, true);
}, 25000); }, 25000);
@ -124,11 +127,13 @@ export const useFetchResources = () => {
// Check if progress is 100% and clear interval if true // Check if progress is 100% and clear interval if true
if (res?.status === 'READY') { if (res?.status === 'READY') {
if(intervalId.current){ if(intervalId){
clearInterval(intervalId.current); clearInterval(intervalId);
} }
if(timeoutId){
clearTimeout(timeoutId)
}
// Update Recoil state for completion // Update Recoil state for completion
setResources((prev) => ({ setResources((prev) => ({
...prev, ...prev,
@ -150,7 +155,7 @@ export const useFetchResources = () => {
} }
} }
callFunction() callFunction()
intervalId.current = setInterval(async () => { intervalId = setInterval(async () => {
callFunction() callFunction()
}, 5000); }, 5000);

View File

@ -440,7 +440,7 @@ export const VideoPlayer: React.FC<VideoPlayerProps> = ({
} }
} }
console.log('tester', startPlay, resourceStatus?.status, src )
return ( return (
<VideoContainer <VideoContainer
tabIndex={0} tabIndex={0}
@ -472,7 +472,7 @@ export const VideoPlayer: React.FC<VideoPlayerProps> = ({
}} }}
> >
<CircularProgress color="secondary" /> <CircularProgress color="secondary" />
{resourceStatus && (
<Typography <Typography
variant="subtitle2" variant="subtitle2"
component="div" component="div"
@ -494,14 +494,14 @@ export const VideoPlayer: React.FC<VideoPlayerProps> = ({
<>Download Completed: building tutorial video...</> <>Download Completed: building tutorial video...</>
) : resourceStatus?.status !== 'READY' ? ( ) : resourceStatus?.status !== 'READY' ? (
<> <>
{getDownloadProgress(resourceStatus?.localChunkCount, resourceStatus?.totalChunkCount)} {getDownloadProgress(resourceStatus?.localChunkCount || 0, resourceStatus?.totalChunkCount || 100)}
</> </>
) : ( ) : (
<>Fetching tutorial from the Qortal Network...</> <>Fetching tutorial from the Qortal Network...</>
)} )}
</Typography> </Typography>
)}
</Box> </Box>
)} )}
{((!src && !isLoading) || !startPlay) && ( {((!src && !isLoading) || !startPlay) && (