simple fs

src/renderer/index.js

@@ -232,6 +232,7 @@ const app = new Vue({
         mkIsReady: false,
         playerReady: false,
         animateBackground: false,
+        currentArtUrl: '',
         lyricon: false,
         currentTrackID: '',
         currentTrackIDBG: '',
@@ -587,6 +588,7 @@ const app = new Vue({
                 self.chrome.artworkReady = false
                 self.lyrics = []
                 self.richlyrics = []
+                app.getCurrentArtURL();
                 app.getNowPlayingArtwork(42);
                 app.getNowPlayingArtworkBG(32);
                 app.loadLyrics()
@@ -2527,6 +2529,7 @@ const app = new Vue({
                 }
             }, 200)
         },
+
         getNowPlayingArtwork(size = 600) {
             if (typeof this.mk.nowPlayingItem === "undefined") return;
             let interval = setInterval(() => {
@@ -2537,7 +2540,7 @@ const app = new Vue({
                         if (document.querySelector('.app-playback-controls .artwork') != null) {
                             clearInterval(interval);
                         }
-                        if (this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"]) {
+                        if (app.mk.nowPlayingItem.attributes.artwork != null && app.mk.nowPlayingItem.attributes.artwork.url != null && app.mk.nowPlayingItem.attributes.artwork.url!= '' ) {
                             document.querySelector('.app-playback-controls .artwork').style.setProperty('--artwork', `url("${decodeURI((this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"])).replace('{w}', size).replace('{h}', size)}")`);
                             try {
                                 clearInterval(interval);
@@ -2566,6 +2569,21 @@ const app = new Vue({
             }, 200)
 
 
+        },
+        async getCurrentArtURL(){
+            try{
+                this.currentArtUrl = '';
+                if (app.mk.nowPlayingItem != null && app.mk.nowPlayingItem.attributes != null && app.mk.nowPlayingItem.attributes.artwork != null && app.mk.nowPlayingItem.attributes.artwork.url != null && app.mk.nowPlayingItem.attributes.artwork.url!= '' ) 
+                {this.currentArtUrl = (this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"] ?? '').replace('{w}', 50).replace('{h}', 50);
+                } else {
+                    let data = await this.mk.api.library.song(this.mk.nowPlayingItem.id);
+                    if (data != null && data !== "" && data.attributes != null && data.attributes.artwork != null) {
+                        this.currentArtUrl = (data["attributes"]["artwork"]["url"] ?? '').replace('{w}', 50).replace('{h}', 50);;
+                    } else {this.currentArtUrl = ''}
+                }
+            }catch(e){
+
+            }
         },
         async setLibraryArt() {
             if (typeof this.mk.nowPlayingItem === "undefined") return;

src/renderer/style.less

@@ -3567,16 +3567,149 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
     flex-grow: 1;
   }
 
+  .right-col{
+    height: 50vh;
+  }
+
+  .lyrics-col{
+    width: 60vh;
+    height: 50vh;
+
+    ::-webkit-scrollbar {
+      display: none;
+    }
+
+    &:hover ::-webkit-scrollbar {
+      display: unset;
+    }
+  }    
+
   .artwork-col {
     justify-content: center;
     align-items: center;
     display: flex;
+    flex-direction: column;
 
     .artwork {
       width: 50vh;
       height: 50vh;
     }
-  }
+
+    .controls-parents{
+      width: 50vh;
+    }
+
+    .app-playback-controls  {
+      .song-artist , .song-name {
+        font-weight: 600;
+        text-align: center;
+        font-size: 0.9em;
+        margin-top: 0.25vh;
+        height: 0.9em;
+        line-height: 0.9em;
+        overflow: hidden;
+        max-width: 360px;
+      
+        .song-name-normal {
+          height: inherit;
+        }
+      
+        &.song-artist-marquee {
+          > marquee {
+            //margin-bottom: -3px;
+          }
+        }
+      }
+      .song-artist {
+        font-size: 0.875em;
+      }
+    }
+
+    .app-playback-controls .playback-info {
+      margin-top: 0.5vh;
+      width: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-direction: column;
+      position: relative;
+
+      input[type="range"] {
+        width: 100%;
+      }
+      >div {
+        width: 100%;
+        text-align: center;
+      }
+
+
+    }
+
+    .app-playback-controls .song-progress {
+      @bgColor: transparent;
+      //height: 16px;
+      position: absolute;
+      bottom: -2.5vh;
+      left: 0px;
+      background: @bgColor;
+
+      .song-duration p {
+        font-weight: 400;
+        font-size: 10px;
+        height: 1.2em;
+        line-height: 1.3em;
+        overflow: hidden;
+        margin: 0 0 0.5em;
+      }
+    
+      &:hover {
+        > input[type=range] {
+          &::-webkit-slider-thumb {
+            opacity: 1;
+            transform: scale(1);
+            z-index: 1;
+          }
+        }
+      }
+    
+      > input[type=range] {
+        appearance: none;
+        width: 100%;
+        height: 4px;
+        background-color: rgb(200 200 200 / 10%);
+        border-radius: 2px;
+    
+        &::-webkit-slider-thumb {
+          opacity: 0;
+          transform: scale(0.5);
+          -webkit-appearance: none;
+          appearance: none;
+          width: 12px;
+          height: 12px;
+          border-radius: 100%;
+          background: var(--keyColor);
+          cursor: default;
+          transition: opacity .10s var(--appleEase), transform .10s var(--appleEase);
+        }
+    
+        &::-moz-range-thumb {
+          width: 8px;
+          height: 8px;
+          border-radius: 100%;
+          background: var(--keyColor);
+          cursor: default;
+        }
+      }
+    }
+
+    .control-buttons {
+      margin-top: 2vh;
+      display: inline-flex;
+      width: 100%;
+      justify-content: center;
+    }
+    
+  } 
 }
 
 /* Cider */

src/renderer/views/components/fullscreen.ejs

@@ -2,20 +2,88 @@
     <div class="fullscreen-view">
         <div class="row fs-row">
             <div class="col artwork-col">
-                <div class="artwork">
+                <div class="artwork"  @click="app.appMode = 'player'">
                     <mediaitem-artwork
                             :size="600"
-                            url=""
+                            :url="image ?? ''"
                     ></mediaitem-artwork>
                 </div>
-            </div>
+                <div class="controls-parents">
-            <div class="col">
+                <template v-if="app.mkReady()">
-                <div class="fs-info">
+                    <div class="app-playback-controls" @mouseover="app.chrome.progresshover = true"
-                    <div>Name</div>
+                         @mouseleave="app.chrome.progresshover = false" @contextmenu="app.nowPlayingContextMenu">
-                    <div>Name</div>
+                        <div class="playback-info">
-                    <div>Name</div>
+                            <div class="song-name">
+                                {{ app.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`)">
+                                    {{ app.mk.nowPlayingItem["attributes"]["artistName"] }}
+                                </div>
+                                <div class="song-artist item-navigate" style="display: inline-block;"
+                                     @click="app.getNowPlayingItemDetailed('album')">
+                                    {{ (app.mk.nowPlayingItem["attributes"]["albumName"]) ? (" - " +
+                                    app.mk.nowPlayingItem["attributes"]["albumName"]) : "" }}
+                                </div>
+                            </div>
+
+                            <div class="song-progress">
+                                <div class="song-duration" style="justify-content: space-between; height: 1px;"
+                                     :style="[app.chrome.progresshover ? {'display': 'flex'} : {'display' : 'none'} ]">
+                                    <p style="width: auto">{{ app.convertToMins(app.getSongProgress()) }}</p>
+                                    <p style="width: auto">{{ app.convertToMins(app.mk.currentPlaybackDuration) }}</p>
+                                </div>
+
+                                <input type="range" step="0.01" min="0" :style="app.progressBarStyle()"
+                                       @input="app.playerLCD.desiredDuration = $event.target.value;app.playerLCD.userInteraction = true"
+                                       @mouseup="app.mk.seekToTime($event.target.value);app.playerLCD.desiredDuration = 0;app.playerLCD.userInteraction = false"
+                                       :max="app.mk.currentPlaybackDuration" :value="app.getSongProgress()">
+                            </div>
+                        </div>
+                    <div class="control-buttons">    
+                        <div class="app-chrome-item">
+                            <button class="playback-button--small shuffle" v-if="app.mk.shuffleMode == 0"
+                                    @click="app.mk.shuffleMode = 1"></button>
+                            <button class="playback-button--small shuffle active" v-else
+                                    @click="app.mk.shuffleMode = 0"></button>
+                        </div>
+                        <div class="app-chrome-item">
+                            <button class="playback-button previous" @click="app.prevButton()"></button>
+                        </div>
+                        <div class="app-chrome-item">
+                            <button class="playback-button pause" @click="app.mk.pause()" v-if="app.mk.isPlaying"></button>
+                            <button class="playback-button play" @click="app.mk.play()" v-else></button>
+                        </div>
+                        <div class="app-chrome-item">
+                            <button class="playback-button next" @click="app.mk.skipToNextItem()"></button>
+                        </div>
+                        <div class="app-chrome-item">
+                            <button class="playback-button--small repeat" v-if="app.mk.repeatMode == 0"
+                                    @click="app.mk.repeatMode = 1"></button>
+                            <button class="playback-button--small repeat active" @click="app.mk.repeatMode = 2"
+                                    v-else-if="app.mk.repeatMode == 1"></button>
+                            <button class="playback-button--small repeat repeatOne" @click="app.mk.repeatMode = 0"
+                                    v-else-if="app.mk.repeatMode == 2"></button>
+                        </div>
+                    </div>
+
+                    </div>
+                </template>
                 </div>
             </div>
+            <div class="col right-col">
+                <!-- <div class="fs-info">
+                    <div>Name</div>
+                    <div>Name</div>
+                    <div>Name</div>
+                </div> -->
+                <div class="lyrics-col">
+                    <lyrics-view :yoffset="10" :time="time" :lyrics="lyrics"
+                    :richlyrics="richlyrics"></lyrics-view>
+                <div>
+            </div>
         </div>
 
 
@@ -25,6 +93,29 @@
 <script>
     Vue.component('fullscreen-view', {
         template: '#fullscreen-view',
+        props: {
+            time: {
+                type: Number,
+                required: false
+            },
+            lyrics: {
+                type:  Array,
+                required: false
+            },
+            richlyrics: {
+                type:  Array,
+                required: false
+            },
+            image: {
+                type: String,
+                required: false
+            }
+        },
+        data: function(){
+            return {
+                app : this.$root,
+            }
+        },
         methods: {
             sayHello: function () {
                 alert('Hello world!');

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

@@ -42,16 +42,15 @@
 <script>
     Vue.component('lyrics-view', {
         template: '#lyrics-view',
-        props: ["time", "lyrics", "richlyrics", "translation", "onindex"],
+        props: ["time", "lyrics", "richlyrics", "translation", "onindex", "yoffset"],
         data: function () {
             return {
                 app: this.$root,
             }
         },
-        watch: {
+        watch: {         
-
             time: function () {
-                if (app.lyricon && app.drawer.open && this.$refs.lyricsview) {
+                if (((app.lyricon && app.drawer.open) || app.appMode == 'fullscreen') && this.$refs.lyricsview) {
                     let currentLine = this.$refs.lyricsview.querySelector(`.lyric-line.active`)
                     if (currentLine && currentLine.getElementsByClassName('lyricWaiting').length > 0) {
                         let duration = currentLine.getAttribute("end") - currentLine.getAttribute("start");
@@ -119,17 +118,16 @@
                 if(startTime != 9999999) this.app.seekTo(startTime, false);
             },
             getActiveLyric() {
-             //   console.log(this.time);
                 const delayfix = 0.1
                 const prevLine = app.currentLyricsLine;
                 for (var i = 0; i < this.lyrics.length; i++) {
                     if (this.time + delayfix >= this.lyrics[i].startTime && this.time + delayfix <= app.lyrics[i].endTime) {
                         if (app.currentLyricsLine != i) {
                             app.currentLyricsLine = i;
-                            if (app.lyricon && app.drawer.open && this.$refs.lyricsview.querySelector(`.lyric-line[line-index="${i}"]`)) {
+                            if (((app.lyricon && app.drawer.open) || app.appMode == 'fullscreen') && this.$refs.lyricsview.querySelector(`.lyric-line[line-index="${i}"]`)) {
                                if(this.$refs.lyricsview.querySelector(`.lyric-line[line-index="${prevLine}"]`)) {this.$refs.lyricsview.querySelector(`.lyric-line[line-index="${prevLine}"]`).classList.remove("active");}
                                 this.$refs.lyricsview.querySelector(`.lyric-line[line-index="${i}"]`).classList.add("active")
-                                if (checkIfScrollIsStatic) {
+                                if (this.checkIfScrollIsStatic) {
                                     let lyricElement = this.$refs.lyricsview.querySelector(`.lyric-line[line-index="${i}"]`)
                                     // this.$refs.lyricsview.querySelector(`.lyric-line[line-index="${i}"]`).scrollIntoView({
                                     //     behavior: "smooth",
@@ -149,12 +147,12 @@
                                     let scrollTop = parent.scrollTop + scrollTopDiff
                                     let scrollLeft = parent.scrollLeft + scrollLeftDiff
                                     parent.scrollTo({
-                                        top: scrollTop - 128,
+                                        top: scrollTop - (this.yoffset ?? 128),
                                         left: scrollLeft,
                                         behavior: 'smooth'
                                     })
 
-                                }
+                                } 
                             }
                         } else if (app.currentLyricsLine == 0 && app.drawer.open) {
                             if (this.$refs.lyricsview.querySelector(`.lyric-line[line-index="0"]`) && !this.$refs.lyricsview.querySelector(`.lyric-line[line-index="0"]`).classList.contains("active"))
@@ -164,7 +162,7 @@
                     }
                 }
                 try{
-                        if (app.drawer.open){
+                    if ((app.drawer.open) || app.appMode == 'fullscreen'){ 
                         try{this.$refs.lyricsview.querySelector(`.lyric-line[line-index="${prevLine}"]`).childNodes.classList.remove("verse-active");} catch(e){}
                                 for (child of this.$refs.lyricsview.querySelector(`.lyric-line[line-index="${app.currentLyricsLine}"]`).querySelectorAll(".verse")){
                                     if (this.time + 0.1 >= child.getAttribute("lyricstart") * 1 + child.getAttribute("versestart") * 1){
@@ -184,7 +182,18 @@
                     return this.richlyrics[index].l
                 }
                 else return []
+            },
+            checkIfScrollIsStatic : setInterval(() => {
+            try {
+                if (position === this.$refs.lyricsview.scrollTop) {
+                    clearInterval(checkIfScrollIsStatic)
+                    // do something
+                }
+                position = this.$refs.lyricsview.scrollTop
+            } catch (e) {
             }
+            }, 50)
+            ,
         }
     });    
 </script>

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

@@ -27,7 +27,7 @@
                 </div>
             </div>
             <div class="info-rect" :class="{'info-rect-card': kind == 'card'}" :style="{'--bgartwork': getArtworkUrl(size, true)}">
-                <div class="title" v-if="item.attributes.artistNames == null || kind!= 'card'" @click.self='app.routeView(item)'>
+                <div class="title" v-if="item.attributes.artistNames == null || kind!= 'card'" @click='app.routeView(item)'>
                     <div class="item-navigate text-overflow-elipsis">{{ item.attributes.name }}</div>
                     <div v-if="item.attributes && item.attributes.contentRating == 'explicit'" style= "margin-top: -2.6px;margin-left: 3px;">🅴</div> 
                 </div>       

src/renderer/views/main.ejs

@@ -69,7 +69,9 @@
                         <template v-if="mkReady()">
                             <div class="app-playback-controls" @mouseover="chrome.progresshover = true"
                                  @mouseleave="chrome.progresshover = false" @contextmenu="nowPlayingContextMenu">
-                                <div class="artwork"></div>
+                                <div class="artwork" @click="drawer.open = false; appMode = 'fullscreen'">
+                                    <img class="small" :url="currentArtUrl"></img>
+                                </div>
                                 <div class="playback-info">
                                     <div class="song-name">
                                         {{ mk.nowPlayingItem["attributes"]["name"] }}
@@ -466,7 +468,7 @@
     </transition>
     <transition name="fsModeSwitch">
         <div class="fullscreen-view-container" v-if="appMode == 'fullscreen'">
-            <fullscreen-view></fullscreen-view>
+            <fullscreen-view :image="currentArtUrl.replace('50x50', '600x600')" :time="lyriccurrenttime" :lyrics="lyrics" :richlyrics="richlyrics"></fullscreen-view>
         </div>
     </transition>
     <transition name="wpfade">