some fixes for touch, added edit tracklist to user playlists

added new i18n items
visual.window_background_style is now none by default

src/i18n/en_US.json

@@ -199,6 +199,9 @@
   "podcast.episodes": "Episodes",
   "podcast.playEpisode": "Play Episode",
   "podcast.website": "Podcast Website",
+  "action.edit": "Edit",
+  "action.done": "Done",
+  "action.editTracklist": "Edit Tracklist",
   "action.addToLibrary": "Add to Library",
   "action.addToLibrary.success": "Added to Library",
   "action.addToLibrary.error": "Error Adding to Library",

src/i18n/source/en_US.json

@@ -199,6 +199,9 @@
   "podcast.episodes": "Episodes",
   "podcast.playEpisode": "Play Episode",
   "podcast.website": "Podcast Website",
+  "action.edit": "Edit",
+  "action.done": "Done",
+  "action.editTracklist": "Edit Tracklist",
   "action.addToLibrary": "Add to Library",
   "action.addToLibrary.success": "Added to Library",
   "action.addToLibrary.error": "Error Adding to Library",

src/main/base/store.ts

@@ -170,7 +170,7 @@ export class Store {
             "styles": [],
             "scrollbars": 0, // 0 = show on hover, 2 = always hide, 3 = always show
             "refresh_rate": 0,
-            "window_background_style": "artwork", // "none", "artwork", "color"
+            "window_background_style": "none", // "none", "artwork", "color"
             "animated_artwork": "limited", // 0 = always, 1 = limited, 2 = never
             "animated_artwork_qualityLevel": 1,
             "bg_artwork_rotation": false,

src/renderer/less/pages.less

@@ -498,6 +498,18 @@
   height: 100%;
   overflow: hidden;
 
+  .editTracksBtn {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    z-index: 1;
+
+    >span {
+      display: flex;
+      gap: 8px;
+    }
+  }
+
   .mediaContainer {
     transition: width 0.5s ease-in-out, height 0.5s ease-in-out;
     width: 260px;height:260px;

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

@@ -90,6 +90,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);setTimeout(()=>{playerLCD.desiredDuration = 0;playerLCD.userInteraction = false}, 1000);"
+                       @touchend="mk.seekToTime($event.target.value);setTimeout(()=>{playerLCD.desiredDuration = 0;playerLCD.userInteraction = false}, 1000);"
                        :max="mk.currentPlaybackDuration" :value="getSongProgress()">
             </div>
         </div>

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

@@ -107,6 +107,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);setTimeout(()=>{playerLCD.desiredDuration = 0;playerLCD.userInteraction = false}, 1000);"
+                                   @touchend="mk.seekToTime($event.target.value);setTimeout(()=>{playerLCD.desiredDuration = 0;playerLCD.userInteraction = false}, 1000);"
                                    :max="mk.currentPlaybackDuration" :value="getSongProgress()">
                         </div>
                     </div>

src/renderer/views/pages/cider-playlist.ejs

@@ -104,7 +104,14 @@
                 <div class="artworkContainer" v-if="data.attributes.artwork != null">
                     <artwork-material :url="data.attributes.artwork.url" size="260" images="1"></artwork-material>
                 </div>
-
+                <button class="md-btn md-btn-small editTracksBtn" v-if="(data.attributes.canEdit && data.type == 'library-playlists')" @click="editing = !editing">
+                    <span v-if="!editing">
+                        <div class='codicon codicon-edit'></div> {{$root.getLz("action.editTracklist")}}
+                    </span>
+                    <span v-else>
+                        <div class='codicon codicon-check'></div> {{$root.getLz("action.done")}}
+                    </span>
+                </button>
             </div>
             <div class="floating-header"
                  :style="{opacity: (headerVisible ? 0 : 1),'pointer-events': (headerVisible ? 'none' : '')}">
@@ -145,13 +152,12 @@
                 </div>
             </div>
             <div class="playlist-body scrollbody">
-
                 <b-tabs pills class="track-pills pilldim" align="center" content-class="mt-3" :nav-wrapper-class="navClass(data)">
                     <b-tab :title="$root.getLz('term.tracks')">
                         <div @wheel="minClass(true)" @scroll="minClass(true)">
                         <div class="">
                             <div style="width:100%" @click="minClass(true)">
-                                <draggable :sort="data.attributes.canEdit && data.type == 'library-playlists'"
+                                <draggable :options="{disabled: !editing}"
                                            v-model="data.relationships.tracks.data" @start="drag=true"
                                            @end="drag=false;put()">
                                     <template v-if="nestedPlaylist == [] || nestedPlaylist.length <= 1">
@@ -256,6 +262,7 @@
                 useArtistChip: false,
                 nestedPlaylist: [],
                 classes: [],
+                editing: false
             }
         },
         mounted: function () {