Merge pull request #8486 from lfzawacki/fix-external-video-2.2

Trying to fix external video sync problems

bigbluebutton-html5/imports/api/external-videos/server/methods/initializeExternalVideo.js

@@ -4,8 +4,6 @@ import Users from '/imports/api/users';
 import Logger from '/imports/startup/server/logger';
 
 const allowFromPresenter = (eventName, { userId }) => {
-  if (eventName === 'viewerJoined') return true;
-
   const user = Users.findOne({ userId });
   const ret = user && user.presenter;
 

bigbluebutton-html5/imports/ui/components/external-video-player/component.jsx

@@ -34,6 +34,7 @@ class VideoPlayer extends Component {
       mutedByEchoTest: false,
       playing: false,
       hasPlayedBefore: false,
+      playerIsReady: false,
       autoPlayBlocked: false,
       playbackRate: 1,
     };
@@ -73,21 +74,33 @@ class VideoPlayer extends Component {
     this.resizeListener = () => {
       setTimeout(this.handleResize, 0);
     };
+    this.onBeforeUnload = this.onBeforeUnload.bind(this);
   }
 
   componentDidMount() {
     window.addEventListener('resize', this.resizeListener);
+    window.addEventListener('beforeunload', this.onBeforeUnload);
 
     clearInterval(this.syncInterval);
     this.registerVideoListeners();
   }
 
+  onBeforeUnload() {
+    const { isPresenter } = this.props;
+
+    if (isPresenter) {
+      sendMessage('stop');
+    }
+  }
+
   componentWillUnmount() {
     window.removeEventListener('resize', this.resizeListener);
+    window.removeEventListener('beforeunload', this.onBeforeUnload);
     this.clearVideoListeners();
 
     clearInterval(this.syncInterval);
     clearTimeout(this.autoPlayTimeout);
+
     this.player = null;
   }
 
@@ -158,6 +171,7 @@ class VideoPlayer extends Component {
     removeAllListeners('play');
     removeAllListeners('stop');
     removeAllListeners('playerUpdate');
+    removeAllListeners('presenterReady');
   }
 
   registerVideoListeners() {
@@ -175,14 +189,6 @@ class VideoPlayer extends Component {
         sendMessage('playerUpdate', { rate, time: curTime, state: playingState });
       }, SYNC_INTERVAL_SECONDS * 1000);
 
-      onMessage('viewerJoined', () => {
-        const { hasPlayedBefore } = this.state;
-
-        logger.debug({ logCode: 'external_video_viewer_joined' }, 'Viewer joined external video');
-        if (hasPlayedBefore) {
-          sendMessage('presenterReady');
-        }
-      });
     } else {
       onMessage('play', ({ time }) => {
         const { hasPlayedBefore } = this.state;
@@ -255,18 +261,18 @@ class VideoPlayer extends Component {
 
   handleOnReady() {
     const { isPresenter } = this.props;
-    const { hasPlayedBefore } = this.state;
+    const { hasPlayedBefore, playerIsReady } = this.state;
 
-    if (hasPlayedBefore) {
+    if (hasPlayedBefore || playerIsReady) {
       return;
     }
 
-    if (!isPresenter) {
-      sendMessage('viewerJoined');
-    } else {
+    if (isPresenter) {
       this.setState({ playing: true });
     }
 
+    this.setState({ playerIsReady: true });
+
     this.handleResize();
 
     this.autoPlayTimeout = setTimeout(this.autoPlayBlockDetected, AUTO_PLAY_BLOCK_DETECTION_TIMEOUT_SECONDS * 1000);