From 91c98bc11c4aad43b3a8f0cebed08730e93e00e6 Mon Sep 17 00:00:00 2001 From: emeric Date: Fri, 14 Feb 2025 16:53:02 +0100 Subject: [PATCH] Can now click on the release artwork to see it fullscreen --- approot/release.xml | 14 +++++++++++++- docroot/css/lms.css | 24 ++++++++++++++++++++++++ src/lms/ui/ModalManager.cpp | 16 +++++++++------- src/lms/ui/explore/ReleaseView.cpp | 13 ++++++++++++- src/lms/ui/resource/ArtworkResource.cpp | 21 ++++++++++++++------- src/lms/ui/resource/ArtworkResource.hpp | 12 +++++++----- 6 files changed, 79 insertions(+), 21 deletions(-) diff --git a/approot/release.xml b/approot/release.xml index 8badeed3..128582d2 100644 --- a/approot/release.xml +++ b/approot/release.xml @@ -9,7 +9,7 @@
- ${cover} + ${cover class="Lms-cursor-pointer"}

${name}${}[${comment}]${}

@@ -45,6 +45,18 @@ ${} + +
+
+
+
+ ${cover-full class="Lms-cover-full"} +
+
+
+
+ + ${artist class="text-decoration-none link-success"} diff --git a/docroot/css/lms.css b/docroot/css/lms.css index 11956758..cee169a6 100644 --- a/docroot/css/lms.css +++ b/docroot/css/lms.css @@ -87,6 +87,30 @@ body { min-width: 64px; } +.Lms-cover-full-modal-dialog { + width: auto; + max-width: none; + max-height: 90vh; + display: flex; + align-items: center; + justify-content: center; +} + +.Lms-cover-full { + max-width: 100%; + max-height: 95vh; + width: auto; + height: auto; + display: block; + margin: auto; + cursor: pointer; + object-fit: contain; +} + +.Lms-cursor-pointer { + cursor: pointer; +} + #lms-mp-progress { transition: none; } diff --git a/src/lms/ui/ModalManager.cpp b/src/lms/ui/ModalManager.cpp index e2a5290f..0cc3149c 100644 --- a/src/lms/ui/ModalManager.cpp +++ b/src/lms/ui/ModalManager.cpp @@ -44,22 +44,24 @@ namespace lms::ui void ModalManager::show(std::unique_ptr modalWidget) { LMS_LOG(UI, DEBUG, "Want to show, id = " << modalWidget->id()); + Wt::WWidget* modal{ modalWidget.get() }; + addWidget(std::move(modalWidget)); std::ostringstream oss; oss - << R"({const modalElement = )" << jsRef() << R"(.getElementsByClassName('modal')[0];)" - << R"(const modal = bootstrap.Modal.getOrCreateInstance(modalElement);)" + << R"({const modalElementParent = document.getElementById(')" << modal->id() << R"(');)" + << R"(const modalElement = modalElementParent.getElementsByClassName('modal')[0];)" + << R"(const modal = bootstrap.Modal.getOrCreateInstance(modalElement,{backdrop:true, keyboard:true, focus:true});)" << R"(modal.show();)" << R"(modalElement.addEventListener('hidden.bs.modal', function () {)" - << _closed.createCall({ "'" + modalWidget->id() + "'" }) + << _closed.createCall({ "'" + modal->id() + "'" }) << R"(modal.dispose();)" << R"(});})"; LMS_LOG(UI, DEBUG, "Running JS '" << oss.str() << "'"); - doJavaScript(oss.str()); - - addWidget(std::move(modalWidget)); + // Execute in the modal's context to make sure the DOM is properly updated + modal->doJavaScript(oss.str()); } void ModalManager::dispose(Wt::WWidget* modalWidget) @@ -74,6 +76,6 @@ namespace lms::ui LMS_LOG(UI, DEBUG, "Running JS '" << oss.str() << "'"); - doJavaScript(oss.str()); + modalWidget->doJavaScript(oss.str()); } } // namespace lms::ui diff --git a/src/lms/ui/explore/ReleaseView.cpp b/src/lms/ui/explore/ReleaseView.cpp index ff2a191d..a8507f0b 100644 --- a/src/lms/ui/explore/ReleaseView.cpp +++ b/src/lms/ui/explore/ReleaseView.cpp @@ -24,6 +24,7 @@ #include #include #include +#include #include "av/IAudioFile.hpp" #include "core/String.hpp" @@ -257,7 +258,17 @@ namespace lms::ui refreshReleaseArtists(release); - bindWidget("cover", utils::createReleaseCover(release->getId(), ArtworkResource::Size::Large)); + auto* image{ bindWidget("cover", utils::createReleaseCover(release->getId(), ArtworkResource::Size::Large)) }; + image->clicked().connect([=] { + auto fullCover{ std::make_unique(Wt::WString::tr("Lms.Explore.Release.template.full-cover")) }; + fullCover->bindNew("cover-full", Wt::WLink{ LmsApp->getArtworkResource()->getReleaseCoverUrl(*releaseId) }); + + Wt::WTemplate* fullCoverPtr{ fullCover.get() }; + fullCover->clicked().connect([=] { + LmsApp->getModalManager().dispose(fullCoverPtr); + }); + LmsApp->getModalManager().show(std::move(fullCover)); + }); Wt::WContainerWidget* clusterContainers{ bindNew("clusters") }; { diff --git a/src/lms/ui/resource/ArtworkResource.cpp b/src/lms/ui/resource/ArtworkResource.cpp index 70d4ea6d..a085298b 100644 --- a/src/lms/ui/resource/ArtworkResource.cpp +++ b/src/lms/ui/resource/ArtworkResource.cpp @@ -52,7 +52,7 @@ namespace lms::ui beingDeleted(); } - std::string ArtworkResource::getArtistImageUrl(db::ArtistId artistId, Size size) const + std::string ArtworkResource::getArtistImageUrl(db::ArtistId artistId, std::optional size) const { std::string url; @@ -73,7 +73,7 @@ namespace lms::ui return url; } - std::string ArtworkResource::getReleaseCoverUrl(db::ReleaseId releaseId, Size size) const + std::string ArtworkResource::getReleaseCoverUrl(db::ReleaseId releaseId, std::optional size) const { std::string url; @@ -107,7 +107,7 @@ namespace lms::ui return url; } - std::string ArtworkResource::getTrackImageUrl(db::TrackId trackId, Size size) const + std::string ArtworkResource::getTrackImageUrl(db::TrackId trackId, std::optional size) const { std::string url; @@ -135,14 +135,21 @@ namespace lms::ui return url; } - std::string ArtworkResource::getImageUrl(db::ImageId imageId, Size size, std::string_view type) const + std::string ArtworkResource::getImageUrl(db::ImageId imageId, std::optional size, std::string_view type) const { - return url() + "&imageid=" + imageId.toString() + "&size=" + std::to_string(static_cast(size)) + "&type=" + std::string{ type }; + std::string res{ url() + "&imageid=" + imageId.toString() + "&type=" + std::string{ type } }; + if (size) + res += "&size=" + std::to_string(static_cast(*size)); + + return res; } - std::string ArtworkResource::getImageUrl(db::TrackId trackId, Size size, std::string_view type) const + std::string ArtworkResource::getImageUrl(db::TrackId trackId, std::optional size, std::string_view type) const { - return url() + "&trackid=" + trackId.toString() + "&size=" + std::to_string(static_cast(size)) + "&type=" + std::string{ type }; + std::string res{ url() + "&trackid=" + trackId.toString() + "&type=" + std::string{ type } }; + if (size) + res += "&size=" + std::to_string(static_cast(*size)); + return res; } std::string ArtworkResource::getDefaultArtistImageUrl() const diff --git a/src/lms/ui/resource/ArtworkResource.hpp b/src/lms/ui/resource/ArtworkResource.hpp index e3ba4a1c..a6adb692 100644 --- a/src/lms/ui/resource/ArtworkResource.hpp +++ b/src/lms/ui/resource/ArtworkResource.hpp @@ -19,6 +19,8 @@ #pragma once +#include + #include #include "database/ArtistId.hpp" @@ -42,13 +44,13 @@ namespace lms::ui Large = 512, }; - std::string getArtistImageUrl(db::ArtistId artistId, Size size) const; - std::string getReleaseCoverUrl(db::ReleaseId releaseId, Size size) const; - std::string getTrackImageUrl(db::TrackId trackId, Size size) const; + std::string getArtistImageUrl(db::ArtistId artistId, std::optional size = std::nullopt) const; + std::string getReleaseCoverUrl(db::ReleaseId releaseId, std::optional size = std::nullopt) const; + std::string getTrackImageUrl(db::TrackId trackId, std::optional size = std::nullopt) const; private: - std::string getImageUrl(db::ImageId imageId, Size size, std::string_view type) const; - std::string getImageUrl(db::TrackId trackId, Size size, std::string_view type) const; + std::string getImageUrl(db::ImageId imageId, std::optional size, std::string_view type) const; + std::string getImageUrl(db::TrackId trackId, std::optional size, std::string_view type) const; std::string getDefaultArtistImageUrl() const; std::string getDefaultReleaseCoverUrl() const;