be-components 4.3.3 → 4.3.4

package/src/SocialComponents/PodcastModule/index.tsx

@@ -1,15 +1,16 @@
 import React, { useEffect, useState } from 'react';
-import { View, ActivityIndicator, Image, ScrollView, TouchableOpacity, FlatList } from "react-native"
+import { ActivityIndicator, Image, FlatList } from "react-native"
 import type { MyPlayerProps, PlayerPodcastEpisodeProps, PodcastEpisodesProps, PodcastProps, PublicPlayerProps } from '../../types';
 import { PodcastApi } from './api';
-import Colors from '../../constants/colors';
 import { SocialPodcastHelpers } from '../api';
-import { view_styles } from '../../constants/styles';
-import { Button, Icons, Spring, Text } from '../../Components';
+import { Icons } from '../../Components';
 import PodcastEpisodeCard from '../PodcastEpisodeCard';
 import moment from 'moment-mini';
 import PlayerCard from '../PlayerCard';
 import ClaimPodcastModal from './components/ClaimPodcastModal';
+import { Button, Text, View } from '../../Components/Themed';
+import { useColors } from '../../constants/useColors';
+import Pagination from '../../Components/Pagination';
 
 type PodcastModuleProps = {
     player_id?:string,
@@ -21,8 +22,9 @@ type PodcastModuleProps = {
     onSelectEpisode:(pe:PodcastEpisodesProps) => void
     onSelectPlayer?:(p:PublicPlayerProps) => void
 }
-
+const sections = ['header', 'players', 'episodes'];
 const PodcastModule = ({ podcast_id, player_id, padding_insets, onSelectEpisode, onBack, onShareEpisode, onSharePodcast, onSelectPlayer }:PodcastModuleProps) => {
+    const Colors = useColors();
     const [ module_size, setModuleSize ] = useState({ height:700, width:330 });
     const [ show_claim, setShowClaim ] = useState(false);
     const [ pod_data, setPodData ] = useState<{
@@ -96,7 +98,7 @@ const PodcastModule = ({ podcast_id, player_id, padding_insets, onSelectEpisode,
 
     const renderPlayers = (data:{item:PublicPlayerProps, index:number}) => {
         return (
-            <View style={{ padding:4 }}>
+            <View float style={{ padding:4 }}>
                 <PlayerCard
                     player={data.item}
                     width={135}
@@ -114,7 +116,7 @@ const PodcastModule = ({ podcast_id, player_id, padding_insets, onSelectEpisode,
         const ep_width = (module_size.width - 60) / 2
         const ppe = player_podcast_episodes.find(pp => pp.podcast_episode_id == data.item.podcast_episode_id);
         return (
-            <View>
+            <View float style={{ margin:7 }}>
                 <PodcastEpisodeCard 
                     podcast_episode={data.item}
                     player_podcast_episode={ppe}
@@ -126,96 +128,112 @@ const PodcastModule = ({ podcast_id, player_id, padding_insets, onSelectEpisode,
         )
     }
 
-    if(!podcast || loading){
-        return (
-            <View style={{ flex:1 }}>
-                <ActivityIndicator style={{ padding:20, alignSelf: 'center' }} size='large' color={Colors.brand.midnight} />
-            </View>
-        )
-    }
 
     let height = module_size.height * 0.5
     let width = module_size.width
 
-    let description = `${podcast.description.slice(0,200)}...`
-    if(podcast.description_override){ description = `${podcast.description.slice(0,200)}...` }
-
-    return (
-        <View style={{ flex:1 }}>
-            <View style={{ flex:1, backgroundColor:Colors.shades.white }} onLayout={(ev) => {
-            const { height, width } = ev.nativeEvent.layout
-            setModuleSize({ width, height });
-        }}>
-                <ScrollView style={{ flex:1 }}>
+    const renderSections = (data:{ item:string, index:number }) => {
+        switch(data.item){
+            case 'header':
+                if(!podcast){ return <></> }
+                let description = `${podcast.description.slice(0,200)}...`
+                if(podcast.description_override){ description = `${podcast.description.slice(0,200)}...` }
+                
+                return (
                     <View nativeID='podcast_header'>
                         <Image
                             source={{ uri: SocialPodcastHelpers.getPodcastImage(podcast) }}
                             style={{ width, height }}
                             resizeMode='cover'
                         />
-                        <View style={{ padding:20,  position:'absolute', bottom:0, left:0, right:0, ...style.blur }}>
-                            <TouchableOpacity 
+                        <View type='blur' style={{ padding:20,  position:'absolute', bottom:0, left:0, right:0 }}>
+                            <Button 
+                                type='success'
                                 onPress={() => {
                                     let episode = podcast_episodes.sort((a,b) => moment(b.publish_date).unix() - moment(a.publish_date).unix())[0]
                                     if(!episode){ return alert('Unable to process') }
                                     onSelectEpisode(episode)
                                 }}
                                 disabled={podcast_episodes.length == 0 ? true : false}
-                                style={{ padding:10, borderRadius:8, width:module_size.width*0.7, flexDirection:'row', alignItems:'center', justifyContent:'center', alignSelf:'center', backgroundColor:Colors.shades.white, ...view_styles.float }}>
-                                <Icons.PlayIcon size={20} color={Colors.brand.electric}/>
-                                <Text style={{ marginLeft:15 }} weight='bold' color={Colors.brand.electric}>Play Episode</Text>
-                            </TouchableOpacity>
-                            {!podcast.claim_status ?
-                            <TouchableOpacity 
-                                style={{ padding:10, marginTop:5, borderRadius:8, width:module_size.width*0.7, flexDirection:'row', alignItems:'center', justifyContent:'center', alignSelf:'center', backgroundColor:Colors.utility.success, ...view_styles.float }}
+                                style={{ padding:10, borderRadius:8, width:module_size.width*0.7, flexDirection:'row', alignItems:'center', justifyContent:'center', alignSelf:'center' }}>
+                                <Icons.PlayIcon size={20} color={Colors.text.action}/>
+                                <Text style={{ marginLeft:15 }} weight='bold' color={Colors.text.h1}>Play Episode</Text>
+                            </Button>
+                            {podcast.claim_status ?
+                            <Button 
+                                type='success'
+                                style={{ padding:10, marginTop:5, borderRadius:8, width:module_size.width*0.7, flexDirection:'row', alignItems:'center', justifyContent:'center', alignSelf:'center' }}
                                 onPress={() => setShowClaim(true)}>
-                                <Icons.HeadphoneIcon size={20} color={Colors.shades.white}/>
-                                <Text style={{ marginLeft:15 }} weight='bold' color={Colors.shades.white}>Claim This Podcast!</Text>
-                            </TouchableOpacity>
+                                <Icons.HeadphoneIcon size={20} color={Colors.text.h1}/>
+                                <Text style={{ marginLeft:15 }} weight='bold' color={Colors.text.h1}>Claim This Podcast!</Text>
+                            </Button>
                             :podcast.claim_status == 'requested' && player?.role != 'admin' ?
                             <View 
-                                style={{ padding:10, marginTop:5, borderRadius:8, width:module_size.width*0.7, flexDirection:'row', alignItems:'center', justifyContent:'center', alignSelf:'center', backgroundColor:Colors.brand.midnight, ...view_styles.float }}>
-                                <Icons.HeadphoneIcon size={20} color={Colors.shades.white}/>
-                                <Text style={{ marginLeft:15 }} weight='bold' color={Colors.shades.white}>Claim Requested!</Text>
+                                style={{ padding:10, marginTop:5, borderRadius:8, width:module_size.width*0.7, flexDirection:'row', alignItems:'center', justifyContent:'center', alignSelf:'center' }}>
+                                <Icons.HeadphoneIcon size={20} color={Colors.text.h1}/>
+                                <Text style={{ marginLeft:15 }} weight='bold' color={Colors.text.h1}>Claim Requested!</Text>
                             </View>
                             :podcast.claim_status == 'requested' && player?.role == 'admin' ?
-                            <TouchableOpacity 
-                                style={{ padding:10, marginTop:5, borderRadius:8, width:module_size.width*0.7, flexDirection:'row', alignItems:'center', justifyContent:'center', alignSelf:'center', backgroundColor:Colors.utility.success, ...view_styles.float }}
+                            <Button 
+                                type='success'
+                                style={{ padding:10, marginTop:5, borderRadius:8, width:module_size.width*0.7, flexDirection:'row', alignItems:'center', justifyContent:'center', alignSelf:'center' }}
                                 onPress={() => approveClaim()}>
-                                <Icons.HeadphoneIcon size={20} color={Colors.shades.white}/>
-                                <Text style={{ marginLeft:15 }} weight='bold' color={Colors.shades.white}>Approve Claim Request!</Text>
-                            </TouchableOpacity>
+                                <Icons.HeadphoneIcon size={20} color={Colors.text.h1}/>
+                                <Text style={{ marginLeft:15 }} weight='bold' color={Colors.text.h1}>Approve Claim Request!</Text>
+                            </Button>
                             :<></>}
-                            <View style={{ marginTop:10 }}>
-                                <Text size={24} weight='bold' color={Colors.shades.white}>{podcast.title}</Text>
-                                <Text style={{ marginTop:4 }} color={Colors.shades.white} weight='semibold'>{description}</Text>
+                            <View transparent style={{ marginTop:10 }}>
+                                <Text size={24} weight='bold' color={Colors.text.h1}>{podcast.title}</Text>
+                                <Text style={{ marginTop:4 }} color={Colors.text.h1} weight='semibold'>{description}</Text>
                             </View>
                             {podcast.claim_status == 'claimed' ?
-                            <View style={{ position:'absolute', top:20, left:5, height:40, width:40, borderRadius:100, justifyContent:'center', alignItems:'center' }}>
-                                <Icons.CheckCirlceIcon size={30} color={Colors.utility.success} />
+                            <View transparent style={{ position:'absolute', top:20, left:5, height:40, width:40, borderRadius:100, justifyContent:'center', alignItems:'center' }}>
+                                <Icons.CheckCirlceIcon size={30} color={Colors.text.success} />
                             </View>
                             :<></>}
                             {podcast.claim_status == 'claimed' && claimed_player ?
-                            <TouchableOpacity style={{ position:'absolute', top:20, right:5, justifyContent:'center', alignItems:'center' }}
+                            <Button transparent float style={{ position:'absolute', padding:0, top:20, right:5, borderRadius:100, justifyContent:'center', alignItems:'center' }}
                             onPress={() => onSelectPlayer ? onSelectPlayer(claimed_player) : console.log('')}>
                                   <Image
                                     source={{ uri: claimed_player.profile_pic && claimed_player.profile_pic != '' ? claimed_player.profile_pic:'https://res.cloudinary.com/hoabts6mc/image/upload/v1722453927/default_man_n96ofq.webp' }}
                                     style={{ height:40, width:40, borderRadius:100 }}
                                     resizeMode='cover'
                                 />
-                            </TouchableOpacity>
+                            </Button>
+                            :<></>}
+                        </View>
+                        <View transparent style={{ position:'absolute', top:padding_insets?.top ?? 0, left:0, right:0, flexDirection:'row', alignItems:'center', padding:10 }}>
+                            {onBack ?
+                            <Button 
+                                float
+                                style={{  height:50, width:50, borderRadius:100, justifyContent:'center', alignItems:'center' }}
+                                onPress={() => onBack()}>
+                                <Icons.ChevronIcon direction='left' color={Colors.text.action} size={14} />
+                            </Button> 
+                            :<></>}
+                            <View style={{ flex:1 }} />
+                            {onSharePodcast ?
+                            <Button 
+                                float
+                                style={{ height:50, width:50, borderRadius:100, justifyContent:'center', alignItems:'center' }}
+                                onPress={() => onSharePodcast(podcast)}>
+                                <Icons.ShareIcon color={Colors.text.action} size={14} />
+                            </Button> 
                             :<></>}
                         </View>
                     </View>
-                    {players.length > 0 ?
-                    <View style={{ ...view_styles.section }}>
-                        <View style={{ ...view_styles.section_header }}>
-                            <View style={{ flex:1 }}>
-                                <Text theme='header'>Podcasters</Text>
-                                <Text style={{ marginTop:3 }} theme='body_2'>Below are the players that put this podcast on! Check out their profiles</Text>
+                )
+            case 'players':
+                if(players.length == 0){ return <></> }
+                return (
+                    <View>
+                        <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10 }}>
+                            <View transparent style={{ flex:1 }}>
+                                <Text theme='h1'>Podcasters</Text>
+                                <Text style={{ marginTop:3 }} theme='description'>Below are the players that put this podcast on! Check out their profiles</Text>
                             </View>
                         </View>
-                        <View style={{ ...view_styles.section_body, padding:10 }}>
+                        <View style={{ padding:10 }}>
                             <FlatList
                                 key='podcastors'
                                 data={players}
@@ -226,94 +244,78 @@ const PodcastModule = ({ podcast_id, player_id, padding_insets, onSelectEpisode,
                             />
                         </View>
                     </View>
-                    :<></>}
-                    <View style={{ ...view_styles.section }}>
-                        <View style={{ ...view_styles.section_header }}>
-                            <View style={{ flex:1 }}>
-                                <Text theme='header'>Episodes</Text>
-                                <Text style={{ marginTop:3 }} theme='body_2'>Select an episode below to listed to it!</Text>
+                )
+            case 'episodes':
+                return (
+                    <View>
+                        <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10 }}>
+                            <View transparent style={{ flex:1 }}>
+                                <Text theme='h1'>Episodes</Text>
+                                <Text style={{ marginTop:3 }} theme='description'>Select an episode below to listed to it!</Text>
                             </View>
                         </View>
-                        <View style={{ ...view_styles.section_body, padding:0 }}>
-                            <View style={{ ...view_styles.body_row }}>
-                                {episodes_offset > 0 ?
-                                <Button
-                                    title='PREV'
-                                    title_color={Colors.brand.electric}
-                                    backgroundColor='transparent'
-                                    onPress={() => getEpisdoesFromServer(podcast_id, episodes_offset - 1)}
-                                />
-                                :<View/>}
-                                <View style={{ flex:1 }} />
-                                <Button
-                                    title='NEXT'
-                                    title_color={Colors.brand.electric}
-                                    backgroundColor='transparent'
-                                    onPress={() => getEpisdoesFromServer(podcast_id, episodes_offset + 1)}
-                                />
-                            </View>
+                        <View transparent>
+                            <Pagination
+                                offset={episodes_offset}
+                                onNext={() => getEpisdoesFromServer(podcast_id, episodes_offset + 1)}
+                                onPrevious={() => getEpisdoesFromServer(podcast_id, episodes_offset - 1)}
+                            />
                             {episodes_loading ?
-                            <ActivityIndicator style={{ padding:20, alignSelf:'center' }} size='large' color={Colors.brand.midnight} />
+                            <ActivityIndicator style={{ padding:20, alignSelf:'center' }} size='large' color={Colors.text.h1} />
                             :<></>}
-                            <View style={{ flexDirection:'row', flexWrap: 'wrap' }}>
+                            <View transparent style={{ flexDirection:'row', flexWrap: 'wrap', justifyContent:'center' }}>
                                 {podcast_episodes.sort((a,b) => moment(b.publish_date).unix() - moment(a.publish_date).unix()).map((e,i) => {
                                     return renderEpsidoes({ item:e, index:i })
                                 })}
                             </View>
                         </View>
                     </View>
-                </ScrollView>
-                <View style={{ position:'absolute', top:padding_insets?.top ?? 0, left:0, right:0, flexDirection:'row', alignItems:'center' }}>
-                    {onBack ?
-                    <TouchableOpacity 
-                        style={{ ...view_styles.section, backgroundColor:Colors.shades.shade100, height:50, width:50, borderRadius:100, justifyContent:'center', alignItems:'center' }}
-                        onPress={() => onBack()}>
-                        <Icons.ChevronIcon direction='left' color={Colors.brand.midnight} size={14} />
-                    </TouchableOpacity> 
-                    :<></>}
-                    <View style={{ flex:1 }} />
-                    {onSharePodcast ?
-                    <TouchableOpacity 
-                        style={{ ...view_styles.section, backgroundColor:Colors.shades.shade100, height:50, width:50, borderRadius:100, justifyContent:'center', alignItems:'center' }}
-                        onPress={() => onSharePodcast(podcast)}>
-                        <Icons.ShareIcon color={Colors.brand.electric} size={14} />
-                    </TouchableOpacity> 
-                    :<></>}
-                </View>
-                
-            </View>
-            {show_claim ?
-            <View style={{ position:'absolute', flex:1, backgroundColor:Colors.shades.black_faded, top:0, left:0, right:0, bottom:0, justifyContent:'flex-end' }}>
-                <Spring
-                    slide='vertical'
-                    to={0}
-                    from={500}
-                    
-                >
-                <ClaimPodcastModal
-                    podcast={podcast}
-                    width={module_size.width - 20}
-                    onClose={() => setShowClaim(false)}
-                    onPodcastUpdate={(pod) => {
-                        setShowClaim(false);
-                        setPodData({
-                            ...pod_data,
-                            podcast: pod
-                        })
-                    }}
+                )
+            default: return <></>
+        }
+    }
+
+
+    return (
+        <View style={{ flex:1 }}>
+            <View style={{ flex:1 }} onLayout={(ev) => {
+            const { height, width } = ev.nativeEvent.layout
+            setModuleSize({ width, height });
+        }}>
+                {loading ?
+                <ActivityIndicator style={{ padding:20, alignSelf:'center' }} size='large' color={Colors.text.h1} />
+                :<></>}
+                <FlatList 
+                    data={sections}
+                    refreshing={pod_data.loading}
+                    onRefresh={() => getPodDataFromServer(podcast_id, 0)}
+                    key={'podcast_sections'}
+                    keyExtractor={(item) => item}
+                    renderItem={renderSections}
                 />
-            </Spring>
             </View>
+            {show_claim && podcast ?
+            <View type='blur' style={{ position:'absolute', top:0, right:0, left:0, bottom:0, justifyContent:'center', alignItems:'center', padding:20 }}>
+                <View style={{ maxWidth: 500 }}>
+                    <ClaimPodcastModal
+                        podcast={podcast}
+                        width={module_size.width - 20}
+                        onClose={() => setShowClaim(false)}
+                        onPodcastUpdate={(pod) => {
+                            setShowClaim(false);
+                            setPodData({
+                                ...pod_data,
+                                podcast: pod
+                            })
+                        }}
+                    />
+                </View>
+                </View>
             :<></>}
+            
         </View>
     )
 }
 
 export default PodcastModule
 
-const style:any = {
-    blur: {
-        backdropFilter: 'blur(75px)',
-        backgroundColor:Colors.shades.black_faded_heavy
-    }
-}