Merge branch 'main' of https://github.com/Apple-Music-Electron/Cider

resources/cider-ui-tests/index.js

@@ -294,30 +294,6 @@ const app = new Vue({
             }
             return hash;
         },
-        playAnimatedArtwork(url) {
-            if (Hls.isSupported()) {
-                var video = document.querySelector(`[vid="${app.hashCode(url)}"] > video`)
-                console.log('supported');
-                var hls = new Hls();
-                // bind them together
-                if (video) {
-                    hls.attachMedia(video);
-                    hls.on(Hls.Events.MEDIA_ATTACHED, function () {
-                        console.log('video and hls.js are now bound together !');
-                        hls.loadSource(url);
-                        hls.on(Hls.Events.MANIFEST_PARSED, function (event, data) {
-                            video.play();
-                            return "";
-                        });
-                    });
-                } else {
-                    console.log("hso");
-                    return "";
-                }
-            } else {
-                return "";
-            }
-        },
         routeView(item) {
             let self = this
             app.showingPlaylist = [];
@@ -1432,4 +1408,3 @@ var checkIfScrollIsStatic = setInterval(() => {
     }
 
 }, 50);
-

resources/cider-ui-tests/views/components/animatedartwork-view.ejs

@@ -1,7 +1,7 @@
 <script type="text/x-template" id="animatedartwork-view">
     <template v-if="video">
         <div class="animated" v-bind:vid="app.hashCode(video).toString()">
-            <video class="animated-artwork-video" loop id="animated-artwork"></video>
+            <video ref="video" class="animated-artwork-video" loop id="animated-artwork"></video>
         </div>
     </template>
 </script>
@@ -9,13 +9,39 @@
 <script>
     Vue.component('animatedartwork-view', {
         template: '#animatedartwork-view',
-        props: ['video'],
+        props: ['video', 'hls'],
         mounted() {
             if (this.video) {
+
                 this.$nextTick(function () {
-                    app.playAnimatedArtwork(this.video);
+                    var config = {
+                        backBufferLength: 0,
+                        enableWebVTT: false,
+                        enableCEA708Captions: false,
+                        emeEnabled: false,
+                        abrEwmaDefaultEstimate: 10000,
+                        testBandwidth: false
+                    };
+                    if (this.hls) {
+                        console.log('detached');
+                        this.hls.detachMedia();
+                    } else {
+
+                        this.hls = new Hls(config);
+                    }
+                    // bind them together
+                    if (this.$refs.video) {
+                        this.hls.attachMedia(this.$refs.video);
+                        this.hls.loadSource(this.video);
+                        this.hls.loadLevel = 4;
+                    } 
                 })
             }
+        },
+        beforeDestroy() {
+            this.hls.detachMedia();
+            this.hls.destroy();
+            console.log('killed')
         }
     });
 </script>

resources/cider-ui-tests/views/components/mediaitem-square-large.ejs

@@ -6,6 +6,7 @@
                 <div class="artwork">
                     <mediaitem-artwork
                             :url="item.attributes.artwork ? item.attributes.artwork.url : ''"
+                            :video="(item.attributes != null && item.attributes.editorialVideo != null) ? (item.attributes.editorialVideo.motionDetailSquare ? item.attributes.editorialVideo.motionDetailSquare.video : (item.attributes.editorialVideo.motionSquareVideo1x1 ? item.attributes.editorialVideo.motionSquareVideo1x1.video : '')) : '' "
                             size="300"
                             :type="item.type"></mediaitem-artwork>
                 </div>