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

replaced fail icon with message

Browse Source
This commit is contained in:
balzack 2025-01-06 20:14:50 -08:00
parent cedb7ff885
commit ed860e4643
10 changed files with 96 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -81,4 +81,11 @@ export const styles = StyleSheet.create({
bottom: '10%',
width: '50%',
},
alert: {
position: 'absolute',
bottom: 0,
},
alertLabel: {
color: Colors.offsync,
},
});

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

@ -15,7 +15,6 @@ export function AudioAsset({ topicId, asset, loaded, show }: { topicId: string,
const opacity = useAnimatedValue(0);
const videoRef = useRef<VideoRef>(null as null | VideoRef);
const [status, setStatus] = useState('loading');
const [alert, setAlert] = useState('');
useEffect(() => {
if (show) {
@ -45,10 +44,6 @@ export function AudioAsset({ topicId, asset, loaded, show }: { topicId: string,
videoRef.current.pause();
}
const error = () => {
setStatus('failed');
}
const end = () => {
videoRef.current.seek(0);
}
@ -61,16 +56,6 @@ export function AudioAsset({ topicId, asset, loaded, show }: { topicId: string,
}
}
const download = async () => {
try {
setAlert('');
await Share.share({ url: state.dataUrl });
} catch (err) {
console.log(err);
setAlert(state.strings.operationFailed)
}
}
return (
<View style={styles.audio}>
<Pressable onPress={showAudio}>
@ -99,12 +84,9 @@ export function AudioAsset({ topicId, asset, loaded, show }: { topicId: string,
/>
{ state.dataUrl && (
<Video source={{ uri: state.dataUrl }} style={styles.full} paused={false} ref={videoRef}
onPlaybackRateChange={playbackRateChange} onEnd={end} onError={error}
onPlaybackRateChange={playbackRateChange} onEnd={end} onError={actions.failed}
controls={false} resizeMode="contain" />
)}
{ status === 'failed' && (
<Icon color={Colors.offsync} size={64} source="fire" />
)}
{ status === 'playing' && (
<IconButton style={styles.control} size={64} icon="pause" onPress={pause} />
)}
@ -118,13 +100,15 @@ export function AudioAsset({ topicId, asset, loaded, show }: { topicId: string,
)}
<SafeAreaView style={styles.close}>
{ state.dataUrl && (
<IconButton style={styles.closeIcon} icon="download" compact="true" mode="contained" size={28} onPress={download} />
<IconButton style={styles.closeIcon} icon="download" compact="true" mode="contained" size={28} onPress={actions.download} />
)}
<Text style={styles.label} adjustsFontSizeToFit={true} numberOfLines={1}>{ asset.audio?.label || asset.encrypted?.label }</Text>
<IconButton style={styles.closeIcon} icon="close" compact="true" mode="contained" size={28} onPress={hideAudio} />
</SafeAreaView>
<SafeAreaView style={styles.alert}>
<Text style={styles.alertLabel}>{ alert }</Text>
{ state.failed && (
<Text style={styles.alertLabel}>{ state.strings.failedLoad }</Text>
)}
</SafeAreaView>
</View>
</Modal>

17
app/client/mobile/src/message/audioAsset/useAudioAsset.hook.ts
View File

@ -1,16 +1,20 @@
import { useState, useContext, useEffect, useRef } from 'react'
import { AppContext } from '../../context/AppContext'
import { DisplayContext } from '../../context/DisplayContext'
import { Focus } from 'databag-client-sdk'
import { ContextType } from '../../context/ContextType'
import { MediaAsset } from '../../conversation/Conversation';
export function useAudioAsset(topicId: string, asset: MediaAsset) {
const app = useContext(AppContext) as ContextType
const display = useContext(DisplayContext) as ContextType
const [state, setState] = useState({
strings: display.state.strings,
dataUrl: null,
loading: false,
loaded: false,
loadPercent: 0,
failed: false,
})
const cancelled = useRef(false);
@ -23,6 +27,18 @@ export function useAudioAsset(topicId: string, asset: MediaAsset) {
cancelLoad: () => {
cancelled.current = true;
},
failed: () => {
updateState({ failed: true });
},
download: async () => {
try {
updateState({ failed: false });
await Share.share({ url: state.dataUrl });
} catch (err) {
console.log(err);
updateState({ faled: true });
}
},
loadAudio: async () => {
const { focus } = app.state;
const assetId = asset.audio ? asset.audio.full : asset.encrypted ? asset.encrypted.parts : null;
@ -34,6 +50,7 @@ export function useAudioAsset(topicId: string, asset: MediaAsset) {
updateState({ dataUrl });
} catch (err) {
console.log(err);
updateState({ failed: true });
}
updateState({ loading: false });
}

11
app/client/mobile/src/message/binaryAsset/useBinaryAsset.hook.ts
View File

@ -14,6 +14,7 @@ export function useBinaryAsset(topicId: string, asset: MediaAsset) {
loading: false,
loaded: false,
loadPercent: 0,
failed: false,
})
const cancelled = useRef(false);
@ -26,6 +27,15 @@ export function useBinaryAsset(topicId: string, asset: MediaAsset) {
cancelLoad: () => {
cancelled.current = true;
},
download: async () => {
try {
updateState({ failed: false });
await Share.share({ url: state.dataUrl });
} catch (err) {
console.log(err);
updateState({ faled: true });
}
},
loadBinary: async () => {
const { focus } = app.state;
const assetId = asset.binary ? asset.binary.data : asset.encrypted ? asset.encrypted.parts : null;
@ -37,6 +47,7 @@ export function useBinaryAsset(topicId: string, asset: MediaAsset) {
updateState({ dataUrl });
} catch (err) {
console.log(err);
updateState({ failed: true });
}
updateState({ loading: false });
}

4
app/client/mobile/src/message/imageAsset/ImageAsset.styled.ts
View File

@ -47,6 +47,10 @@ export const styles = StyleSheet.create({
bottom: '10%',
width: '50%',
},
alert: {
position: 'absolute',
bottom: '10%'
},
alert: {
position: 'absolute',
bottom: 0,

19
app/client/mobile/src/message/imageAsset/ImageAsset.tsx
View File

@ -11,7 +11,6 @@ export function ImageAsset({ topicId, asset, loaded, show }: { topicId: string,
const { state, actions } = useImageAsset(topicId, asset);
const [modal, setModal] = useState(false);
const opacity = useAnimatedValue(0);
const [alert, setAlert] = useState('');
const [cleared, setCleared] = useState(false);
useEffect(() => {
@ -38,16 +37,6 @@ export function ImageAsset({ topicId, asset, loaded, show }: { topicId: string,
actions.cancelLoad();
}
const download = async () => {
try {
setAlert('');
await Share.share({ url: state.dataUrl });
} catch (err) {
console.log(err);
setAlert(state.strings.operationFailed)
}
}
return (
<View style={styles.image}>
{ state.thumbUrl && (
@ -79,7 +68,7 @@ export function ImageAsset({ topicId, asset, loaded, show }: { topicId: string,
width={state.width}
height={state.height}
resizeMode="contain"
onError={(err)=>console.log(err)}
onError={actions.failed}
source={{ uri: state.dataUrl }}
onLoad={()=>setCleared(true)}
/>
@ -92,13 +81,15 @@ export function ImageAsset({ topicId, asset, loaded, show }: { topicId: string,
)}
<SafeAreaView style={styles.close}>
{ state.dataUrl && (
<IconButton style={styles.closeIcon} icon="download" compact="true" mode="contained" size={28} onPress={download} />
<IconButton style={styles.closeIcon} icon="download" compact="true" mode="contained" size={28} onPress={actions.download} />
)}
<View style={styles.spacer} />
<IconButton style={styles.closeIcon} icon="close" compact="true" mode="contained" size={28} onPress={hideImage} />
</SafeAreaView>
<SafeAreaView style={styles.alert}>
<Text style={styles.alertLabel}>{ alert }</Text>
{ state.failed && (
<Text style={styles.alertLabel}>{ state.strings.failedLoad }</Text>
)}
</SafeAreaView>
</View>
</Modal>

17
app/client/mobile/src/message/imageAsset/useImageAsset.hook.ts
View File

@ -1,12 +1,15 @@
import { useState, useContext, useEffect, useRef } from 'react'
import { AppContext } from '../../context/AppContext'
import { DisplayContext } from '../../context/DisplayContext'
import { Focus } from 'databag-client-sdk'
import { ContextType } from '../../context/ContextType'
import { MediaAsset } from '../../conversation/Conversation';
export function useImageAsset(topicId: string, asset: MediaAsset) {
const app = useContext(AppContext) as ContextType
const display = useContext(DisplayContext) as ContextType
const [state, setState] = useState({
strings: display.state.strings,
thumbUrl: null,
dataUrl: null,
ratio: 1,
@ -15,6 +18,7 @@ export function useImageAsset(topicId: string, asset: MediaAsset) {
loadPercent: 0,
width: 0,
height: 0,
failed: false,
})
const cancelled = useRef(false);
@ -52,6 +56,18 @@ export function useImageAsset(topicId: string, asset: MediaAsset) {
cancelLoad: () => {
cancelled.current = true;
},
failed: () => {
updateState({ failed: true });
},
download: async () => {
try {
updateState({ failed: false });
await Share.share({ url: state.dataUrl });
} catch (err) {
console.log(err);
updateState({ faled: true });
}
},
loadImage: async () => {
const { focus } = app.state;
const assetId = asset.image ? asset.image.full : asset.encrypted ? asset.encrypted.parts : null;
@ -63,6 +79,7 @@ export function useImageAsset(topicId: string, asset: MediaAsset) {
updateState({ dataUrl });
} catch (err) {
console.log(err);
updateState({ failed: true });
}
updateState({ loading: false });
}

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

@ -70,4 +70,11 @@ export const styles = StyleSheet.create({
spacer: {
flexGrow: 1,
},
alert: {
position: 'absolute',
bottom: 0,
},
alertLabel: {
color: Colors.offsync,
},
});

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

@ -6,6 +6,7 @@ import { MediaAsset } from '../../conversation/Conversation';
import { styles } from './VideoAsset.styled'
import {BlurView} from '@react-native-community/blur';
import Video, { VideoRef } from 'react-native-video'
import { Colors } from '../../constants/Colors';
export function VideoAsset({ topicId, asset, loaded, show }: { topicId: string, asset: MediaAsset, loaded: ()=>void, show: boolean }) {
const { state, actions } = useVideoAsset(topicId, asset);
@ -15,7 +16,6 @@ export function VideoAsset({ topicId, asset, loaded, show }: { topicId: string,
const [status, setStatus] = useState('loading');
const [showControl, setShowControl] = useState(false);
const clear = useRef();
const [alert, setAlert] = useState('');
useEffect(() => {
if (state.loaded && show) {
@ -56,10 +56,6 @@ export function VideoAsset({ topicId, asset, loaded, show }: { topicId: string,
videoRef.current.pause();
}
const error = () => {
setStatus('failed');
}
const end = () => {
videoRef.current.seek(0);
}
@ -72,16 +68,6 @@ export function VideoAsset({ topicId, asset, loaded, show }: { topicId: string,
}
}
const download = async () => {
try {
setAlert('');
await Share.share({ url: state.dataUrl });
} catch (err) {
console.log(err);
setAlert(state.strings.operationFailed)
}
}
return (
<View style={styles.video}>
{ state.thumbUrl && (
@ -110,12 +96,9 @@ export function VideoAsset({ topicId, asset, loaded, show }: { topicId: string,
/>
{ state.dataUrl && (
<Video source={{ uri: state.dataUrl }} style={styles.full} ref={videoRef}
onPlaybackRateChange={playbackRateChange} onEnd={end} onError={error}
onPlaybackRateChange={playbackRateChange} onEnd={end} onError={actions.failed}
controls={false} resizeMode="contain" />
)}
{ status === 'failed' && (
<Icon color={Colors.offsync} size={64} source="fire" />
)}
{ status === 'playing' && showControl && (
<IconButton style={styles.control} size={64} icon="pause" onPress={pause} />
)}
@ -129,13 +112,15 @@ export function VideoAsset({ topicId, asset, loaded, show }: { topicId: string,
)}
<SafeAreaView style={styles.close}>
{ state.dataUrl && (
<IconButton style={styles.closeIcon} icon="download" compact="true" mode="contained" size={28} onPress={download} />
<IconButton style={styles.closeIcon} icon="download" compact="true" mode="contained" size={28} onPress={actions.download} />
)}
<View style={styles.spacer} />
<IconButton style={styles.closeIcon} icon="close" compact="true" mode="contained" size={28} onPress={hideVideo} />
</SafeAreaView>
<SafeAreaView style={styles.alert}>
<Text style={styles.alertLabel}>{ alert }</Text>
{ state.failed && (
<Text style={styles.alertLabel}>{ state.strings.failedLoad }</Text>
)}
</SafeAreaView>
</Pressable>
</Modal>

17
app/client/mobile/src/message/videoAsset/useVideoAsset.hook.ts
View File

@ -1,18 +1,22 @@
import { useState, useContext, useEffect, useRef } from 'react'
import { AppContext } from '../../context/AppContext'
import { DisplayContext } from '../../context/DisplayContext';
import { Focus } from 'databag-client-sdk'
import { ContextType } from '../../context/ContextType'
import { MediaAsset } from '../../conversation/Conversation';
export function useVideoAsset(topicId: string, asset: MediaAsset) {
const app = useContext(AppContext) as ContextType
const display = useContext(DisplayContext) as ContextType
const [state, setState] = useState({
strings: display.state.strings,
thumbUrl: null,
dataUrl: null,
ratio: 1,
loading: false,
loaded: false,
loadPercent: 0,
failed: false,
})
const cancelled = useRef(false);
@ -46,6 +50,18 @@ export function useVideoAsset(topicId: string, asset: MediaAsset) {
cancelLoad: () => {
cancelled.current = true;
},
failed: () => {
updateState({ failed: true });
},
download: async () => {
try {
updateState({ failed: false });
await Share.share({ url: state.dataUrl });
} catch (err) {
console.log(err);
updateState({ faled: true });
}
},
loadVideo: async () => {
const { focus } = app.state;
const assetId = asset.video ? asset.video.hd || asset.video.lq : asset.encrypted ? asset.encrypted.parts : null;
@ -57,6 +73,7 @@ export function useVideoAsset(topicId: string, asset: MediaAsset) {
updateState({ dataUrl });
} catch (err) {
console.log(err);
updateState({ failed: true });
}
updateState({ loading: false });
}