[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 {
AppBskyActorDefs,
@ -137,7 +137,6 @@ let FeedItemInner = ({
const {openComposer} = useComposerControls()
const pal = usePalette('default')
const {_} = useLingui()
const gate = useGate()
const href = useMemo(() => {
const urip = new AtUri(post.uri)
@ -356,9 +355,7 @@ let FeedItemInner = ({
postAuthor={post.author}
onOpenEmbed={onOpenEmbed}
/>
{gate('video_debug') && (
<VideoEmbed source="https://lumi.jazco.dev/watch/did:plc:q6gjnaw2blty4crticxkmujt/Qmc8w93UpTa2adJHg4ZhnDPrBs1EsbzrekzPcqF5SwusuZ/playlist.m3u8" />
)}
<VideoDebug />
<PostCtrls
post={post}
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({
outer: {
paddingLeft: 10,

View File

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

View File

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