martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-05-04 23:45:21 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

rendering play icon

Browse Source
This commit is contained in:
balzack 2024-12-31 18:27:40 -08:00
parent 2cb9b5a180
commit 4eee3568ce
2 changed files with 22 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
app/client/mobile/src/message/videoAsset/VideoAsset.styled.ts
View File

@ -9,15 +9,10 @@ export const styles = StyleSheet.create({
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
}, },
container: {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
padding: 16,
backgroundColor: 'yellow',
},
button: { button: {
position: 'absolute', position: 'absolute',
borderRadius: 13,
backgroundColor: '#444444',
}, },
blur: { blur: {
position: 'absolute', position: 'absolute',
@ -27,9 +22,14 @@ export const styles = StyleSheet.create({
height: '100%', height: '100%',
}, },
video: { video: {
position: 'relative',
}, },
thumb: { thumb: {
borderRadius: 4, borderRadius: 4,
position: 'relative',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}, },
full: { full: {
position: 'absolute', position: 'absolute',

26
app/client/mobile/src/message/videoAsset/VideoAsset.tsx
View File

@ -33,17 +33,21 @@ export function VideoAsset({ topicId, asset }: { topicId: string, asset: MediaAs
} }
return ( return (
<View style={styles.image}> <View style={styles.video}>
{ state.thumbUrl && ( { state.thumbUrl && (
<Pressable onPress={showVideo}> <Pressable style={styles.container} onPress={showVideo}>
<Animated.Image <Animated.View style={[styles.thumb,{opacity},]}>
style={[styles.thumb,{opacity},]} <Image
resizeMode="contain" resizeMode="contain"
height={92} height={92}
width={92 * state.ratio} width={92 * state.ratio}
source={{ uri: state.thumbUrl }} source={{ uri: state.thumbUrl }}
onLoad={actions.loaded} onLoad={actions.loaded}
/> />
<View style={styles.button}>
<Icon size={32} source="play-circle-outline" />
</View>
</Animated.View>
</Pressable> </Pressable>
)} )}
<Modal animationType="fade" transparent={true} supportedOrientations={['portrait', 'landscape']} visible={modal} onRequestClose={hideVideo}> <Modal animationType="fade" transparent={true} supportedOrientations={['portrait', 'landscape']} visible={modal} onRequestClose={hideVideo}>
@ -56,7 +60,7 @@ export function VideoAsset({ topicId, asset }: { topicId: string, asset: MediaAs
/> />
{ state.dataUrl && ( { state.dataUrl && (
<Video source={{ uri: state.dataUrl }} style={styles.full} <Video source={{ uri: state.dataUrl }} style={styles.full}
controls={false} onLoad={(e)=>console.log("LOAD", e)} onError={(e)=>console.log("ERR", e)} resizeMode="contain" /> controls={false} resizeMode="contain" />
)} )}
{ state.loading && ( { state.loading && (
<View style={styles.progress}> <View style={styles.progress}>