feat(filmstrip) Updated filmstrip design (#10791)

Added background on hover
Updated toggle button
Made vertical filmstrip full height on desktop

css/_toolbars.scss

@@ -30,7 +30,7 @@
     transition: bottom .3s ease-in;
     width: 100%;
     pointer-events: none;
-
+    z-index: $toolbarZ + 2;
 
     &.visible {
         bottom: 0;

css/filmstrip/_filmstrip_toolbar.scss

@@ -1,30 +0,0 @@
-.filmstrip__toolbar {
-    @include flex();
-    flex-direction: column-reverse;
-    flex-wrap: nowrap;
-    position: relative;
-    width: $filmstripToggleButtonWidth;
-
-    button {
-        font-size: 14px;
-        line-height: 1.2;
-        text-align: center;
-        background: transparent;
-        opacity: 0.7;
-        height: auto;
-        width: 100%;
-        padding: 0;
-        margin: 0;
-        border: none;
-
-        -webkit-appearance: none;
-
-        &:hover {
-            opacity: 1;
-        }
-
-        i {
-            cursor: pointer;
-        }
-    }
-}

css/filmstrip/_horizontal_filmstrip.scss

@@ -6,11 +6,8 @@
 }
 
 .horizontal-filmstrip .filmstrip {
-    bottom: 0;
-    right: 0;
     padding: 10px 5px;
     @extend %align-right;
-    transition: bottom .3s;
     z-index: $filmstripVideosZ;
     box-sizing: border-box;
     width: 100%;
@@ -58,7 +55,7 @@
         }
 
         &.hidden {
-            bottom: calc(-196px - #{$newToolbarSizeWithPadding});
+            bottom: calc(-196px - #{$newToolbarSizeWithPadding} + 50px);
         }
     }
 

css/filmstrip/_tile_view_overrides.scss

@@ -17,8 +17,7 @@
     #dominantSpeaker,
     #filmstripLocalVideoThumbnail,
     #largeVideoElementsContainer,
-    #sharedVideo,
-    .filmstrip__toolbar {
+    #sharedVideo {
         display: none;
     }
 

css/filmstrip/_vertical_filmstrip.scss

@@ -37,7 +37,6 @@
      */
     position: fixed;
     top: 0;
-    transition: height .3s ease-in;
     right: 0;
     z-index: $filmstripVideosZ;
 
@@ -52,11 +51,6 @@
         right: 0;
         width: auto;
 
-        &.hidden {
-            bottom: auto;
-            right: -196px;
-        }
-
         /**
          * An id selector is used to match id specificity with existing
          * filmstrip styles.
@@ -64,7 +58,6 @@
         &#remoteVideos {
             border: $thumbnailsBorder solid transparent;
             padding-left: 0;
-            transition: right 2s;
             width: 100%;
         }
     }

css/filmstrip/_vertical_filmstrip_overrides.scss

@@ -1,11 +1,3 @@
-/**
- * Rotate the hide filmstrip icon so it points towards the right edge
- * of the screen.
- */
-.vertical-filmstrip .filmstrip__toolbar {
-    transform: rotate(-90deg);
-}
-
 /**
  * Overrides for video containers that should not be centered aligned to avoid=
  * clashing with the filmstrip.

css/main.scss

@@ -69,7 +69,6 @@ $flagsImagePath: "../images/";
 @import '404';
 @import 'policy';
 @import 'popover';
-@import 'filmstrip/filmstrip_toolbar';
 @import 'filmstrip/horizontal_filmstrip';
 @import 'filmstrip/small_video';
 @import 'filmstrip/tile_view';

react/features/filmstrip/components/web/Filmstrip.js

@@ -1,5 +1,7 @@
 /* @flow */
 
+import { withStyles } from '@material-ui/styles';
+import clsx from 'clsx';
 import React, { PureComponent } from 'react';
 import { FixedSizeList, FixedSizeGrid } from 'react-window';
 import type { Dispatch } from 'redux';
@@ -80,6 +82,11 @@ type Props = {
      */
     _isFilmstripButtonEnabled: boolean,
 
+    /**
+     * Whether or not the current layout is vertical filmstrip.
+     */
+    _isVerticalFilmstrip: boolean,
+
     /**
      * The participants in the call.
      */
@@ -125,6 +132,11 @@ type Props = {
      */
     _isToolboxVisible: Boolean,
 
+    /**
+     * An object containing the CSS classes.
+     */
+    classes: Object,
+
     /**
      * The redux {@code dispatch} function.
      */
@@ -136,6 +148,84 @@ type Props = {
     t: Function
 };
 
+/**
+ * Creates the styles for the component.
+ *
+ * @param {Object} theme - The current theme.
+ * @returns {Object}
+ */
+const styles = theme => {
+    return {
+        toggleFilmstripContainer: {
+            display: 'flex',
+            flexWrap: 'nowrap',
+            alignItems: 'center',
+            justifyContent: 'center',
+            backgroundColor: 'rgba(0, 0, 0, .6)',
+            width: '32px',
+            height: '24px',
+            position: 'absolute',
+            borderRadius: '4px',
+            top: 'calc(-24px - 2px)',
+            left: 'calc(50% - 16px)',
+            opacity: 0,
+            transition: 'opacity .3s'
+        },
+
+        toggleFilmstripButton: {
+            fontSize: '14px',
+            lineHeight: 1.2,
+            textAlign: 'center',
+            background: 'transparent',
+            height: 'auto',
+            width: '100%',
+            padding: 0,
+            margin: 0,
+            border: 'none',
+
+            '-webkit-appearance': 'none',
+
+            '& svg': {
+                fill: theme.palette.icon02
+            }
+        },
+
+        toggleVerticalFilmstripContainer: {
+            transform: 'rotate(-90deg)',
+            left: 'calc(-24px - 2px - 5px)',
+            top: 'calc(50% - 16px)'
+        },
+
+        filmstrip: {
+            transition: 'background .2s ease-in-out, right 1s, bottom 1s, height .3s ease-in',
+            right: 0,
+            bottom: 0,
+
+            '&:hover': {
+                backgroundColor: 'rgba(0, 0, 0, .6)',
+
+                '& .toggleFilmstripContainer': {
+                    opacity: 1
+                }
+            },
+
+            '.horizontal-filmstrip &.hidden': {
+                bottom: '-50px',
+
+                '&:hover': {
+                    backgroundColor: 'transparent'
+                }
+            },
+
+            '&.hidden': {
+                '& .toggleFilmstripContainer': {
+                    opacity: 1
+                }
+            }
+        }
+    };
+};
+
 /**
  * Implements a React {@link Component} which represents the filmstrip on
  * Web/React.
@@ -195,7 +285,7 @@ class Filmstrip extends PureComponent <Props> {
      */
     render() {
         const filmstripStyle = { };
-        const { _currentLayout, _disableSelfView } = this.props;
+        const { _currentLayout, _disableSelfView, classes, _visible } = this.props;
         const tileViewActive = _currentLayout === LAYOUTS.TILE_VIEW;
 
         switch (_currentLayout) {
@@ -203,18 +293,24 @@ class Filmstrip extends PureComponent <Props> {
             // Adding 18px for the 2px margins, 2px borders on the left and right and 5px padding on the left and right.
             // Also adding 7px for the scrollbar.
             filmstripStyle.maxWidth = (interfaceConfig.FILM_STRIP_MAX_HEIGHT || 120) + 25;
+
+            if (!_visible) {
+                filmstripStyle.right = `-${filmstripStyle.maxWidth + 2}px`;
+            }
             break;
         }
 
         let toolbar = null;
 
-        if (!this.props._iAmRecorder && this.props._isFilmstripButtonEnabled) {
+        if (!this.props._iAmRecorder && this.props._isFilmstripButtonEnabled && _currentLayout !== LAYOUTS.TILE_VIEW) {
             toolbar = this._renderToggleButton();
         }
 
         return (
             <div
-                className = { `filmstrip ${this.props._className}` }
+                className = { clsx('filmstrip',
+                    this.props._className,
+                    classes.filmstrip) }
                 style = { filmstripStyle }>
                 { toolbar }
                 <div
@@ -534,17 +630,20 @@ class Filmstrip extends PureComponent <Props> {
      */
     _renderToggleButton() {
         const icon = this.props._visible ? IconMenuDown : IconMenuUp;
-        const { t } = this.props;
+        const { t, classes, _isVerticalFilmstrip } = this.props;
         const actions = isMobileBrowser()
             ? { onTouchStart: this._onToggleButtonTouch }
             : { onClick: this._onToolbarToggleFilmstrip };
 
         return (
             <div
-                className = 'filmstrip__toolbar'>
+                className = { clsx(classes.toggleFilmstripContainer,
+                    _isVerticalFilmstrip && classes.toggleVerticalFilmstripContainer,
+                    'toggleFilmstripContainer') }>
                 <button
                     aria-expanded = { this.props._visible }
                     aria-label = { t('toolbar.accessibilityLabel.toggleFilmstrip') }
+                    className = { classes.toggleFilmstripButton }
                     id = 'toggleFilmstripButton'
                     onFocus = { this._onTabIn }
                     tabIndex = { 0 }
@@ -600,10 +699,13 @@ function _mapStateToProps(state) {
         && isMobileBrowser()
         && clientWidth <= ASPECT_RATIO_BREAKPOINT;
 
-    const className = `${remoteVideosVisible ? '' : 'hide-videos'} ${
-        reduceHeight ? 'reduce-height' : ''
-    } ${shiftRight ? 'shift-right' : ''} ${collapseTileView ? 'collapse' : ''}`.trim();
+    const shouldReduceHeight = reduceHeight && (
+        isMobileBrowser() || _currentLayout !== LAYOUTS.VERTICAL_FILMSTRIP_VIEW);
+
     const videosClassName = `filmstrip__videos${visible ? '' : ' hidden'}`;
+    const className = `${remoteVideosVisible ? '' : 'hide-videos'} ${
+        shouldReduceHeight ? 'reduce-height' : ''
+    } ${shiftRight ? 'shift-right' : ''} ${collapseTileView ? 'collapse' : ''} ${visible ? '' : 'hidden'}`.trim();
     let _thumbnailSize, remoteFilmstripHeight, remoteFilmstripWidth;
 
     switch (_currentLayout) {
@@ -616,7 +718,7 @@ function _mapStateToProps(state) {
         const { remote, remoteVideosContainer } = state['features/filmstrip'].verticalViewDimensions;
 
         _thumbnailSize = remote;
-        remoteFilmstripHeight = remoteVideosContainer?.height - (reduceHeight ? TOOLBAR_HEIGHT : 0);
+        remoteFilmstripHeight = remoteVideosContainer?.height - (shouldReduceHeight ? TOOLBAR_HEIGHT : 0);
         remoteFilmstripWidth = remoteVideosContainer?.width;
         break;
     }
@@ -647,8 +749,9 @@ function _mapStateToProps(state) {
         _thumbnailsReordered: enableThumbnailReordering,
         _videosClassName: videosClassName,
         _visible: visible,
-        _isToolboxVisible: isToolboxVisible(state)
+        _isToolboxVisible: isToolboxVisible(state),
+        _isVerticalFilmstrip: _currentLayout === LAYOUTS.VERTICAL_FILMSTRIP_VIEW
     };
 }
 
-export default translate(connect(_mapStateToProps)(Filmstrip));
+export default withStyles(styles)(translate(connect(_mapStateToProps)(Filmstrip)));