Implemented vue-observe-visibility
This commit is contained in:
booploops
parent
557081482e
commit
1d30107c59
6 changed files with 72 additions and 48 deletions
|
|
@ -6,10 +6,11 @@
|
|||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="mediaitem-artwork">
|
||||
<img :src="app.getMediaItemArtwork(url, size)"
|
||||
<div class="mediaitem-artwork"
|
||||
v-observe-visibility="{callback: visibilityChanged}">
|
||||
<img :src="app.getMediaItemArtwork(url, size)" v-if="isVisible"
|
||||
class="mediaitem-artwork--img">
|
||||
<div v-if="video" class="animatedartwork-view-box">
|
||||
<div v-if="video && isVisible" class="animatedartwork-view-box">
|
||||
<animatedartwork-view :video="video"></animatedartwork-view>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -20,12 +21,20 @@
|
|||
Vue.component('mediaitem-artwork', {
|
||||
template: '#mediaitem-artwork',
|
||||
props: ['size', 'url', 'type', 'video'],
|
||||
data: function () {
|
||||
return {
|
||||
isVisible: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getArtworkStyle() {
|
||||
return {
|
||||
width: this.size + 'px',
|
||||
height: this.size + 'px'
|
||||
};
|
||||
},
|
||||
visibilityChanged: function (isVisible, entry) {
|
||||
this.isVisible = isVisible
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,44 +1,48 @@
|
|||
<script type="text/x-template" id="mediaitem-list-item">
|
||||
<template>
|
||||
<div @click="app.playMediaItemById(item.attributes.playParams.id ?? item.id, item.attributes.playParams.kind ?? item.type, item.attributes.playParams.isLibrary ?? false, item.attributes.url)"
|
||||
class="cd-mediaitem-list-item">
|
||||
<div class="isLibrary" v-if="showLibraryStatus == true">
|
||||
<button v-if="!app.isInLibrary(item.attributes.playParams)">🖤</button>
|
||||
<button v-else>❤️</button>
|
||||
</div>
|
||||
<div class="artwork" v-if="showArtwork == true">
|
||||
<mediaitem-artwork
|
||||
:url="item.attributes.artwork ? item.attributes.artwork.url : ''"
|
||||
size="34"
|
||||
:type="item.type"></mediaitem-artwork>
|
||||
</div>
|
||||
<div class="info-rect" :style="{'padding-left': (showArtwork ? '' : '16px')}">
|
||||
<div class="title text-overflow-elipsis">
|
||||
{{ item.attributes.name }}
|
||||
<div
|
||||
@click="app.playMediaItemById(item.attributes.playParams.id ?? item.id, item.attributes.playParams.kind ?? item.type, item.attributes.playParams.isLibrary ?? false, item.attributes.url)"
|
||||
v-observe-visibility="{callback: visibilityChanged}"
|
||||
class="cd-mediaitem-list-item">
|
||||
<template v-if="isVisible">
|
||||
<div class="isLibrary" v-if="showLibraryStatus == true">
|
||||
<button v-if="!app.isInLibrary(item.attributes.playParams)">🖤</button>
|
||||
<button v-else>❤️</button>
|
||||
</div>
|
||||
<div class="subtitle text-overflow-elipsis">
|
||||
<template v-if="item.attributes.artistName">
|
||||
{{ item.attributes.artistName }}
|
||||
<template v-if="item.attributes.albumName">
|
||||
- {{ item.attributes.albumName }}
|
||||
<div class="artwork" v-if="showArtwork == true">
|
||||
<mediaitem-artwork
|
||||
:url="item.attributes.artwork ? item.attributes.artwork.url : ''"
|
||||
size="34"
|
||||
:type="item.type"></mediaitem-artwork>
|
||||
</div>
|
||||
<div class="info-rect" :style="{'padding-left': (showArtwork ? '' : '16px')}">
|
||||
<div class="title text-overflow-elipsis">
|
||||
{{ item.attributes.name }}
|
||||
</div>
|
||||
<div class="subtitle text-overflow-elipsis">
|
||||
<template v-if="item.attributes.artistName">
|
||||
{{ item.attributes.artistName }}
|
||||
<template v-if="item.attributes.albumName">
|
||||
- {{ item.attributes.albumName }}
|
||||
</template>
|
||||
</template>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-rating" v-if="item.attributes.contentRating">
|
||||
{{ item.attributes.contentRating }}
|
||||
</div>
|
||||
<template v-if="showMetaData == true">
|
||||
<div class="metainfo">
|
||||
{{ item.attributes.releaseDate ? new Date(item.attributes.releaseDate).toLocaleDateString() : "" }}
|
||||
<div class="content-rating" v-if="item.attributes.contentRating">
|
||||
{{ item.attributes.contentRating }}
|
||||
</div>
|
||||
<div class="metainfo">
|
||||
{{ item.attributes.genreNames[0] ?? "" }}
|
||||
<template v-if="showMetaData == true">
|
||||
<div class="metainfo">
|
||||
{{ item.attributes.releaseDate ? new Date(item.attributes.releaseDate).toLocaleDateString() : "" }}
|
||||
</div>
|
||||
<div class="metainfo">
|
||||
{{ item.attributes.genreNames[0] ?? "" }}
|
||||
</div>
|
||||
</template>
|
||||
<div class="duration">
|
||||
{{ msToMinSec(item.attributes.durationInMillis ?? 0) }}
|
||||
</div>
|
||||
</template>
|
||||
<div class="duration">
|
||||
{{ msToMinSec(item.attributes.durationInMillis ?? 0) }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</script>
|
||||
|
|
@ -46,12 +50,21 @@
|
|||
<script>
|
||||
Vue.component('mediaitem-list-item', {
|
||||
template: '#mediaitem-list-item',
|
||||
data: function () {
|
||||
return {
|
||||
isVisible: false
|
||||
}
|
||||
},
|
||||
props: {
|
||||
'item': {type: Object, required: true},
|
||||
'show-artwork': {type: Boolean, default: true},
|
||||
'show-library-status': {type: Boolean, default: true},
|
||||
'show-meta-data': {type: Boolean, default: false}
|
||||
},
|
||||
methods: {}
|
||||
methods: {
|
||||
visibilityChanged: function (isVisible, entry) {
|
||||
this.isVisible = isVisible
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
@ -18,6 +18,7 @@
|
|||
<link rel="stylesheet" href="style.css?v=2">
|
||||
<script src="vue.js"></script>
|
||||
<script src="sortable.min.js"></script>
|
||||
<script src="vue-observe-visibility.min.js"></script>
|
||||
<script src="vuedraggable.umd.min.js"></script>
|
||||
<link rel="manifest" href="./manifest.json?v=2">
|
||||
</head>
|
||||
|
|
@ -142,7 +143,7 @@
|
|||
</div>
|
||||
<button class="app-sidebar-item" v-for="item in playlists.listing" :key="item.id"
|
||||
:href="item.href"
|
||||
@click='app.page=`playlist_` + item.id ; showingPlaylist = [];getPlaylistFromID(app.page.substring(9))'>
|
||||
@click='page=`playlist_` + item.id ; showingPlaylist = [];getPlaylistFromID(app.page.substring(9))'>
|
||||
{{ item.attributes.name }}
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -341,7 +342,7 @@
|
|||
fill-rule="nonzero" />
|
||||
</svg>
|
||||
</div>
|
||||
<div id="captions">{{(app.lyricon) ? ((app.lyrics.length > 0 ) ? app.lyrics[app.currentLyricsLine].line.replace('lrcInstrumental','') : "") : ''}}</div>
|
||||
<div id="captions">{{(lyricon) ? ((lyrics.length > 0 ) ? lyrics[currentLyricsLine].line.replace('lrcInstrumental','') : "") : ''}}</div>
|
||||
<div id="player-pip" @click="document.querySelector('video').requestPictureInPicture()"
|
||||
title="Picture-in-Picture">
|
||||
<%- include("svg/fullscreen.svg") %>
|
||||
|
|
|
|||
|
|
@ -28,6 +28,6 @@
|
|||
</div>
|
||||
</div>
|
||||
<div v-if="library.songs.downloadState == 3">Library contains no songs.</div>
|
||||
<mediaitem-list-item :item="item" :show-artwork="false" :show-meta-data="true" :show-library-status="false" v-for="item in library.songs.displayListing"></mediaitem-list-item>
|
||||
<mediaitem-list-item :item="item" :show-meta-data="true" :show-library-status="false" v-for="item in library.songs.displayListing"></mediaitem-list-item>
|
||||
</div>
|
||||
</template>
|
||||
Loading…
Add table
Add a link
Reference in a new issue