stream.place
Live video on the AT Protocol
Merge pull request #887 from streamplace/natb/live-stop
feat: add a "stop stream" button
authored by
Eli Mallon
and committed by
GitHub
20bcf6e0
ca0d59bd
+229
-13
+4
js/app/components/login/login-modal.tsx
+4
js/app/components/login/login-modal.tsx
+1
js/app/components/mobile/desktop-ui.tsx
+1
js/app/components/mobile/desktop-ui.tsx
+16
-3
js/app/components/mobile/ui.tsx
+16
-3
js/app/components/mobile/ui.tsx
···
72
72
ingestStarting,
73
73
setIngestStarting,
74
74
toggleGoLive,
75
+
toggleStopStream,
75
76
} = useLivestreamInfo();
76
77
const { width, height } = usePlayerDimensions();
77
78
const { isPlayerRatioGreater } = useSegmentDimensions();
···
102
103
103
104
const isSelfAndNotLive = ingest === "new";
104
105
const isLive = ingest !== null && ingest !== "new";
106
+
107
+
useEffect(() => {
108
+
if (isLive && ingestStarting) {
109
+
setIngestStarting(false);
110
+
}
111
+
}, [isLive, ingestStarting, setIngestStarting]);
105
112
106
113
const FADE_OUT_DELAY = 4000;
107
114
const fadeOpacity = useSharedValue(1);
···
222
229
<View
223
230
style={[
224
231
layout.position.absolute,
225
-
position.top[28],
232
+
position.top[32],
226
233
position.left[0],
227
234
position.right[0],
228
235
layout.flex.column,
···
230
237
]}
231
238
>
232
239
<PlayerUI.MetricsPanel
233
-
showMetrics={isLive || isSelfAndNotLive}
240
+
showMetrics={shouldShowFloatingMetrics}
234
241
/>
235
242
</View>
236
243
)}
···
241
248
setTitle={setTitle}
242
249
ingestStarting={ingestStarting}
243
250
toggleGoLive={toggleGoLive}
251
+
isLive={isLive}
244
252
/>
245
253
)}
246
254
···
468
476
<Pressable onPress={doSetIngestCamera}>
469
477
<SwitchCamera color={theme.colors.foreground} size={20} />
470
478
</Pressable>
479
+
{Platform.OS === "web" && <PlayerUI.StreamContextMenu />}
471
480
</>
472
481
)}
473
482
{Platform.OS === "web" ? (
···
515
524
)}
516
525
</Pressable>
517
526
)}
518
-
<PlayerUI.ContextMenu />
527
+
{ingest === null ? (
528
+
<PlayerUI.ContextMenu />
529
+
) : (
530
+
<PlayerUI.StreamContextMenu />
531
+
)}
519
532
</View>
520
533
)}
521
534
{shouldShowChatSidePanel && setShowChat && (
+42
-8
js/components/src/components/mobile-player/ui/input.tsx
+42
-8
js/components/src/components/mobile-player/ui/input.tsx
···
9
9
setTitle: (title: string) => void;
10
10
ingestStarting: boolean;
11
11
toggleGoLive: () => void;
12
+
isLive: boolean;
13
+
toggleStopStream?: () => void;
12
14
};
13
15
14
16
export function InputPanel({
···
16
18
setTitle,
17
19
ingestStarting,
18
20
toggleGoLive,
21
+
isLive,
22
+
toggleStopStream,
19
23
}: InputPanelProps) {
20
24
const { slideKeyboard } = useKeyboardSlide();
21
25
return (
···
37
41
{ padding: 10 },
38
42
]}
39
43
>
40
-
<View backgroundColor="rgba(64,64,64,0.8)" borderRadius={12}>
41
-
<Input
42
-
value={title}
43
-
onChange={setTitle}
44
-
placeholder="Enter stream title"
45
-
onEndEditing={Keyboard.dismiss}
46
-
/>
47
-
</View>
44
+
{!isLive && (
45
+
<View backgroundColor="rgba(64,64,64,0.8)" borderRadius={12}>
46
+
<Input
47
+
value={title}
48
+
onChange={setTitle}
49
+
placeholder="Enter stream title"
50
+
onEndEditing={Keyboard.dismiss}
51
+
/>
52
+
</View>
53
+
)}
48
54
{ingestStarting ? (
49
55
<Text>Starting your stream...</Text>
56
+
) : isLive ? (
57
+
<View style={[layout.flex.center]}>
58
+
<Pressable
59
+
onPress={toggleStopStream}
60
+
style={[
61
+
px[4],
62
+
py[2],
63
+
layout.flex.row,
64
+
layout.flex.center,
65
+
gap.all[1],
66
+
{
67
+
backgroundColor: "rgba(64,64,64, 0.8)",
68
+
borderRadius: 12,
69
+
},
70
+
]}
71
+
>
72
+
<View
73
+
style={[
74
+
p[2],
75
+
{
76
+
backgroundColor: "rgba(256,0,0, 0.8)",
77
+
borderRadius: 12,
78
+
},
79
+
]}
80
+
/>
81
+
<Text center>Stop Stream</Text>
82
+
</Pressable>
83
+
</View>
50
84
) : (
51
85
<View style={[layout.flex.center]}>
52
86
<Pressable
+8
js/components/src/hooks/useLivestreamInfo.ts
+8
js/components/src/hooks/useLivestreamInfo.ts
···
9
9
const ingestStarting = usePlayerStore((x) => x.ingestStarting);
10
10
const setIngestStarting = usePlayerStore((x) => x.setIngestStarting);
11
11
const setIngestLive = usePlayerStore((x) => x.setIngestLive);
12
+
const stopIngest = usePlayerStore((x) => x.stopIngest);
12
13
13
14
const createStreamRecord = useCreateStreamRecord();
14
15
···
54
55
}
55
56
};
56
57
58
+
// Stop the current broadcast
59
+
const toggleStopStream = () => {
60
+
console.log("Stopping stream...");
61
+
stopIngest();
62
+
};
63
+
57
64
return {
58
65
ingest,
59
66
profile,
···
67
74
setIngestStarting,
68
75
handleSubmit,
69
76
toggleGoLive,
77
+
toggleStopStream,
70
78
};
71
79
}
+3
js/components/src/player-store/player-state.tsx
+3
js/components/src/player-store/player-state.tsx
···
63
63
ingestAutoStart?: boolean;
64
64
setIngestAutoStart?: (autoStart: boolean) => void;
65
65
66
+
/** stop ingest process, again with a slight delay to allow UI to update */
67
+
stopIngest: () => void;
68
+
66
69
/** Timestamp (number) when ingest started, or null if not started */
67
70
ingestStarted: number | null;
68
71
+17
js/components/src/player-store/player-store.tsx
+17
js/components/src/player-store/player-store.tsx
···
53
53
setIngestStarted: (timestamp: number | null) =>
54
54
set(() => ({ ingestStarted: timestamp })),
55
55
56
+
stopIngest: () => {
57
+
set(() => ({
58
+
ingestLive: false,
59
+
ingestConnectionState: "new",
60
+
ingestStarted: null,
61
+
})),
62
+
setTimeout(
63
+
() =>
64
+
set(() => ({
65
+
ingestLive: false,
66
+
ingestConnectionState: "new",
67
+
ingestStarted: null,
68
+
})),
69
+
200,
70
+
);
71
+
},
72
+
56
73
fullscreen: false,
57
74
setFullscreen: (isFullscreen: boolean) =>
58
75
set(() => ({ fullscreen: isFullscreen })),