diff --git a/css/_base.scss b/css/_base.scss index c535f571fb..d03b5bfc98 100644 --- a/css/_base.scss +++ b/css/_base.scss @@ -161,6 +161,7 @@ form { ::-webkit-scrollbar { background: transparent; width: 7px; + height: $scrollHeight; } ::-webkit-scrollbar-button { diff --git a/css/_variables.scss b/css/_variables.scss index 3c0cdf5825..0520d6a994 100644 --- a/css/_variables.scss +++ b/css/_variables.scss @@ -37,7 +37,6 @@ $presence-idle: rgb(172, 172, 172); /** * Toolbar */ -$defaultToolbarSize: 50px; $newToolbarBackgroundColor: rgba(22, 38, 55, 0.8); $newToolbarButtonHoverColor: rgba(255, 255, 255, 0.15); $newToolbarButtonToggleColor: rgba(255, 255, 255, 0.2); @@ -106,6 +105,7 @@ $defaultWatermarkLink: '../images/watermark.png'; $popoverMenuPadding: 13px; $happySoftwareBackground: transparent; $desktopAppDragBarHeight: 25px; +$scrollHeight: 7px; /** * Z-indexes. TODO: Replace this by a function. diff --git a/css/filmstrip/_horizontal_filmstrip.scss b/css/filmstrip/_horizontal_filmstrip.scss index 7e657c6163..6db5a5892c 100644 --- a/css/filmstrip/_horizontal_filmstrip.scss +++ b/css/filmstrip/_horizontal_filmstrip.scss @@ -13,9 +13,24 @@ @extend %align-right; transition: bottom .3s; z-index: $filmstripVideosZ; + box-sizing: border-box; + width: 100%; + position: fixed; + + /* + * Firefox sets flex items to min-height: auto and min-width: auto, + * preventing flex children from shrinking like they do on other browsers. + * Setting min-height and min-width 0 is a workaround for the issue so + * Firefox behaves like other browsers. + * https://bugzilla.mozilla.org/show_bug.cgi?id=1043520 + */ + @mixin minHWAutoFix() { + min-height: 0; + min-width: 0; + } &.reduce-height { - bottom: $newToolbarSizeWithPadding; + bottom: calc(#{$newToolbarSizeWithPadding} + #{$scrollHeight}); } &__videos { @@ -29,8 +44,9 @@ &#remoteVideos { border: $thumbnailsBorder solid transparent; - padding-left: $defaultToolbarSize + 5; transition: bottom 2s; + flex-grow: 1; + @include minHWAutoFix() } /** @@ -74,4 +90,51 @@ pointer-events: none; } } + + #filmstripRemoteVideos { + @include minHWAutoFix(); + + display: flex; + flex: 1; + width: auto; + justify-content: flex-end; + flex-direction: row; + + #filmstripRemoteVideosContainer { + flex-direction: row-reverse; + /** + * Add padding as a hack for Firefox not to show scrollbars when + * unnecessary. + */ + padding: 1px 0; + overflow-y: hidden; + } + } + + .videocontainer { + margin-bottom: 10px; + } +} + + +/** + * Workarounds for Edge and Firefox not handling scrolling properly with + * flex-direction: row-reverse. + */ + @mixin undoRowReverseVideos() { + .horizontal-filmstrip { + #remoteVideos #filmstripRemoteVideos #filmstripRemoteVideosContainer { + flex-direction: row; + } + } +} + +/** Firefox detection hack **/ +@-moz-document url-prefix() { + @include undoRowReverseVideos(); +} + +/** Edge detection hack **/ +@supports (-ms-ime-align:auto) { + @include undoRowReverseVideos(); } diff --git a/modules/UI/videolayout/Filmstrip.js b/modules/UI/videolayout/Filmstrip.js index 71ff2c7353..d140db54b4 100644 --- a/modules/UI/videolayout/Filmstrip.js +++ b/modules/UI/videolayout/Filmstrip.js @@ -76,10 +76,6 @@ const Filmstrip = { * @returns {{availableWidth: number, availableHeight: number}} */ calculateAvailableSize() { - const state = APP.store.getState(); - const currentLayout = getCurrentLayout(state); - const isHorizontalFilmstripView = currentLayout === LAYOUTS.HORIZONTAL_FILMSTRIP_VIEW; - /** * If the videoAreaAvailableWidth is set we use this one to calculate * the filmstrip width, because we're probably in a state where the @@ -87,70 +83,31 @@ const Filmstrip = { */ const videoAreaAvailableWidth = UIUtil.getAvailableVideoWidth() - - this._getFilmstripExtraPanelsWidth() - - UIUtil.parseCssInt(this.filmstrip.css('right'), 10) - - UIUtil.parseCssInt(this.filmstrip.css('paddingLeft'), 10) - - UIUtil.parseCssInt(this.filmstrip.css('paddingRight'), 10) - - UIUtil.parseCssInt(this.filmstrip.css('borderLeftWidth'), 10) - - UIUtil.parseCssInt(this.filmstrip.css('borderRightWidth'), 10) - - 5; + - this._getFilmstripExtraPanelsWidth() + - UIUtil.parseCssInt(this.filmstrip.css('right'), 10) + - UIUtil.parseCssInt(this.filmstrip.css('paddingLeft'), 10) + - UIUtil.parseCssInt(this.filmstrip.css('paddingRight'), 10) + - UIUtil.parseCssInt(this.filmstrip.css('borderLeftWidth'), 10) + - UIUtil.parseCssInt(this.filmstrip.css('borderRightWidth'), 10) + - 5; - let availableHeight = interfaceConfig.FILM_STRIP_MAX_HEIGHT; + const availableHeight = Math.min(interfaceConfig.FILM_STRIP_MAX_HEIGHT || 120, window.innerHeight - 18); let availableWidth = videoAreaAvailableWidth; - const thumbs = this.getThumbs(true); + const localVideoContainer = $('#localVideoContainer'); // If local thumb is not hidden - if (thumbs.localThumb) { - const localVideoContainer = $('#localVideoContainer'); - + if (!localVideoContainer.has('hidden')) { availableWidth = Math.floor( videoAreaAvailableWidth - ( - UIUtil.parseCssInt( - localVideoContainer.css('borderLeftWidth'), 10) - + UIUtil.parseCssInt( - localVideoContainer.css('borderRightWidth'), 10) - + UIUtil.parseCssInt( - localVideoContainer.css('paddingLeft'), 10) - + UIUtil.parseCssInt( - localVideoContainer.css('paddingRight'), 10) - + UIUtil.parseCssInt( - localVideoContainer.css('marginLeft'), 10) - + UIUtil.parseCssInt( - localVideoContainer.css('marginRight'), 10)) + UIUtil.parseCssInt(localVideoContainer.css('borderLeftWidth'), 10) + + UIUtil.parseCssInt(localVideoContainer.css('borderRightWidth'), 10) + + UIUtil.parseCssInt(localVideoContainer.css('paddingLeft'), 10) + + UIUtil.parseCssInt(localVideoContainer.css('paddingRight'), 10) + + UIUtil.parseCssInt(localVideoContainer.css('marginLeft'), 10) + + UIUtil.parseCssInt(localVideoContainer.css('marginRight'), 10)) ); } - // If the number of videos is 0 or undefined or we're not in horizontal - // filmstrip mode we don't need to calculate further any adjustments - // to width based on the number of videos present. - const numvids = thumbs.remoteThumbs.length; - - if (numvids && isHorizontalFilmstripView) { - const remoteVideoContainer = thumbs.remoteThumbs.eq(0); - - availableWidth = Math.floor( - videoAreaAvailableWidth - (numvids * ( - UIUtil.parseCssInt( - remoteVideoContainer.css('borderLeftWidth'), 10) - + UIUtil.parseCssInt( - remoteVideoContainer.css('borderRightWidth'), 10) - + UIUtil.parseCssInt( - remoteVideoContainer.css('paddingLeft'), 10) - + UIUtil.parseCssInt( - remoteVideoContainer.css('paddingRight'), 10) - + UIUtil.parseCssInt( - remoteVideoContainer.css('marginLeft'), 10) - + UIUtil.parseCssInt( - remoteVideoContainer.css('marginRight'), 10))) - ); - } - - // If the MAX_HEIGHT property hasn't been specified - // we have the static value. - const maxHeight = Math.min(interfaceConfig.FILM_STRIP_MAX_HEIGHT || 120, availableHeight); - - availableHeight = Math.min(maxHeight, window.innerHeight - 18); - return { availableHeight, availableWidth @@ -231,10 +188,8 @@ const Filmstrip = { * availableHeight/h > availableWidth/totalWidth otherwise 2) is true */ - const remoteThumbsInRow = interfaceConfig.VERTICAL_FILMSTRIP ? 0 : this.getThumbs(true).remoteThumbs.length; const remoteLocalWidthRatio = interfaceConfig.REMOTE_THUMBNAIL_RATIO / interfaceConfig.LOCAL_THUMBNAIL_RATIO; - const lW = Math.min(availableWidth / ((remoteLocalWidthRatio * remoteThumbsInRow) + 1), - availableHeight * interfaceConfig.LOCAL_THUMBNAIL_RATIO); + const lW = Math.min(availableWidth, availableHeight * interfaceConfig.LOCAL_THUMBNAIL_RATIO); const h = lW / interfaceConfig.LOCAL_THUMBNAIL_RATIO; const remoteVideoWidth = lW * remoteLocalWidthRatio; @@ -378,8 +333,8 @@ const Filmstrip = { }); } else if (currentLayout === LAYOUTS.HORIZONTAL_FILMSTRIP_VIEW) { this.filmstrip.css({ - // adds 4 px because of small video 2px border - height: `${remote.thumbHeight + 4}px` + // adds 4 px because of small video 2px border and 10px margin for the scroll + height: `${remote.thumbHeight + 14}px` }); }