stream.place
Live video on the AT Protocol
1import { Text, View, usePlayerStore, zero } from "@streamplace/components";
2import { VolumeX } from "lucide-react-native";
3import { Pressable } from "react-native";
4
5const { layout, h, w, p, px } = zero;
6
7export function MuteOverlay() {
8 const muteWasForced = usePlayerStore((state) => state.muteWasForced);
9 const setMuted = usePlayerStore((state) => state.setMuted);
10 const setMuteWasForced = usePlayerStore((state) => state.setMuteWasForced);
11
12 if (!muteWasForced) return null;
13
14 return (
15 <View
16 style={[
17 layout.position.absolute,
18 layout.flex.center,
19 h.percent[100],
20 w.percent[100],
21 ]}
22 >
23 <Pressable
24 onPress={() => {
25 if (muteWasForced) {
26 setMuted(false);
27 setMuteWasForced(false);
28 }
29 }}
30 style={[
31 {
32 flexDirection: "column",
33 alignItems: "center",
34 justifyContent: "center",
35 gap: 8,
36 },
37 ]}
38 >
39 <View
40 style={[
41 p[4],
42 {
43 backgroundColor: "rgba(50, 30, 30, 0.4)",
44 borderRadius: 999,
45 borderWidth: 2,
46 borderColor: "rgba(255, 120, 120, 0.2)",
47 boxShadow: "0 2px 4px rgba(0, 0, 0, 1)",
48 shadowColor: "rgba(0, 0, 0, 1)",
49 },
50 ]}
51 >
52 <VolumeX size="48" color="rgba(255,120,120,0.8)" />
53 </View>
54 <View
55 style={[
56 px[2],
57 {
58 backgroundColor: "rgba(0,0,0, 0.8)",
59 borderRadius: 999,
60 borderWidth: 1,
61 borderColor: "rgba(255, 120, 120, 0.1)",
62 boxShadow: "0 2px 4px rgba(0, 0, 0, 1)",
63 shadowColor: "rgba(0, 0, 0, 1)",
64 },
65 ]}
66 >
67 <Text style={{ color: "rgba(180,180,180,0.8)" }} size="base">
68 Press to unmute
69 </Text>
70 </View>
71 </Pressable>
72 </View>
73 );
74}