be-components 2.3.6 → 2.4.0

package/src/SocialComponents/PodcastModule/index.tsx

@@ -0,0 +1,161 @@
+import React, { useEffect, useState } from 'react';
+import { View, ActivityIndicator, Image, ScrollView, TouchableOpacity } from "react-native"
+import type { 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, Text } from '../../Components';
+import PodcastEpisodeCard from '../PodcastEpisodeCard';
+import moment from 'moment-mini';
+
+type PodcastModuleProps = {
+    podcast_id:string,
+    padding_insets?:{ top:number, bottom:number },
+    onBack?:() => void,
+    onSelectEpisode:(pe:PodcastEpisodesProps) => void
+}
+
+const PodcastModule = ({ podcast_id, padding_insets, onSelectEpisode, onBack }:PodcastModuleProps) => {
+    const [ module_size, setModuleSize ] = useState({ height:700, width:330 });
+    const [ pod_data, setPodData ] = useState<{
+        loading:boolean,
+        episodes_loading:boolean,
+        podcast?:PodcastProps,
+        podcast_episodes:PodcastEpisodesProps[],
+        players:PublicPlayerProps[],
+        episodes_offset:number
+    }>({
+        loading:false,
+        episodes_loading: false,
+        podcast_episodes:[],
+        players:[],
+        episodes_offset:0
+    });
+    const { loading, episodes_loading, podcast, podcast_episodes, episodes_offset } = pod_data;
+
+    useEffect(() => {
+        PodcastApi.setEnvironment();
+        getPodDataFromServer(podcast_id, 0);
+    },[podcast_id]);
+
+    const getPodDataFromServer = async(id:string, offset:number) => {
+        setPodData({ ...pod_data, loading:true });
+        const pod = await PodcastApi.getPodcastById(id);
+        const pod_ep = await PodcastApi.getPodcastEpisodesByPodcast(id, offset);
+        const ps = await PodcastApi.getPlayersByPlayerIds(pod?.player_ids);
+        setPodData({
+            ...pod_data,
+            loading: false,
+            episodes_loading: false,
+            podcast: pod,
+            players:ps,
+            podcast_episodes: pod_ep,
+            episodes_offset:offset
+        })
+    }
+
+    const getEpisdoesFromServer = async(id:string, offset:number) => {
+        setPodData({ ...pod_data, episodes_loading: true });
+        const pod_eps = await PodcastApi.getPodcastEpisodesByPodcast(id, offset);
+        setPodData({
+            ...pod_data,
+            episodes_loading: false,
+            podcast_episodes: pod_eps,
+            episodes_offset: offset
+        })
+    }
+
+    const renderEpsidoes = (data: { item:PodcastEpisodesProps, index:number }) => {
+        const ep_width = (module_size.width - 60) / 2
+        return (
+            <View>
+                <PodcastEpisodeCard 
+                    podcast_episode={data.item}
+                    width={ep_width}
+                    onSelectEpisode={onSelectEpisode}
+                />
+            </View>
+        )
+    }
+
+    if(!podcast || loading){
+        return (
+            <View style={{ flex:1 }}>
+                <ActivityIndicator style={{ padding:20, alignSelf: 'center' }} size='large' color={Colors.brand.midnight} />
+            </View>
+        )
+    }
+
+    return (
+        <View style={{ flex:1 }}>
+            <View style={{ flex:1, backgroundColor:Colors.shades.black_faded }} onLayout={(ev) => {
+            const { height, width } = ev.nativeEvent.layout
+            setModuleSize({ width, height });
+        }}>
+                <View style={{ position:'absolute', top:0, left:0, right:0 }} nativeID='profile_image'>
+                    <Image
+                        source={{ uri: SocialPodcastHelpers.getPodcastImage(podcast) }}
+                        style={{ width: module_size.width, height: module_size.width, borderBottomRightRadius:50, borderBottomLeftRadius:50 }}
+                        resizeMode='cover'
+                    />
+                    
+                </View>
+                <ScrollView style={{ flex:1 }}>
+                    <View style={{ ...view_styles.section, marginTop:module_size.width - 150 }}>
+                        <View style={{ ...view_styles.section_header }}>
+                            <View style={{ flex:1 }}>
+                                <Text theme='header'>{podcast.title}</Text>
+                                <Text style={{ marginTop:4 }} theme='body_2'>{podcast.description_override ?? podcast.description}</Text>
+                            </View>
+                        </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>
+                            </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>
+                            {episodes_loading ?
+                            <ActivityIndicator style={{ padding:20, alignSelf:'center' }} size='large' color={Colors.brand.midnight} />
+                            :<></>}
+                            <View style={{ flexDirection:'row', flexWrap: 'wrap' }}>
+                                {podcast_episodes.sort((a,b) => moment(a.publish_date).unix() - moment(b.publish_date).unix()).map((e,i) => {
+                                    return renderEpsidoes({ item:e, index:i })
+                                })}
+                            </View>
+                        </View>
+                    </View>
+                </ScrollView>
+                {onBack ?
+                <TouchableOpacity 
+                    style={{ position:'absolute', top:padding_insets?.top ?? 0, left:0, ...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>
+        </View>
+    )
+}
+
+export default PodcastModule

package/src/SocialComponents/api/index.ts

@@ -1,6 +1,6 @@
 import axios from "axios";
 import { APIOverrides } from "../../ApiOverrides";
-import type { AthleteProps, EventProps, LeagueProps, MatchProps, OrderProps, PlayerFollowerProps, PostReactionProps, TeamProps, TournamentProps } from "../../types";
+import type { AthleteProps, EventProps, LeagueProps, MatchProps, OrderProps, PlayerFollowerProps, PodcastEpisodesProps, PodcastProps, PostReactionProps, TeamProps, TournamentProps } from "../../types";
 import Colors from "../../constants/colors";
 import moment from "moment-mini";
 
@@ -8,7 +8,7 @@ let SOCIAL_SVC_API = '';
 let EVENT_SVC_API = '';
 let MK_SVC_API = '';
 
-export { SocialComponentApi, SocialOrderHelpers }
+export { SocialComponentApi, SocialOrderHelpers, SocialPodcastHelpers }
 
 const SocialComponentApi = {
     setEnvironment: () => {
@@ -184,5 +184,20 @@ const SocialOrderHelpers = {
         if(decimals){ new_odds = odds.toFixed(decimals) }
         if(odds < 0){ return `${new_odds}` }
         return `+${new_odds}`
-    },
+    }
+}
+
+const SocialPodcastHelpers = {
+    getPodcastImage: (podcast:PodcastProps):string => {
+        let image_source = podcast.image_override?.url
+        if(!image_source){ image_source = podcast.image?.url }
+        if(image_source && image_source !== ''){ return image_source }
+        return 'https://res.cloudinary.com/hoabts6mc/image/upload/v1728494579/default_pod_nji5sk.webp'
+    },
+    getEpisodeImage: (podcast_episode:PodcastEpisodesProps):string => {
+        let image_source = podcast_episode.image_override?.url
+        if(!image_source){ image_source = podcast_episode.image?.url }
+        if(image_source && image_source != ''){ return image_source }
+        return 'https://res.cloudinary.com/hoabts6mc/image/upload/v1728494579/default_pod_nji5sk.webp'
+    }
 }

package/src/SocialComponents/index.tsx

@@ -1,9 +1,12 @@
 import PlayerCard from "./PlayerCard";
 import PlayerList from "./PlayerList";
 import PlayerProfile from "./PlayerProfile";
-
+import CompanyProfile from './CompanyProfile';
+import PodcastModule from './PodcastModule';
 export {
     PlayerCard,
     PlayerList,
-    PlayerProfile
+    PlayerProfile,
+    CompanyProfile,
+    PodcastModule
 }

package/src/types.d.ts

@@ -24,6 +24,105 @@ export interface PublicPlayerProps {
     vouched_status:'unverified' | 'failed' | 'verified',
 }
 
+
+export interface ArticleFeedProps {
+    article_feed_id: string,
+    company_id?:string,
+    claim_status:string,
+    player_ids: string[],
+    status:string,
+    feed_image: any,
+    feed_type: 'api'|'rss',
+    feed_name: string,
+    is_live?:boolean,
+    live_stream_url?:string,
+    live_stream_type?:string,
+    rss_url?: string,
+    api_name?:string,
+    create_datetime:any,
+    last_update_datetime:any
+}
+
+
+export interface ArticleProps { 
+    article_id:string,
+    company_id:string,
+    article_feed_id:string,
+    url:string, 
+    article_type:string,
+    source?:string,
+    video_type?:string,
+    author?:string,
+    categories: string[]
+    content_snippet?:string, 
+    image?: { 
+        url:string, 
+        width:string, 
+        height:string, 
+        type:string 
+    }, 
+    guid?:string, 
+    title:string, 
+    publish_datetime:any,
+    status: string,
+    create_datetime:any,
+    last_update_datetime:any
+}
+
+export interface PodcastProps {
+    podcast_id: string,
+    company_id?: string,
+    lead_email?:string,
+    lead_contact_name?:string,
+    secondary_contact?:string,
+    last_episode_pull?:any,
+    title: string,
+    description: string,
+    claim_status?:string,
+    global_rank?:number,
+    publisher_original?:string,
+    publisher_highlighted?:string,
+    website?:string,
+    listen_notes_score?:number,
+    listen_notes_id?:string,
+    image_override?:any
+    description_override?:string,
+    suggested_text?:string,
+    key_words?:string[];
+    player_ids?: string[];
+    image?: any,
+    rss_url?: string,
+    status: string,
+    create_datetime:any,
+    last_update_datetime:any
+}
+
+export interface PodcastEpisodesProps { 
+    podcast_episode_id:string,
+    podcast_id:string,
+    url:string, 
+    length:string | number, 
+    type: string, 
+    author?:string, 
+    description?:string, 
+    image?: {
+        url:string,
+        height?:number,
+        width?:number
+    }, 
+    image_override?:any,
+    description_override?:string,
+    explicit?:boolean, 
+    episode?:string, 
+    guid?:string, 
+    title:string, 
+    external_link?:string, 
+    publish_date:any,
+    status: 'visible' | 'hidden',
+    create_datetime:any,
+    last_update_datetime: any,
+}
+
 export interface CompanyProps {
     company_id:string,
     company_name: string,