Live video on the AT Protocol
stream.place
Merge pull request #713 from streamplace/natb/fix-viewer-misalignment
fix: viewer # misalignment + home screen ratio
+2
-3
js/app/components/home/cards.tsx
+2
-3
js/app/components/home/cards.tsx
···
1
-
import { Text, useTheme, zero } from "@streamplace/components";
2
-
import Viewers from "components/viewers";
3
import useStreamplaceNode from "hooks/useStreamplaceNode";
4
import { Image, Platform, View } from "react-native";
5
···
101
},
102
]}
103
>
104
-
<Viewers viewers={viewers} />
105
</View>
106
)}
107
</View>
···
1
+
import { PlayerUI, Text, useTheme, zero } from "@streamplace/components";
2
import useStreamplaceNode from "hooks/useStreamplaceNode";
3
import { Image, Platform, View } from "react-native";
4
···
100
},
101
]}
102
>
103
+
<PlayerUI.DehydratedViewers viewers={viewers} />
104
</View>
105
)}
106
</View>
-34
js/app/components/viewers.tsx
-34
js/app/components/viewers.tsx
···
1
-
import { Text, useTheme, zero } from "@streamplace/components";
2
-
import { Eye } from "lucide-react-native";
3
-
import { View } from "react-native";
4
-
5
-
export default function Viewers({ viewers }: { viewers: number }) {
6
-
let { theme } = useTheme();
7
-
return (
8
-
<View
9
-
style={[
10
-
{ justifyContent: "center", alignItems: "center" },
11
-
{ flexDirection: "row" },
12
-
zero.gap.all[2],
13
-
zero.px[2],
14
-
zero.py[1],
15
-
]}
16
-
>
17
-
<Eye size={20} color="#fd5050" />
18
-
<Text
19
-
style={[
20
-
{ color: "#fd5050" },
21
-
{
22
-
textShadowColor: "black",
23
-
textShadowOffset: { width: -1, height: 1 },
24
-
textShadowRadius: 3,
25
-
},
26
-
]}
27
-
>
28
-
{new Intl.NumberFormat(undefined, { notation: "compact" }).format(
29
-
viewers,
30
-
)}
31
-
</Text>
32
-
</View>
33
-
);
34
-
}
···
+8
-9
js/app/src/screens/home.tsx
+8
-9
js/app/src/screens/home.tsx
···
72
}
73
74
function getHomeScreenCols(width: number): number {
75
-
if (width >= 1550) return 4; // Wide screens get 4 columns
76
-
if (width >= 1280) return 3; // xl gets 3 columns
77
-
if (width >= 1024) return 2; // lg gets 2 columns
78
-
if (width >= 768) return 2; // md gets 2 columns
79
-
return 1; // sm and below get 1 column
80
}
81
82
-
// Get the ratio for the first icon padding based on column count
83
function getPadPercentage(cols: number): number {
84
-
if (cols >= 4) return 2.07; // Less padding for 4+ columns
85
-
if (cols >= 3) return 1.3; // Original padding for 3 columns
86
-
return 1; // No extra padding for 2 or fewer columns
87
}
88
89
function HomeScreenItem({
···
72
}
73
74
function getHomeScreenCols(width: number): number {
75
+
if (width >= 1550) return 4;
76
+
if (width >= 1280) return 3;
77
+
if (width >= 1024) return 2;
78
+
if (width >= 768) return 2;
79
+
return 1;
80
}
81
82
+
// Get the ratio for the first card based on column count
83
function getPadPercentage(cols: number): number {
84
+
if (cols >= 3) return 2.07;
85
+
return 1;
86
}
87
88
function HomeScreenItem({
+14
-7
js/components/src/components/mobile-player/ui/viewers.tsx
+14
-7
js/components/src/components/mobile-player/ui/viewers.tsx
···
5
6
export function Viewers() {
7
const viewers = useViewers();
8
return (
9
<View
10
style={[
11
atoms.layout.flex.center,
12
atoms.layout.flex.row,
13
atoms.gap.all[2],
14
]}
15
>
16
<Eye color="#fd5050" />
17
<Text
18
-
style={{
19
-
color: "#fd5050",
20
-
textShadowColor: "black",
21
-
textShadowOffset: { width: -1, height: 1 },
22
-
textShadowRadius: 3,
23
-
fontSize: 16,
24
-
}}
25
>
26
{new Intl.NumberFormat(undefined, { notation: "compact" }).format(
27
viewers || 0,
···
5
6
export function Viewers() {
7
const viewers = useViewers();
8
+
return <DehydratedViewers viewers={viewers || 0} />;
9
+
}
10
+
11
+
export function DehydratedViewers({ viewers }: { viewers: number }) {
12
return (
13
<View
14
style={[
15
atoms.layout.flex.center,
16
atoms.layout.flex.row,
17
atoms.gap.all[2],
18
+
atoms.px[1],
19
]}
20
>
21
<Eye color="#fd5050" />
22
<Text
23
+
leading="snug"
24
+
style={[
25
+
{ color: "#fd5050" },
26
+
{
27
+
textShadowColor: "black",
28
+
textShadowRadius: 3,
29
+
lineHeight: 24,
30
+
},
31
+
]}
32
>
33
{new Intl.NumberFormat(undefined, { notation: "compact" }).format(
34
viewers || 0,