mirror of
https://github.com/owntone/owntone-server.git
synced 2025-11-09 21:49:48 -05:00
[web-src] Generate cover image if not available for now playing page,
and some styling changes for the navbars
This commit is contained in:
chme
@@ -1,98 +1,66 @@
|
||||
<template>
|
||||
<section class="fd-is-fullheight" style="display: flex; flex-direction: column;">
|
||||
<div class="" style="max-height: calc(100vh - 25rem); padding: 1.5rem; overflow: hidden; flex-grow: 1;flex-shrink: 1;" v-show="artwork_visible">
|
||||
<img :src="artwork_url"
|
||||
class="fd-has-action"
|
||||
style="width: 100%;height: 100%;object-fit: contain;filter: drop-shadow(0px 0px 1px rgba(0,0,0,.3)) drop-shadow(0px 0px 10px rgba(0,0,0,.3));"
|
||||
@load="artwork_loaded"
|
||||
@error="artwork_error"
|
||||
@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">
|
||||
<range-slider
|
||||
class="seek-slider fd-has-action"
|
||||
min="0"
|
||||
:max="state.item_length_ms"
|
||||
:value="item_progress_ms"
|
||||
:disabled="state.state === 'stop'"
|
||||
step="1000"
|
||||
@change="seek" >
|
||||
</range-slider>
|
||||
</p>
|
||||
<p class="content">
|
||||
<span>{{ item_progress_ms | duration }} / {{ now_playing.length_ms | duration }}</span>
|
||||
</p>
|
||||
<section>
|
||||
<div v-if="now_playing.id > 0" class="fd-is-fullheight">
|
||||
<div class="fd-is-expanded">
|
||||
<figure @click="open_dialog(now_playing)" class="fd-cover-image">
|
||||
<img
|
||||
v-show="artwork_visible"
|
||||
:src="artwork_url"
|
||||
class="fd-has-action"
|
||||
@load="artwork_loaded"
|
||||
@error="artwork_error">
|
||||
<cover-placeholder
|
||||
v-show="!artwork_visible"
|
||||
:artist="now_playing.artist"
|
||||
:album="now_playing.album"
|
||||
class="fd-has-action" />
|
||||
</figure>
|
||||
</div>
|
||||
<div class="fd-has-padding-left-right">
|
||||
<div class="container has-text-centered">
|
||||
<p class="control has-text-centered fd-progress-now-playing">
|
||||
<range-slider
|
||||
class="seek-slider fd-has-action"
|
||||
min="0"
|
||||
:max="state.item_length_ms"
|
||||
:value="item_progress_ms"
|
||||
:disabled="state.state === 'stop'"
|
||||
step="1000"
|
||||
@change="seek" >
|
||||
</range-slider>
|
||||
</p>
|
||||
<p class="content">
|
||||
<span>{{ item_progress_ms | duration }} / {{ now_playing.length_ms | duration }}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fd-has-padding-left-right">
|
||||
<div class="container has-text-centered fd-has-margin-top">
|
||||
<h1 class="title is-5">
|
||||
{{ now_playing.title }}
|
||||
</h1>
|
||||
<h2 class="title is-6">
|
||||
{{ now_playing.artist }}
|
||||
</h2>
|
||||
<h2 class="subtitle is-6 has-text-grey has-text-weight-bold" v-if="composer">
|
||||
{{ composer }}
|
||||
</h2>
|
||||
<h3 class="subtitle is-6">
|
||||
{{ now_playing.album }}
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fd-has-padding-left-right">
|
||||
<div class="container has-text-centered fd-has-margin-top">
|
||||
<div v-else class="fd-is-fullheight" style="justify-content: center;">
|
||||
<div class="fd-is-expanded fd-has-padding-left-right has-text-centered">
|
||||
<h1 class="title is-5">
|
||||
{{ now_playing.title }}
|
||||
You play queue is empty
|
||||
</h1>
|
||||
<h2 class="title is-6">
|
||||
{{ now_playing.artist }}
|
||||
</h2>
|
||||
<h2 class="subtitle is-6 has-text-grey has-text-weight-bold" v-if="composer">
|
||||
{{ composer }}
|
||||
</h2>
|
||||
<h3 class="subtitle is-6">
|
||||
{{ now_playing.album }}
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
<!--
|
||||
<div class="hero-head fd-has-padding-left-right">
|
||||
<div class="container has-text-centered fd-has-margin-top">
|
||||
<h1 class="title is-5">
|
||||
{{ now_playing.title }}
|
||||
</h1>
|
||||
<h2 class="title is-6">
|
||||
{{ now_playing.artist }}
|
||||
</h2>
|
||||
<h2 class="subtitle is-6 has-text-grey has-text-weight-bold" v-if="composer">
|
||||
{{ composer }}
|
||||
</h2>
|
||||
<h3 class="subtitle is-6">
|
||||
{{ now_playing.album }}
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-body fd-is-fullheight-body has-text-centered" v-show="artwork_visible">
|
||||
<figure class="image is-square">
|
||||
<img :src="artwork_url"
|
||||
class="fd-has-shadow fd-image-fullheight fd-has-action"
|
||||
style="width: auto; max-height: calc(100vh - 25rem); margin: 0 auto;"
|
||||
@load="artwork_loaded"
|
||||
@error="artwork_error"
|
||||
@click="open_dialog(now_playing)">
|
||||
</figure>
|
||||
</div>
|
||||
<div class="hero-body fd-is-fullheight-body has-text-centered" v-show="!artwork_visible">
|
||||
<a @click="open_dialog(now_playing)" class="button is-white is-medium">
|
||||
<span class="icon has-text-grey-light"><i class="mdi mdi-information-outline"></i></span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="hero-foot fd-has-padding-left-right">
|
||||
<div class="container has-text-centered fd-has-margin-bottom">
|
||||
<p class="control has-text-centered fd-progress-now-playing">
|
||||
<range-slider
|
||||
class="seek-slider fd-has-action"
|
||||
min="0"
|
||||
:max="state.item_length_ms"
|
||||
:value="item_progress_ms"
|
||||
:disabled="state.state === 'stop'"
|
||||
step="1000"
|
||||
@change="seek" >
|
||||
</range-slider>
|
||||
</p>
|
||||
<p class="content">
|
||||
<span>{{ item_progress_ms | duration }} / {{ now_playing.length_ms | duration }}</span>
|
||||
Add some tracks by browsing your library
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
-->
|
||||
<modal-dialog-queue-item :show="show_details_modal" :item="selected_item" @close="show_details_modal = false" />
|
||||
</section>
|
||||
</template>
|
||||
@@ -100,12 +68,13 @@
|
||||
<script>
|
||||
import ModalDialogQueueItem from '@/components/ModalDialogQueueItem'
|
||||
import RangeSlider from 'vue-range-slider'
|
||||
import CoverPlaceholder from '@/components/CoverPlaceholder'
|
||||
import webapi from '@/webapi'
|
||||
import * as types from '@/store/mutation_types'
|
||||
|
||||
export default {
|
||||
name: 'PageNowPlaying',
|
||||
components: { ModalDialogQueueItem, RangeSlider },
|
||||
components: { ModalDialogQueueItem, RangeSlider, CoverPlaceholder },
|
||||
|
||||
data () {
|
||||
return {
|
||||
|
||||
Reference in New Issue
Block a user