Mimics fullscreen when fullscreen api is not supported

Author: christianmemije

kolibri/plugins/document_pdf_render/assets/src/views/index.vue

@@ -1,13 +1,16 @@
 <template>
 
-  <div ref="container" class="container" allowfullscreen>
+  <div
+    ref="container"
+    class="container"
+    :class="{ 'container-mimic-fullscreen': mimicFullscreen }">
     <icon-button
       class="btn"
-      v-if="fullscreenAllowed && supportsPDFs"
-      :text="isFullScreen ? $tr('exitFullscreen') : $tr('enterFullscreen')"
-      @click="toggleFullScreen"
+      v-if="supportsPDFs"
+      :text="isFullscreen ? $tr('exitFullscreen') : $tr('enterFullscreen')"
+      @click="toggleFullscreen"
       :primary="true">
-      <mat-svg v-if="isFullScreen" class="icon" category="navigation" name="fullscreen_exit"/>
+      <mat-svg v-if="isFullscreen" class="icon" category="navigation" name="fullscreen_exit"/>
       <mat-svg v-else class="icon" category="navigation" name="fullscreen"/>
     </icon-button>
     <div ref="pdfcontainer" class="pdfcontainer"></div>
@@ -27,17 +30,29 @@
     data: () => ({
       supportsPDFs: PDFobject.supportsPDFs,
       timeout: null,
-      isFullScreen: false,
+      isFullscreen: false,
     }),
     computed: {
       fullscreenAllowed() {
         return ScreenFull.enabled;
       },
+      mimicFullscreen() {
+        return !this.fullscreenAllowed && this.isFullscreen;
+      },
     },
     methods: {
-      toggleFullScreen() {
-        ScreenFull.toggle(this.$refs.container);
-        this.isFullScreen = ScreenFull.isFullscreen;
+      toggleFullscreen() {
+        if (this.isFullscreen) {
+          if (this.fullscreenAllowed) {
+            ScreenFull.toggle(this.$refs.container);
+          }
+          this.isFullscreen = false;
+        } else {
+          if (this.fullscreenAllowed) {
+            ScreenFull.toggle(this.$refs.container);
+          }
+          this.isFullscreen = true;
+        }
       },
     },
     mounted() {
@@ -82,6 +97,18 @@
       min-height: inherit
       max-height: inherit
 
+  .container-mimic-fullscreen
+    position: fixed
+    top: 0
+    right: 0
+    bottom: 0
+    left: 0
+    z-index: 24
+    max-width: 100%
+    max-height: 100%
+    width: 100%
+    height: 100%
+
   .pdfcontainer
     height: 100%
 

kolibri/plugins/html5_app_renderer/assets/src/views/index.vue

@@ -1,13 +1,16 @@
 <template>
 
-  <div ref="container" class="container" allowfullscreen>
+  <div
+    ref="container"
+    class="container"
+    :class="{ 'container-mimic-fullscreen': mimicFullscreen }"
+    allowfullscreen>
     <icon-button
       class="btn"
-      v-if="fullscreenAllowed"
-      :text="isFullScreen ? $tr('exitFullscreen') : $tr('enterFullscreen')"
-      @click="toggleFullScreen"
+      :text="isFullscreen ? $tr('exitFullscreen') : $tr('enterFullscreen')"
+      @click="toggleFullscreen"
       :primary="true">
-      <mat-svg v-if="isFullScreen" class="icon" category="navigation" name="fullscreen_exit"/>
+      <mat-svg v-if="isFullscreen" class="icon" category="navigation" name="fullscreen_exit"/>
       <mat-svg v-else class="icon" category="navigation" name="fullscreen"/>
     </icon-button>
     <iframe ref="sandbox" class="sandbox" :src="rooturl" sandbox="allow-scripts"></iframe>
@@ -28,19 +31,31 @@
         required: true,
       },
     },
-    data: () => ({ isFullScreen: false }),
+    data: () => ({ isFullscreen: false }),
     computed: {
       rooturl() {
         return this.defaultFile.storage_url;
       },
       fullscreenAllowed() {
         return ScreenFull.enabled;
       },
+      mimicFullscreen() {
+        return !this.fullscreenAllowed && this.isFullscreen;
+      },
     },
     methods: {
-      toggleFullScreen() {
-        ScreenFull.toggle(this.$refs.container);
-        this.isFullScreen = ScreenFull.isFullscreen;
+      toggleFullscreen() {
+        if (this.isFullscreen) {
+          if (this.fullscreenAllowed) {
+            ScreenFull.toggle(this.$refs.container);
+          }
+          this.isFullscreen = false;
+        } else {
+          if (this.fullscreenAllowed) {
+            ScreenFull.toggle(this.$refs.container);
+          }
+          this.isFullscreen = true;
+        }
       },
     },
     mounted() {
@@ -86,6 +101,18 @@
       min-height: inherit
       max-height: inherit
 
+  .container-mimic-fullscreen
+    position: fixed
+    top: 0
+    right: 0
+    bottom: 0
+    left: 0
+    z-index: 24
+    max-width: 100%
+    max-height: 100%
+    width: 100%
+    height: 100%
+
   .sandbox
     height: 100%
     width: 100%

kolibri/plugins/media_player/assets/src/views/videojs-replay-forward-btns.js renamed to kolibri/plugins/media_player/assets/src/views/customButtons.js

@@ -1,6 +1,7 @@
 import videojs from 'video.js';
 
 const videojsButton = videojs.getComponent('Button');
+const videojsFullscreenToggle = videojs.getComponent('FullscreenToggle');
 
 export class ReplayButton extends videojsButton {
   buildCSSClass() {
@@ -21,3 +22,9 @@ export class ForwardButton extends videojsButton {
     player.currentTime(Math.min(player.duration(), player.currentTime() + 10));
   }
 }
+
+export class MimicFullscreenToggle extends videojsFullscreenToggle {
+  handleClick() {
+    this.player().trigger('mimicFullscreenToggled');
+  }
+}

kolibri/plugins/media_player/assets/src/views/index.vue

@@ -4,7 +4,10 @@
     <div v-show="loading" class="fill-space">
       <loading-spinner/>
     </div>
-    <div v-show="!loading" class="fill-space">
+    <div
+       v-show="!loading"
+       class="fill-space"
+       :class="{ 'mimic-fullscreen': mimicFullscreen }">
       <video v-if="isVideo" ref="player" class="video-js custom-skin">
         <template v-for="video in videoSources">
           <source :src="video.storage_url" :type="`video/${video.extension}`">
@@ -30,11 +33,12 @@
   import vue from 'kolibri.lib.vue';
   import videojs from 'video.js';
   import LangLookup from './languagelookup';
-  import * as customButtons from './videojs-replay-forward-btns';
+  import { ReplayButton, ForwardButton, MimicFullscreenToggle } from './customButtons';
   import throttle from 'lodash/throttle';
   import Lockr from 'lockr';
   import loadingSpinner from 'kolibri.coreVue.components.loadingSpinner';
   import ResponsiveElement from 'kolibri.coreVue.mixins.responsiveElement';
+  import ScreenFull from 'screenfull';
 
   const GlobalLangCode = vue.locale;
 
@@ -66,6 +70,7 @@
       playerMuted: false,
       playerRate: 1.0,
       videoLang: GlobalLangCode,
+      mimicFullscreen: false,
     }),
 
     computed: {
@@ -96,6 +101,9 @@
       isVideo() {
         return this.videoSources.length;
       },
+      fullscreenAllowed() {
+        return ScreenFull.enabled;
+      },
     },
     methods: {
       getLangName(langCode) {
@@ -137,7 +145,6 @@
               },
               { name: 'playbackRateMenuButton' },
               { name: 'captionsButton' },
-              { name: 'fullscreenToggle' },
             ],
           },
         };
@@ -146,6 +153,14 @@
           videojsConfig.poster = this.posterSource;
         }
 
+        // Add appropriate fullscreen button
+        if (this.fullscreenAllowed) {
+          videojsConfig.controlBar.children.push({ name: 'fullscreenToggle' });
+        } else {
+          videojs.registerComponent('MimicFullscreenToggle', MimicFullscreenToggle);
+          videojsConfig.controlBar.children.push({ name: 'MimicFullscreenToggle' });
+        }
+
         this.$nextTick(() => {
           this.player = videojs(this.$refs.player, videojsConfig);
           this.player.on('loadedmetadata', this.handleReadyPlayer);
@@ -162,6 +177,9 @@
         this.player.on('play', () => this.setPlayState(true));
         this.player.on('pause', () => this.setPlayState(false));
         this.player.on('ended', () => this.setPlayState(false));
+        this.player.on('mimicFullscreenToggled', () => {
+          this.mimicFullscreen = !this.mimicFullscreen;
+        });
         this.$watch('elSize.width', this.updatePlayerSizeClass);
         this.updatePlayerSizeClass();
         this.resizePlayer();
@@ -261,10 +279,10 @@
       },
     },
     created() {
-      customButtons.ReplayButton.prototype.controlText_ = this.$tr('replay');
-      customButtons.ForwardButton.prototype.controlText_ = this.$tr('forward');
-      videojs.registerComponent('ReplayButton', customButtons.ReplayButton);
-      videojs.registerComponent('ForwardButton', customButtons.ForwardButton);
+      ReplayButton.prototype.controlText_ = this.$tr('replay');
+      ForwardButton.prototype.controlText_ = this.$tr('forward');
+      videojs.registerComponent('ReplayButton', ReplayButton);
+      videojs.registerComponent('ForwardButton', ForwardButton);
       this.videoLang = Lockr.get('videoLang') || this.videoLang;
     },
     mounted() {
@@ -299,6 +317,19 @@
     width: 100%
     height: 100%
 
+  .mimic-fullscreen
+    position: fixed
+    top: 0
+    right: 0
+    bottom: 0
+    left: 0
+    z-index: 24
+    max-width: calc(100vh * (16/9))
+    max-height: 100%
+    width: 100%
+    height: 100%
+    background-color: black
+
 </style>