Added play and shuffle to album/playlist pages, formatted album/playlist page

resources/cider-ui-tests/index.js

@@ -919,7 +919,11 @@ const app = new Vue({
             }
         },
         getMediaItemArtwork(url, size = 64) {
-            return `${url.replace('{w}', size).replace('{h}', size).replace('{f}', "webp").replace('{c}', "cc")}`;
+            var newurl = `${url.replace('{w}', size).replace('{h}', size).replace('{f}', "webp").replace('{c}', "cc")}`;
+            // replace the only the last instance of .jpg with .webp but not the first instance
+            newurl = newurl.replace(/\.jpg(?=\?|$)/, '.webp');
+                        
+            return newurl
         },
         getNowPlayingArtworkBG(size = 600) {
             if (!this.mkReady()) {

resources/cider-ui-tests/style.css

@@ -1353,6 +1353,17 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
 
 /* Cider */
 
+.wr-btn {
+    font-family: inherit;
+    appearance: none;
+    border:0px;
+    border-radius: 6px;
+    padding: 8px;
+    font-weight: 600;
+    background: rgb(80 80 80 / 70%);
+    color: white;
+}
+
 /* Artist Page */
 
 .artist-page {
@@ -1430,20 +1441,20 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
 .mediaitem-artwork .animatedartwork-view-box .animated{
     position: absolute;
     top: 0px;
-    width: 200px;
-    height: 200px;
+    width: 100%;
+    height: 100%;
 }
 
 .mediaitem-artwork .animatedartwork-view-box .animated > video {
-    width: 200px;
-    height: 200px;
+    width: 100%;
+    height: 100%;
 }
 
 .mediaitem-artwork .animatedartwork-view-box{
     position: absolute;
     top: 0px;
-    width: 200px;
-    height: 200px;
+    width: 100%;
+    height: 100%;
 }
 
 .artist-header .animated{
@@ -1927,9 +1938,37 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
 }
 .playlist-display .playlist-info .playlist-desc {
     box-sizing: border-box;
-    font-size: 1em;
+    font-size: 14px;
     flex-shrink: unset;
     margin-right: 5px;
+    max-height: 100px;
+    position: relative;
+}
+.playlist-display .playlist-info .playlist-desc .content {
+    height: 100px;
+    -webkit-mask-image: -webkit-gradient(linear, left 50%, left 90%, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0)));
+}
+
+.playlist-display .playlist-info .playlist-desc .more-btn {
+    appearance: none;
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    padding: 0 5px;
+    font-size: 14px;
+    color: var(--keyColor);
+    background-color: transparent;
+    border: 0px;
+    cursor: pointer;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    display: flex;
+    justify-content: flex-end;
+    align-items: flex-end;
+    font-weight: 600;
+    font-family: inherit;
+    text-transform: uppercase;
 }
 
 .playlist-time {

resources/cider-ui-tests/views/components/editorialNotes.ejs

@@ -0,0 +1,14 @@
+<div class="modal-backdrop">
+    <div class="modal-dialog">
+        <div class="modal-header">
+            <button type="button" class="close">&times;</button>
+            <h4 class="modal-title" v-html="title"></h4>
+        </div>
+        <div class="modal-content" v-html="content">
+
+        </div>
+        <div class="modal-footer">
+
+        </div>
+    </div>
+</div>

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

@@ -1,14 +1,16 @@
 <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
+                    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">
                         <mediaitem-artwork
-                            :url="artistPage.data.attributes.artwork ? artistPage.data.attributes.artwork.url : ''"
-                            size="220" type="artists"></mediaitem-artwork>
+                                :url="artistPage.data.attributes.artwork ? artistPage.data.attributes.artwork.url : ''"
+                                size="220" type="artists"></mediaitem-artwork>
                     </div>
                 </div>
                 <div class="col flex-center">
@@ -23,16 +25,18 @@
                         <div class="col-auto" v-if="artistPage.data.views['latest-release']">
                             <h3>Latest Release</h3>
                             <div style="width: auto;margin: 0 auto;">
-                                <mediaitem-square-sp v-for="song in artistPage.data.views['latest-release'].data" :item="song">
+                                <mediaitem-square-sp v-for="song in artistPage.data.views['latest-release'].data"
+                                                     :item="song">
                                 </mediaitem-square-sp>
                             </div>
                         </div>
                         <div class="col" v-if="artistPage.data.views['top-songs']">
                             <h3>Top Songs</h3>
                             <mediaitem-list-item
-                                v-for="song in artistPage.data.views['top-songs'].data.limit(artistPage.topSongsExpanded ? 10 : 5)"
-                                :item="song"></mediaitem-list-item>
-                            <button class="showmoreless" @click="artistPage.topSongsExpanded = !artistPage.topSongsExpanded">
+                                    v-for="song in artistPage.data.views['top-songs'].data.limit(artistPage.topSongsExpanded ? 10 : 5)"
+                                    :item="song"></mediaitem-list-item>
+                            <button class="showmoreless"
+                                    @click="artistPage.topSongsExpanded = !artistPage.topSongsExpanded">
                                 <template v-if="!artistPage.topSongsExpanded">
                                     Show more
                                 </template>
@@ -47,10 +51,11 @@
             <div class="row well">
                 <div class="col">
                     <template v-for="(view) in artistPage.data.meta.views.order"
-                        v-if="(artistPage.data.views[view].data.length != 0) && (view != 'latest-release') && (view != 'top-songs')">
+                              v-if="(artistPage.data.views[view].data.length != 0) && (view != 'latest-release') && (view != 'top-songs')">
                         <div class="row">
                             <div class="col">
-                                <h3>{{ artistPage.data.views[view].attributes.title ? artistPage.data.views[view].attributes.title : "???"}}
+                                <h3>{{ artistPage.data.views[view].attributes.title ?
+                                    artistPage.data.views[view].attributes.title : "???"}}
                                 </h3>
                             </div>
                             <div class="col-auto flex-center" v-if="artistPage.data.views[view].data.length >= 10">

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

@@ -3,11 +3,11 @@
         <template v-if="data != [] && data.attributes != null">
             <div class="playlist-display row">
                 <div class="col-auto flex-center">
-                    <div style="width: 200px;height:200px;">
+                    <div style="width: 300px;height:300px;">
                         <mediaitem-artwork
                         :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"
+                        size="300"
                     ></mediaitem-artwork>
                     </div>
                 </div>
@@ -15,8 +15,16 @@
                     <div class="playlist-name">{{data.attributes ? (data.attributes.name ?? (data.attributes.title ?? '') ?? '') : ''}}</div>
                     <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>
+                    <div class="playlist-desc" v-if="data.attributes.editorialNotes">
+                        <div class="content" 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>
+                        <button class="more-btn">More</button>
+                    </div>
+                    <div class="playlist-controls">
+                        <button class="wr-btn" style="min-width: 120px;"
+                        @click="app.mk.shuffleMode = 0;app.playMediaItemById(data.attributes.playParams.id ?? data.id, data.attributes.playParams.kind ?? data.type, data.attributes.playParams.isLibrary ?? false, data.attributes.url)">Play</button>
+                        <button class="wr-btn" style="min-width: 120px;"
+                        @click="app.mk.shuffleMode = 1;app.playMediaItemById(data.attributes.playParams.id ?? data.id, data.attributes.playParams.kind ?? data.type, data.attributes.playParams.isLibrary ?? false, data.attributes.url)">Shuffle</button>
+                    </div>
                 </div>
             </div>
             <mediaitem-list-item :item="item"