Implemented vue-observe-visibility

resources/cider-ui-tests/index.js

@@ -1,10 +1,12 @@
+Vue.use(VueObserveVisibility);
+
+
 Vue.component('sidebar-library-item', {
     template: '#sidebar-library-item',
     props: ['name', 'page', 'cd-click'],
     methods: {}
 });
 
-
 Vue.component('lyrics-view', {
     template: '#lyrics-view',
     props: ["time", "lyrics", "translation"],
@@ -83,7 +85,7 @@ const app = new Vue({
                 "albumName": "Album",
                 "artistName": "Artist",
                 "name": "Name",
-                "genreNames": "Genre",
+                "genre": "Genre",
                 "releaseDate": "Release Date",
                 "durationInMillis": "Duration"
             },
@@ -384,14 +386,12 @@ const app = new Vue({
                     // sort this.library.songs.displayListing by song.attributes[self.library.songs.sorting] in descending order based on alphabetical order and numeric order
                     // check if song.attributes[self.library.songs.sorting] is a number and if so, sort by number if not, sort by alphabetical order ignoring case
                     self.library.songs.displayListing.sort((a, b) => {
-                        let aa = null;
-                        let bb = null;
-                        if(self.library.songs.sorting == "genreNames") {
+                        if(self.library.songs.sorting == "genre") {
                             aa = a.attributes.genreNames[0]
                             bb = b.attributes.genreNames[0]
                         }
-                        aa = a.attributes[self.library.songs.sorting]
-                        bb = b.attributes[self.library.songs.sorting]
+                        let aa = a.attributes[self.library.songs.sorting]
+                        let bb = b.attributes[self.library.songs.sorting]
                         if (aa == null) {
                             aa = ""
                         }
@@ -1074,7 +1074,7 @@ const app = new Vue({
                 }
 
                 if (xmlHttp.status === 200) {
-                    console.log('SUCCESS', xmlHttp.responseText);
+                    // console.log('SUCCESS', xmlHttp.responseText);
                     callback(JSON.parse(xmlHttp.responseText));
                 } else {
                     console.warn('request_error');

resources/cider-ui-tests/views/components/mediaitem-artwork.ejs

@@ -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
             }
         }
     });

resources/cider-ui-tests/views/components/mediaitem-list-item.ejs

@@ -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>

resources/cider-ui-tests/views/main.ejs

@@ -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") %>

resources/cider-ui-tests/views/pages/library-songs.ejs

@@ -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>

resources/cider-ui-tests/vue-observe-visibility.min.js

@@ -0,0 +1 @@
+var VueObserveVisibility=function(e){"use strict";function t(e){return(t="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function i(e,t){for(var i=0;i<t.length;i++){var n=t[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}function n(e){return function(e){if(Array.isArray(e)){for(var t=0,i=new Array(e.length);t<e.length;t++)i[t]=e[t];return i}}(e)||function(e){if(Symbol.iterator in Object(e)||"[object Arguments]"===Object.prototype.toString.call(e))return Array.from(e)}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}()}var r=function(){function e(t,i,n){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.el=t,this.observer=null,this.frozen=!1,this.createObserver(i,n)}var t,r,o;return t=e,(r=[{key:"createObserver",value:function(e,t){var i=this;if(this.observer&&this.destroyObserver(),!this.frozen){var r;if(this.options="function"==typeof(r=e)?{callback:r}:r,this.callback=function(e,t){i.options.callback(e,t),e&&i.options.once&&(i.frozen=!0,i.destroyObserver())},this.callback&&this.options.throttle){var o=(this.options.throttleOptions||{}).leading;this.callback=function(e,t){var i,r,o,s=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},l=function(l){for(var a=arguments.length,c=new Array(a>1?a-1:0),u=1;u<a;u++)c[u-1]=arguments[u];if(o=c,!i||l!==r){var f=s.leading;"function"==typeof f&&(f=f(l,r)),i&&l===r||!f||e.apply(void 0,[l].concat(n(o))),r=l,clearTimeout(i),i=setTimeout(function(){e.apply(void 0,[l].concat(n(o))),i=0},t)}};return l._clear=function(){clearTimeout(i),i=null},l}(this.callback,this.options.throttle,{leading:function(e){return"both"===o||"visible"===o&&e||"hidden"===o&&!e}})}this.oldResult=void 0,this.observer=new IntersectionObserver(function(e){var t=e[0];if(e.length>1){var n=e.find(function(e){return e.isIntersecting});n&&(t=n)}if(i.callback){var r=t.isIntersecting&&t.intersectionRatio>=i.threshold;if(r===i.oldResult)return;i.oldResult=r,i.callback(r,t)}},this.options.intersection),t.context.$nextTick(function(){i.observer&&i.observer.observe(i.el)})}}},{key:"destroyObserver",value:function(){this.observer&&(this.observer.disconnect(),this.observer=null),this.callback&&this.callback._clear&&(this.callback._clear(),this.callback=null)}},{key:"threshold",get:function(){return this.options.intersection&&"number"==typeof this.options.intersection.threshold?this.options.intersection.threshold:0}}])&&i(t.prototype,r),o&&i(t,o),e}();function o(e,t,i){var n=t.value;if(n)if("undefined"==typeof IntersectionObserver)console.warn("[vue-observe-visibility] IntersectionObserver API is not available in your browser. Please install this polyfill: https://github.com/w3c/IntersectionObserver/tree/master/polyfill");else{var o=new r(e,n,i);e._vue_visibilityState=o}}function s(e){var t=e._vue_visibilityState;t&&(t.destroyObserver(),delete e._vue_visibilityState)}var l={bind:o,update:function(e,i,n){var r=i.value;if(!function e(i,n){if(i===n)return!0;if("object"===t(i)){for(var r in i)if(!e(i[r],n[r]))return!1;return!0}return!1}(r,i.oldValue)){var l=e._vue_visibilityState;r?l?l.createObserver(r,n):o(e,{value:r},n):s(e)}},unbind:s};function a(e){e.directive("observe-visibility",l)}var c={version:"1.0.0",install:a},u=null;return"undefined"!=typeof window?u=window.Vue:"undefined"!=typeof global&&(u=global.Vue),u&&u.use(c),e.ObserveVisibility=l,e.default=c,e.install=a,e}({});