From fc015ea559e4d32618448f49d88c159c5ad6075c Mon Sep 17 00:00:00 2001
From: booploops <49113086+booploops@users.noreply.github.com>
Date: Thu, 16 Dec 2021 00:15:43 -0800
Subject: [PATCH] working on multi select for list item

---
 resources/cider-ui/style.less                 | 25 ++++++++++++++++++-
 .../views/components/mediaitem-list-item.ejs  | 15 +++++++----
 2 files changed, 34 insertions(+), 6 deletions(-)

diff --git a/resources/cider-ui/style.less b/resources/cider-ui/style.less
index ac19a218..62c49d79 100644
--- a/resources/cider-ui/style.less
+++ b/resources/cider-ui/style.less
@@ -1941,7 +1941,6 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   font-size: 14px;
   justify-content: center;
   align-items: center;
-  cursor: pointer;
   border-bottom: 1px solid rgb(200 200 200 / 10%);
 
   .artwork {
@@ -1955,6 +1954,26 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
     margin: 12px;
     border: 0px;
     outline: none;
+    position: relative;
+    overflow: hidden;
+
+    .overlay-play {
+      background: rgba(0, 0, 0, 0.5);
+      opacity: 0;
+      appearance: none;
+      border: 0;
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      padding: 0px;
+      z-index: 5;
+      cursor: pointer;
+      &:hover {
+        opacity: 1;
+      }
+    }
   }
 
   .artwork.round {
@@ -2020,6 +2039,10 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
     }
   }
 
+  &.mediaitem-selected {
+      background: var(--selected);
+  }
+
   &:hover {
     background: rgb(200 200 200 / 10%);
   }
diff --git a/resources/cider-ui/views/components/mediaitem-list-item.ejs b/resources/cider-ui/views/components/mediaitem-list-item.ejs
index 712aa585..d0ef3694 100644
--- a/resources/cider-ui/views/components/mediaitem-list-item.ejs
+++ b/resources/cider-ui/views/components/mediaitem-list-item.ejs
@@ -2,20 +2,24 @@
     <template>
         <div v-observe-visibility="{callback: visibilityChanged}"
              @contextmenu="contextMenu"
-             class="cd-mediaitem-list-item">
+             @click.shift="selected = !selected"
+             :data-id="item.attributes.playParams.id ?? item.id"
+             :data-type="item.attributes.playParams.kind ?? item.type"
+             class="cd-mediaitem-list-item" :class="{'mediaitem-selected': selected}">
             <template v-if="isVisible">
                 <div class="isLibrary" v-if="showLibraryStatus == true">
                     <button @click="addToLibrary()" v-if="!app.isInLibrary(item.attributes.playParams) && !addedToLibrary">🖤</button>
                     <button v-else>❤️</button>
                 </div>
-                <div class="artwork" v-if="showArtwork == true"  @click="playTrack()">
+                <div class="artwork" v-if="showArtwork == true">
                     <mediaitem-artwork
                             :url="item.attributes.artwork ? item.attributes.artwork.url : ''"
                             size="34"
                             :type="item.type"></mediaitem-artwork>
+                    <button class="overlay-play" @click="playTrack()"><%- include("../svg/play.svg") %></button>
                 </div>
-                <div class="info-rect" :style="{'padding-left': (showArtwork ? '' : '16px')}" @click.self="playTrack()">
-                    <div class="title text-overflow-elipsis" @click.self="playTrack()">
+                <div class="info-rect" :style="{'padding-left': (showArtwork ? '' : '16px')}" @dblclick="playTrack()">
+                    <div class="title text-overflow-elipsis" @dblclick="playTrack()">
                         {{ item.attributes.name }}
                     </div>
                     <div class="subtitle text-overflow-elipsis" style="-webkit-box-orient: horizontal;">
@@ -58,7 +62,8 @@
         data: function () {
             return {
                 isVisible: false,
-                addedToLibrary: false
+                addedToLibrary: false,
+                selected: false
             }
         },
         props: {