Live video on the AT Protocol
stream.place
re-add offline counter
+63
js/app/components/mobile/desktop-ui.tsx
+63
js/app/components/mobile/desktop-ui.tsx
···
32
32
useSharedValue,
33
33
withTiming,
34
34
} from "react-native-reanimated";
35
+
import { OfflineCounter } from "./offline-counter";
35
36
import { useResponsiveLayout } from "./useResponsiveLayout";
36
37
37
38
const { borders, colors, gap, h, layout, position, w, px, py, r, p, bg, text } =
···
523
524
description="We're notifying your followers that you just went live."
524
525
duration={5}
525
526
/>
527
+
{offline && <OfflineCounter />}
528
+
529
+
{muteWasForced && (
530
+
<View
531
+
style={[
532
+
layout.position.absolute,
533
+
layout.flex.center,
534
+
h.percent[100],
535
+
w.percent[100],
536
+
]}
537
+
>
538
+
<Pressable
539
+
onPress={() => {
540
+
if (muteWasForced) {
541
+
setMuted(false);
542
+
setMuteWasForced(false);
543
+
}
544
+
}}
545
+
style={[
546
+
{
547
+
flexDirection: "column",
548
+
alignItems: "center",
549
+
justifyContent: "center",
550
+
gap: 8,
551
+
},
552
+
]}
553
+
>
554
+
<View
555
+
style={[
556
+
p[4],
557
+
{
558
+
backgroundColor: "rgba(50, 30, 30, 0.4)",
559
+
borderRadius: 999,
560
+
borderWidth: 2,
561
+
borderColor: "rgba(255, 120, 120, 0.2)",
562
+
boxShadow: "0 2px 4px rgba(0, 0, 0, 1)",
563
+
shadowColor: "rgba(0, 0, 0, 1)",
564
+
},
565
+
]}
566
+
>
567
+
<VolumeX size="48" color="rgba(255,120,120,0.8)" />
568
+
</View>
569
+
<View
570
+
style={[
571
+
px[2],
572
+
{
573
+
backgroundColor: "rgba(0,0,0, 0.8)",
574
+
borderRadius: 999,
575
+
borderWidth: 1,
576
+
borderColor: "rgba(255, 120, 120, 0.1)",
577
+
boxShadow: "0 2px 4px rgba(0, 0, 0, 1)",
578
+
shadowColor: "rgba(0, 0, 0, 1)",
579
+
},
580
+
]}
581
+
>
582
+
<Text style={{ color: "rgba(180,180,180,0.8)" }} size="base">
583
+
Press to unmute
584
+
</Text>
585
+
</View>
586
+
</Pressable>
587
+
</View>
588
+
)}
526
589
</View>
527
590
{showMetrics && (
528
591
<View