Add cover art inspector

Author: jcraigk

app/javascript/components/CoverArt.jsx

@@ -1,6 +1,7 @@
 import React, { useState } from "react";
+import { Link } from "react-router-dom";
 
-const CoverArt = ({ coverArtUrls, albumCoverUrl, openAppModal, size = "small", css, selectedOption }) => {
+const CoverArt = ({ coverArtUrls, albumCoverUrl, openAppModal, closeAppModal, size = "small", css, selectedOption }) => {
   const [isLoaded, setIsLoaded] = useState(false);
 
   const handleOpenModal = () => {
@@ -26,7 +27,8 @@ const CoverArt = ({ coverArtUrls, albumCoverUrl, openAppModal, size = "small", c
         )}
 
         <div className="box mt-2">
-          Images generated by DALL-E with prompt assistance from ChatGPT.
+          Images generated by DALL-E with prompt assistance from ChatGPT.<br />
+          <Link to="/cover-art" onClick={closeAppModal} className="button mt-2">Browse All Art</Link>
         </div>
       </>
     );

app/javascript/components/CoverArtInspector.jsx

@@ -0,0 +1,92 @@
+export const coverArtInspectorLoader = async ({ request }) => {
+  const url = new URL(request.url);
+  const page = url.searchParams.get("page") || 1;
+  const perPage = url.searchParams.get("per_page") || 50;
+
+  try {
+    const response = await fetch(`/api/v2/shows?page=${page}&per_page=${perPage}`);
+    if (!response.ok) throw response;
+    const data = await response.json();
+    return {
+      shows: data.shows,
+      totalPages: data.total_pages,
+      totalEntries: data.total_entries,
+      page: parseInt(page, 10) - 1,
+      perPage: parseInt(perPage)
+    };
+  } catch (error) {
+    throw new Response("Error fetching data", { status: 500 });
+  }
+};
+
+import React, { useState } from "react";
+import { useLoaderData, useNavigate, useOutletContext } from "react-router-dom";
+import { Helmet } from "react-helmet-async";
+import LayoutWrapper from "./layout/LayoutWrapper";
+import CoverArt from "./CoverArt";
+import Pagination from "./controls/Pagination";
+import { paginationHelper } from "./helpers/pagination";
+import { formatNumber } from "./helpers/utils";
+
+const CoverArtInspector = () => {
+  const { shows, totalPages, totalEntries, page, perPage } = useLoaderData();
+  const { openAppModal, closeAppModal } = useOutletContext();
+  const [selectedOption, setSelectedOption] = useState("coverArt");
+  const {
+    tempPerPage,
+    handlePageClick,
+    handlePerPageInputChange,
+    handlePerPageBlurOrEnter
+  } = paginationHelper(page, "", perPage);
+
+  const handleOptionChange = (e) => {
+    setSelectedOption(e.target.value);
+  };
+
+  const sidebarContent = (
+    <div className="sidebar-content">
+      <p className="sidebar-title">Cover Art</p>
+      <p className="sidebar-subtitle">{formatNumber(totalEntries)} total</p>
+      <div className="dropdown mt-3">
+        <select id="coverArtOption" value={selectedOption} onChange={handleOptionChange} className="input">
+          <option value="coverArt">Raw Cover Art</option>
+          <option value="albumCover">Album Covers</option>
+        </select>
+      </div>
+    </div>
+  );
+
+  return (
+    <>
+      <Helmet>
+        <title>Cover Art - Phish.in</title>
+      </Helmet>
+      <LayoutWrapper sidebarContent={sidebarContent}>
+        <div className="cover-art-inspector-container">
+          {shows.map((show) => (
+            <CoverArt
+              key={show.id}
+              coverArtUrls={show.cover_art_urls}
+              albumCoverUrl={show.album_cover_url}
+              openAppModal={openAppModal}
+              closeAppModal={closeAppModal}
+              size="medium"
+              css="cover-art-inspector"
+              selectedOption={selectedOption}
+            />
+          ))}
+        </div>
+        <Pagination
+          totalPages={totalPages}
+          handlePageClick={handlePageClick}
+          currentPage={page}
+          perPage={tempPerPage}
+          handlePerPageInputChange={handlePerPageInputChange}
+          handlePerPageBlurOrEnter={handlePerPageBlurOrEnter}
+        />
+      </LayoutWrapper>
+    </>
+  );
+};
+
+export default CoverArtInspector;

app/javascript/components/Show.jsx

@@ -32,7 +32,7 @@ const Show = ({ trackSlug }) => {
   const show = useLoaderData();
   const [tracks, setTracks] = useState(show.tracks);
   const trackRefs = useRef([]);
-  const { playTrack, mapboxToken, openAppModal } = useOutletContext();
+  const { playTrack, mapboxToken, openAppModal, closeAppModal } = useOutletContext();
   const [matchedTrack, setMatchedTrack] = useState(tracks[0]);
   const [showIncompleteNotification, setShowIncompleteNotification] = useState(show.incomplete);
   const [showAdminNotesNotification, setShowAdminNotesNotification] = useState(!!show.admin_notes);
@@ -89,6 +89,7 @@ const Show = ({ trackSlug }) => {
                 coverArtUrls={show.cover_art_urls}
                 albumCoverUrl={show.album_cover_url}
                 openAppModal={openAppModal}
+                closeAppModal={closeAppModal}
                 size="medium"
               />
             </div>

app/javascript/components/pages/Faq.jsx

@@ -81,6 +81,7 @@ const Faq = () => {
 
       <h3>How is album cover art created?</h3>
       <p>Album covers are generated with a combination of automation scripts and the assistance of ChatGPT and Dall-E.</p>
+      <Link to="/cover-art" className="button mt-2">Browse All Art</Link>
 
       <h3>How can I contribute?</h3>
       <p>

app/javascript/components/routes/routes.js

@@ -22,6 +22,7 @@ import TopShows, { topShowsLoader } from "../TopShows";
 import TopTracks, { topTracksLoader } from "../TopTracks";
 import VenueIndex, { venueIndexLoader } from "../VenueIndex";
 import VenueShows, { venueShowsLoader } from "../VenueShows";
+import CoverArtInspector, { coverArtInspectorLoader } from "../CoverArtInspector";
 
 // Simple pages with no sidebar
 import ApiDocs from "../pages/ApiDocs";
@@ -181,6 +182,11 @@ const routes = (props) => [
         path: "/settings",
         element: <Settings />,
       },
+      {
+        path: "/cover-art",
+        element: <CoverArtInspector />,
+        loader: coverArtInspectorLoader,
+      },
       {
         path: "*",
         element: <DynamicRoute />,

app/javascript/stylesheets/content.css.scss

@@ -439,6 +439,31 @@ main {
   }
 }
 
+.cover-art-inspector-container {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
+  gap: 1rem;
+  padding: 1rem;
+  width: 100%;
+
+  .cover-art-inspector {
+    width: 128px;
+    height: 128px;
+    border-radius: 8px;
+    object-fit: cover;
+    transition: transform 0.2s ease;
+
+    &:hover {
+      transform: scale(1.05);
+      cursor: pointer;
+    }
+  }
+
+  .cover-art {
+    background-color: transparent !important;
+  }
+}
+
 .grid-view {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));