import * as React from 'react' ; import { useParams , MetaFunction , redirect } from 'remix' ; import type { LoaderData as RootLoaderData } from '../../root' ; import type { KCDHandle , KCDLoader } from '~/types' ; import { getEpisodes } from '~/utils/transistor.server' ; import { Themed } from '~/utils/theme-provider' ; import { getEpisodeFromParams , getEpisodePath , Params } from '~/utils/call-kent' ; import { LoaderData as CallsLoaderData , useCallsData } from '../calls' ; import { getSocialMetas } from '~/utils/seo' ; import { getUrl } from '~/utils/misc' ; import { H6 , Paragraph } from '~/components/typography' ; import { IconLink } from '~/components/icon-link' ; import { useRootData } from '~/utils/use-root-data' ; import { TwitterIcon } from '~/components/icons/twitter-icon' ; export const handle = { id : 'call-player' , getSitemapEntries : async ( request ) => { const episodes = await getEpisodes ( { request } ) ; return episodes . map ( episode => { return { route : getEpisodePath ( episode ) , changefreq : 'weekly' , lastmod : new Date ( episode . updatedAt ) . toISOString ( ) , priority : 0.3 , } ; } ) ; } , } ; export const meta = ( { parentsData , params } ) => { const callsData = parentsData [ 'routes/calls' ] as CallsLoaderData | undefined ; const { requestInfo } = parentsData . root as RootLoaderData ; const metadata = { } ; if ( ! callsData ) { console . error ( `A call was unable to retrieve the parent's data by routes/calls` ) ; return Object . assign ( metadata , { title : 'Call not found' , } ) ; } const episode = getEpisodeFromParams ( callsData . episodes , params as Params ) ; if ( ! episode ) { console . error ( `A call was unable to retrieve the parent's data by routes/calls` ) ; return Object . assign ( metadata , { title : 'Call not found' , } ) ; } const title = `${ episode . title } | Call Kent Podcast | ${ episode . episodeNumber }` ; const playerUrl = episode . embedHtml . match ( /src="(?<src>.+)"/ ) ?. groups ?. src ; return { ... getSocialMetas ( { origin : requestInfo . origin , title , description : episode . description , keywords : `call kent, kent c. dodds, ${ episode . keywords }` , url : getUrl ( requestInfo ) , image : episode . imageUrl , } ) , 'twitter:card' : 'player' , 'twitter:player' : playerUrl ?? '' , 'twitter:player:width' : '500' , 'twitter:player:height' : '180' , 'twitter:player:stream' : episode . mediaUrl , 'twitter:player:stream:content_type' : 'audio/mpeg' , } ; } ; export const loader = async ( { params , request } ) => { const episodes = await getEpisodes ( { request } ) ; const episode = getEpisodeFromParams ( episodes , params ) ; if ( ! episode ) { return redirect ( '/calls' ) ; } if ( episode . slug !== params . slug ) { return redirect ( getEpisodePath ( episode ) ) ; } return null ; } ; export default function Screen ( ) { const params = useParams ( ) as Params ; const { episodes } = useCallsData ( ) ; const { requestInfo } = useRootData ( ) ; const episode = getEpisodeFromParams ( episodes , params ) ; if ( ! episode ) { return < div > Oh no ... No episode found with this slug : { params . slug } < /div>; } const path = getEpisodePath ( episode ) ; const keywords = Array . from ( new Set ( episode . keywords . split ( /[,;\s]/g ) . map ( x => x . trim ( ) ) . filter ( Boolean ) ) ) . slice ( 0 , 3 ) ; return ( < > < div className = "flex gap-4 justify-between" > < div > < H6 as = "div" className = "flex-auto" > Keywords < /H6> < Paragraph className = "flex mb-8" > { keywords . join ( ', ' ) } < /Paragraph> < /div> < IconLink target = "_blank" rel = "noreferrer noopener" href = { `https://twitter.com/intent/tweet?${ new URLSearchParams ( { url : `${ requestInfo . origin }${ path }` , text : `I just listened to "${ episode . title }" on the Chats with Kent Podcast 🎙 by @kentcdodds` , } ) }` } > < TwitterIcon title = "Tweet this" / > < /IconLink> < /div> < H6 as = "div" > Description < /H6> < Paragraph as = "div" className = "mb-8" dangerouslySetInnerHTML = { { __html : episode . descriptionHTML , } } /> < Themed initialOnly = { true } dark = { < div dangerouslySetInnerHTML = { { __html : episode . embedHtmlDark , } } />} light={<div dangerouslySetInnerHTML={{ __html : episode . embedHtml , } } />}/ > < />); }