EMI-ExpoAPP/components/Media.js

import React, { useState, useEffect } from 'react';
import { View, TouchableHighlight, StyleSheet, FlatList, TouchableWithoutFeedback, Share } from 'react-native';
import { Button, Text, ProgressBar } from 'react-native-paper';
import API from './../API.js';
import VideoPlayer from './VideoPlayer.js';
import VimeoPlayer from './VimeoPlayer.js';
import { WebView } from 'react-native-webview';
import { useSnapshot } from 'valtio';
import GlobalState from '../contexts/GlobalState.js';
import Moment from 'moment';
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';

const videoIdF = (content) => {
    let vimeoTag = content.match(/@vimeo:[0-9]+/);
    if (!vimeoTag) return [];
    let tag = vimeoTag;
    tag = tag[0].substring(1);
    return tag.split(':');
};

const youtubeIdF = (content) => {
    let youtubeTag = content.match(/@youtube:[0-z]+/);
    if (!youtubeTag) return '';
    let tag = youtubeTag;
    tag = tag[0].substring(1);
    return tag.split(':')[1];
};

const hlsIdF = (content) => {
    let hslTag = content.match(/@hls:.+\w/);
    if (!hslTag) return '';
    let tag = hslTag;
    tag = tag[0].substring(5);
    return tag;
};

const imagesTagF = (content) => {
    let images = content.match(/@image:[0-z|/|.|]+/g);
    if (!images) return [];
    let Tags = [];
    images.forEach(i => {
        let tag = i.substring(1);
        let parts = [tag.substring(1, tag.indexOf(":")), tag.substring(tag.indexOf(":") + 1)];
        if (parts[1].substring(0, 4) != "http") parts[1] = "https://social.emmint.com/" + parts[1] + '?width=1000&height=1000';
        Tags.push(parts);
    });
    return Tags;
};

const iframeTagF = (content) => {
    let iframeMatch = content.match(/@iframe:.+\w/g);
    if (!iframeMatch) return [];
    let tag = iframeMatch[0].substring(1);
    let parts = [tag.substring(1, tag.indexOf(":")), tag.substring(tag.indexOf(":") + 1)];
    return parts;
};


let Media = (props) => {
    const gState = useSnapshot(GlobalState);
    const viewer = gState.me;
    const imagesTag = imagesTagF(props.content);
    const imagesTagLimited = imagesTag.slice(0, 10);
    const imageStyle = imagesTag.length == 1 ? styles.image : styles.multipleImage;
    const videosId = videoIdF(props.content);
    const hlsUrl = hlsIdF(props.content);
    const iframeSrc = iframeTagF(props.content) || [];
    const youtubeId = youtubeIdF(props.content);
    const [videosFiles, setVideosFiles] = useState([]);
    const [poster, setPoster] = useState('');
    const [loaded, setLoaded] = useState(false);
    const navigation = useNavigation();
    useEffect(() => {
        let subscribed = true;
        let getData = async () => {
            if (!videosId[1]) return 0;
            let videoObj = await API.getVideo(videosId[1]);
            if (videoObj && videoObj.files && subscribed) {
                setVideosFiles(videoObj.files);
                setPoster(videoObj.pictures.sizes[4].link);
            }
        };
        getData();
        return () => {
            subscribed = false;
        };
    }, [props.content])
    const video = (videosFiles.length && !props.skiptVideo) ? (
        loaded ? <VideoPlayer videosFiles={videosFiles} poster={poster} videoId={videosId[1]} /> :
            (
                <TouchableHighlight onPress={() => setLoaded(true)}>
                    <Image source={poster ? { uri: poster } : {}} key={poster} style={styles.poster} cachePolicy="memory-disk" />
                </TouchableHighlight>
            )
    ) :
        (videosId.length ? <VimeoPlayer videoId={videosId[1]} /> : <></>);
    const video2 = (hlsUrl && !props.skiptVideo) ? (
        loaded ?
            <VideoPlayer videoUrl={hlsUrl} postId={props.postId} /> :
            <TouchableHighlight onPress={() => {
                //setLoaded(true)
                GlobalState.currentMedia = hlsUrl;
                GlobalState.mediaPost = props.post;
            }}>
                {poster ?
                    <Image source={poster ? { uri: poster } : {}} key={poster} style={styles.poster} cachePolicy="memory-disk" /> :
                    <Button
                        icon={"subscriptions"}
                        labelStyle={{ fontSize: 58 }}
                        style={{ flow: 1 }}
                    ></Button>
                }
            </TouchableHighlight>
    ) : <></>;
    const iframe = iframeSrc.length ?
        <WebView
            style={styles.iframe}
            source={{ uri: iframeSrc[1] }}
        /> : <></>;
    const youtubeEmb = youtubeId.length ?
        <WebView
            style={styles.iframe}
            source={{ uri: "https://www.youtube.com/embed/" + youtubeId + "?fs=0" }}
        /> : <></>;
    const renderImages = (({ item, index }) => {
        return (
            <TouchableWithoutFeedback style={styles.flatlistImages}
                onPress={() => {
                    //alert("hello");
                    navigation.navigate('Slideshow', { images: imagesTag, startIndex: index });
                }}
                onLongPress={() => {
                    Share.share({
                        //message: image[1],
                        url: item[1],
                    });
                }}>
                <Image source={{ uri: item[1] }} style={styles.flatlistImages} cachePolicy="memory-disk" />
            </TouchableWithoutFeedback>
        );
    });
    let progress = <></>;
    if (viewer.data && viewer.data[props.postId]) {
        const percent = Math.round(viewer.data[props.postId].time / viewer.data[props.postId].duration * 100);
        if (percent)
            progress =
                <>
                    <Text>{percent}% {Moment(viewer.data[props.postId].ts).fromNow()}</Text>
                    <ProgressBar progress={viewer.data[props.postId].time / viewer.data[props.postId].duration} />
                </>;
    }
    const shareImage = async (imageUrl) => {
        try {
            // Download the image to the device's file system
            const fileUri = `${FileSystem.cacheDirectory}shared-image.jpg`;
            const { uri } = await FileSystem.downloadAsync(imageUrl, fileUri);

            // Share the downloaded image
            await Sharing.shareAsync(uri);
        } catch (error) {
            console.error("Error sharing the image", error);
        }
    };
    return (
        <View
            style={{
                paddingTop: 10,
                paddingBottom: 3,
            }}
        >
            {
                (imagesTag.length > 2) ?
                    <FlatList
                        horizontal={true}
                        data={imagesTagLimited}
                        renderItem={renderImages}
                        keyExtractor={item => item[1]}
                        initialNumToRender={2}
                        style={{
                            transform: [{
                                scale: 1.1
                            }],
                            paddingTop: 5,
                            paddingBottom: 10,
                        }}
                        showsHorizontalScrollIndicator={false}
                    /> :
                    <View style={{ flexDirection: "row" }}>
                        {
                            imagesTag.map((image, i) => {
                                return (
                                    //<Text key={i}>{post.content}</Text>
                                    <TouchableWithoutFeedback
                                        onPress={() => {
                                            navigation.navigate('Slideshow', { images: imagesTag, startIndex: i });
                                        }}
                                        onLongPress={async () => {
                                            await shareImage(image[1]);
                                            //Share.share({
                                                //message: image[1],
                                            //    url: image[1],
                                            //});
                                        }}>
                                        <Image source={{ uri: image[1] }} key={image[1]} style={imageStyle} cachePolicy="memory-disk" />
                                    </TouchableWithoutFeedback>
                                )
                            })
                        }
                    </View>
            }
            {video}
            {video2}
            {iframe}
            {youtubeEmb}
            {progress}
        </View>
    );
}

export default Media;

const styles = StyleSheet.create({
    image: {
        width: "100%",
        aspectRatio: 1,
        borderRadius: 15,
    },
    poster: {
        width: "100%",
        aspectRatio: 9 / 6,
    },
    multipleImage: {
        width: "49%",
        aspectRatio: 1,
        margin: 3,
        borderRadius: 15,
    },
    flatlistImages: {
        width: 300,
        aspectRatio: 1,
        margin: 5,
        borderRadius: 15,
    },
    iframe: {
        width: "100%",
        minHeight: 300,
    }
});