diff --git a/app/mobile/src/context/useConversationContext.hook.js b/app/mobile/src/context/useConversationContext.hook.js
index cfa03fae..6c7e9527 100644
--- a/app/mobile/src/context/useConversationContext.hook.js
+++ b/app/mobile/src/context/useConversationContext.hook.js
@@ -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,
diff --git a/app/mobile/src/session/conversation/topicItem/audioAsset/AudioAsset.jsx b/app/mobile/src/session/conversation/topicItem/audioAsset/AudioAsset.jsx
index c0ce1d33..c3051459 100644
--- a/app/mobile/src/session/conversation/topicItem/audioAsset/AudioAsset.jsx
+++ b/app/mobile/src/session/conversation/topicItem/audioAsset/AudioAsset.jsx
@@ -31,7 +31,7 @@ export function AudioAsset({ topicId, asset, dismiss }) {
+ paused={!state.playing} onLoad={actions.loaded} style={styles.player} />
);
}
diff --git a/app/mobile/src/session/conversation/topicItem/audioThumb/AudioThumb.styled.js b/app/mobile/src/session/conversation/topicItem/audioThumb/AudioThumb.styled.js
index 695265d2..c6c0c2a4 100644
--- a/app/mobile/src/session/conversation/topicItem/audioThumb/AudioThumb.styled.js
+++ b/app/mobile/src/session/conversation/topicItem/audioThumb/AudioThumb.styled.js
@@ -12,7 +12,10 @@ export const styles = StyleSheet.create({
maxHeight: 50,
},
label: {
- textOverlay: 'center',
+ textAlign: 'center',
+ color: Colors.text,
+ padding: 4,
+ fontSize: 12,
},
})
diff --git a/app/mobile/src/session/conversation/topicItem/imageAsset/ImageAsset.jsx b/app/mobile/src/session/conversation/topicItem/imageAsset/ImageAsset.jsx
index c4d5b3d1..67c4c835 100644
--- a/app/mobile/src/session/conversation/topicItem/imageAsset/ImageAsset.jsx
+++ b/app/mobile/src/session/conversation/topicItem/imageAsset/ImageAsset.jsx
@@ -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 (
-
-
+
+ { state.url && (
+
+ )}
+
+ { state.controls && (
+
+
+
+ )}
+
{ state.failed && (
diff --git a/app/mobile/src/session/conversation/topicItem/imageAsset/ImageAsset.styled.js b/app/mobile/src/session/conversation/topicItem/imageAsset/ImageAsset.styled.js
index 982a04c1..be5711c7 100644
--- a/app/mobile/src/session/conversation/topicItem/imageAsset/ImageAsset.styled.js
+++ b/app/mobile/src/session/conversation/topicItem/imageAsset/ImageAsset.styled.js
@@ -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,
+ },
})
diff --git a/app/mobile/src/session/conversation/topicItem/imageAsset/useImageAsset.hook.js b/app/mobile/src/session/conversation/topicItem/imageAsset/useImageAsset.hook.js
index 566eb2f1..f3967270 100644
--- a/app/mobile/src/session/conversation/topicItem/imageAsset/useImageAsset.hook.js
+++ b/app/mobile/src/session/conversation/topicItem/imageAsset/useImageAsset.hook.js
@@ -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 };