add music videos review

src/App.tsx

@@ -10,6 +10,7 @@ import AudioReviewPage from "./components/pages/AudioReviewPage";
 import FavoriteActorsPage from "./components/pages/FavoriteActorsPage";
 import OldestShowPage from "./components/pages/OldestShowPage";
 import OldestMoviePage from "./components/pages/OldestMoviePage";
+import MusicVideoPage from "./components/pages/MusicVideoPage";
 
 // Layout component that wraps all routes
 function RootLayout() {
@@ -60,6 +61,10 @@ const router = createBrowserRouter([
         path: "/actors",
         element: <FavoriteActorsPage />,
       },
+      {
+        path: "/music-videos",
+        element: <MusicVideoPage />,
+      },
     ],
   },
 ]);

src/components/pages/AudioReviewPage.tsx

@@ -78,10 +78,10 @@ export default function AudioReviewPage() {
         size={"4"}
         style={{ width: "100%" }}
         onClick={() => {
-          navigate("/");
+          navigate("/music-videos");
         }}
       >
-        Home
+        Review Music Videos
       </Button>
     </Box>
   );

src/components/pages/MusicVideoPage.tsx

@@ -0,0 +1,88 @@
+import { useState, useEffect } from "react";
+import { listAudio, listMusicVideos, SimpleItemDto } from "@/lib/playback-reporting-queries";
+import { MovieCard } from "./MoviesReviewPage/MovieCard";
+import { Container, Grid, Box, Spinner, Button } from "@radix-ui/themes";
+import { motion } from "framer-motion";
+import { styled } from "@stitches/react";
+import { useNavigate } from "react-router-dom";
+
+export default function MusicVideoPage() {
+  const navigate = useNavigate();
+
+  const [isLoading, setIsLoading] = useState(true);
+  const [musicVideos, setMusicVideos] = useState<SimpleItemDto[]>([]);
+
+  useEffect(() => {
+    const setup = async () => {
+      setIsLoading(true);
+      setMusicVideos(await listMusicVideos());
+      setIsLoading(false);
+    };
+    setup();
+  }, []);
+
+  if (isLoading) {
+    return (
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          minHeight: "100vh",
+        }}
+      >
+        <Spinner size={"3"} />
+      </div>
+    );
+  }
+  const itemVariants = {
+    hidden: { y: 20, opacity: 0 },
+    visible: {
+      y: 0,
+      opacity: 1,
+      transition: {
+        duration: 0.5,
+        ease: "easeOut",
+      },
+    },
+  };
+  const Title = styled("h1", {
+    fontSize: "4rem",
+    fontWeight: "bold",
+    marginBottom: "1rem",
+    // Updated gradient with yellow to blue
+    background: "linear-gradient(90deg, #FFD700 0%, #00E1FF 100%)",
+    WebkitBackgroundClip: "text",
+    WebkitTextFillColor: "transparent",
+    textShadow: "0 0 30px rgba(255, 215, 0, 0.3)",
+  });
+
+  return (
+    <Box style={{ backgroundColor: "var(--red-8)" }} className="min-h-screen">
+      <Container size="4" p="4">
+        <Grid gap="6">
+          <div style={{ textAlign: "center" }}>
+            <Title as={motion.h1} variants={itemVariants}>
+              You Listened to {musicVideos.length} Music Videos This Year
+            </Title>
+          </div>
+
+          <Grid columns={{ initial: "2", sm: "3", md: "4", lg: "5" }} gap="4">
+            {musicVideos.map((musicVideo) => (
+              <MovieCard key={musicVideo.id} item={musicVideo} />
+            ))}
+          </Grid>
+        </Grid>
+      </Container>
+      <Button
+        size={"4"}
+        style={{ width: "100%" }}
+        onClick={() => {
+          navigate("/");
+        }}
+      >
+        Home
+      </Button>
+    </Box>
+  );
+}

src/lib/playback-reporting-queries.ts

@@ -215,6 +215,32 @@ ORDER BY rowid DESC
   return getItemDtosByIds(movieItemIds);
 };
 
+export const listMusicVideos = async (): Promise<SimpleItemDto[]> => {
+  const userId = await getCurrentUserId();
+
+  const queryString = `
+  SELECT ROWID, *
+  FROM PlaybackActivity
+  WHERE UserId = "${userId}"
+  AND ItemType = "MusicVideo"
+  AND DateCreated > '${oneYearAgo.getFullYear()}-${oneYearAgo.getMonth()}-${oneYearAgo.getDate()}'
+  ORDER BY rowid DESC
+  `;
+  const data = await playbackReportingSqlRequest(queryString);
+
+  const itemIdIndex = data.colums.findIndex((i: string) => i == "ItemId");
+  data.results.map((result: string[]) => {
+    return result[itemIdIndex];
+  });
+  const movieItemIds = data.results
+    .map((result: string[]) => result[itemIdIndex])
+    .filter(
+      (value: string, index: number, self: string[]) =>
+        self.indexOf(value) === index,
+    );
+  return getItemDtosByIds(movieItemIds);
+};
+
 export const listAudio = async (): Promise<SimpleItemDto[]> => {
   const userId = await getCurrentUserId();