Главная Обзор Помощь
Вход
menchauser
/
chad-music
ответвлено от chad-partners/chad-music
1
0
Ответвить 0
Файлы
Просмотр исходного кода

[front] MediaSession API support

Innocenty Enikeew 7 лет назад
Родитель
c4eb869d62
Сommit
0b4a50aefa
4 измененных файлов с 76 добавлено и 9 удалено
Единый вид Показать статистику Diff
  1. 1 1
      front/public/index.html
  2. 2 2
      front/public/manifest.json
  3. 23 6
      front/src/App.js
  4. 50 0
      front/src/MediaSession.js

+ 1 - 1
front/public/index.html
Просмотреть файл 

@@ -19,7 +19,7 @@
 
       work correctly both with client-side routing and a non-root public URL.
 
       work correctly both with client-side routing and a non-root public URL.
 
       Learn how to configure a non-root public URL by running `npm run build`.
 
       Learn how to configure a non-root public URL by running `npm run build`.
 
     -->
 
     -->
 
-    <title>React App</title>
 
+    <title>Chad Music</title>
 
   </head>
 
   </head>
 
   <body>
 
   <body>
 
     <noscript>
 
     <noscript>

+ 2 - 2
front/public/manifest.json
Просмотреть файл 

@@ -1,6 +1,6 @@
 
 {
 
 {
 
-  "short_name": "React App",
 
-  "name": "Create React App Sample",
 
+  "short_name": "Chad Music",
 
+  "name": "Chad Music player",
 
   "icons": [
 
   "icons": [
 
     {
 
     {
 
       "src": "favicon.ico",
 
       "src": "favicon.ico",

+ 23 - 6
front/src/App.js
Просмотреть файл 

@@ -1,5 +1,6 @@
 
 import React, { Component } from 'react';
 
 import React, { Component } from 'react';
 
 import Sound from 'react-sound';
 
 import Sound from 'react-sound';
 
+import MediaSession from './MediaSession.js';
 
 import logo from './logo.svg';
 
 import logo from './logo.svg';
 
 import './App.css';
 
 import './App.css';
 
 
 
@@ -168,7 +169,8 @@ class Player extends Component {
 
       sound: {url: '', playStatus: Sound.status.STOPPED},
 
       sound: {url: '', playStatus: Sound.status.STOPPED},
 
       tracks: null,
 
       tracks: null,
 
       activeTrack: -1,
 
       activeTrack: -1,
 
-      activeAlbum: null
 
+      activeAlbum: null,
 
+      metadata: {artist: '', album: '', title: '', cover: ''}
 
     };
 
     };
 
     for (var {type} of this.categories) {
 
     for (var {type} of this.categories) {
 
       this.state[type] = Object.assign({}, this.stateLoading);
 
       this.state[type] = Object.assign({}, this.stateLoading);
 
@@ -231,11 +233,19 @@ class Player extends Component {
 
         if (!track) {
 
         if (!track) {
 
           console.log('Bad activeTrack', this.state.tracks, this.state.activeTrack);
 
           console.log('Bad activeTrack', this.state.tracks, this.state.activeTrack);
 
         } else {
 
         } else {
 
-          this.setState({sound: {
 
-            url: track.url,
 
-            position: 0,
 
-            playStatus: Sound.status.PLAYING
 
-          }})
 
+          this.setState({
 
+            sound: {
 
+              url: track.url,
 
+              position: 0,
 
+              playStatus: Sound.status.PLAYING
 
+            },
 
+            metadata: {
 
+              title: track.title,
 
+              artist: track.artist,
 
+              album: track.album,
 
+              cover: this.state.activeAlbum.cover
 
+            }
 
+          })
 
         }
 
         }
 
       }
 
       }
 
     }
 
     }
 
@@ -344,6 +354,13 @@ class Player extends Component {
 
           onLoading={this.handleSoundLoading}
 
           onLoading={this.handleSoundLoading}
 
           onPlaying={this.handleSoundPlaying}
 
           onPlaying={this.handleSoundPlaying}
 
           onFinishedPlaying={this.handleSoundFinished} />
 
           onFinishedPlaying={this.handleSoundFinished} />
 
+        <MediaSession
 
+          {...this.state.metadata}
 
+          onPlay={this.handleControlPlayPause}
 
+          onPause={this.handleControlPlayPause}
 
+          onPreviousTrack={this.handleControlPrev}
 
+          onNextTrack={this.handleControlNext}
 
+        />
 
       </div>
 
       </div>
 
     );
 
     );
 
   }
 
   }

+ 50 - 0
front/src/MediaSession.js
Просмотреть файл 

@@ -0,0 +1,50 @@
 
+import React from 'react';
 
+
 
+export default class MediaSession extends React.Component {
 
+  updateMetadata() {
 
+    if (!('mediaSession' in navigator)) {
 
+      return;
 
+    }
 
+    const {title, artist, album, cover} = this.props;
 
+    navigator.mediaSession.metadata = new window.MediaMetadata({title, artist, album, artwork: [{src:cover}]});
 
+  }
 
+  updateEvents() {
 
+    if (!('mediaSession' in navigator)) {
 
+      return;
 
+    }
 
+    const {mediaSession} = navigator;
 
+    const {onPlay, onPause, onSeekBackward, onSeekForward, onPreviousTrack, onNextTrack} = this.props;
 
+
 
+    mediaSession.setActionHandler('play', onPlay);
 
+    mediaSession.setActionHandler('pause', onPause);
 
+    mediaSession.setActionHandler('seekbackward', onSeekBackward);
 
+    mediaSession.setActionHandler('seekforward', onSeekForward);
 
+    mediaSession.setActionHandler('previoustrack', onPreviousTrack);
 
+    mediaSession.setActionHandler('nexttrack', onNextTrack);
 
+  }
 
+  componentDidMount() {
 
+    this.updateMetadata();
 
+    this.updateEvents();
 
+  }
 
+  componentDidUpdate(prevProps) {
 
+    this.updateMetadata();
 
+    this.updateEvents();
 
+  }
 
+  componentWillUnmount() {
 
+    if (!('mediaSession' in navigator)) {
 
+      return;
 
+    }
 
+    const {mediaSession} = navigator;
 
+    mediaSession.metadata = null;
 
+    mediaSession.setActionHandler('play', null);
 
+    mediaSession.setActionHandler('pause', null);
 
+    mediaSession.setActionHandler('seekbackward', null);
 
+    mediaSession.setActionHandler('seekforward', null);
 
+    mediaSession.setActionHandler('previoustrack', null);
 
+    mediaSession.setActionHandler('nexttrack', null);
 
+  }
 
+
 
+  render() {
 
+    return null;
 
+  }
 
+}