@droppii-org/chat-mobile 0.2.6 → 0.2.8

package/src/screens/MediaView/index.tsx

@@ -0,0 +1,327 @@
+import { useCallback, useEffect, useRef, useState, useMemo } from 'react';
+import type { ComponentType } from 'react';
+import {
+  BackHandler,
+  Platform,
+  StyleSheet,
+  FlatList,
+  type ListRenderItemInfo,
+  type ViewToken,
+} from 'react-native';
+
+import LinearGradient from 'react-native-linear-gradient';
+import Animated, {
+  FadeIn,
+  FadeOut,
+  SlideInDown,
+  SlideOutDown,
+} from 'react-native-reanimated';
+import { Pagination } from 'react-native-snap-carousel';
+import PhotoView from 'react-native-photo-view';
+import {
+  KColors,
+  KContainer,
+  KDims,
+  KImage,
+  KLabel,
+  KRadiusValue,
+  KSpacingValue,
+} from '@droppii/libs';
+import VideoPlayer from './VideoPlayer';
+
+interface MediaViewerParams {
+  images: any[];
+  initIndex?: number;
+  download?: boolean;
+  pagination?: boolean;
+  logParams?: any;
+  onDismiss: () => void;
+}
+
+const MediaViewerScreen = (props: MediaViewerParams) => {
+  const {
+    images = [],
+    initIndex = 0,
+    download,
+    pagination,
+
+    onDismiss,
+  } = props;
+
+  const listRef = useRef<FlatList>(null);
+  const [index, setIndex] = useState(initIndex);
+  const [isScrolling, setIsScrolling] = useState(false);
+
+  const dismiss = useCallback(() => {
+    onDismiss?.();
+  }, [onDismiss]);
+
+  const onDownload = useCallback(() => {}, []);
+
+  //   useEffect(() => {
+  //     StatusBar.setHidden(true);
+  //     return () => {
+  //       StatusBar.setHidden(false);
+  //     };
+  //   }, []);
+
+  useEffect(() => {
+    if (Platform.OS === 'android') {
+      const sub = BackHandler.addEventListener('hardwareBackPress', () => {
+        dismiss();
+        return true;
+      });
+      return () => sub.remove();
+    }
+  }, [dismiss]);
+
+  const onMomentumScrollBegin = useCallback(() => setIsScrolling(true), []);
+  const onMomentumScrollEnd = useCallback(() => setIsScrolling(false), []);
+
+  const onScrollToIndexFailed = useCallback(
+    (info: any) => {
+      const len = images.length;
+      const wait = new Promise((resolve) => setTimeout(() => resolve(true), 0));
+      wait.then(() => {
+        if (info.index > -1 && info.index < len) {
+          listRef.current?.scrollToIndex({
+            index: info.index,
+            animated: false,
+          });
+        }
+      });
+    },
+    [images]
+  );
+
+  const onViewableItemsChanged = useRef(
+    ({ viewableItems }: { viewableItems: ViewToken[] }) => {
+      const i = viewableItems[0]?.index;
+      setIndex(i || 0);
+    }
+  ).current;
+
+  const keyEx = useCallback((item: any, i: number) => `${item.url}-${i}`, []);
+
+  const renderItem = useCallback(
+    ({ item, index: itemIndex }: ListRenderItemInfo<any>) => (
+      <KContainer.Touchable center activeOpacity={1}>
+        <KContainer.VisibleView visible={!!item.isVideo}>
+          <VideoPlayer
+            url={item?.url || ''}
+            isActive={itemIndex === index && !isScrolling}
+            showCustomControls={false}
+          />
+        </KContainer.VisibleView>
+        <KContainer.VisibleView visible={!item.isVideo}>
+          <PhotoView
+            source={{ uri: item.url }}
+            minimumZoomScale={1}
+            maximumZoomScale={3}
+            scale={1}
+            androidScaleType="fitCenter"
+            style={styles.img}
+          />
+        </KContainer.VisibleView>
+      </KContainer.Touchable>
+    ),
+    [index, isScrolling]
+  );
+
+  const renderFooter = useMemo(() => {
+    if (pagination === false) return null;
+    return (
+      <KContainer.View style={styles.footer}>
+        <KLabel.Text
+          typo="TextNmNormal"
+          color={KColors.white}
+          style={styles.counterText}
+        >
+          {index + 1}/{images.length}
+        </KLabel.Text>
+        <Pagination
+          dotContainerStyle={styles.dotContainerStyle}
+          dotStyle={styles.dot}
+          inactiveDotStyle={styles.inactiveDot}
+          inactiveDotScale={0.6}
+          dotsLength={images.length > 1 ? images.length : 3}
+          activeDotIndex={images.length > 1 ? index : 1}
+          inactiveDotOpacity={images.length > 1 ? 0.5 : 0}
+        />
+      </KContainer.View>
+    );
+  }, [pagination, images.length, index]);
+  return (
+    <Animated.View
+      style={styles.wrapper}
+      entering={SlideInDown}
+      exiting={SlideOutDown}
+    >
+      <Animated.View
+        entering={FadeIn.stiffness(300)}
+        exiting={FadeOut.stiffness(300)}
+        style={styles.flex}
+      >
+        {/* Top gradient overlay */}
+        <LinearGradient
+          colors={['rgba(0,0,0,0.9)', 'rgba(0,0,0,0)']}
+          style={[styles.topOverlay]}
+          pointerEvents="box-none"
+        >
+          {/* Header first row — matches Figma: [close] [flex-1 spacer] [action-group] */}
+          <KContainer.View style={styles.headerRow}>
+            {/* Close — shrink-0, padding 8, borderRadius 128 */}
+            <KContainer.Touchable style={styles.headerBtn} onPress={dismiss}>
+              <KImage.VectorIcons
+                name="close-o"
+                size={24}
+                color={KColors.white}
+              />
+            </KContainer.Touchable>
+
+            {/* Flex-1 spacer (empty, same as Figma Header-Text) */}
+            <KContainer.View flex />
+
+            {/* Download button */}
+            {download && (
+              <KContainer.Touchable
+                style={styles.headerBtn}
+                onPress={onDownload}
+              >
+                <KImage.VectorIcons
+                  name="download-o"
+                  size={24}
+                  color={KColors.white}
+                />
+              </KContainer.Touchable>
+            )}
+          </KContainer.View>
+        </LinearGradient>
+        {/* Media content */}
+        <FlatList
+          ref={listRef}
+          initialScrollIndex={
+            initIndex >= images?.length ? images?.length - 1 : initIndex
+          }
+          data={images}
+          renderItem={renderItem}
+          keyExtractor={keyEx}
+          pagingEnabled
+          horizontal
+          showsHorizontalScrollIndicator={false}
+          onViewableItemsChanged={onViewableItemsChanged}
+          viewabilityConfig={{ itemVisiblePercentThreshold: 50 }}
+          onScrollToIndexFailed={onScrollToIndexFailed}
+          onMomentumScrollBegin={onMomentumScrollBegin}
+          onMomentumScrollEnd={onMomentumScrollEnd}
+          removeClippedSubviews
+          maxToRenderPerBatch={2}
+          windowSize={3}
+          style={styles.flex}
+        />
+
+        {renderFooter}
+      </Animated.View>
+    </Animated.View>
+  );
+};
+
+(MediaViewerScreen as ComponentType<any>).displayName = 'Screen.MediaViewer';
+
+export default MediaViewerScreen;
+
+const styles = StyleSheet.create({
+  wrapper: {
+    flex: 1,
+    backgroundColor: KColors.black,
+  },
+  flex: {
+    flex: 1,
+  },
+  img: {
+    width: KDims.width,
+    height: KDims.height,
+  },
+  topOverlay: {
+    // position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    zIndex: 100,
+    minHeight: 100,
+    paddingTop: 20,
+  },
+  // Figma: Header-First-Row — flex row, padding 8, alignItems center
+  headerRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 8,
+  },
+  // Figma: Header-Back — padding 8, borderRadius 128 (fully round)
+  headerBtn: {
+    padding: 8,
+    borderRadius: 128,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  // Figma: Header-Action-Group — flex row, gap 8, alignItems center
+  actionGroup: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+  },
+  // Figma: Number — absolute, left 50%, top 17, translateX -50%
+  counterWrapper: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    top: 17,
+    alignItems: 'center',
+  },
+  counterText: {
+    letterSpacing: 0.14,
+  },
+  cartIconStyle: {
+    color: KColors.white,
+  },
+  selectToDownloadWrapper: {
+    alignItems: 'center',
+    marginTop: KSpacingValue['0.5rem'],
+  },
+  selectToDownloadBtn: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    height: 28,
+    paddingHorizontal: KSpacingValue['0.75rem'],
+    borderRadius: KRadiusValue['2x'],
+    borderWidth: 1,
+    borderColor: KColors.white,
+    gap: KSpacingValue['0.25rem'],
+  },
+  selectToDownloadText: {
+    letterSpacing: 0.12,
+  },
+  footer: {
+    position: 'absolute',
+    bottom:
+      KDims.bottomSafeHeight > 0
+        ? KDims.bottomSafeHeight + KSpacingValue['0.5rem']
+        : KSpacingValue['2rem'],
+    alignSelf: 'center',
+    alignItems: 'center',
+    zIndex: 10,
+  },
+  dotContainerStyle: {
+    marginHorizontal: 0,
+  },
+  dot: {
+    backgroundColor: KColors.white,
+    width: 8,
+    height: 8,
+    borderRadius: 8,
+    marginHorizontal: 2,
+  },
+  inactiveDot: {
+    backgroundColor: KColors.gray.light,
+  },
+});