From b7c4ebba840e7d9ae51deb2fa3663a6b40575e13 Mon Sep 17 00:00:00 2001
From: Lyubo Marinov <lmarinov@atlassian.com>
Date: Wed, 24 May 2017 12:01:46 -0500
Subject: [PATCH] Web Filmstrip & LargeVideo React Components

We've had Filmstrip & LargeVideo React Components on mobile/React Native
from the start. We didn't have them on Web (because the rewrite in React
is not complete yet). However, that led to differences in the React
Component Conference on Web and mobile. In an effort to get closer to
merging the React Component Conference on Web and mobile, introduce the
React Components Filmstrip & LargeVideo on Web even if a minimal
render-only form at this time.
---
 .../components/Conference.native.js           |  24 +++-
 .../conference/components/Conference.web.js   | 115 +++---------------
 .../filmstrip/components/Filmstrip.native.js  |   6 +-
 .../filmstrip/components/Filmstrip.web.js     |  65 ++++++++++
 react/features/filmstrip/components/_.web.js  |   0
 .../{LargeVideo.js => LargeVideo.native.js}   |   5 +-
 .../large-video/components/LargeVideo.web.js  |  62 ++++++++++
 7 files changed, 173 insertions(+), 104 deletions(-)
 create mode 100644 react/features/filmstrip/components/_.web.js
 rename react/features/large-video/components/{LargeVideo.js => LargeVideo.native.js} (88%)
 create mode 100644 react/features/large-video/components/LargeVideo.web.js

diff --git a/react/features/conference/components/Conference.native.js b/react/features/conference/components/Conference.native.js
index 91492d0b1..9941de18a 100644
--- a/react/features/conference/components/Conference.native.js
+++ b/react/features/conference/components/Conference.native.js
@@ -6,6 +6,7 @@ import { DialogContainer } from '../../base/dialog';
 import { Container } from '../../base/react';
 import { Filmstrip } from '../../filmstrip';
 import { LargeVideo } from '../../large-video';
+import { OverlayContainer } from '../../overlay';
 import { setToolboxVisible, Toolbox } from '../../toolbox';
 
 import { styles } from './styles';
@@ -130,12 +131,33 @@ class Conference extends Component {
                 style = { styles.conference }
                 touchFeedback = { false }>
 
+                {/*
+                  * The LargeVideo is the lowermost stacking layer.
+                  */}
                 <LargeVideo />
 
-                <Toolbox />
+                {/*
+                  * The Filmstrip is in a stacking layer above the LargeVideo.
+                  * The LargeVideo and the Filmstrip form what the Web/React app
+                  * calls "videospace". Presumably, the name and grouping stem
+                  * from the fact that these two React Components depict the
+                  * videos of the conference's participants.
+                  */}
                 <Filmstrip />
 
+                {/*
+                  * The Toolbox is in a stacking layer above the Filmstrip.
+                  */}
+                <Toolbox />
+
+                {/*
+                  * The dialogs and overlays are in the topmost stacking layers.
+                  * Generally, the dialogs and overlays should not be visible at
+                  * the same time so it is not really defined which one is above
+                  * the other.
+                  */}
                 <DialogContainer />
+                <OverlayContainer />
             </Container>
         );
     }
diff --git a/react/features/conference/components/Conference.web.js b/react/features/conference/components/Conference.web.js
index b3aee0b07..887634b9b 100644
--- a/react/features/conference/components/Conference.web.js
+++ b/react/features/conference/components/Conference.web.js
@@ -5,12 +5,11 @@ import { connect as reactReduxConnect } from 'react-redux';
 
 import { connect, disconnect } from '../../base/connection';
 import { DialogContainer } from '../../base/dialog';
-import { Watermarks } from '../../base/react';
+import { Filmstrip } from '../../filmstrip';
+import { LargeVideo } from '../../large-video';
 import { OverlayContainer } from '../../overlay';
 import { Toolbox } from '../../toolbox';
 import { HideNotificationBarStyle } from '../../unsupported-browser';
-import { VideoStatusLabel } from '../../video-status-label';
-import '../../filmstrip';
 
 declare var $: Function;
 declare var APP: Object;
@@ -68,114 +67,28 @@ class Conference extends Component {
     render() {
         return (
             <div id = 'videoconference_page'>
-                <Toolbox />
-
                 <div id = 'videospace'>
-                    <div
-                        className = 'videocontainer'
-                        id = 'largeVideoContainer'>
-                        <div id = 'sharedVideo'>
-                            <div id = 'sharedVideoIFrame' />
-                        </div>
-                        <div id = 'etherpad' />
+                    <LargeVideo />
 
-                        <Watermarks />
-
-                        <div id = 'dominantSpeaker'>
-                            <div className = 'dynamic-shadow' />
-                            <img
-                                id = 'dominantSpeakerAvatar'
-                                src = '' />
-                        </div>
-                        <span id = 'remoteConnectionMessage' />
-                        <div id = 'largeVideoWrapper'>
-                            <video
-                                autoPlay = { true }
-                                id = 'largeVideo'
-                                muted = 'true' />
-                        </div>
-                        <span id = 'localConnectionMessage' />
-                        <VideoStatusLabel />
-                        <span
-                            className
-                                = 'video-state-indicator centeredVideoLabel'
-                            id = 'recordingLabel'>
-                            <span id = 'recordingLabelText' />
-                            <img
-                                className = 'recordingSpinner'
-                                id = 'recordingSpinner'
-                                src = 'images/spin.svg' />
-                        </span>
-                    </div>
-                    { this._renderFilmstrip() }
+                    <Filmstrip />
                 </div>
 
+                <Toolbox />
+
                 <DialogContainer />
                 <OverlayContainer />
+
+                {/*
+                  * Temasys automatically injects a notification bar, if
+                  * necessary, displayed at the top of the page notifying that
+                  * WebRTC is not installed or supported. We do not need/want
+                  * the notification bar in question because we have whole pages
+                  * dedicated to the respective scenarios.
+                  */}
                 <HideNotificationBarStyle />
             </div>
         );
     }
-
-    /**
-     * Creates a React Element for displaying filmstrip videos.
-     *
-     * @private
-     * @returns {ReactElement}
-     */
-    _renderFilmstrip() {
-        return (
-            <div className = 'filmstrip'>
-                <div
-                    className = 'filmstrip__videos'
-                    id = 'remoteVideos'>
-                    <div
-                        className = 'filmstrip__videos'
-                        id = 'filmstripLocalVideo'>
-                        <span
-                            className = 'videocontainer'
-                            id = 'localVideoContainer'>
-                            <div className = 'videocontainer__background' />
-                            <span id = 'localVideoWrapper' />
-                            <audio
-                                autoPlay = { true }
-                                id = 'localAudio'
-                                muted = { true } />
-                            <div className = 'videocontainer__toolbar' />
-                            <div className = 'videocontainer__toptoolbar' />
-                            <div
-                                className
-                                    = 'videocontainer__hoverOverlay' />
-                        </span>
-                    </div>
-                    <div
-                        className = 'filmstrip__videos'
-                        id = 'filmstripRemoteVideos'>
-                        {
-
-                            /*
-                                This extra video container is needed for
-                                scrolling thumbnails in firefox, otherwise the
-                                flex thumbnails resize instead of causing
-                                overflow.
-                            */
-                        }
-                        <div
-                            className = 'remote-videos-container'
-                            id = 'filmstripRemoteVideosContainer' />
-                    </div>
-                    <audio
-                        id = 'userJoined'
-                        preload = 'auto'
-                        src = 'sounds/joined.wav' />
-                    <audio
-                        id = 'userLeft'
-                        preload = 'auto'
-                        src = 'sounds/left.wav' />
-                </div>
-            </div>
-        );
-    }
 }
 
 export default reactReduxConnect()(Conference);
diff --git a/react/features/filmstrip/components/Filmstrip.native.js b/react/features/filmstrip/components/Filmstrip.native.js
index 7cd429c78..1189ea89a 100644
--- a/react/features/filmstrip/components/Filmstrip.native.js
+++ b/react/features/filmstrip/components/Filmstrip.native.js
@@ -1,3 +1,5 @@
+/* @flow */
+
 import React, { Component } from 'react';
 import { ScrollView } from 'react-native';
 import { connect } from 'react-redux';
@@ -8,7 +10,8 @@ import Thumbnail from './Thumbnail';
 import { styles } from './_';
 
 /**
- * React component for filmstrip.
+ * Implements a React {@link Component} which represents the filmstrip on
+ * mobile/React Native.
  *
  * @extends Component
  */
@@ -40,6 +43,7 @@ class Filmstrip extends Component {
      * Implements React's {@link Component#render()}.
      *
      * @inheritdoc
+     * @returns {ReactElement}
      */
     render() {
         return (
diff --git a/react/features/filmstrip/components/Filmstrip.web.js b/react/features/filmstrip/components/Filmstrip.web.js
index e69de29bb..79219175a 100644
--- a/react/features/filmstrip/components/Filmstrip.web.js
+++ b/react/features/filmstrip/components/Filmstrip.web.js
@@ -0,0 +1,65 @@
+/* @flow */
+
+import React, { Component } from 'react';
+
+/**
+ * Implements a React {@link Component} which represents the filmstrip on
+ * Web/React.
+ *
+ * @extends Component
+ */
+export default class Filmstrip extends Component {
+    /**
+     * Implements React's {@link Component#render()}.
+     *
+     * @inheritdoc
+     * @returns {ReactElement}
+     */
+    render() {
+        return (
+            <div className = 'filmstrip'>
+                <div
+                    className = 'filmstrip__videos'
+                    id = 'remoteVideos'>
+                    <div
+                        className = 'filmstrip__videos'
+                        id = 'filmstripLocalVideo'>
+                        <span
+                            className = 'videocontainer'
+                            id = 'localVideoContainer'>
+                            <div className = 'videocontainer__background' />
+                            <span id = 'localVideoWrapper' />
+                            <audio
+                                autoPlay = { true }
+                                id = 'localAudio'
+                                muted = { true } />
+                            <div className = 'videocontainer__toolbar' />
+                            <div className = 'videocontainer__toptoolbar' />
+                            <div className = 'videocontainer__hoverOverlay' />
+                        </span>
+                    </div>
+                    <div
+                        className = 'filmstrip__videos'
+                        id = 'filmstripRemoteVideos'>
+                        {/*
+                          * This extra video container is needed for scrolling
+                          * thumbnails in Firefox; otherwise, the flex
+                          * thumbnails resize instead of causing overflow.
+                          */}
+                        <div
+                            className = 'remote-videos-container'
+                            id = 'filmstripRemoteVideosContainer' />
+                    </div>
+                    <audio
+                        id = 'userJoined'
+                        preload = 'auto'
+                        src = 'sounds/joined.wav' />
+                    <audio
+                        id = 'userLeft'
+                        preload = 'auto'
+                        src = 'sounds/left.wav' />
+                </div>
+            </div>
+        );
+    }
+}
diff --git a/react/features/filmstrip/components/_.web.js b/react/features/filmstrip/components/_.web.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/react/features/large-video/components/LargeVideo.js b/react/features/large-video/components/LargeVideo.native.js
similarity index 88%
rename from react/features/large-video/components/LargeVideo.js
rename to react/features/large-video/components/LargeVideo.native.js
index d485dca44..6f623e95e 100644
--- a/react/features/large-video/components/LargeVideo.js
+++ b/react/features/large-video/components/LargeVideo.native.js
@@ -1,3 +1,5 @@
+/* @flow */
+
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 
@@ -6,7 +8,8 @@ import { ParticipantView } from '../../base/participants';
 import { styles } from './styles';
 
 /**
- * Large video React component.
+ * Implements a React {@link Component} which represents the large video (a.k.a.
+ * the conference participant who is on the local stage) on mobile/React Native.
  *
  * @extends Component
  */
diff --git a/react/features/large-video/components/LargeVideo.web.js b/react/features/large-video/components/LargeVideo.web.js
new file mode 100644
index 000000000..6859133b8
--- /dev/null
+++ b/react/features/large-video/components/LargeVideo.web.js
@@ -0,0 +1,62 @@
+/* @flow */
+
+import React, { Component } from 'react';
+
+import { Watermarks } from '../../base/react';
+import { VideoStatusLabel } from '../../video-status-label';
+
+/**
+ * Implements a React {@link Component} which represents the large video (a.k.a.
+ * the conference participant who is on the local stage) on Web/React.
+ *
+ * @extends Component
+ */
+export default class LargeVideo extends Component {
+    /**
+     * Implements React's {@link Component#render()}.
+     *
+     * @inheritdoc
+     * @returns {ReactElement}
+     */
+    render() {
+        return (
+            <div
+                className = 'videocontainer'
+                id = 'largeVideoContainer'>
+                <div id = 'sharedVideo'>
+                    <div id = 'sharedVideoIFrame' />
+                </div>
+                <div id = 'etherpad' />
+
+                <Watermarks />
+
+                <div id = 'dominantSpeaker'>
+                    <div className = 'dynamic-shadow' />
+                    <img
+                        id = 'dominantSpeakerAvatar'
+                        src = '' />
+                </div>
+                <span id = 'remoteConnectionMessage' />
+                <div id = 'largeVideoWrapper'>
+                    <video
+                        autoPlay = { true }
+                        id = 'largeVideo'
+                        muted = { true } />
+                </div>
+                <span id = 'localConnectionMessage' />
+
+                <VideoStatusLabel />
+
+                <span
+                    className = 'video-state-indicator centeredVideoLabel'
+                    id = 'recordingLabel'>
+                    <span id = 'recordingLabelText' />
+                    <img
+                        className = 'recordingSpinner'
+                        id = 'recordingSpinner'
+                        src = 'images/spin.svg' />
+                </span>
+            </div>
+        );
+    }
+}