@gcorevideo/player 2.28.25 → 2.28.26

package/src/plugins/video360/Video360.js

@@ -1,123 +1,135 @@
-import { UICorePlugin, Events, Browser, template } from '@clappr/core';
-import * as THREE from 'three';
-import WebVRPolyfill from 'webvr-polyfill';
-import * as utils from './utils';
-import OrbitOrientationControls from './orbit-oriention-controls';
-import pluginHtml from './public/button.ejs';
-import './public/style.scss';
-import cardBoard from '../../icons/old/cardboard.svg';
-
-import { isFullscreen } from '../../utils/utils';
-import LogManager from '../../utils/LogManager';
-import { VRControls } from './VRControls';
-import { VREffect } from './VREffect';
+import { UICorePlugin, Events, Browser, template } from '@clappr/core'
+import * as THREE from 'three'
+import WebVRPolyfill from 'webvr-polyfill'
+import * as utils from './utils'
+import OrbitOrientationControls from './orbit-oriention-controls'
+import pluginHtml from './public/button.ejs'
+import './public/style.scss'
+import cardBoard from '../../icons/old/cardboard.svg'
+
+import { isFullscreen } from '../../utils/utils'
+import LogManager from '../../utils/LogManager'
+import { VRControls } from './VRControls'
+import { VREffect } from './VREffect'
 
 export default class Video360 extends UICorePlugin {
   get name() {
-    return 'video_360';
+    return 'video_360'
   }
 
   get supportedVersion() {
-    return { min: process.env.CLAPPR_VERSION };
+    return { min: process.env.CLAPPR_VERSION }
   }
 
   get mediaControl() {
-    return this.core.mediaControl;
+    return this.core.mediaControl
   }
 
   get attributes() {
     return {
-      'class': this.name,
-      'data-vr': ''
-    };
+      class: this.name,
+      'data-vr': '',
+    }
   }
 
   get events() {
     return {
       'click [data-vr-button]': 'onVRChanged',
-    };
+    }
   }
 
   constructor(...args) {
-    super(...args);
+    super(...args)
     // custom videojs-errors integration boolean
 
     // IE 11 does not support enough webgl to be supported
     // older safari does not support cors, so it wont work
     if (Browser.isIE || Browser.isIE || !utils.corsSupport) {
-      console.error('There isn\'t vr');
-      this.destroy();
+      console.error("There isn't vr")
+      this.destroy()
 
-      return;
+      return
     }
 
-    this.active_ = false;
+    this.active_ = false
 
-    this.polyfill_ = new WebVRPolyfill();
+    this.polyfill_ = new WebVRPolyfill()
 
-    this.handleResize = this.handleResize.bind(this);
-    this.handleVrDisplayActivate_ = this.handleVrDisplayActivate_.bind(this);
-    this.handleVrDisplayDeactivate_ = this.handleVrDisplayDeactivate_.bind(this);
-    this.handleVrDisplayPresentChange_ = this.handleVrDisplayPresentChange_.bind(this);
-    this.animate_ = this.animate_.bind(this);
+    this.handleResize = this.handleResize.bind(this)
+    this.handleVrDisplayActivate_ = this.handleVrDisplayActivate_.bind(this)
+    this.handleVrDisplayDeactivate_ = this.handleVrDisplayDeactivate_.bind(this)
+    this.handleVrDisplayPresentChange_ =
+      this.handleVrDisplayPresentChange_.bind(this)
+    this.animate_ = this.animate_.bind(this)
   }
 
   handleResize() {
     if (!this.container) {
-      return;
+      return
     }
-    const width = this.container.$el.width();
-    const height = this.container.$el.height();
+    const width = this.container.$el.width()
+    const height = this.container.$el.height()
 
-    this.effect && this.effect.setSize(width, height, false);
+    this.effect && this.effect.setSize(width, height, false)
     if (this.camera) {
-      this.camera.aspect = width / height;
-      this.camera.updateProjectionMatrix();
+      this.camera.aspect = width / height
+      this.camera.updateProjectionMatrix()
     }
-    this.checkFullscreen();
+    this.checkFullscreen()
   }
 
   animate_() {
     if (!this.initialized_) {
-      return;
+      return
     }
     try {
-      if (!this.activated && this.getVideoEl_() && this.getVideoEl_().readyState === 4) {
-        this.activated = true;
+      if (
+        !this.activated &&
+        this.getVideoEl_() &&
+        this.getVideoEl_().readyState === 4
+      ) {
+        this.activated = true
 
-        return;
+        return
       }
-      if (this.getVideoEl_() && this.getVideoEl_().readyState === this.getVideoEl_().HAVE_ENOUGH_DATA) {
+      if (
+        this.getVideoEl_() &&
+        this.getVideoEl_().readyState === this.getVideoEl_().HAVE_ENOUGH_DATA
+      ) {
         if (this.videoTexture) {
-          this.videoTexture.needsUpdate = true;
+          this.videoTexture.needsUpdate = true
         }
       }
     } catch (error) {
-      LogManager.exception(error);
+      LogManager.exception(error)
     }
 
     if (this.controls3d) {
-      this.controls3d.update();
+      this.controls3d.update()
     }
 
-    this.effect.render(this.scene, this.camera);
+    this.effect.render(this.scene, this.camera)
 
     if (window.navigator.getGamepads) {
       // Grab all gamepads
-      const gamepads = window.navigator.getGamepads();
+      const gamepads = window.navigator.getGamepads()
 
       for (let i = 0; i < gamepads.length; ++i) {
-        const gamepad = gamepads[i];
+        const gamepad = gamepads[i]
 
         // Make sure gamepad is defined
         // Only take input if state has changed since we checked last
-        if (!gamepad || !gamepad.timestamp || gamepad.timestamp === this.prevTimestamps_[i]) {
-          continue;
+        if (
+          !gamepad ||
+          !gamepad.timestamp ||
+          gamepad.timestamp === this.prevTimestamps_[i]
+        ) {
+          continue
         }
         for (let j = 0; j < gamepad.buttons.length; ++j) {
           if (gamepad.buttons[j].pressed) {
-            this.prevTimestamps_[i] = gamepad.timestamp;
-            break;
+            this.prevTimestamps_[i] = gamepad.timestamp
+            break
           }
         }
       }
@@ -125,66 +137,81 @@ export default class Video360 extends UICorePlugin {
   }
 
   bindEvents() {
-    this.listenToOnce(this.core, Events.CORE_READY, this.onCoreReady);
+    this.listenToOnce(this.core, Events.CORE_READY, this.onCoreReady)
 
     if (this.core.mediaControl) {
-      this.listenTo(this.core.mediaControl, Events.MEDIACONTROL_RENDERED, this.render);
-      this.listenTo(this.core.mediaControl, Events.MEDIACONTROL_CONTAINERCHANGED, this.containerChanged.bind(this));
+      this.listenTo(
+        this.core.mediaControl,
+        Events.MEDIACONTROL_RENDERED,
+        this.render,
+      )
+      this.listenTo(
+        this.core.mediaControl,
+        Events.MEDIACONTROL_CONTAINERCHANGED,
+        this.containerChanged.bind(this),
+      )
     }
 
-    this.listenTo(this.core, 'core:advertisement:start', this.onStartAd);
-    this.listenTo(this.core, 'core:advertisement:finish', this.onFinishAd);
-    this.listenTo(this.core, Events.CORE_RESIZE, this.handleResize);
+    this.listenTo(this.core, 'core:advertisement:start', this.onStartAd)
+    this.listenTo(this.core, 'core:advertisement:finish', this.onFinishAd)
+    this.listenTo(this.core, Events.CORE_RESIZE, this.handleResize)
   }
 
   bindContainerEvents() {
     if (this.container) {
-      this.listenTo(this.container, 'container:destroyed', this.destroy);
+      this.listenTo(this.container, 'container:destroyed', this.destroy)
       this.listenTo(this.container, Events.CONTAINER_LOADEDMETADATA, () => {
-        this.loadMetadata = true;
-      });
-      this.listenTo(this.container, Events.CONTAINER_LOADEDMETADATA, this.init);
+        this.loadMetadata = true
+      })
+      this.listenTo(this.container, Events.CONTAINER_LOADEDMETADATA, this.init)
       this.listenTo(this.container, Events.CONTAINER_STOP, () => {
-        this.loadMetadata = false;
-      });
-      this.listenTo(this.container, Events.CONTAINER_STOP, this.reset);
-      this.listenTo(this.container, Events.CONTAINER_FULLSCREEN, this.onFullscreenChange);
+        this.loadMetadata = false
+      })
+      this.listenTo(this.container, Events.CONTAINER_STOP, this.reset)
+      this.listenTo(
+        this.container,
+        Events.CONTAINER_FULLSCREEN,
+        this.onFullscreenChange,
+      )
     }
   }
 
   unbindContainerEvents() {
     if (this.container) {
-      this.stopListening(this.container, 'container:destroyed');
-      this.stopListening(this.container, Events.CONTAINER_LOADEDMETADATA);
-      this.stopListening(this.container, Events.CONTAINER_STOP);
-      this.stopListening(this.container, Events.CONTAINER_FULLSCREEN);
+      this.stopListening(this.container, 'container:destroyed')
+      this.stopListening(this.container, Events.CONTAINER_LOADEDMETADATA)
+      this.stopListening(this.container, Events.CONTAINER_STOP)
+      this.stopListening(this.container, Events.CONTAINER_FULLSCREEN)
     }
   }
 
   onCoreReady() {
-    const element = this.findElementBySource(this.options.source);
+    const element = this.findElementBySource(this.options.source)
 
     if (!this.options.video360) {
-      this.options.video360 = {};
+      this.options.video360 = {}
     }
-    this.options.video360.projection = element.projection;
-    this.container = this.core.activeContainer;
-    if (window.DeviceOrientationEvent && typeof DeviceOrientationEvent.requestPermission === 'function') {
+    this.options.video360.projection = element.projection
+    this.container = this.core.activeContainer
+    if (
+      window.DeviceOrientationEvent &&
+      typeof DeviceOrientationEvent.requestPermission === 'function'
+    ) {
       if (this.container && this.container.$el) {
         this.container.$el.click(() => {
           DeviceOrientationEvent.requestPermission()
             .then(() => {})
             .catch((error) => {
-              LogManager.exception(error);
-            });
-        });
+              LogManager.exception(error)
+            })
+        })
       }
     }
   }
 
   containerChanged() {
-    this.container = this.core.activeContainer;
-    const element = this.findElementBySource(this.options.source);
+    this.container = this.core.activeContainer
+    const element = this.findElementBySource(this.options.source)
 
     if (
       Object.prototype.hasOwnProperty.call(element, 'projection') &&
@@ -192,83 +219,95 @@ export default class Video360 extends UICorePlugin {
       this.container &&
       this.container.el
     ) {
-      this.container.el.style.touchAction = 'none';
-      this.container.el.addEventListener('touchmove', function (event) {
-        event.preventDefault();
-      }, false);
-      this.container.playback.el.setAttribute('crossorigin', 'anonymous');
-      this.unbindContainerEvents();
-      this.bindContainerEvents();
-      this.render();
+      this.container.el.style.touchAction = 'none'
+      this.container.el.addEventListener(
+        'touchmove',
+        function (event) {
+          event.preventDefault()
+        },
+        false,
+      )
+      this.container.playback.el.setAttribute('crossorigin', 'anonymous')
+      this.unbindContainerEvents()
+      this.bindContainerEvents()
+      this.render()
     } else {
-      this.listenToOnce(this.container, Events.CONTAINER_LOADEDMETADATA, this.reset);
+      this.listenToOnce(
+        this.container,
+        Events.CONTAINER_LOADEDMETADATA,
+        this.reset,
+      )
     }
   }
 
   findElementBySource(source) {
     return this.options.multisources.find((element) => {
       if (element.source === source) {
-        return element;
+        return element
       }
 
-      return false;
-    });
+      return false
+    })
   }
 
   onVRChanged() {
-    this.vrSwitch();
+    this.vrSwitch()
   }
 
   vrSwitch() {
     if (this.shouldRender()) {
-      this.active_ = !this.active_;
+      this.active_ = !this.active_
       if (this.active_) {
         // This starts playback mode when the cardboard button
         // is clicked on Andriod. We need to do this as the controls
         // disappear
-        if (this.container && !this.container.playback.isPlaying() && Browser.isAndroid) {
-          this.container.play();
+        if (
+          this.container &&
+          !this.container.playback.isPlaying() &&
+          Browser.isAndroid
+        ) {
+          this.container.play()
         }
-        window.dispatchEvent(new window.Event('vrdisplayactivate'));
+        window.dispatchEvent(new window.Event('vrdisplayactivate'))
       } else {
-        window.dispatchEvent(new window.Event('vrdisplaydeactivate'));
+        window.dispatchEvent(new window.Event('vrdisplaydeactivate'))
       }
     }
   }
 
   onFullscreenChange() {
-    this.checkFullscreen();
+    this.checkFullscreen()
   }
 
   checkFullscreen() {
     if (this.container && this.container.el) {
-      const fs = isFullscreen(this.container.el);
+      const fs = isFullscreen(this.container.el)
 
       if (Browser.isAndroid && fs) {
-        this.$el.hide();
+        this.$el.hide()
       } else {
-        this.$el.show();
+        this.$el.show()
       }
     }
   }
 
   init() {
     if (this.initialized_) {
-      return;
+      return
     }
     if (this.advertisement) {
-      return;
+      return
     }
-    this.reset();
+    this.reset()
 
     this.camera = new THREE.PerspectiveCamera(
       75,
       this.container.$el.width() / this.container.$el.height(),
       1,
-      1100
-    );
+      1100,
+    )
     // Store vector representing the direction in which the camera is looking, in world space.
-    this.cameraVector = new THREE.Vector3();
+    this.cameraVector = new THREE.Vector3()
 
     if (
       this.options.video360.projection === '360_LR' ||
@@ -277,94 +316,105 @@ export default class Video360 extends UICorePlugin {
       this.options.video360.projection === 'EAC_LR'
     ) {
       // Render left eye when not in VR mode
-      this.camera.layers.enable(1);
+      this.camera.layers.enable(1)
     }
 
-    this.scene = new THREE.Scene();
-    this.videoTexture = new THREE.VideoTexture(this.getVideoEl_());
+    this.scene = new THREE.Scene()
+    this.videoTexture = new THREE.VideoTexture(this.getVideoEl_())
 
     // shared regardless of wether THREE.VideoTexture is used or
     // an image canvas is used
-    this.videoTexture.generateMipmaps = false;
-    this.videoTexture.minFilter = THREE.LinearFilter;
-    this.videoTexture.magFilter = THREE.LinearFilter;
-    this.videoTexture.format = THREE.RGBFormat;
+    this.videoTexture.generateMipmaps = false
+    this.videoTexture.minFilter = THREE.LinearFilter
+    this.videoTexture.magFilter = THREE.LinearFilter
+    this.videoTexture.format = THREE.RGBFormat
 
-    this.changeProjection_(this.options.video360.projection);
+    this.changeProjection_(this.options.video360.projection)
 
     if (this.options.video360.projection === 'NONE') {
-      console.warn('Projection is NONE, dont init');
-      this.reset();
+      console.warn('Projection is NONE, dont init')
+      this.reset()
 
-      return;
+      return
     }
 
-    this.camera.position.set(0, 0, 0);
+    this.camera.position.set(0, 0, 0)
     this.renderer = new THREE.WebGLRenderer({
       devicePixelRatio: window.devicePixelRatio,
       alpha: false,
       clearColor: 0xffffff,
-      antialias: true
-    });
+      antialias: true,
+    })
 
-    this.renderer.setAnimationLoop(this.animate_);
+    this.renderer.setAnimationLoop(this.animate_)
 
-    const webglContext = this.renderer.getContext('webgl');
-    const oldTexImage2D = webglContext.texImage2D;
+    const webglContext = this.renderer.getContext('webgl')
+    const oldTexImage2D = webglContext.texImage2D
 
     /* this is a workaround since threejs uses try catch */
     webglContext.texImage2D = (...args) => {
       try {
-        return oldTexImage2D.apply(webglContext, args);
+        return oldTexImage2D.apply(webglContext, args)
       } catch (error) {
-        LogManager.exception(error);
-        this.reset();
-        this.container.pause();
+        LogManager.exception(error)
+        this.reset()
+        this.container.pause()
 
-        throw new Error(error);
+        throw new Error(error)
       }
-    };
+    }
 
-    this.renderer.setSize(this.container.$el.width(), this.container.$el.height(), false);
-    this.effect = new VREffect(this.renderer);
+    this.renderer.setSize(
+      this.container.$el.width(),
+      this.container.$el.height(),
+      false,
+    )
+    this.effect = new VREffect(this.renderer)
 
-    this.effect.setSize(this.container.$el.width(), this.container.$el.height(), false);
+    this.effect.setSize(
+      this.container.$el.width(),
+      this.container.$el.height(),
+      false,
+    )
 
     // Previous timestamps for gamepad updates
-    this.prevTimestamps_ = [];
-    this.renderedCanvas = this.renderer.domElement;
-    this.renderedCanvas.setAttribute('style', 'width:100%;height:100%;position:absolute;top:0;left:0;z-index:3;');
+    this.prevTimestamps_ = []
+    this.renderedCanvas = this.renderer.domElement
+    this.renderedCanvas.setAttribute(
+      'style',
+      'width:100%;height:100%;position:absolute;top:0;left:0;z-index:3;',
+    )
 
     // TODO: fix that hack
     if (Browser.isiOS) {
-      this.renderedCanvas.style.pointerEvents = 'none';
+      this.renderedCanvas.style.pointerEvents = 'none'
     }
 
-    const videoElStyle = this.getVideoEl_().style;
+    const videoElStyle = this.getVideoEl_().style
 
-    this.container.el.appendChild(this.renderedCanvas);
-    videoElStyle.zIndex = '-1';
-    videoElStyle.opacity = '0';
+    this.container.el.appendChild(this.renderedCanvas)
+    videoElStyle.zIndex = '-1'
+    videoElStyle.opacity = '0'
 
     if (window.navigator.getVRDisplays) {
       this.getVRDisplays((device) => {
         if (device) {
-          this.vrDisplay = device;
+          this.vrDisplay = device
           if (window.self !== window.top) {
-            this.vrDisplay.poseSensor_.useDeviceMotion();
+            this.vrDisplay.poseSensor_.useDeviceMotion()
           }
           if (!device.isPolyfilled) {
-            this.controls3d = new VRControls(this.camera);
+            this.controls3d = new VRControls(this.camera)
           } else {
             const options = {
               camera: this.camera,
               canvas: this.renderedCanvas,
               // check if its a half sphere view projection
               halfView: this.options.video360.projection === '180',
-              orientation: Browser.isiOS || Browser.isAndroid || false
-            };
+              orientation: Browser.isiOS || Browser.isAndroid || false,
+            }
 
-            this.controls3d = new OrbitOrientationControls(options);
+            this.controls3d = new OrbitOrientationControls(options)
           }
         } else {
           const options = {
@@ -372,393 +422,455 @@ export default class Video360 extends UICorePlugin {
             canvas: this.renderedCanvas,
             // check if its a half sphere view projection
             halfView: this.options.video360.projection === '180',
-            orientation: Browser.isiOS || Browser.isAndroid || false
-          };
+            orientation: Browser.isiOS || Browser.isAndroid || false,
+          }
 
-          this.controls3d = new OrbitOrientationControls(options);
+          this.controls3d = new OrbitOrientationControls(options)
         }
-      });
+      })
     } else if (window.navigator.getVRDevices) {
-      console.error('There isn\'t vr');
+      console.error("There isn't vr")
     } else {
-      console.error('There isn\'t vr');
+      console.error("There isn't vr")
     }
 
-    window.addEventListener('vrdisplaypresentchange', this.handleResize, true);
-    window.addEventListener('vrdisplayactivate', this.handleVrDisplayActivate_, true);
-    window.addEventListener('vrdisplaydeactivate', this.handleVrDisplayDeactivate_, true);
-    window.addEventListener('vrdisplaypresentchange', this.handleVrDisplayPresentChange_, true);
-
-    this.initialized_ = true;
+    window.addEventListener('vrdisplaypresentchange', this.handleResize, true)
+    window.addEventListener(
+      'vrdisplayactivate',
+      this.handleVrDisplayActivate_,
+      true,
+    )
+    window.addEventListener(
+      'vrdisplaydeactivate',
+      this.handleVrDisplayDeactivate_,
+      true,
+    )
+    window.addEventListener(
+      'vrdisplaypresentchange',
+      this.handleVrDisplayPresentChange_,
+      true,
+    )
+
+    this.initialized_ = true
   }
 
   getVRDisplays(onDisplay) {
     if ('getVRDisplays' in navigator) {
-      navigator.getVRDisplays()
-        .then(function (displays) {
-          onDisplay(displays[0]);
-        });
+      navigator.getVRDisplays().then(function (displays) {
+        onDisplay(displays[0])
+      })
     }
   }
 
   getVideoEl_() {
-    return this.container.$el.find('video')[0];
+    return this.container.$el.find('video')[0]
   }
 
   reset() {
     if (this.controls3d) {
-      this.controls3d.dispose();
-      this.controls3d = null;
+      this.controls3d.dispose()
+      this.controls3d = null
     }
 
     // reset the ios touch to click workaround
     if (this.iosRevertTouchToClick_) {
-      this.iosRevertTouchToClick_();
+      this.iosRevertTouchToClick_()
     }
 
     if (this.effect) {
-      this.effect.dispose();
-      this.effect = null;
+      this.effect.dispose()
+      this.effect = null
     }
 
     if (this.movieGeometry) {
-      this.movieGeometry.dispose();
+      this.movieGeometry.dispose()
     }
     if (this.movieMaterial) {
-      this.movieMaterial.dispose();
+      this.movieMaterial.dispose()
     }
 
     if (this.videoTexture) {
-      this.videoTexture.dispose();
+      this.videoTexture.dispose()
     }
 
-    window.removeEventListener('resize', this.handleResize, true);
-    window.removeEventListener('vrdisplaypresentchange', this.handleResize, true);
-    window.removeEventListener('vrdisplaypresentchange', this.handleResize, true);
-    window.removeEventListener('vrdisplayactivate', this.handleVrDisplayPresentChange_, true);
-    window.removeEventListener('vrdisplaydeactivate', this.handleVrDisplayDeactivate_, true);
+    window.removeEventListener('resize', this.handleResize, true)
+    window.removeEventListener(
+      'vrdisplaypresentchange',
+      this.handleResize,
+      true,
+    )
+    window.removeEventListener(
+      'vrdisplaypresentchange',
+      this.handleResize,
+      true,
+    )
+    window.removeEventListener(
+      'vrdisplayactivate',
+      this.handleVrDisplayPresentChange_,
+      true,
+    )
+    window.removeEventListener(
+      'vrdisplaydeactivate',
+      this.handleVrDisplayDeactivate_,
+      true,
+    )
 
     // reset the video element style so that it will be displayed
     if (this.getVideoEl_()) {
-      const videoElStyle = this.getVideoEl_().style;
+      const videoElStyle = this.getVideoEl_().style
 
-      videoElStyle.zIndex = '';
-      videoElStyle.opacity = '';
+      videoElStyle.zIndex = ''
+      videoElStyle.opacity = ''
     }
 
     // reset the ios touch to click workaround
     if (this.iosRevertTouchToClick_) {
-      this.iosRevertTouchToClick_();
+      this.iosRevertTouchToClick_()
     }
 
     if (this.renderer) {
-      this.renderer.setAnimationLoop(null);
-      this.renderer = null;
+      this.renderer.setAnimationLoop(null)
+      this.renderer = null
     }
 
     // remove the old canvas
     if (this.renderedCanvas && this.container && this.container.el) {
       try {
-        this.container.el.removeChild(this.renderedCanvas);
-        this.renderedCanvas = null;
+        this.container.el.removeChild(this.renderedCanvas)
+        this.renderedCanvas = null
       } catch (error) {
-        LogManager.exception(error);
+        LogManager.exception(error)
       }
     }
-    this.initialized_ = false;
+    this.initialized_ = false
   }
 
   handleVrDisplayPresentChange_() {
     if (this.vrDisplay) {
       if (!this.vrDisplay.isPresenting && this.active_) {
-        this.handleVrDisplayDeactivate_();
+        this.handleVrDisplayDeactivate_()
       }
       if (this.vrDisplay.isPresenting && !this.active_) {
-        this.handleVrDisplayActivate_();
+        this.handleVrDisplayActivate_()
       }
     }
   }
 
   handleVrDisplayDeactivate_() {
     if (!this.vrDisplay) {
-      return;
+      return
     }
-    this.active_ = false;
+    this.active_ = false
     if (this.iosRevertTouchToClick_) {
-      this.iosRevertTouchToClick_();
+      this.iosRevertTouchToClick_()
     }
 
     setTimeout(() => {
-      this.vrDisplay.exitPresent().then(() => {
-      }).catch((error) => {
-        LogManager.exception(error);
-      });
-    }, 0);
+      this.vrDisplay
+        .exitPresent()
+        .then(() => {})
+        .catch((error) => {
+          LogManager.exception(error)
+        })
+    }, 0)
   }
 
   handleVrDisplayActivate_() {
     if (!this.vrDisplay) {
-      return;
+      return
     }
-    this.vrDisplay.requestPresent([{ source: this.renderedCanvas }]).then(() => {
-      if (!this.vrDisplay.cardboardUI_ || !Browser.isiOS) {
-        return;
-      }
-      this.container.play();
-      // webvr-polyfill/cardboard ui only watches for click events
-      // to tell that the back arrow button is pressed during cardboard vr.
-      // but somewhere along the line these events are silenced with preventDefault
-      // but only on iOS, so we translate them ourselves here
-      let touches = [];
-      const iosCardboardTouchStart_ = (e) => {
-        for (let i = 0; i < e.touches.length; i++) {
-          touches.push(e.touches[i]);
+    this.vrDisplay
+      .requestPresent([{ source: this.renderedCanvas }])
+      .then(() => {
+        if (!this.vrDisplay.cardboardUI_ || !Browser.isiOS) {
+          return
         }
-      };
-
-      const iosCardboardTouchEnd_ = () => {
-        if (!touches.length) {
-          return;
+        this.container.play()
+        // webvr-polyfill/cardboard ui only watches for click events
+        // to tell that the back arrow button is pressed during cardboard vr.
+        // but somewhere along the line these events are silenced with preventDefault
+        // but only on iOS, so we translate them ourselves here
+        let touches = []
+        const iosCardboardTouchStart_ = (e) => {
+          for (let i = 0; i < e.touches.length; i++) {
+            touches.push(e.touches[i])
+          }
         }
 
-        touches.forEach((t) => {
-          const simulatedClick = new window.MouseEvent('click', {
-            screenX: t.screenX,
-            screenY: t.screenY,
-            clientX: t.clientX,
-            clientY: t.clientY
-          });
+        const iosCardboardTouchEnd_ = () => {
+          if (!touches.length) {
+            return
+          }
 
-          this.renderedCanvas.dispatchEvent(simulatedClick);
-        });
+          touches.forEach((t) => {
+            const simulatedClick = new window.MouseEvent('click', {
+              screenX: t.screenX,
+              screenY: t.screenY,
+              clientX: t.clientX,
+              clientY: t.clientY,
+            })
 
-        touches = [];
-      };
+            this.renderedCanvas.dispatchEvent(simulatedClick)
+          })
 
-      this.renderedCanvas.addEventListener('touchstart', iosCardboardTouchStart_);
-      this.renderedCanvas.addEventListener('touchend', iosCardboardTouchEnd_);
+          touches = []
+        }
 
-      this.iosRevertTouchToClick_ = () => {
-        this.renderedCanvas.removeEventListener('touchstart', iosCardboardTouchStart_);
-        this.renderedCanvas.removeEventListener('touchend', iosCardboardTouchEnd_);
-        this.iosRevertTouchToClick_ = null;
-      };
-    });
+        this.renderedCanvas.addEventListener(
+          'touchstart',
+          iosCardboardTouchStart_,
+        )
+        this.renderedCanvas.addEventListener('touchend', iosCardboardTouchEnd_)
+
+        this.iosRevertTouchToClick_ = () => {
+          this.renderedCanvas.removeEventListener(
+            'touchstart',
+            iosCardboardTouchStart_,
+          )
+          this.renderedCanvas.removeEventListener(
+            'touchend',
+            iosCardboardTouchEnd_,
+          )
+          this.iosRevertTouchToClick_ = null
+        }
+      })
   }
 
   changeProjection_(projection) {
     // don't change to an invalid projection
     if (!projection) {
-      console.error('none projection');
+      console.error('none projection')
 
-      return;
+      return
     }
-    const position = { x: 0, y: 0, z: 0 };
+    const position = { x: 0, y: 0, z: 0 }
 
     if (this.scene) {
-      this.scene.remove(this.movieScreen);
+      this.scene.remove(this.movieScreen)
     }
     if (projection === 'AUTO') {
       // mediainfo cannot be set to auto or we would infinite loop here
       // each source should know wether they are 360 or not, if using AUTO
-      return this.changeProjection_('NONE');
+      return this.changeProjection_('NONE')
     } else if (projection === '360') {
-      this.movieGeometry = new THREE.SphereBufferGeometry(256, 32, 32);
-      this.movieMaterial = new THREE.MeshBasicMaterial({ map: this.videoTexture, side: THREE.BackSide });
-
-      this.movieScreen = new THREE.Mesh(this.movieGeometry, this.movieMaterial);
-      this.movieScreen.position.set(position.x, position.y, position.z);
-
-      this.movieScreen.scale.x = -1;
-      this.movieScreen.quaternion.setFromAxisAngle({ x: 0, y: 1, z: 0 }, -Math.PI / 2);
-      this.scene.add(this.movieScreen);
+      this.movieGeometry = new THREE.SphereBufferGeometry(256, 32, 32)
+      this.movieMaterial = new THREE.MeshBasicMaterial({
+        map: this.videoTexture,
+        side: THREE.BackSide,
+      })
+
+      this.movieScreen = new THREE.Mesh(this.movieGeometry, this.movieMaterial)
+      this.movieScreen.position.set(position.x, position.y, position.z)
+
+      this.movieScreen.scale.x = -1
+      this.movieScreen.quaternion.setFromAxisAngle(
+        { x: 0, y: 1, z: 0 },
+        -Math.PI / 2,
+      )
+      this.scene.add(this.movieScreen)
     } else if (projection === '360_LR' || projection === '360_TB') {
       // Left eye view
-      let geometry = new THREE.SphereGeometry(256, 32, 32);
+      let geometry = new THREE.SphereGeometry(256, 32, 32)
 
-      let uvs = geometry.faceVertexUvs[0];
+      let uvs = geometry.faceVertexUvs[0]
 
       for (let i = 0; i < uvs.length; i++) {
         for (let j = 0; j < 3; j++) {
           if (projection === '360_LR') {
-            uvs[i][j].x *= 0.5;
+            uvs[i][j].x *= 0.5
           } else {
-            uvs[i][j].y *= 0.5;
-            uvs[i][j].y += 0.5;
+            uvs[i][j].y *= 0.5
+            uvs[i][j].y += 0.5
           }
         }
       }
 
-      this.movieGeometry = new THREE.BufferGeometry().fromGeometry(geometry);
-      this.movieMaterial = new THREE.MeshBasicMaterial({ map: this.videoTexture, side: THREE.BackSide });
-
-      this.movieScreen = new THREE.Mesh(this.movieGeometry, this.movieMaterial);
-      this.movieScreen.scale.x = -1;
-      this.movieScreen.quaternion.setFromAxisAngle({ x: 0, y: 1, z: 0 }, -Math.PI / 2);
+      this.movieGeometry = new THREE.BufferGeometry().fromGeometry(geometry)
+      this.movieMaterial = new THREE.MeshBasicMaterial({
+        map: this.videoTexture,
+        side: THREE.BackSide,
+      })
+
+      this.movieScreen = new THREE.Mesh(this.movieGeometry, this.movieMaterial)
+      this.movieScreen.scale.x = -1
+      this.movieScreen.quaternion.setFromAxisAngle(
+        { x: 0, y: 1, z: 0 },
+        -Math.PI / 2,
+      )
       // display in left eye only
-      this.movieScreen.layers.set(1);
-      this.scene.add(this.movieScreen);
+      this.movieScreen.layers.set(1)
+      this.scene.add(this.movieScreen)
 
       // Right eye view
-      geometry = new THREE.SphereGeometry(256, 32, 32);
+      geometry = new THREE.SphereGeometry(256, 32, 32)
 
-      uvs = geometry.faceVertexUvs[0];
+      uvs = geometry.faceVertexUvs[0]
 
       for (let i = 0; i < uvs.length; i++) {
         for (let j = 0; j < 3; j++) {
           if (projection === '360_LR') {
-            uvs[i][j].x *= 0.5;
-            uvs[i][j].x += 0.5;
+            uvs[i][j].x *= 0.5
+            uvs[i][j].x += 0.5
           } else {
-            uvs[i][j].y *= 0.5;
+            uvs[i][j].y *= 0.5
           }
         }
       }
 
-      this.movieGeometry = new THREE.BufferGeometry().fromGeometry(geometry);
-      this.movieMaterial = new THREE.MeshBasicMaterial({ map: this.videoTexture, side: THREE.BackSide });
-
-      this.movieScreen = new THREE.Mesh(this.movieGeometry, this.movieMaterial);
-      this.movieScreen.scale.x = -1;
-      this.movieScreen.quaternion.setFromAxisAngle({ x: 0, y: 1, z: 0 }, -Math.PI / 2);
+      this.movieGeometry = new THREE.BufferGeometry().fromGeometry(geometry)
+      this.movieMaterial = new THREE.MeshBasicMaterial({
+        map: this.videoTexture,
+        side: THREE.BackSide,
+      })
+
+      this.movieScreen = new THREE.Mesh(this.movieGeometry, this.movieMaterial)
+      this.movieScreen.scale.x = -1
+      this.movieScreen.quaternion.setFromAxisAngle(
+        { x: 0, y: 1, z: 0 },
+        -Math.PI / 2,
+      )
       // display in right eye only
-      this.movieScreen.layers.set(2);
-      this.scene.add(this.movieScreen);
+      this.movieScreen.layers.set(2)
+      this.scene.add(this.movieScreen)
     } else if (projection === '360_CUBE') {
-      this.movieGeometry = new THREE.BoxGeometry(256, 256, 256);
-      this.movieMaterial = new THREE.MeshBasicMaterial({ map: this.videoTexture, side: THREE.BackSide });
+      this.movieGeometry = new THREE.BoxGeometry(256, 256, 256)
+      this.movieMaterial = new THREE.MeshBasicMaterial({
+        map: this.videoTexture,
+        side: THREE.BackSide,
+      })
 
       const left = [
         new THREE.Vector2(0, 0.5),
         new THREE.Vector2(0.333, 0.5),
-        new THREE.Vector2(0.333, 1), new THREE.Vector2(0, 1)
-      ];
+        new THREE.Vector2(0.333, 1),
+        new THREE.Vector2(0, 1),
+      ]
       const right = [
         new THREE.Vector2(0.333, 0.5),
         new THREE.Vector2(0.666, 0.5),
         new THREE.Vector2(0.666, 1),
-        new THREE.Vector2(0.333, 1)
-      ];
+        new THREE.Vector2(0.333, 1),
+      ]
       const top = [
         new THREE.Vector2(0.666, 0.5),
         new THREE.Vector2(1, 0.5),
         new THREE.Vector2(1, 1),
-        new THREE.Vector2(0.666, 1)
-      ];
+        new THREE.Vector2(0.666, 1),
+      ]
       const bottom = [
         new THREE.Vector2(0, 0),
         new THREE.Vector2(0.333, 0),
         new THREE.Vector2(0.333, 0.5),
-        new THREE.Vector2(0, 0.5)
-      ];
+        new THREE.Vector2(0, 0.5),
+      ]
       const front = [
         new THREE.Vector2(0.333, 0),
         new THREE.Vector2(0.666, 0),
         new THREE.Vector2(0.666, 0.5),
-        new THREE.Vector2(0.333, 0.5)
-      ];
+        new THREE.Vector2(0.333, 0.5),
+      ]
       const back = [
         new THREE.Vector2(0.666, 0),
         new THREE.Vector2(1, 0),
         new THREE.Vector2(1, 0.5),
-        new THREE.Vector2(0.666, 0.5)
-      ];
+        new THREE.Vector2(0.666, 0.5),
+      ]
 
-      this.movieGeometry.faceVertexUvs[0] = [];
+      this.movieGeometry.faceVertexUvs[0] = []
 
-      this.movieGeometry.faceVertexUvs[0][0] = [right[2], right[1], right[3]];
-      this.movieGeometry.faceVertexUvs[0][1] = [right[1], right[0], right[3]];
+      this.movieGeometry.faceVertexUvs[0][0] = [right[2], right[1], right[3]]
+      this.movieGeometry.faceVertexUvs[0][1] = [right[1], right[0], right[3]]
 
-      this.movieGeometry.faceVertexUvs[0][2] = [left[2], left[1], left[3]];
-      this.movieGeometry.faceVertexUvs[0][3] = [left[1], left[0], left[3]];
+      this.movieGeometry.faceVertexUvs[0][2] = [left[2], left[1], left[3]]
+      this.movieGeometry.faceVertexUvs[0][3] = [left[1], left[0], left[3]]
 
-      this.movieGeometry.faceVertexUvs[0][4] = [top[2], top[1], top[3]];
-      this.movieGeometry.faceVertexUvs[0][5] = [top[1], top[0], top[3]];
+      this.movieGeometry.faceVertexUvs[0][4] = [top[2], top[1], top[3]]
+      this.movieGeometry.faceVertexUvs[0][5] = [top[1], top[0], top[3]]
 
-      this.movieGeometry.faceVertexUvs[0][6] = [bottom[2], bottom[1], bottom[3]];
-      this.movieGeometry.faceVertexUvs[0][7] = [bottom[1], bottom[0], bottom[3]];
+      this.movieGeometry.faceVertexUvs[0][6] = [bottom[2], bottom[1], bottom[3]]
+      this.movieGeometry.faceVertexUvs[0][7] = [bottom[1], bottom[0], bottom[3]]
 
-      this.movieGeometry.faceVertexUvs[0][8] = [front[2], front[1], front[3]];
-      this.movieGeometry.faceVertexUvs[0][9] = [front[1], front[0], front[3]];
+      this.movieGeometry.faceVertexUvs[0][8] = [front[2], front[1], front[3]]
+      this.movieGeometry.faceVertexUvs[0][9] = [front[1], front[0], front[3]]
 
-      this.movieGeometry.faceVertexUvs[0][10] = [back[2], back[1], back[3]];
-      this.movieGeometry.faceVertexUvs[0][11] = [back[1], back[0], back[3]];
+      this.movieGeometry.faceVertexUvs[0][10] = [back[2], back[1], back[3]]
+      this.movieGeometry.faceVertexUvs[0][11] = [back[1], back[0], back[3]]
 
-      this.movieScreen = new THREE.Mesh(this.movieGeometry, this.movieMaterial);
-      this.movieScreen.position.set(position.x, position.y, position.z);
-      this.movieScreen.rotation.y = -Math.PI;
+      this.movieScreen = new THREE.Mesh(this.movieGeometry, this.movieMaterial)
+      this.movieScreen.position.set(position.x, position.y, position.z)
+      this.movieScreen.rotation.y = -Math.PI
 
-      this.scene.add(this.movieScreen);
+      this.scene.add(this.movieScreen)
     } else if (projection === '180') {
-      let geometry = new THREE.SphereGeometry(256, 32, 32, Math.PI, Math.PI);
+      let geometry = new THREE.SphereGeometry(256, 32, 32, Math.PI, Math.PI)
 
       // Left eye view
-      geometry.scale(-1, 1, 1);
-      let uvs = geometry.faceVertexUvs[0];
+      geometry.scale(-1, 1, 1)
+      let uvs = geometry.faceVertexUvs[0]
 
       for (let i = 0; i < uvs.length; i++) {
         for (let j = 0; j < 3; j++) {
-          uvs[i][j].x *= 0.5;
+          uvs[i][j].x *= 0.5
         }
       }
 
-      this.movieGeometry = new THREE.BufferGeometry().fromGeometry(geometry);
+      this.movieGeometry = new THREE.BufferGeometry().fromGeometry(geometry)
       this.movieMaterial = new THREE.MeshBasicMaterial({
-        map: this.videoTexture
-      });
-      this.movieScreen = new THREE.Mesh(this.movieGeometry, this.movieMaterial);
+        map: this.videoTexture,
+      })
+      this.movieScreen = new THREE.Mesh(this.movieGeometry, this.movieMaterial)
       // display in left eye only
-      this.movieScreen.layers.set(1);
-      this.scene.add(this.movieScreen);
+      this.movieScreen.layers.set(1)
+      this.scene.add(this.movieScreen)
 
       // Right eye view
-      geometry = new THREE.SphereGeometry(256, 32, 32, Math.PI, Math.PI);
-      geometry.scale(-1, 1, 1);
-      uvs = geometry.faceVertexUvs[0];
+      geometry = new THREE.SphereGeometry(256, 32, 32, Math.PI, Math.PI)
+      geometry.scale(-1, 1, 1)
+      uvs = geometry.faceVertexUvs[0]
 
       for (let i = 0; i < uvs.length; i++) {
         for (let j = 0; j < 3; j++) {
-          uvs[i][j].x *= 0.5;
-          uvs[i][j].x += 0.5;
+          uvs[i][j].x *= 0.5
+          uvs[i][j].x += 0.5
         }
       }
 
-      this.movieGeometry = new THREE.BufferGeometry().fromGeometry(geometry);
+      this.movieGeometry = new THREE.BufferGeometry().fromGeometry(geometry)
       this.movieMaterial = new THREE.MeshBasicMaterial({
-        map: this.videoTexture
-      });
-      this.movieScreen = new THREE.Mesh(this.movieGeometry, this.movieMaterial);
+        map: this.videoTexture,
+      })
+      this.movieScreen = new THREE.Mesh(this.movieGeometry, this.movieMaterial)
       // display in right eye only
-      this.movieScreen.layers.set(2);
-      this.scene.add(this.movieScreen);
+      this.movieScreen.layers.set(2)
+      this.scene.add(this.movieScreen)
     } else if (projection === 'EAC' || projection === 'EAC_LR') {
       const makeScreen = (mapMatrix, scaleMatrix) => {
         // "Continuity correction?": because of discontinuous faces and aliasing,
         // we truncate the 2-pixel-wide strips on all discontinuous edges,
-        const contCorrect = 2;
+        const contCorrect = 2
 
-        this.movieGeometry = new THREE.BoxGeometry(256, 256, 256);
+        this.movieGeometry = new THREE.BoxGeometry(256, 256, 256)
         this.movieMaterial = new THREE.ShaderMaterial({
           side: THREE.BackSide,
           uniforms: {
             mapped: {
-              value: this.videoTexture
+              value: this.videoTexture,
             },
             mapMatrix: {
-              value: mapMatrix
+              value: mapMatrix,
             },
             contCorrect: {
-              value: contCorrect
+              value: contCorrect,
             },
             faceWH: {
-              value: new THREE.Vector2(1 / 3, 1 / 2).applyMatrix3(scaleMatrix)
+              value: new THREE.Vector2(1 / 3, 1 / 2).applyMatrix3(scaleMatrix),
             },
             vidWH: {
               value: new THREE.Vector2(
                 this.videoTexture.image.videoWidth,
-                this.videoTexture.image.videoHeight
-              ).applyMatrix3(scaleMatrix)
-            }
+                this.videoTexture.image.videoHeight,
+              ).applyMatrix3(scaleMatrix),
+            },
           },
           vertexShader: `
             varying vec2 vUv;
@@ -788,192 +900,210 @@ export default class Video360 extends UICorePlugin {
               vec2 eUv = corner + q * faceWHadj;
 
               gl_FragColor = texture2D(mapped, eUv);
-            }`
-        });
+            }`,
+        })
 
         const right = [
           new THREE.Vector2(0, 1 / 2),
           new THREE.Vector2(1 / 3, 1 / 2),
           new THREE.Vector2(1 / 3, 1),
-          new THREE.Vector2(0, 1)
-        ];
+          new THREE.Vector2(0, 1),
+        ]
         const front = [
           new THREE.Vector2(1 / 3, 1 / 2),
           new THREE.Vector2(2 / 3, 1 / 2),
           new THREE.Vector2(2 / 3, 1),
-          new THREE.Vector2(1 / 3, 1)
-        ];
+          new THREE.Vector2(1 / 3, 1),
+        ]
         const left = [
           new THREE.Vector2(2 / 3, 1 / 2),
           new THREE.Vector2(1, 1 / 2),
           new THREE.Vector2(1, 1),
-          new THREE.Vector2(2 / 3, 1)
-        ];
+          new THREE.Vector2(2 / 3, 1),
+        ]
         const bottom = [
           new THREE.Vector2(1 / 3, 0),
           new THREE.Vector2(1 / 3, 1 / 2),
           new THREE.Vector2(0, 1 / 2),
-          new THREE.Vector2(0, 0)
-        ];
+          new THREE.Vector2(0, 0),
+        ]
         const back = [
           new THREE.Vector2(1 / 3, 1 / 2),
           new THREE.Vector2(1 / 3, 0),
           new THREE.Vector2(2 / 3, 0),
-          new THREE.Vector2(2 / 3, 1 / 2)
-        ];
+          new THREE.Vector2(2 / 3, 1 / 2),
+        ]
         const top = [
           new THREE.Vector2(1, 0),
           new THREE.Vector2(1, 1 / 2),
           new THREE.Vector2(2 / 3, 1 / 2),
-          new THREE.Vector2(2 / 3, 0)
-        ];
+          new THREE.Vector2(2 / 3, 0),
+        ]
 
         for (const face of [right, front, left, bottom, back, top]) {
-          const height = this.videoTexture.image.videoHeight;
-          let lowY = 1;
-          let highY = 0;
+          const height = this.videoTexture.image.videoHeight
+          let lowY = 1
+          let highY = 0
 
           for (const vector of face) {
             if (vector.y < lowY) {
-              lowY = vector.y;
+              lowY = vector.y
             }
             if (vector.y > highY) {
-              highY = vector.y;
+              highY = vector.y
             }
           }
 
           for (const vector of face) {
             if (Math.abs(vector.y - lowY) < Number.EPSILON) {
-              vector.y += contCorrect / height;
+              vector.y += contCorrect / height
             }
             if (Math.abs(vector.y - highY) < Number.EPSILON) {
-              vector.y -= contCorrect / height;
+              vector.y -= contCorrect / height
             }
 
-            vector.x = vector.x / height * (height - contCorrect * 2) + contCorrect / height;
+            vector.x =
+              (vector.x / height) * (height - contCorrect * 2) +
+              contCorrect / height
           }
         }
 
-        this.movieGeometry.faceVertexUvs[0] = [];
+        this.movieGeometry.faceVertexUvs[0] = []
 
-        this.movieGeometry.faceVertexUvs[0][0] = [right[2], right[1], right[3]];
-        this.movieGeometry.faceVertexUvs[0][1] = [right[1], right[0], right[3]];
+        this.movieGeometry.faceVertexUvs[0][0] = [right[2], right[1], right[3]]
+        this.movieGeometry.faceVertexUvs[0][1] = [right[1], right[0], right[3]]
 
-        this.movieGeometry.faceVertexUvs[0][2] = [left[2], left[1], left[3]];
-        this.movieGeometry.faceVertexUvs[0][3] = [left[1], left[0], left[3]];
+        this.movieGeometry.faceVertexUvs[0][2] = [left[2], left[1], left[3]]
+        this.movieGeometry.faceVertexUvs[0][3] = [left[1], left[0], left[3]]
 
-        this.movieGeometry.faceVertexUvs[0][4] = [top[2], top[1], top[3]];
-        this.movieGeometry.faceVertexUvs[0][5] = [top[1], top[0], top[3]];
+        this.movieGeometry.faceVertexUvs[0][4] = [top[2], top[1], top[3]]
+        this.movieGeometry.faceVertexUvs[0][5] = [top[1], top[0], top[3]]
 
-        this.movieGeometry.faceVertexUvs[0][6] = [bottom[2], bottom[1], bottom[3]];
-        this.movieGeometry.faceVertexUvs[0][7] = [bottom[1], bottom[0], bottom[3]];
+        this.movieGeometry.faceVertexUvs[0][6] = [
+          bottom[2],
+          bottom[1],
+          bottom[3],
+        ]
+        this.movieGeometry.faceVertexUvs[0][7] = [
+          bottom[1],
+          bottom[0],
+          bottom[3],
+        ]
 
-        this.movieGeometry.faceVertexUvs[0][8] = [front[2], front[1], front[3]];
-        this.movieGeometry.faceVertexUvs[0][9] = [front[1], front[0], front[3]];
+        this.movieGeometry.faceVertexUvs[0][8] = [front[2], front[1], front[3]]
+        this.movieGeometry.faceVertexUvs[0][9] = [front[1], front[0], front[3]]
 
-        this.movieGeometry.faceVertexUvs[0][10] = [back[2], back[1], back[3]];
-        this.movieGeometry.faceVertexUvs[0][11] = [back[1], back[0], back[3]];
+        this.movieGeometry.faceVertexUvs[0][10] = [back[2], back[1], back[3]]
+        this.movieGeometry.faceVertexUvs[0][11] = [back[1], back[0], back[3]]
 
-        this.movieScreen = new THREE.Mesh(this.movieGeometry, this.movieMaterial);
-        this.movieScreen.position.set(position.x, position.y, position.z);
-        this.movieScreen.rotation.y = -Math.PI;
+        this.movieScreen = new THREE.Mesh(
+          this.movieGeometry,
+          this.movieMaterial,
+        )
+        this.movieScreen.position.set(position.x, position.y, position.z)
+        this.movieScreen.rotation.y = -Math.PI
 
-        return this.movieScreen;
-      };
+        return this.movieScreen
+      }
 
       if (projection === 'EAC') {
-        this.scene.add(makeScreen(new THREE.Matrix3(), new THREE.Matrix3()));
+        this.scene.add(makeScreen(new THREE.Matrix3(), new THREE.Matrix3()))
       } else {
-        const scaleMatrix = new THREE.Matrix3().set(
-          0, 0.5, 0,
-          1, 0, 0,
-          0, 0, 1
-        );
-
-        makeScreen(new THREE.Matrix3().set(
-          0, -0.5, 0.5,
-          1, 0, 0,
-          0, 0, 1
-        ), scaleMatrix);
+        const scaleMatrix = new THREE.Matrix3().set(0, 0.5, 0, 1, 0, 0, 0, 0, 1)
+
+        makeScreen(
+          new THREE.Matrix3().set(0, -0.5, 0.5, 1, 0, 0, 0, 0, 1),
+          scaleMatrix,
+        )
         // display in left eye only
-        this.movieScreen.layers.set(1);
-        this.scene.add(this.movieScreen);
-
-        makeScreen(new THREE.Matrix3().set(
-          0, -0.5, 1,
-          1, 0, 0,
-          0, 0, 1
-        ), scaleMatrix);
+        this.movieScreen.layers.set(1)
+        this.scene.add(this.movieScreen)
+
+        makeScreen(
+          new THREE.Matrix3().set(0, -0.5, 1, 1, 0, 0, 0, 0, 1),
+          scaleMatrix,
+        )
         // display in right eye only
-        this.movieScreen.layers.set(2);
-        this.scene.add(this.movieScreen);
+        this.movieScreen.layers.set(2)
+        this.scene.add(this.movieScreen)
       }
     }
   }
 
   destroy() {
-    this.reset();
+    this.reset()
   }
 
   shouldRender() {
     if (!this.container) {
-      return false;
+      return false
     }
 
-    this.currentPlayback = this.core.activePlayback;
-    if (this.currentPlayback && this.currentPlayback.tagName !== 'video' && this.currentPlayback.tagName !== 'audio') {
+    this.currentPlayback = this.core.activePlayback
+    if (
+      this.currentPlayback &&
+      this.currentPlayback.tagName !== 'video' &&
+      this.currentPlayback.tagName !== 'audio'
+    ) {
       //console.warn('PlaybackRatePlugin#shouldRender: Cannot affect rate for playback', currentPlayback);
-      return false;
+      return false
     }
 
     try {
-      const { video360 } = this.options;
+      const { video360 } = this.options
 
-      if (!video360 || !video360.projection || (!video360.forceCardboard && !Browser.isiOS && !Browser.isAndroid)) {
-        return false;
+      if (
+        !video360 ||
+        !video360.projection ||
+        (!video360.forceCardboard && !Browser.isiOS && !Browser.isAndroid)
+      ) {
+        return false
       }
     } catch (error) {
-      LogManager.exception(error);
+      LogManager.exception(error)
 
-      return false;
+      return false
     }
 
-    return true;
+    return true
   }
 
   render() {
     //console.log('PlaybackRatePlugin#render()');
     if (this.shouldRender()) {
-      const t = template(pluginHtml);
-      const html = t();
+      const t = template(pluginHtml)
+      const html = t()
 
-      this.$el.html(html);
+      this.$el.html(html)
 
       if (
-        Object.prototype.hasOwnProperty.call(this.core.mediaControl, '$vrButton') &&
+        Object.prototype.hasOwnProperty.call(
+          this.core.mediaControl,
+          '$vrButton',
+        ) &&
         this.core.mediaControl.$vrButton.length > 0
       ) {
-        this.$el.find('.vr-button').append(cardBoard);
-        this.core.mediaControl.$vrButton.append(this.$el);
+        this.$el.find('.vr-button').append(cardBoard)
+        this.core.mediaControl.$vrButton.append(this.$el)
       } else {
-        this.core.mediaControl.$('.media-control-right-panel').append(this.el);
+        this.core.mediaControl.$('.media-control-right-panel').append(this.el)
       }
     }
   }
 
   get template() {
-    return template(pluginHtml);
+    return template(pluginHtml)
   }
 
   onStartAd() {
-    this.advertisement = true;
-    this.reset();
+    this.advertisement = true
+    this.reset()
   }
 
   onFinishAd() {
-    this.advertisement = false;
+    this.advertisement = false
     if (this.loadMetadata) {
-      this.init();
+      this.init()
     }
   }
 }