filmstrip: hide scrollbar on SIP gateways

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;
+        }
+    }
 }
 
 /**

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 {{
+ * @returns {Props}
- *     _className: string,
- *     _filmstripOnly: boolean,
- *     _hovered: boolean,
- *     _videosClassName: string,
- *     _visible: boolean
- * }}
  */
 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,