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

improved asset rendering

Browse Source
This commit is contained in:
balzack 2022-10-18 22:38:01 -07:00
parent 92a967210d
commit 55957aeacb
11 changed files with 143 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/mobile/ios/Databag.xcodeproj/project.pbxproj
View File

@ -310,7 +310,7 @@
ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
ASSETCATALOG_COMPILER_INCLUDE_ALL_APPICON_ASSETS = YES;
CLANG_ENABLE_MODULES = YES;
CURRENT_PROJECT_VERSION = 7;
CURRENT_PROJECT_VERSION = 8;
DEVELOPMENT_TEAM = 3P65PQ7SUR;
ENABLE_BITCODE = NO;
GCC_PREPROCESSOR_DEFINITIONS = (
@ -348,7 +348,7 @@
ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
ASSETCATALOG_COMPILER_INCLUDE_ALL_APPICON_ASSETS = YES;
CLANG_ENABLE_MODULES = YES;
CURRENT_PROJECT_VERSION = 7;
CURRENT_PROJECT_VERSION = 8;
DEVELOPMENT_TEAM = 3P65PQ7SUR;
INFOPLIST_FILE = Databag/Info.plist;
INFOPLIST_KEY_CFBundleDisplayName = Databag;

3
app/mobile/src/session/conversation/topicItem/TopicItem.jsx
View File

@ -97,8 +97,7 @@ export function TopicItem({ item, focused, focus, hosting, remove, update, block
<VideoAsset topicId={item.topicId} asset={asset.item.video} dismiss={actions.hideCarousel} />
)}
{ asset.item.audio && (
<AudioAsset topicId={item.topicId} asset={asset.item.audio} active={state.activeId == asset.dataIndex}
setActive={() => actions.setActive(asset.dataIndex)} dismiss={actions.hideCarousel} />
<AudioAsset topicId={item.topicId} asset={asset.item.audio} dismiss={actions.hideCarousel} />
)}
</View>
)

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

@ -1,36 +1,38 @@
import { Text, Image, View, TouchableOpacity } from 'react-native';
import { Image, View, Text, TouchableOpacity } from 'react-native';
import { useRef } from 'react';
import Colors from 'constants/Colors';
import { Video, AVPlaybackStatus } from 'expo-av';
import { useAudioAsset } from './useAudioAsset.hook';
import GestureRecognizer from 'react-native-swipe-gestures';
import { styles } from './AudioAsset.styled';
import audio from 'images/audio.png';
import Icons from '@expo/vector-icons/MaterialCommunityIcons';
import audio from 'images/audio.png';
export function AudioAsset({ topicId, asset, active, setActive, dismiss }) {
export function AudioAsset({ topicId, asset, dismiss }) {
const { state, actions } = useAudioAsset(topicId, asset);
const play = () => {
actions.play();
setActive();
}
const player = useRef(null);
return (
<View style={styles.background}>
<Image source={audio} style={{ width: state.length, height: state.length }} resizeMode={'cover'} />
<View style={styles.container}>
<Image source={audio} style={{ width: state.width, height: state.height }} resizeMode={'contain'} />
<Text style={styles.label}>{ asset.label }</Text>
{ state.playing && active && (
<TouchableOpacity style={styles.control} onPress={actions.pause}>
<Icons name="stop-circle-outline" size={92} color={Colors.white} />
{ !state.playing && state.loaded && (
<TouchableOpacity style={styles.control} onPress={actions.play}>
<Icons name="play-circle-outline" size={92} color={Colors.text} />
</TouchableOpacity>
)}
{ (!state.playing || !active) && (
<TouchableOpacity style={styles.control} onPress={play}>
<Icons name="play-circle-outline" size={92} color={Colors.white} />
{ state.playing && state.loaded && (
<TouchableOpacity style={styles.control} onPress={actions.pause}>
<Icons name="pause-circle-outline" size={92} color={Colors.text} />
</TouchableOpacity>
)}
<TouchableOpacity style={styles.close} onPress={dismiss}>
<Icons name="close" size={24} color={Colors.white} />
<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} />
</View>
);
}

22
app/mobile/src/session/conversation/topicItem/audioAsset/AudioAsset.styled.js
View File

@ -2,13 +2,19 @@ import { StyleSheet } from 'react-native';
import { Colors } from 'constants/Colors';
export const styles = StyleSheet.create({
background: {
backgroundColor: Colors.lightgrey,
borderRadius: 4,
container: {
position: 'relative',
borderRadius: 8,
backgroundColor: Colors.formBackground,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
},
control: {
position: 'absolute',
paddingRight: 8,
paddingTop: 4,
},
label: {
position: 'absolute',
textAlign: 'center',
@ -18,13 +24,17 @@ export const styles = StyleSheet.create({
paddingLeft: 20,
paddingRight: 20,
},
control: {
position: 'absolute',
},
close: {
position: 'absolute',
top: 0,
right: 0,
paddingTop: 4,
paddingBottom: 4,
paddingLeft: 8,
paddingRight: 8,
},
player: {
display: 'none',
},
})

28
app/mobile/src/session/conversation/topicItem/audioAsset/useAudioAsset.hook.js
View File

@ -2,15 +2,18 @@ import { useState, useRef, useEffect, useContext } from 'react';
import { ConversationContext } from 'context/ConversationContext';
import { Image } from 'react-native';
import { useWindowDimensions } from 'react-native';
import SoundPlayer from 'react-native-sound-player'
export function useAudioAsset(topicId, asset) {
const [state, setState] = useState({
length: null,
width: 1,
height: 1,
url: null,
playing: false,
loaded: false,
});
const closing = useRef(null);
const conversation = useContext(ConversationContext);
const dimensions = useWindowDimensions();
@ -19,29 +22,36 @@ export function useAudioAsset(topicId, asset) {
}
useEffect(() => {
if (dimensions.width < dimensions.height) {
updateState({ length: 0.8 * dimensions.width });
const frameRatio = dimensions.width / dimensions.height;
if (frameRatio > 1) {
//height constrained
const height = 0.9 * dimensions.height;
const width = height;
updateState({ width, height });
}
else {
updateState({ length: 0.8 * dimensions.height });
//width constrained
const width = 0.9 * dimensions.width;
const height = width;
updateState({ width, height });
}
}, [dimensions]);
useEffect(() => {
const url = conversation.actions.getTopicAssetUrl(topicId, asset.full);
updateState({ url, playing: false });
return () => { SoundPlayer.stop() }
updateState({ url });
}, [topicId, conversation, asset]);
const actions = {
play: () => {
SoundPlayer.playUrl(state.url);
updateState({ playing: true });
},
pause: () => {
SoundPlayer.stop();
updateState({ playing: false });
},
loaded: () => {
updateState({ loaded: true });
}
};
return { state, actions };

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

@ -1,4 +1,4 @@
import { Image, TouchableOpacity } from 'react-native';
import { View, Image, ActivityIndicator, TouchableOpacity } from 'react-native';
import { useImageAsset } from './useImageAsset.hook';
import { styles } from './ImageAsset.styled';
import Colors from 'constants/Colors';
@ -7,8 +7,13 @@ export function ImageAsset({ topicId, asset, dismiss }) {
const { state, actions } = useImageAsset(topicId, asset);
return (
<TouchableOpacity activeOpacity={1} onPress={dismiss}>
<Image source={{ uri: state.url }} style={{ borderRadius: 4, width: state.imageWidth, height: state.imageHeight }} resizeMode={'cover'} />
<TouchableOpacity style={styles.container} activeOpacity={1} onPress={dismiss}>
<Image source={{ uri: state.url }} onLoad={actions.loaded} style={{ borderRadius: 4, width: state.imageWidth, height: state.imageHeight }} resizeMode={'cover'} />
{ !state.loaded && (
<View style={styles.loading}>
<ActivityIndicator color={Colors.white} size="large" />
</View>
)}
</TouchableOpacity>
);
}

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

@ -2,6 +2,14 @@ import { StyleSheet } from 'react-native';
import { Colors } from 'constants/Colors';
export const styles = StyleSheet.create({
container: {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
},
loading: {
position: 'absolute',
},
overlay: {
marginRight: 16,
position: 'absolute',

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

@ -12,6 +12,7 @@ export function useImageAsset(topicId, asset) {
imageWidth: 1,
imageHeight: 1,
url: null,
loaded: false,
});
const conversation = useContext(ConversationContext);
@ -51,6 +52,9 @@ export function useImageAsset(topicId, asset) {
}, [topicId, conversation, asset]);
const actions = {
loaded: () => {
updateState({ loaded: true });
}
};
return { state, actions };

41
app/mobile/src/session/conversation/topicItem/videoAsset/VideoAsset.jsx
View File

@ -1,8 +1,7 @@
import { Image, View, TouchableOpacity } from 'react-native';
import { ActivityIndicator, Image, View, TouchableOpacity } from 'react-native';
import Colors from 'constants/Colors';
import { Video, AVPlaybackStatus } from 'expo-av';
import { useVideoAsset } from './useVideoAsset.hook';
import GestureRecognizer from 'react-native-swipe-gestures';
import { styles } from './VideoAsset.styled';
import Icons from '@expo/vector-icons/MaterialCommunityIcons';
@ -11,18 +10,36 @@ export function VideoAsset({ topicId, asset, dismiss }) {
const { state, actions } = useVideoAsset(topicId, asset);
return (
<TouchableOpacity activeOpacity={1} onPress={actions.showClose}>
{ state.url && (
<Video source={{ uri: state.url }} style={{ width: state.width, height: state.height }} resizeMode={'cover'}
onReadyForDisplay={(e) => actions.setResolution(e.naturalSize.width, e.naturalSize.height)}
useNativeControls={state.controls} resizeMode="contain" />
)}
{ state.closing && (
<TouchableOpacity style={styles.close} onPress={dismiss}>
<Icons name="close" size={24} color={Colors.white} />
<View style={styles.container}>
{ !state.loaded && (
<TouchableOpacity onPress={dismiss}>
<ActivityIndicator color={Colors.white} size="large" />
</TouchableOpacity>
)}
</TouchableOpacity>
<TouchableOpacity activeOpacity={1} style={{...styles.container, ...state.display}} onPress={actions.showControls}>
<Video source={{ uri: state.url }} style={{ width: state.width, height: state.height }} resizeMode={'cover'}
onReadyForDisplay={(e) => actions.setResolution(e.naturalSize.width, e.naturalSize.height)}
isLooping={true} shouldPlay={state.playing} resizeMode="contain" />
{ (!state.playing || state.controls) && (
<View style={{ ...styles.overlay, width: state.width, height: state.height }} />
)}
{ !state.playing && state.loaded && (
<TouchableOpacity style={styles.control} onPress={actions.play}>
<Icons name="play-circle-outline" size={92} color={Colors.white} />
</TouchableOpacity>
)}
{ state.controls && state.playing && state.loaded && (
<TouchableOpacity style={styles.control} onPress={actions.pause}>
<Icons name="pause-circle-outline" size={92} color={Colors.white} />
</TouchableOpacity>
)}
{ (state.controls || !state.playing) && (
<TouchableOpacity style={styles.close} onPress={dismiss}>
<Icons name="window-close" size={32} color={Colors.white} />
</TouchableOpacity>
)}
</TouchableOpacity>
</View>
);
}

29
app/mobile/src/session/conversation/topicItem/videoAsset/VideoAsset.styled.js
View File

@ -2,15 +2,28 @@ import { StyleSheet } from 'react-native';
import { Colors } from 'constants/Colors';
export const styles = StyleSheet.create({
close: {
backgroundColor: 'rgba(0, 0, 0, 0.6)',
container: {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
},
overlay: {
position: 'absolute',
alignSelf: 'center',
justifySelf: 'center',
borderBottomLeftRadius: 4,
borderBottomRightRadius: 4,
paddingLeft: 4,
paddingRight: 4,
backgroundColor: 'rgba(0, 0, 0, 0.4)',
},
control: {
position: 'absolute',
paddingRight: 8,
paddingTop: 4,
},
close: {
position: 'absolute',
top: 0,
right: 0,
paddingTop: 4,
paddingBottom: 4,
paddingLeft: 8,
paddingRight: 8,
},
})

26
app/mobile/src/session/conversation/topicItem/videoAsset/useVideoAsset.hook.js
View File

@ -10,13 +10,14 @@ export function useVideoAsset(topicId, asset) {
frameHeight: 1,
videoRatio: 1,
width: 1,
weight: 1,
url: null,
playing: false,
loaded: false,
controls: false,
closing: false,
display: { display: 'none' },
});
const closing = useRef(null);
const controls = useRef(null);
const conversation = useContext(ConversationContext);
const dimensions = useWindowDimensions();
@ -51,13 +52,20 @@ export function useVideoAsset(topicId, asset) {
const actions = {
setResolution: (width, height) => {
updateState({ controls: true, videoRatio: width / height });
updateState({ loaded: true, display: {}, videoRatio: width / height });
},
showClose: () => {
clearTimeout(closing.current);
updateState({ closing: true });
closing.current = setTimeout(() => {
updateState({ closing: false });
play: () => {
actions.showControls();
updateState({ playing: true });
},
pause: () => {
updateState({ playing: false });
},
showControls: () => {
clearTimeout(controls.current);
updateState({ controls: true });
controls.current = setTimeout(() => {
updateState({ controls: false });
}, 2000);
},
};