Add context menus

StarLederer · Apr 18, 2021 · 8b9afd4 · 8b9afd4
1 parent 347f492
commit 8b9afd4
Show file tree

Hide file tree

Showing 13 changed files with 238 additions and 181 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -87,7 +87,6 @@
 	"dependencies": {
 		"electron-squirrel-startup": "^1.0.0",
 		"music-metadata": "^7.8.3",
-		"node-id3": "^0.2.2",
-		"wavefile": "^11.0.0"
+		"node-id3": "^0.2.2"
 	}
 }
diff --git a/src/assets/context-menu.css b/src/assets/context-menu.css
@@ -0,0 +1,53 @@
+#context-menu {
+	position: fixed;
+
+	background: white;
+	box-shadow: 0 0 1rem rgba(0, 0, 0, 0.05);
+
+	display: none;
+	flex-direction: column;
+	border-radius: 0.25rem;
+	overflow: hidden;
+}
+#context-menu button {
+	width: 20rem;
+	height: 4rem;
+	padding: 0 2rem;
+	/* padding-right: 6rem; */
+
+	color: #571be5;
+
+	text-align: left;
+	font-weight: 700;
+}
+
+#context-menu button:hover {
+	background: #571be5;
+	color: white;
+}
+
+#context-menu button:active {
+	background: #7f48ff;
+	color: white;
+}
+
+#context-menu button::after {
+	content: "";
+
+	width: calc(100% - 4rem);
+	height: 1px;
+	position: absolute;
+	bottom: 0px;
+	left: 0;
+	right: 0;
+	margin: 0 auto;
+
+	background: #571be5;
+	opacity: 0.1;
+
+	display: block;
+}
+
+#context-menu button:last-child:after {
+	display: none;
+}
diff --git a/src/files.css → src/assets/files.css b/src/files.css → src/assets/files.css
@@ -81,31 +81,6 @@ button#window-control-close:hover {
 	cursor: pointer;
 }
 
-/* #files-section .row.file-entry .name {
-	user-select: text;
-	cursor: text;
-	pointer-events: all;
-} */
-
-#files-section .row.file-entry .name .copy-name {
-	height: 1.5rem;
-	padding: 0 1rem;
-	position: absolute;
-	right: 0;
-
-	background: #571be5;
-	color: white;
-	opacity: 0;
-
-	border-radius: 0.75rem;
-
-	pointer-events: all;
-}
-
-#files-section .row.file-entry .name .copy-name:active {
-	background: #7f48ff;
-}
-
 #files-section .row.file-entry div {
 	font-weight: 700;
 	user-select: text;
@@ -115,10 +90,6 @@ button#window-control-close:hover {
 	color: #571be588;
 }
 
-#files-section .row.file-entry:hover .name .copy-name {
-	opacity: 1;
-}
-
 #files-section .row.file-entry.selected {
 	background: #571be508;
 }

diff --git a/src/assets/icons/windows-close.svg b/src/assets/icons/windows-close.svg
diff --git a/src/assets/icons/windows-collapse.svg b/src/assets/icons/windows-collapse.svg
diff --git a/src/assets/icons/windows-maximize.svg b/src/assets/icons/windows-maximize.svg
diff --git a/src/main.css → src/assets/style.css b/src/main.css → src/assets/style.css
@@ -62,8 +62,8 @@ button.begging:hover {
 	transition: 100ms;
 }
 
-/* body */
-body {
+/* main-layout */
+#main-layout {
 	height: 100vh;
 	display: grid;
 	grid-template-columns: 24em auto;
@@ -122,11 +122,6 @@ h2 {
 	/* height: 0.25rem; */
 }
 
-::-webkit-scrollbar-track,
-::-webkit-scrollbar-thumb {
-	/* border-radius: 5px; */
-}
-
 ::-webkit-scrollbar-track {
 	background: rgba(0, 0, 0, 0.05);
 }

diff --git a/src/tags.css → src/assets/tags.css b/src/tags.css → src/assets/tags.css
diff --git a/src/common/IpcEvents.ts b/src/common/IpcEvents.ts
@@ -7,6 +7,7 @@ export const IpcEvents = {
 	rendererAlbumArtReceived: "album-art-received",
 	rendererFileReceived: "file-received",
 	rendererRequestLoadMeta: "load-meta",
+	rendererRequestRemoveAlbumArt: "remove-album-art",
 	rendererRequestSaveMeta: "save-meta",
 	rendererWindowClose: "window-close",
 	rendererWindowCollaps: "window-collapse",

diff --git a/src/main.html b/src/main.html
@@ -9,73 +9,76 @@
 		<link rel="stylesheet" href="../mp3-tag-assistant-icons/mp3-tag-assistant-icons.css"></link>
 	</head>
 	<body>
-		<!-- tags -->
-		<section id="tags-section">
-			<header>
-				<h2>Tags</h2>
-				<button class="begging" id="tags-save">save</button>
-			</header>
-			<main>
-				<div class="tag-edit-field">
-					<label for="track-title"> Track </label>
-					<input type="text" id="track-title" placeholder="Unknown" />
-					<!-- <button>Suggested track Title?</button> -->
-				</div>
+		<div id="main-layout">
+			<!-- tags -->
+			<section id="tags-section">
+				<header>
+					<h2>Tags</h2>
+					<button class="begging" id="tags-save">save</button>
+				</header>
+				<main>
+					<div class="tag-edit-field">
+						<label for="track-title"> Track </label>
+						<input type="text" id="track-title" placeholder="Unknown" />
+						<!-- <button>Suggested track Title?</button> -->
+					</div>
 
-				<div class="tag-edit-field">
-					<label for="track-artist"> Track artist </label>
-					<input type="text" id="track-artist" placeholder="Unknown" />
-				</div>
+					<div class="tag-edit-field">
+						<label for="track-artist"> Track artist </label>
+						<input type="text" id="track-artist" placeholder="Unknown" />
+					</div>
 
-				<div class="tag-edit-field">
-					<label for="track-number"> Track number </label>
-					<input type="text" id="track-number" placeholder="Unknown" />
-				</div>
+					<div class="tag-edit-field">
+						<label for="track-number"> Track number </label>
+						<input type="text" id="track-number" placeholder="Unknown" />
+					</div>
 
-				<div class="tag-edit-field">
-					<label for="album-title"> Album </label>
-					<input type="text" id="album-title" placeholder="Unknown" />
-				</div>
+					<div class="tag-edit-field">
+						<label for="album-title"> Album </label>
+						<input type="text" id="album-title" placeholder="Unknown" />
+					</div>
 
-				<div class="tag-edit-field">
-					<label for="album-artist"> Album artist </label>
-					<input type="text" id="album-artist" placeholder="Unknown" />
-				</div>
+					<div class="tag-edit-field">
+						<label for="album-artist"> Album artist </label>
+						<input type="text" id="album-artist" placeholder="Unknown" />
+					</div>
 
-				<div class="tag-edit-field">
-					<label for="year"> Year </label>
-					<input type="text" id="year" placeholder="Unknown" />
-				</div>
+					<div class="tag-edit-field">
+						<label for="year"> Year </label>
+						<input type="text" id="year" placeholder="Unknown" />
+					</div>
 
-				<div class="tag-edit-field" id="album-art-field">
-					<span> Album art </span>
-					<div id="album-art-input"></div>
-				</div>
-			</main>
-		</section>
+					<div class="tag-edit-field" id="album-art-field">
+						<span> Album art </span>
+						<div id="album-art-input"></div>
+					</div>
+				</main>
+			</section>
 
-		<!-- files -->
-		<section id="files-section">
-			<header>
-				<h2>Files</h2>
-				<div id="beta-build-disclaimer">Beta build</div>
-				<div id="window-controls">
-					<button id="window-control-colapse"><i class="icon-windows-collapse"></i></button>
-					<button id="window-control-toggle-size"><i class="icon-windows-maximize"></i></button>
-					<button id="window-control-close"><i class="icon-windows-close"></i></button>
-				</div>
-			</header>
+			<!-- files -->
+			<section id="files-section">
+				<header>
+					<h2>Files</h2>
+					<div id="beta-build-disclaimer">Beta build</div>
+					<div id="window-controls">
+						<button id="window-control-colapse"><i class="icon-windows-collapse"></i></button>
+						<button id="window-control-toggle-size"><i class="icon-windows-maximize"></i></button>
+						<button id="window-control-close"><i class="icon-windows-close"></i></button>
+					</div>
+				</header>
 
-			<main>
-				<div class="table" id="file-list">
-					<div class="row table-head afterline">
-						<div>Name</div>
-						<div>Type</div>
-						<div>Location</div>
-						<div class="hidden">Path</div>
+				<main>
+					<div class="table" id="file-list">
+						<div class="row table-head afterline">
+							<div>Name</div>
+							<div>Type</div>
+							<div>Location</div>
+							<div class="hidden">Path</div>
+						</div>
 					</div>
-				</div>
-			</main>
-		</section>
+				</main>
+			</section>
+		</div>
+		<div id="context-menu"></div>
 	</body>
 </html>
diff --git a/src/main.ts b/src/main.ts
@@ -2,6 +2,7 @@ import { app, BrowserWindow, ipcMain } from "electron";
 // eslint-disable-next-line import/no-unresolved
 import { IpcMainEvent } from "electron/main";
 import path from "path";
+// import fs from "fs";
 import * as mm from "music-metadata";
 import * as NodeID3 from "node-id3";
 import { IpcEvents } from "./common/IpcEvents";
@@ -128,7 +129,7 @@ ipcMain.on(IpcEvents.rendererRequestLoadMeta, (event: IpcMainEvent, filePath: st
 				} as NodeID3Image;
 			} else currentMeta.image = getNewFrontCover();
 
-			event.sender.send(IpcEvents.mainRequestRenderMeta, currentMeta);
+			event.sender.send(IpcEvents.mainRequestRenderMeta, currentMeta, value);
 		})
 		.catch((error: Error) => {
 			event.sender.send(IpcEvents.mainRequestRenderError, error);
@@ -171,7 +172,7 @@ ipcMain.on(IpcEvents.rendererRequestSaveMeta, (event: IpcMainEvent, meta) => {
 			event.sender.send(IpcEvents.mainRequestRenderError, result as Error);
 		}
 	} else if (currentFileFormat == SupportedFormat.WAV) {
-		event.sender.send(IpcEvents.mainRequestRenderError, new Error("Saving WAV is not supperted yet"));
+		event.sender.send(IpcEvents.mainRequestRenderError, new Error("Saving WAVs is not supported and there currently is no plan to add support for that. Please encode your music in MP3"));
 	}
 });
 
@@ -188,7 +189,12 @@ ipcMain.on(IpcEvents.rendererAlbumArtReceived, (event: IpcMainEvent, name: strin
 	frontCover.imageBuffer = Buffer.from(buffer);
 	currentMeta.image = frontCover;
 
-	event.sender.send(IpcEvents.mainRequestRenderAlbumArt, frontCover.mime, frontCover.imageBuffer);
+	event.sender.send(IpcEvents.mainRequestRenderAlbumArt, frontCover);
+});
+
+ipcMain.on(IpcEvents.rendererRequestRemoveAlbumArt, (event: IpcMainEvent) => {
+	const frontCover = getNewFrontCover();
+	event.sender.send(IpcEvents.mainRequestRenderAlbumArt, frontCover);
 });
 
 function getNewMeta(): NodeID3.Tags {