large square time upgrade

resources/cider-ui-tests/index.html

@@ -205,6 +205,11 @@
                       <cider-playlist :data="showingPlaylist"></cider-playlist>
                     </template>
                 </transition>
+                <transition name="wpfade" >
+                    <template v-if="page.includes('album_')" >
+                      <cider-playlist :data="showingPlaylist"></cider-playlist>
+                    </template>
+                </transition>
                 <!-- Browse -->
                 <transition name="wpfade">
                     <template v-if="page == 'browse'">
@@ -385,8 +390,9 @@
             :style="{'--artwork': app.getMediaItemArtwork((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 ?? '':''), 300)}
            "></div>
             <div class="playlist-info">
-                <div class="playlist-name">{{data.attributes.name ?? ''}}</div>
+                <div class="playlist-name">{{data.attributes.name ?? (data.attributes.title ?? '') ?? ''}}</div>
-                <div class="playlist-desc">{{data.attributes.description ? data.attributes.description.standard ?? '' : ''}}</div>
+                <div class="playlist-artist" v-if="data.attributes.artistName">{{data.attributes.artistName ??  ''}}</div>
+                <div class="playlist-desc">{{(data.attributes.editorialNotes) ? (data.attributes.editorialNotes.standard ?? '' ) : (data.attributes.description ? data.attributes.description.standard ?? '' : '')}}</div>
             </div>    
         </div>
         <mediaitem-list-item :item="item"
@@ -582,17 +588,47 @@
 
 <script type="text/x-template" id="mediaitem-square-large">
     <template>
-        <div @click="app.playMediaItemById(item.attributes.playParams.id ?? item.id, item.attributes.playParams.kind ?? item.type, item.attributes.playParams.isLibrary ?? false, item.attributes.url)"
+        <div style="position: relative; display: inline-flex;">
-             class="cd-mediaitem-square-large">
+            <div @click.self='app.routeView(item)'
-            <div class="artwork"
+                class="cd-mediaitem-square-large">
-                 :class="{'round': item.type == 'artists'}"
+                <div class="artwork"
-                 :style="{'--artwork': app.getMediaItemArtwork(item.attributes.artwork.url, 300)}"></div>
+                    :class="{'round': item.type == 'artists'}"
-            <div class="title text-overflow-elipsis">
+                    :style="{'--artwork': app.getMediaItemArtwork(item.attributes.artwork.url, 300)}"              
-                {{ item.attributes.name }}
+                    >
-            </div>
+                </div>
-            <div class="subtitle text-overflow-elipsis" v-if="item.attributes.artistName">
+                <div class="cd-mediaitem-square-large-overlay"  @click.self='app.routeView(item)'>
-                {{ item.attributes.artistName }}
+                    <div class="button" style = "
+                    border-radius: 50%;
+                    background: rgba(50,50,50,0.7);"
+                    :style = "[((item.attributes.playParams.kind ?? item.type) != 'radioStation') ? {'margin': '140px',
+                        width: '40px',
+                        height: '40px',} :
+                        {margin: '35px',
+                        width: '120px',
+                        height: '120px',}]"
+                    @click="app.playMediaItemById(item.attributes.playParams.id ?? item.id, item.attributes.playParams.kind ?? item.type, item.attributes.playParams.isLibrary ?? false, item.attributes.url)">
+                    <svg fill="white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 27" class="glyph"><path d="M11.3545232,18.4180929 L18.4676039,14.242665 C19.0452323,13.9290954 19.0122249,13.1204156 18.4676039,12.806846 L11.3545232,8.63141809 C10.7603912,8.26833741 9.98471883,8.54889976 9.98471883,9.19254279 L9.98471883,17.8404645 C9.98471883,18.5006112 10.7108802,18.7976773 11.3545232,18.4180929 Z"></path></svg></div>
+                </div>
+                <div class="title text-overflow-elipsis"  @click='app.routeView(item)'>
+                    {{ item.attributes.name ?? '' }}
+                </div>
+                <div class="subtitle text-overflow-elipsis" v-if="item.attributes.artistName">
+                    {{ item.attributes.artistName ?? '' }}
+                </div>
+               
             </div>
+            <div class="cd-mediaitem-square-large-overlay">
+                <div class="button" style = "
+                border-radius: 50%;
+                background: rgba(50,50,50,0.7);"
+                :style = "[((item.attributes.playParams.kind ?? item.type) != 'radioStation') ? {'margin': '140px',
+                    width: '40px',
+                    height: '40px',} :
+                    {margin: '35px',
+                    width: '120px',
+                    height: '120px',}]" @click="app.playMediaItemById(item.attributes.playParams.id ?? item.id, item.attributes.playParams.kind ?? item.type, item.attributes.playParams.isLibrary ?? false, item.attributes.url)">
+                    <svg fill="white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 27" class="glyph"><path d="M11.3545232,18.4180929 L18.4676039,14.242665 C19.0452323,13.9290954 19.0122249,13.1204156 18.4676039,12.806846 L11.3545232,8.63141809 C10.7603912,8.26833741 9.98471883,8.54889976 9.98471883,9.19254279 L9.98471883,17.8404645 C9.98471883,18.5006112 10.7108802,18.7976773 11.3545232,18.4180929 Z"></path></svg></div>
+            </div> 
         </div>
     </template>
 </script>

resources/cider-ui-tests/index.js

@@ -247,6 +247,31 @@ const app = new Vue({
             }
            
         },
+        routeView (item){
+            app.showingPlaylist = []; 
+            let kind = item.attributes.playParams.kind ?? item.type;
+            let id = item.attributes.playParams.id ?? item.id;
+            let isLibrary = item.attributes.playParams.isLibrary ?? false;
+            console.log(kind, id, isLibrary)
+            if(kind.toString() !== "radioStation")
+            {app.page = (kind) + "_"+ (id); 
+            console.log("oks");
+            app.getTypeFromID((kind),(id), (isLibrary));}
+        },
+        async getTypeFromID(kind,id, isLibrary = false){
+            
+            var a;
+            try {
+                a = await this.mkapi(kind.toString(), isLibrary, id.toString());
+            }
+            catch (e) {
+                console.log(e);
+                try {
+                    console.log("opp", !isLibrary);
+                    a = await this.mkapi(kind.toString(), !isLibrary, id.toString());
+                } catch (err) { console.log(err); a = [] } finally { this.showingPlaylist = a }
+            } finally { this.showingPlaylist = a };
+        },
         searchLibrarySongs() {
             let self = this
             if (this.library.songs.search == "") {

resources/cider-ui-tests/style.css

@@ -1533,28 +1533,63 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
     margin-left: 10px;
     cursor: pointer;
 }
-
+.cd-mediaitem-square-large > * {
-.cd-mediaitem-square-large:hover {
+    z-index: inherit;
-    background: rgb(200 200 200 / 10%);
+    
 }
 
+/* .cd-mediaitem-square-large .artwork:hover {
+    box-shadow: rgb(0 0 0 / 50%) 0 0 0 1000000px inset;
+} */
+
 .cd-mediaitem-square-large .artwork {
     height: 190px;
     width: 190px;
     background: blue;
-    border-radius: var(--mediaItemRadius);
+    border-top-left-radius: 6px;
+    border-top-right-radius: 6px;
     background: var(--artwork);
     background-size: cover;
     box-shadow: var(--mediaItemShadow);
-    flex: 0 0 auto;
+    flex: 0 0 auto; 
     margin: 6px;
     margin-top: 0px;
 }
 
-.cd-mediaitem-square-large .artwork:hover {
+.cd-mediaitem-square-large-overlay{
-    box-shadow: rgb(0 0 0 / 50%) 0 0 0 1000000px inset;
+        position: absolute;
+        width: 190px;
+        float: right;
+        height: 250px;
+        top: 0px;
+        margin: 10px;
+        margin-top: 0px;
+        opacity: 0;
+        
 }
 
+.cd-mediaitem-square-large-overlay > * {
+    pointer-events: auto;
+    
+}
+.cd-mediaitem-square-large > .cd-mediaitem-square-large-overlay {
+    z-index: 3;
+}
+.cd-mediaitem-square-large > .cd-mediaitem-square-large-overlay:hover {
+    opacity: 1;
+}
+
+.cd-mediaitem-square-large + .cd-mediaitem-square-large-overlay {
+    pointer-events: none;
+
+}
+
+.cd-mediaitem-square-large:hover + .cd-mediaitem-square-large-overlay {
+    opacity: 1;
+
+}
+
+
 .cd-mediaitem-square-large .artwork.round {
     border-radius: var(--mediaItemRadiusRound);
 }
@@ -1679,7 +1714,13 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
     flex-shrink: unset;
 
 }
-
+.playlist-artist {
+    font-weight: 500;
+    font-size: 1.6rem;
+    margin-bottom: 6px;
+    margin-right: 6px;
+    flex-shrink: unset;
+}
 .playlist-desc {
     box-sizing: border-box;
     font-size: 1.1rem;