From 050823c66d83dfb909daf2c350edd73458334337 Mon Sep 17 00:00:00 2001
From: Jason Chen <californiaroad1@gmail.com>
Date: Mon, 17 Jan 2022 13:12:49 -0800
Subject: [PATCH 1/8] Add explicit icon next to song name

---
 src/renderer/style.less     | 9 +++++++++
 src/renderer/views/main.ejs | 5 +++--
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/renderer/style.less b/src/renderer/style.less
index d017e913..3db53c3b 100644
--- a/src/renderer/style.less
+++ b/src/renderer/style.less
@@ -987,6 +987,15 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
       //margin-bottom: -3px;
     }
   }
+
+  .explicit-icon {
+    background-image: url("./assets/explicit.svg");
+    height: 12px;
+    width: 36px;
+    filter: contrast(0);
+    background-repeat: no-repeat;
+    margin-left: 3px;
+  }
 }
 
 .app-chrome .app-chrome-item > .app-playback-controls .song-duration p {
diff --git a/src/renderer/views/main.ejs b/src/renderer/views/main.ejs
index c952abf6..7d52a8d0 100644
--- a/src/renderer/views/main.ejs
+++ b/src/renderer/views/main.ejs
@@ -82,10 +82,11 @@
                                     <mediaitem-artwork :url="currentArtUrl"></mediaitem-artwork>
                                 </div>
                                 <div class="playback-info">
-                                    <div class="song-name">
+                                    <div class="song-name" style="-webkit-box-orient: horizontal;">
                                         {{ mk.nowPlayingItem["attributes"]["name"] }}
+                                        <div class="explicit-icon" v-if="mk.nowPlayingItem['attributes']['contentRating'] == 'explicit'" style="display: inline-block"></div>
                                     </div>
-                                    <div class="song-artist "
+                                    <div class="song-artist"
                                          style="display: inline-block; -webkit-box-orient: horizontal; white-space: nowrap;">
                                         <div class="item-navigate song-artist" style="display: inline-block;"
                                              @click="getNowPlayingItemDetailed(`artist`)">

From 1f2b0a9a362bbc892992f294a64a152e03190ba2 Mon Sep 17 00:00:00 2001
From: Jason Chen <californiaroad1@gmail.com>
Date: Mon, 17 Jan 2022 13:50:16 -0800
Subject: [PATCH 2/8] Add genre in artist bio

---
 src/renderer/views/pages/artist.ejs | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/renderer/views/pages/artist.ejs b/src/renderer/views/pages/artist.ejs
index b2f6d490..bc1e10c3 100644
--- a/src/renderer/views/pages/artist.ejs
+++ b/src/renderer/views/pages/artist.ejs
@@ -115,6 +115,10 @@
                                 <h3>{{ data.attributes.isGroup ? "Formed" : "Born" }}</h3>
                                 {{ data.attributes.bornOrFormed }}
                             </div>
+                            <div v-if="data.attributes.genreNames">
+                                <h3>Genre</h3>
+                                {{ data.attributes.genreNames.join(', ') }}
+                            </div>
                         </div>
                     </div>
                 </div>

From 01d3cbbaa583de0401436c5c5006ad0c97c241c9 Mon Sep 17 00:00:00 2001
From: Jason Chen <californiaroad1@gmail.com>
Date: Mon, 17 Jan 2022 13:54:51 -0800
Subject: [PATCH 3/8] Include no results when a search query returns undefined

---
 src/renderer/views/pages/search.ejs | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/renderer/views/pages/search.ejs b/src/renderer/views/pages/search.ejs
index f056ecdb..da315005 100644
--- a/src/renderer/views/pages/search.ejs
+++ b/src/renderer/views/pages/search.ejs
@@ -7,6 +7,10 @@
                     <mediaitem-square :item="getTopResult()"></mediaitem-square>
                 </template>
             </div>
+            <div v-else style="text-align: center">
+                <h3>No Results</h3>
+                <p>Try a new search.</p>
+            </div>
             <div class="col" v-if="search.results.song">
                 <div class="row">
                     <div class="col">
@@ -91,10 +95,10 @@
         },
         methods: {
             getTopResult() {
-                if (this.search.results["meta"]) {
+                try {
                     return this.search.results[this.search.results.meta.results.order[0]]["data"][0]
-                } else {
-                    return false;
+                } catch( error ) {
+                    return false
                 }
             }
         }

From f1a247218e07523b186a3bc4d5e31658a40ace9b Mon Sep 17 00:00:00 2001
From: Jason Chen <californiaroad1@gmail.com>
Date: Mon, 17 Jan 2022 14:38:56 -0800
Subject: [PATCH 4/8] adjusted margin for expanded description to center

---
 src/renderer/views/pages/artist.ejs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/renderer/views/pages/artist.ejs b/src/renderer/views/pages/artist.ejs
index bc1e10c3..ee9f2d72 100644
--- a/src/renderer/views/pages/artist.ejs
+++ b/src/renderer/views/pages/artist.ejs
@@ -31,7 +31,7 @@
             </div>
             <button class="artist-more" @click="artistMenu">
                 <div style="    margin-top: -1px;
-                                margin-left: -5px;
+                                margin-left: -6px;
                                 width: 36px;
                                 height: 36px;">
                 <%- include("../svg/more.svg") %>

From 0e4253ea266db69a57c8751b3ee50dc0a50ffb4c Mon Sep 17 00:00:00 2001
From: Jason Chen <californiaroad1@gmail.com>
Date: Mon, 17 Jan 2022 21:05:38 -0800
Subject: [PATCH 5/8] style volume silder for small display layout

---
 src/renderer/style.less     | 74 +++++++++++++++++++++++++++++--------
 src/renderer/views/main.ejs |  2 +-
 2 files changed, 60 insertions(+), 16 deletions(-)

diff --git a/src/renderer/style.less b/src/renderer/style.less
index 3db53c3b..83a85bd6 100644
--- a/src/renderer/style.less
+++ b/src/renderer/style.less
@@ -836,6 +836,13 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
 }
 
 .app-chrome .app-chrome-item.volume > input[type=range]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  height: 14px;
+  width: 14px;
+  border-radius: 50%;
+  background: rgb(50 50 50);
+  cursor: default;
+  box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.4);
   transition: all var(--appleTransition);
 }
 
@@ -849,10 +856,6 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
   transform: scale(1);
 }
 
-.app-chrome .app-chrome-item.volume > input[type=range] {
-  width: 100%;
-}
-
 .app-chrome .app-chrome-item.volume > input[type=range] {
   -webkit-appearance: none;
   height: 4px;
@@ -860,16 +863,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
   border-radius: 5px;
   background-size: 70% 100%;
   background-repeat: no-repeat;
-}
-
-.app-chrome .app-chrome-item.volume > input[type=range]::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  height: 14px;
-  width: 14px;
-  border-radius: 50%;
-  background: rgb(50 50 50);
-  cursor: default;
-  box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.4);
+  width: 100%,
 }
 
 .app-chrome .app-chrome-item.volume > input[type=range]::-webkit-slider-runnable-track {
@@ -1155,7 +1149,57 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
 /* Window is smaller <= 1023px width */
 @media only screen and (max-width: 1023px) {
   .display--small {
-    display: inherit !important;
+    display: inherit !important;;
+
+    .slider {
+      width: 100%;
+      z-index: 1;
+    }
+
+    .input-container {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 100%;
+      padding-bottom: 10px;
+    }
+
+    input[type=range] {
+      -webkit-appearance: none;
+      height: 4px;
+      background: rgba(255, 255, 255, 0.4);
+      border-radius: 5px;
+      background-size: 70% 100%;
+      background-repeat: no-repeat;
+
+      &::-webkit-slider-thumb {
+        -webkit-appearance: none;
+        height: 14px;
+        width: 14px;
+        border-radius: 50%;
+        background: rgb(50 50 50);
+        cursor: default;
+        box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.4);
+        transition: all var(--appleTransition);
+      }
+      
+      &::-webkit-slider-thumb:hover {
+        background-image: radial-gradient(var(--keyColor) 2px, transparent 3px, transparent 10px);
+        transform: scale(1.2);
+      }
+      
+      &::-webkit-slider-thumb:active {
+        background-image: radial-gradient(var(--keyColor) 3px, transparent 4px, transparent 10px);
+        transform: scale(1);
+      }
+
+      &::-webkit-slider-runnable-track {
+        -webkit-appearance: none;
+        box-shadow: none;
+        border: none;
+        background: transparent;
+      }
+    }
   }
 
   .display--large {
diff --git a/src/renderer/views/main.ejs b/src/renderer/views/main.ejs
index 7d52a8d0..65687523 100644
--- a/src/renderer/views/main.ejs
+++ b/src/renderer/views/main.ejs
@@ -289,8 +289,8 @@
                                 </div>
                             </div>
                             <div class="app-chrome-item volume">
-                                <div class="app-chrome-item volume-icon"></div>
                                 <div class="input-container">
+                                    <div class="app-chrome-item volume-icon"></div>
                                     <input type="range" class="" @wheel="volumeWheel" step="0.01" min="0" max="1"
                                            v-model="mk.volume"
                                            v-if="typeof mk.volume != 'undefined'">

From dee5f3b74c2567fe49852de6b13dd3d061324687 Mon Sep 17 00:00:00 2001
From: Jason Chen <californiaroad1@gmail.com>
Date: Tue, 18 Jan 2022 11:24:00 -0800
Subject: [PATCH 6/8] centered song title when explicit-icon is shown

---
 src/renderer/views/main.ejs | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/renderer/views/main.ejs b/src/renderer/views/main.ejs
index 65687523..9201b1e4 100644
--- a/src/renderer/views/main.ejs
+++ b/src/renderer/views/main.ejs
@@ -82,7 +82,8 @@
                                     <mediaitem-artwork :url="currentArtUrl"></mediaitem-artwork>
                                 </div>
                                 <div class="playback-info">
-                                    <div class="song-name" style="-webkit-box-orient: horizontal;">
+                                    <div class="song-name" style="-webkit-box-orient: horizontal;"
+                                        :style="[mk.nowPlayingItem['attributes']['contentRating'] == 'explicit' ? {'margin-left' : '23px'} : {'margin-left' : '0px'} ]">
                                         {{ mk.nowPlayingItem["attributes"]["name"] }}
                                         <div class="explicit-icon" v-if="mk.nowPlayingItem['attributes']['contentRating'] == 'explicit'" style="display: inline-block"></div>
                                     </div>

From cc191fb5e73740d8e58d47756de75c19db674c3c Mon Sep 17 00:00:00 2001
From: Jason Chen <californiaroad1@gmail.com>
Date: Tue, 18 Jan 2022 11:47:45 -0800
Subject: [PATCH 7/8] remove em dash when playingItem is not in an album

---
 src/renderer/views/main.ejs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/renderer/views/main.ejs b/src/renderer/views/main.ejs
index 9201b1e4..c5f5466b 100644
--- a/src/renderer/views/main.ejs
+++ b/src/renderer/views/main.ejs
@@ -94,7 +94,7 @@
                                             {{ mk.nowPlayingItem["attributes"]["artistName"] }}
                                         </div>
                                         <div class="song-artist item-navigate" style="display: inline-block;"
-                                             @click="getNowPlayingItemDetailed('album')">
+                                             @click="getNowPlayingItemDetailed('album')" v-if="mk.nowPlayingItem['attributes']['albumName'] != ''">
                                             <div class="separator" style="display: inline-block;">{{"—"}}</div>
                                             {{(mk.nowPlayingItem["attributes"]["albumName"]) ?
                                             (mk.nowPlayingItem["attributes"]["albumName"]) : "" }}

From f245489f2fabc607fe2d1daaca6fc1ae8c0afee2 Mon Sep 17 00:00:00 2001
From: cyraki <34148795+cyraki@users.noreply.github.com>
Date: Tue, 18 Jan 2022 19:13:48 -0500
Subject: [PATCH 8/8] Minor UX Improvements

---
 src/renderer/views/components/mediaitem-square.ejs | 3 +--
 src/renderer/views/components/menu-panel.ejs       | 4 ++--
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/renderer/views/components/mediaitem-square.ejs b/src/renderer/views/components/mediaitem-square.ejs
index eb589347..feec15cd 100644
--- a/src/renderer/views/components/mediaitem-square.ejs
+++ b/src/renderer/views/components/mediaitem-square.ejs
@@ -2,8 +2,7 @@
     <div tabindex="0"
          class="cd-mediaitem-square" :class="getClasses()" @contextmenu="contextMenu"
          v-observe-visibility="{callback: visibilityChanged}"
-         :style="{'--spcolor': getBgColor()}"
-         @click.self='app.routeView(item)'>
+         :style="{'--spcolor': getBgColor()}">
         <template v-if="isVisible">
             <div class="artwork-container">
                 <div class="artwork" @click='app.routeView(item)'>
diff --git a/src/renderer/views/components/menu-panel.ejs b/src/renderer/views/components/menu-panel.ejs
index 5ca79cb3..8d97b204 100644
--- a/src/renderer/views/components/menu-panel.ejs
+++ b/src/renderer/views/components/menu-panel.ejs
@@ -72,10 +72,10 @@
                     style["top"] = this.event.clientY + "px";
                     // make sure the menu panel isnt off the screen
                     if (this.event.clientX + this.size[0] > window.innerWidth) {
-                        style["left"] = (window.innerWidth - this.size[0]) + "px";
+                        style["left"] = (this.event.clientX - this.size[0]) + "px";
                     }
                     if (this.event.clientY + this.size[1] > window.innerHeight) {
-                        style["top"] = (window.innerHeight - this.size[1]) + "px";
+                        style["top"] = (this.event.clientY - this.size[1]) + "px";
                     }
                 }
                 return style