[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
parent
e782db33dc
commit
4350dbc853
|
@ -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,
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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()
|
||||
})
|
||||
|
||||
|
|
Loading…
Reference in New Issue