stream.place
Live video on the AT Protocol
multistreaming: redact urls on frontend
+4
-1
js/app/components/live-dashboard/bento-grid.tsx
+4
-1
js/app/components/live-dashboard/bento-grid.tsx
+26
-5
js/app/components/settings/multistream-manager.tsx
+26
-5
js/app/components/settings/multistream-manager.tsx
···
26
26
record: PlaceStreamMultistreamTarget.Record;
27
27
}
28
28
29
+
const redactMultistreamTargetURL = (url: string) => {
30
+
try {
31
+
const u = new URL(url);
32
+
return `${u.protocol}//${u.host}/redacted`;
33
+
} catch (error) {
34
+
return "parsing failed";
35
+
}
36
+
};
37
+
29
38
const multistreamTitle = (
30
39
target: MultistreamTargetViewHydrated | undefined,
31
40
t: TFunction,
···
363
372
return (
364
373
<SettingsListItem
365
374
title={multistreamTitle(target, t)}
366
-
url={target.record.url}
375
+
url={redactMultistreamTargetURL(target.record.url)}
367
376
active={target.record.active}
368
377
isDeleting={isDeleting}
369
378
isToggling={isToggling}
···
405
414
);
406
415
407
416
const [errors, setErrors] = useState<Record<string, string>>({});
417
+
const [changedTargetUrl, setChangedTargetUrl] = useState(false);
408
418
409
419
// Update form data when webhook prop changes (for editing)
410
420
useEffect(() => {
411
421
setErrors({});
422
+
setChangedTargetUrl(false);
412
423
if (target) {
413
424
setFormData({
414
425
$type: "place.stream.multistream.target",
···
448
459
}
449
460
};
450
461
462
+
let displayUrl = formData.url;
463
+
if (target && !changedTargetUrl) {
464
+
displayUrl = "";
465
+
}
466
+
451
467
return (
452
468
<Dialog
453
469
open={isVisible}
···
483
499
{t("rtmp-target-url")} *
484
500
</Text>
485
501
<Input
486
-
value={formData.url}
487
-
onChangeText={(text) =>
502
+
value={displayUrl}
503
+
onChangeText={(text) => {
504
+
setChangedTargetUrl(true);
488
505
setFormData((prev) => ({
489
506
...prev,
490
507
url: text.trim().replaceAll(/\n/g, ""),
491
-
}))
508
+
}));
509
+
}}
510
+
placeholder={
511
+
target
512
+
? redactMultistreamTargetURL(target.record.url)
513
+
: "rtmps://example.com:443/live/foo"
492
514
}
493
-
placeholder="rtmps://example.com:443/live/foo"
494
515
multiline
495
516
/>
496
517
<Text style={[text.red[600], mt[1], { fontSize: 12 }]}>