stream.place
Live video on the AT Protocol
feat(frontend): Integrate ModeratorPanel into stream settings
- Add "Moderations" tab to Stream Settings panel
- Embed ModeratorPanel as sub-panel for cleaner UI
- Accessible via button selector alongside Create and Metadata
authored by
makeworld
ef0b5dd0
1341f8b7
+16
-4
+16
-4
js/app/components/live-dashboard/livestream-panel.tsx
+16
-4
js/app/components/live-dashboard/livestream-panel.tsx
···
2
2
Button,
3
3
Checkbox,
4
4
ContentMetadataForm,
5
+
Dashboard,
5
6
formatHandle,
6
7
formatHandleWithAt,
7
8
Input,
···
178
179
const [selectedImage, setSelectedImage] = useState<
179
180
string | File | Blob | undefined
180
181
>();
181
-
const [mode, setMode] = useState<"create" | "metadata">("create");
182
+
const [mode, setMode] = useState<"create" | "metadata" | "moderation">(
183
+
"create",
184
+
);
182
185
183
186
const [createPost, setCreatePost] = useState(true);
184
187
const [sendPushNotification, setSendPushNotification] = useState(true);
···
210
213
setCreatePost(typeof livestream.record.post !== "undefined");
211
214
}, [livestream, defaultCanonicalUrl]);
212
215
213
-
const handleModeChange = useCallback((newMode: "create" | "metadata") => {
214
-
setMode(newMode);
215
-
}, []);
216
+
const handleModeChange = useCallback(
217
+
(newMode: "create" | "metadata" | "moderation") => {
218
+
setMode(newMode);
219
+
},
220
+
[],
221
+
);
216
222
217
223
const handleSubmit = useCallback(async () => {
218
224
if (!title.trim()) return;
···
370
376
values={[
371
377
{ label: "Create", value: "create" },
372
378
{ label: "Metadata", value: "metadata" },
379
+
{ label: "Moderation", value: "moderation" },
373
380
]}
374
381
style={[{ marginVertical: -2 }]}
375
382
selectedValue={mode}
···
385
392
showUpdateButton={!userIsLive}
386
393
style={{ flex: 1, height: "100%" }}
387
394
/>
395
+
</View>
396
+
) : mode === "moderation" ? (
397
+
// Moderation view
398
+
<View style={[flex.values[1], { minHeight: 400 }]}>
399
+
<Dashboard.ModeratorPanel isLive={userIsLive} embedded={true} />
388
400
</View>
389
401
) : (
390
402
// Create/Edit view