Merge pull request #151 from ciderapp/fuck-git

Add main branch renderer edits.

src/renderer/style.less

@@ -863,6 +863,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);
 }
 
@@ -876,10 +883,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;
@@ -887,16 +890,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
   border-radius: 5px;
   background-size: 70% 100%;
   background-repeat: no-repeat;
-}
+  width: 100%,
-
-.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);
 }
 
 .app-chrome .app-chrome-item.volume > input[type=range]::-webkit-slider-runnable-track {
@@ -1014,6 +1008,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 {
@@ -1201,7 +1204,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 {

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()}"
+         :style="{'--spcolor': getBgColor()}">
-         @click.self='app.routeView(item)'>
         <template v-if="isVisible">
             <div class="artwork-container">
                 <div class="artwork" @click='app.routeView(item)'>

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

src/renderer/views/main.ejs

@@ -82,17 +82,19 @@
                                     <mediaitem-artwork :url="currentArtUrl"></mediaitem-artwork>
                                 </div>
                                 <div class="playback-info">
-                                    <div class="song-name">
+                                    <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>
-                                    <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`)">
                                             {{ 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"]) : "" }}
@@ -288,8 +290,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'">

src/renderer/views/pages/artist.ejs

@@ -132,6 +132,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>

src/renderer/views/pages/search.ejs

@@ -8,6 +8,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">
@@ -108,10 +112,10 @@
         },
         methods: {
             getTopResult() {
-                if (this.search.results["meta"]) {
+                try {
                     return this.search.results[this.search.results.meta.results.order[0]]["data"][0]
-                } else {
+                } catch( error ) {
-                    return false;
+                    return false
                 }
             },
             async getCategories() {