be-components 2.6.0 → 2.6.2

package/lib/typescript/src/SocialComponents/PodcastModule/index.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import type { PodcastEpisodesProps, PodcastProps, PublicPlayerProps } from '../../types';
 type PodcastModuleProps = {
+    player_id?: string;
     podcast_id: string;
     padding_insets?: {
         top: number;
@@ -12,6 +13,6 @@ type PodcastModuleProps = {
     onSelectEpisode: (pe: PodcastEpisodesProps) => void;
     onSelectPlayer?: (p: PublicPlayerProps) => void;
 };
-declare const PodcastModule: ({ podcast_id, padding_insets, onSelectEpisode, onBack, onShareEpisode, onSharePodcast, onSelectPlayer }: PodcastModuleProps) => React.JSX.Element;
+declare const PodcastModule: ({ podcast_id, player_id, padding_insets, onSelectEpisode, onBack, onShareEpisode, onSharePodcast, onSelectPlayer }: PodcastModuleProps) => React.JSX.Element;
 export default PodcastModule;
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/SocialComponents/PodcastModule/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/SocialComponents/PodcastModule/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAEnD,OAAO,KAAK,EAA6B,oBAAoB,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAUpH,KAAK,kBAAkB,GAAG;IACtB,UAAU,EAAC,MAAM,CAAC;IAClB,cAAc,CAAC,EAAC;QAAE,GAAG,EAAC,MAAM,CAAC;QAAC,MAAM,EAAC,MAAM,CAAA;KAAE,CAAC;IAC9C,MAAM,CAAC,EAAC,MAAM,IAAI,CAAC;IACnB,cAAc,CAAC,EAAC,CAAC,EAAE,EAAC,oBAAoB,KAAK,IAAI,CAAC;IAClD,cAAc,CAAC,EAAC,CAAC,CAAC,EAAC,YAAY,KAAK,IAAI,CAAC;IACzC,eAAe,EAAC,CAAC,EAAE,EAAC,oBAAoB,KAAK,IAAI,CAAA;IACjD,cAAc,CAAC,EAAC,CAAC,CAAC,EAAC,iBAAiB,KAAK,IAAI,CAAA;CAChD,CAAA;AAED,QAAA,MAAM,aAAa,4GAA4G,kBAAkB,sBA8LhJ,CAAA;AAED,eAAe,aAAa,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/SocialComponents/PodcastModule/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAEnD,OAAO,KAAK,EAA4C,oBAAoB,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAWnI,KAAK,kBAAkB,GAAG;IACtB,SAAS,CAAC,EAAC,MAAM,CAAC;IAClB,UAAU,EAAC,MAAM,CAAC;IAClB,cAAc,CAAC,EAAC;QAAE,GAAG,EAAC,MAAM,CAAC;QAAC,MAAM,EAAC,MAAM,CAAA;KAAE,CAAC;IAC9C,MAAM,CAAC,EAAC,MAAM,IAAI,CAAC;IACnB,cAAc,CAAC,EAAC,CAAC,EAAE,EAAC,oBAAoB,KAAK,IAAI,CAAC;IAClD,cAAc,CAAC,EAAC,CAAC,CAAC,EAAC,YAAY,KAAK,IAAI,CAAC;IACzC,eAAe,EAAC,CAAC,EAAE,EAAC,oBAAoB,KAAK,IAAI,CAAA;IACjD,cAAc,CAAC,EAAC,CAAC,CAAC,EAAC,iBAAiB,KAAK,IAAI,CAAA;CAChD,CAAA;AAED,QAAA,MAAM,aAAa,uHAAuH,kBAAkB,sBA8R3J,CAAA;AAED,eAAe,aAAa,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "be-components",
-  "version": "2.6.0",
+  "version": "2.6.2",
   "description": "Components for BettorEdge Apps",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

package/src/AnalyticComponents/api/index.ts

@@ -0,0 +1,19 @@
+import { APIOverrides } from "../../ApiOverrides";
+
+let EVENT_SVC_API = ''
+let AUTH_SVC_API = ''
+let MK_SVC_API = ''
+
+export { AnalyticComponentApi }
+
+const AnalyticComponentApi = {
+    setEnvironment: () => {
+        const endpoints = APIOverrides.getEndpoints();
+        EVENT_SVC_API = endpoints['EVENT_SVC_API'] as string;
+        MK_SVC_API = endpoints['MK_SVC_API'] as string;
+        AUTH_SVC_API = endpoints['AUTH_SVC_API'] as string
+        console.log(EVENT_SVC_API, MK_SVC_API, AUTH_SVC_API)
+    },
+    
+
+}

package/src/Components/Icons.tsx

@@ -453,6 +453,25 @@ const NotificationIcon = ({color, size}:IconProps) => {
     )
 }
 
+const HeadphoneIcon = ({ color, size }:IconProps) => {
+    let icon_size = size ?? 17
+    return (
+        <svg width={`${icon_size}px`} height={`${icon_size}px`} viewBox="0 0 22 23" version="1.1" xmlns="http://www.w3.org/2000/svg">
+        <title>headphones-round-sound-svgrepo-com</title>
+        <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+            <g id="headphones-round-sound-svgrepo-com" transform="translate(1.000000, 1.000000)" stroke={color ?? Colors.brand.midnight} stroke-width="2">
+                <path d="M20,15 L20,10 C20,8.1786 19.513,6.47087 18.6622,5 M0,16 L0,10 C0,4.47715 4.47715,0 10,0 C11.8214,0 13.5291,0.48697 15,1.33782" id="Shape" stroke-linecap="round"></path>
+                <path d="M6,13.1871 C6,12.6088 6,12.3196 5.93097,12.0899 C5.77135,11.5588 5.35457,11.156 4.83579,11.0313 C4.61143,10.9775 4.33578,11.0002 3.78447,11.0457 C2.82772,11.1247 2.34935,11.1642 1.95934,11.3151 C1.06004,11.6629 0.3739,12.4394 0.1131,13.4044 C0,13.8229 0,14.3248 0,15.3285 L0,15.514 C0,16.5431 0,17.0577 0.12305,17.493 C0.36454,18.3475 0.942,19.0543 1.71133,19.437 C2.10333,19.632 2.58932,19.7123 3.56129,19.8728 C4.20632,19.9793 4.52883,20.0326 4.78984,19.9788 C5.30414,19.8729 5.72826,19.4938 5.90852,18.9791 C6,18.7178 6,18.3763 6,17.6934 L6,13.1871 Z" id="Path"></path>
+                <path d="M14,13.1871 C14,12.6088 14,12.3196 14.069,12.0899 C14.2286,11.5588 14.6454,11.156 15.1642,11.0313 C15.3886,10.9775 15.6642,11.0002 16.2155,11.0457 C17.1723,11.1247 17.6506,11.1642 18.0407,11.3151 C18.94,11.6629 19.6261,12.4394 19.8869,13.4044 C20,13.8229 20,14.3248 20,15.3285 L20,15.514 C20,16.5431 20,17.0577 19.877,17.493 C19.6355,18.3475 19.058,19.0543 18.2887,19.437 C17.8967,19.632 17.4107,19.7123 16.4387,19.8728 C15.7937,19.9793 15.4712,20.0326 15.2102,19.9788 C14.6959,19.8729 14.2717,19.4938 14.0915,18.9791 C14,18.7178 14,18.3763 14,17.6934 L14,13.1871 Z" id="Path"></path>
+                <line x1="10" y1="4.5" x2="10" y2="9.5" id="Path" stroke-linecap="round"></line>
+                <line x1="13" y1="6" x2="13" y2="8" id="Path" stroke-linecap="round"></line>
+                <line x1="7" y1="6" x2="7" y2="8" id="Path" stroke-linecap="round"></line>
+            </g>
+        </g>
+    </svg>
+    )
+}
+
 const EdgeCoinIcon = ({ color, size }:IconProps) => {
     let icon_size = size ?? 17
     return (
@@ -1532,6 +1551,7 @@ export default {
     ChangeIcon,
     USDIcon,
     EyeOffIcon,
+    HeadphoneIcon,
     DiscoverCardIcon,
     ChatIcon,
     AmexCardIcon,

package/src/MarketComponents/api/index.ts

@@ -1,10 +1,11 @@
 import axios from 'axios';
 import { APIOverrides } from "../../ApiOverrides"
-import type { AthleteProps, BestAvailableResponseProps, ContestStatProps, EventOrderStatProps, EventProps, MarketProps, MarketSideOptionProps, MatchProps, OrderProps, TeamProps, TournamentProps } from "../../types"
+import type { AthleteProps, BestAvailableResponseProps, ContestStatProps, EventOrderStatProps, EventProps, MarketProps, MarketSideOptionProps, MatchProps, OrderProps, PodcastProps, TeamProps, TournamentProps } from "../../types"
 
 let EVENT_SVC_API = ''
 let AUTH_SVC_API = ''
 let MK_SVC_API = ''
+let SOCIAL_SVC_API = ''
 
 export { MarketComponentApi, MarketComponentHelpers }
 
@@ -14,6 +15,7 @@ const MarketComponentApi = {
         EVENT_SVC_API = endpoints['EVENT_SVC_API'] as string;
         MK_SVC_API = endpoints['MK_SVC_API'] as string;
         AUTH_SVC_API = endpoints['AUTH_SVC_API'] as string;
+        SOCIAL_SVC_API = endpoints['SOCIAL_SVC_API'] as string;
     },
     getMarkets:async():Promise<MarketProps[]> => {
         try {
@@ -52,6 +54,16 @@ const MarketComponentApi = {
             return []
         }
     },
+    getPodcastsByKeywords: async(keywords:string):Promise<PodcastProps[]> => {
+        try {
+            console.log(keywords)
+            const resp = await axios.get(`${SOCIAL_SVC_API}/v1/podcasts/search/keywords?keywords=${keywords}`);
+            console.log(resp.data)
+            return resp.data.podcasts
+        } catch (e) {
+            return []
+        }
+    },
     getTeamsByIds: async(team_ids:string[]):Promise<TeamProps[]> => {
         try {
             if(team_ids.length == 0){ return [] }

package/src/MarketComponents/components/PodcastCard.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Image, TouchableOpacity } from 'react-native';
+import type { PodcastProps } from "../../types"
+import { SocialPodcastHelpers } from '../../SocialComponents/api';
+
+type PodcastCardProps = {
+    podcast:PodcastProps,
+    size:number,
+    onPodcastSelect:(pod:PodcastProps) => void
+}
+
+const PodcastCard = ({podcast, size, onPodcastSelect}:PodcastCardProps) => {
+
+    return (
+        <TouchableOpacity onPress={() => onPodcastSelect(podcast)}>
+            <Image
+                source={{ uri: SocialPodcastHelpers.getPodcastImage(podcast) }}
+                style={{ height:size, width:size }}
+                resizeMode='cover'
+            />
+        </TouchableOpacity>
+    )
+}
+export default PodcastCard

package/src/MarketComponents/components/TeamEventMarket/index.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { View, Image, FlatList, TouchableOpacity, ActivityIndicator, ScrollView } from 'react-native';
-import type { AthleteProps, BEEventProps, BestAvailableOrderProps, CompanyProps, CompetitionProps, EventOrderStatProps, EventProps, MarketProps, MarketSideOptionProps, OrderProps, SquaresCompetitionProps, TradeProps } from '../../../types';
+import type { AthleteProps, BEEventProps, BestAvailableOrderProps, CompanyProps, CompetitionProps, EventOrderStatProps, EventProps, MarketProps, MarketSideOptionProps, OrderProps, PodcastProps, SquaresCompetitionProps, TradeProps } from '../../../types';
 import { view_styles } from '../../../constants/styles';
 import { Button, Icons, LinearDiagnal, Text } from '../../../Components';
 import {TeamEventMarketHelpers} from './api';
@@ -14,6 +14,7 @@ import { MarketButtonHelpers } from '../MarketButton/api';
 import LinearGradient from 'react-native-linear-gradient';
 import { useIsInViewport } from '../../../Components/ViewportObserver';
 import ContestStatsCard from '../ContestStats';
+import PodcastCard from '../PodcastCard';
 
 type TeamEventMarketProps = {
     event:EventProps,
@@ -21,6 +22,7 @@ type TeamEventMarketProps = {
     init_expanded?:boolean,
     competitions?:CompetitionProps[],
     show_id?:string,
+    show_podcasts?:boolean,
     squares_competitions?:SquaresCompetitionProps[],
     latest_trades:TradeProps[],
     best_available_orders:BestAvailableOrderProps[],
@@ -32,6 +34,7 @@ type TeamEventMarketProps = {
     onExpand?:(expanded:boolean) => void,
     onTeamSelect?:(team_id:string) => void,
     onShare?:(event:EventProps) => void,
+    onPodcastSelect?:(podcast:PodcastProps) => void,
     show_grades?:boolean,
     onCompetitionSelect:(competition_id:string) => void,
     onSquaresSelect: (sq_comp_id:string) => void,
@@ -40,23 +43,25 @@ type TeamEventMarketProps = {
     onActivate?:(event_id:string, event_type:string) => void
     activate_loading?:boolean
 }
-const TeamEventMarket = ({ event, init_expanded, show_id, activate_loading, competitions, squares_competitions, show_grades, markets, latest_trades, best_available_orders, event_order_stats, default_price_view, onTeamSelect, onSquaresSelect, onCompetitionSelect, onExpand, onOrder, onView, onViewAdditionalMarkets, onTradeLongPress, onActivate, onEvent, onShare }:TeamEventMarketProps) => {
+const TeamEventMarket = ({ event, init_expanded, show_id, show_podcasts, activate_loading, competitions, squares_competitions, show_grades, markets, latest_trades, best_available_orders, event_order_stats, default_price_view, onTeamSelect, onSquaresSelect, onCompetitionSelect, onExpand, onOrder, onView, onViewAdditionalMarkets, onTradeLongPress, onActivate, onEvent, onShare, onPodcastSelect }:TeamEventMarketProps) => {
     const [ expanded_data, setExpandedData ] = useState<{
         expanded:boolean,
         loaded:boolean,
         loading:boolean,
+        podcasts:PodcastProps[],
         athletes:AthleteProps[]
     }>({
         loaded:false,
         loading:false,
         expanded:false,
-        athletes:[]
+        athletes:[],
+        podcasts: []
     })
     const [ show_stats, setShowStats ] = useState(false);
     const [ sponsor, setSponsor ] = useState<CompanyProps|undefined>(undefined);
     const [ competitions_expanded, setCompetitionsExpanded ] = useState(false);
     const [ squares_expanded, setSquaresExpanded ] = useState(false);
-    const { expanded, athletes, loaded, loading } = expanded_data;
+    const { expanded, athletes, loaded, loading, podcasts } = expanded_data;
     const event_status = TeamEventMarketHelpers.getEventStatus(event);
     const ref = useRef(null)
     const isInViewport = useIsInViewport(ref)
@@ -96,6 +101,11 @@ const TeamEventMarket = ({ event, init_expanded, show_id, activate_loading, comp
         if(onExpand){ onExpand(expanded ? false : true) }
         if(expanded){ return setExpandedData({ ...expanded_data, expanded: false }) }
         //Check if we have any non-primary markets sorted
+        let pods:PodcastProps[] = []
+        if(show_podcasts){
+            let key_words = `${event.away?.market_name} ${event.away?.name},${event.home?.market_name} ${event.home?.name}`
+            pods = await MarketComponentApi.getPodcastsByKeywords(key_words)
+        }
 
         if(loaded){ return setExpandedData({ ...expanded_data, expanded: true }) }
         setExpandedData({ ...expanded_data, expanded:true, loading:true });
@@ -107,6 +117,7 @@ const TeamEventMarket = ({ event, init_expanded, show_id, activate_loading, comp
             expanded:true,
             loaded:true,
             loading:false,
+            podcasts: pods,
             athletes: away_athletes.concat(home_athletes)
          })
     }
@@ -202,6 +213,20 @@ const TeamEventMarket = ({ event, init_expanded, show_id, activate_loading, comp
         )
     },[primary_markets.length])
 
+    const renderPodcasts = useCallback((data:{ item:PodcastProps, index:number }) => {
+        return (
+            <View style={{ margin:3 }}>
+                <PodcastCard
+                    podcast={data.item}
+                    size={60}
+                    onPodcastSelect={(pod) => {
+                        if(onPodcastSelect){ onPodcastSelect(pod) }
+                    }}
+                />
+            </View>
+        )
+    },[podcasts.length])
+
 
     const renderNonPrimaryMarkets = useCallback((data: { item:EventOrderStatProps, index:number }) => {
         const market = markets.find(m => m.market_id == data.item.market_id);
@@ -551,6 +576,24 @@ const TeamEventMarket = ({ event, init_expanded, show_id, activate_loading, comp
                     keyExtractor={(item) => `${item.market_id}:${item.side_type}:${item.side_id}`}
                     horizontal
                 />
+                {podcasts.length > 0 ?
+                <View style={{ flexDirection:'row', marginTop:10, borderBottomRightRadius:8, borderBottomLeftRadius:8, backgroundColor:Colors.shades.shade100 }}>
+                    <View style={{ padding:5, paddingRight:20, paddingLeft:20, justifyContent:'center', backgroundColor:Colors.brand.midnight, borderBottomLeftRadius:8 }}>
+                        <Icons.HeadphoneIcon size={36} color={Colors.shades.white} />
+                    </View>
+                    <View style={{ flex:1, padding:5 }}>
+                        <Text style={{ marginBottom:3 }} size={14} weight='semibold' color={Colors.brand.midnight}>Need Help? Checkout these podcasts!</Text>
+                        <FlatList
+                            key={`${event.event_id}:pods`}
+                            data={podcasts}
+                            horizontal
+                            showsHorizontalScrollIndicator={false}
+                            renderItem={renderPodcasts}
+                            keyExtractor={(item) => item.podcast_id.toString()}
+                        />
+                    </View>
+                </View>  
+                :<></>}
             </View>
             :<></>}
             {show_stats ?

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

@@ -1,6 +1,6 @@
 import axios from "axios";
 import { APIOverrides } from "../../../ApiOverrides";
-import type { PlayerPodcastEpisodeProps, PodcastEpisodesProps, PodcastProps, PublicPlayerProps } from "../../../types";
+import type { MyPlayerProps, PlayerPodcastEpisodeProps, PodcastEpisodesProps, PodcastProps, PublicPlayerProps } from "../../../types";
 
 let SOCIAL_SVC_API = '';
 let AUTH_SVC_API = '';
@@ -21,6 +21,30 @@ const PodcastApi = {
             return undefined
         }
     },
+    getMyDetails: async():Promise<MyPlayerProps | undefined> => {
+        try {
+            const resp = await axios.get(`${AUTH_SVC_API}/v1/players/player/me`)
+            return resp.data.player
+        } catch (e) {
+            return undefined
+        }
+    },
+    claimPodcast: async(podcast_id:string):Promise<PodcastProps | undefined> => {
+        try {
+            const resp = await axios.post(`${SOCIAL_SVC_API}/v1/podcasts/podcast/claim`, { podcast_id });
+            return resp.data.podcast
+        } catch (e) {
+            return undefined
+        }
+    },
+    approveClaim: async(podcast_id:string):Promise<PodcastProps | undefined> => {
+        try {
+            const resp = await axios.post(`${SOCIAL_SVC_API}/v1/podcasts/podcast/approve`, { podcast_id });
+            return resp.data.podcast
+        } catch (e) {
+            return undefined
+        }
+    },
     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}`);

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

@@ -0,0 +1,79 @@
+import React, { useState } from 'react';
+import { View, 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';
+
+type ClaimPodcastModalProps = {
+    podcast:PodcastProps,
+    width:number,
+    onClose:() => void,
+    onPodcastUpdate:(pod:PodcastProps) => void
+}
+
+const ClaimPodcastModal = ({ podcast, onClose, onPodcastUpdate }:ClaimPodcastModalProps) => {
+    const [ loading, setLoading ] = useState(false);
+
+    const handleClaimPodcast = async() => {
+        setLoading(true);
+        const updated_pod = await PodcastApi.claimPodcast(podcast.podcast_id);
+        if(!updated_pod){ return alert('Unable to process claim, please try again later.') }
+        onPodcastUpdate(updated_pod)
+        setLoading(false);
+    }
+
+    return (
+        <View style={{ ...view_styles.section }}>
+            <View style={{ ...view_styles.section_header }}>
+                <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>
+            </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' }}>
+                    <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>
+                </View>
+                <View style={{ ...view_styles.body_row, alignItems:'flex-start', paddingTop:0 }}>
+                    <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>
+                </View>
+                <View style={{ ...view_styles.body_row, alignItems:'flex-start', paddingTop:0 }}>
+                    <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>
+                </View>
+            </View>
+            <View style={{ ...view_styles.section_footer }}>
+                <Button
+                    title='No Thanks'
+                    style={{flex:1}}
+                    padding={15}
+                    title_color={Colors.shades.white}
+                    backgroundColor={Colors.utility.error}
+                    onPress={() => onClose()}
+                />
+                 <Button
+                    title='Request Claim'
+                    style={{flex:2, marginLeft:5, opacity:loading?0.5:1}}
+                    padding={15}
+                    disabled={loading}
+                    title_color={Colors.shades.white}
+                    backgroundColor={Colors.utility.success}
+                    onPress={() => handleClaimPodcast()}
+                />
+            </View>
+        </View>
+    )
+}
+
+export default ClaimPodcastModal

package/src/SocialComponents/PodcastModule/index.tsx

@@ -1,16 +1,18 @@
 import React, { useEffect, useState } from 'react';
 import { View, ActivityIndicator, Image, ScrollView, TouchableOpacity, FlatList } from "react-native"
-import type { PlayerPodcastEpisodeProps, PodcastEpisodesProps, PodcastProps, PublicPlayerProps } from '../../types';
+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, Text } from '../../Components';
+import { Button, Icons, Spring, Text } from '../../Components';
 import PodcastEpisodeCard from '../PodcastEpisodeCard';
 import moment from 'moment-mini';
 import PlayerCard from '../PlayerCard';
+import ClaimPodcastModal from './components/ClaimPodcastModal';
 
 type PodcastModuleProps = {
+    player_id?:string,
     podcast_id:string,
     padding_insets?:{ top:number, bottom:number },
     onBack?:() => void,
@@ -20,10 +22,12 @@ type PodcastModuleProps = {
     onSelectPlayer?:(p:PublicPlayerProps) => void
 }
 
-const PodcastModule = ({ podcast_id, padding_insets, onSelectEpisode, onBack, onShareEpisode, onSharePodcast, onSelectPlayer }:PodcastModuleProps) => {
+const PodcastModule = ({ podcast_id, player_id, padding_insets, onSelectEpisode, onBack, onShareEpisode, onSharePodcast, onSelectPlayer }:PodcastModuleProps) => {
     const [ module_size, setModuleSize ] = useState({ height:700, width:330 });
+    const [ show_claim, setShowClaim ] = useState(false);
     const [ pod_data, setPodData ] = useState<{
         loading:boolean,
+        player?:MyPlayerProps,
         episodes_loading:boolean,
         podcast?:PodcastProps,
         podcast_episodes:PodcastEpisodesProps[],
@@ -38,8 +42,8 @@ const PodcastModule = ({ podcast_id, padding_insets, onSelectEpisode, onBack, on
         players:[],
         episodes_offset:0
     });
-    const { loading, episodes_loading, podcast, podcast_episodes, episodes_offset, players, player_podcast_episodes } = pod_data;
-
+    const { loading, episodes_loading, podcast, podcast_episodes, episodes_offset, players, player_podcast_episodes, player } = pod_data;
+    const claimed_player = pod_data.players.find(p => p.player_id == podcast?.claimed_player_id);
     useEffect(() => {
         PodcastApi.setEnvironment();
         getPodDataFromServer(podcast_id, 0);
@@ -49,13 +53,19 @@ 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);
-
+        let me:MyPlayerProps | undefined = undefined;
+        if(player_id){
+            me = await PodcastApi.getMyDetails();
+        }
+        let player_ids = pod?.player_ids ?? []
+        if(pod?.claimed_player_id){ player_ids.push(pod.claimed_player_id) }
         const ps = await PodcastApi.getPlayersByPlayerIds(pod?.player_ids);
         setPodData({
             ...pod_data,
             loading: false,
             episodes_loading: false,
             podcast: pod,
+            player: me,
             players:ps,
             podcast_episodes: pod_ep.podcast_episodes,
             player_podcast_episodes: pod_ep.player_podcast_episodes,
@@ -75,6 +85,15 @@ const PodcastModule = ({ podcast_id, padding_insets, onSelectEpisode, onBack, on
         })
     }
 
+    const approveClaim = async() => {
+        if(!player || player.role != 'admin'){ return alert('Not eligible to approve this request') }
+        const pod = await PodcastApi.approveClaim(podcast_id);
+        setPodData({
+            ...pod_data,
+            podcast: pod
+        })
+    }
+
     const renderPlayers = (data:{item:PublicPlayerProps, index:number}) => {
         return (
             <View style={{ padding:4 }}>
@@ -116,30 +135,75 @@ const PodcastModule = ({ podcast_id, padding_insets, onSelectEpisode, onBack, on
         )
     }
 
+    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.black_faded }} onLayout={(ev) => {
+            <View style={{ flex:1, backgroundColor:Colors.shades.white }} 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 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 
+                                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 }}
+                                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>
+                            :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>
                             </View>
-                            {onSharePodcast ?
-                            <TouchableOpacity style={{ padding:5, marginLeft:5 }} onPress={() => onSharePodcast(podcast)}>
-                                <Icons.ShareIcon size={14} color={Colors.brand.electric} />
+                            :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 }}
+                                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>
+                            :<></>}
+                            <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>
+                            {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>
+                            :<></>}
+                            {podcast.claim_status == 'claimed' && claimed_player ?
+                            <TouchableOpacity style={{ position:'absolute', top:20, right:5, 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>
                             :<></>}
                         </View>
@@ -200,16 +264,57 @@ const PodcastModule = ({ podcast_id, padding_insets, onSelectEpisode, onBack, on
                         </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 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
+                        })
+                    }}
+                />
+            </Spring>
+            </View>
+            :<></>}
         </View>
     )
 }
 
-export default PodcastModule
+export default PodcastModule
+
+const style:any = {
+    blur: {
+        backdropFilter: 'blur(75px)',
+        backgroundColor:Colors.shades.black_faded_heavy
+    }
+}

package/src/types.d.ts

@@ -78,6 +78,7 @@ export interface PodcastProps {
     lead_contact_name?:string,
     secondary_contact?:string,
     last_episode_pull?:any,
+    claimed_player_id?:string,
     title: string,
     description: string,
     claim_status?:string,