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>
+        );
+    }
+}