Samuel Newman
00240b95b9
* add ffmpeg-kit-react-native * get select video button + compression working * up res to 1080p * add progress component * move logic out of compressVideo * (WIP) add lonestar compression * rework web compression a bit * mess around with adding a thumbnail * 3mbps * replace * use 3mbps * add expo-video * remove unnecessary try/catch * rm ToastAndroid * fix web * wrap lazy component in suspense * gate video select button * rm web compression * flip sign * remove expo-video from web * review nits * add video picker permissions + rm temp buttons * add ffmpeg-kit-react-native * replace * hls-capable player * start trying to hoist up video player instance * hoist video player and move things around * always show native controls * fix controls on expo video android * gate temp video player in feed * rm IS_DEV, doesn't do what I thought it did * use __DEV__ instead --------- Co-authored-by: Samuel Newman <10959775+mozzius@users.noreply.github.com> Co-authored-by: Hailey <me@haileyok.com>
45 lines
1.2 KiB
TypeScript
45 lines
1.2 KiB
TypeScript
import React, {useCallback} from 'react'
|
|
import {View} from 'react-native'
|
|
import {msg} from '@lingui/macro'
|
|
import {useLingui} from '@lingui/react'
|
|
|
|
import {atoms as a, useTheme} from '#/alf'
|
|
import {Button, ButtonIcon} from '#/components/Button'
|
|
import {Play_Filled_Corner2_Rounded as PlayIcon} from '#/components/icons/Play'
|
|
import {useActiveVideoView} from './ActiveVideoContext'
|
|
import {VideoEmbedInner} from './VideoEmbedInner'
|
|
|
|
export function VideoEmbed({source}: {source: string}) {
|
|
const t = useTheme()
|
|
const {active, setActive} = useActiveVideoView()
|
|
const {_} = useLingui()
|
|
|
|
const onPress = useCallback(() => setActive(source), [setActive, source])
|
|
|
|
return (
|
|
<View
|
|
style={[
|
|
a.w_full,
|
|
a.rounded_sm,
|
|
{aspectRatio: 16 / 9},
|
|
a.overflow_hidden,
|
|
t.atoms.bg_contrast_25,
|
|
a.my_xs,
|
|
]}>
|
|
{active ? (
|
|
<VideoEmbedInner source={source} />
|
|
) : (
|
|
<Button
|
|
style={[a.flex_1, t.atoms.bg_contrast_25]}
|
|
onPress={onPress}
|
|
label={_(msg`Play video`)}
|
|
variant="ghost"
|
|
color="secondary"
|
|
size="large">
|
|
<ButtonIcon icon={PlayIcon} />
|
|
</Button>
|
|
)}
|
|
</View>
|
|
)
|
|
}
|