add remove track button, fix empty track bug (#16)

Ben-Wormald · May 12, 2022 · e7ab608 · e7ab608
1 parent 96d966e
commit e7ab608
Show file tree

Hide file tree

Showing 7 changed files with 51 additions and 23 deletions.
diff --git a/.nvmrc b/.nvmrc
@@ -0,0 +1 @@
+16
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/component/Album.js b/src/component/Album.js
@@ -15,13 +15,21 @@ const Album = ({ album, setAlbum, handleScrobble }) => {
     });
   };
 
+  const handleRemove = (index) => () => {
+    setAlbum({
+      ...album,
+      tracks: album.tracks.filter((_, trackIndex) => trackIndex !== index),
+    });
+  };
+
   const Track = (track, index) => {
     return (
       <div className="row">
         <p className="track-index">{index + 1}</p>
         <input type="text" value={track.artist} onChange={updateTrack(index, 'artist')} placeholder={album.artist} />
         <input type="text" value={track.name} onChange={updateTrack(index, 'name')} />
         <input type="text" value={track.duration} onChange={updateTrack(index, 'duration')} className="duration" />
+        <button onClick={handleRemove(index)} aria-label="remove" className="remove-button">✗</button>
       </div>
     );
   };

diff --git a/src/manifest.json b/src/manifest.json
@@ -1,6 +1,6 @@
 {
   "name": "Bandcamp Scrobbler",
-  "version": "1.2",
+  "version": "1.3",
   "description": "Scrobble albums on Bandcamp to Last.fm",
   "icons": {
     "16": "resource/icon16.png",

diff --git a/src/popup.css b/src/popup.css
@@ -56,6 +56,7 @@ a:hover {
   border: none;
   border-bottom: 1px solid rgb(76, 158, 191);
   background: none;
+  font-family: inherit;
 }
 
 .row p {
@@ -66,11 +67,12 @@ a:hover {
 }
 
 .row .track-index {
-  width: 16px;
+  width: 8px;
+  font-size: 13px;
 }
 
 .row .duration {
-  width: 80px;
+  width: 40px;
 }
 
 button {
@@ -91,6 +93,22 @@ button:hover {
   margin-right: 8px;
 }
 
+.remove-button {
+  width: 28px;
+  height: 28px;
+  margin-left: 12px;
+  padding: 0;
+  font-weight: bold;
+  color: rgb(169, 34, 22);
+  border: 1px solid rgb(169, 34, 22);
+  background: none;
+}
+
+.remove-button:hover {
+  color: white;
+  background-color: rgb(169, 34, 22);
+}
+
 .auth {
   padding-left: 24px;
 }
diff --git a/src/popup.html b/src/popup.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <meta charset="utf-8">
     <link rel="stylesheet" href="popup.css">
   </head>
   <body>

diff --git a/src/util/lastfm.js b/src/util/lastfm.js
@@ -16,30 +16,30 @@ const processDurations = (data, count) => {
     }
   }
   return data;
-}
+};
 
 const processTrackData = ({ artist, title, tracks }) => {
   const trackData = {};
   let count = 0
 
-  tracks.forEach((track, index) => {
-    if (!track.name || !track.duration) return;
-
-    var duration = track.duration.split(':');
-    duration = duration.length === 1 ? parseInt(duration[0]) : parseInt(duration[0]) * 60 + parseInt(duration[1]);
+  tracks
+    .filter(({ name, duration}) => name && duration)
+    .forEach((track, index) => {
+      var duration = track.duration.split(':');
+      duration = duration.length === 1 ? parseInt(duration[0]) : parseInt(duration[0]) * 60 + parseInt(duration[1]);
 
-    trackData[`artist[${index}]`] = track.artist || artist;
-    trackData[`albumArtist[${index}]`] = artist;
-    trackData[`album[${index}]`] = title;
-    trackData[`track[${index}]`] = track.name;
-    trackData[`duration[${index}]`] = duration;
-    trackData[`trackNumber[${index}]`] = index + 1;
+      trackData[`artist[${index}]`] = track.artist || artist;
+      trackData[`albumArtist[${index}]`] = artist;
+      trackData[`album[${index}]`] = title;
+      trackData[`track[${index}]`] = track.name;
+      trackData[`duration[${index}]`] = duration;
+      trackData[`trackNumber[${index}]`] = index + 1;
 
-    count++;
-  });
+      count++;
+    });
 
   return processDurations(trackData, count);
-}
+};
 
 const generateSignature = data => {
   const urlParams = [];
@@ -50,7 +50,7 @@ const generateSignature = data => {
   }
   urlParams.sort();
   return md5(urlParams.join('') + process.env.SECRET_KEY);
-}
+};
 
 const processResponse = ({ scrobbles }) => {
   const response = {
@@ -69,7 +69,7 @@ const processResponse = ({ scrobbles }) => {
     });
   }
   return response;
-}
+};
 
 const scrobble = async (albumData, sessionKey) => {
   const trackData = processTrackData(albumData);
@@ -92,7 +92,7 @@ const scrobble = async (albumData, sessionKey) => {
 
   const json = await response.json();
   return processResponse(json);
-}
+};
 
 const getToken = async () => {
   const params = {