56b12bd969
The video status labels, which include recording and hd status, have been moved back to the top left while in vertical filmstrip mode. The following had to be done: - Remove styling to move the labels to the bottom left - For VideoStatusLabel, move filmstrip remote video count, toggle state, and 1:1 state into redux. - Use middleware to emit out to the Recording label when the filmstrip changes. - Create an empty Filmstrip file for web and identify the existing Filmstrip component as native.
119 lines
2.8 KiB
SCSS
119 lines
2.8 KiB
SCSS
/**
|
|
* Override other styles to support vertical filmstrip mode.
|
|
*/
|
|
.vertical-filmstrip {
|
|
.filmstrip {
|
|
align-items: flex-end;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-direction: column-reverse;
|
|
height: 100%;
|
|
|
|
/**
|
|
* Hide videos by making them slight to the right.
|
|
*/
|
|
.filmstrip__videos {
|
|
right: 0;
|
|
transition: right 2s;
|
|
|
|
&.hidden {
|
|
bottom: auto;
|
|
right: -196px;
|
|
}
|
|
}
|
|
|
|
#filmstripLocalVideo {
|
|
height: auto;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
/**
|
|
* Remove unnecssary padding that is normally used to prevent horizontal
|
|
* filmstrip from overlapping the left edge of the screen.
|
|
*/
|
|
#filmstripLocalVideo,
|
|
#filmstripRemoteVideos {
|
|
padding: 0;
|
|
}
|
|
|
|
#filmstripRemoteVideos {
|
|
display: flex;
|
|
flex: 1;
|
|
flex-direction: column;
|
|
height: auto;
|
|
overflow-x: hidden !important;
|
|
|
|
.remote-videos-container {
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Rotate the hide filmstrip icon so it points towards the right edge
|
|
* of the screen.
|
|
*/
|
|
&__toolbar {
|
|
transform: rotate(-90deg);
|
|
}
|
|
|
|
/**
|
|
* Move the remote video menu trigger to the bottom left of the
|
|
* video thumbnail.
|
|
*/
|
|
.remotevideomenu {
|
|
bottom: 0;
|
|
left: 0;
|
|
top: auto;
|
|
right: auto;
|
|
transform: rotate(-90deg);
|
|
}
|
|
|
|
#remoteVideos {
|
|
flex-direction: column-reverse;
|
|
height: 100%;
|
|
}
|
|
|
|
.videocontainer {
|
|
/**
|
|
* Move status icons to the bottom right of the thumbnail.
|
|
*/
|
|
&__toolbar {
|
|
text-align: right;
|
|
|
|
.toolbar-icon {
|
|
float: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* For video labels that display on the top right to adjust its position as
|
|
* the filmstrip itself or filmstrip remote videos appear and disappear.
|
|
*/
|
|
.video-state-indicator {
|
|
transition: right 2s;
|
|
|
|
&.with-filmstrip {
|
|
&#recordingLabel {
|
|
right: 200px;
|
|
}
|
|
|
|
&#videoResolutionLabel {
|
|
right: 150px;
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Move toastr closer to the bottom of the screen and move left to avoid
|
|
* overlapping of videos when they are configured at default height.
|
|
*/
|
|
#toast-container {
|
|
&.notification-bottom-right {
|
|
bottom: 25px;
|
|
right: 130 + 2 * ($thumbnailVideoMargin + $thumbnailsBorder) + $thumbnailVideoBorder;
|
|
}
|
|
}
|
|
}
|