vue devtools in dev env

index.js

@@ -86,6 +86,7 @@ app.on('ready', () => {
     console.log('[Cider] Application is Ready. Creating Window.')
     if (!app.isPackaged) {
         console.info('[Cider] Running in development mode.')
+        require('vue-devtools').install()
     }
     CreateWindow()
 });

src/main/cider-base.js

@@ -194,7 +194,8 @@ const CiderBase = {
 
     EnvironmentVariables: {
         "env": {
-            platform: os.platform()
+            platform: os.platform(),
+            dev: app.isPackaged
         }
     },
 

src/renderer/index.js

@@ -1,13 +1,5 @@
 Vue.use(VueObserveVisibility);
 
-
-Vue.component('sidebar-library-item', {
-    template: '#sidebar-library-item',
-    props: ['name', 'page', 'cd-click'],
-    methods: {}
-});
-
-
 // This is going to suck to code
 var CiderContextMenu = {
     Menu: function (event) {
@@ -109,6 +101,7 @@ class NavigationEvent {
 const app = new Vue({
     el: "#app",
     data: {
+        ipcRenderer: ipcRenderer,
         cfg: ipcRenderer.sendSync("getStore"),
         isDev: ipcRenderer.sendSync("is-dev"),
         drawertest: false,
@@ -269,6 +262,12 @@ const app = new Vue({
         },
     },
     methods: {
+        navigateBack() {
+            history.back()
+        },
+        navigateForward() {
+            history.forward()
+        },
         getHTMLStyle() {
             switch(this.cfg.visual.window_transparency) {
                 case "acrylic":
@@ -2265,6 +2264,17 @@ const app = new Vue({
     }
 })
 
+Vue.component('sidebar-library-item', {
+    template: '#sidebar-library-item',
+    props: ['name', 'page', 'cd-click'],
+    data: function () {
+        return {
+            app: app
+        }
+    },
+    methods: {}
+});
+
 // Key binds
 document.addEventListener('keydown', function (e) {
     if (e.keyCode === 70 && e.ctrlKey) {
@@ -2317,6 +2327,19 @@ document.addEventListener('musickitloaded', function () {
 //     });
 //   }
 
+const getBase64FromUrl = async (url) => {
+    const data = await fetch(url);
+    const blob = await data.blob();
+    return new Promise((resolve) => {
+        const reader = new FileReader();
+        reader.readAsDataURL(blob);
+        reader.onloadend = () => {
+            const base64data = reader.result;
+            resolve(base64data);
+        }
+    });
+}
+
 function uuidv4() {
     return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c =>
         (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)

src/renderer/style.less

@@ -2810,6 +2810,17 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   opacity: 0;
 }
 
+.wpfade_transform-enter-active,
+.wpfade_transform-leave-active {
+  transition: opacity .1s var(--appleEase), transform .1s var(--appleEase);
+}
+
+.wpfade_transform-enter,
+.wpfade_transform-leave-to {
+  transform: scale(0.90);
+  opacity: 0;
+}
+
 .fabfade-enter-active,
 .fabfade-leave-active {
   transition: transform .1s var(--appleEase), opacity .1s var(--appleEase);

src/renderer/views/components/add-to-playlist.ejs

@@ -39,7 +39,8 @@
             return {
                 playlistSorted: [],
                 searchQuery: "",
-                focused: ""
+                focused: "",
+                app: this.$root,
             }
         },
         props: {

src/renderer/views/components/animatedartwork-view.ejs

@@ -1,23 +1,23 @@
 <script type="text/x-template" id="animatedartwork-view">
-    <template v-if="video">
+    <div class="animated" v-bind:vid="app.hashCode(video).toString()" v-if="video">
-        <div class="animated" v-bind:vid="app.hashCode(video).toString()">
         <video ref="video" class="animated-artwork-video" loop id="animated-artwork"></video>
     </div>
-    </template>
 </script>
 
 <script>
     Vue.component('animatedartwork-view', {
         template: '#animatedartwork-view',
+        data: function () {
+            return {
+                app: this.$root,
+                hls: null,
+            }
+        },
         props: {
             video: {
                 type: String,
                 required: true
             },
-            hls: {
-                type: Object,
-                default: ''
-            },
             priority: {
                 type: Boolean,
                 default: false

src/renderer/views/components/lyrics-view.ejs

@@ -2,7 +2,7 @@
     <div ref="lyricsview" class="md-body lyric-body">
         <template v-if="lyrics && lyrics != [] && lyrics.length > 0">
             <template v-for="(lyric, index) in lyrics" v-if="lyric && lyric.line && lyric.line != 'lrcInstrumental'">
-                <h3 class="lyric-line" @click="if(lyric.startTime != 9999999) app.seekTo(lyric.startTime, false)"
+                <h3 class="lyric-line" @click="seekTo(lyric.startTime)"
                     v-bind:line-index="index.toString()">
                     <template v-if="richlyrics && richlyrics != [] && richlyrics.length > 0">
                         <div class="richl" >
@@ -22,7 +22,7 @@
                 </h3>
             </template>
             <template v-else>
-                <h3 class="lyric-line" @click="if(lyric.startTime != 9999999) app.seekTo(lyric.startTime, false)"
+                <h3 class="lyric-line" @click="seekTo(lyric.startTime)"
                     :start="lyric.startTime"
                     :end="lyric.endTime" v-bind:line-index="index.toString()">
                     <div class="lyricWaiting">
@@ -35,7 +35,7 @@
         </template>
         <template v-else>
             <div class="no-lyrics">
-                Loading... / Lyrics not found./ Instrumental.
+                Loading... / Lyrics not found./ Instrumental.</div>
         </template>
     </div>
 </script>
@@ -43,7 +43,13 @@
     Vue.component('lyrics-view', {
         template: '#lyrics-view',
         props: ["time", "lyrics", "richlyrics", "translation", "onindex"],
+        data: function () {
+            return {
+                app: this.$root,
+            }
+        },
         watch: {
+
             time: function () {
                 if (app.lyricon && app.drawer.open && this.$refs.lyricsview) {
                     let currentLine = this.$refs.lyricsview.querySelector(`.lyric-line.active`)
@@ -109,6 +115,9 @@
            
         },
         methods: {
+            seekTo(startTime) {
+                if(startTime != 9999999) this.app.seekTo(startTime, false);
+            },
             getActiveLyric() {
              //   console.log(this.time);
                 const delayfix = 0.1

src/renderer/views/components/mediaitem-artwork.ejs

@@ -1,13 +1,5 @@
 <script type="text/x-template" id="mediaitem-artwork">
-    <template v-if="type == 'artists'">
+    <div class="mediaitem-artwork" :class="{'rounded': (type == 'artists')}" :key="url" :style="getStyle()"
-        <div class="mediaitem-artwork rounded" :key="url" :style="getStyle()">
-            <img :src="app.getMediaItemArtwork(url, size, width)"
-                 decoding="async"
-                 class="mediaitem-artwork--img">
-        </div>
-    </template>
-    <template v-else>
-        <div class="mediaitem-artwork" :key="url" :style="getStyle()"
          v-observe-visibility="{callback: visibilityChanged}">
         <img :src="app.getMediaItemArtwork(url, size, width)"
              decoding="async"
@@ -16,7 +8,6 @@
             <animatedartwork-view :priority="getVideoPriority()" :video="video"></animatedartwork-view>
         </div>
     </div>
-    </template>
 </script>
 
 <script>
@@ -28,7 +19,7 @@
                 default: '120'
             },
             width: {
-                type: String,
+                type: Number,
                 required: false
             },
             url: {
@@ -54,6 +45,7 @@
         },
         data: function () {
             return {
+                app:this.$root,
                 isVisible: false,
                 style: {
                     "box-shadow": ""

src/renderer/views/components/mediaitem-hrect.ejs

@@ -27,6 +27,11 @@
     Vue.component('mediaitem-hrect', {
         template: '#mediaitem-hrect',
         props: ['item'],
+        data: function () {
+            return {
+                app: this.$root,
+            }
+        },
         methods: {}
     });
 </script>

src/renderer/views/components/mediaitem-list-item.ejs

@@ -1,5 +1,4 @@
 <script type="text/x-template" id="mediaitem-list-item">
-    <template>
     <div v-observe-visibility="{callback: visibilityChanged}"
          @contextmenu="contextMenu"
          @click="select"
@@ -24,7 +23,8 @@
                         :type="item.type"></mediaitem-artwork>
                 <button class="overlay-play" @click="playTrack()"><%- include("../svg/play.svg") %></button>
             </div>
-                <div class="info-rect" :style="{'padding-left': (showArtwork ? '' : '16px')}" @dblclick="app.routeView(item)">
+            <div class="info-rect" :style="{'padding-left': (showArtwork ? '' : '16px')}"
+                 @dblclick="app.routeView(item)">
                 <div class="title text-overflow-elipsis">
                     {{ item.attributes.name }}
                 </div>
@@ -61,7 +61,6 @@
             </div>
         </template>
     </div>
-    </template>
 </script>
 
 <script>
@@ -71,13 +70,14 @@
             return {
                 isVisible: false,
                 addedToLibrary: false,
-                guid: uuidv4()
+                guid: uuidv4(),
+                app: this.$root
             }
         },
         props: {
             'item': {type: Object, required: true},
-            'parent': {type: Object, required: false},
+            'parent': {type: String, required: false},
-            'index': {type: Object, required: false, default: -1},
+            'index': {type: Number, required: false, default: -1},
             'show-artwork': {type: Boolean, default: true},
             'show-library-status': {type: Boolean, default: true},
             'show-meta-data': {type: Boolean, default: false},
@@ -85,6 +85,11 @@
             'contextExt': {type: Object, required: false},
         },
         methods: {
+            msToMinSec(ms) {
+                var minutes = Math.floor(ms / 60000);
+                var seconds = ((ms % 60000) / 1000).toFixed(0);
+                return minutes + ":" + (seconds < 10 ? '0' : '') + seconds;
+            },
             getDataType() {
                 if (this.item.attributes.playParams.isLibrary) {
                     return this.item.type

src/renderer/views/components/mediaitem-mvview-sp.ejs

@@ -1,5 +1,4 @@
 <script type="text/x-template" id="mediaitem-mvview-sp">
-    <template>
     <div style="position: relative; display: inline-flex;">
         <div @click.self='app.routeView(item)'
              class="cd-mediaitem-mvview">
@@ -51,13 +50,17 @@
             </div>
         </div>
     </div>
-    </template>
 </script>
 
 <script>
     Vue.component('mediaitem-mvview-sp', {
         template: '#mediaitem-mvview-sp',
         props: ['item', "imagesize", "badge"],
+        data: function () {
+            return {
+                app: this.$root,
+            }
+        },
         methods: {}
     });
 </script>

src/renderer/views/components/mediaitem-mvview.ejs

@@ -54,6 +54,11 @@
     Vue.component('mediaitem-mvview', {
         template: '#mediaitem-mvview',
         props: ['item', "imagesize"],
+        data: function () {
+            return {
+                app: this.$root,
+            }
+        },
         methods: {}
     });
 </script>

src/renderer/views/components/mediaitem-scroller-horizontal-large.ejs

@@ -1,10 +1,8 @@
 <script type="text/x-template" id="mediaitem-scroller-horizontal-large">
-    <template>
     <div class="cd-hmedia-scroller">
         <mediaitem-square :item="item"
                           v-for="item in items"></mediaitem-square>
     </div>
-    </template>
 </script>
 
 
@@ -12,6 +10,11 @@
     Vue.component('mediaitem-scroller-horizontal-large', {
         template: '#mediaitem-scroller-horizontal-large',
         props: ['items'],
+        data: function () {
+            return {
+                app: this.$root,
+            }
+        },
         methods: {}
     });
 </script>

src/renderer/views/components/mediaitem-scroller-horizontal-mvview.ejs

@@ -1,16 +1,18 @@
 <script type="text/x-template" id="mediaitem-scroller-horizontal-mvview">
-    <template>
     <div class="cd-hmedia-scroller">
         <template v-if="browsesp">
-                <mediaitem-mvview-sp :item="item ? (item.attributes.kind ? item : ((item.relationships && item.relationships.contents ) ? item.relationships.contents.data[0] : item)) : []" :imagesize="imagesize"
+            <mediaitem-mvview-sp
+                    :item="item ? (item.attributes.kind ? item : ((item.relationships && item.relationships.contents ) ? item.relationships.contents.data[0] : item)) : []"
+                    :imagesize="imagesize"
                     :badge="item.attributes" v-for="item in items"></mediaitem-mvview-sp>
         </template>
         <template v-else>
-                <mediaitem-square :kind="kind" size="600" :item="item ? (item.attributes.kind ? item : ((item.relationships && item.relationships.contents ) ? item.relationships.contents.data[0] : item)) : []" :imagesize="imagesize"
+            <mediaitem-square :kind="kind" size="600"
+                              :item="item ? (item.attributes.kind ? item : ((item.relationships && item.relationships.contents ) ? item.relationships.contents.data[0] : item)) : []"
+                              :imagesize="imagesize"
                               v-for="item in items"></mediaitem-square>
         </template>
     </div>
-    </template>
 </script>
 
 
@@ -23,12 +25,12 @@
                 required: true
             },
             imagesize: {
-                type: String,
+                type: Number,
-                required: true
+                required: false
             },
             browsesp: {
                 type: Boolean,
-                required: true
+                required: false
             },
             kind: {
                 type: String,
@@ -36,6 +38,11 @@
                 default: ""
             }
         },
+        data: function () {
+            return {
+                app: this.$root,
+            }
+        },
         methods: {}
     });
 </script>

src/renderer/views/components/mediaitem-scroller-horizontal-sp.ejs

@@ -11,6 +11,11 @@
     Vue.component('mediaitem-scroller-horizontal-sp', {
         template: '#mediaitem-scroller-horizontal-sp',
         props: ['items'],
+        data: function () {
+            return {
+                app: this.$root,
+            }
+        },
         methods: {}
     });
 </script>

src/renderer/views/components/mediaitem-scroller-horizontal.ejs

@@ -11,6 +11,11 @@
     Vue.component('mediaitem-scroller-horizontal', {
         template: '#mediaitem-scroller-horizontal',
         props: ['items'],
+        data: function () {
+            return {
+                app: this.$root,
+            }
+        },
         methods: {}
     });
 </script>

src/renderer/views/components/mediaitem-square-large.ejs

@@ -74,6 +74,11 @@
     Vue.component('mediaitem-square-large', {
         template: '#mediaitem-square-large',
         props: ['item'],
+        data: function () {
+            return {
+                app: this.$root,
+            }
+        },
         methods: {
             clickContext() {
                 var evt = document.createEvent('MouseEvent');

src/renderer/views/components/mediaitem-square-sp.ejs

@@ -1,8 +1,8 @@
 <script type="text/x-template" id="mediaitem-square-sp">
-    <template>
     <div ref="main" style="position: relative; display: inline-flex;" @contextmenu="contextMenu">
         <div @click.self='app.routeView(item)'
-                 class="cd-mediaitem-square-sp"  ref="main2" :style="{'--spcolor' : (item.attributes.artwork.bgColor != null) ? ('#'+item.attributes.artwork.bgColor) : `black`}">
+             class="cd-mediaitem-square-sp" ref="main2"
+             :style="{'--spcolor' : (item.attributes.artwork.bgColor != null) ? ('#'+item.attributes.artwork.bgColor) : `black`}">
             <div class="artwork">
                 <mediaitem-artwork
                         :url="item.attributes.artwork ? item.attributes.artwork.url : ''"
@@ -35,13 +35,15 @@
                 </div>
             </div>
             <div class="title text-overflow-elipsis"
-                     :style="{'color' : (item.attributes.artwork.textColor1 != null) ? ('#'+item.attributes.artwork.textColor1) : `#eee`}" style="font-weight: 600">
+                 :style="{'color' : (item.attributes.artwork.textColor1 != null) ? ('#'+item.attributes.artwork.textColor1) : `#eee`}"
+                 style="font-weight: 600">
                 {{ item.attributes.name }}
             </div>
             <div class="subtitle text-overflow-elipsis "
                  :class="{'item-navigate': ((item.attributes.editorialNotes == null) && item.attributes.artistName)}"
-                     :style="{ 'z-index': ((item.attributes.editorialNotes == null) && item.attributes.artistName) ? '4' : '' ,'color' : (item.attributes.artwork.textColor1 != null) ? ('#'+item.attributes.artwork.textColor1) : `#eee`}" style="padding-left: 4px;padding-right: 4px; display: -webkit-box;-webkit-box-orient: vertical; -webkit-line-clamp: 2;white-space: normal;"
+                 :style="{ 'z-index': ((item.attributes.editorialNotes == null) && item.attributes.artistName) ? '4' : '' ,'color' : (item.attributes.artwork.textColor1 != null) ? ('#'+item.attributes.artwork.textColor1) : `#eee`}"
-                     @click="if((item.attributes.editorialNotes == null) && item.attributes.artistName)app.searchAndNavigate(item,'artist')"
+                 style="padding-left: 4px;padding-right: 4px; display: -webkit-box;-webkit-box-orient: vertical; -webkit-line-clamp: 2;white-space: normal;"
+                 @click="subtitleSearchNavigate(item)"
             >
                 {{ (item.attributes.editorialNotes != null) ? item.attributes.editorialNotes.short
                 :(item.attributes.artistName ?? '') }}
@@ -72,16 +74,23 @@
                 <%- include("../svg/play.svg") %>
             </div>
         </div>
-
     </div>
-    </template>
 </script>
 
 <script>
     Vue.component('mediaitem-square-sp', {
         template: '#mediaitem-square-sp',
         props: ['item'],
-        methods: { clickContext() {
+        data: function () {
+            return {
+                app: this.$root,
+            }
+        },
+        methods: {
+            subtitleSearchNavigate(item) {
+                if((item.attributes.editorialNotes == null) && item.attributes.artistName)app.searchAndNavigate(item,'artist')
+            },
+            clickContext() {
                 var evt = document.createEvent('MouseEvent');
                 var rect = this.$refs.main2.getBoundingClientRect();
                 evt.initMouseEvent(
@@ -95,7 +104,11 @@
                 this.$refs.main.dispatchEvent(evt);
             }
             , contextMenu(event) {
-                if (!event){event = this.$refs.main} else {console.log(event)}
+                if (!event) {
+                    event = this.$refs.main
+                } else {
+                    console.log(event)
+                }
                 let self = this
                 let useMenu = "normal"
                 if (app.selectedMediaItems.length <= 1) {
@@ -174,6 +187,7 @@
                     }
                 }
                 CiderContextMenu.Create(event, menus[useMenu])
-            },}
+            },
+        }
     });
 </script>

src/renderer/views/components/mediaitem-square.ejs

@@ -1,7 +1,7 @@
 <script type="text/x-template" id="mediaitem-square">
-    <template>
     <div tabindex="0"
-             class="cd-mediaitem-square" :class="getClasses()" @contextmenu="contextMenu" v-observe-visibility="{callback: visibilityChanged}">
+         class="cd-mediaitem-square" :class="getClasses()" @contextmenu="contextMenu"
+         v-observe-visibility="{callback: visibilityChanged}">
         <template v-if="isVisible">
             <div class="artwork-container">
                 <div class="artwork" @click='app.routeView(item)'>
@@ -12,19 +12,21 @@
                             shadow="subtle"
                             :type="item.type"></mediaitem-artwork>
                 </div>
-                        <button class="menu-btn" v-if="!nomenu.includes(item.type)" @click="contextMenu"><%- include("../svg/more.svg") %></button>
+                <button class="menu-btn" v-if="!nomenu.includes(item.type)"
-                        <button class="play-btn" v-if="!noplay.includes(item.type)" @click="app.playMediaItem(item)"><%- include("../svg/play.svg") %></button>
+                        @click="contextMenu"><%- include("../svg/more.svg") %></button>
+                <button class="play-btn" v-if="!noplay.includes(item.type)"
+                        @click="app.playMediaItem(item)"><%- include("../svg/play.svg") %></button>
             </div>
             <div class="title item-navigate text-overflow-elipsis" @click.self='app.routeView(item)'>
                 {{ item.attributes.name }}
             </div>
-                    <div class="subtitle item-navigate text-overflow-elipsis" @click="app.searchAndNavigate(item,'artist')" v-if="item.attributes.artistName">
+            <div class="subtitle item-navigate text-overflow-elipsis" @click="app.searchAndNavigate(item,'artist')"
+                 v-if="item.attributes.artistName">
                 {{ item.attributes.artistName }}
             </div>
             <div class="subtitle" v-else>&nbsp;</div>
         </template>
     </div>
-    </template>
 </script>
 
 <script>
@@ -50,7 +52,8 @@
                 addedToLibrary: false,
                 guid: uuidv4(),
                 noplay: ["apple-curators"],
-                nomenu: ["artists", "stations", "apple-curators"]
+                nomenu: ["artists", "stations", "apple-curators"],
+                app: this.$root
             }
         },
         methods: {
@@ -89,7 +92,11 @@
                 if (this.nomenu.includes(this.item.type)) {
                     return
                 }
-                if (!event) { event = this.$refs.main } else { console.log(event) }
+                if (!event) {
+                    event = this.$refs.main
+                } else {
+                    console.log(event)
+                }
                 let self = this
                 let useMenu = "normal"
                 if (app.selectedMediaItems.length <= 1) {

src/renderer/views/components/queue.ejs

@@ -48,7 +48,8 @@
                 queuePosition: 0,
                 queueItems: [],
                 selected: -1,
-                selectedItems: []
+                selectedItems: [],
+                app: this.$root
             }
         },
         mounted() {

src/renderer/views/main.ejs

@@ -17,7 +17,7 @@
     <title>Cider</title>
     <link rel="stylesheet/less" type="text/css" href="style.less"/>
     <script src="less.js"></script>
-    <script src="vue.js"></script>
+    <script src="<%- (env.dev ? "vue.js" : "vue.dev.js") %>"></script>
     <script src="sortable.min.js"></script>
     <script src="vue-observe-visibility.min.js"></script>
     <script src="sortable.min.js"></script>
@@ -71,10 +71,10 @@
                                     {{ mk.nowPlayingItem["attributes"]["name"] }}
                                 </div>
                                 <div class="song-artist " style="display: inline-block; -webkit-box-orient: horizontal; white-space: nowrap;">
-                                    <div class="item-navigate song-artist"  style="display: inline-block;" @click="app.getNowPlayingItemDetailed(`artist`)">
+                                    <div class="item-navigate song-artist"  style="display: inline-block;" @click="getNowPlayingItemDetailed(`artist`)">
                                     {{ mk.nowPlayingItem["attributes"]["artistName"] }} 
                                     </div>
-                                    <div class="song-artist item-navigate" style="display: inline-block;" @click="app.getNowPlayingItemDetailed('album')">
+                                    <div class="song-artist item-navigate" style="display: inline-block;" @click="getNowPlayingItemDetailed('album')">
                                         {{  (mk.nowPlayingItem["attributes"]["albumName"]) ? (" - " + mk.nowPlayingItem["attributes"]["albumName"]) : "" }}
                                     </div>
                                 </div>
@@ -177,7 +177,7 @@
                             @contextmenu="playlistContextMenu($event, item.id)"
                             @dragover="()=>{}"
                             :href="item.href"
-                            @click='appRoute(`playlist_` + item.id); showingPlaylist = [];getPlaylistFromID(app.page.substring(9))'>
+                            @click='appRoute(`playlist_` + item.id); showingPlaylist = [];getPlaylistFromID(page.substring(9))'>
                         {{ item.attributes.name }}
                     </button>
                 </div>
@@ -261,8 +261,8 @@
             </div>
             <div id="app-content">
                 <div id="navigation-bar">
-                    <button class="nav-item" @click="history.back()"><%- include('svg/chevron-left.svg') %></button>
+                    <button class="nav-item" @click="navigateBack()"><%- include('svg/chevron-left.svg') %></button>
-                    <button class="nav-item" @click="history.forward()"><%- include('svg/chevron-right.svg') %></button>
+                    <button class="nav-item" @click="navigateForward()"><%- include('svg/chevron-right.svg') %></button>
                 </div>
                 <!-- Artist Page -->
                 <transition name="wpfade">
@@ -304,7 +304,7 @@
                     </template>
                 </transition>
                 <!-- Browse -->
-                <transition v-on:enter="app.getBrowsePage(); console.log('browse')" name="wpfade">
+                <transition v-on:enter="getBrowsePage(); console.log('browse')" name="wpfade">
                     <template v-if="page == 'browse'">
                         <!-- <div class="content-inner">
 
@@ -426,14 +426,14 @@
         >
     </transition>
     <transition name="wpfade">
-        <div class="bg-artwork--placeholder" v-else></div>
+        <div class="bg-artwork--placeholder"></div>
     </transition>
     <transition name="modal">
         <add-to-playlist :playlists="playlists.listing" v-if="modals.addToPlaylist"></add-to-playlist>
     </transition>
     <div id="apple-music-video-container">
         <div id="apple-music-video-player-controls">
-            <div id="player-exit" title="Close" onclick="app.exitMV()">
+            <div id="player-exit" title="Close" onclick="exitMV()">
                 <svg fill="white" xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 21 21"
                      aria-role="presentation" focusable="false">
                     <path
@@ -458,7 +458,6 @@
     </div>
 </div>
 
-
 <!-- Media Item Artwork-->
 <%- include("components/mediaitem-artwork"); %>
 <!-- Browse -->
@@ -495,7 +494,7 @@
 <!-- Sidebar Item -->
 <script type="text/x-template" id="sidebar-library-item">
     <button class="app-sidebar-item"
-            :class="$parent.getSidebarItemClass(page)" @click="app.appRoute(page)">
+            :class="$parent.getSidebarItemClass(page)" @click="$root.appRoute(page)">
         {{ name }}
     </button>
 </script>
@@ -531,7 +530,6 @@
 <!-- Lyrics View -->
 <%- include('components/lyrics-view') %>
 
-<script src="musickit.js?v=1"></script>
 <script>
     if (typeof MusicKit == 'undefined') {
         document.write(unescape("%3Cscript src='https://js-cdn.music.apple.com/musickit/v2/amp/musickit.js' type='text/javascript'%3E%3C/script%3E"));

src/renderer/views/pages/artist.ejs

@@ -128,7 +128,8 @@
         props: ['data'],
         data: function () {
             return {
-                topSongsExpanded: false
+                topSongsExpanded: false,
+                app: this.$root
             }
         },
         methods: {

src/renderer/views/pages/browse.ejs

@@ -36,6 +36,11 @@
 <script>
     Vue.component('cider-browse', {
         template: "#cider-browse",
-        props: ["data"]
+        props: ["data"],
+        data: function () {
+            return {
+                app: this.$root
+            }
+        },
     })    
 </script>

src/renderer/views/pages/cider-playlist.ejs

@@ -1,6 +1,6 @@
 <script type="text/x-template" id="cider-playlist">
-    <template>
+    <div class="content-inner playlist-page" v-if="data != [] && data.attributes != null"
-        <div class="content-inner playlist-page" v-if="data != [] && data.attributes != null" :style="{'--bgColor': (data.attributes.artwork != null && data.attributes.artwork['bgColor'] != null) ? ('#' + data.attributes.artwork.bgColor) : ''}">
+         :style="{'--bgColor': (data.attributes.artwork != null && data.attributes.artwork['bgColor'] != null) ? ('#' + data.attributes.artwork.bgColor) : ''}">
         <template v-if="app.playlists.loadingState == 0">
             <div class="content-inner centered">Loading...</div>
         </template>
@@ -23,11 +23,19 @@
                 <div class="col playlist-info">
                     <template v-if="!editorialNotesExpanded">
                         <div>
-                            <div class="playlist-name" @click="editPlaylistName()" v-show="!nameEditing">{{data.attributes ? (data.attributes.name ??
+                            <div class="playlist-name" @click="editPlaylistName()" v-show="!nameEditing">
+                                {{data.attributes ? (data.attributes.name ??
                                 (data.attributes.title ?? '') ?? '') : ''}}
                             </div>
-                            <div class="playlist-name" v-show="nameEditing"><input type="text" spellcheck="false" class="nameEdit" v-model="data.attributes.name" @blur="editPlaylist" @change="editPlaylist" @keydown.enter="editPlaylist"/></div>
+                            <div class="playlist-name" v-show="nameEditing"><input type="text" spellcheck="false"
-                            <div class="playlist-artist item-navigate" v-if="data.attributes && data.attributes.artistName" @click="if(data.attributes && data.attributes.artistName){ app.searchAndNavigate(data,'artist')}">
+                                                                                   class="nameEdit"
+                                                                                   v-model="data.attributes.name"
+                                                                                   @blur="editPlaylist"
+                                                                                   @change="editPlaylist"
+                                                                                   @keydown.enter="editPlaylist"/></div>
+                            <div class="playlist-artist item-navigate"
+                                 v-if="data.attributes && data.attributes.artistName"
+                                 @click="if(data.attributes && data.attributes.artistName){ app.searchAndNavigate(data,'artist')}">
                                 {{data.attributes ? (data.attributes.artistName ?? '') :''}}
                             </div>
                             <div class="playlist-desc" v-if="data.attributes.editorialNotes">
@@ -66,8 +74,10 @@
             <div class="playlist-body">
                 <div class="well">
                     <div style="width:100%">
-                        <draggable :sort="data.attributes.canEdit && data.type == 'library-playlists'" v-model="data.relationships.tracks.data" @start="drag=true" @end="drag=false;put()">
+                        <draggable :sort="data.attributes.canEdit && data.type == 'library-playlists'"
-                            <mediaitem-list-item :item="item" :parent="getItemParent(data)" :index="index" :context-ext="buildContextMenu()"
+                                   v-model="data.relationships.tracks.data" @start="drag=true" @end="drag=false;put()">
+                            <mediaitem-list-item :item="item" :parent="getItemParent(data)" :index="index"
+                                                 :context-ext="buildContextMenu()"
                                                  v-for="(item,index) in data.relationships.tracks.data"></mediaitem-list-item>
                         </draggable>
                     </div>
@@ -76,14 +86,14 @@
                 <div class="playlist-time">
                     {{data.attributes.releaseDate}}
                 </div>
-                <div class="playlist-time item-navigate" @click="app.searchAndNavigate(data,'recordLabel') " style="width: 50%;"> 
+                <div class="playlist-time item-navigate" @click="app.searchAndNavigate(data,'recordLabel') "
+                     style="width: 50%;">
                     {{data.attributes.copyright}}
                 </div>
                 <div class="playlist-time">{{app.getTotalTime()}}</div>
             </div>
         </template>
     </div>
-</template>
 
 </script>
 <script>
@@ -95,7 +105,8 @@
                 editorialNotesExpanded: false,
                 drag: false,
                 nameEditing: false,
-                inLibrary: null
+                inLibrary: null,
+                app: this.$root
             }
         },
         mounted: function () {
@@ -116,7 +127,9 @@
                     var res = await app.mkapi(this.data.attributes.playParams.kind ?? this.data.type, this.data.attributes.playParams.isLibrary ?? false, this.data.attributes.playParams.id ?? this.data.id, params);
                     this.inLibrary = (res && res.attributes && res.attributes.inLibrary) ? res.attributes.inLibrary : false
                     console.log(res)
-                } else {this.inLibrary = true}
+                } else {
+                    this.inLibrary = true
+                }
             },
             editPlaylist() {
                 app.editPlaylist(this.data.id, this.data.attributes.name);

src/renderer/views/pages/search.ejs

@@ -51,6 +51,11 @@
     Vue.component('cider-search', {
         template: "#cider-search",
         props: ['search'],
+        data: function() {
+            return {
+                app: this.$root
+            }
+        },
         methods: {
             getTopResult() {
                 if (this.search.results["meta"]) {

src/renderer/views/pages/settings.ejs

@@ -503,6 +503,7 @@
         props: [],
         data: function () {
             return {
+                app: this.$root
             }
         },
         methods: {