Live video on the AT Protocol
stream.place
Compare changes
Choose any two refs to compare.
js
components
src
components
mobile-player
+30
-2
js/components/src/components/mobile-player/ui/viewer-context-menu.tsx
+30
-2
js/components/src/components/mobile-player/ui/viewer-context-menu.tsx
···
58
const setReportModalOpen = usePlayerStore((x) => x.setReportModalOpen);
59
const setReportSubject = usePlayerStore((x) => x.setReportSubject);
60
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
0
61
const { profile } = useLivestreamInfo();
62
63
const avatars = useAvatars(profile?.did ? [profile?.did] : []);
···
215
>
216
<Text>Quality</Text>
217
<Text muted size={isMobile ? "base" : "sm"}>
218
-
{quality === "source" ? "Source" : quality},{" "}
0
0
219
{lowLatency ? "Low Latency" : ""}
220
</Text>
221
</View>
···
227
onValueChange={setQuality}
228
>
229
<DropdownMenuRadioItem value="source">
230
-
<Text>Source (Original Quality)</Text>
231
</DropdownMenuRadioItem>
232
{qualities.map((r) => (
233
<DropdownMenuRadioItem key={r.name} value={r.name}>
···
58
const setReportModalOpen = usePlayerStore((x) => x.setReportModalOpen);
59
const setReportSubject = usePlayerStore((x) => x.setReportSubject);
60
61
+
const latestSegment = useLivestreamStore((x) => x.segment);
62
+
// get highest height x width rendition for video
63
+
const videoRendition = latestSegment?.video?.reduce((prev, current) => {
64
+
const prevPixels = prev.width * prev.height;
65
+
const currentPixels = current.width * current.height;
66
+
return currentPixels > prevPixels ? current : prev;
67
+
}, latestSegment?.video?.[0]);
68
+
const highestLength = videoRendition
69
+
? videoRendition.height < videoRendition.width
70
+
? videoRendition.height
71
+
: videoRendition?.width
72
+
: 0;
73
+
74
+
// ugh i hate this
75
+
const frames = videoRendition?.framerate as
76
+
| { num: number; den: number }
77
+
| undefined;
78
+
const fps =
79
+
frames?.num && frames?.den
80
+
? Math.round((frames.num / frames.den) * 100) / 100
81
+
: 0;
82
+
83
+
const resolutionDisplay = highestLength
84
+
? `(${highestLength}p${fps > 0 ? fps : ""})`
85
+
: "(Original Quality)";
86
+
87
const { profile } = useLivestreamInfo();
88
89
const avatars = useAvatars(profile?.did ? [profile?.did] : []);
···
241
>
242
<Text>Quality</Text>
243
<Text muted size={isMobile ? "base" : "sm"}>
244
+
{quality === "source"
245
+
? `Source${resolutionDisplay ? " " + resolutionDisplay + "\n" : ", "}`
246
+
: quality}
247
{lowLatency ? "Low Latency" : ""}
248
</Text>
249
</View>
···
255
onValueChange={setQuality}
256
>
257
<DropdownMenuRadioItem value="source">
258
+
<Text>Source {resolutionDisplay}</Text>
259
</DropdownMenuRadioItem>
260
{qualities.map((r) => (
261
<DropdownMenuRadioItem key={r.name} value={r.name}>