Add wrapper
This commit is contained in:
Ilya Daynatovich
parent
69e4f49e74
commit
02ae3b3053
|
|
@ -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 <object/> element is used
|
||||
instead of <video/> */
|
||||
& > video,
|
||||
& > object {
|
||||
cursor: hand;
|
||||
border-radius:1px;
|
||||
object-fit: cover;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.filmstripToolbar + #remoteVideos {
|
||||
padding-right: 24px;
|
||||
}
|
||||
|
|
@ -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 <object/> element is used
|
||||
instead of <video/> */
|
||||
#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;
|
||||
}
|
||||
|
|
@ -63,5 +63,6 @@
|
|||
@import 'aui-components/dropdown';
|
||||
@import '404';
|
||||
@import 'policy';
|
||||
@import 'filmstrip';
|
||||
|
||||
/* Modules END */
|
||||
|
|
|
|||
28
index.html
28
index.html
|
|
@ -166,21 +166,23 @@
|
|||
<img id="recordingSpinner" class="recordingSpinner" src="images/spin.svg"></img>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div id="remoteVideos">
|
||||
<span id="localVideoContainer" class="videocontainer videocontainer_small">
|
||||
<div class="videocontainer__background"></div>
|
||||
<span id="localVideoWrapper">
|
||||
<!--<video id="localVideo" autoplay muted></video> - is now per stream generated -->
|
||||
<div class="filmstrip">
|
||||
<div class="filmstrip__videos" id="remoteVideos">
|
||||
<span id="localVideoContainer" class="videocontainer videocontainer_small">
|
||||
<div class="videocontainer__background"></div>
|
||||
<span id="localVideoWrapper">
|
||||
<!--<video id="localVideo" autoplay muted></video> - is now per stream generated -->
|
||||
</span>
|
||||
<audio id="localAudio" autoplay muted></audio>
|
||||
<div class="videocontainer__toolbar"></div>
|
||||
<div class="videocontainer__toptoolbar"></div>
|
||||
<div class="videocontainer__hoverOverlay"></div>
|
||||
</span>
|
||||
<audio id="localAudio" autoplay muted></audio>
|
||||
<div class="videocontainer__toolbar"></div>
|
||||
<div class="videocontainer__toptoolbar"></div>
|
||||
<div class="videocontainer__hoverOverlay"></div>
|
||||
</span>
|
||||
<audio id="userJoined" src="sounds/joined.wav" preload="auto"></audio>
|
||||
<audio id="userLeft" src="sounds/left.wav" preload="auto"></audio>
|
||||
<audio id="userJoined" src="sounds/joined.wav" preload="auto"></audio>
|
||||
<audio id="userLeft" src="sounds/left.wav" preload="auto"></audio>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div id="keyboard-shortcuts" class="keyboard-shortcuts" style="display:none;">
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
Loading…
Reference in New Issue