animated artworks

resources/cider-ui-tests/index.js

@@ -225,13 +225,41 @@ const app = new Vue({
                 "extend": "artistBio,bornOrFormed,editorialArtwork,editorialVideo,isGroup,origin,hero",
                 "extend[playlists]": "trackCount",
                 "omit[resource:songs]": "relationships",
-                "fields[albums]": "artistName,artistUrl,artwork,contentRating,editorialArtwork,name,playParams,releaseDate,url,trackCount",
+                "fields[albums]": "artistName,artistUrl,artwork,contentRating,editorialArtwork,editorialVideo,name,playParams,releaseDate,url,trackCount",
                 "limit[artists:top-songs]": 20,
                 "art[url]": "f"
             }, {includeResponseMeta: !0})
             this.artistPage.data = artistData.data[0]
             this.page = "artist-page"
         },
+        hashCode(str) {
+            var hash = 0, i, chr;
+            if (str.length === 0) return hash;
+            for (i = 0; i < str.length; i++) {
+              chr   = str.charCodeAt(i);
+              hash  = ((hash << 5) - hash) + chr;
+              hash |= 0; // Convert to 32bit integer
+            }
+            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 "";}
+        },
         getArtistPalette(artist){
             if(artist["attributes"]["artwork"]) {
                 return {
@@ -258,7 +286,7 @@ const app = new Vue({
             else if(!kind.toString().includes("radioStation") && !kind.toString().includes("song") && !kind.toString().includes("musicVideo") && !kind.toString().includes("uploadedVideo"))
             {app.page = (kind) + "_"+ (id); 
             console.log("oks");
-            app.getTypeFromID((kind),(id), (isLibrary));} else {
+            app.getTypeFromID((kind),(id), (isLibrary),{extend:  "editorialVideo"});} else {
                 app.playMediaItemById((id),(kind), (isLibrary), item.attributes.url ?? '')
             }
             document.querySelector("#app-content").scrollTop = 0
@@ -1041,4 +1069,5 @@ var checkIfScrollIsStatic = setInterval(() => {
     }
     position = document.getElementsByClassName('lyric-body')[0].scrollTop } catch (e){}
 
-  }, 50)
+  }, 50);
+

resources/cider-ui-tests/style.css

@@ -1365,6 +1365,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
     align-items: center;
     justify-content: space-between;
     min-height: 300px;
+    position: relative;
 }
 
 .artist-page .artist-image {
@@ -1425,6 +1426,49 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
     width: 100%;
     height: 100%;
 }
+.mediaitem-artwork .animatedartwork-view-box .animated{
+    position: absolute;
+    top: 0px;
+    width: 200px;
+    height: 200px;
+}
+
+.mediaitem-artwork .animatedartwork-view-box .animated > video {
+    width: 200px;
+    height: 200px;
+}
+
+.mediaitem-artwork .animatedartwork-view-box{
+    position: absolute;
+    top: 0px;
+    width: 200px;
+    height: 200px;
+}
+
+.artist-header .animated{
+    width: 100%;
+    height: 100%;
+    align-self: center;
+    position: absolute;
+    overflow: hidden;
+    box-shadow: rgb(0 0 0 / 50%) 0 0 0 1000000px inset;
+}
+
+.artist-header .row .col.flex-center{
+    z-index: 4;
+}
+
+.artist-header .animated > video {
+    overflow: hidden;
+    height: 100%;
+    width: 100%;
+    min-height: 56.25vw;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%,-50%);
+    
+}
 
 .mediaitem-artwork.rounded {
     border-radius: 100%;
@@ -1963,3 +2007,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
 #apple-music-video-player-controls:hover{
     opacity: 1;
 }
+
+img[src=""] {  
+    text-indent: -10000px;
+}

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

@@ -0,0 +1,20 @@
+<script type="text/x-template" id="animatedartwork-view">
+    <template v-if="video">
+        <div class="animated" v-bind:vid="app.hashCode(video).toString()">
+            <video loop id = "animated-artwork"></video>
+        </div>
+    </template>
+</script>
+
+<script>
+    Vue.component('animatedartwork-view', {
+        template: '#animatedartwork-view',
+        props: ['video'],
+        mounted() {
+            if (this.video) {
+            this.$nextTick(function () {
+            app.playAnimatedArtwork(this.video);
+            })}
+        }
+    });
+</script>

resources/cider-ui-tests/views/components/mediaitem-artwork.ejs

@@ -9,6 +9,9 @@
         <div class="mediaitem-artwork">
             <img :src="app.getMediaItemArtwork(url, size)"
                  class="mediaitem-artwork--img">
+            <div v-if="video" class="animatedartwork-view-box">            
+                <animatedartwork-view  :video="video"></animatedartwork-view>   
+            </div>  
         </div>
     </template>
 </script>
@@ -16,7 +19,7 @@
 <script>
     Vue.component('mediaitem-artwork', {
         template: '#mediaitem-artwork',
-        props: ['size', 'url', 'type'],
+        props: ['size', 'url', 'type', 'video'],
         methods: {
             getArtworkStyle() {
                 return {

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

@@ -421,6 +421,8 @@
     <%- include('components/mediaitem-square-large') %>
     <!-- MediaItem Square SP -->
     <%- include('components/mediaitem-square-sp') %>
+    <!-- Animated Artwork View -->
+    <%- include('components/animatedartwork-view') %>
 
     <!-- Lyrics View -->
     <script type="text/x-template" id="lyrics-view">
@@ -451,9 +453,8 @@
         </template>
     </div>
 </script>
-
+    <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
     <script src="https://js-cdn.music.apple.com/musickit/v2/amp/musickit.js"></script>
     <script src="index.js?v=1"></script>
 </body>
-
 </html>

resources/cider-ui-tests/views/pages/artist.ejs

@@ -1,6 +1,8 @@
 <template v-if="page == 'artist-page' && artistPage.data.attributes">
     <div class="content-inner artist-page">
         <div class="artist-header" :style="getArtistPalette(artistPage.data)">
+            <animatedartwork-view v-if="app.artistPage.data.attributes.editorialVideo && (app.artistPage.data.attributes.editorialVideo.motionArtistWide16x9 || app.artistPage.data.attributes.editorialVideo.motionArtistFullscreen16x9)" :video="app.artistPage.data.attributes.editorialVideo.motionArtistWide16x9.video ?? (app.artistPage.data.attributes.editorialVideo.motionArtistFullscreen16x9.video ?? '')" >
+            </animatedartwork-view>
             <div class="row">
                 <div class="col-sm" style="width: auto;">
                     <div class="artist-image">

resources/cider-ui-tests/views/pages/cider-playlist.ejs

@@ -1,19 +1,19 @@
 <script type="text/x-template" id="cider-playlist">
     <div class="content-inner">
-        <template v-if="data != [] && data.attributes != []">
+        <template v-if="data != [] && data.attributes != null">
             <div class="playlist-display row">
                 <div class="col-auto flex-center">
                     <div style="width: 200px;height:200px;">
                         <mediaitem-artwork
-                        :url="(data.attributes != null && data.attributes.artwork != null) ? data.attributes.artwork.url : (data.relationships.tracks.data.length > 0 ? data.relationships.tracks.data[0].attributes.artwork.url ?? '':'')"
+                        :url="(data.attributes != null && data.attributes.artwork && data.attributes.artwork != null) ? data.attributes.artwork.url : ((data.relationships != null && data.relationships.tracks.data.length > 0) ? 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 : '')) : '' "
                         size="200"
                     ></mediaitem-artwork>
                     </div>
                 </div>
                 <div class="col playlist-info">
-                    <div class="playlist-name">{{data.attributes.name ?? (data.attributes.title ?? '') ?? ''}}</div>
+                    <div class="playlist-name">{{data.attributes ? (data.attributes.name ?? (data.attributes.title ?? '') ?? '') : ''}}</div>
-                    <div class="playlist-artist" v-if="data.attributes.artistName">{{data.attributes.artistName ??
+                    <div class="playlist-artist" v-if="data.attributes && data.attributes.artistName">{{data.attributes ? (data.attributes.artistName ?? '') :''}}
-                        ''}}
                     </div>
                     <div class="playlist-desc"
                          v-html="((data.attributes.editorialNotes) ? (data.attributes.editorialNotes.short ?? (data.attributes.editorialNotes.standard ?? '') ) : (data.attributes.description ? (data.attributes.description.short ?? (data.attributes.description.standard ?? '')) : ''))"></div>