Remove buzzsprout player

Author: danieltott

src/app/podcast/[slug]/page.tsx

@@ -4,19 +4,11 @@ import { notFound } from 'next/navigation';
 import { Fragment } from 'react';
 import DisplayHtml from '@/components/DisplayHtml';
 import PodcastSubscribe from '@/components/PodcastSubscribe';
-import {
-	getEpisode,
-	getEpisodes,
-	getTranscript,
-	getPlayerSrc,
-	getPlayerUrl,
-	getPlayerStreamUrl,
-} from '@/data/podcast';
+import { getEpisode, getEpisodes, getTranscript } from '@/data/podcast';
 import { dateForDisplay } from '@/util/date';
 import { sanitizeCmsData } from '@/util/sanitizeCmsData';
 import createCmsImage from '@/util/cmsimage';
 import { Metadata } from 'next';
-import Script from 'next/script';
 
 export async function generateStaticParams() {
 	const podcastEpisodes = await getEpisodes({ limit: 99 });
@@ -42,18 +34,13 @@ async function getEpisodeData(slug: string) {
 	return {
 		episode: sanitizedEpisode,
 		transcript,
-		playerSrc: getPlayerSrc({ id: episode.podcastBuzzsproutId }),
-		playerUrl: getPlayerUrl({ id: episode.podcastBuzzsproutId }),
-		playerStreamUrl: getPlayerStreamUrl({ id: episode.podcastBuzzsproutId }),
 	};
 }
 
 export async function generateMetadata({
 	params,
 }: NextPageProps<'slug'>): Promise<Metadata> {
-	const { episode, playerUrl, playerStreamUrl } = await getEpisodeData(
-		params.slug,
-	);
+	const { episode } = await getEpisodeData(params.slug);
 
 	const cardImage = episode.podcastEpisodeCard && episode.podcastEpisodeCard[0];
 
@@ -88,14 +75,6 @@ export async function generateMetadata({
 			description: description,
 			card: 'player',
 			site: '@VirtualCoffeeIO',
-			players: [
-				{
-					width: 500,
-					height: 210,
-					playerUrl: playerUrl,
-					streamUrl: playerStreamUrl,
-				},
-			],
 			images: cardImage
 				? [
 						{
@@ -116,11 +95,10 @@ export async function generateMetadata({
 }
 
 export default async function Newsletter({ params }: NextPageProps<'slug'>) {
-	const { episode, transcript, playerSrc } = await getEpisodeData(params.slug);
+	const { episode, transcript } = await getEpisodeData(params.slug);
 
 	return (
 		<>
-			<Script src={playerSrc} strategy="afterInteractive" />
 			<main id="maincontent" className="container-lg py-md-4">
 				<h1 className="display-5">{episode.title}</h1>
 				<div className="text-right mb-2">
@@ -137,16 +115,6 @@ export default async function Newsletter({ params }: NextPageProps<'slug'>) {
 
 				<DisplayHtml className="lead" html={episode.podcastShortDescription} />
 
-				<div className="my-4 podcastplayer">
-					{playerSrc && (
-						<>
-							<div
-								id={`buzzsprout-player-${episode.podcastBuzzsproutId}`}
-							></div>
-						</>
-					)}
-				</div>
-
 				<PodcastSubscribe />
 
 				<hr />

src/app/podcast/page.tsx

@@ -2,10 +2,9 @@ import Link from 'next/link';
 import DefaultLayout from '@/components/layouts/DefaultLayout';
 import PodcastSubscribe from '@/components/PodcastSubscribe';
 import PostList from '@/components/PostList';
-import { getEpisodes, getPlayerSrc } from '@/data/podcast';
+import { getEpisodes } from '@/data/podcast';
 import { createMetaData } from '@/util/createMetaData.server';
 import createCmsImage from '@/util/cmsimage';
-import Script from 'next/script';
 
 export const metadata = createMetaData({
 	title: 'Virtual Coffee Podcast',
@@ -19,17 +18,12 @@ export default async function PodcastsIndex() {
 	const podcastEpisodes = await getEpisodes({ limit: 99 });
 
 	const latestEpisode = podcastEpisodes[0];
-	const latestEpisodePlayerSrc = getPlayerSrc({
-		id: latestEpisode.podcastBuzzsproutId!,
-	});
 
 	return (
 		<DefaultLayout
 			heroHeader="Virtual Coffee Podcast"
 			Hero="UndrawWalkInTheCity"
 		>
-			<Script src={latestEpisodePlayerSrc} strategy="afterInteractive" />
-
 			<div className="container bodycopy py-5 lead">
 				<p>
 					Virtual Coffee is an intimate community for developers at all stages
@@ -60,15 +54,6 @@ export default async function PodcastsIndex() {
 					<Link href={latestEpisode.url!}>{latestEpisode.title}</Link>
 				</h3>
 
-				<div className="mt-4 podcastplayer">
-					{latestEpisodePlayerSrc && (
-						<>
-							<div
-								id={`buzzsprout-player-${latestEpisode.podcastBuzzsproutId}`}
-							></div>
-						</>
-					)}
-				</div>
 				{!!latestEpisode.episodeSponsors.length && (
 					<>
 						<div className="mt-3">

src/components/PodcastSubscribe.tsx

@@ -55,7 +55,10 @@ export default function PodcastSubscribe({
 					</g>
 				</svg>
 			</a>
-			<a href="https://feeds.buzzsprout.com/1558601.rss" aria-label="RSS Feed">
+			<a
+				href="https://feeds.virtualcoffee.io/virtual-coffee-podcast.rss"
+				aria-label="RSS Feed"
+			>
 				<svg width="160" height="40" xmlns="http://www.w3.org/2000/svg">
 					<g fill="none" fillRule="evenodd">
 						<rect fill="#000" width="160" height="40" rx="7" />

src/data/podcast.ts

@@ -249,7 +249,7 @@ export async function getTranscript({
 }: Partial<PodcastEpisode>): Promise<Transcript | null> {
 	try {
 		const response: { segments: TranscriptSegment[] } = await fetch(
-			`https://www.buzzsprout.com/${buzzsproutPodcastId}/${id}/transcript.json`,
+			`https://feeds.virtualcoffee.io/podcast-assets/${id}/transcript.json`,
 		).then((res) => res.json());
 
 		if (response && response.segments) {
@@ -291,15 +291,3 @@ export async function getTranscript({
 		return null;
 	}
 }
-
-export function getPlayerSrc({ id }: Pick<PodcastEpisode, 'id'>) {
-	return `https://www.buzzsprout.com/${buzzsproutPodcastId}/${id}.js?container_id=buzzsprout-player-${id}&player=small`;
-}
-
-export function getPlayerUrl({ id }: Pick<PodcastEpisode, 'id'>) {
-	return `https://www.buzzsprout.com/${buzzsproutPodcastId}/${id}?client_source=twitter_card&amp;player_type=full_screen`;
-}
-
-export function getPlayerStreamUrl({ id }: Pick<PodcastEpisode, 'id'>) {
-	return `https://www.buzzsprout.com/${buzzsproutPodcastId}/${id}.mp3?blob_id=${id}&client_source=twitter_card`;
-}