be-components 4.3.3 → 4.3.4

package/src/SocialComponents/AudioPlayer.tsx

@@ -1,77 +1,44 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { View, Platform, Image, ActivityIndicator, TouchableOpacity } from 'react-native';
+import React, { useEffect, useState } from 'react';
+import { Image, ActivityIndicator } 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 { Icons } from '../Components';
 import Slider from '../Components/Slider';
+import { Audio, type AVPlaybackStatusSuccess } from 'expo-av';
+import { Button, Text, View } from '../Components/Themed';
+import { useColors } from '../constants/useColors';
+
 
 type AudioPlayerProps = {
     podcast_episode_id:string,
     player_id?:string,
+    onSelectEpisode?:(data:{ podcast_episode:PodcastEpisodesProps, player_podcast?:PlayerPodcastProps, player_podcast_episode?:PlayerPodcastEpisodeProps }) => void,
+    style?:any,
     onClose:() => void
 }
-const AudioPlayer = ({podcast_episode_id, player_id, onClose}:AudioPlayerProps) => {
-
+const AudioPlayer = ({podcast_episode_id, player_id, style, onClose, onSelectEpisode}:AudioPlayerProps) => {
+    const Colors = useColors();    
     const [ audio_size, setAudioSize ] = useState({ width:50 });
     const [ audio_data, setAudioData ] = useState<{
         audio_loading:boolean,
         podcast_episode?:PodcastEpisodesProps,
+        audio_player?:Audio.Sound,
     }>({
         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<{
+    const [ audio_status, setAudioStatus ] = useState<AVPlaybackStatusSuccess|undefined>(undefined)
+    const curr_time = (audio_status?.positionMillis ?? 0) / 1000
+    const dur_time = (audio_status?.durationMillis && !isNaN(audio_status.durationMillis) ? audio_status.durationMillis : 1000000) / 1000
+    const rem_time = dur_time - curr_time < 0 ? 0 : dur_time - curr_time
+    const { audio_loading, podcast_episode, audio_player } = audio_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);
-            }
-          };
-    },[])
+    const { player_loading, player_podcast, player_podcast_episode } = player_data;
 
 
     useEffect(() => {
@@ -82,10 +49,24 @@ const AudioPlayer = ({podcast_episode_id, player_id, onClose}:AudioPlayerProps)
     const getAudioData = async(pod_episode_id:string) => {
         setAudioData({ ...audio_data, audio_loading:true })
         const episode = await SocialComponentApi.getPodcastEpisodeById(pod_episode_id);
+        const { sound, status } = await Audio.Sound.createAsync({ uri: episode?.url ?? ''})
+        setAudioStatus(status as AVPlaybackStatusSuccess)
+        sound.setProgressUpdateIntervalAsync(1000);
+        sound.setOnPlaybackStatusUpdate(status => setAudioStatus(status as AVPlaybackStatusSuccess));
+        
+        if(player_id){
+            let pdata = await getPlayerData(pod_episode_id);
+            if(pdata?.player_podcast_episode){
+                await sound.setPositionAsync(pdata.player_podcast_episode.pause_timestamp)
+            }
+        }
+
+
         setAudioData({
             ...audio_data,
             audio_loading: false,
-            podcast_episode: episode
+            podcast_episode: episode,
+            audio_player: sound,
         })
     }
 
@@ -102,168 +83,104 @@ const AudioPlayer = ({podcast_episode_id, player_id, onClose}:AudioPlayerProps)
     }
 
     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(!audio_player){ return alert('Unable to play audio at this time') }
+        await audio_player.playAsync();
+        
         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(!audio_player){ return alert('Unable to play audio at this time') }
+
+        const status:any = await audio_player.pauseAsync();
+        let cur_time = status.positionMillis ?? 0
 
         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 handleStartSliding = () => {
+        if(!audio_player){ return }
+        audio_player.pauseAsync()
     }
 
-    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();
+    const handleManualTimeChange = async(val:number) => {
+        //updat manual time!!
+        if(!audio_player){ return }
+        await audio_player.setPositionAsync(val * 1000);
+        await audio_player.playAsync();
     }
 
-
-
-    if(Platform.OS != 'web'){ return <></> }
-
     return (
-        <View style={{ ...view_styles.section, flex:1 }} onLayout={(ev) => {
+        <View float type='row' style={{ flex:1, borderRadius:8, ...style }} onLayout={(ev) => {
             const { width } = ev.nativeEvent.layout
             setAudioSize({ width })
         }}>
             {!podcast_episode || audio_loading ?
-            <ActivityIndicator size='large' color={Colors.brand.midnight} style={{ alignSelf:'center' }} />
+            <ActivityIndicator size='large' color={Colors.text.h1} style={{ alignSelf:'center' }} />
             :
-            <View style={{ ...view_styles.body_row }}>
-                <View>
+            <View transparent type='row' style={{ flex:1 }}>
+                <View transparent>
                     <Image
                         source={{ uri: SocialPodcastHelpers.getEpisodeImage(podcast_episode) }}
-                        style={{ width: audio_size.width * 0.1, height: audio_size.width * 0.1 }}
+                        style={{ width: audio_size.width * 0.135, height: audio_size.width * 0.135 }}
                         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 transparent style={{ position:'absolute', top:0, left:0, right:0, bottom:0, justifyContent:'center', alignItems:'center' }}>
+                        {audio_status && !audio_status.isPlaying ?
+                        <Button  float style={{ borderRadius:100, padding:10 }} onPress={() => startAudio() }>
+                            <Icons.PlayIcon size={12} color={Colors.text.success} />
+                        </Button>
+                        :audio_status &&audio_status.isPlaying ?
+                        <Button  float style={{ borderRadius:100, padding:10 }} onPress={() => pauseAudio() }>
+                            <Icons.PauseIcon size={12} color={Colors.text.error} />
+                        </Button>
                         :<></>}
                     </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>
+                <View transparent type='row' style={{ flex:1 }}>
+                    <View transparent style={{ flex:1, padding:5, marginBottom:5 }}>
+                        <Button 
+                            disabled={!onSelectEpisode}
+                            onPress={() => onSelectEpisode? onSelectEpisode({ podcast_episode: podcast_episode, player_podcast:player_podcast, player_podcast_episode:player_podcast_episode }) : console.log('')}
+                            transparent type='text' style={{ padding:5 }}>
+                            <Text size={14} theme='h1'>{podcast_episode.title}</Text>
+                        </Button>
+                        <View transparent style={{ flexDirection:'row', alignItems:'center' }}>
+                            <Text style={{ padding:5, width:50, alignSelf:'center' }} size={12} theme='description'>{SocialPodcastHelpers.formatTime(curr_time)}</Text>
+                            {audio_status ?
                             <Slider
                                 width={audio_size.width * 0.47}
-                                value={current_time}
-                                minimum_value={minimum_value}
-                                maximum_value={maximum_value}
-                                onSlidingStart={() => handleStartTimeChange()}
+                                value={curr_time}
+                                minimum_value={0}
+                                maximum_value={dur_time}
+                                onSlidingStart={() => handleStartSliding()}
                                 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>
+                            :<></>}
+                            <Text style={{ padding:5, width:50, alignSelf:'center' }} size={12} theme='description'>-{SocialPodcastHelpers.formatTime(isNaN(rem_time)?0:rem_time)}</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 transparent style={{ position:'absolute', top:0, left:0, bottom:0, right:0, justifyContent:'center' }}>
+                            <ActivityIndicator size='small' color={Colors.text.h1} />
                         </View>
                         :<></>}
                     </View>
-                    <View style={{ marginLeft:10, flexDirection:'row', alignItems:'center' }}>
+                    <View transparent style={{ marginLeft:10, marginRight:10, flexDirection:'row', alignItems:'center' }}>
                         <Button
-                            style={{ borderRadius:100, padding:5, backgroundColor:Colors.shades.shade100, ...view_styles.float }}
+                            float
+                            style={{ borderRadius:100, height:20, width:20, justifyContent:'center', alignItems:'center' }}
                             title='X'
-                            title_size={12}
-                            title_color={Colors.brand.midnight}
+                            type='close'
                             onPress={async() => {
                                 await pauseAudio();
                                 onClose();
@@ -274,9 +191,6 @@ const AudioPlayer = ({podcast_episode_id, player_id, onClose}:AudioPlayerProps)
                 </View>
             </View>
             }
-            {Platform.OS == 'web' && podcast_episode ?
-            <audio onLoad={(ev) => console.log(ev)} ref={audio_ref} onDurationChange={() => handleLoad()} onTimeUpdate={() => handleTimeChange()} src={podcast_episode.url} />
-            :<></>}
         </View>
 
     )

package/src/SocialComponents/PodcastEpisodeCard.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
-import { Image, View, TouchableOpacity } from 'react-native';
-import { view_styles } from "../constants/styles";
+import { Image } from 'react-native';
 import type { PlayerPodcastEpisodeProps, PodcastEpisodesProps, PodcastProps } from '../types';
-import { Icons, Text } from '../Components';
+import { Icons } from '../Components';
 import { SocialPodcastHelpers } from './api';
-import Colors from '../constants/colors';
 import moment from 'moment-mini';
+import { useColors } from '../constants/useColors';
+import { Button, Text, View } from '../Components/Themed';
 
 type PodcastEpisodeCardProps = {
     podcast_episode:PodcastEpisodesProps
@@ -17,45 +17,45 @@ type PodcastEpisodeCardProps = {
 }
 
 const PodcastEpisodeCard = ({ width, podcast_episode, player_podcast_episode, onSelectEpisode, onShare }: PodcastEpisodeCardProps ) => {
-
+    const Colors = useColors();
 
     return (
-        <TouchableOpacity style={{ ...view_styles.section, flex:1, width, borderWidth:1, borderColor:Colors.shades.shade600 }} onPress={() => onSelectEpisode(podcast_episode)}>
-            <View style={{ ...view_styles.section_header, backgroundColor:Colors.shades.shade100 }}>
-                <View style={{ flex:1 }}>
-                    <Text theme='header'>{moment(podcast_episode.publish_date).format('MMM DD YYYY')}</Text>
+        <Button style={{  width, padding:0 }} onPress={() => onSelectEpisode(podcast_episode)}>
+            <View type='header' style={{ flexDirection:'row', alignItems:'center', padding:10 }}>
+                <View transparent style={{ flex:1 }}>
+                    <Text theme='h1'>{moment(podcast_episode.publish_date).format('MMM DD YYYY')}</Text>
                 </View>
                 {onShare?
-                <TouchableOpacity style={{ padding:5 }} onPress={() => onShare(podcast_episode)}>
-                    <Icons.ShareIcon size={14} color={Colors.brand.electric} />
-                </TouchableOpacity>
+                <Button transparent style={{ padding:5 }} onPress={() => onShare(podcast_episode)}>
+                    <Icons.ShareIcon size={14} color={Colors.text.action} />
+                </Button>
                 :<></>}
             </View>
-            <View style={{ ...view_styles.section_body, padding:0 }}>
-                <View>
+            <View transparent type='body'>
+                <View transparent>
                     <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} />
+                    <View type='blur' style={{ position:'absolute', top:0, left:0, right:0, bottom:0, justifyContent:'center', alignItems:'center' }}>
+                        <View transparent style={{ borderRadius:22, padding:10 }}>
+                            <View float type='row' style={{ padding:10 }}>
+                                <Icons.PlayIcon size={18} color={Colors.text.action} />
                                 {player_podcast_episode ?
-                                <Text size={14} color={Colors.brand.electric} weight='semibold' style={{ marginLeft:10 }}>Resume</Text>
+                                <Text size={14} color={Colors.text.action} weight='semibold' style={{ marginLeft:10 }}>Resume</Text>
                                 :
-                                <Text size={14} color={Colors.brand.electric} weight='semibold' style={{ marginLeft:10 }}>Play</Text>
+                                <Text size={14} color={Colors.text.action} weight='semibold' style={{ marginLeft:10 }}>Play</Text>
                                 }
                             </View>
                         </View>
                     </View>
                 </View>
-                <View style={{ padding:10 }}>
-                    <Text theme='header_2'>{podcast_episode.title}</Text>
+                <View transparent style={{ padding:10 }}>
+                    <Text theme='h2'>{podcast_episode.title}</Text>
                 </View>
             </View>
             
-        </TouchableOpacity>
+        </Button>
     )
 }
 

package/src/SocialComponents/PodcastModule/components/ClaimPodcastModal.tsx

@@ -1,11 +1,9 @@
 import React, { useState } from 'react';
-import { View, Image } from 'react-native';
+import { Image } from 'react-native';
 import type { PodcastProps } from '../../../types';
-import { view_styles } from '../../../constants/styles';
-import { Button, Text } from '../../../Components';
-import Colors from '../../../constants/colors';
 import { SocialPodcastHelpers } from '../../api';
 import { PodcastApi } from '../api';
+import { Button, Text, View } from '../../../Components/Themed';
 
 type ClaimPodcastModalProps = {
     podcast:PodcastProps,
@@ -26,49 +24,45 @@ const ClaimPodcastModal = ({ podcast, onClose, onPodcastUpdate }:ClaimPodcastMod
     }
 
     return (
-        <View style={{ ...view_styles.section }}>
-            <View style={{ ...view_styles.section_header }}>
+        <View float>
+            <View type='header' style={{ flexDirection:'row', borderTopRightRadius:8, borderTopLeftRadius:8, padding:10 }}>
                 <Image
                     source={{ uri: SocialPodcastHelpers.getPodcastImage(podcast) }}
                     style={{ width:50, height:50, borderRadius:4 }}
                     resizeMode='cover'
                 />
-                <View style={{ flex:1, marginLeft:10 }}>
-                    <Text theme='header'>Is this your podcast?</Text>
-                    <Text style={{ marginTop:3 }} theme='body'>Claim this podcast and get it prioritized over other similar podcasts!</Text>
+                <View transparent style={{ flex:1, marginLeft:10 }}>
+                    <Text theme='h1'>Is this your podcast?</Text>
+                    <Text style={{ marginTop:3 }} theme='description'>Claim this podcast and get it prioritized over other similar podcasts!</Text>
                 </View>
             </View>
-            <View style={{ ...view_styles.section_body }}>
-                <Text style={{ marginBottom:10 }} theme='header'>Benefits of claiming podcast</Text>
-                <View style={{ ...view_styles.body_row, alignItems:'flex-start' }}>
+            <View type='body' style={{ padding:10 }}>
+                <Text style={{ marginBottom:10 }} theme='h1'>Benefits of claiming podcast</Text>
+                <View type='row' style={{  alignItems:'flex-start', padding:5 }}>
                     <Text size={40} weight='bold'>*</Text>
-                    <Text style={{ marginLeft:10 }} theme='header_2'>PodQuest, BettorEdge's proprietary podcast recommendation engine will suggest your podcast to interested parties based on their betting history!</Text>
+                    <Text style={{ marginLeft:10 }} theme='h2'>PodQuest, BettorEdge's proprietary podcast recommendation engine will suggest your podcast to interested parties based on their betting history!</Text>
                 </View>
-                <View style={{ ...view_styles.body_row, alignItems:'flex-start', paddingTop:0 }}>
+                <View type='row' style={{ alignItems:'flex-start', paddingTop:5 }}>
                     <Text size={40} weight='bold'>*</Text>
-                    <Text style={{ marginLeft:10 }} theme='header_2'>Adds the podcast to your profile for people to see your bets, takes, and podcasts all in one place!</Text>
+                    <Text style={{ marginLeft:10 }} theme='h2'>Adds the podcast to your profile for people to see your bets, takes, and podcasts all in one place!</Text>
                 </View>
-                <View style={{ ...view_styles.body_row, alignItems:'flex-start', paddingTop:0 }}>
+                <View type='row' style={{ alignItems:'flex-start', paddingTop:5 }}>
                     <Text size={40} weight='bold'>*</Text>
-                    <Text style={{ marginLeft:10 }} theme='header_2'>Additionally, it gets you a referral code allowing you to make money on users sent to BettorEdge!</Text>
+                    <Text style={{ marginLeft:10 }} theme='h2'>Additionally, it gets you a referral code allowing you to make money on users sent to BettorEdge!</Text>
                 </View>
             </View>
-            <View style={{ ...view_styles.section_footer }}>
+            <View style={{ flexDirection:'row', alignItems:'center', padding:10, borderBottomRightRadius:8, borderBottomLeftRadius:8 }}>
                 <Button
                     title='No Thanks'
                     style={{flex:1}}
-                    padding={15}
-                    title_color={Colors.shades.white}
-                    backgroundColor={Colors.utility.error}
+                    type='error'
                     onPress={() => onClose()}
                 />
                  <Button
                     title='Request Claim'
                     style={{flex:2, marginLeft:5, opacity:loading?0.5:1}}
-                    padding={15}
+                    type='success'
                     disabled={loading}
-                    title_color={Colors.shades.white}
-                    backgroundColor={Colors.utility.success}
                     onPress={() => handleClaimPodcast()}
                 />
             </View>