martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-02-12 03:29:16 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

adding image asset control

Browse Source
This commit is contained in:
Roland Osborne 2023-03-03 14:42:26 -08:00
parent 166ef7ef2c
commit 49f23be418
6 changed files with 38 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/mobile/src/context/useConversationContext.hook.js
View File

@ -7,7 +7,7 @@ import { ProfileContext } from 'context/ProfileContext';
import CryptoJS from 'crypto-js';
export function useConversationContext() {
const COUNT = 64;
const COUNT = 48;
const [state, setState] = useState({
loaded: false,

2
app/mobile/src/session/conversation/topicItem/audioAsset/AudioAsset.jsx
View File

@ -31,7 +31,7 @@ export function AudioAsset({ topicId, asset, dismiss }) {
<Icons name="window-close" size={32} color={Colors.text} />
</TouchableOpacity>
<Video ref={player} source={{ uri: state.url }} isLooping={true}
shouldPlay={state.playing} onLoad={actions.loaded} style={styles.player} />
paused={!state.playing} onLoad={actions.loaded} style={styles.player} />
</View>
);
}

5
app/mobile/src/session/conversation/topicItem/audioThumb/AudioThumb.styled.js
View File

@ -12,7 +12,10 @@ export const styles = StyleSheet.create({
maxHeight: 50,
},
label: {
textOverlay: 'center',
textAlign: 'center',
color: Colors.text,
padding: 4,
fontSize: 12,
},
})

16
app/mobile/src/session/conversation/topicItem/imageAsset/ImageAsset.jsx
View File

@ -2,14 +2,24 @@ import { View, Image, ActivityIndicator, TouchableOpacity } from 'react-native';
import { useImageAsset } from './useImageAsset.hook';
import { styles } from './ImageAsset.styled';
import Colors from 'constants/Colors';
import Ionicons from 'react-native-vector-icons/AntDesign';
export function ImageAsset({ topicId, asset, dismiss }) {
const { state, actions } = useImageAsset(topicId, asset);
return (
<TouchableOpacity style={styles.container} activeOpacity={1}>
<Image source={{ uri: state.url }} onLoad={actions.loaded} onError={actions.failed}
style={{ borderRadius: 4, width: state.imageWidth, height: state.imageHeight }} resizeMode={'cover'} />
<TouchableOpacity style={styles.container} activeOpacity={1} onPress={actions.showControls}>
{ state.url && (
<Image source={{ uri: state.url }} onLoad={actions.loaded} onError={actions.failed}
style={{ borderRadius: 4, width: state.imageWidth, height: state.imageHeight }} resizeMode={'cover'} />
)}
{ state.controls && (
<TouchableOpacity style={styles.close} onPress={dismiss}>
<Ionicons name={'close'} size={32} color={Colors.white} />
</TouchableOpacity>
)}
{ state.failed && (
<View style={styles.loading}>
<ActivityIndicator color={Colors.alert} size="large" />

9
app/mobile/src/session/conversation/topicItem/imageAsset/ImageAsset.styled.js
View File

@ -21,5 +21,14 @@ export const styles = StyleSheet.create({
borderWidth: 1,
borderColor: Colors.divider,
},
close: {
position: 'absolute',
top: 0,
right: 0,
borderRadius: 4,
backgroundColor: Colors.lightgrey,
padding: 8,
margin: 16,
},
})

10
app/mobile/src/session/conversation/topicItem/imageAsset/useImageAsset.hook.js
View File

@ -14,10 +14,12 @@ export function useImageAsset(topicId, asset) {
url: null,
loaded: false,
failed: false,
controls: false,
});
const conversation = useContext(ConversationContext);
const dimensions = useWindowDimensions();
const controls = useRef();
const updateState = (value) => {
setState((s) => ({ ...s, ...value }));
@ -39,6 +41,7 @@ export function useImageAsset(topicId, asset) {
updateState({ imageWidth: width, imageHeight: height });
}
}
actions.showControls();
}, [state.frameWidth, state.frameHeight, state.imageRatio, state.loaded]);
useEffect(() => {
@ -58,6 +61,13 @@ export function useImageAsset(topicId, asset) {
failed: () => {
updateState({ failed: true });
},
showControls: () => {
clearTimeout(controls.current);
updateState({ controls: true });
controls.current = setTimeout(() => {
updateState({ controls: false });
}, 2000);
},
};
return { state, actions };