feat: seek back/forward (#476)

* feat: seak back&forward
update: axios
update: GitHub Action flow

* update: eslint

* remove github query

* reorganize func

.eslintrc.json

@@ -1,4 +1,7 @@
 {
+    "parserOptions": {
+        "ecmaVersion": 11
+    },
     "extends": [
         "airbnb-base",
         "prettier"

.github/workflows/eslint.yml

@@ -2,35 +2,22 @@ name: ESLint
 
 on:
   push:
-    branches: [ master ]
+    branches: [master]
   pull_request:
-    branches: [ master ]
+    branches: [master]
 
 jobs:
   build:
-
     runs-on: ubuntu-latest
 
     steps:
-    - uses: actions/checkout@v2
-    - uses: actions/setup-node@v1
-      with:
-        node-version: 14
-
-    - name: Restore node_modules Cache
-      uses: actions/cache@v2
-      env:
-        cache-name: cache-node-modules
-      with:
-        # npm cache files are stored in `~/.npm` on Linux/macOS
-        path: ~/.npm
-        key: eslint-${{ env.cache-name }}-${{ hashFiles('package-lock.json') }}
-        restore-keys: |
-          eslint-${{ env.cache-name }}-
-          eslint-
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: 15
 
-    - name: Install Dependencies
-      run: npm i
+      - name: Install Dependencies
+        run: npm ci
 
-    - name: Run ESLint
-      run: npx eslint .
+      - name: Run ESLint
+        run: npx eslint .

js/github_api.js

@@ -74,9 +74,13 @@ function github() {
 
     api: (apiPath, cb) => {
       const access_token = localStorage.getObject('githubOauthAccessKey') || '';
-      const url = `${API_URL}${apiPath}?access_token=${access_token}`;
-      request.get(url).then((response) => {
-        cb(response.data);
+      const url = `${API_URL}${apiPath}`;
+      fetch(url, {
+        headers: {
+          Authorization: `token ${access_token}`,
+        },
+      }).then(async (resp) => {
+        cb(await resp.json());
       });
     },
 

js/player_thread.js

@@ -16,6 +16,7 @@
       this._media_uri_list = {};
       this.playedFrom = 0;
       this.mode = 'background';
+      this.skipTime = 15;
     }
 
     setMode(newMode) {
@@ -171,7 +172,9 @@
           html5: true, // Force to HTML5 so that the audio can stream in (best for large files).
           onplay() {
             if ('mediaSession' in navigator) {
-              navigator.mediaSession.metadata = new MediaMetadata({
+              const { mediaSession } = navigator;
+              mediaSession.playbackState = 'playing';
+              mediaSession.metadata = new MediaMetadata({
                 title: self.currentAudio.title,
                 artist: self.currentAudio.artist,
                 album: `Listen1  •  ${(
@@ -213,6 +216,7 @@
             self.sendFullUpdate();
           },
           onpause() {
+            navigator.mediaSession.playbackState = 'paused';
             self.sendPlayingEvent('Paused');
             self.sendFullUpdate();
           },
@@ -484,15 +488,38 @@
   window.threadPlayer = new Player();
   window.threadPlayer.setRefreshRate();
   window.threadPlayer.sendFullUpdate();
+
+  const { threadPlayer } = window;
+  const { mediaSession } = navigator;
   // TODO: enable after the play url retrieve logic moved to bg
-  navigator.mediaSession.setActionHandler('play', () => {
-    window.threadPlayer.play();
+  mediaSession?.setActionHandler('play', () => {
+    threadPlayer.play();
+  });
+  mediaSession?.setActionHandler('pause', () => {
+    threadPlayer.pause();
+  });
+  mediaSession?.setActionHandler('seekforward', () => {
+    // User clicked "Seek Forward" media notification icon.
+    const { currentHowl } = threadPlayer;
+    const newTime = Math.min(
+      currentHowl.seek() + threadPlayer.skipTime,
+      currentHowl.duration()
+    );
+    currentHowl.seek(newTime);
+  });
+
+  mediaSession?.setActionHandler('seekbackward', () => {
+    // User clicked "Seek Backward" media notification icon.
+    const { currentHowl } = threadPlayer;
+    const newTime = Math.max(currentHowl.seek() - threadPlayer.skipTime, 0);
+    currentHowl.seek(newTime);
+  });
+  mediaSession?.setActionHandler('nexttrack', () => {
+    threadPlayer.skip('next');
   });
-  navigator.mediaSession.setActionHandler('pause', () => {
-    window.threadPlayer.pause();
+  mediaSession?.setActionHandler('previoustrack', () => {
+    threadPlayer.skip('prev');
   });
-  // navigator.mediaSession.setActionHandler('nexttrack', () => window.player.skip('next'));
-  // navigator.mediaSession.setActionHandler('previoustrack', () => window.player.skip('prev'));
   playerSendMessage(this.mode, {
     type: 'BG_PLAYER:READY',
   });