Implement fullscreen button for event view

web/skins/classic/views/event.php

@@ -289,6 +289,9 @@ if ( (ZM_WEB_STREAM_METHOD == 'mpeg') && ZM_MPEG_LIVE_FORMAT ) {
           <button type="button" id="zoomOutBtn" title="<?php echo translate('ZoomOut') ?>" class="unavail" disabled="disabled" data-on-click="clickZoomOut">
           <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>
           <button type="button" id="nextBtn" title="<?php echo translate('Next') ?>" class="inactive" data-on-click-true="streamNext">
           <i class="material-icons md-18">skip_next</i>
           </button>

web/skins/classic/views/js/event.js

@@ -1213,5 +1213,19 @@ function toggleZones(e) {
   }
 }
 
+function watchFullscreen() {
+  const btn = document.getElementById('fullscreenBtn');
+  if (btn.firstElementChild.innerHTML == 'fullscreen') {
+    const content = document.getElementById('content');
+    openFullscreen(content);
+    btn.firstElementChild.innerHTML = 'fullscreen_exit';
+    btn.setAttribute('title', translate["Exit Fullscreen"]);
+  } else {
+    closeFullscreen();
+    btn.firstElementChild.innerHTML = 'fullscreen';
+    btn.setAttribute('title', translate["Fullscreen"]);
+  }
+}
+
 // Kick everything off
 $j(document).ready(initPage);

web/skins/classic/views/js/event.js.php

@@ -96,3 +96,9 @@ var hideZonesString = "<?php echo validJsStr(translate('Hide Zones'))?>";
 var WEB_LIST_THUMB_WIDTH = '<?php echo ZM_WEB_LIST_THUMB_WIDTH ?>';
 var WEB_LIST_THUMB_HEIGHT = '<?php echo ZM_WEB_LIST_THUMB_HEIGHT ?>';
 var popup = '<?php echo $popup ?>';
+
+var translate = {
+  "seconds": "<?php echo translate('seconds') ?>",
+  "Fullscreen": "<?php echo translate('Fullscreen') ?>",
+  "Exit Fullscreen": "<?php echo translate('Exit Fullscreen') ?>",
+};