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

styling media controls

Browse Source
This commit is contained in:
balzack 2025-01-18 17:11:17 -08:00
parent 1dab533bdd
commit 63d51935f3
5 changed files with 15 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/client/mobile/src/conversation/Conversation.tsx
View File

@ -222,7 +222,7 @@ export function Conversation({close, openDetails, wide}: {close: ()=>void, openD
<Icon source="server" size={20} />
)}
{ state.detailSet && state.sealed && (
<Icon source="shield-outline" size={18} />
<Icon source="shield-outline" size={20} />
)}
</View>
<IconButton style={styles.icon} mode="contained" icon="cog-transfer-outline" size={28} onPress={openDetails} />

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

@ -19,7 +19,6 @@ export const styles = StyleSheet.create({
button: {
position: 'absolute',
borderRadius: 4,
backgroundColor: '#444444',
},
container: {
position: 'relative',

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

@ -1,6 +1,6 @@
import React, { useState, useEffect, useRef } from 'react';
import { SafeAreaView, Modal, Share, Pressable, View, Image, Animated, useAnimatedValue } from 'react-native'
import { Icon, Text, ProgressBar, IconButton } from 'react-native-paper'
import { Surface, Icon, Text, ProgressBar, IconButton } from 'react-native-paper'
import { useAudioAsset } from './useAudioAsset.hook';
import { MediaAsset } from '../../conversation/Conversation';
import { styles } from './AudioAsset.styled'
@ -81,9 +81,9 @@ export function AudioAsset({ topicId, asset, loaded, show }: { topicId: string,
source={thumb}
onLoad={loaded}
/>
<View style={styles.button}>
<Surface elevation={2} style={styles.button}>
<Icon size={28} source="play-box-outline" />
</View>
</Surface>
<Text style={styles.info} numberOfLines={1}>{ asset.audio?.label || asset.encrypted?.label }</Text>
</Animated.View>
</Pressable>
@ -101,10 +101,14 @@ export function AudioAsset({ topicId, asset, loaded, show }: { topicId: string,
controls={false} resizeMode="contain" />
)}
{ status === 'playing' && (
<IconButton style={styles.control} size={64} icon="pause" onPress={pause} />
<Surface elevation={2} style={styles.control}>
<IconButton size={64} icon="pause" onPress={pause} />
</Surface>
)}
{ status === 'paused' && (
<IconButton style={styles.control} size={64} icon="play" onPress={play} />
<Surface elevation={2} style={styles.control}>
<IconButton size={64} icon="play" onPress={play} />
</Surface>
)}
{ state.loading && (
<View style={styles.progress}>

1
app/client/mobile/src/message/binaryAsset/BinaryAsset.styled.ts
View File

@ -12,7 +12,6 @@ export const styles = StyleSheet.create({
button: {
position: 'absolute',
borderRadius: 4,
backgroundColor: '#444444',
},
control: {
backgroundColor: 'transparent',

10
app/client/mobile/src/message/binaryAsset/BinaryAsset.tsx
View File

@ -1,6 +1,6 @@
import React, { useState, useEffect, useRef } from 'react';
import { SafeAreaView, Modal, Share, Pressable, View, Image, Animated, useAnimatedValue } from 'react-native'
import { Text, Icon, ProgressBar, IconButton } from 'react-native-paper'
import { Text, Surface, Icon, ProgressBar, IconButton } from 'react-native-paper'
import { useBinaryAsset } from './useBinaryAsset.hook';
import { MediaAsset } from '../../conversation/Conversation';
import { styles } from './BinaryAsset.styled'
@ -70,9 +70,9 @@ export function BinaryAsset({ topicId, asset, loaded, show }: { topicId: string,
source={thumb}
onLoad={loaded}
/>
<View style={styles.button}>
<Surface elevation={2} style={styles.button}>
<Icon size={28} source="download-outline" />
</View>
</Surface>
<Text style={styles.info} numberOfLines={1}>{ asset.binary?.label || asset.encrypted?.label }</Text>
</Animated.View>
</Pressable>
@ -86,9 +86,9 @@ export function BinaryAsset({ topicId, asset, loaded, show }: { topicId: string,
source={thumb}
/>
{ state.dataUrl && (
<View style={styles.button}>
<Surface elevation={2} style={styles.button}>
<IconButton style={styles.control} size={64} icon="download-outline" loading={downloading} onPress={download} />
</View>
</Surface>
)}
</View>
{ state.loading && (