From 5050250902a5706562608862af26c587b85513aa Mon Sep 17 00:00:00 2001 From: Kendall Garner <17521368+kgarner7@users.noreply.github.com> Date: Mon, 26 May 2025 21:39:05 +0000 Subject: [PATCH] fix(share): force share image to be square (to fix aspect ratio) (#4122) * fix(ui): update artist link rendering and improve button styles Signed-off-by: Deluan * square share player --------- Signed-off-by: Deluan Co-authored-by: Deluan --- server/public/handle_images.go | 3 ++- ui/src/share/SharePlayer.jsx | 2 +- ui/src/utils/urls.js | 10 ++++++++-- 3 files changed, 11 insertions(+), 4 deletions(-) diff --git a/server/public/handle_images.go b/server/public/handle_images.go index f178692f..55a851c6 100644 --- a/server/public/handle_images.go +++ b/server/public/handle_images.go @@ -37,8 +37,9 @@ func (pub *Router) handleImages(w http.ResponseWriter, r *http.Request) { return } size := p.IntOr("size", 0) + square := p.BoolOr("square", false) - imgReader, lastUpdate, err := pub.artwork.Get(ctx, artId, size, false) + imgReader, lastUpdate, err := pub.artwork.Get(ctx, artId, size, square) switch { case errors.Is(err, context.Canceled): return diff --git a/ui/src/share/SharePlayer.jsx b/ui/src/share/SharePlayer.jsx index 38493d3c..2c50275e 100644 --- a/ui/src/share/SharePlayer.jsx +++ b/ui/src/share/SharePlayer.jsx @@ -29,7 +29,7 @@ const SharePlayer = () => { return { name: s.title, musicSrc: shareStreamUrl(s.id), - cover: shareCoverUrl(s.id), + cover: shareCoverUrl(s.id, true), singer: s.artist, duration: s.duration, } diff --git a/ui/src/utils/urls.js b/ui/src/utils/urls.js index fdae496e..5788096d 100644 --- a/ui/src/utils/urls.js +++ b/ui/src/utils/urls.js @@ -33,8 +33,14 @@ export const shareDownloadUrl = (id) => { return shareUrl(config.publicBaseUrl + '/d/' + id) } -export const shareCoverUrl = (id) => { - return shareUrl(config.publicBaseUrl + '/img/' + id + '?size=300') +export const shareCoverUrl = (id, square) => { + return shareUrl( + config.publicBaseUrl + + '/img/' + + id + + '?size=300' + + (square ? '&square=true' : ''), + ) } export const docsUrl = (path) => `https://www.navidrome.org${path}`