switching carousel module

app/mobile/package.json

@@ -30,6 +30,7 @@
     "react-native-gesture-handler": "^2.9.0",
     "react-native-image-crop-picker": "^0.39.0",
     "react-native-reanimated": "^2.14.4",
+    "react-native-reanimated-carousel": "^3.3.0",
     "react-native-rsa-native": "^2.0.5",
     "react-native-safe-area-context": "^4.5.0",
     "react-native-screens": "^3.20.0",

app/mobile/src/context/useAppContext.hook.js

@@ -156,6 +156,7 @@ export function useAppContext() {
   const setWebsocket = (session) => {
     ws.current = createWebsocket(`wss://${session.server}/status`);
     ws.current.onmessage = (ev) => {
+console.log("ON MESSAGE!");
       try {
         delay.current = 0;
         const rev = JSON.parse(ev.data);

app/mobile/src/context/useConversationContext.hook.js

@@ -34,6 +34,7 @@ export function useConversationContext() {
 
   const sync = async () => {
 
+console.log("SYNCING!");
     if (!syncing.current && (reset.current || update.current || force.current || more.current)) {
       const loadMore = more.current;
       const ignoreRevision = force.current;
@@ -92,16 +93,19 @@ export function useConversationContext() {
         if (ignoreRevision || curRevision !== setRevision) {
           try {
             if (!marker) {
+console.log("FIRST GET");
               const delta = await getTopicDelta(cardId, channelId, null, COUNT, null, null);
               await setTopicDelta(cardId, channelId, delta.topics);
               await setMarkerAndSync(cardId, channelId, delta.marker, curRevision);
             }
             if (loadMore && marker) {
+console.log("MORE GET");
               const delta = await getTopicDelta(cardId, channelId, null, COUNT, null, marker);
               await setTopicDelta(cardId, channelId, delta.topics);
               await setTopicMarker(cardId, channelId, delta.marker);
             }
             if (ignoreRevision || curRevision !== setRevision) {
+console.log("UPDATE");
               const delta = await getTopicDelta(cardId, channelId, setRevision, null, marker, null);
               await setTopicDelta(cardId, channelId, delta.topics);
               await setSyncRevision(cardId, channelId, curRevision);

app/mobile/src/session/conversation/topicItem/TopicItem.jsx

@@ -12,6 +12,7 @@ import { ImageThumb } from './imageThumb/ImageThumb';
 import { ImageAsset } from './imageAsset/ImageAsset';
 import { AudioAsset } from './audioAsset/AudioAsset';
 import { VideoAsset } from './videoAsset/VideoAsset';
+import Carousel from 'react-native-reanimated-carousel';
 
 export function TopicItem({ item, focused, focus, hosting, sealed, sealKey, remove, update, block, report }) {
 
@@ -207,6 +208,25 @@ export function TopicItem({ item, focused, focus, hosting, sealed, sealKey, remo
         onRequestClose={actions.hideCarousel}
       >
         <View style={styles.modal}>
+          <Carousel
+            loop
+            width={state.width}
+            autoPlay={false}
+            data={state.assets}
+            scrollAnimationDuration={1000}
+            renderItem={({ index }) => (
+              <View style={styles.frame}>
+                { state.assets[index].image && (
+                  <ImageAsset topicId={item.topicId} asset={state.assets[index].image} dismiss={actions.hideCarousel} />
+                )}
+                { state.assets[index].video && (
+                  <VideoAsset topicId={item.topicId} asset={state.assets[index].video} dismiss={actions.hideCarousel} />
+                )}
+                { state.assets[index].audio && (
+                  <AudioAsset topicId={item.topicId} asset={state.assets[index].audio} dismiss={actions.hideCarousel} />
+                )}
+              </View>
+            )} />
         </View>
       </Modal> 
     </View>

app/mobile/src/session/conversation/topicItem/imageAsset/ImageAsset.jsx

@@ -7,7 +7,7 @@ export function ImageAsset({ topicId, asset, dismiss }) {
   const { state, actions } = useImageAsset(topicId, asset);
 
   return (
-    <TouchableOpacity style={styles.container} activeOpacity={1} onPress={dismiss}>
+    <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'} />
       { state.failed && (

app/mobile/src/session/conversation/topicItem/videoAsset/VideoAsset.jsx

@@ -12,9 +12,11 @@ export function VideoAsset({ topicId, asset, dismiss }) {
   return (
     <View style={styles.container}>
       <TouchableOpacity activeOpacity={1} style={styles.container}  onPress={actions.showControls}>
-        <Video source={{ uri: state.url }} style={{ width: state.width, height: state.height }} resizeMode={'cover'} 
+        { state.url && (
-          onReadyForDisplay={(e) => actions.setResolution(e.naturalSize.width, e.naturalSize.height)}
+          <Video source={{ uri: state.url }} style={{ width: state.width, height: state.height }} resizeMode={'cover'} 
-          onLoad={actions.loaded} isLooping={true} shouldPlay={state.playing} resizeMode="contain" />
+            onReadyForDisplay={(e) => { console.log(e) }}
+            onLoad={actions.loaded} isLooping={true} paused={!state.playing} resizeMode="contain" />
+        )}
         { (!state.playing || state.controls) && (
           <View style={{ ...styles.overlay, width: state.width, height: state.height }} />
         )}

app/mobile/yarn.lock

@@ -6274,6 +6274,11 @@ react-native-image-crop-picker@^0.39.0:
   resolved "https://registry.yarnpkg.com/react-native-image-crop-picker/-/react-native-image-crop-picker-0.39.0.tgz#9cb8e8ffb0e8ab06f7b3227cadf077169e225eba"
   integrity sha512-4aANbQMrmU6zN/4b0rVBA7SbaZ3aa5JESm3Xk751sINybZMt1yz/9h95LkO7U0pbslHDo3ofXjG75PmQRP6a/w==
 
+react-native-reanimated-carousel@^3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/react-native-reanimated-carousel/-/react-native-reanimated-carousel-3.3.0.tgz#e71e9441ee6aaae401c5a023b27bf48a54565d16"
+  integrity sha512-rprUl+LqWoXyH/8OvHv+m9Kol2YORHEnz7tvRum+o4ciCUCcYnafQBbSqG44RMllOCqm3WOAcuEX5p8a7W3ZZw==
+
 react-native-reanimated@^2.14.4:
   version "2.14.4"
   resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-2.14.4.tgz#3fa3da4e7b99f5dfb28f86bcf24d9d1024d38836"