music video

resources/cider-ui-tests/index.js

@@ -136,6 +136,8 @@ const app = new Vue({
             // Set profile name
             this.chrome.userinfo = await this.mkapi("personalSocialProfile", false, "")
 
+            MusicKit.getInstance().videoContainerElement = document.getElementById("apple-music-video-player")
+            
             this.mk.addEventListener(MusicKit.Events.playbackTimeDidChange, (a) => {
                 self.playerLCD.playbackDuration = (self.mk.currentPlaybackTime)
                 self.lyriccurrenttime = app.mk.currentPlaybackTime;
@@ -204,6 +206,13 @@ const app = new Vue({
             })
 
             this.mk.addEventListener(MusicKit.Events.nowPlayingItemDidChange, (a) => {
+                let type = (self.mk.nowPlayingItem != null) ?  self.mk.nowPlayingItem["type"] ?? '' : ''; 
+
+                if (type.includes("musicVideo")){
+                    document.getElementById("apple-music-video-container").style.display = "block";
+                } else {
+                    document.getElementById("apple-music-video-container").style.display = "none";
+                }
                 self.chrome.artworkReady = false
                 self.lyrics = []
                 app.loadLyrics()
@@ -244,7 +253,7 @@ const app = new Vue({
             if(kind.toString().includes("artist")){
                 app.getArtistInfo(id, isLibrary)
             }
-            else if(!kind.toString().includes("radioStation") && !kind.toString().includes("song"))
+            else if(!kind.toString().includes("radioStation") && !kind.toString().includes("song") && !kind.toString().includes("musicVideo"))
             {app.page = (kind) + "_"+ (id); 
             console.log("oks");
             app.getTypeFromID((kind),(id), (isLibrary));} else {
@@ -256,6 +265,10 @@ const app = new Vue({
             let self = this
             
         },
+        exitMV(){
+            MusicKit.getInstance().stop()
+            document.getElementById("apple-music-video-container").style.display = "none";
+        },
         getArtistInfo(id, isLibrary){
             var query = {"omit[resource]": "autos",
             views: ["featured-release", "full-albums", "appears-on-albums", "featured-albums", "featured-on-albums", "singles", "compilation-albums", "live-albums", "latest-release", "top-music-videos", "similar-artists", "top-songs", "playlists", "more-to-hear", "more-to-see"],

resources/cider-ui-tests/style.css

@@ -1858,7 +1858,47 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
     margin-right: 5px;
 }
 
-.playlist-display .playlist-info .playlist-time {
+.playlist-time {
+    font-size: 0.9em;
     margin: 6px;
     opacity: 0.7;
+}
+
+#apple-music-video-container {
+    background: black;
+    position: absolute;
+    float: left;
+    display: none;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    z-index: 100000;
+}
+
+#apple-music-video-player{
+    position: absolute;
+    top: 50%;  
+    width: 100%;
+    transform: translate(0, -50%);
+    
+}
+
+#apple-music-video-player-controls{
+    position: absolute;
+    z-index: 100001;
+    float: left;
+    width: 100%;
+    height: 100%;
+}
+
+#apple-music-video-player-controls #player-exit{
+    position: absolute;
+    z-index: 100001;
+    float: left;
+    width: 100%;
+    margin: 10px;
+}
+
+#apple-music-video-player-controls:hover{
+    opacity: 1;
 }

resources/cider-ui-tests/views/main.ejs

@@ -324,7 +324,16 @@
     <transition name="wpfade">
         <div class="bg-artwork--placeholder" v-else></div>
     </transition>
-
+<div id="apple-music-video-container">
+    <div id="apple-music-video-player-controls">
+        <div id= "player-exit" onclick="app.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 d="M10.5 21C4.724 21 0 16.275 0 10.5S4.724 0 10.5 0 21 4.725 21 10.5 16.276 21 10.5 21zm-3.543-5.967a.96.96 0 00.693-.295l2.837-2.842 2.85 2.842c.167.167.41.295.693.295.552 0 1.001-.461 1.001-1.012 0-.281-.115-.512-.295-.704L11.899 10.5l2.85-2.855a.875.875 0 00.295-.68c0-.55-.45-.998-1.001-.998a.871.871 0 00-.668.295l-2.888 2.855-2.862-2.843a.891.891 0 00-.668-.281.99.99 0 00-1.001.986c0 .269.116.512.295.678L9.088 10.5l-2.837 2.843a.926.926 0 00-.295.678c0 .551.45 1.012 1.001 1.012z" fill-rule="nonzero"/>
+            </svg>
+        </div>
+    </div>
+    <div id="apple-music-video-player"></div>
+</div>
 </div>
 
 <%- include("components/mediaitem-artwork"); %>