(WIP) changes to playlist/album pages, added <artwork-material>

src/main/base/win.ts

@@ -85,6 +85,8 @@ export class Win {
         this.options.height = windowState.height;
 
         // Start the webserver for the browser window to load
+        const ws = new wsapi()
+        ws.InitWebSockets()
         this.startWebServer();
 
         this.win = new electron.BrowserWindow(this.options);
@@ -191,8 +193,6 @@ export class Win {
          * TODO: Broadcast the remote so that /web-remote/ can connect
          * https://github.com/ciderapp/Apple-Music-Electron/blob/818ed18940ff600d76eb59d22016723a75885cd5/resources/functions/handler.js#L1173
          */
-        const ws = new wsapi()
-        ws.InitWebSockets()
         const remote = express();
         remote.use(express.static(path.join(this.paths.srcPath, "./web-remote/")))
         remote.listen(this.remotePort, () => {

src/main/base/wsapi.ts

@@ -18,13 +18,6 @@ private class standardResponse {
 }
 
 export class wsapi {
-    private standa2rdResponse (status, data, message, type: string = "generic") {
-        this.status = status;
-        this.message = message;
-        this.data = data;
-        this.type = type;
-    }
-
     port: any = 26369
     wss: any = null
     clients: []

src/renderer/style.less

@@ -254,6 +254,32 @@ input[type="text"], input[type="number"] {
   }
 }
 
+.artworkMaterial {
+  position: relative;
+  height:100%;
+  width:100%;
+  overflow: hidden;
+  pointer-events: none;
+
+  >img {
+    position: absolute;
+    width: 200%;
+    opacity: 0.5;
+    filter: brightness(200%) blur(180px) saturate(280%) contrast(2);
+  }
+
+  >img:first-child {
+    top:0;
+    left:0;
+  }
+
+  >img:last-child {
+    bottom:0;
+    right: 0;
+    transform: rotate(180deg);
+  }
+}
+
 
 [artwork-hidden] {
   transition: opacity .25s var(--appleEase);
@@ -2345,7 +2371,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
 .playlist-page {
   --bgColor: transparent;
   padding: 0px;
-  background: linear-gradient(180deg, var(--bgColor) 32px, var(--bgColor) 59px, transparent 60px, transparent 100%);
+  //background: linear-gradient(180deg, var(--bgColor) 32px, var(--bgColor) 18px, transparent 60px, transparent 100%);
   top: 0;
   padding-top: var(--navigationBarHeight);
 
@@ -2356,6 +2382,48 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   .playlist-display {
     padding: var(--contentInnerPadding);
     min-height: 300px;
+    position: relative;
+
+    .artworkContainer {
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0;
+      margin: 0;
+      padding: 0;
+      -webkit-mask-image: radial-gradient(at top left, black, transparent 70%), radial-gradient(at top right, black, transparent 70%), linear-gradient(180deg, rgb(200 200 200), transparent 98%);
+      opacity: .7;
+
+      .artworkMaterial>img {
+        filter: brightness(100%) blur(80px) saturate(100%) contrast(1);
+        object-position: center;
+        object-fit: cover;
+        width: 100%;
+        height: 100%;
+        transform: unset;
+      }
+      .artworkMaterial>img:last-child {
+        display: none;
+      }
+    }
+
+    .playlistInfo {
+      z-index: 1;
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      top: 0;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 100%;
+      height: 100%;
+
+      >.row {
+        width: calc(100% - 32px);
+      }
 
       .playlist-info {
         flex-shrink: unset;
@@ -2456,6 +2524,9 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
       }
     }
 
+
+  }
+
   .friends-info {
     display: flex;
     flex-flow: column;

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

@@ -0,0 +1,33 @@
+<script type="text/x-template" id="artwork-material">
+    <div class="artworkMaterial">
+        <img :src="src"/>
+        <img :src="src"/>
+    </div>
+</script>
+
+<script>
+    Vue.component('artwork-material', {
+        template: '#artwork-material',
+        data: function () {
+            return {
+                src: ""
+            }
+        },
+        mounted() {
+            this.src = app.getMediaItemArtwork(this.url, this.size)
+        },
+        props: {
+            url: {
+                type: String,
+                required: true
+            },
+            size: {
+                type: [String, Number],
+                required: false,
+                default: '32'
+            }
+        },
+        methods: {
+        }
+    });
+</script>

src/renderer/views/main.ejs

@@ -659,6 +659,8 @@
     </button>
 </script>
 
+<!-- Artwork Material -->
+<%- include('components/artwork-material') %>
 <!-- Menu Panel -->
 <%- include('components/menu-panel') %>
 <!-- Playlist Listing -->

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

@@ -7,14 +7,17 @@
             </div>
         </template>
         <template v-if="app.playlists.loadingState == 1">
-            <div class="playlist-display row"
+            <div class="playlist-display"
                  :style="{
-                background: (data.attributes.artwork != null && data.attributes.artwork['bgColor'] != null) ? ('#' + data.attributes.artwork.bgColor) : '',
+                '--bgColor': (data.attributes.artwork != null && data.attributes.artwork['bgColor'] != null) ? ('#' + data.attributes.artwork.bgColor) : '',
-                color: (data.attributes.artwork != null && data.attributes.artwork['textColor1'] != null) ? ('#' + data.attributes.artwork.textColor1) : ''
+                '--textColor': (data.attributes.artwork != null && data.attributes.artwork['textColor1'] != null) ? ('#' + data.attributes.artwork.textColor1) : ''
             }">
+                <div class="playlistInfo">
+                    <div class="row">
                         <div class="col-auto flex-center">
                             <div style="width: 260px;height:260px;">
                                 <mediaitem-artwork
+                                        shadow="large"
                                         :video-priority="true"
                                         :url="(data.attributes != null && data.attributes.artwork != null) ? data.attributes.artwork.url : ((data.relationships != null && data.relationships.tracks.data.length > 0 && data.relationships.tracks.data[0].attributes != null) ? ((data.relationships.tracks.data[0].attributes.artwork != null)? data.relationships.tracks.data[0].attributes.artwork.url : ''):'')"
                                         :video="(data.attributes != null && data.attributes.editorialVideo != null) ? (data.attributes.editorialVideo.motionDetailSquare ? data.attributes.editorialVideo.motionDetailSquare.video : (data.attributes.editorialVideo.motionSquareVideo1x1 ? data.attributes.editorialVideo.motionSquareVideo1x1.video : '')) : '' "
@@ -86,6 +89,12 @@
                             </div>
                         </div>
                     </div>
+                </div>
+                <div class="artworkContainer" v-if="data.attributes.artwork != null">
+                    <artwork-material :url="data.attributes.artwork.url" size="260"></artwork-material>
+                </div>
+
+            </div>
             <div class="playlist-body">
                 <div class="well">
                     <div style="width:100%">

src/renderer/views/pages/zoo.ejs

@@ -5,5 +5,8 @@
         {{ $store.state.test }}
         <div class="spinner"></div>
         <button class="md-btn">Cider Button</button>
+        <div style="position: relative;width: 300px;height: 300px;">
+            <artwork-material url="https://is3-ssl.mzstatic.com/image/thumb/Music126/v4/13/41/13/1341133b-560f-1aee-461f-c4b32ec049b4/cover.jpg/{w}x{h}bb.jpg"></artwork-material>
+        </div>
     </div>
 </template>