Merge branch 'lazyload' into 'vue-rewrite'

Lazyload

See merge request spinshare/client!38

package-lock.json

 {
   "name": "spinshare-client",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -13321,6 +13321,11 @@
         }
       }
     },
+    "vue-observe-visibility": {
+      "version": "0.4.6",
+      "resolved": "https://registry.npmjs.org/vue-observe-visibility/-/vue-observe-visibility-0.4.6.tgz",
+      "integrity": "sha512-xo0CEVdkjSjhJoDdLSvoZoQrw/H2BlzB5jrCBKGZNXN2zdZgMuZ9BKrxXDjNP2AxlcCoKc8OahI3F3r3JGLv2Q=="
+    },
     "vue-router": {
       "version": "3.1.6",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.1.6.tgz",

package.json

@@ -30,6 +30,7 @@
     "vue": "^2.6.11",
     "vue-axios": "^2.1.5",
     "vue-i18n": "^8.17.4",
+    "vue-observe-visibility": "^0.4.6",
     "vue-router": "^3.1.6",
     "vuex": "^3.1.3"
   },

src/components/Song/SongLocalItem.vue

 <template>
     <div :class="'song-item-local ' + (isSpinShare ? '' : 'song-item-onlylocal')" v-on:contextmenu="showContextMenu($event)" v-on:click="openOnSpinShare()">
-        <div class="song-cover" :style="'background-image: url(' + cover + '), url(' + require('@/assets/img/defaultAlbumArt.jpg') + ');'">
+        <div class="song-cover" v-bind:style="'background-image: '+ backgroundImage +' , url(' + require('@/assets/img/defaultAlbumArt.jpg') + ');'" v-observe-visibility="visibilityChanged">
             <div class="song-charter-info">
                 <div class="song-charter"><i class="mdi mdi-account-circle"></i><span>{{ detail.charter ? detail.charter : "Unknown" }}</span></div>
             </div>
@@ -28,7 +28,13 @@
         ],
         data: function() {
             return {
-                isContextMenuActive: false
+                isContextMenuActive: false,
+                backgroundImage: "none;"
+            }
+        },
+        computed: {
+            imageUrl() {
+                return this.$data.backgroundImage
             }
         },
         mounted: function() {
@@ -59,6 +65,15 @@
             },
             openInExplorer: function() {
                 shell.showItemInFolder(path.normalize(this.file));
+            },
+            visibilityChanged (isVisible, entry) {
+                if (isVisible) {
+                    this.$data.backgroundImage = "url(" + this.$props.cover + ")"
+                } 
+                //url(" + require('@/assets/img/defaultAlbumArt.jpg') + ");
+                else {
+                    this.$data.backgroundImage = "none;"
+                }
             }
         }
     }

src/main.js

@@ -5,9 +5,13 @@ import store from './store';
 import i18n from './i18n';
 import moment from 'moment'
 import { ipcRenderer } from 'electron';
+import VueObserveVisibility from 'vue-observe-visibility'
+
+Vue.use(VueObserveVisibility);
 
 Vue.config.productionTip = false;
 
+
 Vue.filter('formatDate', function(value) {
   if (value && !String(value).includes("-0001")) {
     return moment(String(value)).format(i18n.t('locale.dateFormat'))