diff --git a/app/javascript/components/CoverArt.jsx b/app/javascript/components/CoverArt.jsx
index 79cb7ab9..83643942 100644
--- 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 = (
-
-
-
+ <>
+ {albumCoverUrl && (
+
+
+
+ )}
+ {coverArtUrls?.medium && (
+
+
+
+ )}
+ >
);
openAppModal(modalContent);
};
+ const handleImageLoad = () => {
+ setIsLoaded(true);
+ };
+
return (
-
+
-
+
);
};
diff --git a/app/javascript/stylesheets/layout.css.scss b/app/javascript/stylesheets/layout.css.scss
index 94ff45f5..19a69654 100644
--- 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
index 0c4283a6..2d6035c6 100644
--- 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
index cb4699fb..9741bbfd 100644
--- 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
index 1a726f6f..c68ed535 100644
--- 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
index e4c79cc6..95f88f3b 100644
--- 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