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 <deluan@navidrome.org>

* square share player

---------

Signed-off-by: Deluan <deluan@navidrome.org>
Co-authored-by: Deluan <deluan@navidrome.org>

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

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,
     }

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}`