From 4eece8897915970dfccdbf7f3f50e15cb013a030 Mon Sep 17 00:00:00 2001
From: vapormusic <vietanhfat@gmail.com>
Date: Mon, 6 Dec 2021 22:14:24 +0700
Subject: [PATCH] square sp update

---
 resources/cider-ui-tests/index.html | 44 +++++++++++++++++++++++------
 resources/cider-ui-tests/style.css  | 18 ++++++++++++
 2 files changed, 54 insertions(+), 8 deletions(-)

diff --git a/resources/cider-ui-tests/index.html b/resources/cider-ui-tests/index.html
index e8a2392b..30552567 100644
--- a/resources/cider-ui-tests/index.html
+++ b/resources/cider-ui-tests/index.html
@@ -617,7 +617,7 @@
                 </div>
                
             </div>
-            <div class="cd-mediaitem-square-large-overlay">
+            <div class="cd-mediaitem-square-large-overlay"  @click.self='app.routeView(item)'>
                 <div class="button" style = "
                 border-radius: 50%;
                 background: rgba(50,50,50,0.7);"
@@ -626,9 +626,10 @@
                     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> 
+                    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>
@@ -636,14 +637,26 @@
 <!-- MediaItem Square SP -->
 <script type="text/x-template" id="mediaitem-square-sp">
     <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;">
+        <div @click.self='app.routeView(item)'
              class="cd-mediaitem-square-sp"
-             :style="{'--spcolor' : (item.attributes.artwork.bgColor != null) ? ('#'+item.attributes.artwork.bgColor) : `black`}"
-
-        >
+             :style="{'--spcolor' : (item.attributes.artwork.bgColor != null) ? ('#'+item.attributes.artwork.bgColor) : `black`}">
             <div class="artwork"
                  :class="{'round': item.type == 'artists'}"
                  :style="{'--artwork': app.getMediaItemArtwork(item.attributes.artwork.url, 300) }"></div>
+            <div class="cd-mediaitem-square-large-overlay"  @click.self='app.routeView(item)'>
+                 <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"
                  :style="{'color' : (item.attributes.artwork.textColor1 != null) ? ('#'+item.attributes.artwork.textColor1) : `#eee`}"
                  style="font-weight: 600">
@@ -655,7 +668,22 @@
                 {{ (item.attributes.editorialNotes != null) ? item.attributes.editorialNotes.short
                 :(item.attributes.artistName ?? '') }}
             </div>
+
         </div>
+        <div class="cd-mediaitem-square-large-overlay"  @click.self='app.routeView(item)'>
+            <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>
 <script type="text/x-template" id="lyrics-view">
diff --git a/resources/cider-ui-tests/style.css b/resources/cider-ui-tests/style.css
index 137921ca..1f135e0d 100644
--- a/resources/cider-ui-tests/style.css
+++ b/resources/cider-ui-tests/style.css
@@ -1519,6 +1519,24 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
     font-size: 12px;
 }
 
+
+.cd-mediaitem-square-sp > .cd-mediaitem-square-large-overlay {
+    z-index: 3;
+}
+.cd-mediaitem-square-sp > .cd-mediaitem-square-large-overlay:hover {
+    opacity: 1;
+}
+
+.cd-mediaitem-square-sp + .cd-mediaitem-square-large-overlay {
+    pointer-events: none;
+
+}
+
+.cd-mediaitem-square-sp:hover + .cd-mediaitem-square-large-overlay {
+    opacity: 1;
+
+}
+
 /* mediaitem-square-large */
 .cd-mediaitem-square-large {
     width: 190px;