Added MediaSession support (notification controls on mobile)

js/webui/src/index.html

@@ -11,4 +11,7 @@
   <div id="app-container"></div>
   <div id="notification-container"></div>
 </body>
+<audio id="silence" loop>
+  <source src="/5-seconds-of-silence.mp3" type="audio/mp3" />
+</audio>
 </html>

js/webui/src/index.js

@@ -15,6 +15,7 @@ import urls, { getPathFromUrl } from './urls'
 import { playlistTableKey } from './playlist_content';
 import { PlaybackState } from 'beefweb-client/src';
 import { SettingsView, View } from './navigation_model';
+import MediaSessionController from './mediasession_controller';
 
 const client = new PlayerClient(new RequestHandler());
 const settingsStore = new SettingsStore();
@@ -34,6 +35,7 @@ const touchModeController = new TouchModeController(settingsModel);
 const cssSettingsController = new CssSettingsController(settingsModel);
 const windowController = new WindowController(playerModel);
 const router = new Navigo(null, true);
+const mediaSessionController = new MediaSessionController(client, playerModel);
 
 router.on({
     '/': () => {
@@ -135,6 +137,7 @@ touchModeController.start();
 cssSettingsController.start();
 appModel.start();
 windowController.start();
+mediaSessionController.start();
 router.resolve();
 
 const appComponent = (

js/webui/src/mediasession_controller.js

@@ -0,0 +1,78 @@
+import DataSource from "./data_source";
+import PlayerModel from "./player_model";
+import silenceMp3 from "./5-seconds-of-silence.mp3";
+
+export default class MediaSessionController {
+  /**
+   * @param {any} client
+   * @param {PlayerModel} playerModel
+   */
+  constructor(client, playerModel) {
+    this.dataSource = new DataSource(client);
+    this.playerModel = playerModel;
+  }
+
+  start() {
+    if (!"mediaSession" in navigator) {
+      return;
+    }
+
+    navigator.mediaSession.setActionHandler("play", () =>
+      this.playerModel.play()
+    );
+    navigator.mediaSession.setActionHandler("pause", () =>
+      this.playerModel.pause()
+    );
+    navigator.mediaSession.setActionHandler("previoustrack", () =>
+      this.playerModel.previous()
+    );
+    navigator.mediaSession.setActionHandler("nexttrack", () =>
+      this.playerModel.next()
+    );
+
+    this.dataSource.on("player", (player) => this.updateMetadata(player));
+    this.dataSource.watch("player", {
+      trcolumns: ["%artist%", "%album%", "%title%"],
+    });
+
+    this.playerModel.on("change", () => this.updatePlaybackState());
+
+    this.updatePlaybackState();
+    this.dataSource.start();
+  }
+
+  updatePlaybackState() {
+    const playbackStateMap = {
+      playing: "playing",
+      paused: "paused",
+      stopped: "none",
+    };
+
+    const audioElement = document.getElementById("silence");
+
+    switch (this.playerModel.playbackState) {
+      case "playing":
+        audioElement.play();
+        break;
+      case "paused":
+        audioElement.pause();
+        break;
+      default:
+        break;
+    }
+
+    navigator.mediaSession.playbackState =
+      playbackStateMap[this.playerModel.playbackState];
+  }
+
+  updateMetadata(player) {
+    const { activeItem } = player;
+    const [artist, album, title] = activeItem.columns;
+
+    navigator.mediaSession.metadata = new MediaMetadata({
+      artist,
+      album,
+      title,
+    });
+  }
+}

js/webui/webpack.config.js

@@ -21,13 +21,25 @@ function configCommon(config, params)
     });
 
     config.module.rules.push({
-        test: /(\.svg|\.png)$/,
+        test: /(\.svg|\.png|\.mp3)$/,
         loader: 'url-loader',
         options: {
             name: '[name].[ext]',
             limit: 1024
         }
     });
+
+    config.optimization = {
+        splitChunks: {
+            cacheGroups: {
+                commons: {
+                    test: /[\\/]node_modules[\\/]/,
+                    name: 'vendors',
+                    chunks: 'all'
+                }
+            }
+        }
+    }
 }
 
 function configApp(config, params)