diff --git a/conference.js b/conference.js
index e1046f800..3e25317ff 100644
--- a/conference.js
+++ b/conference.js
@@ -386,7 +386,7 @@ class ConferenceConnector {
     _onConferenceFailed(err, ...params) {
         APP.store.dispatch(conferenceFailed(room, err, ...params));
         logger.error('CONFERENCE FAILED:', err, ...params);
-        APP.UI.hideRingOverLay();
+        APP.UI.hideRingOverlay();
         switch (err) {
 
         case ConferenceErrors.CONNECTION_ERROR:
@@ -2029,7 +2029,7 @@ export default {
      */
     hangup(requestFeedback = false) {
         eventEmitter.emit(JitsiMeetConferenceEvents.BEFORE_HANGUP);
-        APP.UI.hideRingOverLay();
+        APP.UI.hideRingOverlay();
         let requestFeedbackPromise = requestFeedback
                 ? APP.UI.requestFeedbackOnHangup()
                 // false - because the thank you dialog shouldn't be displayed
diff --git a/modules/UI/UI.js b/modules/UI/UI.js
index 2e713a8e4..c002f0443 100644
--- a/modules/UI/UI.js
+++ b/modules/UI/UI.js
@@ -4,10 +4,6 @@ const logger = require("jitsi-meet-logger").getLogger(__filename);
 
 var UI = {};
 
-import {
-    updateDeviceList
-} from '../../react/features/base/devices';
-
 import Chat from "./side_pannels/chat/Chat";
 import SidePanels from "./side_pannels/SidePanels";
 import Avatar from "./avatar/Avatar";
@@ -27,6 +23,10 @@ import RingOverlay from "./ring_overlay/RingOverlay";
 import UIErrors from './UIErrors';
 import { debounce } from "../util/helpers";
 
+
+import {
+    updateDeviceList
+} from '../../react/features/base/devices';
 import {
     setAudioMuted,
     setVideoMuted
@@ -493,7 +493,7 @@ UI.getSharedDocumentManager = () => etherpadManager;
 UI.addUser = function (user) {
     var id = user.getId();
     var displayName = user.getDisplayName();
-    UI.hideRingOverLay();
+    UI.hideRingOverlay();
     if (UI.ContactList)
         UI.ContactList.addContact(id);
 
@@ -1380,21 +1380,18 @@ UI.showRingOverlay = function () {
     Filmstrip.toggleFilmstrip(false, false);
 };
 
-UI.hideRingOverLay = function () {
-    if (!RingOverlay.hide())
-        return;
-    Filmstrip.toggleFilmstrip(true, false);
-};
+UI.hideRingOverlay
+    = () => RingOverlay.hide() && Filmstrip.toggleFilmstrip(true, false);
 
 /**
  * Indicates if any the "top" overlays are currently visible. The check includes
- * the call overlay, suspended overlay, GUM permissions overlay
- * and a page reload overlay.
+ * the call overlay, the suspended overlay, the GUM permissions overlay, and the
+ * page-reload overlay.
  *
- * @returns {*|boolean} {true} if the overlay is visible, {false} otherwise
+ * @returns {*|boolean} {true} if an overlay is visible; {false}, otherwise
  */
 UI.isOverlayVisible = function () {
-    return RingOverlay.isVisible() || this.overlayVisible;
+    return this.isRingOverlayVisible() || this.overlayVisible;
 };
 
 /**
diff --git a/modules/UI/ring_overlay/RingOverlay.js b/modules/UI/ring_overlay/RingOverlay.js
index 76ec0fe26..e9d58b5e1 100644
--- a/modules/UI/ring_overlay/RingOverlay.js
+++ b/modules/UI/ring_overlay/RingOverlay.js
@@ -1,5 +1,5 @@
 /* global $, APP */
-/* jshint -W101 */
+
 import UIEvents from "../../../service/UI/UIEvents";
 
 /**
@@ -24,21 +24,24 @@ class RingOverlay {
     /**
      *
      * @param callee The callee (Object) as defined by the JWT support.
-     * @param {boolean} disableRingingSound if true the ringing sound wont be played.
+     * @param {boolean} disableRinging if true the ringing sound wont be played.
      */
-    constructor(callee, disableRingingSound) {
+    constructor(callee, disableRinging) {
         this._containerId = 'ringOverlay';
         this._audioContainerId = 'ringOverlayRinging';
         this.isRinging = true;
         this.callee = callee;
-        this.disableRingingSound = disableRingingSound;
+        this.disableRinging = disableRinging;
         this.render();
-        if(!disableRingingSound)
+        if (!disableRinging)
             this._initAudio();
-        this._timeout = setTimeout(() => {
-            this.destroy();
-            this.render();
-        }, 30000);
+        this._timeout
+            = setTimeout(
+                    () => {
+                        this.destroy();
+                        this.render();
+                    },
+                    30000);
     }
 
     /**
@@ -47,7 +50,7 @@ class RingOverlay {
     _initAudio() {
         this.audio = document.getElementById(this._audioContainerId);
         this.audio.play();
-        this._setAudioTimeout();
+        this.interval = setInterval(() => this.audio.play(), 5000);
     }
 
     /**
@@ -58,7 +61,8 @@ class RingOverlay {
      */
     _changeBackground(solid) {
         const container = $("#" + this._containerId);
-        if(solid) {
+
+        if (solid) {
             container.addClass("solidBG");
         } else {
             container.removeClass("solidBG");
@@ -71,9 +75,10 @@ class RingOverlay {
     _getHtmlStr(callee) {
         let callingLabel = this.isRinging ? "<p>Calling...</p>" : "";
         let callerStateLabel =  this.isRinging ? "" : " isn't available";
-        let audioHTML = this.disableRingingSound ? ""
+        let audioHTML = this.disableRinging ? ""
             : "<audio id=\"" + this._audioContainerId
                 + "\" src=\"./sounds/ring.ogg\" />";
+
         return `
             <div id="${this._containerId}" class='ringing' >
                 <div class='ringing__content'>
@@ -120,19 +125,10 @@ class RingOverlay {
         if (this.interval) {
             clearInterval(this.interval);
         }
-        if(this._timeout) {
+        if (this._timeout) {
             clearTimeout(this._timeout);
         }
     }
-
-    /**
-     * Sets the interval that is going to play the ringing sound.
-     */
-    _setAudioTimeout() {
-        this.interval = setInterval( () => {
-            this.audio.play();
-        }, 5000);
-    }
 }
 
 export default {
@@ -141,16 +137,16 @@ export default {
      *
      * @param {Object} callee - The callee. Object containing data about
      * callee.
-     * @param {boolean} disableRingingSound - If true the ringing sound won't be
+     * @param {boolean} disableRinging - If true the ringing sound won't be
      * played.
      * @returns {void}
      */
-    show(callee, disableRingingSound = false) {
-        if(overlay) {
+    show(callee, disableRinging = false) {
+        if (overlay) {
             this.hide();
         }
 
-        overlay = new RingOverlay(callee, disableRingingSound);
+        overlay = new RingOverlay(callee, disableRinging);
         APP.UI.addListener(UIEvents.LARGE_VIDEO_AVATAR_VISIBLE,
             onAvatarVisible);
     },
@@ -160,7 +156,7 @@ export default {
      * overlay.
      */
     hide() {
-        if(!overlay) {
+        if (!overlay) {
             return false;
         }
         overlay.destroy();
@@ -176,7 +172,7 @@ export default {
      * @returns {boolean} true if the ring overlay is currently displayed or
      * false otherwise.
      */
-    isVisible () {
+    isVisible() {
         return overlay !== null;
     }
 };
diff --git a/react/features/base/connection/actions.web.js b/react/features/base/connection/actions.web.js
index ccd01ee9b..80dd21bfd 100644
--- a/react/features/base/connection/actions.web.js
+++ b/react/features/base/connection/actions.web.js
@@ -77,7 +77,7 @@ export function connect() {
             }
         })
             .catch(error => {
-                APP.UI.hideRingOverLay();
+                APP.UI.hideRingOverlay();
                 APP.API.notifyConferenceLeft(APP.conference.roomName);
                 logger.error(error);
 
diff --git a/react/features/overlay/components/OverlayContainer.js b/react/features/overlay/components/OverlayContainer.js
index 9fabca106..c89f3f792 100644
--- a/react/features/overlay/components/OverlayContainer.js
+++ b/react/features/overlay/components/OverlayContainer.js
@@ -111,11 +111,14 @@ class OverlayContainer extends Component {
 
         this.state = {
             /**
-             * Indicates whether the filmstrip only mode is enabled or not.
+             * The indicator which determines whether filmstrip-only mode is
+             * enabled.
              *
              * @type {boolean}
              */
-            filmstripOnly: interfaceConfig.filmStripOnly
+            filmstripOnly:
+                typeof interfaceConfig === 'object'
+                    && interfaceConfig.filmStripOnly
         };
     }
 
@@ -127,11 +130,13 @@ class OverlayContainer extends Component {
      * @protected
      */
     componentDidUpdate() {
-        // FIXME: Temporary workaround until everything is moved to react.
-        APP.UI.overlayVisible
-            = (this.props._connectionEstablished && this.props._haveToReload)
-                || this.props._suspendDetected
-                || this.props._isMediaPermissionPromptVisible;
+        if (typeof APP === 'object') {
+            APP.UI.overlayVisible
+                = (this.props._connectionEstablished
+                        && this.props._haveToReload)
+                    || this.props._suspendDetected
+                    || this.props._isMediaPermissionPromptVisible;
+        }
     }
 
     /**
@@ -164,7 +169,9 @@ class OverlayContainer extends Component {
                 = filmstripOnly
                     ? UserMediaPermissionsFilmstripOnlyOverlay
                     : UserMediaPermissionsOverlay;
-            props = { browser: this.props._browser };
+            props = {
+                browser: this.props._browser
+            };
         }
 
         return (
diff --git a/react/features/unsupported-browser/components/HideNotificationBarStyle.js b/react/features/unsupported-browser/components/HideNotificationBarStyle.js
index c308e4e62..fefefe8b9 100644
--- a/react/features/unsupported-browser/components/HideNotificationBarStyle.js
+++ b/react/features/unsupported-browser/components/HideNotificationBarStyle.js
@@ -1,3 +1,5 @@
+/* @flow */
+
 import React, { Component } from 'react';
 
 /**