Merge pull request #6 from ilyaly/master

Update to version 0.2.2

CHANGES.md

@@ -1,5 +1,11 @@
 # Change Log  
 
+## 0.2.2 (2025-03-02)
+
+### Improvements
+
+- Delete button are only displayed on mouse over  
+
 ## 0.2.1 (2025-02-28)  
 
 ### IMPORTANT NOTICE  

README.md

@@ -22,11 +22,9 @@ Ascape Mixer is an audio player and mixer designed for TTRPG actual play, allowi
 
 ## Installation  
 
-1. Download the latest installer for your OS from the [Releases](#) page.  
+1. Download the latest installer for your OS from the [Releases](https://github.com/ilyaly/ascapes-mixer/releases) page.  
 2. Run the installer and follow the instructions.  
 3. Launch the application.
-4. Create a playlist in a section of your interset and open it.  
-4. Drag and drop `.mp3` or `.wav` files into the playlist.  
 
 ## Development  
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "ascapes-mixer",
   "private": true,
-  "version": "0.2.1",
+  "version": "0.2.2",
   "type": "module",
   "scripts": {
     "dev": "vite dev",

src-tauri/tauri.conf.json

@@ -1,7 +1,7 @@
 {
   "$schema": "../node_modules/@tauri-apps/cli/config.schema.json",
   "productName": "ascapes-mixer",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "identifier": "ascapes.mixer",
   "build": {
     "frontendDist": "../build",

src/lib/catalog/CatalogItem.svelte

@@ -14,6 +14,7 @@
 
 	let name = $state(item.name);
 	let description = $state(item.description);
+	let isMouseOver = $state(false)
 
 	function handleNameChange() {
 		playlistsState.setPlaylist({
@@ -92,13 +93,13 @@
 			</textarea>
 		</div>
 
-
-	    <button 
-	    	class="button"
-	    	onclick={handleOpenPlaylist} 
-	    >
+		<button 
+		   	class="button"
+		   	onclick={handleOpenPlaylist} 
+		>
 			<OpenListIcon />
 		</button>
+
 	</div>
 
 
@@ -140,6 +141,10 @@
 		
 	}
 
+	.playlist:hover button {
+		visibility: visible;
+	}
+
 
 	.playlist-header {
 		display: flex;
@@ -175,6 +180,7 @@
 		resize: none;
 		padding: 4px;
 		border-radius: 4px;
+		overflow: hidden;
 	}
 
 	.playlist-footer {
@@ -193,6 +199,7 @@
 	}
 
 	button {
+		visibility: hidden;
 		margin: 0;
 		padding: 0;
 		background: none;

src/lib/player/Player.svelte

@@ -6,6 +6,17 @@
   
   let { playlist } = $props();
   
+  /*
+
+  ToDo:
+
+  Move current track and playback states to the Music / Ambiente component
+  to be able to get to playlists page without stopping the playback.
+
+  Maybe should even put the player on the playlists page, to be able to 
+  controll playback while managing playlists.
+  
+  */
   let currentTrackState = $state({
     id: null,
     index: null,

src/lib/playlist/Playlist.svelte

@@ -172,8 +172,16 @@
     handleFilesDrop(droppedFiles);
     isDragging = false;
   }
+
+  function handleKeydown(event) {
+    console.log(event)
+  }
 </script>
 
+
+<svelte:window onkeydown={handleKeydown} />
+
+
 <div class="playlist">
   {#if items && items.length === 0}
     <span class="playlist-empty-tip">Drop audio files here</span>

src/lib/playlist/PlaylistItem.svelte

@@ -100,8 +100,11 @@
 
     await remove(item.path, { baseDir: BaseDirectory.AppLocalData });
   }
+
+  
 </script>
 
+
 <div
   class="playlist-item {isCurrentTrack ? 'active' : ''}"
 >
@@ -141,10 +144,12 @@
   </div>
 </div>
 
+
+
 <style>
   .playlist-item {
     font-family: "Roboto", serif;
-    width: -webkit-fill-available;
+    width: 100%;;
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -160,12 +165,16 @@
     background-color: #f0f0ff;
   }
 
+  .playlist-item:hover .delete-button {
+    visibility: visible;
+  }
+
   .active {
     background-color: #0000001a;
   }
 
   .playlist-item-info {
-    width: -webkit-fill-available;
+    width: 100%;;
     display: flex;
     flex-direction: row;
     gap: 8px;
@@ -176,11 +185,11 @@
   }
 
   .playlist-item-meta {
+    width: 100%;;
     display: flex;
     flex-direction: column;
     justify-content: center;
     gap: 8px;
-    width: -webkit-fill-available;
   }
 
   .playlist-item-name-container {
@@ -201,7 +210,8 @@
     width: auto;
   }
 
-  .button {
+  button {
+
     width: 48px;
     height: 48px;
 
@@ -213,12 +223,13 @@
     border: none;
   }
 
-  .button:hover {
+  button:hover {
     cursor: pointer;
     fill: rgb(33 150 243 / 100%);
   }
 
   .delete-button {
+    visibility: hidden;
     cursor: pointer;
   }