@whatmore-repo/whatmore-reactnative-sdk 1.0.25 → 1.0.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@whatmore-repo/whatmore-reactnative-sdk",
-  "version": "1.0.25",
+  "version": "1.0.26",
   "description": "",
   "private": false,
   "main": "index.js",

package/src/components/WhatmoreRootComponent.js

@@ -2,7 +2,6 @@ import React, { useState, useEffect, lazy } from 'react';
 import { WHATMORE_BACKEND_BASE_URL } from '../constants/AppGlobalVars';
 import { extractEvents, removeInvalidEvents } from '../utils/EventSanityUtils';
 import { View } from 'react-native';
-// import EventTileWithProduct from './carousel-view/EventTileWithProduct.js';
 
 const EventTileWithProduct = lazy(() => import('./carousel-view/EventTileWithProduct.js'));
 const EventClickComponent = lazy(() => import('./EventClickComponent'));

package/src/components/carousel-view/EventTileWithProduct.js

@@ -11,9 +11,10 @@ export default function EventTileWithProduct(props) {
     const { width } = Dimensions.get('window');
     const ITEM_WIDTH = width * 0.33;
     const CARD_HEIGHT = 200;
-    
+
     const styles = StyleSheet.create({
         container: {
+            position: 'relative',
             width: '100%',
             height: 250,
         },
@@ -22,7 +23,21 @@ export default function EventTileWithProduct(props) {
             height: CARD_HEIGHT,
             marginHorizontal: 8,
             top: 20,
-
+        },
+        arrowContainerRight: {
+            position: 'absolute',
+            top: 90,
+            right: 0,
+            width: 28,
+            height: 28,
+            marginHorizontal: 5,
+        },
+        arrowContainerLeft: {
+            position: 'absolute',
+            top: 90,
+            width: 28,
+            height: 28, 
+            marginHorizontal: 5,
         }
     });
 
@@ -32,36 +47,63 @@ export default function EventTileWithProduct(props) {
     };
 
     const { events, isModalOpen, setInitialEventIndex, setIsModalOpen } = props;
-    const [pausedVideos, setPausedVideos] = useState({});
-    const handleVideoLoad = (index) => {
-        setPausedVideos((prevState) => ({
-            ...prevState,
-            [index]: true
-        }));
+    // const [pausedVideos, setPausedVideos] = useState({});
+    // const handleVideoLoad = (index) => {
+    //     setPausedVideos((prevState) => ({
+    //         ...prevState,
+    //         [index]: true
+    //     }));
+    // };
+    const videoRef = useRef(null);
+
+    const scrollLeft = () => {
+        if (activeIndex > 0) {
+            const newIndex = Math.max(0, activeIndex - 2);
+            flatListRef.current.scrollToIndex({ index: newIndex, animated: true });
+            setActiveIndex(newIndex);
+        }
+    };
+
+    const scrollRight = () => {
+        setRenderedEvents(prev => prev + 2);
+        if (activeIndex < events.length - 1) {
+            const newIndex = activeIndex + 2;
+            flatListRef.current.scrollToIndex({ index: newIndex, animated: true });
+            setActiveIndex(newIndex);
+        }
     };
 
+    // useEffect(() => {
+    //     setPausedVideos(pausedVideos[index] && index !== activeIndex);
+    // }, [pausedVideos, index, activeIndex]);
+
+    // React.useEffect(()=>{
+    //     if(videoRef.current){
+    //         // videoRef.current.pauseAsync()
+    //     }
+    // },[])
     const renderItem = ({ item, index }) => {
         return (
             <TouchableOpacity onPress={() => handleClick(index)} key={index}>
                 <Animated.View style={[styles.cardContainer]}>
-                    {
-                        <Image src={item.poster_image}/>
-                    }
                     <Video
+                        ref={videoRef}
                         source={{ uri: item?.thumbnail_image }}
                         controls={false}
                         repeat
                         muted
                         resizeMode={"cover"}
-                        paused={false}
-                        onLoad={() => handleVideoLoad(index)}
+                        // paused={index !== activeIndex}
+                        // onLoad={() => handleVideoLoad(index)}
 
                         style={{
                             aspectRatio: 0.5625,
                             width: "100%",
                             height: '100%',
                             borderRadius: 10,
-                            transform: [{ scale: 1.1 }]
+                            transform: [{ scale: 1.1 }],
+                            // elevation: 1
+
                         }}                    
                     />
                 </Animated.View>
@@ -69,46 +111,35 @@ export default function EventTileWithProduct(props) {
         );
     };
     const flatListRef = useRef(null);
-    const handleScroll = (event) => {
-        const offsetX = event.nativeEvent.contentOffset.x;
-        const index = Math.round(offsetX / ITEM_WIDTH);
-        setRenderedEvents(prev => prev + 1)
-        setActiveIndex(index);
-    };
+
     return (
         <SafeAreaView style={styles.container}>
             <Animated.FlatList
                 horizontal
+                style={{paddingLeft: 10}}
                 data={events.slice(0,renderedEvents)}
                 renderItem={renderItem}
-                keyExtractor={(item, index) => index.toString()}
                 contentInsetAdjustmentBehavior="never"
                 decelerationRate="fast"
+                scrollEnabled={false}
                 automaticallyAdjustContentInsets={false}
                 showsHorizontalScrollIndicator={false}
-                onScroll={handleScroll}
                 scrollEventThrottle={16}
                 ref={flatListRef}
             />
+            <TouchableOpacity style={styles.arrowContainerLeft} onPress={scrollLeft}>
+                <ChevronLeftIcon />
+            </TouchableOpacity>
+                        <TouchableOpacity style={styles.arrowContainerRight} onPress={scrollRight}>
+                <ChevronRightIcon />
+            </TouchableOpacity>
         </SafeAreaView>
     );
 }
 
-
-                // onScroll={Animated.event(
-                //     [{ nativeEvent: { contentOffset: { x: scrollX } } }],
-                //     { useNativeDriver: true }
-                // )}
-
-                                // snapToAlignment="center"
-        // const scale = scrollX.interpolate({
-        //     inputRange,
-        //     outputRange: [0.9, 1.1, 0.9],
-        //     extrapolate: 'clamp',
-        // });
-
-                // const inputRange = [
-        //     (index - 1) * ITEM_WIDTH,
-        //     index * ITEM_WIDTH,
-        //     (index +1) * ITEM_WIDTH,
-        // ];
+    // const handleScroll = (event) => {
+    //     const offsetX = event.nativeEvent.contentOffset.x;
+    //     const index = Math.round((offsetX + ITEM_WIDTH)/ ITEM_WIDTH);
+    //     setRenderedEvents(prev => prev + 1)
+    //     setActiveIndex(index);
+    // };