Upgrade packages and update recently played UI

RelistenNet · May 7, 2024 · 82c99a6 · 82c99a6
1 parent 51ddc32
commit 82c99a6
Show file tree

Hide file tree

Showing 7 changed files with 1,668 additions and 1,382 deletions.
diff --git a/package.json b/package.json
@@ -14,44 +14,45 @@
   "author": "Daniel Saewitz",
   "license": "MIT",
   "dependencies": {
-    "@floating-ui/react": "^0.26.3",
+    "@floating-ui/react": "^0.26.13",
     "@fortawesome/fontawesome-free": "^6.5.1",
     "@reduxjs/toolkit": "^1.9.5",
-    "@tanstack/react-query": "^5.12.2",
-    "@tanstack/react-query-devtools": "^5.13.3",
-    "@tanstack/react-query-next-experimental": "^5.12.2",
-    "@types/react-redux": "^7.1.32",
-    "clsx": "^2.0.0",
+    "@tanstack/react-query": "^5.35.1",
+    "@tanstack/react-query-devtools": "^5.35.1",
+    "@tanstack/react-query-next-experimental": "^5.35.1",
+    "@types/react-redux": "^7.1.33",
+    "clsx": "^2.1.1",
+    "framer-motion": "^11.1.9",
     "isomorphic-fetch": "3.0.0",
-    "ky": "^1.1.3",
+    "ky": "^1.2.4",
     "ky-universal": "^0.12.0",
     "mousetrap": "1.6.5",
-    "next": "^14.0.3",
+    "next": "^14.2.3",
     "next-redux-wrapper": "8.1.0",
-    "node-device-detector": "^2.0.17",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "node-device-detector": "^2.1.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-redux": "^8.1.2",
     "react-timeago": "^7.2.0",
     "redux": "^4.2.1",
-    "tailwind-merge": "^2.1.0",
+    "tailwind-merge": "^2.3.0",
     "thenby": "^1.3.4",
     "ua-parser-js": "^1.0.37"
   },
   "devDependencies": {
-    "@switz/eslint-config": "^10.0.2",
-    "@types/node": "^20.10.3",
-    "@types/react": "^18.2.42",
+    "@switz/eslint-config": "^11.0.0",
+    "@types/node": "^20.12.10",
+    "@types/react": "^18.3.1",
     "@types/ua-parser-js": "^0.7.39",
-    "autoprefixer": "^10.4.16",
+    "autoprefixer": "^10.4.19",
     "eslint": "^8.55.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-prettier": "^5.0.1",
+    "eslint-plugin-prettier": "^5.1.3",
     "eslint_d": "^13.1.1",
-    "postcss": "^8.4.32",
-    "prettier": "^3.1.0",
-    "prettier-plugin-tailwindcss": "^0.5.9",
-    "tailwindcss": "^3.3.6",
-    "typescript": "^5.3.3"
+    "postcss": "^8.4.38",
+    "prettier": "^3.2.5",
+    "prettier-plugin-tailwindcss": "^0.5.14",
+    "tailwindcss": "^3.4.3",
+    "typescript": "^5.4.5"
   }
 }
diff --git a/src/app/(main)/(tertiary)/layout.tsx b/src/app/(main)/(tertiary)/layout.tsx
@@ -0,0 +1,5 @@
+import { PropsWithChildren } from 'react';
+
+export default function Layout({ children }: PropsWithChildren) {
+  return <div className="mx-auto w-full max-w-screen-xl py-8">{children}</div>;
+}
diff --git a/...ndary)/recently-played/RecentlyPlayed.tsx → ...tiary)/recently-played/RecentlyPlayed.tsx b/...ndary)/recently-played/RecentlyPlayed.tsx → ...tiary)/recently-played/RecentlyPlayed.tsx
@@ -1,9 +1,10 @@
 'use client';
 
 import { QueryClient, useQuery, useQueryClient } from '@tanstack/react-query';
+import { AnimatePresence } from 'framer-motion';
+import ky from 'ky';
 import LiveTrack from '../../../../components/LiveTrack';
 import { API_DOMAIN } from '../../../../lib/constants';
-import ky from 'ky';
 
 function uniqBy(a: any[], key: (item: any) => boolean) {
   const seen = new Set();
@@ -52,11 +53,15 @@ export default function RecentlyPlayed() {
     <div>
       <h1>Recently Played</h1>
 
-      {!query.data
-        ? null
-        : uniqBy(query.data as any[], keyFn).map((data) => (
-            <LiveTrack {...data} key={data.track.track.id} />
-          ))}
+      <div className="grid grid-flow-row-dense grid-cols-2 gap-4 md:grid-cols-3 xl:grid-cols-4">
+        <AnimatePresence initial={false}>
+          {!query.data
+            ? null
+            : uniqBy(query.data as any[], keyFn)
+                .slice(0, 40)
+                .map((data) => <LiveTrack {...data} key={data.track.track.id} />)}
+        </AnimatePresence>
+      </div>
     </div>
   );
 }
diff --git a/...ain)/(secondary)/recently-played/page.tsx → ...main)/(tertiary)/recently-played/page.tsx b/...ain)/(secondary)/recently-played/page.tsx → ...main)/(tertiary)/recently-played/page.tsx
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,6 +1,5 @@
-import dns from 'node:dns';
 import { Roboto } from 'next/font/google';
-import Script from 'next/script';
+import dns from 'node:dns';
 import React from 'react';
 import Providers from './Providers';
 

diff --git a/src/components/LiveTrack.tsx b/src/components/LiveTrack.tsx
@@ -1,6 +1,7 @@
 import { useState, useEffect } from 'react';
 import Link from 'next/link';
 import TimeAgo from 'react-timeago';
+import { motion } from 'framer-motion';
 
 import { splitShowDate } from '../lib/utils';
 import { TrackSource, Track, Venue } from '../types';
@@ -46,12 +47,7 @@ const VenueInfo = ({ track, app_type_description, created_at }: VenueInfoProps)
       <div>
         {info.name} &middot; {info.location}
       </div>
-      <div>
-        {track.source.display_date} &middot;{' '}
-        <span className="align-right text-xxs opacity-70">
-          {app_type_description} &middot; <TimeAgo date={created_at} formatter={formatterFn} />
-        </span>
-      </div>
+      <div>{track.source.display_date}</div>
     </div>
   ) : null;
 };
@@ -78,25 +74,34 @@ export default function LiveTrack({
   isFirstRender,
   isLastSeen,
 }: LiveTrackProps) {
-  const [isMounted, setMounted] = useState(false);
-
-  useEffect(() => {
-    setTimeout(() => setMounted(true), 50);
-  }, []);
-
   if (!track?.track) return null;
 
   return (
     <Link href={createURL(track)} prefetch={false}>
-      <Flex
-        className={`w-full cursor-pointer border-b-[1px] border-[#eeeeee] px-3 transition-opacity duration-1000 ease-in-out ${
-          isMounted || isFirstRender ? 'opacity-100' : 'opacity-0'
-        } ${isLastSeen && 'border-b-green-600'}`}
+      <motion.div
+        transition={{
+          duration: 0.6,
+          type: 'spring',
+          borderColor: { duration: 2, type: 'ease-out' },
+          layout: {
+            duration: 1.2,
+            type: 'ease-in-out',
+          },
+        }}
+        initial={{ opacity: 1, height: 0, borderColor: 'rgba(0,255,50,0.1)' }}
+        animate={{ opacity: 1, height: '100%', borderColor: 'rgba(0,0,0, 0.3)' }}
+        className={`relative flex flex-1 cursor-pointer overflow-hidden rounded border-[1px] px-4 py-2 transition-opacity duration-1000 ease-in-out hover:bg-slate-200/20 ${isLastSeen && 'border-b-green-600'}`}
         data-is-last-seen={isLastSeen}
+        layout
       >
-        <div>
-          <div className="content">{track.track.title}</div>
-          <div>{track.source.artist?.name}</div>
+        <Flex className="flex-1" column>
+          <Flex gap={1} className="items-center justify-between">
+            <div className="content font-semibold">{track.track.title}</div>
+            <span className="align-right text-nowrap text-xxs opacity-70">
+              {app_type_description} &middot; <TimeAgo date={created_at} formatter={formatterFn} />
+            </span>
+          </Flex>
+          <div className="text-sm">{track.source.artist?.name}</div>
 
           <div className="text-xxs text-[#979797]">
             <VenueInfo
@@ -105,12 +110,9 @@ export default function LiveTrack({
               created_at={created_at}
             />
           </div>
-        </div>
-
-        <Flex column className="ml-auto self-center">
-          <span>Relisten</span>
+          <i className="fa fa-arrow-right absolute right-3 top-1/2 -translate-y-1/2 cursor-pointer text-sm text-gray-500 hover:text-gray-900" />
         </Flex>
-      </Flex>
+      </motion.div>
     </Link>
   );
 }