feat(horizontal-filmstrip): scroll
This commit is contained in:
parent
dd99268461
commit
42b71fc4b9
|
@ -161,6 +161,7 @@ form {
|
|||
::-webkit-scrollbar {
|
||||
background: transparent;
|
||||
width: 7px;
|
||||
height: $scrollHeight;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-button {
|
||||
|
|
|
@ -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.
|
||||
|
|
|
@ -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();
|
||||
}
|
||||
|
|
|
@ -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
|
||||
|
@ -95,62 +91,23 @@ const Filmstrip = {
|
|||
- 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);
|
||||
|
||||
// If local thumb is not hidden
|
||||
if (thumbs.localThumb) {
|
||||
const localVideoContainer = $('#localVideoContainer');
|
||||
|
||||
// If local thumb is not hidden
|
||||
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`
|
||||
});
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue