From e7ab608bc84bb1dcb8d4af0199c955f4aa0effe5 Mon Sep 17 00:00:00 2001 From: Ben Wormald Date: Thu, 12 May 2022 14:37:37 +0100 Subject: [PATCH] add remove track button, fix empty track bug (#16) --- .nvmrc | 1 + package-lock.json | 4 ++-- src/component/Album.js | 8 ++++++++ src/manifest.json | 2 +- src/popup.css | 22 ++++++++++++++++++++-- src/popup.html | 1 + src/util/lastfm.js | 36 ++++++++++++++++++------------------ 7 files changed, 51 insertions(+), 23 deletions(-) create mode 100644 .nvmrc diff --git a/.nvmrc b/.nvmrc new file mode 100644 index 0000000..b6a7d89 --- /dev/null +++ b/.nvmrc @@ -0,0 +1 @@ +16 diff --git a/package-lock.json b/package-lock.json index e8ddfcc..025e168 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "bandcamp-scrobbler", - "version": "1.1.0", + "version": "1.2.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "bandcamp-scrobbler", - "version": "1.1.0", + "version": "1.2.0", "license": "ISC", "dependencies": { "js-md5": "^0.7.3", diff --git a/src/component/Album.js b/src/component/Album.js index 74ffa61..9f84f9d 100644 --- a/src/component/Album.js +++ b/src/component/Album.js @@ -15,6 +15,13 @@ const Album = ({ album, setAlbum, handleScrobble }) => { }); }; + const handleRemove = (index) => () => { + setAlbum({ + ...album, + tracks: album.tracks.filter((_, trackIndex) => trackIndex !== index), + }); + }; + const Track = (track, index) => { return (
@@ -22,6 +29,7 @@ const Album = ({ album, setAlbum, handleScrobble }) => { +
); }; diff --git a/src/manifest.json b/src/manifest.json index 37e1a9c..5c42a3d 100644 --- 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 index c8cd139..40762a5 100644 --- 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 index e86d882..6b66d22 100644 --- a/src/popup.html +++ b/src/popup.html @@ -1,6 +1,7 @@ + diff --git a/src/util/lastfm.js b/src/util/lastfm.js index 8099524..b8524b0 100644 --- 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 = {