Merge branch 'dev'

CDrummond · Nov 18, 2022 · 57eac02 · 57eac02
2 parents 6f09ed3 + 9f9a994
commit 57eac02
Show file tree

Hide file tree

Showing 43 changed files with 836 additions and 429 deletions.
diff --git a/ChangeLog b/ChangeLog
@@ -1,7 +1,31 @@
-2.10.8
-------
-1. Show input field if item has an "input" attribute.
-2. If "nextWindow" is "home" then go to home screen.
+3.0.0
+-----
+ 1. Re-designed bottom now-playing bar for desktop layout.
+ 2. Hide desktop bottom now-playing bar when no track.
+ 3. Add 'Party' mode where certain actions are hidden. Activate via "?party"
+    URL query parameter, or set default skin to "Material Skin (Party)"
+ 4. Use SVGs that have been mapped into images for 'text' items.
+ 5. If a list of Spotty tracks all have the same image as album then do not
+    show images for list.
+ 6. When listing Spotty albums attempt to extract year from "favorites_title"
+ 7. Remove options; menu icons, always show track menu, launch player.
+ 8. Place 'Cancel', etc., buttons on the right for Windows, or if
+    'altBtnLayout' (or 'altBtnLayout=true') is passed as a URL parameter.
+ 9. Disable downloading if 'download' URL parameter is not 'native' or
+   'browser' (default).
+10. Don't auto-close 'Manage players' dialog if all players dissapear whilst
+    its open, just state 'No players'
+11. Add 'Descending' to album sorts.
+12. Don't close 'Manage players' on 'esc' if dragging, simply end drag.
+13. Show icons in navigation menu.
+14. Add custom icon for 'Add URL' action.
+15. Default to 'Breeze-dark' if 'desktop=KDE' is passed as URL query
+    parameter.
+16. Add 'Play starting at track' action for playlists.
+17. Add 'Show image' action to browse and queue context menus.
+18. Show input field if item has an "input" attribute.
+19. If "nextWindow" is "home" then go to home screen.
+
 
 2.10.7
 ------

diff --git a/MaterialSkin/HTML/material/html/css/desktop.css b/MaterialSkin/HTML/material/html/css/desktop.css
@@ -6,9 +6,8 @@
  */
 
 :root {
- --bottom-toolbar-pad:0px;
- --bottom-progress-adjust:0px;
- --bottom-toolbar-height:calc(80px + ( 2 * var(--bottom-toolbar-pad) ));
+ --bottom-toolbar-height:72px;
+ --desktop-bottom-toolbar-height:72px;
  --np-portrait-image-size:min(calc((var(--vh, 1vh)*100) - (var(--main-toolbar-height) + 260px)), 100vw);
  --np-icon-size:24px;
  --queue-visibility:initial;
@@ -117,7 +116,7 @@
 }
 
 .no-control-adjust { /* Adjust pos for iPad */
- margin-top:calc(-2 * var(--bottom-toolbar-pad));
+ margin-top:-8px;
 }
 
 .np-details-desktop .v-list__tile__content, .np-details-desktop .v-list__tile__content .v-list__tile__sub-title,
@@ -140,29 +139,19 @@
 
 .np-controls-desktop {
  margin-left:-16px;
- margin-top:calc(16px + var(--bottom-toolbar-pad));
+ margin-top:15px;
  max-width:270px;
  float:left;
 }
 
 .np-controls-desktop-stop {
- margin-top:calc(18px + var(--bottom-toolbar-pad));
+ margin-top:13px;
 }
 
 .np-portrait-song-info {
  height:calc((var(--vh, 1vh)*100) - (var(--np-portrait-image-size) + 160px));
 }
 
-.np-image-desktop {
- object-fit:cover;
- object-position:50% 0%;
- display:block;
- margin:2px 8px 2px 4px;
- height:calc(var(--bottom-toolbar-height) - 6px) !important;
- width:calc(var(--bottom-toolbar-height) - 6px) !important;
- float:left;
-}
-
 .np-text-desktop {
  font-weight:var(--std-weight);
  margin:12px 8px 0px 0px;
@@ -179,77 +168,118 @@
 
 .np-details-desktop {
  position:fixed;
- left:calc(250px + var(--bottom-toolbar-pad) + (var(--np-icon-size) - 24px));
- bottom:calc(20px + var(--bottom-toolbar-pad));
- width:calc(100vw - calc(254px + var(--bottom-toolbar-pad) + (var(--np-icon-size) - 24px)));
- height:54px;
+ left:240px;
+ bottom:4px;
+ width:calc(100vw - 240px);
+ height:64px;
  padding:0px;
  background:transparent!important;
 }
 
-.np-details-desktop-sb {
- left:calc(298px + ((var(--np-icon-size) - 24px)*4))!important;
- width:calc(100vw - (302px + ((var(--np-icon-size) - 24px)*4)))!important;
+.np-desktop-sb .np-details-desktop {
+ left:290px;
+ width:calc(100vw - 290px);
+}
+
+.np-image-desktop {
+ position:fixed;
+ left:164px;
+ bottom:1px;
+ object-fit:contain;
+ object-position:50% 50%;
+ height:64px;
+ width:64px;
+ margin-left:auto;
+ margin-right:auto;
+}
+
+.np-desktop-sb .np-image-desktop {
+ left:214px;
 }
 
 .np-details-desktop div .v-list__tile {
- height:54px;
  margin:0px 8px 0px 0px; /* t, r, b, l */
  padding:0px;
 }
 
 .np-details-desktop .v-list__tile__content {
- margin-right:8px;
+ margin-right:24px;
+}
+
+@media screen and (max-width: 600px) {
+ .np-details-desktop {
+  left:164px;
+  width:calc(100vw - 164px);
+ }
+ .np-desktop-sb .np-details-desktop {
+  left:214px;
+  width:calc(100vw - 214px);
+ }
+ .np-image-desktop {
+  display:none!important;
+ }
+}
+
+@media screen and (max-width: 420px) {
+ .np-details-desktop .v-list__tile__content {
+  margin-right:8px;
+ }
+ .np-details-desktop .v-list__tile__action {
+  display:none!important;
+ }
 }
 
 .np-details-desktop div .v-list__tile .v-list__tile__action {
- min-width:unset;
  font-family:'Roboto Mono', monospace;
  font-weight: var(--std-weight);
  font-size:calc(var(--std-font-size) - 4px) !important;
- height:54px;
- margin:0px;
- padding:0px;
+ height:64px;
+}
+
+.np-details-desktop-sb div .v-list__tile .v-list__tile__action {
+ width:190px;
 }
 
 .np-tech-desktop {
- margin-top:calc(19px - var(--std-font-size));
- display:inline-block;
- vertical-align:top;
- height:27px;
- line-height:27px;
+ height:22px;
+ line-height:20px;
+}
+
+.np-time-desktop-r {
+ margin-top:2px !important;
+}
+
+.np-tech-desktop-r {
+ margin-top:-6px !important;
 }
 
 .np-rating-desktop {
- margin-top:calc(21px - var(--std-font-size));
- display:inline-block;
- height:27px;
- margin-right:-8px
+ margin-right:-2px;
+ height:22px;
+}
+
+#np-bar .np-rating-desktop .v-icon {
+ width:14px !important;
+ height:14px !important;
+ font-size:14px !important;
 }
 
 .np-time-desktop {
- margin-top:calc(7px - var(--std-font-size));
- display:inline-block;
- vertical-align:top;
- height:27px;
- line-height:27px;
+ margin-top:5px;
+ height:20px;
+ line-height:20px;
  cursor:pointer;
 }
 
 .np-slider-desktop {
  position:fixed;
- left:calc(250px + var(--bottom-toolbar-pad) + (var(--np-icon-size) - 24px));
- bottom:calc(6px + var(--bottom-progress-adjust));
- width:calc(100vw - calc(262px + var(--bottom-toolbar-pad) + (var(--np-icon-size) - 24px)));
+ left:0px;
+ bottom:calc(var(--bottom-toolbar-height) - 11px);
+ width:100vw;
  height:10px !important;
  margin:0px !important; /* v-progress-linear has margin: 1rem 0; */
 }
 
-.np-slider-desktop-sb {
- left:calc(298px + var(--bottom-toolbar-pad) + ((var(--np-icon-size) - 24px)*4))!important;
- width:calc(100vw - calc(310px + var(--bottom-toolbar-pad) + ((var(--np-icon-size) - 24px)*4)))!important;
-}
-
 .np-bar .np-playpause {
  margin-top:-3px!important;
 }
@@ -315,7 +345,7 @@
  height:calc((var(--vh, 1vh)*100) - var(--main-toolbar-height));
 }
 
-@media screen and (max-height: 180px) and (hover: hover) and (pointer: fine) {
+@media screen and (max-height: 130px) and (hover: hover) and (pointer: fine) {
  .hide-for-mini {
   display:none!important;
  }

diff --git a/MaterialSkin/HTML/material/html/css/mobile.css b/MaterialSkin/HTML/material/html/css/mobile.css
@@ -8,6 +8,7 @@
 :root {
  --bottom-nav-pad:0px;
  --bottom-toolbar-height:calc(var(--bottom-nav-pad) + 52px);
+ --mobile-bottom-toolbar-height:calc(var(--bottom-nav-pad) + 52px);
  --np-portrait-image-size:min(calc((var(--vh, 1vh)*100) - (var(--main-toolbar-height) + var(--bottom-toolbar-height) + 210px)), 100vw);
  --nav-hover-color:var(--btn-hover-color);
 }

diff --git a/MaterialSkin/HTML/material/html/css/style.css b/MaterialSkin/HTML/material/html/css/style.css
@@ -1534,7 +1534,6 @@ progress {
  font-weight:var(--bold-weight);
  width:100%;
  margin-bottom:4px;
- background-color:var(--background-color)!important;
 }
 
 .pmgr-other-title {
@@ -2289,6 +2288,10 @@ img[lazy='loaded'].np-image-desktop, img[lazy='loaded'].np-image-landscape, img[
  background-color:var(--pq-current-color)!important;
 }
 
+.pmgr-container .active-player {
+ border-radius:8px;
+}
+
 .active-player div.v-list {
  background-color:transparent!important;
 }

diff --git a/MaterialSkin/HTML/material/html/css/themes/linux/light/Breeze.css b/MaterialSkin/HTML/material/html/css/themes/linux/light/Breeze.css
@@ -12,10 +12,10 @@
  --scrollbar-corner-color:#eff0f1;
  --background-color:#eff0f1;
  --background-shadow-color:rgba(249, 248, 247, 0.9);
- --dialog-toolbar-color:#e3e5e7;
- --bottom-toolbar-color:#e3e5e7;
- --top-toolbar-color:#e3e5e7;
- --sub-toolbar-color:#e3e5e7;
+ --dialog-toolbar-color:#dee0e2;
+ --bottom-toolbar-color:#dee0e2;
+ --top-toolbar-color:#dee0e2;
+ --sub-toolbar-color:#dee0e2;
  --bottom-toolbar-border-color:#cdc7c2;
  --top-toolbar-border-color:#cdc7c2;
  --sub-toolbar-border-color:#cdc7c2;

diff --git a/MaterialSkin/HTML/material/html/images/add-stream.svg b/MaterialSkin/HTML/material/html/images/add-stream.svg
diff --git a/MaterialSkin/HTML/material/html/images/radio-tower.svg b/MaterialSkin/HTML/material/html/images/radio-tower.svg
diff --git a/MaterialSkin/HTML/material/html/js/actions.js b/MaterialSkin/HTML/material/html/js/actions.js
@@ -65,6 +65,10 @@ const SAVE_VLIB_ACTION        = 49;
 const DOWNLOAD_ACTION         = 50;
 const PQ_REMOVE_DISC_ACTION   = 51;
 const PLAY_DISC_ACTION        = 52;
+const PLAY_PLAYLIST_ACTION    = 53;
+const SHOW_IMAGE_ACTION       = 54;
+
+const HIDE_FOR_PARTY = new Set([PLAY_ACTION, PLAY_ALBUM_ACTION, PLAY_ALL_ACTION, MORE_ACTION, MORE_LIB_ACTION, RENAME_ACTION, REMOVE_ACTION, EDIT_ACTION, ADD_FAV_ACTION, DELETE_ACTION, ADD_TO_FAV_ACTION, REMOVE_FROM_FAV_ACTION, SELECT_ACTION, RATING_ACTION, ADD_FAV_FOLDER_ACTION, DELETE_FAV_FOLDER_ACTION, MOVE_FAV_TO_PARENT_ACTION, UNSUB_PODCAST_ACTION, MOVE_HERE_ACTION,  INSERT_ALL_ACTION, ADD_TO_PLAYLIST_ACTION, REMOVE_DUPES_ACTION, ADV_SEARCH_ACTION, SAVE_VLIB_ACTION, DOWNLOAD_ACTION, PLAY_DISC_ACTION, PLAY_PLAYLIST_ACTION]);
 
 var ACTIONS=[
     {cmd:"play",         icon:"play_circle_outline"},
@@ -102,7 +106,7 @@ var ACTIONS=[
     {cmd:"pq-playnow",   icon: "play_circle_outline"},
     {cmd:"pq-playnxt",   icon: "play_circle_filled"},
     {cmd:"pq-scroll",    svg:  "current-track"},
-    {cmd:"pq-addurl",    icon: "add"},
+    {cmd:"pq-addurl",    svg:  "add-stream"},
     {cmd:"pq-movequeue", icon: "swap_horiz"},
     {cmd:"pq-rmalbum",   icon: "album"},
     {cmd:"pq-zap",       icon: "flash_on"},
@@ -126,7 +130,9 @@ var ACTIONS=[
 
     {cmd:"download",     icon:"cloud_download"},
     {cmd:"pq-rmdisc",    svg:"album-multi"},
-    {cmd:"play-disc",    svg:"album-multi"}
+    {cmd:"play-disc",    svg:"album-multi"},
+    {cmd:"pl-track",     icon:"playlist_play"},
+    {cmd:"show-img",     icon:"photo"}
 ];
 
 function updateActionStrings() {
@@ -192,5 +198,7 @@ function updateActionStrings() {
     ACTIONS[DOWNLOAD_ACTION].title=i18n("Download");
     ACTIONS[PQ_REMOVE_DISC_ACTION].title=i18n("Remove disc");
     ACTIONS[PLAY_DISC_ACTION].title=i18n("Play disc starting at track");
+    ACTIONS[PLAY_PLAYLIST_ACTION].title=i18n("Play starting at track");
+    ACTIONS[SHOW_IMAGE_ACTION].title=i18n("Show image");
 }
 
diff --git a/MaterialSkin/HTML/material/html/js/addtoplaylist-dialog.js b/MaterialSkin/HTML/material/html/js/addtoplaylist-dialog.js
@@ -20,7 +20,12 @@ Vue.component('lms-addtoplaylist-dialog', {
     </v-list-tile>
    </v-list>
   </v-form>
-  <v-card-actions>
+  <v-card-actions v-if="queryParams.altBtnLayout">
+   <v-spacer></v-spacer>
+   <v-btn flat @click.native="save()">{{i18n('Add')}}</v-btn>
+   <v-btn flat @click.native="cancel()">{{i18n('Cancel')}}</v-btn>
+  </v-card-actions>
+  <v-card-actions v-else>
    <v-spacer></v-spacer>
    <v-btn flat @click.native="cancel()">{{i18n('Cancel')}}</v-btn>
    <v-btn flat @click.native="save()">{{i18n('Add')}}</v-btn>

diff --git a/MaterialSkin/HTML/material/html/js/advancedsearch-dialog.js b/MaterialSkin/HTML/material/html/js/advancedsearch-dialog.js
@@ -131,7 +131,7 @@ Vue.component('lms-advancedsearch-dialog', {
 
   </v-card-text>
 
-  <v-card-actions>
+  <v-card-actions v-if="queryParams.altBtnLayout">
    <div v-if="searching" style="padding-left:8px">{{i18n('Searching...')}}</div>
    <v-menu v-else top v-model="showMenu">
    <v-btn icon slot="activator"><v-icon>settings</v-icon></v-btn>
@@ -145,8 +145,25 @@ Vue.component('lms-advancedsearch-dialog', {
    </v-list>
    </v-menu>
    <v-spacer></v-spacer>
+   <v-btn flat v-if="!searching" @click.native="search()">{{i18n('Search')}}</v-btn>
    <v-btn flat @click.native="cancel()">{{i18n('Cancel')}}</v-btn>
-   <v-btn flat v-if="!searching" @click.native="search()">{{i18n('Search')}}</v-btn
+  </v-card-actions>
+  <v-card-actions v-else>
+   <div v-if="searching" style="padding-left:8px">{{i18n('Searching...')}}</div>
+   <v-menu v-else top v-model="showMenu">
+   <v-btn icon slot="activator"><v-icon>settings</v-icon></v-btn>
+   <v-list>
+    <template v-for="(sect, index) in sections">
+     <v-list-tile @click="sect.visible=!sect.visible" v-if="stats || !sect.isstats">
+      <v-list-tile-avatar><v-icon>{{sect.visible ? 'check_box' : 'check_box_outline_blank'}}</v-icon></v-list-tile-avatar>
+      <v-list-tile-content><v-list-tile-title>{{sect.label}}</v-list-tile-title></v-list-tile-content>
+     </v-list-tile>
+    </template>
+   </v-list>
+   </v-menu>
+   <v-spacer></v-spacer>
+   <v-btn flat @click.native="cancel()">{{i18n('Cancel')}}</v-btn>
+   <v-btn flat v-if="!searching" @click.native="search()">{{i18n('Search')}}</v-btn>
   </v-card-actions>
  </v-card>
 </v-dialog>