stream.place / streamplace
Live video on the AT Protocol
fork atom

resolution display for source

Natalie B. 2dd151ef 9b8591e5

+30 -2
+30 -2
js/components/src/components/mobile-player/ui/viewer-context-menu.tsx
··· 58 58 const setReportModalOpen = usePlayerStore((x) => x.setReportModalOpen); 59 59 const setReportSubject = usePlayerStore((x) => x.setReportSubject); 60 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 + 61 87 const { profile } = useLivestreamInfo(); 62 88 63 89 const avatars = useAvatars(profile?.did ? [profile?.did] : []); ··· 215 241 > 216 242 <Text>Quality</Text> 217 243 <Text muted size={isMobile ? "base" : "sm"}> 218 - {quality === "source" ? "Source" : quality},{" "} 244 + {quality === "source" 245 + ? `Source${resolutionDisplay ? " " + resolutionDisplay + "\n" : ", "}` 246 + : quality} 219 247 {lowLatency ? "Low Latency" : ""} 220 248 </Text> 221 249 </View> ··· 227 255 onValueChange={setQuality} 228 256 > 229 257 <DropdownMenuRadioItem value="source"> 230 - <Text>Source (Original Quality)</Text> 258 + <Text>Source {resolutionDisplay}</Text> 231 259 </DropdownMenuRadioItem> 232 260 {qualities.map((r) => ( 233 261 <DropdownMenuRadioItem key={r.name} value={r.name}>