[Video] Bundle of minor tweaks (#4904)

* fix bg color

* unique video urls for debug

* improve controls slightly

* mute until fullscreen

---------

Co-authored-by: Samuel Newman <10959775+mozzius@users.noreply.github.com>
zio/stable
Samuel Newman 2024-08-09 02:33:42 +01:00 committed by GitHub
parent e782db33dc
commit 4350dbc853
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 45 additions and 31 deletions

View File

@ -1,4 +1,4 @@
import React, {memo, useMemo, useState} from 'react' import React, {memo, useId, useMemo, useState} from 'react'
import {StyleSheet, View} from 'react-native' import {StyleSheet, View} from 'react-native'
import { import {
AppBskyActorDefs, AppBskyActorDefs,
@ -137,7 +137,6 @@ let FeedItemInner = ({
const {openComposer} = useComposerControls() const {openComposer} = useComposerControls()
const pal = usePalette('default') const pal = usePalette('default')
const {_} = useLingui() const {_} = useLingui()
const gate = useGate()
const href = useMemo(() => { const href = useMemo(() => {
const urip = new AtUri(post.uri) const urip = new AtUri(post.uri)
@ -356,9 +355,7 @@ let FeedItemInner = ({
postAuthor={post.author} postAuthor={post.author}
onOpenEmbed={onOpenEmbed} onOpenEmbed={onOpenEmbed}
/> />
{gate('video_debug') && ( <VideoDebug />
<VideoEmbed source="https://lumi.jazco.dev/watch/did:plc:q6gjnaw2blty4crticxkmujt/Qmc8w93UpTa2adJHg4ZhnDPrBs1EsbzrekzPcqF5SwusuZ/playlist.m3u8" />
)}
<PostCtrls <PostCtrls
post={post} post={post}
record={record} record={record}
@ -501,6 +498,19 @@ function ReplyToLabel({
) )
} }
function VideoDebug() {
const gate = useGate()
const id = useId()
if (!gate('video_debug')) return null
return (
<VideoEmbed
source={`https://lumi.jazco.dev/watch/did:plc:q6gjnaw2blty4crticxkmujt/Qmc8w93UpTa2adJHg4ZhnDPrBs1EsbzrekzPcqF5SwusuZ/playlist.m3u8?ignore_me_just_testing_frontend_stuff=${id}`}
/>
)
}
const styles = StyleSheet.create({ const styles = StyleSheet.create({
outer: { outer: {
paddingLeft: 10, paddingLeft: 10,

View File

@ -1,5 +1,6 @@
import React, {useEffect, useRef, useState} from 'react' import React, {useEffect, useRef, useState} from 'react'
import {Pressable, View} from 'react-native' import {Pressable, View} from 'react-native'
import Animated, {FadeIn} from 'react-native-reanimated'
import {VideoPlayer, VideoView} from 'expo-video' import {VideoPlayer, VideoView} from 'expo-video'
import {useVideoPlayer} from 'view/com/util/post-embeds/VideoPlayerContext' import {useVideoPlayer} from 'view/com/util/post-embeds/VideoPlayerContext'
@ -20,7 +21,10 @@ export function VideoEmbedInnerNative() {
/> />
<Controls <Controls
player={player} player={player}
enterFullscreen={() => ref.current?.enterFullscreen()} enterFullscreen={() => {
player.muted = false
ref.current?.enterFullscreen()
}}
/> />
</View> </View>
) )
@ -56,34 +60,33 @@ function Controls({
} }
}, [player]) }, [player])
if (isNaN(timeRemaining)) {
return null
}
return ( return (
<View style={[a.absolute, a.inset_0]}> <View style={[a.absolute, a.inset_0]}>
<View {!isNaN(timeRemaining) && (
style={[ <Animated.View
{ entering={FadeIn.duration(100)}
backgroundColor: 'rgba(0, 0, 0, 0.75',
borderRadius: 6,
paddingHorizontal: 6,
paddingVertical: 3,
position: 'absolute',
left: 5,
bottom: 5,
},
]}
pointerEvents="none">
<Text
style={[ style={[
{color: 'white', fontSize: 12}, {
a.font_bold, backgroundColor: 'rgba(0, 0, 0, 0.75)',
android({lineHeight: 1.25}), borderRadius: 6,
]}> paddingHorizontal: 6,
{minutes}:{seconds} paddingVertical: 3,
</Text> position: 'absolute',
</View> left: 5,
bottom: 5,
},
]}
pointerEvents="none">
<Text
style={[
{color: 'white', fontSize: 12},
a.font_bold,
android({lineHeight: 1.25}),
]}>
{minutes}:{seconds}
</Text>
</Animated.View>
)}
<Pressable <Pressable
onPress={enterFullscreen} onPress={enterFullscreen}
style={a.flex_1} style={a.flex_1}

View File

@ -14,6 +14,7 @@ export function VideoPlayerProvider({
// eslint-disable-next-line @typescript-eslint/no-shadow // eslint-disable-next-line @typescript-eslint/no-shadow
const player = useExpoVideoPlayer(source, player => { const player = useExpoVideoPlayer(source, player => {
player.loop = true player.loop = true
player.muted = true
player.play() player.play()
}) })