fix: refactor fullscreen-api and state mediator to make fewer assumpt…

…ions on env-specific divergences. Fixes bug in modern Safari iOS fullscreen.

src/js/media-store/state-mediator.js

@@ -889,6 +889,7 @@ export const stateMediator = {
   },
   mediaIsFullscreen: {
     get(stateOwners) {
+      console.log('mediaIsFullscreen.get()');
       const { media, documentElement, fullscreenElement = media } = stateOwners;
 
       // Need a documentElement and a media StateOwner to be in fullscreen, so we're not fullscreen
@@ -981,9 +982,9 @@ export const stateMediator = {
         media.requestFullscreen();
       }
     },
-    rootEvents: fullscreenApi.rootEvents,
+    rootEvents: ['fullscreenchange', 'webkitfullscreenchange'],
     // iOS requires `webkitbeginfullscreen` and `webkitendfullscreen` events on the video.
-    mediaEvents: fullscreenApi.mediaEvents,
+    mediaEvents: ['webkitbeginfullscreen', 'webkitendfullscreen', 'webkitpresentationmodechanged']
   },
   mediaIsCasting: {
     // Note this relies on a customized castable-video element.

src/js/utils/fullscreen-api.js

@@ -1,27 +1,36 @@
 import { document } from './server-safe-globals.js';
 
 export const fullscreenApi = {
-  enter: 'requestFullscreen',
-  exit: 'exitFullscreen',
-  rootEvents: ['fullscreenchange'],
-  mediaEvents: [],
-  element: 'fullscreenElement',
-  error: 'fullscreenerror',
-  enabled: 'fullscreenEnabled',
-};
-
-if (document.fullscreenElement === undefined) {
-  fullscreenApi.enter = 'webkitRequestFullScreen';
-  fullscreenApi.exit =
-    document.webkitExitFullscreen != null
+  enter:
+    'requestFullscreen' in document
+      ? 'requestFullscreen'
+      : 'webkitRequestFullScreen' in document
+      ? 'webkitRequestFullScreen'
+      : undefined,
+  exit:
+    'exitFullscreen' in document
+      ? 'exitFullscreen'
+      : 'webkitExitFullscreen' in document
       ? 'webkitExitFullscreen'
-      : 'webkitCancelFullScreen';
-  fullscreenApi.rootEvents = ['webkitfullscreenchange'];
-  (fullscreenApi.mediaEvents = [
-    'webkitbeginfullscreen',
-    'webkitendfullscreen',
-  ]),
-    (fullscreenApi.element = 'webkitFullscreenElement');
-  fullscreenApi.error = 'webkitfullscreenerror';
-  fullscreenApi.enabled = 'webkitFullscreenEnabled';
-}
+      : 'webkitCancelFullScreen' in document
+      ? 'webkitCancelFullScreen'
+      : undefined,
+  element:
+    'fullscreenElement' in document
+      ? 'fullscreenElement'
+      : 'webkitFullscreenElement' in document
+      ? 'webkitFullscreenElement'
+      : undefined,
+  error:
+    'fullscreenerror' in document
+      ? 'fullscreenerror'
+      : 'webkitfullscreenerror' in document
+      ? 'webkitfullscreenerror'
+      : undefined,
+  enabled:
+    'fullscreenEnabled' in document
+      ? 'fullscreenEnabled'
+      : 'webkitFullscreenEnabled' in document
+      ? 'webkitFullscreenEnabled'
+      : undefined,
+};