From d341ac44793b972c0c38f482c08e6a8b9a8ba998 Mon Sep 17 00:00:00 2001
From: behnamrhp <behnamrahimpour74@gmail.com>
Date: Sat, 9 Dec 2023 17:27:11 +0300
Subject: [PATCH] Add current radio icon

---
 app/components/station-player.tsx   |  2 +-
 app/components/stations-gallery.tsx | 17 ++++++++++++-----
 app/routes/listen.tsx               |  1 -
 3 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/app/components/station-player.tsx b/app/components/station-player.tsx
index 36f8f32..9334708 100644
--- a/app/components/station-player.tsx
+++ b/app/components/station-player.tsx
@@ -46,7 +46,7 @@ export function StationPlayer({ station, nextPrevStationIds }: StationPlayerProp
             }
         };
         importComponent()
-    }, [station])
+    }, [station, nextPrevStationIds, route])
   
     if (!station || !player) {
         return <></>;
diff --git a/app/components/stations-gallery.tsx b/app/components/stations-gallery.tsx
index dcbe0c9..8e86b50 100644
--- a/app/components/stations-gallery.tsx
+++ b/app/components/stations-gallery.tsx
@@ -1,6 +1,6 @@
-import { PlayIcon } from "@heroicons/react/24/solid";
+import { PlayIcon, SpeakerWaveIcon } from "@heroicons/react/24/solid";
 import type { Tag } from "@prisma/client";
-import { Link } from "@remix-run/react";
+import { Link, useLocation } from "@remix-run/react";
 import { ListenLink } from "~/components/page-layout";
 import type { StationWithTagsClientSide } from "~/models/station.server";
 import { getStationUrl, type ConvertDatesToStrings } from "~/utils";
@@ -11,6 +11,8 @@ export type StationsGalleryProps = {
 };
 
 export function StationsGallery({ stations, tag }: StationsGalleryProps) {
+    const location = useLocation();
+    const currentStationId = new URLSearchParams(location.search).get('station')?.trim()
     return (
         <div className="grid grid-cols-1 md:grid-cols-3 xl:grid-cols-4 gap-4">
             {stations.map((station) => {
@@ -18,9 +20,14 @@ export function StationsGallery({ stations, tag }: StationsGalleryProps) {
                     <div key={station.id} className="card card-compact bg-base-100 shadow-xl mb-[70px]">
                         <figure><img src={station.imgUrl} alt="Radio Station" /></figure>
                         <div className="card-body">
-                            <h2 className="card-title">
-                                {station.name}
-                            </h2>
+                            <div className="flex items-center justify-start gap-2">
+                                <h2 className="card-title">
+                                    {station.name}
+                                </h2>
+                                {station.id === currentStationId ? <div className="w-4 h-4">
+                                    <SpeakerWaveIcon />
+                                </div> : null}
+                            </div>
                             <h2 className="flex gap-1">
                                 {station.tags.map((t, id) => {
                                     return <ListenLink key={id} to={`/listen/tag/${t.tag.slug}`}
diff --git a/app/routes/listen.tsx b/app/routes/listen.tsx
index 80a483a..3875269 100644
--- a/app/routes/listen.tsx
+++ b/app/routes/listen.tsx
@@ -22,7 +22,6 @@ export async function loader({ request }: LoaderArgs) {
 export default function ListenLayout() {
     const { tags, user, station, prevNextStationIds } = useLoaderData<typeof loader>();
 
-    console.log(prevNextStationIds)
     return (
         <PageLayout tags={tags} user={user} station={station}>
             <Outlet />