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

styling media play button

Browse Source
This commit is contained in:
balzack 2025-01-19 08:29:43 -08:00
parent 97f359f2da
commit a006718174
4 changed files with 13 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/client/mobile/src/message/audioAsset/AudioAsset.styled.ts
View File

@ -14,7 +14,11 @@ export const styles = StyleSheet.create({
}, },
control: { control: {
position: 'absolute', position: 'absolute',
borderRadius: 8,
},
iconButton: {
backgroundColor: 'transparent', backgroundColor: 'transparent',
borderRadius: 8,
}, },
button: { button: {
position: 'absolute', position: 'absolute',

4
app/client/mobile/src/message/audioAsset/AudioAsset.tsx
View File

@ -105,12 +105,12 @@ export function AudioAsset({ topicId, asset, loaded, show }: { topicId: string,
)} )}
{ status === 'playing' && ( { status === 'playing' && (
<Surface elevation={2} style={styles.control}> <Surface elevation={2} style={styles.control}>
<IconButton size={64} icon="pause" onPress={pause} /> <IconButton style={styles.iconButton} size={64} icon="pause" onPress={pause} />
</Surface> </Surface>
)} )}
{ status === 'paused' && ( { status === 'paused' && (
<Surface elevation={2} style={styles.control}> <Surface elevation={2} style={styles.control}>
<IconButton size={64} icon="play" onPress={play} /> <IconButton style={styles.iconButton} size={64} icon="play" onPress={play} />
</Surface> </Surface>
)} )}
{ state.loading && ( { state.loading && (

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

@ -14,8 +14,12 @@ export const styles = StyleSheet.create({
}, },
control: { control: {
position: 'absolute', position: 'absolute',
opacity: 0.6,
borderRadius: 8,
},
iconButton: {
backgroundColor: 'transparent', backgroundColor: 'transparent',
opacity: 0.6 borderRadius: 8,
}, },
button: { button: {
position: 'absolute', position: 'absolute',

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

@ -117,12 +117,12 @@ export function VideoAsset({ topicId, asset, loaded, show }: { topicId: string,
)} )}
{ status === 'playing' && showControl && ( { status === 'playing' && showControl && (
<Surface elevation={2} style={styles.control}> <Surface elevation={2} style={styles.control}>
<IconButton size={64} icon="pause" onPress={pause} /> <IconButton style={styles.iconButton} size={64} icon="pause" onPress={pause} />
</Surface> </Surface>
)} )}
{ status === 'paused' && showControl && ( { status === 'paused' && showControl && (
<Surface elevation={2} style={styles.control}> <Surface elevation={2} style={styles.control}>
<IconButton size={64} icon="play" onPress={play} /> <IconButton style={styles.iconButton} size={64} icon="play" onPress={play} />
</Surface> </Surface>
)} )}
{ state.loading && ( { state.loading && (