ref(jQuery) Replace some jQuery with JS (#13102)

modules/UI/UI.js

@@ -5,7 +5,6 @@ const UI = {};
 
 import Logger from '@jitsi/logger';
 import EventEmitter from 'events';
-import $ from 'jquery';
 
 import { isMobileBrowser } from '../../react/features/base/environment/utils';
 import { setColorAlpha } from '../../react/features/base/util';
@@ -106,16 +105,16 @@ UI.start = function() {
     VideoLayout.resizeVideoArea();
 
     if (isMobileBrowser()) {
-        $('body').addClass('mobile-browser');
+        document.body.classList.add('mobile-browser');
     } else {
-        $('body').addClass('desktop-browser');
+        document.body.classList.add('desktop-browser');
     }
 
     if (config.backgroundAlpha !== undefined) {
-        const backgroundColor = $('body').css('background-color');
+        const backgroundColor = getComputedStyle(document.body).getPropertyValue('background-color');
         const alphaColor = setColorAlpha(backgroundColor, config.backgroundAlpha);
 
-        $('body').css('background-color', alphaColor);
+        document.body.style.backgroundColor = alphaColor;
     }
 
     if (config.iAmRecorder) {
@@ -134,33 +133,34 @@ UI.start = function() {
 UI.registerListeners
     = () => UIListeners.forEach((value, key) => UI.addListener(key, value));
 
+/**
+ *
+ */
+function onResize() {
+    VideoLayout.onResize();
+}
+
 /**
  * Setup some DOM event listeners.
  */
 UI.bindEvents = () => {
-    /**
-     *
-     */
-    function onResize() {
-        VideoLayout.onResize();
-    }
-
     // Resize and reposition videos in full screen mode.
-    $(document).on(
-            'webkitfullscreenchange mozfullscreenchange fullscreenchange',
-            onResize);
+    document.addEventListener('webkitfullscreenchange', onResize);
+    document.addEventListener('mozfullscreenchange', onResize);
+    document.addEventListener('fullscreenchange', onResize);
 
-    $(window).resize(onResize);
+    window.addEventListener('resize', onResize);
 };
 
 /**
  * Unbind some DOM event listeners.
  */
 UI.unbindEvents = () => {
-    $(document).off(
-            'webkitfullscreenchange mozfullscreenchange fullscreenchange');
+    document.removeEventListener('webkitfullscreenchange', onResize);
+    document.removeEventListener('mozfullscreenchange', onResize);
+    document.removeEventListener('fullscreenchange', onResize);
 
-    $(window).off('resize');
+    window.removeEventListener('resize', onResize);
 };
 
 /**

modules/UI/videolayout/Filmstrip.js

@@ -1,7 +1,5 @@
 /* global APP, interfaceConfig */
 
-import $ from 'jquery';
-
 import { getVerticalFilmstripVisibleAreaWidth, isFilmstripVisible } from '../../../react/features/filmstrip';
 
 const Filmstrip = {
@@ -14,16 +12,16 @@ const Filmstrip = {
         // horizontal film strip mode for calculating how tall large video
         // display should be.
         if (isFilmstripVisible(APP.store) && !interfaceConfig.VERTICAL_FILMSTRIP) {
-            return $('.filmstrip').outerHeight();
+            return document.querySelector('.filmstrip').offsetHeight;
         }
 
         return 0;
     },
 
     /**
-     * Returns the width of the vertical filmstip if the filmstrip is visible and 0 otherwise.
+     * Returns the width of the vertical filmstrip if the filmstrip is visible and 0 otherwise.
      *
-     * @returns {number} - The width of the vertical filmstip if the filmstrip is visible and 0 otherwise.
+     * @returns {number} - The width of the vertical filmstrip if the filmstrip is visible and 0 otherwise.
      */
     getVerticalFilmstripWidth() {
         return isFilmstripVisible(APP.store) ? getVerticalFilmstripVisibleAreaWidth() : 0;

modules/UI/videolayout/LargeVideoManager.js

@@ -128,16 +128,12 @@ export default class LargeVideoManager {
          */
         this.videoTrack = undefined;
 
-        this.$container = $('#largeVideoContainer');
+        this.container = document.getElementById('largeVideoContainer');
 
-        this.$container.css({
-            display: 'inline-block'
-        });
+        this.container.style.display = 'inline-block';
 
-        this.$container.hover(
-            e => this.onHoverIn(e),
-            e => this.onHoverOut(e)
-        );
+        this.container.addEventListener('mouseenter', e => this.onHoverIn(e));
+        this.container.addEventListener('mouseleave', e => this.onHoverOut(e));
 
         // Bind event handler so it is only bound once for every instance.
         this._onVideoResolutionUpdate
@@ -172,7 +168,7 @@ export default class LargeVideoManager {
 
         ReactDOM.unmountComponentAtNode(this._dominantSpeakerAvatarContainer);
 
-        this.$container.css({ display: 'none' });
+        this.container.style.display = 'none';
     }
 
     /**
@@ -540,8 +536,8 @@ export default class LargeVideoManager {
      * @returns {void}
      */
     updatePresenceLabel(id) {
-        const isConnectionMessageVisible
-            = $('#remoteConnectionMessage').is(':visible');
+        const isConnectionMessageVisible = getComputedStyle(
+            document.getElementById('remoteConnectionMessage')).display !== 'none';
 
         if (isConnectionMessageVisible) {
             this.removePresenceLabel();
@@ -549,9 +545,9 @@ export default class LargeVideoManager {
             return;
         }
 
-        const presenceLabelContainer = $('#remotePresenceMessage');
+        const presenceLabelContainer = document.getElementById('remotePresenceMessage');
 
-        if (presenceLabelContainer.length) {
+        if (presenceLabelContainer) {
             ReactDOM.render(
                 <Provider store = { APP.store }>
                     <I18nextProvider i18n = { i18next }>
@@ -560,7 +556,7 @@ export default class LargeVideoManager {
                             className = 'presence-label' />
                     </I18nextProvider>
                 </Provider>,
-                presenceLabelContainer.get(0));
+                presenceLabelContainer);
         }
     }
 
@@ -570,10 +566,10 @@ export default class LargeVideoManager {
      * @returns {void}
      */
     removePresenceLabel() {
-        const presenceLabelContainer = $('#remotePresenceMessage');
+        const presenceLabelContainer = document.getElementById('remotePresenceMessage');
 
-        if (presenceLabelContainer.length) {
-            ReactDOM.unmountComponentAtNode(presenceLabelContainer.get(0));
+        if (presenceLabelContainer) {
+            ReactDOM.unmountComponentAtNode(presenceLabelContainer);
         }
     }
 
@@ -582,7 +578,11 @@ export default class LargeVideoManager {
      * @param {boolean} show
      */
     showWatermark(show) {
-        $('.watermark').css('visibility', show ? 'visible' : 'hidden');
+        const watermark = document.querySelectorAll('.watermark');
+
+        watermark.forEach(el => {
+            el.style.visibility = show ? 'visible' : 'hidden';
+        });
     }
 
     /**
@@ -607,9 +607,9 @@ export default class LargeVideoManager {
         }
 
         if (show) {
-            $('#remoteConnectionMessage').css({ display: 'block' });
+            document.getElementById('remoteConnectionMessage').style.display = 'block';
         } else {
-            $('#remoteConnectionMessage').hide();
+            document.getElementById('remoteConnectionMessage').style.display = 'none';
         }
     }
 

modules/UI/videolayout/VideoContainer.js

@@ -223,15 +223,14 @@ export class VideoContainer extends LargeContainer {
          * @type {boolean}
          */
         this.avatarDisplayed = false;
-        this.$avatar = $('#dominantSpeaker');
+        this.avatar = document.getElementById('dominantSpeaker');
 
         /**
-         * A jQuery selector of the remote connection message.
-         * @type {jQuery|HTMLElement}
+         * The HTMLElements of the remote connection message.
+         * @type {HTMLElement}
          */
-        this.$remoteConnectionMessage = $('#remoteConnectionMessage');
-
-        this.$remotePresenceMessage = $('#remotePresenceMessage');
+        this.remoteConnectionMessage = document.getElementById('remoteConnectionMessage');
+        this.remotePresenceMessage = document.getElementById('remotePresenceMessage');
 
         this.$wrapper = $('#largeVideoWrapper');
 
@@ -241,7 +240,7 @@ export class VideoContainer extends LargeContainer {
          * video anyway.
          */
         this.$wrapperParent = this.$wrapper.parent();
-        this.avatarHeight = $('#dominantSpeakerAvatarContainer').height();
+        this.avatarHeight = document.getElementById('dominantSpeakerAvatarContainer').getBoundingClientRect().height;
         this.$video[0].onplaying = function(event) {
             if (typeof resizeContainer === 'function') {
                 resizeContainer(event);
@@ -358,8 +357,8 @@ export class VideoContainer extends LargeContainer {
      * @returns {void}
      */
     positionRemoteStatusMessages() {
-        this._positionParticipantStatus(this.$remoteConnectionMessage);
-        this._positionParticipantStatus(this.$remotePresenceMessage);
+        this._positionParticipantStatus(this.remoteConnectionMessage);
+        this._positionParticipantStatus(this.remotePresenceMessage);
     }
 
     /**
@@ -369,18 +368,16 @@ export class VideoContainer extends LargeContainer {
      * @private
      * @returns {void}
      */
-    _positionParticipantStatus($element) {
+    _positionParticipantStatus(element) {
         if (this.avatarDisplayed) {
-            const $avatarImage = $('#dominantSpeakerAvatarContainer');
+            const avatarImage = document.getElementById('dominantSpeakerAvatarContainer').getBoundingClientRect();
 
-            $element.css(
-                'top',
-                $avatarImage.offset().top + $avatarImage.height() + 10);
+            element.style.top = avatarImage.top + avatarImage.height + 10;
         } else {
-            const height = $element.height();
-            const parentHeight = $element.parent().height();
+            const height = element.getBoundingClientRect().height;
+            const parentHeight = element.parentElement.getBoundingClientRect().height;
 
-            $element.css('top', (parentHeight / 2) - (height / 2));
+            element.style.top = (parentHeight / 2) - (height / 2);
         }
     }
 
@@ -540,7 +537,7 @@ export class VideoContainer extends LargeContainer {
      * @param {boolean} show
      */
     showAvatar(show) {
-        this.$avatar.css('visibility', show ? 'visible' : 'hidden');
+        this.avatar.style.visibility = show ? 'visible' : 'hidden';
         this.avatarDisplayed = show;
 
         APP.API.notifyLargeVideoVisibilityChanged(show);