From f5cc6ca9e7e7b996a34692a4fb1302381cf7f781 Mon Sep 17 00:00:00 2001 From: balzack Date: Tue, 31 Dec 2024 19:24:20 -0800 Subject: [PATCH] playing audio --- app/client/mobile/src/images/audio.png | Bin 0 -> 6775 bytes app/client/mobile/src/images/binary.png | Bin 0 -> 6933 bytes .../message/audioAsset/AudioAsset.styled.ts | 55 +++++++++++++++++ .../src/message/audioAsset/AudioAsset.tsx | 57 +++++++++++++++++- .../message/audioAsset/useAudioAsset.hook.ts | 17 +++--- 5 files changed, 119 insertions(+), 10 deletions(-) create mode 100644 app/client/mobile/src/images/audio.png create mode 100644 app/client/mobile/src/images/binary.png diff --git a/app/client/mobile/src/images/audio.png b/app/client/mobile/src/images/audio.png new file mode 100644 index 0000000000000000000000000000000000000000..23b4d7462ede13327b32bbc80f58198568b65f32 GIT binary patch literal 6775 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 literal 0 HcmV?d00001 diff --git a/app/client/mobile/src/message/audioAsset/AudioAsset.styled.ts b/app/client/mobile/src/message/audioAsset/AudioAsset.styled.ts index bb1b8272..059b0957 100644 --- a/app/client/mobile/src/message/audioAsset/AudioAsset.styled.ts +++ b/app/client/mobile/src/message/audioAsset/AudioAsset.styled.ts @@ -2,4 +2,59 @@ import {StyleSheet} from 'react-native'; import {Colors} from '../constants/Colors'; export const styles = StyleSheet.create({ + modal: { + width: '100%', + height: '100%', + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + }, + button: { + position: 'absolute', + borderRadius: 4, + backgroundColor: '#444444', + }, + container: { + position: 'relative', + width: 92, + height: 92, + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + }, + blur: { + position: 'absolute', + top: 0, + left: 0, + width: '100%', + height: '100%', + }, + audio: { + position: 'relative', + }, + thumb: { + borderRadius: 4, + width: 92, + height: 92, + }, + full: { + position: 'absolute', + top: 0, + left: 0, + width: '100%', + height: '100%', + }, + close: { + position: 'absolute', + top: 0, + right: 0, + }, + closeIcon: { + backgroundColor: 'transparent', + }, + progress: { + position: 'absolute', + bottom: '10%', + width: '50%', + }, }); diff --git a/app/client/mobile/src/message/audioAsset/AudioAsset.tsx b/app/client/mobile/src/message/audioAsset/AudioAsset.tsx index 4db9ee69..9a8ec05d 100644 --- a/app/client/mobile/src/message/audioAsset/AudioAsset.tsx +++ b/app/client/mobile/src/message/audioAsset/AudioAsset.tsx @@ -1,11 +1,62 @@ -import React, { useState, useEffect } from 'react'; -import { Text } from 'react-native-paper' +import React, { useState, useEffect, useRef } from 'react'; +import { SafeAreaView, Modal, Pressable, View, Image } from 'react-native' +import { Icon, ProgressBar, IconButton } from 'react-native-paper' import { useAudioAsset } from './useAudioAsset.hook'; import { MediaAsset } from '../../conversation/Conversation'; +import { styles } from './AudioAsset.styled' +import {BlurView} from '@react-native-community/blur'; +import Video from 'react-native-video' +import thumb from '../../images/audio.png'; export function AudioAsset({ topicId, asset }: { topicId: string, asset: MediaAsset }) { const { state, actions } = useAudioAsset(topicId, asset); + const [modal, setModal] = useState(false); - return (AUDIO); + const showAudio = () => { + setModal(true); + actions.loadAudio(); + }; + + const hideAudio = () => { + setModal(false); + actions.cancelLoad(); + } + + return ( + + + + + + + + + + + + { state.dataUrl && ( + + + + ); } diff --git a/app/client/mobile/src/message/audioAsset/useAudioAsset.hook.ts b/app/client/mobile/src/message/audioAsset/useAudioAsset.hook.ts index e227657c..7ee6128d 100644 --- a/app/client/mobile/src/message/audioAsset/useAudioAsset.hook.ts +++ b/app/client/mobile/src/message/audioAsset/useAudioAsset.hook.ts @@ -1,4 +1,4 @@ -import { useState, useContext, useEffect } from 'react' +import { useState, useContext, useEffect, useRef } from 'react' import { AppContext } from '../../context/AppContext' import { Focus } from 'databag-client-sdk' import { ContextType } from '../../context/ContextType' @@ -9,8 +9,10 @@ export function useAudioAsset(topicId: string, asset: MediaAsset) { const [state, setState] = useState({ dataUrl: null, loading: false, + loaded: false, loadPercent: 0, }) + const cancelled = useRef(false); // eslint-disable-next-line @typescript-eslint/no-explicit-any const updateState = (value: any) => { @@ -18,21 +20,22 @@ export function useAudioAsset(topicId: string, asset: MediaAsset) { } const actions = { - unloadAudio: () => { - updateState({ dataUrl: null }); + cancelLoad: () => { + cancelled.current = true; }, loadAudio: async () => { const { focus } = app.state; const assetId = asset.audio ? asset.audio.full : asset.encrypted ? asset.encrypted.parts : null; - if (focus && assetId != null && !state.loading) { + if (focus && assetId != null && !state.loading && !state.dataUrl) { + cancelled.current = false; updateState({ loading: true, loadPercent: 0 }); try { - const dataUrl = await focus.getTopicAssetUrl(topicId, assetId, (loadPercent: number)=>{ updateState({ loadPercent }) }); - updateState({ dataUrl, loading: false }); + const dataUrl = await focus.getTopicAssetUrl(topicId, assetId, (loadPercent: number)=>{ updateState({ loadPercent }); return !cancelled.current }); + updateState({ dataUrl }); } catch (err) { - updateState({ loading: false }); console.log(err); } + updateState({ loading: false }); } } }