Implement Embed Player

Author: switz

src/app/(embed)/embed/[artistSlug]/[year]/[month]/[day]/[songSlug]/page.tsx

@@ -1,38 +1,31 @@
-'use client';
-
 import PlayerManager from '@/components/PlayerManager';
 import SongsColumn from '@/components/SongsColumn';
 import RelistenAPI from '@/lib/RelistenAPI';
 import { createShowDate } from '@/lib/utils';
 import { RawParams } from '@/types/params';
 import { notFound } from 'next/navigation';
 import { playImmediatelySearchParamsLoader } from '@/lib/searchParams/playImmediatelySearchParam';
-import { useEffect, useState } from 'react';
 
-export default function EmbedSongPage(props: { params: Promise<RawParams> }) {
-  const [params, setParams] = useState<RawParams | null>(null);
-  const [show, setShow] = useState(null);
-  const [{ playImmediately }] = playImmediatelySearchParamsLoader.useQueryStates();
+interface EmbedSongPageProps {
+  params: Promise<RawParams>;
+  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
+}
+
+export default async function EmbedSongPage({ params, searchParams }: EmbedSongPageProps) {
+  const resolvedParams = await params;
+  const { artistSlug, year, month, day } = resolvedParams;
 
-  useEffect(() => {
-    async function loadData() {
-      const resolvedParams = await props.params;
-      setParams(resolvedParams);
-      
-      const { artistSlug, year, month, day } = resolvedParams;
-      if (!year || !month || !day) return;
-      
-      const showData = await RelistenAPI.fetchShow(artistSlug, year, createShowDate(year, month, day));
-      setShow(showData);
-    }
-    loadData();
-  }, [props.params]);
+  if (!year || !month || !day) return notFound();
 
-  if (!params || !show) {
-    return <div>Loading...</div>;
+  const show = await RelistenAPI.fetchShow(artistSlug, year, createShowDate(year, month, day));
+
+  if (!show) {
+    notFound();
   }
 
-  const { artistSlug, year, month, day } = params;
+  // Parse search params on server
+  const parsedSearchParams = await playImmediatelySearchParamsLoader.parseAndValidate(searchParams);
+  const playImmediately = parsedSearchParams.playImmediately ?? true;
 
   return (
     <div className="flex h-full">
@@ -46,12 +39,17 @@ export default function EmbedSongPage(props: { params: Promise<RawParams> }) {
           routePrefix="/embed"
         />
       </div>
-      <PlayerManager {...params} show={show} routePrefix="/embed" playImmediately={playImmediately} />
+      <PlayerManager
+        {...resolvedParams}
+        show={show}
+        routePrefix="/embed"
+        playImmediately={playImmediately}
+      />
     </div>
   );
 }
 
-export const generateMetadata = async (props) => {
+export async function generateMetadata(props) {
   const [params, artists] = await Promise.all([props.params, RelistenAPI.fetchArtists()]);
   const { artistSlug, year, month, day, songSlug } = params;
 
@@ -79,4 +77,4 @@ export const generateMetadata = async (props) => {
       ],
     },
   };
-};
+}

src/components/PlayerManager.tsx

@@ -62,6 +62,7 @@ export default function PlayerManager(props: PlayerManagerProps) {
         // check if track is already in queue, and re-use
         if (player.currentTrack?.metadata?.trackId === activeTrack?.id) {
           console.log('track is already playing');
+          player.play();
           return;
         }
 

src/lib/searchParams/playImmediatelySearchParam.ts

@@ -10,4 +10,7 @@ export const playImmediatelyParser = {
   playImmediately: parseAsBoolean.withDefault(true),
 };
 
-export const playImmediatelySearchParamsLoader = createSearchParams(playImmediatelySchema, playImmediatelyParser);
+export const playImmediatelySearchParamsLoader = createSearchParams(
+  playImmediatelySchema,
+  playImmediatelyParser
+);