Live video on the AT Protocol
stream.place
simplify to 'offline'-based video handling
+18
-23
js/app/components/player/video-retry.tsx
+18
-23
js/app/components/player/video-retry.tsx
···
1
-
import {
2
-
usePlayerStore,
3
-
useSegment,
4
-
useStreamplaceStore,
5
-
} from "@streamplace/components";
6
-
import React, { useEffect } from "react";
7
-
8
-
import { useRef } from "react";
9
10
export default function VideoRetry(props: { children: React.ReactNode }) {
11
const retryTimeoutRef = useRef<NodeJS.Timeout | null>(null);
12
-
// last segment start time
13
-
let [lastSegST, setLastSegST] = React.useState<string | null>(null);
14
-
const segment = useSegment();
15
16
const offline = usePlayerStore((x) => x.offline);
17
-
const spurl = useStreamplaceStore((x) => x.url);
18
19
useEffect(() => {
20
-
if (
21
-
lastSegST !== null &&
22
-
segment &&
23
-
segment.startTime !== lastSegST &&
24
-
offline
25
-
) {
26
-
console.log("Timeout detected!");
27
const jitter = 500 + Math.random() * 1500;
28
retryTimeoutRef.current = setTimeout(() => {
29
-
console.log("Retrying video segment", segment.startTime);
30
-
setLastSegST(segment.startTime);
31
}, jitter);
32
}
33
return () => {
34
if (retryTimeoutRef.current) {
35
clearTimeout(retryTimeoutRef.current);
36
}
37
};
38
-
}, [offline, segment, spurl, lastSegST]);
39
40
-
return <React.Fragment key={lastSegST}>{props.children}</React.Fragment>;
41
}
···
1
+
import { usePlayerStore } from "@streamplace/components";
2
+
import React, { useEffect, useRef, useState } from "react";
3
4
export default function VideoRetry(props: { children: React.ReactNode }) {
5
const retryTimeoutRef = useRef<NodeJS.Timeout | null>(null);
6
+
const [retries, setRetries] = useState(0);
7
+
const [hasStarted, setHasStarted] = useState(false);
8
9
const offline = usePlayerStore((x) => x.offline);
10
11
useEffect(() => {
12
+
if (!offline && !hasStarted) {
13
+
console.log("Player is online. Marking as started.");
14
+
setHasStarted(true);
15
+
}
16
+
17
+
if (offline) {
18
+
console.log("Player is offline. Incrementing retries.");
19
+
setRetries((prevRetries) => prevRetries + 1);
20
+
21
const jitter = 500 + Math.random() * 1500;
22
retryTimeoutRef.current = setTimeout(() => {
23
+
console.log("Retrying video playback...");
24
}, jitter);
25
}
26
+
27
return () => {
28
if (retryTimeoutRef.current) {
29
+
console.log("Clearing retry timeout");
30
clearTimeout(retryTimeoutRef.current);
31
}
32
};
33
+
}, [offline, hasStarted]);
34
35
+
return <React.Fragment key={retries}>{props.children}</React.Fragment>;
36
}