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 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} /> <Icon source="server" size={20} />
)} )}
{ state.detailSet && state.sealed && ( { state.detailSet && state.sealed && (
<Icon source="shield-outline" size={18} /> <Icon source="shield-outline" size={20} />
)} )}
</View> </View>
<IconButton style={styles.icon} mode="contained" icon="cog-transfer-outline" size={28} onPress={openDetails} /> <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: { button: {
position: 'absolute', position: 'absolute',
borderRadius: 4, borderRadius: 4,
backgroundColor: '#444444',
}, },
container: { container: {
position: 'relative', 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 React, { useState, useEffect, useRef } from 'react';
import { SafeAreaView, Modal, Share, Pressable, View, Image, Animated, useAnimatedValue } from 'react-native' 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 { useAudioAsset } from './useAudioAsset.hook';
import { MediaAsset } from '../../conversation/Conversation'; import { MediaAsset } from '../../conversation/Conversation';
import { styles } from './AudioAsset.styled' import { styles } from './AudioAsset.styled'
@ -81,9 +81,9 @@ export function AudioAsset({ topicId, asset, loaded, show }: { topicId: string,
source={thumb} source={thumb}
onLoad={loaded} onLoad={loaded}
/> />
<View style={styles.button}> <Surface elevation={2} style={styles.button}>
<Icon size={28} source="play-box-outline" /> <Icon size={28} source="play-box-outline" />
</View> </Surface>
<Text style={styles.info} numberOfLines={1}>{ asset.audio?.label || asset.encrypted?.label }</Text> <Text style={styles.info} numberOfLines={1}>{ asset.audio?.label || asset.encrypted?.label }</Text>
</Animated.View> </Animated.View>
</Pressable> </Pressable>
@ -101,10 +101,14 @@ export function AudioAsset({ topicId, asset, loaded, show }: { topicId: string,
controls={false} resizeMode="contain" /> controls={false} resizeMode="contain" />
)} )}
{ status === 'playing' && ( { 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' && ( { 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 && ( { state.loading && (
<View style={styles.progress}> <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: { button: {
position: 'absolute', position: 'absolute',
borderRadius: 4, borderRadius: 4,
backgroundColor: '#444444',
}, },
control: { control: {
backgroundColor: 'transparent', 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 React, { useState, useEffect, useRef } from 'react';
import { SafeAreaView, Modal, Share, Pressable, View, Image, Animated, useAnimatedValue } from 'react-native' 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 { useBinaryAsset } from './useBinaryAsset.hook';
import { MediaAsset } from '../../conversation/Conversation'; import { MediaAsset } from '../../conversation/Conversation';
import { styles } from './BinaryAsset.styled' import { styles } from './BinaryAsset.styled'
@ -70,9 +70,9 @@ export function BinaryAsset({ topicId, asset, loaded, show }: { topicId: string,
source={thumb} source={thumb}
onLoad={loaded} onLoad={loaded}
/> />
<View style={styles.button}> <Surface elevation={2} style={styles.button}>
<Icon size={28} source="download-outline" /> <Icon size={28} source="download-outline" />
</View> </Surface>
<Text style={styles.info} numberOfLines={1}>{ asset.binary?.label || asset.encrypted?.label }</Text> <Text style={styles.info} numberOfLines={1}>{ asset.binary?.label || asset.encrypted?.label }</Text>
</Animated.View> </Animated.View>
</Pressable> </Pressable>
@ -86,9 +86,9 @@ export function BinaryAsset({ topicId, asset, loaded, show }: { topicId: string,
source={thumb} source={thumb}
/> />
{ state.dataUrl && ( { 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} /> <IconButton style={styles.control} size={64} icon="download-outline" loading={downloading} onPress={download} />
</View> </Surface>
)} )}
</View> </View>
{ state.loading && ( { state.loading && (