From fcffc4f2950ba1de50e4cffd5c79b19201191399 Mon Sep 17 00:00:00 2001
From: Luke Bunselmeyer <luke@bunselmeyer.net>
Date: Sun, 7 May 2023 13:12:51 -0400
Subject: [PATCH] - UI   - Created auto player route for channel and tags

---
 app/components/stations-gallery.tsx           | 23 ++++++++++---
 .../listen.channel.$channel.$station.tsx      | 33 +++++++++++++++++++
 app/routes/listen.channel.$channel.tsx        |  5 +--
 app/routes/listen.tag.$tag.$station.tsx       |  7 ++++
 app/routes/listen.tag.$tag.tsx                |  5 +--
 app/utils.ts                                  |  8 +++++
 6 files changed, 73 insertions(+), 8 deletions(-)
 create mode 100644 app/routes/listen.channel.$channel.$station.tsx
 create mode 100644 app/routes/listen.tag.$tag.$station.tsx

diff --git a/app/components/stations-gallery.tsx b/app/components/stations-gallery.tsx
index 29103ea..1eb7c9a 100644
--- a/app/components/stations-gallery.tsx
+++ b/app/components/stations-gallery.tsx
@@ -1,12 +1,27 @@
+import type { Tag } from "@prisma/client";
 import { Link } from "@remix-run/react";
-import type { ConvertDatesToStrings } from "@remix-run/router/utils";
 import type { StationWithTags } from "~/models/station.server";
+import type { Channel } from "~/routes/listen.channel.$channel";
+import type { ConvertDatesToStrings } from "~/utils";
 
 export type StationsGalleryProps = {
-    stations: ConvertDatesToStrings<NonNullable<StationWithTags>>[]
+    stations: ConvertDatesToStrings<NonNullable<StationWithTags>>[];
+    tag?: ConvertDatesToStrings<Tag>;
+    channel?: ConvertDatesToStrings<Channel>;
 };
 
-export function StationsGallery({ stations }: StationsGalleryProps) {
+export function StationsGallery({ stations, tag, channel }: StationsGalleryProps) {
+
+    function getStationUrl(id: string): string {
+        if (channel) {
+            return `/listen/channel/${channel.slug}/${id}`;
+        }
+        if (tag) {
+            return `/listen/tag/${tag?.slug}/${id}`;
+        }
+        return `/listen/station/${id}`;
+    }
+
     return (
         <div className="grid grid-cols-3 gap-4">
             {stations.map((station) => {
@@ -25,7 +40,7 @@ export function StationsGallery({ stations }: StationsGalleryProps) {
                             </h2>
                             <p>{station.description}</p>
                             <div className="card-actions justify-end">
-                                <button className="btn btn-primary">Listen Now</button>
+                                <Link to={getStationUrl(station.id)} className="btn btn-primary">Listen Now</Link>
                             </div>
                         </div>
                     </div>
diff --git a/app/routes/listen.channel.$channel.$station.tsx b/app/routes/listen.channel.$channel.$station.tsx
new file mode 100644
index 0000000..80194da
--- /dev/null
+++ b/app/routes/listen.channel.$channel.$station.tsx
@@ -0,0 +1,33 @@
+import type { LoaderArgs } from "@remix-run/node";
+import { json } from "@remix-run/node";
+import { useLoaderData } from "@remix-run/react";
+import { getStationById } from "~/models/station.server";
+import { notFound } from "~/utils";
+
+
+export async function loader({ params }: LoaderArgs) {
+    if (!params.station) {
+        throw notFound();
+    }
+
+    const station = await getStationById(params.station);
+    if (!station) {
+        throw notFound();
+    }
+    return json({ station });
+}
+
+export default function ListenChanelStation() {
+    const { station } = useLoaderData<typeof loader>();
+
+    return (
+        <div className="fixed bottom-0 left-0 w-full h-[70px] px-4 py-2 z-50 flex justify-end"
+             data-theme="aqua">
+
+            <audio controls autoPlay src={station.streamUrl}>
+                Your browser does not support the audio element.
+            </audio>
+        </div>
+    );
+
+}
diff --git a/app/routes/listen.channel.$channel.tsx b/app/routes/listen.channel.$channel.tsx
index fb35c8b..3ba0e25 100644
--- a/app/routes/listen.channel.$channel.tsx
+++ b/app/routes/listen.channel.$channel.tsx
@@ -1,6 +1,6 @@
 import type { LoaderArgs } from "@remix-run/node";
 import { json } from "@remix-run/node";
-import { Link, useLoaderData } from "@remix-run/react";
+import { Link, Outlet, useLoaderData } from "@remix-run/react";
 import { Breadcrumbs } from "~/components/breadcrumbs";
 import { StationsGallery } from "~/components/stations-gallery";
 import type { StationWithTags } from "~/models/station.server";
@@ -51,7 +51,8 @@ export default function ListenChannel() {
                 <Link to="/listen">Home</Link>
                 <Link to={`/listen/${channel.slug}`}>{channel.name}</Link>
             </Breadcrumbs>
-            <StationsGallery stations={stations} />
+            <StationsGallery stations={stations} channel={channel} />
+            <Outlet />
         </>
     );
 
diff --git a/app/routes/listen.tag.$tag.$station.tsx b/app/routes/listen.tag.$tag.$station.tsx
new file mode 100644
index 0000000..3a0155b
--- /dev/null
+++ b/app/routes/listen.tag.$tag.$station.tsx
@@ -0,0 +1,7 @@
+import ListenChanelStation from "~/routes/listen.channel.$channel.$station";
+
+export { loader } from "~/routes/listen.channel.$channel.$station";
+export default ListenChanelStation;
+
+
+
diff --git a/app/routes/listen.tag.$tag.tsx b/app/routes/listen.tag.$tag.tsx
index 13ae53b..53c7948 100644
--- a/app/routes/listen.tag.$tag.tsx
+++ b/app/routes/listen.tag.$tag.tsx
@@ -1,6 +1,6 @@
 import type { LoaderArgs } from "@remix-run/node";
 import { json } from "@remix-run/node";
-import { Link, useLoaderData } from "@remix-run/react";
+import { Link, Outlet, useLoaderData } from "@remix-run/react";
 import { Breadcrumbs } from "~/components/breadcrumbs";
 import { StationsGallery } from "~/components/stations-gallery";
 import type { StationWithTags } from "~/models/station.server";
@@ -34,7 +34,8 @@ export default function ListenTag() {
                 <Link to="/listen">Home</Link>
                 <Link to={`/listen/${tag.slug}`} className="capitalize">{tag.name}</Link>
             </Breadcrumbs>
-            <StationsGallery stations={stations} />
+            <StationsGallery stations={stations} tag={tag} />
+            <Outlet />
         </>
     );
 }
diff --git a/app/utils.ts b/app/utils.ts
index 74b778e..323460d 100644
--- a/app/utils.ts
+++ b/app/utils.ts
@@ -98,3 +98,11 @@ export function slugify(string: string): string {
         .replace(/^-+/, "") // Trim - from start of text
         .replace(/-+$/, ""); // Trim - from end of text
 }
+
+export type ConvertDatesToStrings<T> = T extends Date
+    ? string
+    : T extends Array<infer U>
+        ? ConvertDatesToStrings<U>[]
+        : T extends object
+            ? { [K in keyof T]: ConvertDatesToStrings<T[K]> }
+            : T;