Player close button

components/Cast/Cast.tsx

@@ -10,7 +10,6 @@ import { TrackMetadata } from '@/types/Track';
 import Like from './Like';
 import Share from './Share';
 import { Separator } from '@/components/ui/separator';
-import { timeFromNow } from '@/lib/utils';
 import UpvoteDownvote from '../UpvoteDownvote';
 import { isNil } from 'lodash';
 import CollectButton from './CollectButton';
@@ -44,11 +43,11 @@ const Cast = ({ cast = {} as SupabasePost }: { cast: SupabasePost }) => {
   return (
     <div className="w-full space-y-4 ">
       <div className="flex gap-2">
-        <UserDetails user={author} hasHypersub={!isNil(cast.hypersub_subscribed_since)} />
-        <span className="text-sm leading-none text-muted-foreground">
-          {'• '}
-          {timeFromNow(cast.created_at)}
-        </span>
+        <UserDetails
+          user={author}
+          hasHypersub={!isNil(cast.hypersub_subscribed_since)}
+          createdAt={cast.created_at}
+        />
       </div>
 
       <MediaPlayer metadata={metadata} />

components/GlobalPlayer.tsx

@@ -3,9 +3,11 @@ import { usePlayer } from '@/providers/audio/PlayerProvider';
 import Image from 'next/image';
 import Scrubber from '@/components/Scrubber';
 import PlayerButtons from './PlayerButtons';
+import { Button } from './ui/button';
+import { Cross1Icon } from '@radix-ui/react-icons';
 
 export default function GlobalPlayer() {
-  const [player] = usePlayer();
+  const [player, dispatch] = usePlayer();
   const { metadata } = player;
 
   if (!metadata) return <></>;
@@ -16,6 +18,13 @@ export default function GlobalPlayer() {
       className="sticky bottom-0 left-0 mt-auto w-screen space-y-6 overflow-hidden bg-white py-3 shadow-2xl shadow-black"
     >
       <div className="container relative flex items-center gap-3">
+        <Button
+          variant="ghost"
+          className="h-auto rounded-full p-2"
+          onClick={() => dispatch({ type: 'STOP' })}
+        >
+          <Cross1Icon />
+        </Button>
         <div className="relative my-auto size-16 overflow-hidden rounded-lg shadow-md">
           <Image
             src={metadata.artworkUrl}
@@ -26,15 +35,15 @@ export default function GlobalPlayer() {
           />
         </div>
 
-        <div className=" max-w-[33%] space-y-0.5 self-center">
+        <div className="max-w-[33%] space-y-0.5 self-center">
           <div className="line-clamp-2 text-sm font-bold">{metadata.trackName}</div>
           <div className="line-clamp-2 text-xs font-extralight text-muted-foreground">
             {metadata.artistName}
           </div>
         </div>
         <div className="absolute left-1/4 w-full">
           <div className="ml-6 flex max-w-2xl grow flex-col items-center gap-1">
-            {metadata && <PlayerButtons metadata={metadata} />}
+            <PlayerButtons metadata={metadata} />
             <Scrubber className="w-full max-md:hidden" />
           </div>
         </div>

components/UserDetails.tsx

@@ -1,17 +1,20 @@
 import { User } from '@neynar/nodejs-sdk/build/neynar-api/v2';
 import { Avatar, AvatarFallback, AvatarImage } from './ui/avatar';
-import { cn } from '@/lib/utils';
+import { cn, timeFromNow } from '@/lib/utils';
 import Image from 'next/image';
 import Link from 'next/link';
+import { SupabasePost } from '@/types/SupabasePost';
 
 export default function UserDetails({
   user,
   hasHypersub,
   className,
+  createdAt,
 }: {
   user: User;
   hasHypersub?: boolean;
   className?: string;
+  createdAt?: SupabasePost['created_at'];
 }) {
   return (
     <div className={cn('flex space-x-3', className)}>
@@ -22,7 +25,7 @@ export default function UserDetails({
         </Avatar>
       </Link>
       <div className="flex flex-col gap-1">
-        <div className="flex flex-row items-center align-middle">
+        <div className="flex flex-row items-center gap-1 align-middle">
           <a
             href={`/${user.username}`}
             target="_blank"
@@ -31,6 +34,12 @@ export default function UserDetails({
             {user.display_name}
           </a>
           {hasHypersub && <Image src="/images/hypersub.png" width={20} height={20} alt="" />}
+          {createdAt && (
+            <span className="text-sm leading-none text-muted-foreground">
+              {'• '}
+              {timeFromNow(createdAt)}
+            </span>
+          )}
         </div>
         <a
           href={`/${user.username}`}

providers/audio/PlayerProvider.tsx

@@ -44,6 +44,9 @@ export type PlayerAction =
         id: string;
       };
     }
+  | {
+      type: 'STOP';
+    }
   | {
       type: 'SEEK';
       payload: {
@@ -76,6 +79,7 @@ const initialState: Player = {
   loading: false,
   seekTo: null,
   feedId: -1,
+  metadata: undefined,
 };
 
 const PlayerContext = createContext<[Player, Dispatch<PlayerAction>]>([initialState, () => {}]);
@@ -103,6 +107,9 @@ const playerReducer = (state: Player, action: PlayerAction) => {
       if (state.metadata?.id !== id) return state;
       return { ...state, playing: false };
     }
+    case 'STOP': {
+      return initialState;
+    }
     case 'SEEK':
       return { ...state, seekTo: action.payload.position };
     case 'SEEKED':
@@ -142,7 +149,7 @@ export default function PlayerProvider({ children }: { children: ReactNode }) {
     soundController,
     spotifyController,
     youtubeController,
-    zoraController
+    zoraController,
   ]);
 
   useEffect(() => {