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 = ( -
- Cover art -
+ <> + {albumCoverUrl && ( +
+ Album cover +
+ )} + {coverArtUrls?.medium && ( +
+ Cover art +
+ )} + ); openAppModal(modalContent); }; + const handleImageLoad = () => { + setIsLoaded(true); + }; + return ( - +
Cover art - +
); }; 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