Add owner swipe-delete and localized all-photos hint

components/Media.js

@@ -1,6 +1,6 @@
 // Import necessary dependencies
 import React, { useState, useEffect } from 'react';
-import { View, TouchableHighlight, StyleSheet, FlatList, TouchableWithoutFeedback, Share } from 'react-native';
+import { View, TouchableHighlight, StyleSheet, FlatList, TouchableWithoutFeedback, TouchableOpacity, Share } from 'react-native';
 import { Button, Text, ProgressBar } from 'react-native-paper';
 import API from './../API.js';
 import VideoPlayer from './VideoPlayer.js';
@@ -13,6 +13,7 @@ import { useNavigation } from '@react-navigation/native';
 import { Image } from 'expo-image'; // Import Image from expo-image
 import * as FileSystem from 'expo-file-system';
 import * as Sharing from 'expo-sharing';
+import i18n from "../i18nMessages.js";
 
 // Extract Vimeo video ID from content string
 const videoIdF = (content) => {
@@ -72,6 +73,7 @@ let Media = (props) => {
     // Extracting tags from content
     const imagesTag = imagesTagF(props.content, props.imageWidth || 1000, props.imageHeight || 1000);
     const imagesTagLimited = imagesTag.slice(0, 10);
+    const isImagesCapped = imagesTag.length > imagesTagLimited.length;
     const imageStyle = imagesTag.length === 1 ? styles.image : styles.multipleImage;
     const videosId = videoIdF(props.content);
     const hlsUrl = hlsIdF(props.content);
@@ -229,19 +231,26 @@ let Media = (props) => {
     return (
         <View style={{ paddingTop: 10, paddingBottom: 3 }}>
             {imagesTag.length > 2 ? (
-                <FlatList
-                    horizontal
-                    data={imagesTagLimited}
-                    renderItem={renderImages}
-                    keyExtractor={(item) => item[1]}
-                    initialNumToRender={2}
-                    style={{
-                        transform: [{ scale: 1.1 }],
-                        paddingTop: 5,
-                        paddingBottom: 10,
-                    }}
-                    showsHorizontalScrollIndicator={false}
-                />
+                <>
+                    <FlatList
+                        horizontal
+                        data={imagesTagLimited}
+                        renderItem={renderImages}
+                        keyExtractor={(item) => item[1]}
+                        initialNumToRender={2}
+                        style={{
+                            transform: [{ scale: 1.1 }],
+                            paddingTop: 5,
+                            paddingBottom: 10,
+                        }}
+                        showsHorizontalScrollIndicator={false}
+                    />
+                    {isImagesCapped ? (
+                        <TouchableOpacity onPress={() => navigateToSlideshow(0)} style={styles.seeAllPhotosWrap}>
+                            <Text style={styles.seeAllPhotosText}>{i18n.t("message.clickToSeeAllPhotos")}</Text>
+                        </TouchableOpacity>
+                    ) : <></>}
+                </>
             ) : (
                 <View style={{ flexDirection: "row" }}>
                     {imagesTag.map((image, i) => (
@@ -294,5 +303,15 @@ const styles = StyleSheet.create({
     iframe: {
         width: "100%",
         minHeight: 300,
-    }
+    },
+    seeAllPhotosWrap: {
+        paddingTop: 2,
+        paddingBottom: 6,
+        paddingLeft: 6,
+    },
+    seeAllPhotosText: {
+        color: "#5f6368",
+        textDecorationLine: "underline",
+        fontSize: 13,
+    },
 });