Browse Source

filmstrip: hide scrollbar on SIP gateways

j8
Saúl Ibarra Corretgé 5 years ago
parent
commit
9b141816d6

+ 7
- 0
css/filmstrip/_vertical_filmstrip.scss View File

136
         display: flex;
136
         display: flex;
137
         transition: opacity 1s;
137
         transition: opacity 1s;
138
     }
138
     }
139
+
140
+    .hide-scrollbar#filmstripRemoteVideos {
141
+        margin-right: 7px; // Scrollbar size
142
+        &::-webkit-scrollbar {
143
+            display: none;
144
+        }
145
+    }
139
 }
146
 }
140
 
147
 
141
 /**
148
 /**

+ 15
- 8
react/features/filmstrip/components/web/Filmstrip.js View File

53
      */
53
      */
54
     _filmstripWidth: number,
54
     _filmstripWidth: number,
55
 
55
 
56
+    /**
57
+     * Whether the filmstrip scrollbar should be hidden or not.
58
+     */
59
+    _hideScrollbar: boolean,
60
+
56
     /**
61
     /**
57
      * Whether or not remote videos are currently being hovered over. Hover
62
      * Whether or not remote videos are currently being hovered over. Hover
58
      * handling is currently being handled detected outside of react.
63
      * handling is currently being handled detected outside of react.
184
         }
189
         }
185
         }
190
         }
186
 
191
 
192
+        let remoteVideosWrapperClassName = 'filmstrip__videos';
193
+
194
+        if (this.props._hideScrollbar) {
195
+            remoteVideosWrapperClassName += ' hide-scrollbar';
196
+        }
197
+
187
         return (
198
         return (
188
             <div
199
             <div
189
                 className = { `filmstrip ${this.props._className}` }
200
                 className = { `filmstrip ${this.props._className}` }
201
                         <div id = 'filmstripLocalVideoThumbnail' />
212
                         <div id = 'filmstripLocalVideoThumbnail' />
202
                     </div>
213
                     </div>
203
                     <div
214
                     <div
204
-                        className = 'filmstrip__videos'
215
+                        className = { remoteVideosWrapperClassName }
205
                         id = 'filmstripRemoteVideos'>
216
                         id = 'filmstripRemoteVideos'>
206
                         {/*
217
                         {/*
207
                           * XXX This extra video container is needed for
218
                           * XXX This extra video container is needed for
335
  *
346
  *
336
  * @param {Object} state - The Redux state.
347
  * @param {Object} state - The Redux state.
337
  * @private
348
  * @private
338
- * @returns {{
339
- *     _className: string,
340
- *     _filmstripOnly: boolean,
341
- *     _hovered: boolean,
342
- *     _videosClassName: string,
343
- *     _visible: boolean
344
- * }}
349
+ * @returns {Props}
345
  */
350
  */
346
 function _mapStateToProps(state) {
351
 function _mapStateToProps(state) {
352
+    const { iAmSipGateway } = state['features/base/config'];
347
     const { hovered, visible } = state['features/filmstrip'];
353
     const { hovered, visible } = state['features/filmstrip'];
348
     const isFilmstripOnly = Boolean(interfaceConfig.filmStripOnly);
354
     const isFilmstripOnly = Boolean(interfaceConfig.filmStripOnly);
349
     const reduceHeight
355
     const reduceHeight
362
         _currentLayout: getCurrentLayout(state),
368
         _currentLayout: getCurrentLayout(state),
363
         _filmstripOnly: isFilmstripOnly,
369
         _filmstripOnly: isFilmstripOnly,
364
         _filmstripWidth: filmstripWidth,
370
         _filmstripWidth: filmstripWidth,
371
+        _hideScrollbar: Boolean(iAmSipGateway),
365
         _hovered: hovered,
372
         _hovered: hovered,
366
         _rows: gridDimensions.rows,
373
         _rows: gridDimensions.rows,
367
         _videosClassName: videosClassName,
374
         _videosClassName: videosClassName,

Loading…
Cancel
Save