MyFavMirrors/owntone-server
1
0
Fork 0
mirror of https://github.com/owntone/owntone-server.git synced 2025-02-26 04:49:18 -05:00
Code Issues Packages Projects Releases Wiki Activity

[web] Fix cover artwork display on different pages #1506

Browse Source 
On some pages, the cover artwork was overlapping or not displayed properly. Moreover, the use of the component CoverArtwork has been generalised.
This commit is contained in:
Alain Nussbaumer 2023-06-07 16:11:40 +02:00
parent 931c7477c3
commit 3a1cc63e8f
13 changed files with 125 additions and 205 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
web-src/src/components/ListAlbums.vue
View File

@ -8,20 +8,14 @@
/>
</div>
<div v-else-if="album.isItem" class="media" @click="open_album(album.item)">
<div v-if="is_visible_artwork" class="media-left fd-has-action">
<div class="image is-64x64 fd-has-shadow fd-has-action">
<figure>
<img
v-lazy="{
src: artwork_url_with_size(album.item.artwork_url),
lifecycle: artwork_options.lazy_lifecycle,
delay: 500
}"
:album="album.item.name"
<div v-if="is_visible_artwork" class="media-left">
<cover-artwork
:artwork_url="album.item.artwork_url"
:artist="album.item.artist"
:album="album.item.name"
class="fd-has-action fd-has-shadow fd-cover fd-cover-small-image"
@click="show_album_details_modal = true"
/>
</figure>
</div>
</div>
<div class="media-content fd-has-action is-clipped">
<div style="margin-top: 0.7rem">
@ -73,15 +67,14 @@
</template>
<script>
import CoverArtwork from '@/components/CoverArtwork.vue'
import ModalDialogAlbum from '@/components/ModalDialogAlbum.vue'
import ModalDialog from '@/components/ModalDialog.vue'
import webapi from '@/webapi'
import { renderSVG } from '@/lib/SVGRenderer'
export default {
name: 'ListAlbums',
components: { ModalDialogAlbum, ModalDialog },
components: { CoverArtwork, ModalDialogAlbum, ModalDialog },
props: ['albums', 'media_kind', 'hide_group_title'],
emits: ['play-count-changed', 'podcast-deleted'],
@ -89,25 +82,8 @@ export default {
return {
show_details_modal: false,
selected_album: {},
show_remove_podcast_modal: false,
rss_playlist_to_remove: {},
artwork_options: {
width: 600,
height: 600,
font_family: 'sans-serif',
font_size: 200,
font_weight: 600,
lazy_lifecycle: {
error: (el) => {
el.src = this.dataURI(
el.attributes.album.value,
el.attributes.artist.value
)
}
}
}
rss_playlist_to_remove: {}
}
},
@ -166,43 +142,6 @@ export default {
.then(() => {
this.$emit('podcast-deleted')
})
},
artwork_url_with_size: function (artwork_url) {
if (this.artwork_options.width > 0 && this.artwork_options.height > 0) {
return webapi.artwork_url_append_size_params(
artwork_url,
this.artwork_options.width,
this.artwork_options.height
)
}
return webapi.artwork_url_append_size_params(artwork_url)
},
alt_text(album, artist) {
return artist + ' - ' + album
},
caption(album, artist) {
if (album) {
return album.substring(0, 2)
}
if (artist) {
return artist.substring(0, 2)
}
return ''
},
dataURI: function (album, artist) {
const caption = this.caption(album, artist)
const alt_text = this.alt_text(album, artist)
return renderSVG(caption, alt_text, {
width: this.artwork_options.width,
height: this.artwork_options.height,
font_family: this.artwork_options.font_family,
font_size: this.artwork_options.font_size,
font_weight: this.artwork_options.font_weight
})
}
}
}

2
web-src/src/components/ModalDialogAlbum.vue
View File

@ -10,7 +10,7 @@
:artwork_url="album.artwork_url"
:artist="album.artist"
:album="album.name"
class="image is-square fd-has-margin-bottom fd-has-shadow"
class="fd-has-shadow fd-has-margin-bottom fd-cover fd-cover-normal-image"
/>
<p class="title is-4">
<a

15
web-src/src/components/SpotifyModalDialogAlbum.vue
View File

@ -6,17 +6,14 @@
<div class="modal-content fd-modal-card">
<div class="card">
<div class="card-content">
<figure
v-show="artwork_visible"
class="image is-square fd-has-margin-bottom"
>
<img
:src="artwork_url"
class="fd-has-shadow"
<cover-artwork
:artwork_url="artwork_url"
:artist="album.artist"
:album="album.name"
class="fd-has-shadow fd-has-margin-bottom fd-cover fd-cover-normal-image"
@load="artwork_loaded"
@error="artwork_error"
/>
</figure>
<p class="title is-4">
<a
class="has-text-link"
@ -96,9 +93,11 @@
<script>
import webapi from '@/webapi'
import CoverArtwork from '@/components/CoverArtwork.vue'
export default {
name: 'SpotifyModalDialogAlbum',
components: { CoverArtwork },
props: ['show', 'album'],
emits: ['close'],

85
web-src/src/mystyles.scss
View File

@ -126,7 +126,7 @@ section.hero + section.fd-content {
top: 52px !important;
}
.fd-has-shadow {
.fd-has-shadow img {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
@ -154,51 +154,50 @@ section.hero + section.fd-content {
}
.fd-is-fullheight .fd-is-expanded {
max-height: calc(100vh - 25rem);
padding: 1.5rem;
overflow: hidden;
flex-grow: 1;
flex-shrink: 1;
/* Use flex box to properly size children */
display: flex;
}
.fd-cover-image {
.fd-cover {
display: flex;
flex-grow: 1;
flex-shrink: 1;
/* Allow flex item to shrink smaller than its content size: https://stackoverflow.com/questions/36247140/why-dont-flex-items-shrink-past-content-size */
min-width: 0;
min-height: 0;
overflow: hidden;
/* Padding matches the drop-shadow size of the image */
padding: 10px;
}
.fd-cover-image img {
/* Use object-fit to properly size the cover artwork: https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit */
object-fit: contain;
object-position: center bottom;
filter: drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.3))
drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.3));
/* Allow flex item to grow/shrink to fill the whole container size */
flex-grow: 1;
flex-shrink: 1;
/* Unset height/width to allow flex sizing */
height: unset;
width: unset;
max-width: unset;
max-height: unset;
/* Allow flex item to shrink smaller than its content size: https://stackoverflow.com/questions/36247140/why-dont-flex-items-shrink-past-content-size */
min-width: 0;
min-height: 0;
overflow: hidden;
justify-content: center;
&-small-image {
width: 64px;
height: 64px;
img {
border-radius: $radius-small;
max-width: 64px;
max-height: 64px;
}
}
&-medium-image {
@include from($tablet) {
justify-content: right;
}
img {
border-radius: $radius;
max-height: calc(150px - 1.5rem);
}
}
&-normal-image {
img {
border-radius: $radius-large;
width: 100%;
}
}
&-big-image {
@include mobile {
@media screen and (orientation: landscape) {
img {
display: none;
}
}
}
img {
border-radius: $radius-large;
max-height: calc(100vh - 26rem);
}
}
}
.sortable-chosen .media-right {
@ -296,13 +295,11 @@ hr.fd-navbar-divider {
.column {
&.fd-has-cover {
max-height: 150px;
max-width: 150px;
@include mobile {
margin: auto;
}
@include from($tablet) {
margin: auto 0 auto auto;
margin-right: 0;
}
}
}

3
web-src/src/pages/PageAlbum.vue
View File

@ -19,14 +19,13 @@
</div>
</template>
<template #heading-right>
<p class="image is-square fd-has-shadow fd-has-action">
<cover-artwork
:artwork_url="album.artwork_url"
:artist="album.artist"
:album="album.name"
class="fd-has-action fd-has-shadow fd-cover fd-cover-medium-image"
@click="show_album_details_modal = true"
/>
</p>
</template>
<template #content>
<p

8
web-src/src/pages/PageAudiobooksAlbum.vue
View File

@ -19,14 +19,13 @@
</div>
</template>
<template #heading-right>
<p class="image is-square fd-has-shadow fd-has-action">
<cover-artwork
:artwork_url="album.artwork_url"
:artist="album.artist"
:album="album.name"
class="fd-has-action fd-has-shadow fd-cover fd-cover-medium-image"
@click="show_album_details_modal = true"
/>
</p>
</template>
<template #content>
<p
@ -101,11 +100,6 @@ export default {
play: function () {
webapi.player_play_uri(this.album.uri, false)
},
open_dialog: function (track) {
this.selected_track = track
this.show_details_modal = true
}
}
}

6
web-src/src/pages/PageNowPlaying.vue
View File

@ -1,19 +1,17 @@
<template>
<section>
<div v-if="now_playing.id > 0" class="fd-is-fullheight">
<div class="fd-is-expanded">
<cover-artwork
:artwork_url="now_playing.artwork_url"
:artist="now_playing.artist"
:album="now_playing.album"
class="fd-cover-image fd-has-action"
class="fd-has-action fd-has-shadow fd-is-expanded fd-cover fd-cover-big-image"
@click="open_dialog(now_playing)"
/>
</div>
<div class="fd-has-padding-left-right">
<div class="container has-text-centered">
<p class="control has-text-centered fd-progress-now-playing">
<Slider
<slider
ref="slider"
v-model="item_progress_ms"
:min="0"

3
web-src/src/pages/SpotifyPageAlbum.vue
View File

@ -23,14 +23,13 @@
</div>
</template>
<template #heading-right>
<p class="image is-square fd-has-shadow fd-has-action">
<cover-artwork
:artwork_url="artwork_url"
:artist="album.artist"
:album="album.name"
class="fd-has-action fd-has-shadow fd-cover fd-cover-medium-image"
@click="show_album_details_modal = true"
/>
</p>
</template>
<template #content>
<p

3
web-src/src/pages/SpotifyPageArtist.vue
View File

@ -29,15 +29,14 @@
@click="open_album(album)"
>
<template v-if="is_visible_artwork" #artwork>
<p class="image is-64x64 fd-has-shadow fd-has-action">
<cover-artwork
:artwork_url="artwork_url(album)"
:artist="album.artist"
:album="album.name"
class="fd-has-action fd-has-shadow fd-cover fd-cover-small-image"
:maxwidth="64"
:maxheight="64"
/>
</p>
</template>
<template #actions>
<a @click.prevent.stop="open_dialog(album)">

3
web-src/src/pages/SpotifyPageBrowse.vue
View File

@ -14,15 +14,14 @@
@click="open_album(album)"
>
<template v-if="is_visible_artwork" #artwork>
<p class="image is-64x64 fd-has-shadow fd-has-action">
<cover-artwork
:artwork_url="artwork_url(album)"
:artist="album.artist"
:album="album.name"
class="fd-has-action fd-has-shadow fd-cover fd-cover-small-image"
:maxwidth="64"
:maxheight="64"
/>
</p>
</template>
<template #actions>
<a @click.prevent.stop="open_album_dialog(album)">

3
web-src/src/pages/SpotifyPageBrowseNewReleases.vue
View File

@ -13,15 +13,14 @@
@click="open_album(album)"
>
<template v-if="is_visible_artwork" #artwork>
<p class="image is-64x64 fd-has-shadow fd-has-action">
<cover-artwork
:artwork_url="artwork_url(album)"
:artist="album.artist"
:album="album.name"
class="fd-has-action fd-has-shadow fd-cover fd-cover-small-image"
:maxwidth="64"
:maxheight="64"
/>
</p>
</template>
<template #actions>
<a @click.prevent.stop="open_album_dialog(album)">

3
web-src/src/pages/SpotifyPageSearch.vue
View File

@ -157,15 +157,14 @@
@click="open_album(album)"
>
<template v-if="is_visible_artwork" #artwork>
<p class="image is-64x64 fd-has-shadow fd-has-action">
<cover-artwork
:artwork_url="artwork_url(album)"
:artist="album.artist"
:album="album.name"
class="fd-has-action fd-has-shadow fd-cover fd-cover-small-image"
:maxwidth="64"
:maxheight="64"
/>
</p>
</template>
<template #actions>
<a @click.prevent.stop="open_album_dialog(album)">

3
web-src/src/templates/ContentWithHero.vue
View File

@ -11,8 +11,7 @@
<slot name="heading-right" />
</div>
<div
class="column is-three-fifths has-text-centered-mobile"
style="margin: auto 0"
class="column m-auto is-three-fifths has-text-centered-mobile"
>
<!-- Slot heading left -->
<slot name="heading-left" />