- Added feedback when fetching metadata

Liinkiing · Liinkiing · commit a95ef5751b52 · 2021-05-06T07:49:14.000+02:00
diff --git a/package.json b/package.json
@@ -64,6 +64,7 @@
     "webpack": "4.41.0",
     "webpack-cli": "^3.3.10",
     "webpack-extension-reloader": "^1.1.4",
+    "concurrently": "^6.0.2",
     "webpack-merge": "^4.2.2"
   },
   "dependencies": {
diff --git a/src/@types/events.d.ts b/src/@types/events.d.ts
@@ -5,6 +5,8 @@ export type RuntimeMessage =
   | { type: 'ON_BG_RECORDING_START' }
   | { type: 'ON_BG_RECORDING_STOP'; payload: { match: LocalSong | null } }
   | { type: 'INIT_RECORDING' }
+  | { type: 'START_FETCHING_METADATA' }
+  | { type: 'STOP_FETCHING_METADATA' }
   | { type: 'STOP_RECORDING' }
   | { type: 'MATCH_FOUND'; payload: { match: Song } }
   | { type: 'NO_MATCH_FOUND' }
diff --git a/src/popup/PopupApp.tsx b/src/popup/PopupApp.tsx
@@ -7,7 +7,7 @@ import { observer } from 'mobx-react-lite'
 import useStores from '~popup/hooks/useStores'
 import SearchButton from '~popup/components/search-button'
 import AppButton from '~popup/components/ui/AppButton'
-import { FiSun, FiMoon, FiList } from 'react-icons/fi'
+import { FiList, FiMoon, FiSun } from 'react-icons/fi'
 import AppToolbar from '~popup/components/AppToolbar'
 import HistoryView from '~popup/views/history-view'
 import useChromeOnMessage from '~popup/hooks/useChromeOnMessage'
@@ -25,14 +25,16 @@ const PopupApp: React.FC<Props> = () => {
       requestRecording,
       stopRecording,
       markUnreadAsRead,
+      fetchingMetadatas,
       recording,
       hasUnreadMatches
     },
     app: { clearBadge, toggleTheme, theme }
   } = useStores()
   const onClick = useCallback(() => {
+    if (fetchingMetadatas) return
     recording ? stopRecording() : requestRecording()
-  }, [recording])
+  }, [recording, fetchingMetadatas])
   const [showHistory, setShowHistory] = useState(false)
   useChromeOnMessage(
     'MATCH_FOUND',
@@ -76,7 +78,11 @@ const PopupApp: React.FC<Props> = () => {
               setShowHistory(history => !history)
             }}
           />
-          <SearchButton recording={recording} onClick={onClick} />
+          <SearchButton
+            fetchingMetadatas={fetchingMetadatas}
+            recording={recording}
+            onClick={onClick}
+          />
           <MainAppToolbar>
             <AppButton
               onClick={() => {
diff --git a/src/popup/components/search-button/index.tsx b/src/popup/components/search-button/index.tsx
@@ -5,17 +5,27 @@ import { HTMLMotionProps } from 'framer-motion'
 
 interface Props extends HTMLMotionProps<'div'> {
   readonly recording: boolean
+  readonly fetchingMetadatas: boolean
 }
 
-const SearchButton: React.FC<Props> = ({ recording, ...props }) => {
+const SearchButton: React.FC<Props> = ({
+  recording,
+  fetchingMetadatas,
+  ...props
+}) => {
   return (
     <SearchButtonInner
+      disabled={fetchingMetadatas}
       recording={recording}
       {...props}
       initial={recording ? 'recording' : 'initial'}
       animate={recording ? 'recording' : 'initial'}
       variants={variants.SearchButtonInner}>
-      {recording ? 'Stop' : 'Record'}
+      {fetchingMetadatas
+        ? 'Fetching metadata...'
+        : recording
+        ? 'Stop'
+        : 'Record'}
     </SearchButtonInner>
   )
 }
diff --git a/src/popup/components/search-button/styled.ts b/src/popup/components/search-button/styled.ts
@@ -8,8 +8,8 @@ export const SearchButtonInner = styled(motion.div).attrs<{
   recording: boolean
 }>(props => ({
   className: props.recording ? 'is-recording' : null
-}))<{ recording: boolean }>`
-  transition: all 0.3s;
+}))<{ recording: boolean; disabled: boolean }>`
+  transition: all 0.3s, font-size 0s;
   align-items: center;
   background: ${props => theme(props).colors.primary};
   box-shadow: 0 5px 6px rgba(0, 0, 0, 0.18), 0 10px 20px rgba(0, 0, 0, 0.07);
@@ -35,4 +35,11 @@ export const SearchButtonInner = styled(motion.div).attrs<{
     css`
       animation: ${blink} 0.5s infinite alternate;
     `}
+  ${props =>
+    props.disabled &&
+    css`
+      font-size: 16px;
+      opacity: 0.4;
+      pointer-events: none;
+    `}
 `
diff --git a/src/popup/stores/SongStore.ts b/src/popup/stores/SongStore.ts
@@ -17,6 +17,7 @@ export const SONG_STORAGE_KEY = 'song-store'
 export class SongStore {
   public history = observable.array<LocalSong>([], { deep: false })
 
+  @observable public fetchingMetadatas = false
   @observable public recording =
     chrome.extension.getBackgroundPage()?.recorder.isRecording || false
 
@@ -26,10 +27,19 @@ export class SongStore {
       StorageHelper.set(SONG_STORAGE_KEY, this.serialized)
     })
     chrome.runtime.onMessage.addListener(message => {
-      if (message.type === 'STOP_RECORDING') {
-        this.recording = false
-      } else if (message.type === 'MATCH_FOUND') {
-        this.populateFromStorage()
+      switch (message.type) {
+        case 'START_FETCHING_METADATA':
+          this.fetchingMetadatas = true
+          break
+        case 'STOP_FETCHING_METADATA':
+          this.fetchingMetadatas = false
+          break
+        case 'STOP_RECORDING':
+          this.recording = false
+          break
+        case 'MATCH_FOUND':
+          this.populateFromStorage()
+          break
       }
     })
   }
diff --git a/src/services/AudioRecorder.ts b/src/services/AudioRecorder.ts
@@ -93,55 +93,66 @@ export class AudioRecorder {
             : null
           : null
         if (match) {
-          const html = await (
-            await fetch(`https://www.aha-music.com/${match.acr_id}`)
-          ).text()
-          const parser = new ACRPageParser(html)
-          match.spotify_id = parser.getSpotifyId()
-          match.youtube_id = parser.getYoutubeId()
-          match.deezer_id = parser.getDeezerId()
           let thumbnail: string | null = null
           let title: string | null = null
           try {
+            chrome.runtime.sendMessage({
+              type: 'START_FETCHING_METADATA'
+            })
+            const html = await (
+              await fetch(`https://www.aha-music.com/${match.acr_id}`)
+            ).text()
+            const parser = new ACRPageParser(html)
+            match.spotify_id = parser.getSpotifyId()
+            match.youtube_id = parser.getYoutubeId()
+            match.deezer_id = parser.getDeezerId()
             if (match.spotify_id) {
               const response = await SpotifyOEmbedClient.oembed(
                 match.spotify_id
               )
               thumbnail = response.thumbnail_url
               title = response.title
             }
-          } catch {
+            chrome.runtime.sendMessage({
+              type: 'STOP_FETCHING_METADATA'
+            })
+            const entry = this.buildLocalMatch({ match, thumbnail, title })
+            StorageHelper.get<SongSerializedState>(SONG_STORAGE_KEY).then(
+              state => {
+                StorageHelper.set<SongSerializedState>(SONG_STORAGE_KEY, {
+                  history: [entry, ...state.history.slice(0, MAX_MATCHES_ENTRY)]
+                }).then(() => {
+                  if (
+                    chrome.extension.getViews({ type: 'popup' }).length === 0
+                  ) {
+                    window.unreadMatches++
+                    chrome.browserAction.setBadgeText({
+                      text: window.unreadMatches.toString()
+                    })
+                    chrome.tabs.sendMessage(tabs[0].id!, {
+                      type: 'ON_BG_RECORDING_STOP',
+                      payload: { match: entry }
+                    })
+                  }
+                  chrome.runtime.sendMessage({
+                    type: 'MATCH_FOUND',
+                    payload: {
+                      match: entry
+                    }
+                  })
+                })
+              }
+            )
+          } catch (e) {
+            chrome.runtime.sendMessage({
+              type: 'STOP_FETCHING_METADATA'
+            })
             console.log(
               'An error occured while fetching informations from Spotify'
             )
             thumbnail = null
             title = null
           }
-          const entry = this.buildLocalMatch({ match, thumbnail, title })
-          StorageHelper.get<SongSerializedState>(SONG_STORAGE_KEY).then(
-            state => {
-              StorageHelper.set<SongSerializedState>(SONG_STORAGE_KEY, {
-                history: [entry, ...state.history.slice(0, MAX_MATCHES_ENTRY)]
-              }).then(() => {
-                if (chrome.extension.getViews({ type: 'popup' }).length === 0) {
-                  window.unreadMatches++
-                  chrome.browserAction.setBadgeText({
-                    text: window.unreadMatches.toString()
-                  })
-                  chrome.tabs.sendMessage(tabs[0].id!, {
-                    type: 'ON_BG_RECORDING_STOP',
-                    payload: { match: entry }
-                  })
-                }
-                chrome.runtime.sendMessage({
-                  type: 'MATCH_FOUND',
-                  payload: {
-                    match: entry
-                  }
-                })
-              })
-            }
-          )
         } else {
           if (chrome.extension.getViews({ type: 'popup' }).length === 0) {
             chrome.tabs.sendMessage(tabs[0].id!, {
diff --git a/yarn.lock b/yarn.lock
