acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

start working on controls

Browse Source
This commit is contained in:
Samuel Newman
2024-07-30 13:06:25 +02:00
parent f136bbb719
commit 92664f57d5
8 changed files with 265 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/icons/arrowsDiagonalIn_stroke2_corner2_rounded.svg
+1
View File
@@ -0,0 +1 @@
<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M20.957 3.043a1 1 0 0 1 0 1.414L16.414 9H20a1 1 0 1 1 0 2h-5a2 2 0 0 1-2-2V4a1 1 0 1 1 2 0v3.586l4.543-4.543a1 1 0 0 1 1.414 0ZM3 14a1 1 0 0 1 1-1h5a2 2 0 0 1 2 2v5a1 1 0 1 1-2 0v-3.586l-4.543 4.543a1 1 0 0 1-1.414-1.414L7.586 15H4a1 1 0 0 1-1-1Z" fill="#000"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 392 B

assets/icons/arrowsDiagonalOut_stroke2_corner2_rounded.svg
+1
View File
@@ -0,0 +1 @@
<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M13 4a1 1 0 0 1 1-1h5a2 2 0 0 1 2 2v5a1 1 0 1 1-2 0V6.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L17.586 5H14a1 1 0 0 1-1-1Zm-9 9a1 1 0 0 1 1 1v3.586l4.293-4.293a1 1 0 0 1 1.414 1.414L6.414 19H10a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2v-5a1 1 0 0 1 1-1Z" fill="#000"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 384 B

assets/icons/pause_filled_corner2_rounded.svg
+1
View File
@@ -0,0 +1 @@
<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 6a3 3 0 0 1 6 0v12a3 3 0 1 1-6 0V6ZM14 6a3 3 0 1 1 6 0v12a3 3 0 1 1-6 0V6Z" fill="#000"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 183 B

assets/icons/pause_stroke2_corner2_rounded.svg
+1
View File
@@ -0,0 +1 @@
<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M4 6a3 3 0 0 1 6 0v12a3 3 0 1 1-6 0V6Zm3-1a1 1 0 0 0-1 1v12a1 1 0 1 0 2 0V6a1 1 0 0 0-1-1Zm7 1a3 3 0 1 1 6 0v12a3 3 0 1 1-6 0V6Zm3-1a1 1 0 0 0-1 1v12a1 1 0 1 0 2 0V6a1 1 0 0 0-1-1Z" fill="#000"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 326 B

src/components/icons/ArrowsDiagonal.tsx
+9
View File
@@ -0,0 +1,9 @@
import {createSinglePathSVG} from './TEMPLATE'
export const ArrowsDiagonalOut_Stroke2_Corner2_Rounded = createSinglePathSVG({
path: 'M13 4a1 1 0 0 1 1-1h5a2 2 0 0 1 2 2v5a1 1 0 1 1-2 0V6.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L17.586 5H14a1 1 0 0 1-1-1Zm-9 9a1 1 0 0 1 1 1v3.586l4.293-4.293a1 1 0 0 1 1.414 1.414L6.414 19H10a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2v-5a1 1 0 0 1 1-1Z',
})
export const ArrowsDiagonalIn_Stroke2_Corner2_Rounded = createSinglePathSVG({
path: 'M20.957 3.043a1 1 0 0 1 0 1.414L16.414 9H20a1 1 0 1 1 0 2h-5a2 2 0 0 1-2-2V4a1 1 0 1 1 2 0v3.586l4.543-4.543a1 1 0 0 1 1.414 0ZM3 14a1 1 0 0 1 1-1h5a2 2 0 0 1 2 2v5a1 1 0 1 1-2 0v-3.586l-4.543 4.543a1 1 0 0 1-1.414-1.414L7.586 15H4a1 1 0 0 1-1-1Z',
})
src/components/icons/Pause.tsx
+9
View File
@@ -0,0 +1,9 @@
import {createSinglePathSVG} from './TEMPLATE'
export const Pause_Stroke2_Corner0_Rounded = createSinglePathSVG({
path: 'M4 6a3 3 0 0 1 6 0v12a3 3 0 1 1-6 0V6Zm3-1a1 1 0 0 0-1 1v12a1 1 0 1 0 2 0V6a1 1 0 0 0-1-1Zm7 1a3 3 0 1 1 6 0v12a3 3 0 1 1-6 0V6Zm3-1a1 1 0 0 0-1 1v12a1 1 0 1 0 2 0V6a1 1 0 0 0-1-1Z',
})
export const Pause_Filled_Corner0_Rounded = createSinglePathSVG({
path: 'M4 6a3 3 0 0 1 6 0v12a3 3 0 1 1-6 0V6ZM14 6a3 3 0 1 1 6 0v12a3 3 0 1 1-6 0V6Z',
})
src/view/com/util/post-embeds/VideoEmbed.web.tsx
+5 -1
View File
@@ -17,6 +17,7 @@ export function VideoEmbed({source}: {source: string}) {
source,
})
const [onScreen, setOnScreen] = useState(false)
const [hasBeenOnScreen, setHasBeenOnScreen] = useState(false)
const {_} = useLingui()
const onPress = useCallback(() => setActive(), [setActive])
@@ -28,6 +29,9 @@ export function VideoEmbed({source}: {source: string}) {
const entry = entries[0]
if (!entry) return
setOnScreen(entry.isIntersecting)
if (entry.isIntersecting) {
setHasBeenOnScreen(true)
}
sendPosition(
entry.boundingClientRect.y + entry.boundingClientRect.height / 2,
)
@@ -48,7 +52,7 @@ export function VideoEmbed({source}: {source: string}) {
a.my_xs,
]}>
<div ref={ref} style={{display: 'flex', flex: 1}}>
{onScreen || active ? (
{hasBeenOnScreen || active ? (
<VideoEmbedInner
source={source}
active={active}
src/view/com/util/post-embeds/VideoEmbedInner.web.tsx
+238 -45
View File
@@ -1,8 +1,18 @@
import React, {useEffect, useRef, useState} from 'react'
import {View} from 'react-native'
import Animated, {FadeIn, FadeOut} from 'react-native-reanimated'
import {msg} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import Hls from 'hls.js'
import {atoms as a} from '#/alf'
import {atoms as a, useTheme} from '#/alf'
import {Button, ButtonIcon} from '#/components/Button'
import {useInteractionState} from '#/components/hooks/useInteractionState'
import {ArrowsDiagonalOut_Stroke2_Corner2_Rounded as FullscreenIcon} from '#/components/icons/ArrowsDiagonal'
import {Mute_Stroke2_Corner0_Rounded as MuteIcon} from '#/components/icons/Mute'
import {Pause_Filled_Corner0_Rounded as PauseIcon} from '#/components/icons/Pause'
import {Play_Filled_Corner2_Rounded as PlayIcon} from '#/components/icons/Play'
import {SpeakerVolumeFull_Stroke2_Corner0_Rounded as UnmuteIcon} from '#/components/icons/Speaker'
export function VideoEmbedInner({
active,
@@ -79,8 +89,6 @@ export function VideoPlayer({
const ref = useRef<HTMLVideoElement>(null)
const [focused, setFocused] = useState(false)
const {play, pause, togglePlayPause} = useVideoUtils(ref)
useEffect(() => {
if (ref.current) {
if (ref.current.canPlayType('application/vnd.apple.mpegurl')) {
@@ -107,22 +115,6 @@ export function VideoPlayer({
}
}, [source, hls])
useEffect(() => {
if (active) {
play()
}
return () => {
pause()
setFocused(false)
}
}, [active, play, pause])
useEffect(() => {
if (!onScreen) {
pause()
}
}, [onScreen, pause])
return (
<View
style={[
@@ -140,10 +132,18 @@ export function VideoPlayer({
width: 20,
height: 20,
background: active ? 'red' : 'blue',
opacity: 0.5,
opacity: 0.8,
pointerEvents: 'none',
}}
/>
<Controls
videoRef={ref}
active={active}
setActive={setActive}
focused={focused}
setFocused={setFocused}
onScreen={onScreen}
/>
<video
src={source}
ref={ref}
@@ -152,51 +152,244 @@ export function VideoPlayer({
preload="none"
loop
muted={!focused}
autoPlay={active}
onClick={evt => {
evt.stopPropagation()
if (focused) {
togglePlayPause()
} else {
if (!active) {
setActive()
}
setFocused(true)
}
}}
/>
</View>
)
}
function Controls({
videoRef,
active,
setActive,
focused,
setFocused,
onScreen,
}: {
videoRef: React.RefObject<HTMLVideoElement>
active: boolean
setActive: () => void
focused: boolean
setFocused: (focused: boolean) => void
onScreen: boolean
}) {
const {play, pause, playing, muted, togglePlayPause, currentTime, duration} =
useVideoUtils(videoRef)
const t = useTheme()
const {_} = useLingui()
const {
state: hovered,
onIn: onMouseEnter,
onOut: onMouseLeave,
} = useInteractionState()
useEffect(() => {
if (active) {
play()
}
return () => {
pause()
setFocused(false)
}
}, [active, play, pause, setFocused])
useEffect(() => {
if (!onScreen) {
pause()
}
}, [onScreen, pause])
return (
<div
style={{
position: 'absolute',
inset: 0,
overflow: 'hidden',
}}
onClick={evt => {
evt.stopPropagation()
if (!focused) {
if (!active) {
setActive()
}
setFocused(true)
}
}}
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}>
{hovered && (
<View
style={[
a.w_full,
a.px_xs,
a.pt_md,
a.pb_lg,
a.absolute,
a.gap_xs,
a.flex_row,
{bottom: 0},
{backgroundColor: 'rgba(0, 0, 0, 0.5)'},
]}>
<Button
label={_(playing ? msg`Pause` : msg`Play`)}
onPress={() => togglePlayPause()}
variant="ghost"
shape="round"
size="medium">
<ButtonIcon icon={playing ? PauseIcon : PlayIcon} />
</Button>
<Button
label={_(muted ? msg`Unmute` : msg`Mute`)}
onPress={() => {
console.log('clicked mute btn')
}}
variant="ghost"
shape="round"
size="medium">
<ButtonIcon icon={muted ? MuteIcon : UnmuteIcon} />
</Button>
<View style={a.flex_1} />
{/* TODO: find workaround for iOS Safari */}
<Button
label={_(muted ? msg`Unmute` : msg`Mute`)}
onPress={() => {
console.log('clicked fullscreen btn')
}}
variant="ghost"
shape="round"
size="medium">
<ButtonIcon icon={FullscreenIcon} />
</Button>
</View>
)}
{(hovered || !focused) && (
<Animated.View
entering={FadeIn.duration(200)}
exiting={FadeOut.duration(200)}
style={[
a.absolute,
{
height: 5,
bottom: 0,
left: 0,
right: 0,
backgroundColor: 'rgba(255,255,255,0.4)',
},
]}>
{duration > 0 && (
<View
style={[
a.h_full,
a.mr_auto,
{
backgroundColor: t.palette.white,
width: `${(currentTime / duration) * 100}%`,
opacity: 0.8,
},
]}
/>
)}
</Animated.View>
)}
</div>
)
}
function useVideoUtils(ref: React.RefObject<HTMLVideoElement>) {
const play = () => {
const [playing, setPlaying] = useState(false)
const [muted, setMuted] = useState(true)
const [currentTime, setCurrentTime] = useState(0)
const [duration, setDuration] = useState(0)
const [canPlay, setCanPlay] = useState(false)
useEffect(() => {
if (!ref.current) return
let current = ref.current
const handleTimeUpdate = () => {
if (!current) return
setCurrentTime(current.currentTime || 0)
}
const handleDurationChange = () => {
if (!current) return
setDuration(current.duration || 0)
}
const handlePlay = () => {
setPlaying(true)
}
const handlePause = () => {
setPlaying(false)
}
const handleMute = () => {
setMuted(true)
}
const handleUnmute = () => {
setMuted(false)
}
const handleCanPlay = () => {
setCanPlay(true)
}
ref.current.addEventListener('timeupdate', handleTimeUpdate)
ref.current.addEventListener('durationchange', handleDurationChange)
ref.current.addEventListener('play', handlePlay)
ref.current.addEventListener('pause', handlePause)
ref.current.addEventListener('mute', handleMute)
ref.current.addEventListener('unmute', handleUnmute)
ref.current.addEventListener('ended', handlePause)
ref.current.addEventListener('error', handlePause)
ref.current.addEventListener('canplay', handleCanPlay)
return () => {
current.removeEventListener('timeupdate', handleTimeUpdate)
current.removeEventListener('durationchange', handleDurationChange)
current.removeEventListener('play', handlePlay)
current.removeEventListener('pause', handlePause)
current.removeEventListener('mute', handleMute)
current.removeEventListener('unmute', handleUnmute)
current.removeEventListener('ended', handlePause)
current.removeEventListener('error', handlePause)
current.removeEventListener('canplay', handleCanPlay)
}
}, [ref, playing])
// to explain why I'm doing this in an effect - if you call play()
// before it's loaded, at least on firefox, it'll throw when you then
// later go to pause/unload the video. Therefore we should keep
// play state outside of the video, and then only call it when
// playing === true and canPlay === true
useEffect(() => {
if (!ref.current) return
// this is how you check if the video is ready to play
if (ref.current.readyState >= HTMLMediaElement.HAVE_ENOUGH_DATA) {
ref.current.play()
if (playing) {
if (canPlay) {
ref.current.play()
}
} else {
// TODO: find different solution. can sometimes cause double-playing
ref.current.addEventListener('canplay', () => {
ref.current?.play()
})
ref.current.pause()
}
}, [playing, ref, canPlay])
const play = () => {
setPlaying(true)
}
const pause = () => {
if (!ref.current) return
ref.current.pause()
setPlaying(false)
}
const togglePlayPause = () => {
if (!ref.current) return
if (ref.current.paused) {
if (playing) {
play()
} else {
pause()
}
}
return {play, pause, togglePlayPause}
return {play, pause, togglePlayPause, duration, currentTime, playing, muted}
}