Capture playback permission

src/components/syncplay/groupSelectionMenu.js

@@ -7,6 +7,7 @@ import datetime from 'datetime';
 import toast from 'toast';
 import actionsheet from 'actionsheet';
 import globalize from 'globalize';
+import playbackPermissionManager from 'playbackPermissionManager';
 
 /**
  * Gets active player id.
@@ -153,6 +154,16 @@ events.on(syncplayManager, 'SyncplayEnabled', function (e, enabled) {
 export function show(button) {
     loading.show();
 
+    // TODO: should feature be disabled if playback permission is missing?
+    playbackPermissionManager.check().then(() => {
+        console.debug("Playback is allowed.");
+    }).catch((error) => {
+        console.error("Playback not allowed!", error);
+        toast({
+            text: globalize.translate("MessageSyncplayPlaybackPermissionRequired")
+        });
+    });
+
     const apiClient = connectionManager.currentApiClient();
     connectionManager.user(apiClient).then((user) => {
         if (syncplayEnabled) {

src/components/syncplay/playbackPermissionManager.js

@@ -0,0 +1,51 @@
+/**
+ * Creates an audio element that plays a silent sound.
+ * @returns {HTMLMediaElement} The audio element.
+ */
+function createTestMediaElement () {
+
+    const elem = document.createElement('audio');
+    elem.classList.add('testMediaPlayerAudio');
+    elem.classList.add('hide');
+
+    document.body.appendChild(elem);
+
+    elem.volume = 1; // Volume should not be zero to trigger proper permissions
+    elem.src = "assets/audio/silence.wav"; // Silent sound
+
+    return elem;
+}
+
+/**
+ * Destroys a media element.
+ * @param {HTMLMediaElement} elem The element to destroy.
+ */
+function destroyTestMediaElement (elem) {
+    elem.pause();
+    elem.remove();
+}
+
+/**
+ * Class that manages the playback permission.
+ */
+class PlaybackPermissionManager {
+    /**
+     * Tests playback permission. Grabs the permission when called inside a click event (or any other valid user interaction). 
+     * @returns {Promise} Promise that resolves succesfully if playback permission is allowed.
+     */
+    check () {
+        return new Promise((resolve, reject) => {
+            const media = createTestMediaElement();
+            media.play().then(() => {
+                resolve();
+            }).catch((error) => {
+                reject(error);
+            }).finally(() => {
+                destroyTestMediaElement(media);
+            });
+        });
+    }
+}
+
+/** PlaybackPermissionManager singleton. */
+export default new PlaybackPermissionManager();