+5

bskyweb/templates/base.html

··· 253 253 from { opacity: 1; } 254 254 to { opacity: 0; } 255 255 } 256 256 + 257 257 + .force-no-clicks > *, 258 258 + .force-no-clicks * { 259 259 + pointer-events: none !important; 260 260 + } 256 261 </style> 257 262 </style> 258 263 {% include "scripts.html" %}

+2 -2

src/components/hooks/useInteractionState.ts

··· 5 5 6 6 const onIn = React.useCallback(() => { 7 7 setState(true) 8 8 - }, [setState]) 8 8 + }, []) 9 9 const onOut = React.useCallback(() => { 10 10 setState(false) 11 11 - }, [setState]) 11 11 + }, []) 12 12 13 13 return React.useMemo( 14 14 () => ({

+380 -112

src/view/com/util/post-embeds/VideoEmbedInner/VideoWebControls.tsx

··· 6 6 useSyncExternalStore, 7 7 } from 'react' 8 8 import {Pressable, View} from 'react-native' 9 9 - import Animated, {FadeIn, FadeOut} from 'react-native-reanimated' 9 9 + import {SvgProps} from 'react-native-svg' 10 10 import {msg, Trans} from '@lingui/macro' 11 11 import {useLingui} from '@lingui/react' 12 12 import type Hls from 'hls.js' 13 13 14 14 - import {isIPhoneWeb} from 'platform/detection' 14 14 + import {isFirefox} from '#/lib/browser' 15 15 + import {clamp} from '#/lib/numbers' 16 16 + import {isIPhoneWeb} from '#/platform/detection' 15 17 import { 16 18 useAutoplayDisabled, 17 19 useSetSubtitlesEnabled, 18 20 useSubtitlesEnabled, 19 19 - } from 'state/preferences' 21 21 + } from '#/state/preferences' 20 22 import {atoms as a, useTheme, web} from '#/alf' 21 23 import {Button} from '#/components/Button' 22 24 import {useInteractionState} from '#/components/hooks/useInteractionState' ··· 173 175 toggleFullscreen() 174 176 }, [drawFocus, toggleFullscreen]) 175 177 178 178 + const onSeek = useCallback( 179 179 + (time: number) => { 180 180 + if (!videoRef.current) return 181 181 + if (videoRef.current.fastSeek) { 182 182 + videoRef.current.fastSeek(time) 183 183 + } else { 184 184 + videoRef.current.currentTime = time 185 185 + } 186 186 + }, 187 187 + [videoRef], 188 188 + ) 189 189 + 190 190 + const playStateBeforeSeekRef = useRef(false) 191 191 + 192 192 + const onSeekStart = useCallback(() => { 193 193 + drawFocus() 194 194 + playStateBeforeSeekRef.current = playing 195 195 + pause() 196 196 + }, [playing, pause, drawFocus]) 197 197 + 198 198 + const onSeekEnd = useCallback(() => { 199 199 + if (playStateBeforeSeekRef.current) { 200 200 + play() 201 201 + } 202 202 + }, [play]) 203 203 + 204 204 + const seekLeft = useCallback(() => { 205 205 + if (!videoRef.current) return 206 206 + // eslint-disable-next-line @typescript-eslint/no-shadow 207 207 + const currentTime = videoRef.current.currentTime 208 208 + // eslint-disable-next-line @typescript-eslint/no-shadow 209 209 + const duration = videoRef.current.duration || 0 210 210 + onSeek(clamp(currentTime - 5, 0, duration)) 211 211 + }, [onSeek, videoRef]) 212 212 + 213 213 + const seekRight = useCallback(() => { 214 214 + if (!videoRef.current) return 215 215 + // eslint-disable-next-line @typescript-eslint/no-shadow 216 216 + const currentTime = videoRef.current.currentTime 217 217 + // eslint-disable-next-line @typescript-eslint/no-shadow 218 218 + const duration = videoRef.current.duration || 0 219 219 + onSeek(clamp(currentTime + 5, 0, duration)) 220 220 + }, [onSeek, videoRef]) 221 221 + 176 222 const showControls = 177 223 (focused && !playing) || (interactingViaKeypress ? hasFocus : hovered) 178 224 ··· 197 243 <Pressable 198 244 accessibilityRole="button" 199 245 accessibilityHint={_( 200 200 - focused 246 246 + !focused 201 247 ? msg`Unmute video` 202 248 : playing 203 249 ? msg`Pause video` ··· 210 256 style={[ 211 257 a.flex_shrink_0, 212 258 a.w_full, 213 213 - a.px_sm, 214 214 - a.pt_sm, 215 215 - a.pb_md, 216 216 - a.gap_md, 217 217 - a.flex_row, 218 218 - a.align_center, 259 259 + a.px_xs, 219 260 web({ 220 261 background: 221 262 'linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.7))', 222 263 }), 223 223 - showControls ? {opacity: 1} : {opacity: 0}, 264 264 + {opacity: showControls ? 1 : 0}, 265 265 + {transition: 'opacity 0.2s ease-in-out'}, 224 266 ]}> 225 225 - <Button 226 226 - label={_(playing ? msg`Pause` : msg`Play`)} 227 227 - onPress={onPressPlayPause} 228 228 - {...btnProps}> 229 229 - {playing ? ( 230 230 - <PauseIcon fill={t.palette.white} width={20} /> 231 231 - ) : ( 232 232 - <PlayIcon fill={t.palette.white} width={20} /> 233 233 - )} 234 234 - </Button> 235 235 - <View style={a.flex_1} /> 236 236 - <Text style={{color: t.palette.white}}> 237 237 - {formatTime(currentTime)} / {formatTime(duration)} 238 238 - </Text> 239 239 - {hasSubtitleTrack && ( 240 240 - <Button 241 241 - label={_( 242 242 - subtitlesEnabled ? msg`Disable subtitles` : msg`Enable subtitles`, 243 243 - )} 244 244 - onPress={onPressSubtitles} 245 245 - {...btnProps}> 246 246 - {subtitlesEnabled ? ( 247 247 - <CCActiveIcon fill={t.palette.white} width={20} /> 248 248 - ) : ( 249 249 - <CCInactiveIcon fill={t.palette.white} width={20} /> 250 250 - )} 251 251 - </Button> 252 252 - )} 253 253 - <Button 254 254 - label={_(muted ? msg`Unmute` : msg`Mute`)} 255 255 - onPress={onPressMute} 256 256 - {...btnProps}> 257 257 - {muted ? ( 258 258 - <MuteIcon fill={t.palette.white} width={20} /> 259 259 - ) : ( 260 260 - <UnmuteIcon fill={t.palette.white} width={20} /> 261 261 - )} 262 262 - </Button> 263 263 - {!isIPhoneWeb && ( 264 264 - <Button 265 265 - label={_(muted ? msg`Unmute` : msg`Mute`)} 266 266 - onPress={onPressFullscreen} 267 267 - {...btnProps}> 268 268 - {isFullscreen ? ( 269 269 - <ArrowsInIcon fill={t.palette.white} width={20} /> 270 270 - ) : ( 271 271 - <ArrowsOutIcon fill={t.palette.white} width={20} /> 272 272 - )} 273 273 - </Button> 274 274 - )} 275 275 - </View> 276 276 - {(showControls || !focused) && ( 277 277 - <Animated.View 278 278 - entering={FadeIn.duration(200)} 279 279 - exiting={FadeOut.duration(200)} 267 267 + <Scrubber 268 268 + duration={duration} 269 269 + currentTime={currentTime} 270 270 + onSeek={onSeek} 271 271 + onSeekStart={onSeekStart} 272 272 + onSeekEnd={onSeekEnd} 273 273 + seekLeft={seekLeft} 274 274 + seekRight={seekRight} 275 275 + togglePlayPause={togglePlayPause} 276 276 + drawFocus={drawFocus} 277 277 + /> 278 278 + <View 280 279 style={[ 281 281 - a.absolute, 282 282 - { 283 283 - height: 5, 284 284 - bottom: 0, 285 285 - left: 0, 286 286 - right: 0, 287 287 - backgroundColor: 'rgba(255,255,255,0.4)', 288 288 - }, 280 280 + a.flex_1, 281 281 + a.px_xs, 282 282 + a.pt_sm, 283 283 + a.pb_md, 284 284 + a.gap_md, 285 285 + a.flex_row, 286 286 + a.align_center, 289 287 ]}> 290 290 - {duration > 0 && ( 291 291 - <View 292 292 - style={[ 293 293 - a.h_full, 294 294 - a.mr_auto, 295 295 - { 296 296 - backgroundColor: t.palette.white, 297 297 - width: `${(currentTime / duration) * 100}%`, 298 298 - opacity: 0.8, 299 299 - }, 300 300 - ]} 288 288 + <ControlButton 289 289 + active={playing} 290 290 + activeLabel={_(msg`Pause`)} 291 291 + inactiveLabel={_(msg`Play`)} 292 292 + activeIcon={PauseIcon} 293 293 + inactiveIcon={PlayIcon} 294 294 + onPress={onPressPlayPause} 295 295 + /> 296 296 + <View style={a.flex_1} /> 297 297 + <Text style={{color: t.palette.white}}> 298 298 + {formatTime(currentTime)} / {formatTime(duration)} 299 299 + </Text> 300 300 + {hasSubtitleTrack && ( 301 301 + <ControlButton 302 302 + active={subtitlesEnabled} 303 303 + activeLabel={_(msg`Disable subtitles`)} 304 304 + inactiveLabel={_(msg`Enable subtitles`)} 305 305 + activeIcon={CCActiveIcon} 306 306 + inactiveIcon={CCInactiveIcon} 307 307 + onPress={onPressSubtitles} 308 308 + /> 309 309 + )} 310 310 + <ControlButton 311 311 + active={muted} 312 312 + activeLabel={_(msg`Unmute`)} 313 313 + inactiveLabel={_(msg`Mute`)} 314 314 + activeIcon={MuteIcon} 315 315 + inactiveIcon={UnmuteIcon} 316 316 + onPress={onPressMute} 317 317 + /> 318 318 + {!isIPhoneWeb && ( 319 319 + <ControlButton 320 320 + active={isFullscreen} 321 321 + activeLabel={_(msg`Exit fullscreen`)} 322 322 + inactiveLabel={_(msg`Fullscreen`)} 323 323 + activeIcon={ArrowsInIcon} 324 324 + inactiveIcon={ArrowsOutIcon} 325 325 + onPress={onPressFullscreen} 301 326 /> 302 327 )} 303 303 - </Animated.View> 304 304 - )} 328 328 + </View> 329 329 + </View> 305 330 {(buffering || error) && ( 306 306 - <Animated.View 331 331 + <View 307 332 pointerEvents="none" 308 308 - entering={FadeIn.delay(1000).duration(200)} 309 309 - exiting={FadeOut.duration(200)} 310 333 style={[a.absolute, a.inset_0, a.justify_center, a.align_center]}> 311 334 {buffering && <Loader fill={t.palette.white} size="lg" />} 312 335 {error && ( ··· 314 337 <Trans>An error occurred</Trans> 315 338 </Text> 316 339 )} 317 317 - </Animated.View> 340 340 + </View> 318 341 )} 319 342 </div> 320 343 ) 321 344 } 322 345 323 323 - const btnProps = { 324 324 - variant: 'ghost', 325 325 - shape: 'round', 326 326 - size: 'medium', 327 327 - style: a.p_2xs, 328 328 - hoverStyle: {backgroundColor: 'rgba(255, 255, 255, 0.1)'}, 329 329 - } as const 346 346 + function ControlButton({ 347 347 + active, 348 348 + activeLabel, 349 349 + inactiveLabel, 350 350 + activeIcon: ActiveIcon, 351 351 + inactiveIcon: InactiveIcon, 352 352 + onPress, 353 353 + }: { 354 354 + active: boolean 355 355 + activeLabel: string 356 356 + inactiveLabel: string 357 357 + activeIcon: React.ComponentType<Pick<SvgProps, 'fill' | 'width'>> 358 358 + inactiveIcon: React.ComponentType<Pick<SvgProps, 'fill' | 'width'>> 359 359 + onPress: () => void 360 360 + }) { 361 361 + const t = useTheme() 362 362 + return ( 363 363 + <Button 364 364 + label={active ? activeLabel : inactiveLabel} 365 365 + onPress={onPress} 366 366 + variant="ghost" 367 367 + shape="round" 368 368 + size="medium" 369 369 + style={a.p_2xs} 370 370 + hoverStyle={{backgroundColor: 'rgba(255, 255, 255, 0.1)'}}> 371 371 + {active ? ( 372 372 + <ActiveIcon fill={t.palette.white} width={20} /> 373 373 + ) : ( 374 374 + <InactiveIcon fill={t.palette.white} width={20} /> 375 375 + )} 376 376 + </Button> 377 377 + ) 378 378 + } 379 379 + 380 380 + function Scrubber({ 381 381 + duration, 382 382 + currentTime, 383 383 + onSeek, 384 384 + onSeekEnd, 385 385 + onSeekStart, 386 386 + seekLeft, 387 387 + seekRight, 388 388 + togglePlayPause, 389 389 + drawFocus, 390 390 + }: { 391 391 + duration: number 392 392 + currentTime: number 393 393 + onSeek: (time: number) => void 394 394 + onSeekEnd: () => void 395 395 + onSeekStart: () => void 396 396 + seekLeft: () => void 397 397 + seekRight: () => void 398 398 + togglePlayPause: () => void 399 399 + drawFocus: () => void 400 400 + }) { 401 401 + const {_} = useLingui() 402 402 + const t = useTheme() 403 403 + const [scrubberActive, setScrubberActive] = useState(false) 404 404 + const { 405 405 + state: hovered, 406 406 + onIn: onMouseEnter, 407 407 + onOut: onMouseLeave, 408 408 + } = useInteractionState() 409 409 + const {state: focused, onIn: onFocus, onOut: onBlur} = useInteractionState() 410 410 + const [seekPosition, setSeekPosition] = useState(0) 411 411 + const isSeekingRef = useRef(false) 412 412 + const barRef = useRef<HTMLDivElement>(null) 413 413 + const circleRef = useRef<HTMLDivElement>(null) 414 414 + 415 415 + const seek = useCallback( 416 416 + (evt: React.PointerEvent<HTMLDivElement>) => { 417 417 + if (!barRef.current) return 418 418 + const {left, width} = barRef.current.getBoundingClientRect() 419 419 + const x = evt.clientX 420 420 + const percent = clamp((x - left) / width, 0, 1) * duration 421 421 + onSeek(percent) 422 422 + setSeekPosition(percent) 423 423 + }, 424 424 + [duration, onSeek], 425 425 + ) 426 426 + 427 427 + const onPointerDown = useCallback( 428 428 + (evt: React.PointerEvent<HTMLDivElement>) => { 429 429 + const target = evt.target 430 430 + if (target instanceof Element) { 431 431 + evt.preventDefault() 432 432 + target.setPointerCapture(evt.pointerId) 433 433 + isSeekingRef.current = true 434 434 + seek(evt) 435 435 + setScrubberActive(true) 436 436 + onSeekStart() 437 437 + } 438 438 + }, 439 439 + [seek, onSeekStart], 440 440 + ) 441 441 + 442 442 + const onPointerMove = useCallback( 443 443 + (evt: React.PointerEvent<HTMLDivElement>) => { 444 444 + if (isSeekingRef.current) { 445 445 + evt.preventDefault() 446 446 + seek(evt) 447 447 + } 448 448 + }, 449 449 + [seek], 450 450 + ) 451 451 + 452 452 + const onPointerUp = useCallback( 453 453 + (evt: React.PointerEvent<HTMLDivElement>) => { 454 454 + const target = evt.target 455 455 + if (isSeekingRef.current && target instanceof Element) { 456 456 + evt.preventDefault() 457 457 + target.releasePointerCapture(evt.pointerId) 458 458 + isSeekingRef.current = false 459 459 + onSeekEnd() 460 460 + setScrubberActive(false) 461 461 + } 462 462 + }, 463 463 + [onSeekEnd], 464 464 + ) 465 465 + 466 466 + useEffect(() => { 467 467 + // HACK: there's divergent browser behaviour about what to do when 468 468 + // a pointerUp event is fired outside the element that captured the 469 469 + // pointer. Firefox clicks on the element the mouse is over, so we have 470 470 + // to make everything unclickable while seeking -sfn 471 471 + if (isFirefox && scrubberActive) { 472 472 + document.body.classList.add('force-no-clicks') 473 473 + 474 474 + const abortController = new AbortController() 475 475 + const {signal} = abortController 476 476 + document.documentElement.addEventListener( 477 477 + 'mouseleave', 478 478 + () => { 479 479 + isSeekingRef.current = false 480 480 + onSeekEnd() 481 481 + setScrubberActive(false) 482 482 + }, 483 483 + {signal}, 484 484 + ) 485 485 + 486 486 + return () => { 487 487 + document.body.classList.remove('force-no-clicks') 488 488 + abortController.abort() 489 489 + } 490 490 + } 491 491 + }, [scrubberActive, onSeekEnd]) 492 492 + 493 493 + useEffect(() => { 494 494 + if (!circleRef.current) return 495 495 + if (focused) { 496 496 + const abortController = new AbortController() 497 497 + const {signal} = abortController 498 498 + circleRef.current.addEventListener( 499 499 + 'keydown', 500 500 + evt => { 501 501 + // space: play/pause 502 502 + // arrow left: seek backward 503 503 + // arrow right: seek forward 504 504 + 505 505 + if (evt.key === ' ') { 506 506 + evt.preventDefault() 507 507 + drawFocus() 508 508 + togglePlayPause() 509 509 + } else if (evt.key === 'ArrowLeft') { 510 510 + evt.preventDefault() 511 511 + drawFocus() 512 512 + seekLeft() 513 513 + } else if (evt.key === 'ArrowRight') { 514 514 + evt.preventDefault() 515 515 + drawFocus() 516 516 + seekRight() 517 517 + } 518 518 + }, 519 519 + {signal}, 520 520 + ) 521 521 + 522 522 + return () => abortController.abort() 523 523 + } 524 524 + }, [focused, seekLeft, seekRight, togglePlayPause, drawFocus]) 525 525 + 526 526 + const progress = scrubberActive ? seekPosition : currentTime 527 527 + const progressPercent = (progress / duration) * 100 528 528 + 529 529 + return ( 530 530 + <View 531 531 + testID="scrubber" 532 532 + style={[{height: 10, width: '100%'}, a.flex_shrink_0, a.px_xs]} 533 533 + // @ts-expect-error web only -sfn 534 534 + onMouseEnter={onMouseEnter} 535 535 + onMouseLeave={onMouseLeave}> 536 536 + <div 537 537 + ref={barRef} 538 538 + style={{ 539 539 + flex: 1, 540 540 + display: 'flex', 541 541 + alignItems: 'center', 542 542 + position: 'relative', 543 543 + cursor: scrubberActive ? 'grabbing' : 'grab', 544 544 + }} 545 545 + onPointerDown={onPointerDown} 546 546 + onPointerMove={onPointerMove} 547 547 + onPointerUp={onPointerUp}> 548 548 + <View 549 549 + style={[ 550 550 + a.w_full, 551 551 + a.rounded_full, 552 552 + a.overflow_hidden, 553 553 + {backgroundColor: 'rgba(255, 255, 255, 0.4)'}, 554 554 + {height: hovered || scrubberActive ? 6 : 3}, 555 555 + ]}> 556 556 + {currentTime && duration && ( 557 557 + <View 558 558 + style={[ 559 559 + a.h_full, 560 560 + {backgroundColor: t.palette.white}, 561 561 + {width: `${progressPercent}%`}, 562 562 + ]} 563 563 + /> 564 564 + )} 565 565 + </View> 566 566 + <div 567 567 + ref={circleRef} 568 568 + aria-label={_(msg`Seek slider`)} 569 569 + role="slider" 570 570 + aria-valuemax={duration} 571 571 + aria-valuemin={0} 572 572 + aria-valuenow={currentTime} 573 573 + aria-valuetext={_( 574 574 + msg`${formatTime(currentTime)} of ${formatTime(duration)}`, 575 575 + )} 576 576 + tabIndex={0} 577 577 + onFocus={onFocus} 578 578 + onBlur={onBlur} 579 579 + style={{ 580 580 + position: 'absolute', 581 581 + height: 16, 582 582 + width: 16, 583 583 + left: `calc(${progressPercent}% - 8px)`, 584 584 + borderRadius: 8, 585 585 + pointerEvents: 'none', 586 586 + }}> 587 587 + <View 588 588 + style={[ 589 589 + a.w_full, 590 590 + a.h_full, 591 591 + a.rounded_full, 592 592 + {backgroundColor: t.palette.white}, 593 593 + { 594 594 + transform: [ 595 595 + { 596 596 + scale: 597 597 + hovered || scrubberActive || focused 598 598 + ? scrubberActive 599 599 + ? 1 600 600 + : 0.6 601 601 + : 0, 602 602 + }, 603 603 + ], 604 604 + }, 605 605 + ]} 606 606 + /> 607 607 + </div> 608 608 + </div> 609 609 + </View> 610 610 + ) 611 611 + } 330 612 331 613 function formatTime(time: number) { 332 614 if (isNaN(time)) { ··· 421 703 setError(false) 422 704 } 423 705 424 424 - const handleSeeking = () => { 425 425 - setBuffering(true) 426 426 - } 427 427 - 428 428 - const handleSeeked = () => { 429 429 - setBuffering(false) 430 430 - } 431 431 - 432 706 const handleStalled = () => { 433 707 if (bufferingTimeout) clearTimeout(bufferingTimeout) 434 708 bufferingTimeout = setTimeout(() => { ··· 472 746 signal: abortController.signal, 473 747 }) 474 748 ref.current.addEventListener('playing', handlePlaying, { 475 475 - signal: abortController.signal, 476 476 - }) 477 477 - ref.current.addEventListener('seeking', handleSeeking, { 478 478 - signal: abortController.signal, 479 479 - }) 480 480 - ref.current.addEventListener('seeked', handleSeeked, { 481 749 signal: abortController.signal, 482 750 }) 483 751 ref.current.addEventListener('stalled', handleStalled, {

+5

web/index.html

··· 257 257 from { opacity: 1; } 258 258 to { opacity: 0; } 259 259 } 260 260 + 261 261 + .force-no-clicks > *, 262 262 + .force-no-clicks * { 263 263 + pointer-events: none !important; 264 264 + } 260 265 </style> 261 266 </head> 262 267