Dev2.6.3 detachable

bigbluebutton-html5/imports/ui/components/common/fullscreen-button/service.js

@@ -1,29 +1,29 @@
-function getFullscreenElement() {
-  if (document.fullscreenElement) return document.fullscreenElement;
-  if (document.webkitFullscreenElement) return document.webkitFullscreenElement;
-  if (document.mozFullScreenElement) return document.mozFullScreenElement;
-  if (document.msFullscreenElement) return document.msFullscreenElement;
+function getFullscreenElement(d = document) {
+  if (d.fullscreenElement) return d.fullscreenElement;
+  if (d.webkitFullscreenElement) return d.webkitFullscreenElement;
+  if (d.mozFullScreenElement) return d.mozFullScreenElement;
+  if (d.msFullscreenElement) return d.msFullscreenElement;
   return null;
 }
 
-const isFullScreen = (element) => {
-  if (getFullscreenElement() && getFullscreenElement() === element) {
+const isFullScreen = (element, doc = document) => {
+  if (getFullscreenElement(doc) && getFullscreenElement(doc) === element) {
     return true;
   }
   return false;
 };
 
-function cancelFullScreen() {
-  if (document.exitFullscreen) {
-    document.exitFullscreen();
-  } else if (document.mozCancelFullScreen) {
-    document.mozCancelFullScreen();
-  } else if (document.webkitExitFullscreen) {
-    document.webkitExitFullscreen();
+function cancelFullScreen(doc = document) {
+  if (doc.exitFullscreen) {
+    doc.exitFullscreen();
+  } else if (doc.mozCancelFullScreen) {
+    doc.mozCancelFullScreen();
+  } else if (doc.webkitExitFullscreen) {
+    doc.webkitExitFullscreen();
   }
 }
 
-function fullscreenRequest(element) {
+function fullscreenRequest(element, doc = document) {
   if (element.requestFullscreen) {
     element.requestFullscreen();
   } else if (element.mozRequestFullScreen) {
@@ -35,17 +35,18 @@ function fullscreenRequest(element) {
   } else {
     return;
   }
-  document.activeElement.blur();
+  doc.activeElement.blur();
   element.focus();
 }
 
-const toggleFullScreen = (ref = null) => {
-  const element = ref || document.documentElement;
+const toggleFullScreen = (ref = null, isDetached = false, presentationWin = window) => {
+  const element = ref || (isDetached ? presentationWin.document.documentElement : document.documentElement) ;
+  const doc = isDetached ? presentationWin.document : document;
 
-  if (isFullScreen(element)) {
-    cancelFullScreen();
+  if (isFullScreen(element, doc)) {
+    cancelFullScreen(doc);
   } else {
-    fullscreenRequest(element);
+    fullscreenRequest(element, doc);
   }
 };
 

bigbluebutton-html5/imports/ui/components/presentation-pod/component.jsx

@@ -3,14 +3,70 @@ import PropTypes from 'prop-types';
 import PresentationContainer from '../presentation/container';
 
 class PresentationPods extends PureComponent {
+  constructor() {
+    super();
+
+    this.state = {
+      isPresentationDetached: false,
+    };
+
+    this.previousSvgSize = {width:0, height:0};
+    this.previousToolbarHeight = 0;
+    this.setPresentationDetached = this.setPresentationDetached.bind(this);
+    this.togglePresentationDetached = this.togglePresentationDetached.bind(this);
+    this.setPreviousSvgSize = this.setPreviousSvgSize.bind(this);
+    this.getPreviousSvgSize = this.getPreviousSvgSize.bind(this);
+    this.setPreviousToolbarHeight = this.setPreviousToolbarHeight.bind(this);
+    this.getPreviousToolbarHeight = this.getPreviousToolbarHeight.bind(this);
+  }
+
+  setPresentationDetached(isDetached) {
+    this.setState({ isPresentationDetached: isDetached });
+  }
+
+  setPreviousSvgSize(w, h) {
+    this.previousSvgSize = {
+      width: w,
+      height: h,
+    }
+  }
+
+  getPreviousSvgSize() {
+    return this.previousSvgSize;
+  }
+
+  setPreviousToolbarHeight(h) {
+    this.previousToolBarHeight = h;
+  }
+
+  getPreviousToolbarHeight() {
+    return this.previousToolBarHeight;
+  }
+
+  togglePresentationDetached() {
+    const { isPresentationDetached } = this.state;
+    this.setState({ isPresentationDetached: !isPresentationDetached });
+  }
+
   render() {
     /*
       filtering/sorting presentation pods goes here
       all the future UI for the pods also goes here
       PresentationContainer should fill any empty box provided by us
     */
     return (
-      <PresentationContainer podId="DEFAULT_PRESENTATION_POD" {...this.props} />
+      <PresentationContainer
+        podId="DEFAULT_PRESENTATION_POD"
+        key={this.state.isPresentationDetached && this.state.isPresentationDetached.id}
+        isPresentationDetached={this.state.isPresentationDetached}
+        setPresentationDetached={this.setPresentationDetached}
+        togglePresentationDetached={this.togglePresentationDetached}
+        setPreviousSvgSize={this.setPreviousSvgSize}
+        getPreviousSvgSize={this.getPreviousSvgSize}
+        setPreviousToolbarHeight={this.setPreviousToolbarHeight}
+        getPreviousToolbarHeight={this.getPreviousToolbarHeight}
+        {...this.props}
+      />
     );
   }
 }