[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 {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,
|
||||||
|
|
|
@ -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}
|
||||||
|
|
|
@ -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()
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue