diff --git a/css/_filmstrip.scss b/css/_filmstrip.scss new file mode 100644 index 000000000..f6c3754bd --- /dev/null +++ b/css/_filmstrip.scss @@ -0,0 +1,76 @@ +.filmstrip { + &__videos { + @include flex(); + flex-direction: row-reverse; + flex-wrap: nowrap; + justify-content: flex-start; + + position:absolute; + text-align:right; + height:196px; + padding: 10px 10px 17px 5px; + bottom: 0; + right: 0; + width:auto; + border: 2px solid transparent; + z-index: 5; + transition: bottom 2s; + overflow: visible !important; + font-size: 0pt; /*!!!Removes the gap between the local video container and the remote videos.*/ + + &.hidden { + bottom: -196px; + } + + .videocontainer { + display: none; + position: relative; + background-size: contain; + border: 2px solid transparent; + border-radius:1px; + margin: 0 $thumbnailVideoMargin; + + &.videoContainerFocused, &:hover { + cursor: hand; + } + + /** + * Focused video thumbnail. + */ + &.videoContainerFocused { + transition-duration: 0.5s; + -webkit-transition-duration: 0.5s; + -webkit-animation-name: greyPulse; + -webkit-animation-duration: 2s; + -webkit-animation-iteration-count: 1; + border: 2px solid $videoThumbnailSelected !important; + box-shadow: inset 0 0 3px $videoThumbnailSelected, + 0 0 3px $videoThumbnailSelected !important; + } + + /** + * Hovered video thumbnail. + */ + &:hover { + cursor: hand; + border: 2px solid $videoThumbnailHovered; + box-shadow: inset 0 0 3px $videoThumbnailHovered, + 0 0 3px $videoThumbnailHovered; + } + + /* With TemasysWebRTC plugin element is used + instead of */ + & > video, + & > object { + cursor: hand; + border-radius:1px; + object-fit: cover; + overflow: hidden; + } + } + } +} + +.filmstripToolbar + #remoteVideos { + padding-right: 24px; +} \ No newline at end of file diff --git a/css/_videolayout_default.scss b/css/_videolayout_default.scss index a42551db3..72e5565f4 100644 --- a/css/_videolayout_default.scss +++ b/css/_videolayout_default.scss @@ -12,34 +12,6 @@ overflow: hidden; } -#remoteVideos { - display: -webkit-box; - display: -moz-box; - display: -ms-flexbox; - display: -webkit-flex; - display: flex; - flex-direction: row-reverse; - flex-wrap: nowrap; - justify-content: flex-start; - - position:absolute; - text-align:right; - height:196px; - padding: 10px 10px 17px 5px; - bottom: 0; - right: 0; - width:auto; - border: 2px solid transparent; - z-index: 5; - transition: bottom 2s; - overflow: visible !important; - font-size: 0pt; /*!!!Removes the gap between the local video container and the remote videos.*/ -} - -#remotevideos.hidden { - bottom: -196px; -} - .videocontainer { position: relative; text-align: center; @@ -52,15 +24,6 @@ } } -#remoteVideos .videocontainer { - display: none; - position: relative; - background-size: contain; - border: 2px solid transparent; - border-radius:1px; - margin: 0 $thumbnailVideoMargin; -} - /** * The toolbar of the video thumbnail. */ @@ -96,48 +59,10 @@ z-index: 2; } -#remoteVideos .videocontainer.videoContainerFocused, -#remoteVideos .videocontainer:hover { - cursor: hand; -} -/** - * Focused video thumbnail. - */ -#remoteVideos .videocontainer.videoContainerFocused { - transition-duration: 0.5s; - -webkit-transition-duration: 0.5s; - -webkit-animation-name: greyPulse; - -webkit-animation-duration: 2s; - -webkit-animation-iteration-count: 1; - border: 2px solid $videoThumbnailSelected !important; - box-shadow: inset 0 0 3px $videoThumbnailSelected, - 0 0 3px $videoThumbnailSelected !important; -} - -/** - * Hovered video thumbnail. - */ -#remoteVideos .videocontainer:hover { - cursor: hand; - border: 2px solid $videoThumbnailHovered; - box-shadow: inset 0 0 3px $videoThumbnailHovered, - 0 0 3px $videoThumbnailHovered; -} - #localVideoWrapper { display:inline-block; } -/* With TemasysWebRTC plugin element is used - instead of */ -#remoteVideos .videocontainer>video, -#remoteVideos .videocontainer>object { - cursor: hand; - border-radius:1px; - object-fit: cover; - overflow: hidden; -} - .flipVideoX { transform: scale(-1, 1); -moz-transform: scale(-1, 1); @@ -637,8 +562,4 @@ cursor: pointer; } } -} - -.filmstripToolbar + #remoteVideos { - padding-right: 24px; } \ No newline at end of file diff --git a/css/main.scss b/css/main.scss index cb8e25ab3..3d2af62be 100644 --- a/css/main.scss +++ b/css/main.scss @@ -63,5 +63,6 @@ @import 'aui-components/dropdown'; @import '404'; @import 'policy'; +@import 'filmstrip'; /* Modules END */ diff --git a/index.html b/index.html index c29a4087e..a5d9063be 100644 --- a/index.html +++ b/index.html @@ -166,21 +166,23 @@ - -