Merge pull request #33 from biensupernice/feature/add-the-love-below

Add The Love Below

src/client/EpisodesScreen/EpisodeList/EpisodeListSpinner.tsx

@@ -1,10 +1,10 @@
 import React from "react";
-import { Soulector } from "../../components/Icons";
+import { Soulection } from "../../components/Icons";
 
 export default function EpisodeListSpinner() {
   return (
     <div className="w-full h-full flex flex-col items-center justify-center animate-fade-loop">
-      <Soulector className="w-10 h-10" />
+      <Soulection className="w-10 h-10" />
       <div className="font-semibold">Loading Episodes</div>
     </div>
   );

src/client/EpisodesScreen/EpisodesScreen.tsx

@@ -304,6 +304,7 @@ function setNavigatorMediaMetadata(episode: ReturnType<typeof useGetEpisode>) {
     const prefixMap = {
       soulection: "Soulection on",
       "sasha-marie-radio": "Sasha Marie on",
+      "the-love-below-hour": "The Love Below on",
     };
 
     navigator.mediaSession.metadata = new MediaMetadata({

src/client/EpisodesScreen/Navbar/Logos.tsx

@@ -1,19 +1,28 @@
 import React from "react";
-import { Soulector } from "../../components/Icons";
+import { Soulection } from "../../components/Icons";
 
 export function SoulectionLogo() {
   return (
     <div className="flex items-center space-x-2">
-      <Soulector className="h-8 w-8 fill-current" />
-      <SoulectionLogotype className="h-4 w-52 fill-current pr-10" />
+      <Soulection className="h-8 w-8 fill-current" />
+      <SoulectionLogotype className="h-4 w-60 fill-current pr-10" />
+    </div>
+  );
+}
+
+export function TheLoveBelowHourLogo() {
+  return (
+    <div className="flex items-center space-x-2 hover:text-white">
+      <TheLoveBelowLogo className="h-7 w-7 fill-current" />
+      <div className="w-60 text-xl text-left font-bold">The Love Below Hour</div>
     </div>
   );
 }
 
 export function SashaMarieRadioLogo() {
   return (
     <div className="flex items-center space-x-2">
-      <SashaMarioRadio className="h-7 w-60 pt-1 fill-current pr-10" />
+      <SashaMarioRadio className="h-7 w-60 fill-current pr-10 pt-1" />
     </div>
   );
 }
@@ -127,3 +136,21 @@ export function SashaMarioRadio(props: any) {
     </svg>
   );
 }
+
+export function TheLoveBelowLogo(props: any) {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 126 126"
+    >
+      <path
+        fill="currentColor"
+        fill-rule="evenodd"
+        d="M125.487 62.743c0 34.653-28.091 62.744-62.744 62.744C28.091 125.487 0 97.396 0 62.743 0 28.091 28.091 0 62.743 0c34.653 0 62.744 28.091 62.744 62.743Zm-114.594 17.6c6.35 18.8 22.35 32.65 42.35 36.7 4.5.9 13.9.85 18.85-.05 11.25-2.05 20.4-6.7 28.5-14.5 9.25-8.8 14.95-19.65 16.65-31.7.9-6.25.35-15.7-1.2-21.8-5.85-22.4-25.25-38.75-48.2-40.7-25.65-2.15-48.7 12.85-56.95 37.1-3.6 10.7-3.6 24.15 0 34.95Zm43.35 9.25c0 .2 1.9 2.35 4.25 4.75 2.3 2.4 4.45 4.4 4.75 4.4.75 0 9.05-8.8 8.65-9.2-.45-.45-17.65-.45-17.65.05Zm-6.94-6.47c-.12.465.712 1.179 1.94 2.27l2 1.85h23.5l2-2c1.15-1.1 1.9-2.25 1.75-2.5-.2-.35-5.9-.5-15.8-.5-11.365 0-15.156-.021-15.39.88Zm-10.01-10.13 2.7 2.85 2.75 2.9h40.5l2.85-2.9 2.9-2.85-12.85-.15c-7.1-.1-18.7-.1-25.85 0l-13 .15Zm-8.3-16.75c0 5 .1 6 1.1 7.85l1.15 2.15h63.5l1.1-2.4c.95-2 1.15-3.2 1.15-7.6 0-4.9-.15-5.5-1.65-8.65-5.4-11.5-20.35-15.25-30.3-7.65-.9.7-1.85 1.3-2.05 1.3-.2 0-1.35-.7-2.55-1.55-10.45-7.15-24.45-3.5-30 7.8-1.35 2.75-1.45 3.4-1.45 8.75Z"
+        clip-rule="evenodd"
+      />
+    </svg>
+  );
+}

src/client/EpisodesScreen/Navbar/NavbarSearch.tsx

@@ -33,6 +33,7 @@ export default function NavbarSearch({
     all: "Search all episodes...",
     soulection: "Search Soulection episodes...",
     "sasha-marie-radio": "Search Sasha Marie Radio episodes...",
+    "the-love-below-hour": "The Love Below episodes..."
   };
 
   const placeHolder = placeHolderOptions[selectedCollective];

src/client/EpisodesScreen/Navbar/index.tsx

@@ -1,6 +1,10 @@
-import { SashaMarieRadioLogo, SoulectionLogo } from "./Logos";
+import {
+  SashaMarieRadioLogo,
+  SoulectionLogo,
+  TheLoveBelowHourLogo,
+} from "./Logos";
 import React, { useEffect } from "react";
-import { IconChevron, IconSearch, Soulector } from "../../components/Icons";
+import { IconChevron, IconSearch, Soulection } from "../../components/Icons";
 import NavbarSearch from "./NavbarSearch";
 import cx from "classnames";
 import create from "zustand";
@@ -16,6 +20,7 @@ import EpisodeListSpinner from "../EpisodeList/EpisodeListSpinner";
 import { CardStackIcon } from "@radix-ui/react-icons";
 import { SelectSeparator } from "@/components/ui/select";
 import { cn } from "@/lib/utils";
+import { EpisodeCollectiveSlugProjection } from "@/server/router";
 
 export type NavbarStore = {
   searchOpen: boolean;
@@ -38,8 +43,8 @@ export const useNavbarStore = create<NavbarStore>((set, get) => ({
 }));
 
 export type CollectiveSelectStore = {
-  selected: "all" | "soulection" | "sasha-marie-radio";
-  setSelected: (collective: "all" | "soulection" | "sasha-marie-radio") => void;
+  selected: "all" | EpisodeCollectiveSlugProjection;
+  setSelected: (collective: "all" | EpisodeCollectiveSlugProjection) => void;
   loadPersisted: () => void;
 };
 
@@ -58,8 +63,7 @@ export const useCollectiveSelectStore = create<CollectiveSelectStore>(
         set({
           selected: persistedCollective as
             | "all"
-            | "soulection"
-            | "sasha-marie-radio",
+            | EpisodeCollectiveSlugProjection,
         });
       }
     },
@@ -123,6 +127,9 @@ export default function Navbar({
               <CollectiveSelectItem value="soulection">
                 <SoulectionLogo />
               </CollectiveSelectItem>
+              <CollectiveSelectItem value="the-love-below-hour">
+                <TheLoveBelowHourLogo />
+              </CollectiveSelectItem>
             </CollectiveSelectContent>
           </CollectiveSelect>
         </div>

src/client/EpisodesScreen/useEpisodeAlbumArtColors.tsx

@@ -16,8 +16,6 @@ export function useEpisodeAlbumArtColors() {
 
   useEffect(() => {
     if (data) {
-      const rgbString = data.rgb.join(" ");
-
       const [h, s, l] = data.hsl;
       const hslString = `${h * 360} ${s * 100}% ${l * 100}%`;
 

src/client/components/Icons.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-export function Soulector(props: any) {
+export function Soulection(props: any) {
   return (
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 18" {...props}>
       <path d="M12.8 0c-.9 0-1.9.2-2.8.5A18.2 18.2 0 00.2 8.6L0 9l.2.4c2.3 3.7 5.9 6.8 9.5 8a11.7 11.7 0 004.5.6c1.6-.2 3-.6 4.5-1.4 3-1.5 5.8-4.1 7.6-7.2l.3-.4-.3-.4a19.5 19.5 0 00-9.5-8 11.8 11.8 0 00-4-.6zm1 1.8a7.2 7.2 0 014.3 12.6v-.2a5 5 0 00-4.7-6.1l-1-.1a3.2 3.2 0 01-2.2-3.7A3.2 3.2 0 0113 1.8h.8zM8.5 3.7a4.8 4.8 0 001.3 4.7 5 5 0 003.5 1.5h.5a3.2 3.2 0 012.6 3.8 3.2 3.2 0 01-2.7 2.5h-1.4A7.2 7.2 0 018.5 3.6zm14 2.8a17.8 17.8 0 012 2.5l-.2.3a18 18 0 01-2.5 2.9v-.3a9.1 9.1 0 000-6l.6.6zM4.6 6.2a9.3 9.3 0 000 6A20.1 20.1 0 012.2 9l.5-.7a19 19 0 012.2-2.5l-.1.4z" />

src/pages/api/internal/sync-episodes.ts

@@ -13,11 +13,12 @@ function createLargeSoundCloudThumbUrl(url: string) {
 const playlists = {
   soulection: "8025093",
   "sasha-marie-radio": "944232886",
+  "the-love-below-hour": "269025488"
 } as const;
 type PlaylistSlugs = keyof typeof playlists;
 
 export async function syncAllCollectives(db: Db) {
-  const slugs: PlaylistSlugs[] = ["soulection", "sasha-marie-radio"];
+  const slugs: PlaylistSlugs[] = ["soulection", "sasha-marie-radio", "the-love-below-hour"];
 
   let retrieved: string[] = [];
   for (const s of slugs) {
@@ -30,7 +31,7 @@ export async function syncAllCollectives(db: Db) {
 
 export async function getSoundCloudTracks(
   db: Db,
-  collectiveSlug: "soulection" | "sasha-marie-radio" = "soulection"
+  collectiveSlug: PlaylistSlugs = "soulection"
 ) {
   const soundCloudClient = new SoundCloudApiClient();
   await soundCloudClient.getToken();

src/server/router.ts

@@ -18,10 +18,11 @@ export type DBTrack = {
   name: string;
   url: string;
   picture_large: string;
-  collective_slug: "soulection" | "sasha-marie-radio";
+  collective_slug: "soulection" | "sasha-marie-radio" | "the-love-below-hour";
 };
 
 export type EpisodeProjection = ReturnType<typeof episodeProjection>;
+export type EpisodeCollectiveSlugProjection = DBTrack["collective_slug"];
 export function episodeProjection(t: WithId<DBTrack>) {
   return {
     id: t._id.toString(),