Merge remote-tracking branch 'origin/develop' into develop

src/i18n/en_US.json

@@ -23,6 +23,8 @@
   "term.about": "About",
   "term.privateSession": "Private Session",
   "term.queue": "Queue",
+  "term.lyrics": "Lyrics",
+  "term.miniplayer": "MiniPlayer",
   "term.history": "History",
   "term.search": "Search",
   "term.library": "Library",

src/i18n/source/en_US.json

@@ -23,6 +23,8 @@
   "term.about": "About",
   "term.privateSession": "Private Session",
   "term.queue": "Queue",
+  "term.lyrics": "Lyrics",
+  "term.miniplayer": "MiniPlayer",
   "term.history": "History",
   "term.search": "Search",
   "term.library": "Library",

src/renderer/less/bootstrap.less

@@ -7506,6 +7506,7 @@ fieldset:disabled .btn {
   font-size      : 0.875rem;
   word-wrap      : break-word;
   opacity        : 0;
+  pointer-events: none;
 }
 
 .tooltip.show {

src/renderer/less/directives.less

@@ -14,6 +14,7 @@
     &.chrome-bottom {
       height: var(--chromeHeight2);
       box-shadow: 0px -1px 0px rgba(0, 0, 0, 0.25);
+      z-index: 1;
     }
   }
 

src/renderer/less/helpers.css

@@ -0,0 +1,349 @@
+.notyf__toast {
+  -webkit-app-region: no-drag;
+  cursor: pointer;
+}
+.notyf-info {
+  background: var(--keyColor);
+}
+.tooltip-inner {
+  background: #2f2f2f;
+  opacity: 1;
+  border: 1px solid rgba(0, 0, 0, 0.35);
+  transition: all 0.3s ease-in-out;
+  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.25);
+}
+.modal-fullscreen {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.3);
+  z-index: 1000;
+}
+.modal-fullscreen .modal-window {
+  background: #333;
+  border-radius: 10px;
+  box-shadow: var(--mediaItemShadow-Shadow);
+  display: flex;
+  flex-flow: column;
+  max-height: 500px;
+  max-width: 360px;
+  background: #121212;
+  width: 100%;
+  position: relative;
+}
+.modal-fullscreen .modal-window:after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  box-shadow: var(--mediaItemShadow);
+  z-index: 1;
+  border-radius: inherit;
+}
+.modal-fullscreen .modal-window .modal-header {
+  width: 100%;
+  padding: 6px;
+}
+.modal-fullscreen .modal-window .modal-content {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  overflow-y: overlay;
+}
+.spatialproperties-panel .modal-window {
+  height: 700px;
+  max-height: 700px;
+  width: 800px;
+  max-width: 800px;
+  overflow: hidden;
+}
+.spatialproperties-panel .modal-window .info-header {
+  padding-left: 12px;
+}
+.spatialproperties-panel .modal-window .visual-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+}
+.spatialproperties-panel .modal-window .visual {
+  position: relative;
+  height: 250px;
+  width: 300px;
+  display: inline-flex;
+  align-items: flex-end;
+  justify-content: center;
+  filter: drop-shadow(2px 12px 6px rgba(0, 0, 0, 0.25));
+  margin: 0 auto;
+}
+.spatialproperties-panel .modal-window .visual .face {
+  position: absolute;
+  width: calc(12px * 6);
+  height: calc(12px * 6);
+  border-radius: 6px;
+  transform: rotateX(60deg) rotateZ(-45deg);
+  transition: transform 0.2s linear, width 0.2s linear, height 0.2s linear;
+}
+.spatialproperties-panel .modal-window .visual .listener {
+  position: absolute;
+  width: 32px;
+  height: 32px;
+  border-radius: 6px;
+  transform: rotateX(60deg) rotateZ(-45deg);
+  transition: transform 0.2s linear, width 0.2s linear, height 0.2s linear;
+  background: white;
+  color: black;
+  z-index: 2;
+}
+.spatialproperties-panel .modal-window .visual .audiosource {
+  position: absolute;
+  width: 32px;
+  height: 32px;
+  border-radius: 6px;
+  transform: rotateX(60deg) rotateZ(-45deg);
+  transition: transform 0.2s linear, width 0.2s linear, height 0.2s linear;
+  background: yellow;
+  z-index: 2;
+}
+.spatialproperties-panel .modal-window .visual .face:nth-of-type(1) {
+  background: linear-gradient(45deg, #28223a, #1f2038);
+  z-index: 1;
+}
+.spatialproperties-panel .modal-window .visual .face:nth-of-type(2) {
+  background: linear-gradient(45deg, #7d53ad, #5763ff);
+  transform: rotateX(60deg) rotateZ(-45deg) translateZ(30px);
+  opacity: 0.7;
+  z-index: 3;
+}
+.spatialproperties-panel .modal-window .modal-header {
+  padding: 16px;
+  position: relative;
+  overflow: hidden;
+}
+.spatialproperties-panel .modal-window .modal-header .modal-title {
+  text-align: center;
+}
+.spatialproperties-panel .modal-window .modal-header .close-btn {
+  width: 50px;
+  height: 100%;
+  background-image: var(--gfx-closeBtn);
+  background-position: center;
+  background-repeat: no-repeat;
+  -webkit-app-region: no-drag;
+  appearance: none;
+  border: 0;
+  background-color: transparent;
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+.spatialproperties-panel .modal-window .modal-header .close-btn:hover {
+  background-color: #c42b1c;
+}
+.addtoplaylist-panel .modal-window {
+  max-height: 600px;
+  max-width: 400px;
+  background: rgba(18, 18, 18, 0.9);
+  overflow: hidden;
+  backdrop-filter: blur(16px) saturate(180%);
+}
+.addtoplaylist-panel .modal-window .modal-header {
+  padding: 16px;
+  position: relative;
+}
+.addtoplaylist-panel .modal-window .modal-header .modal-title {
+  text-align: center;
+}
+.addtoplaylist-panel .modal-window .modal-header .close-btn {
+  width: 50px;
+  height: 100%;
+  background-image: var(--gfx-closeBtn);
+  background-position: center;
+  background-repeat: no-repeat;
+  -webkit-app-region: no-drag;
+  appearance: none;
+  border: 0;
+  background-color: transparent;
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+.addtoplaylist-panel .modal-window .modal-header .close-btn:hover {
+  background-color: #c42b1c;
+}
+.addtoplaylist-panel .modal-window .modal-search {
+  width: 100%;
+  padding: 0px 16px;
+  position: relative;
+}
+.addtoplaylist-panel .modal-window .playlist-item {
+  appearance: none;
+  border: 0px;
+  text-align: left;
+  width: 100%;
+  margin: 0;
+  display: flex;
+  background: rgba(32, 32, 32, 0.46);
+  color: #eee;
+  font-family: inherit;
+  font-size: 0.98em;
+  padding: 6px 12px;
+  align-items: center;
+  flex-flow: row;
+}
+.addtoplaylist-panel .modal-window .playlist-item .icon {
+  pointer-events: none;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-right: 6px;
+}
+.addtoplaylist-panel .modal-window .playlist-item .name {
+  position: relative;
+}
+.addtoplaylist-panel .modal-window .playlist-item:hover {
+  background: var(--selected);
+}
+.addtoplaylist-panel .modal-window .playlist-item:active {
+  background: var(--selected-click);
+}
+.addtoplaylist-panel .modal-window .playlist-item.focused {
+  background: var(--keyColor);
+}
+.addtoplaylist-panel .modal-window .playlist-item:last-child {
+  border-bottom: 0px;
+}
+.menu-panel {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 100001;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  -webkit-app-region: no-drag;
+}
+.menu-panel .menu-header-body {
+  padding: 6px;
+  display: flex;
+  background: rgba(200, 200, 200, 0.1);
+}
+.menu-panel .menu-header-body .menu-option-header {
+  width: 40px;
+  height: 40px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: var(--mediaItemRadius);
+  appearance: none;
+  border: 0;
+  background: transparent;
+}
+.menu-panel .menu-header-body .menu-option-header.active .sidebar-icon > .svg-icon {
+  --color: var(--keyColor);
+}
+.menu-panel .menu-header-body .menu-option-header:hover {
+  background: var(--selected);
+}
+.menu-panel .menu-header-body .menu-option-header:active {
+  background: var(--selected-click);
+}
+.menu-panel .menu-panel-body {
+  display: flex;
+  flex-flow: column;
+  background: #262626;
+  position: relative;
+  min-width: 200px;
+  box-shadow: var(--ciderShadow-Generic);
+  border-radius: var(--mediaItemRadius);
+  overflow: hidden;
+  font-size: 13px;
+}
+.menu-panel .menu-panel-body .menu-option {
+  text-align: left;
+  display: flex;
+  width: 100%;
+  padding: 9px 16px;
+  appearance: none;
+  border: 0px;
+  font: inherit;
+  background: transparent;
+  color: inherit;
+}
+.menu-panel .menu-panel-body .menu-option:hover {
+  background: var(--selected);
+}
+.menu-panel .menu-panel-body .menu-option:active {
+  background: var(--selected-click);
+}
+.menu-panel .menu-header-text {
+  margin: 18px 6px;
+}
+.menu-panel .menu-header-text .close-btn {
+  width: 50px;
+  height: 42px;
+  background-image: var(--gfx-closeBtn);
+  background-position: center;
+  background-repeat: no-repeat;
+  -webkit-app-region: no-drag;
+  appearance: none;
+  border: 0;
+  background-color: transparent;
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+.menu-panel .menu-header-text .close-btn:hover {
+  background-color: #c42b1c;
+}
+.menu-panel .menu-body {
+  overflow: overlay;
+  height: 100%;
+}
+.menu-panel .menu-footer {
+  width: 100%;
+  padding: 12px;
+}
+.queue-panel {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-flow: column;
+}
+.queue-panel .queue-header-text {
+  margin: 18px 6px;
+}
+.queue-panel .queue-body {
+  overflow: overlay;
+  height: 100%;
+}
+.queue-panel .queue-footer {
+  width: 100%;
+  padding: 12px;
+}
+.queue-panel .autoplay {
+  background: rgba(200, 200, 200, 0.15);
+  display: flex;
+  justify-content: center;
+  appearance: none;
+  border: 0;
+  border-radius: 6px;
+  height: 32px;
+  width: 32px;
+}
+.queue-panel .infinity {
+  content: url("assets/infinity.svg");
+  margin: auto;
+}

src/renderer/less/helpers.less

@@ -7,7 +7,13 @@
   background: var(--keyColor);
 }
 
-
+.tooltip-inner {
+  background: #2f2f2f;
+  opacity: 1;
+  border: 1px solid rgb(0 0 0 / 35%);
+  transition: all 0.3s ease-in-out;
+  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.25);
+}
 
 .modal-fullscreen {
   display: flex;

src/renderer/main/vueapp.js

@@ -247,6 +247,9 @@ const app = new Vue({
         }
     },
     methods: {
+        setTimeout(func, time) {
+            return setTimeout(func, time);
+        },
         songLinkShare(amUrl) {
             notyf.open({ type: "info", className: "notyf-info", message: app.getLz('term.song.link.generate') })
             let self = this

src/renderer/views/app/chrome-bottom.ejs

@@ -86,7 +86,7 @@
 
                 <input type="range" step="0.01" min="0" :style="progressBarStyle()"
                        @input="playerLCD.desiredDuration = $event.target.value;playerLCD.userInteraction = true"
-                       @mouseup="mk.seekToTime($event.target.value);playerLCD.desiredDuration = 0;playerLCD.userInteraction = false"
+                       @mouseup="mk.seekToTime($event.target.value);setTimeout(()=>{playerLCD.desiredDuration = 0;playerLCD.userInteraction = false}, 1000);"
                        :max="mk.currentPlaybackDuration" :value="getSongProgress()">
             </div>
         </div>
@@ -101,22 +101,27 @@
         </div>
         <div class="app-chrome-item generic">
             <button class="playback-button--small miniplayer"
+                    :title="$root.getLz('term.miniplayer')"
+                    v-b-tooltip.hover
                     @click="drawer.open = false; miniPlayer(true)"></button>
         </div>
         <div class="app-chrome-item generic">
             <button class="playback-button--small queue" :class="{'active': drawer.panel == 'queue'}"
+                    :title="$root.getLz('term.queue')"
+                    v-b-tooltip.hover
                     @click="invokeDrawer('queue')"></button>
         </div>
         <div class="app-chrome-item generic">
             <template v-if="lyrics && lyrics != [] && lyrics.length > 0">
                 <button class="playback-button--small lyrics"
+                        :title="$root.getLz('term.lyrics')"
+                        v-b-tooltip.hover
                         :class="{'active': drawer.panel == 'lyrics'}"
                         @click="invokeDrawer('lyrics')"></button>
             </template>
             <template v-else>
                 <button class="playback-button--small lyrics"
-                        :style="{'opacity': 0.3, 'pointer-events': 'none'}"
+                        :style="{'opacity': 0.3, 'pointer-events': 'none'}"></button>
-                        @click="invokeDrawer('lyrics')"></button>
             </template>
 
         </div>

src/renderer/views/app/chrome-top.ejs

@@ -89,7 +89,7 @@
 
                             <input type="range" step="0.01" min="0" :style="progressBarStyle()"
                                    @input="playerLCD.desiredDuration = $event.target.value;playerLCD.userInteraction = true"
-                                   @mouseup="mk.seekToTime($event.target.value);playerLCD.desiredDuration = 0;playerLCD.userInteraction = false"
+                                   @mouseup="mk.seekToTime($event.target.value);setTimeout(()=>{playerLCD.desiredDuration = 0;playerLCD.userInteraction = false}, 1000);"
                                    :max="mk.currentPlaybackDuration" :value="getSongProgress()">
                         </div>
                     </div>
@@ -117,22 +117,28 @@
             </div>
             <div class="app-chrome-item generic">
                 <button class="playback-button--small miniplayer"
+                        :title="$root.getLz('term.miniplayer')"
+                        v-b-tooltip.hover
                         @click="drawer.open = false; miniPlayer(true)"></button>
             </div>
             <div class="app-chrome-item generic">
-                <button class="playback-button--small queue" :class="{'active': drawer.panel == 'queue'}"
+                <button class="playback-button--small queue"
+                        :title="$root.getLz('term.queue')"
+                        v-b-tooltip.hover
+                        :class="{'active': drawer.panel == 'queue'}"
                         @click="invokeDrawer('queue')"></button>
             </div>
             <div class="app-chrome-item generic">
                 <template v-if="lyrics && lyrics != [] && lyrics.length > 0">
                     <button class="playback-button--small lyrics"
+                            :title="$root.getLz('term.lyrics')"
+                            v-b-tooltip.hover
                             :class="{'active': drawer.panel == 'lyrics'}"
                             @click="invokeDrawer('lyrics')"></button>
                 </template>
                 <template v-else>
                     <button class="playback-button--small lyrics"
-                            :style="{'opacity': 0.3, 'pointer-events': 'none'}"
+                            :style="{'opacity': 0.3, 'pointer-events': 'none'}"></button>
-                            @click="invokeDrawer('lyrics')"></button>
                 </template>
             </div>
         </template>