Polyfill HTMLMediaElement.play

Return a `Promise` to match the new standard.

src/components/htmlMediaHelper.js

@@ -197,28 +197,21 @@ import { Events } from 'jellyfin-apiclient';
 
     export function playWithPromise(elem, onErrorFn) {
         try {
-            const promise = elem.play();
+            return elem.play()
-            if (promise && promise.then) {
+                .catch((e) => {
-                // Chrome now returns a promise
+                    const errorName = (e.name || '').toLowerCase();
-                return promise
+                    // safari uses aborterror
-                    .catch((e) => {
+                    if (errorName === 'notallowederror' ||
-                        const errorName = (e.name || '').toLowerCase();
+                        errorName === 'aborterror') {
-                        // safari uses aborterror
+                        // swallow this error because the user can still click the play button on the video element
-                        if (errorName === 'notallowederror' ||
-                            errorName === 'aborterror') {
-                            // swallow this error because the user can still click the play button on the video element
-                            return Promise.resolve();
-                        }
-                        return Promise.reject();
-                    })
-                    .then(() => {
-                        onSuccessfulPlay(elem, onErrorFn);
                         return Promise.resolve();
-                    });
+                    }
-            } else {
+                    return Promise.reject();
-                onSuccessfulPlay(elem, onErrorFn);
+                })
-                return Promise.resolve();
+                .then(() => {
-            }
+                    onSuccessfulPlay(elem, onErrorFn);
+                    return Promise.resolve();
+                });
         } catch (err) {
             console.error('error calling video.play: ' + err);
             return Promise.reject();

src/legacy/htmlMediaElement.js

@@ -0,0 +1,26 @@
+/**
+ * Polyfill for HTMLMediaElement
+ * - HTMLMediaElement.play
+ *   Return a `Promise`.
+ */
+
+(function (HTMLMediaElement) {
+    'use strict';
+
+    const HTMLMediaElement_proto = HTMLMediaElement.prototype;
+    const real_play = HTMLMediaElement_proto.play;
+
+    HTMLMediaElement_proto.play = function () {
+        try {
+            const promise = real_play.apply(this, arguments);
+
+            if (typeof promise?.then === 'function') {
+                return promise;
+            }
+
+            return Promise.resolve();
+        } catch (err) {
+            return Promise.reject(err);
+        }
+    };
+}(HTMLMediaElement));

src/scripts/site.js

@@ -31,6 +31,7 @@ import './serverNotifications';
 import '../components/playback/playerSelectionMenu';
 import '../legacy/domParserTextHtml';
 import '../legacy/focusPreventScroll';
+import '../legacy/htmlMediaElement';
 import '../legacy/vendorStyles';
 import SyncPlay from '../components/syncPlay/core';
 import { playbackManager } from '../components/playback/playbackmanager';