diff --git a/css/_filmstrip.scss b/css/_filmstrip.scss
new file mode 100644
index 0000000000..f6c3754bd5
--- /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 a42551db3e..72e5565f49 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 cb8e25ab3f..3d2af62be1 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 c29a4087ea..a5d9063be3 100644
--- a/index.html
+++ b/index.html
@@ -166,21 +166,23 @@
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
+
+
+
diff --git a/modules/UI/videolayout/FilmStrip.js b/modules/UI/videolayout/FilmStrip.js
index 2ed3c17870..8cad067f66 100644
--- a/modules/UI/videolayout/FilmStrip.js
+++ b/modules/UI/videolayout/FilmStrip.js
@@ -23,9 +23,9 @@ const FilmStrip = {
*/
_initFilmStripToolbar() {
let toolbar = this._generateFilmStripToolbar();
+ let container = document.querySelector('.filmstrip');
- document.querySelector('#videospace')
- .insertBefore(toolbar, document.querySelector('#remoteVideos'));
+ UIUtil.prependChild(container, toolbar);
let iconSelector = '#hideVideoToolbar i';
this.toggleFilmStripIcon = document.querySelector(iconSelector);