Cleanup

jcraigk · Oct 4, 2024 · d310c08 · d310c08
1 parent 9b7f9bc
commit d310c08
Show file tree

Hide file tree

Showing 6 changed files with 81 additions and 26 deletions.
diff --git a/app/javascript/components/CoverArt.jsx b/app/javascript/components/CoverArt.jsx
@@ -1,24 +1,43 @@
-import React from "react";
+import React, { useState } from "react";
 
 const CoverArt = ({ coverArtUrls, albumCoverUrl, openAppModal, size }) => {
+  const [isLoaded, setIsLoaded] = useState(false);
+
   const handleOpenModal = () => {
     if (!openAppModal) return;
     const modalContent = (
-      <div className="large-album-art">
-        <img src={albumCoverUrl || coverArtUrls?.medium} alt="Cover art" />
-      </div>
+      <>
+        {albumCoverUrl && (
+          <div className="large-album-art">
+            <img src={albumCoverUrl} alt="Album cover" />
+          </div>
+        )}
+        {coverArtUrls?.medium && (
+          <div className="large-album-art mt-3">
+            <img src={coverArtUrls?.medium} alt="Cover art" />
+          </div>
+        )}
+      </>
     );
     openAppModal(modalContent);
   };
 
+  const handleImageLoad = () => {
+    setIsLoaded(true);
+  };
+
   return (
-    <span className="cover-art cover-art-modal-trigger" onClick={handleOpenModal}>
+    <div
+      className={`cover-art cover-art-modal-trigger ${isLoaded ? "" : "loading-shimmer"}`}
+      onClick={handleOpenModal}
+    >
       <img
         src={size === "large" ? coverArtUrls?.medium : coverArtUrls?.small}
         alt="Cover art"
         className={size === "large" ? "cover-art-large" : "cover-art-small"}
+        onLoad={handleImageLoad}
       />
-    </span>
+    </div>
   );
 };
 

diff --git a/app/javascript/stylesheets/layout.css.scss b/app/javascript/stylesheets/layout.css.scss
@@ -112,10 +112,58 @@ main {
   display: block;
 }
 
+.cover-art {
+  display: inline-block;
+}
+
+.loading-shimmer {
+  background: $text-gray;
+  border-radius: var(--bulma-radius);
+}
+
+.loading-shimmer::before {
+  content: "";
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  background: linear-gradient(90deg, rgba(240, 240, 240, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(240, 240, 240, 0) 100%);
+  animation: shimmer 1.5s infinite;
+}
+.list-item {
+  .loading-shimmer {
+    width: 32px !important;
+    height: 32px !important;
+  }
+}
+
+@keyframes shimmer {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+
 @media (min-width: 1024px) {
   .display-mobile-only {
     display: none !important;
   }
+
+  .sidebar-content {
+    .cover-art {
+      display: block;
+      width: 224px !important;
+      height: 230px !important;
+    }
+    .loading-shimmer {
+      width: 224px !important;
+      height: 230px !important;
+    }
+  }
 }
 
 @media (max-width: 1023px) {
@@ -128,19 +176,6 @@ main {
     top: 3px;
   }
 
-  .sidebar-title {
-    &.show-cover-title {
-      position: relative;
-      top: -10px;
-    }
-
-    .cover-art {
-      position: relative;
-      top: 10px;
-      margin-right: 0.3rem;
-    }
-  }
-
   #layout-container {
     flex-direction: column;
   }

diff --git a/app/javascript/stylesheets/modal.css.scss b/app/javascript/stylesheets/modal.css.scss
@@ -4,6 +4,7 @@
   border-radius: var(--bulma-radius);
   margin: 3rem auto auto auto;
   max-height: 600px;
+  max-width: 1200px;
   overflow: auto;
 
   &:focus {

diff --git a/app/models/concerns/has_cover_art.rb b/app/models/concerns/has_cover_art.rb
@@ -14,9 +14,9 @@ def album_cover_url
     end
 
     def generate_album_cover!
-      CoverArtPromptService.new(self).call
-      CoverArtImageService.new(self).call
-      AlbumCoverService.new(self).call
+      CoverArtPromptService.call(self)
+      CoverArtImageService.call(self)
+      AlbumCoverService.call(self)
       tracks.each(&:apply_id3_tags)
     end
 

diff --git a/app/services/cover_art_prompt_service.rb b/app/services/cover_art_prompt_service.rb
@@ -179,7 +179,7 @@ def chatgpt_response
         model: "gpt-4o",
         messages: [
           { role: "system", content: "You are an expert in generating DALL-E prompts." },
-          { role: "user", content: chatgpt_prompt }
+          { role: "user", content: }
         ]
       }.to_json
     )

diff --git a/lib/tasks/shows.rake b/lib/tasks/shows.rake
@@ -15,7 +15,7 @@ namespace :shows do
       pbar.increment
 
       if force || (show.cover_art_prompt.blank? && show.cover_art_parent_show_id.blank?)
-        CoverArtPromptService.new(show).call
+        CoverArtPromptService.call(show)
         if show.cover_art_parent_show_id.present?
           puts "PROMPT (DEFER): #{show.cover_art_parent_show_id}"
         else
@@ -24,13 +24,13 @@ namespace :shows do
       end
 
       if force || !show.cover_art.attached?
-        CoverArtImageService.new(show).call
+        CoverArtImageService.call(show)
         sleep 5 # for Dall-E API rate limiting
         puts Rails.application.routes.url_helpers.rails_blob_url(show.cover_art)
       end
 
       if force || !show.album_cover.attached?
-        AlbumCoverService.new(show).call
+        AlbumCoverService.call(show)
         puts Rails.application.routes.url_helpers.rails_blob_url(show.album_cover)
 
         # Apply cover art to mp3 files