Merge pull request #31 from biensupernice/feature/cleanup-types-and-n…

…ames

Rename tracks to episodes

src/client/TracksScreen/EpisodeModalSheet/index.tsx → src/client/EpisodesScreen/EpisodeModalSheet/index.tsx

@@ -12,13 +12,14 @@ import {
   usePlayerVolume,
   usePlayerMuted,
   usePlayerProgress,
-  usePlayerTrackDuration,
+  usePlayerEpisodeDuration,
   usePlayerLoadingStatus,
   usePlayerActions,
 } from "../PlayerStore";
-import { useGetEpisode } from "../TracksStore";
+import { useGetEpisode } from "../useEpisodeHooks";
 import Sheet from "react-modal-sheet";
 import create from "zustand";
+import { useEffect } from "react";
 
 interface EpisodeModalSheetStore {
   isOpen: boolean;
@@ -41,19 +42,19 @@ export const useEpisodeModalSheetActions = () =>
   useEpisodeModalSheetStore((s) => s.actions);
 
 interface EpisodeModalSheetProps {
-  showTrackModal: boolean;
+  showEpisodeModal: boolean;
   onCloseModal: () => void;
   episodeId?: string;
 }
 export function EpisodeModalSheet({
-  showTrackModal,
+  showEpisodeModal,
   onCloseModal,
   episodeId,
 }: EpisodeModalSheetProps) {
   return (
     <Sheet
       className="full-height-sheet mx-auto w-full max-w-2xl"
-      isOpen={showTrackModal}
+      isOpen={showEpisodeModal}
       onClose={onCloseModal}
     >
       <Sheet.Container>
@@ -71,18 +72,19 @@ export function EpisodeModalSheet({
 
 function EpisodeSheetContent({ episodeId }: { episodeId: string }) {
   const episode = useGetEpisode(episodeId);
+
   return (
     <div className="relative flex h-full w-full flex-col items-center justify-between space-y-3 overflow-auto pb-safe-top">
       <div className="w-full flex-col space-y-3 px-6 pt-6">
         <img
           className="min-h-40 min-w-40 mx-auto w-full max-w-sm rounded-lg object-fill"
-          src={episode.picture_large}
+          src={episode.artworkUrl}
           alt={episode.name}
         />
         <div className="flex w-full flex-col text-center">
           <div className="font-bold text-white">{episode.name}</div>
           <div className="text-sm text-white/80">
-            {formatDate(episode.created_time)}
+            {formatDate(episode.releasedAt)}
           </div>
         </div>
       </div>
@@ -91,8 +93,8 @@ function EpisodeSheetContent({ episodeId }: { episodeId: string }) {
       </div>
       <div className="grid w-full grid-cols-2 gap-x-2 px-6">
         <a
-          href={episode.url}
-          className="inline-flex w-full flex-1 items-center justify-center space-x-1 rounded-md border-2 border-white bg-transparent py-1 px-2 text-center text-xs font-semibold text-white"
+          href={episode.permalinkUrl}
+          className="inline-flex w-full flex-1 items-center justify-center space-x-1 rounded-md border-2 border-white bg-transparent px-2 py-1 text-center text-xs font-semibold text-white"
         >
           <span
             className={classNames("inline-block rounded-full p-1")}
@@ -128,7 +130,7 @@ export function EpisodeSheetFavoriteToggle({
           addFavorite(episodeId);
         }
       }}
-      className="inline-flex w-full items-center justify-center space-x-2 rounded-md border-2 border-white bg-transparent py-1 px-3 text-xs font-bold text-white"
+      className="inline-flex w-full items-center justify-center space-x-2 rounded-md border-2 border-white bg-transparent px-3 py-1 text-xs font-bold text-white"
     >
       {isFavorited ? (
         <>
@@ -153,9 +155,9 @@ export function EpisodeSheetPlayer({ episodeId }: EpisodeSheetPlayerProps) {
   const volume = usePlayerVolume();
   const muted = usePlayerMuted();
   const progress = usePlayerProgress();
-  const trackDuration = usePlayerTrackDuration();
+  const episodeDuration = usePlayerEpisodeDuration();
   const loadingStatus = usePlayerLoadingStatus();
-  const currentTrack = useGetEpisode(episodeId);
+  const currentEpisode = useGetEpisode(episodeId);
 
   const playerActions = usePlayerActions();
 
@@ -165,7 +167,7 @@ export function EpisodeSheetPlayer({ episodeId }: EpisodeSheetPlayerProps) {
       onVolumeChange={playerActions.setVolume}
       onPause={playerActions.pause}
       onResume={playerActions.resume}
-      track={currentTrack}
+      episode={currentEpisode}
       playing={playing}
       muted={muted}
       onMute={playerActions.mute}
@@ -174,7 +176,7 @@ export function EpisodeSheetPlayer({ episodeId }: EpisodeSheetPlayerProps) {
       onCuePositionChange={playerActions.setCuePosition}
       onForward={playerActions.forward}
       onRewind={playerActions.rewind}
-      trackDuration={trackDuration}
+      episodeDuration={episodeDuration}
       loading={loadingStatus === "loading"}
     />
   );

src/client/TracksScreen/TrackOptionsModal.tsx → src/client/EpisodesScreen/EpisodeOptionsModal.tsx

@@ -1,6 +1,5 @@
 import { BottomSheet } from "react-spring-bottom-sheet";
 import create from "zustand";
-import { ITrack } from "@/client/TracksScreen/TracksStore";
 import { formatDate, formatTimeSecs } from "@/client/helpers";
 import cx from "classnames";
 import {
@@ -12,25 +11,27 @@ import {
 import {
   useFavorites,
   useIsFavoriteFast,
-} from "@/client/TracksScreen/FavoritesStore";
+} from "@/client/EpisodesScreen/FavoritesStore";
 import {
   usePlayerActions,
-  usePlayerCurrentTrackId,
-} from "@/client/TracksScreen/PlayerStore";
+  usePlayerCurrentEpisodeId,
+} from "@/client/EpisodesScreen/PlayerStore";
+import { EpisodeProjection } from "@/server/router";
+import { useEffect } from "react";
 
-export function TrackOptionsModal() {
-  const open = useTrackOptionsStore((state) => state.open);
-  const track = useTrackOptionsStore((state) => state.track);
-  const onClose = useTrackOptionsStore((state) => state.onClose);
+export function EpisodeOptionsModal() {
+  const open = useEpisodeOptionsStore((state) => state.open);
+  const episode = useEpisodeOptionsStore((state) => state.episode);
+  const onClose = useEpisodeOptionsStore((state) => state.onClose);
 
-  const currentTrackId = usePlayerCurrentTrackId();
+  const currentEpisodeId = usePlayerCurrentEpisodeId();
   const playerActions = usePlayerActions();
 
   const { addFavorite, removeFavorite } = useFavorites();
   const isFavoriteFast = useIsFavoriteFast();
 
-  const isPlaying = currentTrackId === track?._id ?? false;
-  const isFavorited = isFavoriteFast(track?._id ?? "");
+  const isPlaying = currentEpisodeId === episode?.id ?? false;
+  const isFavorited = isFavoriteFast(episode?.id ?? "");
 
   return (
     <BottomSheet
@@ -40,25 +41,25 @@ export function TrackOptionsModal() {
       snapPoints={({ minHeight }) => minHeight * 1.1}
     >
       <div className="mb-safe-bottom w-full">
-        {track ? (
+        {episode ? (
           <div className="flex w-full flex-col space-y-2">
             <div className="flex w-full items-center space-x-4 p-3">
               <div className="relative h-24 w-24 flex-shrink-0 overflow-hidden rounded-lg">
                 <img
                   className="h-full w-full bg-gray-200"
-                  src={track.picture_large}
-                  alt={track.name}
+                  src={episode.artworkUrl}
+                  alt={episode.name}
                 />
               </div>
               <div className="ml-2 flex-col space-y-1">
                 <div className={cx("text-lg font-bold leading-tight")}>
-                  {track.name}
+                  {episode.name}
                 </div>
                 <div className="text-base text-gray-700">
-                  <span>{formatDate(track.created_time)}</span>
+                  <span>{formatDate(episode.releasedAt)}</span>
                   <span className="mx-1 inline-block">&bull;</span>
                   <span className="inline-block">
-                    {formatTimeSecs(track.duration)}
+                    {formatTimeSecs(episode.duration)}
                   </span>
                 </div>
               </div>
@@ -73,7 +74,7 @@ export function TrackOptionsModal() {
                     "focus:outline-none"
                   )}
                   onClick={() => {
-                    playerActions.play(track._id);
+                    playerActions.play(episode.id);
                     onClose();
                   }}
                 >
@@ -91,9 +92,9 @@ export function TrackOptionsModal() {
                 onClick={(e) => {
                   e.preventDefault();
                   if (isFavorited) {
-                    removeFavorite(track._id);
+                    removeFavorite(episode.id);
                   } else {
-                    addFavorite(track._id);
+                    addFavorite(episode.id);
                   }
                   onClose();
                 }}
@@ -110,11 +111,11 @@ export function TrackOptionsModal() {
                   </>
                 )}
               </button>
-              {track.source === "SOUNDCLOUD" ? (
+              {episode.source === "SOUNDCLOUD" ? (
                 <a
                   target="_blank"
                   rel="noopener noreferrer"
-                  href={track.url}
+                  href={episode.permalinkUrl}
                   className={cx(
                     "just flex w-full items-center space-x-4 px-4 py-4 font-medium",
                     "active:bg-slate-200",
@@ -136,15 +137,18 @@ export function TrackOptionsModal() {
     </BottomSheet>
   );
 }
-interface TrackOptionsStore {
+interface EpisodeOptionsStore {
   open: boolean;
-  track: ITrack | null;
+  episode: EpisodeProjection | null;
   onClose: () => void;
-  setTrack: (track: ITrack) => void;
+  setEpisode: (episode: EpisodeProjection) => void;
 }
-export const useTrackOptionsStore = create<TrackOptionsStore>((set, get) => ({
-  open: false,
-  track: null,
-  onClose: () => set({ open: false, track: null }),
-  setTrack: (track: ITrack) => set({ open: true, track }),
-}));
+export const useEpisodeOptionsStore = create<EpisodeOptionsStore>(
+  (set, get) => ({
+    open: false,
+    episode: null,
+    onClose: () => set({ open: false, episode: null }),
+    setEpisode: (episode: EpisodeProjection) =>
+      set({ open: true, episode: episode }),
+  })
+);