From 9b141816d6d1cda34f8d61b66fccd96a3bcafbde Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sa=C3=BAl=20Ibarra=20Corretg=C3=A9?= <saghul@jitsi.org>
Date: Tue, 25 Feb 2020 13:06:58 +0100
Subject: [PATCH] filmstrip: hide scrollbar on SIP gateways

---
 css/filmstrip/_vertical_filmstrip.scss        |  7 ++++++
 .../filmstrip/components/web/Filmstrip.js     | 23 ++++++++++++-------
 2 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/css/filmstrip/_vertical_filmstrip.scss b/css/filmstrip/_vertical_filmstrip.scss
index b551dcf6a..0cff59f6c 100644
--- a/css/filmstrip/_vertical_filmstrip.scss
+++ b/css/filmstrip/_vertical_filmstrip.scss
@@ -136,6 +136,13 @@
         display: flex;
         transition: opacity 1s;
     }
+
+    .hide-scrollbar#filmstripRemoteVideos {
+        margin-right: 7px; // Scrollbar size
+        &::-webkit-scrollbar {
+            display: none;
+        }
+    }
 }
 
 /**
diff --git a/react/features/filmstrip/components/web/Filmstrip.js b/react/features/filmstrip/components/web/Filmstrip.js
index 6596349ca..9654c7b48 100644
--- a/react/features/filmstrip/components/web/Filmstrip.js
+++ b/react/features/filmstrip/components/web/Filmstrip.js
@@ -53,6 +53,11 @@ type Props = {
      */
     _filmstripWidth: number,
 
+    /**
+     * Whether the filmstrip scrollbar should be hidden or not.
+     */
+    _hideScrollbar: boolean,
+
     /**
      * Whether or not remote videos are currently being hovered over. Hover
      * handling is currently being handled detected outside of react.
@@ -184,6 +189,12 @@ class Filmstrip extends Component <Props> {
         }
         }
 
+        let remoteVideosWrapperClassName = 'filmstrip__videos';
+
+        if (this.props._hideScrollbar) {
+            remoteVideosWrapperClassName += ' hide-scrollbar';
+        }
+
         return (
             <div
                 className = { `filmstrip ${this.props._className}` }
@@ -201,7 +212,7 @@ class Filmstrip extends Component <Props> {
                         <div id = 'filmstripLocalVideoThumbnail' />
                     </div>
                     <div
-                        className = 'filmstrip__videos'
+                        className = { remoteVideosWrapperClassName }
                         id = 'filmstripRemoteVideos'>
                         {/*
                           * XXX This extra video container is needed for
@@ -335,15 +346,10 @@ class Filmstrip extends Component <Props> {
  *
  * @param {Object} state - The Redux state.
  * @private
- * @returns {{
- *     _className: string,
- *     _filmstripOnly: boolean,
- *     _hovered: boolean,
- *     _videosClassName: string,
- *     _visible: boolean
- * }}
+ * @returns {Props}
  */
 function _mapStateToProps(state) {
+    const { iAmSipGateway } = state['features/base/config'];
     const { hovered, visible } = state['features/filmstrip'];
     const isFilmstripOnly = Boolean(interfaceConfig.filmStripOnly);
     const reduceHeight
@@ -362,6 +368,7 @@ function _mapStateToProps(state) {
         _currentLayout: getCurrentLayout(state),
         _filmstripOnly: isFilmstripOnly,
         _filmstripWidth: filmstripWidth,
+        _hideScrollbar: Boolean(iAmSipGateway),
         _hovered: hovered,
         _rows: gridDimensions.rows,
         _videosClassName: videosClassName,