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

fix closing popover on mobile

authored by 10xcrazy.horse and committed by

Eli Mallon 6fc0c01d f402de80

+26 -16
unified split
+26 -16
js/app/components/player/controls.tsx
··· 311 311 renditions={renditions} 312 312 selectedRendition={selectedRendition ?? "source"} 313 313 protocol={protocol} 314 - setSelectedRendition={setSelectedRendition} 315 - setProtocol={setProtocol} 314 + setSelectedRendition={(rendition) => { 315 + dispatch(setSelectedRendition(rendition)); 316 + setOpen(false); 317 + }} 318 + setProtocol={(protocol) => { 319 + dispatch(setProtocol(protocol)); 320 + setOpen(false); 321 + }} 316 322 dispatch={dispatch} 317 323 /> 318 324 ); ··· 329 335 keepChildrenMounted 330 336 stayInFrame 331 337 open={open} 338 + onOpenChange={setOpen} 332 339 > 333 340 <Popover.Trigger asChild cursor="pointer"> 334 - <Pressable 335 - style={{ 336 - justifyContent: "center", 337 - }} 338 - onPress={() => setOpen(!open)} 339 - > 340 - <View paddingLeft="$3" paddingRight="$5" justifyContent="center"> 341 - <Settings /> 342 - </View> 343 - </Pressable> 341 + <View position="relative" justifyContent="center" height={50}> 342 + <Pressable 343 + style={{ 344 + justifyContent: "center", 345 + height: "100%", 346 + }} 347 + onPress={() => setOpen(!open)} 348 + > 349 + <View paddingLeft="$3" paddingRight="$5" justifyContent="center"> 350 + <Settings /> 351 + </View> 352 + </Pressable> 353 + </View> 344 354 </Popover.Trigger> 345 355 346 356 <Adapt when="sm" platform="touch"> ··· 538 548 subTitle="Lowest latency, probably" 539 549 icon={Antenna} 540 550 iconAfter={protocol === PROTOCOL_WEBRTC ? CheckCircle : Circle} 541 - onPress={() => dispatch(setProtocol(PROTOCOL_WEBRTC))} 551 + onPress={() => setProtocol(PROTOCOL_WEBRTC)} 542 552 /> 543 553 </YGroup.Item> 544 554 </> ··· 567 577 iconAfter={ 568 578 props.selectedRendition === "auto" ? CheckCircle : Circle 569 579 } 570 - onPress={() => dispatch(setSelectedRendition("auto"))} 580 + onPress={() => setSelectedRendition("auto")} 571 581 /> 572 582 </YGroup.Item> 573 583 <Separator /> ··· 583 593 iconAfter={ 584 594 props.selectedRendition === "source" ? CheckCircle : Circle 585 595 } 586 - onPress={() => dispatch(setSelectedRendition("source"))} 596 + onPress={() => setSelectedRendition("source")} 587 597 /> 588 598 </YGroup.Item> 589 599 {renditions.map((rendition) => ( ··· 599 609 iconAfter={ 600 610 selectedRendition === rendition.name ? CheckCircle : Circle 601 611 } 602 - onPress={() => dispatch(setSelectedRendition(rendition.name))} 612 + onPress={() => setSelectedRendition(rendition.name)} 603 613 /> 604 614 </YGroup.Item> 605 615 </Fragment>