Updated KeySelector UI, fixed volume persistence, writing unknown tags

basharovV · Sep 24, 2022 · 1362fdc · 1362fdc
1 parent ed3985f
commit 1362fdc
Show file tree

Hide file tree

Showing 6 changed files with 80 additions and 33 deletions.
diff --git a/src-tauri/src/main.rs b/src-tauri/src/main.rs
@@ -175,6 +175,7 @@ fn write_metadata(event: Event) -> Result<(), Box<dyn Error>> {
             println!("fileType: {:?}", &fileType);
             let mut tag = read_from_path(&v.file_path, true).unwrap();
             let tagFileType = tag.file_type();
+            let mut to_write = lofty::Tag::new(tag_type.unwrap());
             println!("tag fileType: {:?}", &tagFileType);
 
             let primary_tag = tag.primary_tag_mut().unwrap();
@@ -208,7 +209,7 @@ fn write_metadata(event: Event) -> Result<(), Box<dyn Error>> {
                         let item_key = ItemKey::from_key(tag_type_value, tag_key.deref());
                         let item_value: ItemValue =
                             ItemValue::Text(String::from(item.value.as_str().unwrap()));
-                        primary_tag.insert_item_unchecked(TagItem::new(item_key, item_value));
+                            to_write.insert_item_unchecked(TagItem::new(item_key, item_value));
                     }
                 }
             }
@@ -223,7 +224,7 @@ fn write_metadata(event: Event) -> Result<(), Box<dyn Error>> {
 
                 let mut reader = BufReader::new(picture_file);
                 let picture = Picture::from_reader(reader.get_mut());
-                primary_tag.set_picture(0, picture.unwrap());
+                to_write.set_picture(0, picture.unwrap());
             }
 
             for tagItem in tag.tags() {
@@ -235,6 +236,8 @@ fn write_metadata(event: Event) -> Result<(), Box<dyn Error>> {
             println!("{:?}", file);
             println!("FILETYPE: {:?}", fileType);
 
+            tag.clear();
+            tag.insert_tag(to_write);
             tag.save_to(&mut file)?;
             println!("File saved succesfully!");
         }

diff --git a/src/data/store.ts b/src/data/store.ts
@@ -28,7 +28,7 @@ export const rightClickedTrack: Writable<Song> = writable(null);
 export const rightClickedTracks: Writable<Song[]> = writable(null);
 export const playerTime = writable(0);
 export const seekTime = writable(0);
-export const volume: Writable<number> = writable(localStorage.getItem('volume') ? parseInt(localStorage.getItem('volume')) : 0.6);
+export const volume: Writable<number> = writable(localStorage.getItem('volume') ? parseFloat(localStorage.getItem('volume')) : 0.6);
 
 export const isInfoPopupOpen = writable(false);
 export const isTrackInfoPopupOpen = writable(false);

diff --git a/src/lib/TrackInfoPopup.svelte b/src/lib/TrackInfoPopup.svelte
@@ -22,7 +22,8 @@
     import "./tippy.css";
     import Input from "./Input.svelte";
     import { focusTrap } from "../utils/FocusTrap";
-import type { MetadataEntry, TagType } from "src/App";
+    import type { MetadataEntry, TagType } from "src/App";
+    import { db } from "../data/db";
 
     // optional
 
@@ -139,11 +140,11 @@ import type { MetadataEntry, TagType } from "src/App";
      */
     function writeMetadata() {
         const toWrite = metadata
-                .filter((m) => m.value !== null)
-                .map((t) => ({ id: t.id, value: t.value }));
-        console.log('Writing: ', toWrite)
+            .filter((m) => m.value !== null)
+            .map((t) => ({ id: t.id, value: t.value }));
+        console.log("Writing: ", toWrite);
         emit("write-metadata", {
-            metadata: toWrite,                
+            metadata: toWrite,
             "tag_type": tagType,
             "file_path": $rightClickedTrack.path,
             "artwork_file_to_set": artworkFileToSet ? artworkFileToSet : ""
@@ -305,6 +306,31 @@ import type { MetadataEntry, TagType } from "src/App";
             reset();
         }
     }
+
+    let matchingArtists: string[] = [];
+
+    let distinctArtists;
+
+    let firstMatch: string = null;
+    
+    async function onArtistUpdated(evt) {
+        let matched = [];
+        const artist = evt.target.value;
+        if (artist && artist.trim().length > 0) {
+            if (distinctArtists === undefined) {
+                distinctArtists = await db.songs.orderBy("artist").uniqueKeys();
+            }
+            distinctArtists.forEach((a) => {
+                if (a.toLowerCase().includes(artist.toLowerCase())) {
+                    matched.push(a);
+                }
+            });
+
+            firstMatch = distinctArtists[0];
+        } else {
+            firstMatch = null;
+        }
+    }
 </script>
 
 <container use:focusTrap>
@@ -410,11 +436,24 @@ import type { MetadataEntry, TagType } from "src/App";
                 {:else}
                     <form>
                         {#each metadata as tag}
-                            <div class="tag">
-                                <p>{tag.genericId ? tag.genericId : tag.id}</p>
-                                <div class="line" />
-                                <Input bind:value={tag.value} />
-                            </div>
+                            {#if tag.genericId === "artist"}
+                                <div class="tag">
+                                    <p>artist</p>
+                                    <div class="line" />
+                                    <Input
+                                        bind:value={tag.value}
+                                        onChange={onArtistUpdated}
+                                    />
+                                </div>
+                            {:else}
+                                <div class="tag">
+                                    <p>
+                                        {tag.genericId ? tag.genericId : tag.id}
+                                    </p>
+                                    <div class="line" />
+                                    <Input bind:value={tag.value} />
+                                </div>
+                            {/if}
                         {/each}
                     </form>
                 {/if}
@@ -615,8 +654,7 @@ import type { MetadataEntry, TagType } from "src/App";
             font-size: 13px;
             max-width: 400px;
             margin: auto;
-            font-family: -apple-system, Avenir, Helvetica, Arial,
-                sans-serif;
+            font-family: -apple-system, Avenir, Helvetica, Arial, sans-serif;
         }
         .file-info {
             display: flex;
@@ -675,7 +713,8 @@ import type { MetadataEntry, TagType } from "src/App";
         width: 100%;
         /* border: 1px solid rgb(78, 73, 73); */
         background: rgba(56, 54, 60, 0.842);
-        font-family: system-ui, -apple-system, Avenir, Helvetica, Arial, sans-serif;
+        font-family: system-ui, -apple-system, Avenir, Helvetica, Arial,
+            sans-serif;
         h4 {
             user-select: none;
             position: absolute;

diff --git a/src/lib/menu/Menu.svelte b/src/lib/menu/Menu.svelte
@@ -131,6 +131,7 @@
         box-shadow: 10px 10px 10px 0px #0002;
         z-index: 20;
         max-width: 300px;
+        min-width: 65px;
         font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
         &.fixed {
             position: fixed;

diff --git a/src/lib/menu/MenuOption.svelte b/src/lib/menu/MenuOption.svelte
@@ -35,7 +35,7 @@
         onClick && onClick();
     }}
 >
-    <div class="bg" style={color ? `background-color: ${color}cb` : ""} />
+    <div class="bg" style={color ? `background-color: ${color}` : ""} />
     {#if isConfirming}
         {confirmText}
     {:else if text}
@@ -56,8 +56,8 @@
     .bg {
         position: absolute;
         top: 2px;
-        left: 2px;
         right: 2px;
+        width: 5px;
         bottom: 2px;
         border-radius: 2px;
     }

diff --git a/src/lib/ui/KeySelector.svelte b/src/lib/ui/KeySelector.svelte
@@ -10,28 +10,22 @@
 
     $: firstMatch = (matches.length && matches[0]) ?? null;
     let textInputColor;
-    $: {
-        if (value) {
-            textInputColor = options.find((o) => o.name === value)?.color;
-        } else {
-            textInputColor = "#FFFFFF";
-        }
-    }
 
-    $: correctedTextInputColor = isDarkColor(textInputColor)
+
+    $: correctedTextInputColor = textInputColor !== null && isDarkColor(textInputColor)
         ? "white"
-        : textInputColor;
+        : textInputColor ?? '#FFFFFF';
     let options: { name: string; color: string }[] = [
         // Major#
-        { name: "C", color: "#13EDA9" },
+        { name: "C", color: "#006CFF" },
         { name: "C#", color: "#E5C874" },
-        { name: "D", color: "#EB9D13" },
+        { name: "D", color: "#FFD600" },
         { name: "D#", color: "#48BF8D" },
         { name: "E", color: "#70EE3D" },
         { name: "F", color: "#ED7513" },
         { name: "F#", color: "#ED4A8F" },
-        { name: "G", color: "#FF1700" },
-        { name: "G#", color: "#A8B50B" },
+        { name: "G", color: "#FF3400" },
+        { name: "G#", color: "#E600FF" },
         { name: "A", color: "#3BBDDF" },
         { name: "A#", color: "#936339" },
         { name: "B", color: "#FF4F00" },
@@ -49,13 +43,21 @@
         { name: "A#m", color: "#422210" },
         { name: "Bm", color: "#723DEE" }
     ];
+    $: {
+        if (value) {
+            textInputColor = options.find((o) => o.name === value)?.color ?? '#FFFFFF';
+        } else {
+            textInputColor = "#FFFFFF";
+        }
+    }
 
     function onFocus() {
         console.log("onfocus");
         setTimeout(() => {
+            matches = options;
+            updateQueryPartsAutocompletePos();
+
             if (value && value.trim().length === 0) {
-                matches = options;
-                updateQueryPartsAutocompletePos();
                 matches = matches;
                 console.log("matching parts", matches);
             }
@@ -114,6 +116,7 @@
     use:autoWidth
     bind:this={artistInput}
     {value}
+    maxlength="3"
     on:input={onInput}
     on:focus={onFocus}
     on:blur={onLostFocus}
@@ -145,6 +148,7 @@
 <style lang="scss">
     input {
         min-width: 60px;
+        max-width: 40px;
         width: 100%;
         align-items: center;
         padding: 0.2em 0.5em;