feat(UI): Add enableVrDeviceMotion config (#9303)

ui/externs/ui.js

@@ -228,6 +228,7 @@ shaka.extern.UIShortcuts;
  *   menuOpenUntilUserClosesIt: boolean,
  *   allowTogglePresentationTime: boolean,
  *   showRemainingTimeInPresentationTime: boolean,
+ *   enableVrDeviceMotion: boolean,
  * }}
  *
  * @property {!Array<string>} controlPanelElements
@@ -483,6 +484,11 @@ shaka.extern.UIShortcuts;
  *   Show remaining time of presentation time by default, when playing a VOD.
  *   <br>
  *   Defaults to <code>false</code>.
+ * @property {boolean} enableVrDeviceMotion
+ *   Enables or disables the device motion for VR videos.
+ *   <br>
+ *   Defaults to <code>true</code> except on Vision OS where the default value
+ *   is <code>false</code>
  * @exportDoc
  */
 shaka.extern.UIConfiguration;

ui/ui.js

@@ -419,6 +419,7 @@ shaka.ui.Overlay = class {
       menuOpenUntilUserClosesIt: true,
       allowTogglePresentationTime: true,
       showRemainingTimeInPresentationTime: false,
+      enableVrDeviceMotion: true,
     };
 
     // On mobile, by default, hide the volume slide and the small play/pause
@@ -477,6 +478,11 @@ shaka.ui.Overlay = class {
           (name) => !filterElements.includes(name));
     }
 
+    const device = shaka.device.DeviceFactory.getDevice();
+    if (device.getDeviceType() == shaka.device.IDevice.DeviceType.APPLE_VR) {
+      config.enableVrDeviceMotion = false;
+    }
+
     return config;
   }
 

ui/vr_manager.js

@@ -467,8 +467,8 @@ shaka.ui.VRManager = class extends shaka.util.FakeEventTarget {
     }
 
     // Detect device movement
-    let deviceOrientationListener = false;
-    if (window.DeviceOrientationEvent) {
+    if (this.config_.enableVrDeviceMotion && window.DeviceOrientationEvent) {
+      let deviceOrientationListener = false;
       // See: https://dev.to/li/how-to-requestpermission-for-devicemotion-and-deviceorientation-events-in-ios-13-46g2
       if (typeof DeviceMotionEvent.requestPermission == 'function') {
         const userGestureListener = () => {