/*
  Apply this mixin to your vue components to add cross-browser fullscreen support.

  import fullscreen from 'kolibri.coreVue.mixins.fullscreen';

  export default {
    mixins: [fullscreen],
  }
*/

import ScreenFull from 'screenfull';
import { isAndroidWebView } from 'kolibri.utils.browser';

export default {
  data() {
    return {
      fullscreenIsSupported: false,
      isInFullscreen: false,
    };
  },

  methods: {
    toggleFullscreen(element) {
      if (this.isInFullscreen) {
        this.exitFullscreen(element);
      } else {
        this.enterFullScreen(element);
      }
    },

    enterFullScreen(element) {
      if (this.fullscreenIsSupported) {
        ScreenFull.toggle(element);
        element.classList.add('normalize-fullscreen');
      } else {
        element.classList.add('mimic-fullscreen');
      }
      this.isInFullscreen = true;
    },

    exitFullscreen(element) {
      if (this.fullscreenIsSupported) {
        ScreenFull.toggle(element);
        element.classList.remove('normalize-fullscreen');
      } else {
        element.classList.remove('mimic-fullscreen');
      }
      this.isInFullscreen = false;
    },
  },

  mounted() {
    this.fullscreenIsSupported = ScreenFull.enabled && !isAndroidWebView();
  },
};

@@ -292,16 +292,127 @@
 wser';%0A%0A
+const NORMALIZE_FULLSCREEN_CLASS = 'normalize-fullscreen';%0Aconst MIMIC_FULLSCREEN_CLASS = 'mimic-fullscreen';%0A%0A
 export d
@@ -845,38 +845,42 @@
 ist.add(
-'normalize-fullscreen'
+NORMALIZE_FULLSCREEN_CLASS
 );%0A     
@@ -919,34 +919,38 @@
 ist.add(
-'mimic-fullscreen'
+MIMIC_FULLSCREEN_CLASS
 );%0A     
@@ -1133,38 +1133,42 @@
 .remove(
-'normalize-fullscreen'
+NORMALIZE_FULLSCREEN_CLASS
 );%0A     
@@ -1210,34 +1210,38 @@
 .remove(
-'mimic-fullscreen'
+MIMIC_FULLSCREEN_CLASS
 );%0A     
@@ -1380,16 +1380,503 @@
 bView();
+%0A%0A    // Catch the use of the esc key to exit fullscreen%0A    if (this.fullscreenIsSupported) %7B%0A      ScreenFull.onchange(() =%3E %7B%0A        this.isInFullscreen = ScreenFull.isFullscreen;%0A        // Just exited fullscreen%0A        if (!this.isInFullscreen) %7B%0A          const elementWithClass = this.$el.querySelector(NORMALIZE_FULLSCREEN_CLASS);%0A          if (elementWithClass) %7B%0A            elementWithClass.classList.remove(NORMALIZE_FULLSCREEN_CLASS);%0A          %7D%0A        %7D%0A      %7D);%0A    %7D
 %0A  %7D,%0A%7D;

Handle esc key in fullscreen mixin