feat: support media button (#2375)

* feat: media button support

toogle pause, prev song and next song

* fix: replace unformatted quotation marks

Author: scarletborder

src/components/Player.vue

@@ -217,6 +217,13 @@ export default {
         : '';
     },
   },
+  mounted() {
+    this.setupMediaControls();
+    window.addEventListener('keydown', this.handleKeydown);
+  },
+  beforeDestroy() {
+    window.removeEventListener('keydown', this.handleKeydown);
+  },
   methods: {
     ...mapMutations(['toggleLyrics']),
     ...mapActions(['showToast', 'likeATrack']),
@@ -270,6 +277,39 @@ export default {
     mute() {
       this.player.mute();
     },
+
+    setupMediaControls() {
+      if ('mediaSession' in navigator) {
+        navigator.mediaSession.setActionHandler('play', () => {
+          this.playOrPause();
+        });
+        navigator.mediaSession.setActionHandler('pause', () => {
+          this.playOrPause();
+        });
+        navigator.mediaSession.setActionHandler('previoustrack', () => {
+          this.playPrevTrack();
+        });
+        navigator.mediaSession.setActionHandler('nexttrack', () => {
+          this.playNextTrack();
+        });
+      }
+    },
+
+    handleKeydown(event) {
+      switch (event.code) {
+        case 'MediaPlayPause':
+          this.playOrPause();
+          break;
+        case 'MediaTrackPrevious':
+          this.playPrevTrack();
+          break;
+        case 'MediaTrackNext':
+          this.playNextTrack();
+          break;
+        default:
+          break;
+      }
+    },
   },
 };
 </script>