From eac60b04f29c8e4b8bda3bf1441ad5e619f0804a Mon Sep 17 00:00:00 2001
From: vapormusic <vietanhfat@gmail.com>
Date: Sat, 8 Oct 2022 18:31:50 +0700
Subject: [PATCH] new mv pip method

---
 src/renderer/main/vueapp.js       | 20 ++++++++++++--------
 src/renderer/style.less           |  6 ++++++
 src/renderer/views/app/panels.ejs | 18 ++++++++++--------
 3 files changed, 28 insertions(+), 16 deletions(-)

diff --git a/src/renderer/main/vueapp.js b/src/renderer/main/vueapp.js
index 3ae6c372..3b9d118d 100644
--- a/src/renderer/main/vueapp.js
+++ b/src/renderer/main/vueapp.js
@@ -133,6 +133,7 @@ const app = new Vue({
     animateBackground: false,
     currentArtUrl: "",
     currentArtUrlRaw: "",
+    mvViewMode: "full",
     lyricon: false,
     currentTrackID: "",
     lyrics: [],
@@ -4879,11 +4880,13 @@ const app = new Vue({
       }
       app.modals.settings = true;
     },
-    fullscreen(flag) {
+    fullscreen(flag, mv = false) {
       this.fullscreenState = flag;
       if (flag) {
         ipcRenderer.send("setFullScreen", true);
-        app.appMode = "fullscreen";
+        if (!mv) {app.appMode = "fullscreen";} else {
+          app.mvViewMode = "full"
+        }
 
         document.addEventListener("keydown", (event) => {
           if (event.key === "Escape" && app.appMode === "fullscreen") {
@@ -4896,12 +4899,13 @@ const app = new Vue({
       }
     },
     pip() {
-      document.querySelector("video#apple-music-video-player").requestPictureInPicture();
-      // .then(pictureInPictureWindow => {
-      //     pictureInPictureWindow.addEventListener("resize", () => {
-      //         console.log("[PIP] Resized")
-      //     }, false);
-      //   })
+      // document.querySelector("video#apple-music-video-player").requestPictureInPicture();
+      // // .then(pictureInPictureWindow => {
+      // //     pictureInPictureWindow.addEventListener("resize", () => {
+      // //         console.log("[PIP] Resized")
+      // //     }, false);
+      // //   })
+      this.mvViewMode = (this.mvViewMode ==  "mini") ? "full": "mini"
     },
     miniPlayer(flag) {
       if (flag) {
diff --git a/src/renderer/style.less b/src/renderer/style.less
index 3403196e..fdc2dd40 100644
--- a/src/renderer/style.less
+++ b/src/renderer/style.less
@@ -2396,6 +2396,12 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   height: 100%;
   bottom: 0;
   z-index: 100000;
+  &.mini{
+    width: 20%;
+    height: 20%;
+    right: 1vw;
+    bottom: 5vh;
+  }
 }
 
 #apple-music-video-container {
diff --git a/src/renderer/views/app/panels.ejs b/src/renderer/views/app/panels.ejs
index 75702435..fcc74402 100644
--- a/src/renderer/views/app/panels.ejs
+++ b/src/renderer/views/app/panels.ejs
@@ -46,7 +46,7 @@
 <transition name="modal">
     <moreinfo-modal v-if="modals.moreInfo" :data="moreinfodata"></moreinfo-modal>
 </transition>
-<div id="apple-music-video-container">
+<div id="apple-music-video-container" :class="{'mini': mvViewMode == 'mini'}">
     <div id="apple-music-video-player-controls">
         <div id="player-exit" title="Close" @click="exitMV();fullscreen(false);">
             <svg fill="white" xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 21 21"
@@ -56,7 +56,7 @@
                         fill-rule="nonzero" />
             </svg>
         </div>
-        <div id="captions" v-if="lyricon">{{((lyricon) ? ((lyrics.length > 0 && lyrics[currentLyricsLine] &&
+        <div id="captions" v-if="lyricon && mvViewMode == 'full'">{{((lyricon) ? ((lyrics.length > 0 && lyrics[currentLyricsLine] &&
             lyrics[currentLyricsLine].line ) ?
             lyrics[currentLyricsLine].line.replace('lrcInstrumental','') : "") : '') + ((lyricon) ?
             ((lyrics.length
@@ -66,19 +66,19 @@
             '')}}
         </div>
         <div class="playback-info music-player-info">
-            <div class="song-artist-album-content"
+            <div class="song-artist-album-content" v-if="mvViewMode == 'full'"
                  style="display: inline-block; -webkit-box-orient: horizontal; white-space: nowrap;">
                 <div class="song-artist" style="display: inline-block">
                     {{ mk.nowPlayingItem?.attributes?.artistName ?? '' }}
                 </div>
             </div>
-            <div class="song-name">
+            <div class="song-name" v-if="mvViewMode == 'full'">
                 {{ mk.nowPlayingItem?.attributes?.name ?? '' }}
                 <div class="explicit-icon"
                      v-if="mk.nowPlayingItem?.attributes?.contentRating == 'explicit'"
                      style="display: inline-block"></div>
             </div>
-            <div class="song-progress">
+            <div class="song-progress" v-if="mvViewMode == 'full'">
                 <p style="width: auto">{{ convertTime(getSongProgress()) }}</p>
                 <input type="range" step="0.01" min="0" :style="progressBarStyle()" style="width: 95%"
                        @input="playerLCD.desiredDuration = $event.target.value;playerLCD.userInteraction = true"
@@ -88,7 +88,7 @@
                 <p style="width: auto">{{ convertTime(mk.currentPlaybackDuration) }}
             </div>
             <div class="app-chrome-item display--large">
-                <div class="app-chrome-item volume display--large">
+                <div class="app-chrome-item volume display--large" v-if="mvViewMode == 'full'">
                     <button class="volume-button--small volume" @click="muteButtonPressed()"
                             :class="{'active': this.cfg.audio.volume == 0}"
                             :title="cfg.audio.muted ? $root.getLz('term.unmute') : $root.getLz('term.mute')"
@@ -98,11 +98,13 @@
                            v-model="mk.volume" v-if="typeof mk.volume != 'undefined'" @change="checkMuteChange()"
                            v-b-tooltip.hover :title="formatVolumeTooltip()">
                 </div>
+                <template v-if="mvViewMode == 'full'">
                 <button class="playback-button pause" @click="mk.pause()" v-if="mk.isPlaying"
                         :title="$root.getLz('term.pause')" v-b-tooltip.hover></button>
                 <button class="playback-button play" @click="mk.play()" v-else
                         :title="$root.getLz('term.play')" v-b-tooltip.hover></button>
-                <div class="app-chrome-item generic">
+                </template>
+                <div class="app-chrome-item generic" v-if="mvViewMode == 'full'">
                     <template v-if="lyrics && lyrics != [] && lyrics.length > 0">
                         <button class="playback-button--small lyrics"
                                 :title="$root.getLz('term.lyrics')"
@@ -122,7 +124,7 @@
                     <%- include("../svg/pip.svg") %>
                 </div>
                 <div id="player-fullscreen"
-                     @click="fullscreen(!fullscreenState)"
+                     @click="fullscreen(!fullscreenState, true)"
                      title="Fullscreen"
                      v-b-tooltip.hover>
                     <%- include("../svg/fullscreen.svg") %>