testing out a different artwork bg, wip

src/renderer/index.js

@@ -98,9 +98,23 @@ Array.prototype.limit = function (n) {
     return this.slice(0, n);
 };
 
+const store = new Vuex.Store({
+    state: {
+        library: {
+            songs: [],
+            albums: [],
+            recentlyAdded: [],
+            playlists: []
+        }
+    },
+    mutations: {
+
+    }
+})
 
 const app = new Vue({
     el: "#app",
+    store: store,
     data: {
         appMode: "player",
         ipcRenderer: ipcRenderer,
@@ -2393,7 +2407,11 @@ const app = new Vue({
             }
             return newurl
         },
+        _rgbToRgb(rgb = [0,0,0]) {
+            return `rgb(${rgb[0]},${rgb[1]},${rgb[2]})`
+        },
         getNowPlayingArtworkBG(size = 600) {
+            let self = this
             if (typeof this.mk.nowPlayingItem === "undefined") return;
             let bginterval = setInterval(() => {
                 if (!this.mkReady()) {
@@ -2409,6 +2427,15 @@ const app = new Vue({
                         document.querySelector('.bg-artwork').src = "";
                         if (this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"]) {
                             document.querySelector('.bg-artwork').src = this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"].replace('{w}', size).replace('{h}', size);
+                            Vibrant.from(this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"].replace('{w}', size).replace('{h}', size)).getPalette().then(palette=>{
+                                console.log(palette)
+                                if(palette.DarkMuted != null && palette.DarkVibrant != null){
+                                    document.querySelector("#app").style.backgroundImage = `linear-gradient(to bottom, ${self._rgbToRgb(palette.DarkMuted._rgb)} 0%, ${self._rgbToRgb(palette.DarkVibrant._rgb)} 100%)`
+                                }else{
+                                    document.querySelector("#app").style.backgroundImage = `linear-gradient(to bottom, ${self._rgbToRgb(palette.Muted._rgb)} 0%, ${self._rgbToRgb(palette.LightMuted._rgb)} 100%)`
+                                }
+                            })
+
                             try {
                                 clearInterval(bginterval);
                             } catch (err) {

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

@@ -92,6 +92,12 @@
             }
         },
         methods: {
+            dragStart(evt) {
+                evt.dataTransfer.setData('text/plain', JSON.stringify({
+                    type: this.item.attributes.playParams.kind ?? this.item.type,
+                    id: this.item.id
+                }))
+            },
             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/views/components/sidebar-playlist.ejs

@@ -162,6 +162,7 @@
                 if(data.id == this.item.id) {
                     return;
                 }
+                console.log(data)
                 if(data) {
                     if(this.item.type == "library-playlists" || this.item.type == "library-playlist-folders") {
                         if(data.type == "library-playlists" && this.item.type == "library-playlists") {

src/renderer/views/main.ejs

@@ -18,9 +18,11 @@
     <link rel="stylesheet/less" type="text/css" href="style.less"/>
     <script src="less.js"></script>
     <script src="<%- (env.dev ? "vue.js" : "vue.dev.js") %>"></script>
+    <script src="vuex.min.js"></script>
     <script src="sortable.min.js"></script>
     <script src="vue-observe-visibility.min.js"></script>
     <script src="sortable.min.js"></script>
+    <script src="vibrant.min.js"></script>
     <script src="vuedraggable.umd.min.js"></script>
     <link rel="manifest" href="./manifest.json?v=2">
     <script src="https://js-cdn.music.apple.com/hls.js/2.141.0/hls.js/hls.js"></script>

src/renderer/views/pages/zoo.ejs

@@ -2,6 +2,7 @@
     <div class="content-inner">
         <h3>Welcome to element park. *BERR NERR NERR NERR NERRRRR BERR NER NER NER NERRR BERRR NR NR NRRRR*</h3>
         <button @click="app.playMediaItemById('1592151778', 'album')">Play Test Album</button>
+        {{ $store.state.test }}
         <div class="spinner"></div>
     </div>
 </template>