Untitled

import React, { useState } from "react";
import { ImageBackground, View, Text, TouchableOpacity, Image, StyleSheet, Pressable } from "react-native";
import LinearGradient from "react-native-linear-gradient";
import { StatsIndicator } from "../common/StatsIndicator";
import Ionicons from 'react-native-vector-icons/Ionicons';
import Video from 'react-native-video'


import BurnOutlineIcon from '../../assets/Icons/stats-burn/fire-outline.svg'
import ClockIcon from '../../assets/Icons/stats-burn/clock-outline.svg'
import FreeTagIcon from '../../assets/Icons/commons/free-tag.svg'
import fonts from "../../assets/fonts";
import { colors } from "../../theme";
import { IMAGE_URL } from "@env";
import { height, width } from "../../constants/constants";


export const VideoThumbnailComponent = React.memo(({
    title,
    author,
    totalTime,
    duration,
    type,
    calories,
    subTitle,
    videoUrl,
    thumbnail,
    id,
    onpress
}: {
    title: string;
    author: string;
    totalTime: string | number;
    duration: string;
    type: string;
    calories: string;
    subTitle: string;
    videoUrl: string;
    thumbnail: string;
    id: string;
    onpress: (id: string | number) => {};
}) => {

    const [playVideo, setPlayVideo] = useState(false)
    const changeTo480 = videoUrl?.replace('/file/', '/file/h_480/');
    const videoPlayerUrl = changeTo480?.replace('.html', '.mp4')

    const VideoThumbnailCard = React.memo(() => {
        return (
            <ImageBackground
                source={String(thumbnail)?.includes('jpg') || String(thumbnail)?.includes('png') ? { uri: IMAGE_URL + thumbnail } : IMAGE_URL + thumbnail}
                style={styles.videoThumbnail}
                borderRadius={12}>
                <LinearGradient
                    colors={['rgba(0,0,0,0)', 'rgba(0,0,0,.4)']}
                    start={{ x: 0, y: 0 }}
                    end={{ x: 0, y: .9 }}
                    style={styles.gradientContainer}>
                    {type === 'yoga' ?
                        <View style={[styles.durationContainer,
                        {
                            marginLeft: 0,
                            marginRight: 'auto'
                        }]}>
                            <Text style={styles.durationText}>{totalTime}</Text>
                        </View>
                        : totalTime &&
                        <>
                            <View style={styles.tagContainer}>
                                <FreeTagIcon />
                            </View>
                            {totalTime &&
                                <View style={styles.durationContainer}>
                                    <Text style={styles.durationText}>{totalTime}</Text>
                                </View>}
                        </>
                    }
                    <View style={styles.bottomSection}>
                        {type !== 'free' && <Text style={styles.thumbnailTitle}>{title}</Text>}
                        {type === 'yoga' ?
                            <StatsIndicator
                                icon1={<BurnOutlineIcon />}
                                stat1="255 Kcals"
                                icon2={<ClockIcon />}
                                stat2="15 Mins"
                            />
                            :
                            type === 'free' ?
                                <View style={styles.bottomSection}>
                                    <Text style={[styles.titleText, { textAlign: 'center', marginTop: 'auto' }]}>{title}</Text>
                                    {subTitle && <Text style={styles.subtitleText}>{subTitle}</Text>}
                                </View>
                                : author && duration &&
                                <View style={styles.rowCenterApart}>
                                    <Text style={styles.authorText}>by {author}</Text>
                                    <View style={[styles.rowCenter, { alignItems: 'flex-start', gap: 2 }]}>
                                        <ClockIcon />
                                        <Text style={styles.timeText}>{duration}</Text>
                                    </View>
                                </View>
                        }
                    </View>
                </LinearGradient>
                <TouchableOpacity style={styles.playIconContainer} onPress={() => {
                    if (videoUrl) {
                        setPlayVideo(true)
                    } else {
                        onpress(id)
                    }}}>
                    <Ionicons
                        size={width * .11}
                        name="play-circle-outline"
                        color={colors.white} />
                </TouchableOpacity>
            </ImageBackground>
        )
    })

    if (type === 'landscape') {
        return (
            <ImageBackground
                source={String(thumbnail)?.includes('jpg') || String(thumbnail)?.includes('png')
                    ? { uri: IMAGE_URL + thumbnail } : IMAGE_URL + thumbnail}
                style={styles.landscapeVideoThumbnail}
                borderRadius={8}>
                <LinearGradient
                    colors={['rgba(0,0,0,0)', 'rgba(0,0,0,.8)']}
                    start={{ x: 0, y: 0 }}
                    end={{ x: 0, y: .9 }}
                    style={[styles.gradientContainer, { padding: 12 }]}>
                    <View style={styles.bottomSection}>
                        <Text style={styles.titleText}>{title}</Text>
                        <StatsIndicator
                            // icon1={<BurnOutlineIcon />}
                            // stat1={calories} - for future
                            icon2={<ClockIcon />}
                            stat2={duration}
                        />
                    </View>
                </LinearGradient>
                <TouchableOpacity style={styles.playIconContainer} onPress={() => onpress(id)}>
                    <Ionicons
                        size={width * .11}
                        name="play-circle-outline"
                        color={colors.white} />
                </TouchableOpacity>
            </ImageBackground>
        )
    } else {
        if (videoUrl) {
            if (playVideo) {
                return (
                    <TouchableOpacity onPress={() => setPlayVideo(false)}>
                        <Video
                            source={{ uri: videoPlayerUrl }}
                            onBuffer={buff => console.log(buff, 'bufff ')}
                            onError={err => console.log(err, '----err')}
                            style={{
                                width: width * 0.73,
                                height: height * 0.37,
                                borderRadius: 12
                            }}
                            resizeMode="cover"
                            loop
                            autoplay
                            paused={!playVideo}
                        />
                    </TouchableOpacity>
                )
            } else {
                return (<VideoThumbnailCard />)
            }
        }
        return (
            <VideoThumbnailCard />
        )
    }
})

const styles = StyleSheet.create({
    authorText: {
        fontSize: 12,
        fontFamily: fonts.PoppinsRegular,
        color: colors.cE8E8E8
    },
    bottomSection: {
        marginTop: 'auto',
    },
    durationContainer: {
        backgroundColor: colors.white,
        padding: 8,
        paddingHorizontal: 16,
        marginLeft: 'auto',
        borderRadius: 47
    },
    durationText: {
        fontSize: 12,
        fontFamily: fonts.PoppinsMedium,
        color: colors.mainBlack
    },
    videoThumbnail: {
        width: width * 0.73,
        height: height * 0.37,
        position: 'relative',
    },
    landscapeVideoThumbnail: {
        width: width * 0.69,
        height: height * 0.205,
    },
    gradientContainer: {
        flex: 1,
        padding: 20,
        borderRadius: 12,
    },
    tagContainer: {
        position: 'absolute',
        left: -8,
        top: 20,
    },
    playIconContainer: {
        width: '100%',
        height: '100%',
        position: 'absolute',
        alignItems: 'center',
        justifyContent: 'center'
    },
    rowCenter: {
        flexDirection: 'row',
        alignItems: 'center',
    },
    rowCenterApart: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between'
    },
    subtitleText: {
        fontSize: 36,
        fontFamily: fonts.ElephantOutline,
        color: colors.white,
        textAlign: 'center'
    },
    timeText: {
        fontSize: 10,
        fontFamily: fonts.PoppinsRegular,
        color: colors.cE8E8E8
    },
    titleText: {
        fontSize: 16,
        fontFamily: fonts.PoppinsSemiBold,
        color: colors.white,
    },
    thumbnailTitle: {
        fontSize: 18,
        fontFamily: fonts.PoppinsSemiBold,
        color: colors.white
    },
})