stream.place
Live video on the AT Protocol
convert to zcss
+21
-25
js/components/src/components/mobile-player/ui/audio-only-overlay.tsx
+21
-25
js/components/src/components/mobile-player/ui/audio-only-overlay.tsx
···
1
1
import { Volume2 } from "lucide-react-native";
2
-
import { StyleSheet } from "react-native";
2
+
import { zero } from "../../..";
3
3
import { usePlayerStore } from "../../../player-store";
4
4
import { Text, View } from "../../ui";
5
5
···
12
12
}
13
13
14
14
return (
15
-
<View style={styles.container}>
16
-
<View style={styles.content}>
15
+
<View
16
+
style={[
17
+
zero.layout.position.absolute,
18
+
zero.position.top[0],
19
+
zero.position.left[0],
20
+
zero.position.right[0],
21
+
zero.position.bottom[0],
22
+
zero.layout.flex.center,
23
+
]}
24
+
>
25
+
<View
26
+
style={[
27
+
zero.layout.flex.column,
28
+
zero.layout.flex.alignCenter,
29
+
zero.gap.all[3],
30
+
zero.px[6],
31
+
]}
32
+
>
17
33
<Volume2 color="#fff" size={48} />
18
-
<Text size="lg" weight="semibold" style={styles.text}>
34
+
<Text size="lg" weight="semibold" center>
19
35
Audio Only mode
20
36
</Text>
21
37
<Text
22
38
size="sm"
23
39
color="muted"
24
-
style={styles.text}
40
+
center
25
41
onPress={() => setSelectedRendition("source")}
26
42
>
27
43
Go to Settings > Quality to switch back to video.
···
30
46
</View>
31
47
);
32
48
}
33
-
34
-
const styles = StyleSheet.create({
35
-
container: {
36
-
position: "absolute",
37
-
top: 0,
38
-
left: 0,
39
-
right: 0,
40
-
bottom: 0,
41
-
justifyContent: "center",
42
-
alignItems: "center",
43
-
},
44
-
content: {
45
-
alignItems: "center",
46
-
gap: 12,
47
-
paddingHorizontal: 24,
48
-
},
49
-
text: {
50
-
textAlign: "center",
51
-
},
52
-
});