MyFavMirrors/owntone-server
1
0
Fork 0
mirror of https://github.com/owntone/owntone-server.git synced 2025-03-29 08:43:42 -04:00
Code Issues Packages Projects Releases Wiki Activity

[web-src] Show queue item details in now playing page

Browse Source 
Make the cover artwork clickable to open the details dialog modal.
This commit is contained in:
chme 2018-12-16 09:53:57 +01:00
parent 382036687a
commit 55e75dc850
1 changed files with 21 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -14,7 +14,15 @@
</div> </div>
</div> </div>
<div class="hero-body fd-is-fullheight-body has-text-centered" v-show="artwork_visible"> <div class="hero-body fd-is-fullheight-body has-text-centered" v-show="artwork_visible">
<img :src="artwork_url" class="fd-has-shadow fd-image-fullheight" @load="artwork_loaded" @error="artwork_error"> <img :src="artwork_url" class="fd-has-shadow fd-image-fullheight fd-has-action"
@load="artwork_loaded"
@error="artwork_error"
@click="open_dialog(now_playing)">
</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-large">
<span class="icon has-text-dark"><i class="mdi mdi-information-outline"></i></span>
</a>
</div> </div>
<div class="hero-foot fd-has-padding-left-right"> <div class="hero-foot fd-has-padding-left-right">
<div class="container has-text-centered fd-has-margin-bottom"> <div class="container has-text-centered fd-has-margin-bottom">
@ -41,11 +49,13 @@
<player-button-consume class="button is-medium is-light"></player-button-consume> <player-button-consume class="button is-medium is-light"></player-button-consume>
</div> </div>
</div> </div>
<modal-dialog-queue-item :show="show_details_modal" :item="selected_item" @close="show_details_modal = false" />
</div> </div>
</section> </section>
</template> </template>
<script> <script>
import ModalDialogQueueItem from '@/components/ModalDialogQueueItem'
import PlayerButtonPlayPause from '@/components/PlayerButtonPlayPause' import PlayerButtonPlayPause from '@/components/PlayerButtonPlayPause'
import PlayerButtonNext from '@/components/PlayerButtonNext' import PlayerButtonNext from '@/components/PlayerButtonNext'
import PlayerButtonPrevious from '@/components/PlayerButtonPrevious' import PlayerButtonPrevious from '@/components/PlayerButtonPrevious'
@ -58,13 +68,16 @@ import * as types from '@/store/mutation_types'
export default { export default {
name: 'PageNowPlaying', name: 'PageNowPlaying',
components: { PlayerButtonPlayPause, PlayerButtonNext, PlayerButtonPrevious, PlayerButtonShuffle, PlayerButtonConsume, PlayerButtonRepeat, RangeSlider }, components: { ModalDialogQueueItem, PlayerButtonPlayPause, PlayerButtonNext, PlayerButtonPrevious, PlayerButtonShuffle, PlayerButtonConsume, PlayerButtonRepeat, RangeSlider },
data () { data () {
return { return {
item_progress_ms: 0, item_progress_ms: 0,
interval_id: 0, interval_id: 0,
artwork_visible: false artwork_visible: false,
show_details_modal: false,
selected_item: {}
} }
}, },
@ -118,6 +131,11 @@ export default {
artwork_error: function () { artwork_error: function () {
this.artwork_visible = false this.artwork_visible = false
},
open_dialog: function (item) {
this.selected_item = item
this.show_details_modal = true
} }
}, },