be-components 2.4.4 → 2.4.6

package/src/SocialComponents/AudioPlayer.tsx

@@ -0,0 +1,285 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { View, Platform, Image, ActivityIndicator, TouchableOpacity } from 'react-native';
+import { SocialComponentApi, SocialPodcastHelpers } from './api';
+import type { PlayerPodcastEpisodeProps, PlayerPodcastProps, PodcastEpisodesProps } from '../types';
+import { Button, Icons, Text } from '../Components';
+import { view_styles } from '../constants/styles';
+import Colors from '../constants/colors';
+import Slider from '../Components/Slider';
+
+type AudioPlayerProps = {
+    podcast_episode_id:string,
+    player_id?:string,
+    onClose:() => void
+}
+const AudioPlayer = ({podcast_episode_id, player_id, onClose}:AudioPlayerProps) => {
+    const [ audio_size, setAudioSize ] = useState({ width:50 });
+    const [ audio_data, setAudioData ] = useState<{
+        audio_loading:boolean,
+        podcast_episode?:PodcastEpisodesProps,
+    }>({
+        audio_loading:false,
+    });
+    const { audio_loading, podcast_episode } = audio_data;
+    const [ time_data, setTimeData ] = useState<{
+        duration: number,
+        loaded:boolean,
+        status: 'paused'|'playing',
+        current_time: number,
+        time_remaining:number,
+        minimum_value: number,
+        maximum_value:number
+    }>({
+        duration:0,
+        loaded:false,
+        status: 'paused',
+        current_time:0,
+        time_remaining:0,
+        minimum_value:0,
+        maximum_value: 0
+    });
+    const { loaded, status, current_time, time_remaining, maximum_value, minimum_value } = time_data;
+
+    const [ player_data, setPlayerData ] = useState<{
+        player_loading:boolean,
+        player_podcast?:PlayerPodcastProps,
+        player_podcast_episode?:PlayerPodcastEpisodeProps
+    }>({
+        player_loading: false
+    });
+    const { player_loading, player_podcast } = player_data;
+
+    const audio_ref:any = useRef(null)
+
+    useEffect(() => {
+        const handleBeforeUnload = async(event:any) => {
+            event.preventDefault();
+            event.returnValue = ''; // This is required for some browsers to show a confirmation dialog
+            // Perform any cleanup or save data here
+            if(audio_ref?.current){
+                await SocialComponentApi.pausePodcastEpisode(podcast_episode_id, audio_ref.current.currentTime);
+            }
+          };
+          
+          if(Platform.OS == 'web'){
+            window.addEventListener('beforeunload', handleBeforeUnload);
+          }
+      
+          return () => {
+            if(Platform.OS == 'web'){
+                window.removeEventListener('beforeunload', handleBeforeUnload);
+            }
+          };
+    },[])
+
+
+    useEffect(() => {
+        SocialComponentApi.setEnvironment();
+        getAudioData(podcast_episode_id);
+    },[podcast_episode_id]);
+
+    const getAudioData = async(pod_episode_id:string) => {
+        setAudioData({ ...audio_data, audio_loading:true })
+        const episode = await SocialComponentApi.getPodcastEpisodeById(pod_episode_id);
+        setAudioData({
+            ...audio_data,
+            audio_loading: false,
+            podcast_episode: episode
+        })
+    }
+
+    const getPlayerData = async(pod_episode_id:string) => {
+        setPlayerData({ ...player_data, player_loading: true });
+        const p_data = await SocialComponentApi.getPlayerPodcastEpisode(pod_episode_id);
+        setPlayerData({ 
+            ...player_data,
+            player_loading: false,
+            player_podcast:p_data?.player_podcast,
+            player_podcast_episode:p_data?.player_podcast_episode
+        });
+        return p_data
+    }
+
+    const startAudio = async() => {
+        if(!audio_ref?.current || !loaded){ return alert('Unable to play audio at this time') }
+        let cur_time = audio_ref.current.currentTime
+        let dur = audio_ref.current.duration
+        audio_ref?.current.play();
+        if(player_id){
+            setPlayerData({ ...player_data, player_loading: true });
+            const p_resp = await SocialComponentApi.startPodcastEpisode(podcast_episode_id);
+            setPlayerData({ ...player_data, player_loading: false, player_podcast: p_resp?.player_podcast, player_podcast_episode: p_resp?.player_podcast_episode });
+        }
+        setTimeData({
+            ...time_data,
+            current_time: cur_time,
+            time_remaining: dur - cur_time,
+            duration: dur,
+            status: 'playing'
+        })
+    }
+
+    const pauseAudio = async() => {
+        if(!audio_ref?.current || !loaded){ return alert('Unable to play audio at this time') }
+        let cur_time = audio_ref.current.currentTime
+        let dur = audio_ref.current.duration
+        audio_ref?.current.pause();
+
+        if(player_id){
+            setPlayerData({ ...player_data, player_loading: true });
+            const p_resp = await SocialComponentApi.pausePodcastEpisode(podcast_episode_id, cur_time);
+            setPlayerData({ ...player_data, player_loading: false, player_podcast, player_podcast_episode: p_resp });
+        }
+        setTimeData({
+            ...time_data,
+            current_time: cur_time,
+            time_remaining: dur - cur_time,
+            duration: dur,
+            status: 'paused'
+        })
+    }
+
+    const handleTimeChange = () => {
+        if(!loaded || player_loading || audio_loading){ return }
+        if(!audio_ref?.current){ return }//Error
+        let cur_time = audio_ref.current.currentTime
+        let dur = audio_ref.current.duration
+        setTimeData({
+            ...time_data,
+            current_time: cur_time,
+            time_remaining: dur - cur_time,
+            duration: dur,
+        })
+    }
+
+    const handleLoad = async() => {
+        if(!audio_ref?.current){ return alert('Unable to play audio') }
+        //First, lets grab the duration of the podcast episode
+        const dur = audio_ref.current.duration
+        let cur_time = 0
+        if(player_id){
+            let p_data = await getPlayerData(podcast_episode_id);
+            if(p_data?.player_podcast_episode && audio_ref?.current){
+                audio_ref.current.currentTime = p_data.player_podcast_episode.pause_timestamp
+                cur_time = p_data.player_podcast_episode.pause_timestamp
+            }
+        }
+
+        setTimeData({
+            ...time_data,
+            current_time: cur_time,
+            minimum_value: 0,
+            maximum_value: dur,
+            time_remaining: dur - cur_time,
+            status: 'playing',
+            loaded:true
+        });
+        audio_ref.current.play()
+    }
+
+    const handleStartTimeChange = () => {
+        if(!audio_ref?.current || !loaded){ return }
+        const cur = audio_ref.current.currentTime
+        let dur = audio_ref.current.duration
+        setTimeData({ 
+            ...time_data,
+            current_time: cur,
+            duration: dur,
+            time_remaining: dur - cur,
+            status: 'paused'
+        })
+        audio_ref.current.pause();
+    }
+
+    const handleManualTimeChange = (val:number) => {
+        if(!audio_ref?.current || !loaded){ return }
+        audio_ref.current.currentTime = val
+        let dur = audio_ref.current.duration
+        setTimeData({
+            ...time_data,
+            current_time: val,
+            duration: dur,
+            status: 'playing',
+            time_remaining: dur - val
+        });
+        audio_ref.current.play();
+    }
+
+
+
+
+    if(Platform.OS != 'web'){ return <></> } //Only built for web at this moment
+
+    return (
+        <View style={{ ...view_styles.section, flex:1 }} onLayout={(ev) => {
+            const { width } = ev.nativeEvent.layout
+            setAudioSize({ width })
+        }}>
+            {!podcast_episode || audio_loading ?
+            <ActivityIndicator size='large' color={Colors.brand.midnight} style={{ alignSelf:'center' }} />
+            :
+            <View style={{ ...view_styles.body_row }}>
+                <View>
+                    <Image
+                        source={{ uri: SocialPodcastHelpers.getEpisodeImage(podcast_episode) }}
+                        style={{ width: audio_size.width * 0.1, height: audio_size.width * 0.1 }}
+                        resizeMode='cover'
+                    />
+                    <View style={{ position:'absolute', top:0, left:0, right:0, bottom:0, justifyContent:'center', alignItems:'center' }}>
+                        {status == 'paused' ?
+                        <TouchableOpacity style={{ ...view_styles.float, backgroundColor:Colors.shades.white, borderRadius:100, padding:10 }} onPress={() => startAudio() }>
+                            <Icons.PlayIcon size={12} color={Colors.brand.electric} />
+                        </TouchableOpacity>
+                        :status == 'playing' ?
+                        <TouchableOpacity style={{ ...view_styles.float, backgroundColor:Colors.shades.white, borderRadius:100, padding:10 }} onPress={() => pauseAudio() }>
+                            <Icons.PauseIcon size={12} color={Colors.utility.error} />
+                        </TouchableOpacity>
+                        :<></>}
+                    </View>
+                </View>
+                <View style={{ flex:1, ...view_styles.body_row }}>
+                    <View style={{ flex:1 }}>
+                        <Text size={14} color={Colors.brand.midnight} weight='bold'>{podcast_episode.title}</Text>
+                        <View style={{ flexDirection:'row', alignItems:'center' }}>
+                            <Text style={{ padding:5, width:50, alignSelf:'center' }} size={12} color={Colors.brand.midnight} weight='regular'>{SocialPodcastHelpers.formatTime(current_time)}</Text>
+                            <Slider
+                                width={audio_size.width * 0.47}
+                                value={current_time}
+                                minimum_value={minimum_value}
+                                maximum_value={maximum_value}
+                                onSlidingStart={() => handleStartTimeChange()}
+                                onSlidingComplete={(val) => handleManualTimeChange(val)}
+                            />
+                            <Text style={{ padding:5, width:50, alignSelf:'center' }} size={12} color={Colors.brand.midnight} weight='regular'>-{SocialPodcastHelpers.formatTime(time_remaining)}</Text>
+                        </View>
+                        {player_loading || audio_loading ?
+                        <View style={{ position:'absolute', top:0, left:0, bottom:0, right:0, justifyContent:'center' }}>
+                            <ActivityIndicator size='small' color={Colors.brand.midnight} />
+                        </View>
+                        :<></>}
+                    </View>
+                    <View style={{ marginLeft:10, flexDirection:'row', alignItems:'center' }}>
+                        <Button
+                            style={{ borderRadius:100, padding:5, backgroundColor:Colors.shades.shade100, ...view_styles.float }}
+                            title='X'
+                            title_size={12}
+                            title_color={Colors.brand.midnight}
+                            onPress={async() => {
+                                await pauseAudio();
+                                onClose();
+                            }}
+                        />
+                        
+                    </View>
+                </View>
+            </View>
+            }
+            {podcast_episode ?
+            <audio onLoad={(ev) => console.log(ev)} ref={audio_ref} onDurationChange={() => handleLoad()} onTimeUpdate={() => handleTimeChange()} src={podcast_episode.url} />
+            :<></>}
+        </View>
+
+    )
+}
+
+export default AudioPlayer

package/src/SocialComponents/CompanyProfile/index.tsx

@@ -338,7 +338,7 @@ const CompanyProfile = ({ company_id, padding_insets, onSelectCompetition, onSel
                             <Text theme='header_2'>{company_members.length}</Text>
                         </View>
                     </View>
-                    <View style={view_styles.section_body}>
+                    <View style={{ ...view_styles.section_body, padding:10 }}>
                         <View style={{ ...view_styles.body_row }}>
                             <View style={{ flex:1 }}>
                                 <FlatList

package/src/SocialComponents/PodcastEpisodeCard.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Image, View, TouchableOpacity } from 'react-native';
 import { view_styles } from "../constants/styles";
-import type { PodcastEpisodesProps, PodcastProps } from '../types';
+import type { PlayerPodcastEpisodeProps, PodcastEpisodesProps, PodcastProps } from '../types';
 import { Icons, Text } from '../Components';
 import { SocialPodcastHelpers } from './api';
 import Colors from '../constants/colors';
@@ -9,13 +9,14 @@ import moment from 'moment-mini';
 
 type PodcastEpisodeCardProps = {
     podcast_episode:PodcastEpisodesProps
+    player_podcast_episode?:PlayerPodcastEpisodeProps,
     podcast?:PodcastProps,
     width:number,
     onShare?:(pe:PodcastEpisodesProps) => void,
     onSelectEpisode:(pe:PodcastEpisodesProps) => void
 }
 
-const PodcastEpisodeCard = ({ width, podcast_episode, onSelectEpisode, onShare }: PodcastEpisodeCardProps ) => {
+const PodcastEpisodeCard = ({ width, podcast_episode, player_podcast_episode, onSelectEpisode, onShare }: PodcastEpisodeCardProps ) => {
 
 
     return (
@@ -31,14 +32,29 @@ const PodcastEpisodeCard = ({ width, podcast_episode, onSelectEpisode, onShare }
                 :<></>}
             </View>
             <View style={{ ...view_styles.section_body, padding:0 }}>
-                <Image
-                    source={{ uri: SocialPodcastHelpers.getEpisodeImage(podcast_episode) }}
-                    style={{ width: width, height: width * 0.666 }}
-                />
+                <View>
+                    <Image
+                        source={{ uri: SocialPodcastHelpers.getEpisodeImage(podcast_episode) }}
+                        style={{ width: width, height: width * 0.666 }}
+                    />
+                    <View style={{ position:'absolute', top:0, left:0, right:0, bottom:0, backgroundColor:Colors.shades.black_faded, justifyContent:'center', alignItems:'center' }}>
+                        <View style={{ ...view_styles.section, borderRadius:22, padding:10 }}>
+                            <View style={{ ...view_styles.body_row }}>
+                                <Icons.PlayIcon size={18} color={Colors.brand.electric} />
+                                {player_podcast_episode ?
+                                <Text size={14} color={Colors.brand.electric} weight='semibold' style={{ marginLeft:10 }}>Resume</Text>
+                                :
+                                <Text size={14} color={Colors.brand.electric} weight='semibold' style={{ marginLeft:10 }}>Play</Text>
+                                }
+                            </View>
+                        </View>
+                    </View>
+                </View>
                 <View style={{ padding:10 }}>
                     <Text theme='header_2'>{podcast_episode.title}</Text>
                 </View>
             </View>
+            
         </TouchableOpacity>
     )
 }

package/src/SocialComponents/PodcastModule/api/index.ts

@@ -1,6 +1,6 @@
 import axios from "axios";
 import { APIOverrides } from "../../../ApiOverrides";
-import type { PodcastEpisodesProps, PodcastProps, PublicPlayerProps } from "../../../types";
+import type { PlayerPodcastEpisodeProps, PodcastEpisodesProps, PodcastProps, PublicPlayerProps } from "../../../types";
 
 let SOCIAL_SVC_API = '';
 let AUTH_SVC_API = '';
@@ -21,13 +21,13 @@ const PodcastApi = {
             return undefined
         }
     },
-    getPodcastEpisodesByPodcast: async(podcast_id:string, offset:number):Promise<PodcastEpisodesProps[]> => {
+    getPodcastEpisodesByPodcast: async(podcast_id:string, offset:number):Promise<{podcast_episodes:PodcastEpisodesProps[], player_podcast_episodes:PlayerPodcastEpisodeProps[]}> => {
         try {
             const resp = await axios.get(`${SOCIAL_SVC_API}/v1/podcasts/episodes/podcast/${podcast_id}?offset=${offset}`);
-            return resp.data.podcast_episodes
+            return resp.data
         } catch (e) {
             console.log(e);
-            return []
+            return { podcast_episodes: [], player_podcast_episodes: [] }
         }
     },
     getPlayersByPlayerIds: async (player_ids?: string[]): Promise<PublicPlayerProps[]> => {

package/src/SocialComponents/PodcastModule/index.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { View, ActivityIndicator, Image, ScrollView, TouchableOpacity, FlatList } from "react-native"
-import type { PodcastEpisodesProps, PodcastProps, PublicPlayerProps } from '../../types';
+import type { PlayerPodcastEpisodeProps, PodcastEpisodesProps, PodcastProps, PublicPlayerProps } from '../../types';
 import { PodcastApi } from './api';
 import Colors from '../../constants/colors';
 import { SocialPodcastHelpers } from '../api';
@@ -27,16 +27,18 @@ const PodcastModule = ({ podcast_id, padding_insets, onSelectEpisode, onBack, on
         episodes_loading:boolean,
         podcast?:PodcastProps,
         podcast_episodes:PodcastEpisodesProps[],
+        player_podcast_episodes:PlayerPodcastEpisodeProps[],
         players:PublicPlayerProps[],
         episodes_offset:number
     }>({
         loading:false,
         episodes_loading: false,
+        player_podcast_episodes:[],
         podcast_episodes:[],
         players:[],
         episodes_offset:0
     });
-    const { loading, episodes_loading, podcast, podcast_episodes, episodes_offset, players } = pod_data;
+    const { loading, episodes_loading, podcast, podcast_episodes, episodes_offset, players, player_podcast_episodes } = pod_data;
 
     useEffect(() => {
         PodcastApi.setEnvironment();
@@ -47,6 +49,7 @@ const PodcastModule = ({ podcast_id, padding_insets, onSelectEpisode, onBack, on
         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,
@@ -54,7 +57,8 @@ const PodcastModule = ({ podcast_id, padding_insets, onSelectEpisode, onBack, on
             episodes_loading: false,
             podcast: pod,
             players:ps,
-            podcast_episodes: pod_ep,
+            podcast_episodes: pod_ep.podcast_episodes,
+            player_podcast_episodes: pod_ep.player_podcast_episodes,
             episodes_offset:offset
         })
     }
@@ -65,7 +69,8 @@ const PodcastModule = ({ podcast_id, padding_insets, onSelectEpisode, onBack, on
         setPodData({
             ...pod_data,
             episodes_loading: false,
-            podcast_episodes: pod_eps,
+            podcast_episodes: pod_eps.podcast_episodes,
+            player_podcast_episodes: pod_eps.player_podcast_episodes,
             episodes_offset: offset
         })
     }
@@ -89,10 +94,12 @@ const PodcastModule = ({ podcast_id, padding_insets, onSelectEpisode, onBack, on
 
     const renderEpsidoes = (data: { item:PodcastEpisodesProps, index:number }) => {
         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>
                 <PodcastEpisodeCard 
                     podcast_episode={data.item}
+                    player_podcast_episode={ppe}
                     width={ep_width}
                     onShare={onShareEpisode}
                     onSelectEpisode={onSelectEpisode}

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, PodcastEpisodesProps, PodcastProps, PostReactionProps, TeamProps, TournamentProps } from "../../types";
+import type { AthleteProps, EventProps, LeagueProps, MatchProps, OrderProps, PlayerFollowerProps, PlayerPodcastEpisodeProps, PlayerPodcastProps, PodcastEpisodesProps, PodcastProps, PostReactionProps, TeamProps, TournamentProps } from "../../types";
 import Colors from "../../constants/colors";
 import moment from "moment-mini";
 
@@ -105,6 +105,51 @@ const SocialComponentApi = {
             return undefined
         }
     },
+    getPodcastById: async(podcast_id:string):Promise<PodcastProps | undefined> => {
+        try {
+            const resp = await axios.get(`${SOCIAL_SVC_API}/v1/podcasts/podcast/${podcast_id}`);
+            return resp.data.podcast
+        } catch (e) {
+            return undefined
+        }
+    },
+    getPodcastEpisodeById: async(podcast_episode_id:string):Promise<PodcastEpisodesProps | undefined> => {
+        try {
+            const resp = await axios.get(`${SOCIAL_SVC_API}/v1/podcasts/episodes/episode/${podcast_episode_id}`);
+            return resp.data.podcast_episode
+        } catch (e) {
+            console.log(e)
+            return undefined
+        }
+    },
+    getPlayerPodcastEpisode: async(podcast_episode_id:string):Promise<undefined | { player_podcast?:PlayerPodcastProps, player_podcast_episode?:PlayerPodcastEpisodeProps }> => {
+        try {
+            const resp = await axios.get(`${SOCIAL_SVC_API}/v1/podcasts/episode/player/${podcast_episode_id}`);
+            return resp.data
+        } catch (e) {
+            console.log(e)
+            return undefined
+        }
+    },
+    startPodcastEpisode: async(podcast_episode_id:string):Promise<undefined | { player_podcast:PlayerPodcastProps, player_podcast_episode:PlayerPodcastEpisodeProps }> => {
+        try {
+            const resp = await axios.post(`${SOCIAL_SVC_API}/v1/podcasts/episode/start`, { podcast_episode_id });
+            console.log(resp.data)
+            return resp.data
+        } catch (e) {
+            console.log(e)
+            return undefined
+        }
+    },
+    pausePodcastEpisode:async(podcast_episode_id:string, pause_timestamp:number):Promise<undefined | PlayerPodcastEpisodeProps> => {
+        try {
+            const resp = await axios.post(`${SOCIAL_SVC_API}/v1/podcasts/episode/pause`, { podcast_episode_id, pause_timestamp });
+            return resp.data.player_podcast_episode
+        } catch (e) {
+            console.log(e)
+            return undefined
+        }
+    }
 }
 
 
@@ -194,10 +239,20 @@ const SocialPodcastHelpers = {
         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 => {
+    getEpisodeImage: (podcast_episode?:PodcastEpisodesProps):string => {
+        if(!podcast_episode){ return 'https://res.cloudinary.com/hoabts6mc/image/upload/v1728494579/default_pod_nji5sk.webp' }
         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'
+    },
+    formatTime: (time:number) => {
+        const minutes = Math.floor(time / 60);
+        const seconds = Math.floor(time - minutes * 60);
+        const final_time = SocialPodcastHelpers.str_pad_left(minutes, '0', 2) + ':' + SocialPodcastHelpers.str_pad_left(seconds, '0', 2);
+        return final_time
+    },
+    str_pad_left: (string:number, pad:string, length:number) => {
+        return (new Array(length + 1).join(pad) + string).slice(-length);
     }
 }

package/src/SocialComponents/index.tsx

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

package/src/types.d.ts

@@ -150,6 +150,33 @@ export interface CompanyProps {
     last_update_datetime: any
 }
 
+export interface PlayerPodcastProps {
+    player_podcast_id:string,
+    player_id:string,
+    podcast_id:string,
+    subscribed:boolean,
+    last_visit_datetime:any,
+    status:'suggested'|'visited'
+    number_of_visits?:number,
+    last_visit_episode?:string,
+    create_datetime:any,
+    last_update_datetime:any
+}
+
+export interface PlayerPodcastEpisodeProps {
+    player_podcast_episode_id:string,
+    player_id:string,
+    podcast_episode_id:string,
+    last_visit_datetime:any,
+    number_of_visits: number,
+    pause_timestamp: number,
+    completed?:boolean,
+    reaction?:string,
+    status: 'inprogress'|'inactive'|'complete',
+    create_datetime:any,
+    last_update_datetime:any
+}
+
 export interface LocationProps { 
     location_id:string, 
     value:string,