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

[web] Renaming image control

Browse Source
This commit is contained in:
Alain Nussbaumer 2025-02-15 22:55:01 +01:00
parent 26a03a1219
commit eca8f40afc
11 changed files with 51 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
web-src/src/components/CoverArtwork.vue → web-src/src/components/ControlImage.vue
View File

@ -1,5 +1,5 @@
<template>
<figure class="cover has-shadow">
<figure class="figure has-shadow">
<img v-lazy="{ src: url, lifecycle }" @click="$emit('click')" />
</figure>
</template>
@ -8,14 +8,13 @@
import { renderSVG } from '@/lib/SVGRenderer'
export default {
name: 'CoverArtwork',
name: 'ControlImage',
props: {
album: { default: '', type: String },
artist: { default: '', type: String },
url: { default: '', type: String }
},
emits: ['click'],
data() {
return {
font: { family: 'sans-serif', weight: 'bold' },
@ -27,22 +26,11 @@ export default {
size: 600
}
},
computed: {
alt_text() {
return `${this.artist} - ${this.album}`
},
caption() {
return (this.album || this.artist || '').substring(0, 2)
}
},
methods: {
dataURI() {
return renderSVG({
alternate: this.alt_text,
caption: this.caption,
alternate: `${this.artist} - ${this.album}`,
caption: (this.album || this.artist || '').substring(0, 2),
font: this.font,
size: this.size
})
@ -54,7 +42,7 @@ export default {
<style lang="scss" scoped>
@use 'bulma/sass/utilities/mixins';
.cover {
.figure {
align-items: center;
display: flex;
justify-content: center;

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

@ -12,7 +12,7 @@
class="media is-align-items-center is-clickable mb-0"
@click="open(item.item)"
>
<cover-artwork
<control-image
v-if="settingsStore.show_cover_artwork_in_album_lists"
:url="item.item.artwork_url"
:artist="item.item.artist"
@ -69,7 +69,7 @@
</template>
<script>
import CoverArtwork from '@/components/CoverArtwork.vue'
import ControlImage from '@/components/ControlImage.vue'
import ModalDialog from '@/components/ModalDialog.vue'
import ModalDialogAlbum from '@/components/ModalDialogAlbum.vue'
import { useSettingsStore } from '@/stores/settings'
@ -77,7 +77,7 @@ import webapi from '@/webapi'
export default {
name: 'ListAlbums',
components: { CoverArtwork, ModalDialog, ModalDialogAlbum },
components: { ControlImage, ModalDialog, ModalDialogAlbum },
props: {
items: { required: true, type: Object },
media_kind: { default: '', type: String }

6
web-src/src/components/ListAlbumsSpotify.vue
View File

@ -4,7 +4,7 @@
class="media is-align-items-center is-clickable mb-0"
@click="open(item)"
>
<cover-artwork
<control-image
v-if="settingsStore.show_cover_artwork_in_album_lists"
:url="item.images?.[0]?.url ?? ''"
:artist="item.artist"
@ -39,13 +39,13 @@
</template>
<script>
import CoverArtwork from '@/components/CoverArtwork.vue'
import ControlImage from '@/components/ControlImage.vue'
import ModalDialogAlbumSpotify from '@/components/ModalDialogAlbumSpotify.vue'
import { useSettingsStore } from '@/stores/settings'
export default {
name: 'ListAlbumsSpotify',
components: { CoverArtwork, ModalDialogAlbumSpotify },
components: { ControlImage, ModalDialogAlbumSpotify },
props: { items: { required: true, type: Object } },
setup() {
return { settingsStore: useSettingsStore() }

6
web-src/src/components/ListProperties.vue
View File

@ -3,7 +3,7 @@
<a v-if="item.handler" @click="item.handler" v-text="item.name"></a>
<span v-else v-text="item.name" />
</div>
<cover-artwork
<control-image
v-if="item.image"
:url="item.image"
:artist="item.artist"
@ -29,11 +29,11 @@
</template>
<script>
import CoverArtwork from '@/components/CoverArtwork.vue'
import ControlImage from '@/components/ControlImage.vue'
export default {
name: 'ListProperties',
components: { CoverArtwork },
components: { ControlImage },
props: {
item: { required: true, type: Object }
}

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

@ -34,17 +34,6 @@
}
}
.column {
&.has-cover {
@include mixins.mobile {
margin: auto;
}
@include mixins.tablet {
margin-right: 0;
}
}
}
.overlay-fullscreen {
@extend .is-overlay;
z-index: 25;

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

@ -20,7 +20,7 @@
</div>
</template>
<template #heading-right>
<cover-artwork
<control-image
:url="album.artwork_url"
:artist="album.artist"
:album="album.name"
@ -46,7 +46,7 @@
<script>
import ContentWithHero from '@/templates/ContentWithHero.vue'
import CoverArtwork from '@/components/CoverArtwork.vue'
import ControlImage from '@/components/ControlImage.vue'
import { GroupedList } from '@/lib/GroupedList'
import ListTracks from '@/components/ListTracks.vue'
import ModalDialogAlbum from '@/components/ModalDialogAlbum.vue'
@ -74,14 +74,12 @@ const dataObject = {
export default {
name: 'PageAlbum',
components: { ContentWithHero, CoverArtwork, ListTracks, ModalDialogAlbum },
components: { ContentWithHero, ControlImage, ListTracks, ModalDialogAlbum },
beforeRouteEnter(to, from, next) {
dataObject.load(to).then((response) => {
next((vm) => dataObject.set(vm, response))
})
},
data() {
return {
album: {},
@ -89,7 +87,6 @@ export default {
tracks: new GroupedList()
}
},
methods: {
open_artist() {
this.show_details_modal = false

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

@ -20,7 +20,7 @@
</div>
</template>
<template #heading-right>
<cover-artwork
<control-image
:url="album.images?.[0]?.url ?? ''"
:artist="album.artists[0].name"
:album="album.name"
@ -48,7 +48,7 @@
<script>
import ContentWithHero from '@/templates/ContentWithHero.vue'
import CoverArtwork from '@/components/CoverArtwork.vue'
import ControlImage from '@/components/ControlImage.vue'
import ListTracksSpotify from '@/components/ListTracksSpotify.vue'
import ModalDialogAlbumSpotify from '@/components/ModalDialogAlbumSpotify.vue'
import SpotifyWebApi from 'spotify-web-api-js'
@ -72,7 +72,7 @@ export default {
name: 'PageAlbumSpotify',
components: {
ContentWithHero,
CoverArtwork,
ControlImage,
ListTracksSpotify,
ModalDialogAlbumSpotify
},

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

@ -20,7 +20,7 @@
</div>
</template>
<template #heading-right>
<cover-artwork
<control-image
:url="album.artwork_url"
:artist="album.artist"
:album="album.name"
@ -51,7 +51,7 @@
<script>
import ContentWithHero from '@/templates/ContentWithHero.vue'
import CoverArtwork from '@/components/CoverArtwork.vue'
import ControlImage from '@/components/ControlImage.vue'
import { GroupedList } from '@/lib/GroupedList'
import ListTracks from '@/components/ListTracks.vue'
import ModalDialogAlbum from '@/components/ModalDialogAlbum.vue'
@ -73,14 +73,12 @@ const dataObject = {
export default {
name: 'PageAudiobooksAlbum',
components: { ContentWithHero, CoverArtwork, ListTracks, ModalDialogAlbum },
components: { ContentWithHero, ControlImage, ListTracks, ModalDialogAlbum },
beforeRouteEnter(to, from, next) {
dataObject.load(to).then((response) => {
next((vm) => dataObject.set(vm, response))
})
},
data() {
return {
album: {},
@ -88,7 +86,6 @@ export default {
tracks: new GroupedList()
}
},
methods: {
open_artist() {
this.show_details_modal = false

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

@ -3,7 +3,7 @@
<div class="hero-body is-flex is-align-items-center">
<div class="container has-text-centered">
<div v-if="track.id" class="mx-auto" style="max-width: 32rem">
<cover-artwork
<control-image
:url="track.artwork_url"
:artist="track.artist"
:album="track.album"
@ -54,8 +54,8 @@
</template>
<script>
import ControlImage from '@/components/ControlImage.vue'
import ControlSlider from '@/components/ControlSlider.vue'
import CoverArtwork from '@/components/CoverArtwork.vue'
import LyricsPane from '@/components/LyricsPane.vue'
import ModalDialogQueueItem from '@/components/ModalDialogQueueItem.vue'
import { useLyricsStore } from '@/stores/lyrics'
@ -70,11 +70,10 @@ export default {
name: 'PageNowPlaying',
components: {
ControlSlider,
CoverArtwork,
ControlImage,
LyricsPane,
ModalDialogQueueItem
},
setup() {
return {
lyricsStore: useLyricsStore(),
@ -83,7 +82,6 @@ export default {
settingsStore: useSettingsStore()
}
},
data() {
return {
INTERVAL,
@ -93,7 +91,6 @@ export default {
show_details_modal: false
}
},
computed: {
composer() {
if (this.settingsStore.show_composer_now_playing) {
@ -140,7 +137,6 @@ export default {
: this.$filters.durationInHours(this.track.length_ms)
}
},
watch: {
'playerStore.state'(newState) {
if (this.interval_id > 0) {
@ -152,7 +148,6 @@ export default {
}
}
},
created() {
webapi.player_status().then(({ data }) => {
this.playerStore.$state = data
@ -161,14 +156,12 @@ export default {
}
})
},
unmounted() {
if (this.interval_id > 0) {
window.clearTimeout(this.interval_id)
this.interval_id = 0
}
},
methods: {
end_dragging() {
this.is_dragged = false

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

@ -20,7 +20,7 @@
</div>
</template>
<template #heading-right>
<cover-artwork
<control-image
:url="album.artwork_url"
:artist="album.artist"
:album="album.name"
@ -71,7 +71,7 @@
<script>
import ContentWithHero from '@/templates/ContentWithHero.vue'
import CoverArtwork from '@/components/CoverArtwork.vue'
import ControlImage from '@/components/ControlImage.vue'
import { GroupedList } from '@/lib/GroupedList'
import ListTracks from '@/components/ListTracks.vue'
import ModalDialog from '@/components/ModalDialog.vue'
@ -96,7 +96,7 @@ export default {
name: 'PagePodcast',
components: {
ContentWithHero,
CoverArtwork,
ControlImage,
ListTracks,
ModalDialog,
ModalDialogAlbum

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

@ -5,7 +5,7 @@
<div class="columns is-centered">
<div class="column is-four-fifths">
<div class="columns is-flex-direction-row-reverse">
<div class="column has-cover">
<div class="column has-image">
<slot name="heading-right" />
</div>
<div
@ -30,3 +30,24 @@
</div>
</section>
</template>
<script>
export default {
name: 'ContentWithHero'
}
</script>
<style lang="scss" scoped>
@use 'bulma/sass/utilities/mixins';
.column {
&.has-image {
@include mixins.mobile {
margin: auto;
}
@include mixins.tablet {
margin-right: 0;
}
}
}
</style>