rough in fullscreen mode in watch view

web/skins/classic/js/skin.js

@@ -947,3 +947,29 @@ function initThumbAnimation() {
     });
   }
 }
+
+/* View in fullscreen */
+function openFullscreen(elem) {
+  if (elem.requestFullscreen) {
+    elem.requestFullscreen();
+  } else if (elem.webkitRequestFullscreen) {
+    /* Safari */
+    elem.webkitRequestFullscreen();
+  } else if (elem.msRequestFullscreen) {
+    /* IE11 */
+    elem.msRequestFullscreen();
+  }
+}
+
+/* Close fullscreen */
+function closeFullscreen() {
+  if (document.exitFullscreen) {
+    document.exitFullscreen();
+  } else if (document.webkitExitFullscreen) {
+    /* Safari */
+    document.webkitExitFullscreen();
+  } else if (document.msExitFullscreen) {
+    /* IE11 */
+    document.msExitFullscreen();
+  }
+}

web/skins/classic/views/js/watch.js

@@ -970,5 +970,10 @@ function initPage() {
   });
 } // initPage
 
+function watchFullscreen() {
+  const content = document.getElementById('content');
+  openFullscreen(content);
+}
+
 // Kick everything off
 $j(document).ready(initPage);

web/skins/classic/views/watch.php

@@ -142,6 +142,9 @@ if ( $streamMode == 'jpeg' ) {
         <button type="button" id="zoomOutBtn" title="<?php echo translate('ZoomOut') ?>" class="avail" data-on-click="streamCmdZoomOut">
         <i class="material-icons md-18">zoom_out</i>
         </button>
+        <button type="button" id="fullscreenBtn" title="<?php echo translate('Fullscreen') ?>" class="avail" data-on-click="watchFullscreen">
+        <i class="material-icons md-18">fullscreen</i>
+        </button>
 <?php
 } // end if streamMode==jpeg
 ?>