haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(filmstrip): Separate remote videos and local video 

The 1:1 call UI and vertical filmstrip act on remote videos
while leaving local video alone. To facilitate acting only on
remote videos, place remote videos into their own container element.
This commit is contained in:
Leonard Kim 2017-05-17 14:05:48 -07:00
parent 23fea490aa
commit 82ecfac4ee
5 changed files with 73 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
css/_filmstrip.scss
View File

@ -62,10 +62,18 @@
videos. */ videos. */
font-size: 0pt; font-size: 0pt;
#filmstripLocalVideo {
padding-left: 0;
}
&.hidden { &.hidden {
bottom: -196px; bottom: -196px;
} }
.remote-videos-container {
display: flex;
}
.videocontainer { .videocontainer {
display: none; display: none;
position: relative; position: relative;

2
modules/UI/shared_video/SharedVideo.js
View File

@ -656,7 +656,7 @@ SharedVideoThumb.prototype.createContainer = function (spanId) {
avatar.src = "https://img.youtube.com/vi/" + this.url + "/0.jpg"; avatar.src = "https://img.youtube.com/vi/" + this.url + "/0.jpg";
container.appendChild(avatar); container.appendChild(avatar);
var remotes = document.getElementById('remoteVideos'); var remotes = document.getElementById('filmstripRemoteVideosContainer');
return remotes.appendChild(container); return remotes.appendChild(container);
}; };

4
modules/UI/videolayout/Filmstrip.js
View File

@ -14,6 +14,7 @@ const Filmstrip = {
this.iconMenuUpClassName = 'icon-menu-up'; this.iconMenuUpClassName = 'icon-menu-up';
this.filmstripContainerClassName = 'filmstrip'; this.filmstripContainerClassName = 'filmstrip';
this.filmstrip = $('#remoteVideos'); this.filmstrip = $('#remoteVideos');
this.filmstripRemoteVideos = $('#filmstripRemoteVideosContainer');
this.eventEmitter = eventEmitter; this.eventEmitter = eventEmitter;
// Show the toggle button and add event listeners only when out of // Show the toggle button and add event listeners only when out of
@ -456,8 +457,7 @@ const Filmstrip = {
} }
let localThumb = $("#localVideoContainer"); let localThumb = $("#localVideoContainer");
let remoteThumbs = this.filmstrip.children(selector) let remoteThumbs = this.filmstripRemoteVideos.children(selector);
.not("#localVideoContainer");
// Exclude the local video container if it has been hidden. // Exclude the local video container if it has been hidden.
if (localThumb.hasClass("hidden")) { if (localThumb.hasClass("hidden")) {

2
modules/UI/videolayout/RemoteVideo.js
View File

@ -800,7 +800,7 @@ RemoteVideo.createContainer = function (spanId) {
overlay.className = "videocontainer__hoverOverlay"; overlay.className = "videocontainer__hoverOverlay";
container.appendChild(overlay); container.appendChild(overlay);
var remotes = document.getElementById('remoteVideos'); var remotes = document.getElementById('filmstripRemoteVideosContainer');
return remotes.appendChild(container); return remotes.appendChild(container);
}; };

90
react/features/conference/components/Conference.web.js
View File

@ -106,35 +106,7 @@ class Conference extends Component {
src = 'images/spin.svg' /> src = 'images/spin.svg' />
</span> </span>
</div> </div>
<div className = 'filmstrip'> { this._renderFilmstrip() }
<div
className = 'filmstrip__videos'
id = 'remoteVideos'>
<span
className = 'videocontainer'
id = 'localVideoContainer'>
<div className = 'videocontainer__background' />
<span id = 'localVideoWrapper' />
<audio
autoPlay = { true }
id = 'localAudio'
muted = { true } />
<div className = 'videocontainer__toolbar' />
<div className = 'videocontainer__toptoolbar' />
<div
className
= 'videocontainer__hoverOverlay' />
</span>
<audio
id = 'userJoined'
preload = 'auto'
src = 'sounds/joined.wav' />
<audio
id = 'userLeft'
preload = 'auto'
src = 'sounds/left.wav' />
</div>
</div>
</div> </div>
<DialogContainer /> <DialogContainer />
@ -143,6 +115,66 @@ class Conference extends Component {
</div> </div>
); );
} }
/**
* Creates a React Element for displaying filmstrip videos.
*
* @private
* @returns {ReactElement}
*/
_renderFilmstrip() {
return (
<div className = 'filmstrip'>
<div
className = 'filmstrip__videos'
id = 'remoteVideos'>
<div
className = 'filmstrip__videos'
id = 'filmstripLocalVideo'>
<span
className = 'videocontainer'
id = 'localVideoContainer'>
<div className = 'videocontainer__background' />
<span id = 'localVideoWrapper' />
<audio
autoPlay = { true }
id = 'localAudio'
muted = { true } />
<div className = 'videocontainer__toolbar' />
<div className = 'videocontainer__toptoolbar' />
<div
className
= 'videocontainer__hoverOverlay' />
</span>
</div>
<div
className = 'filmstrip__videos'
id = 'filmstripRemoteVideos'>
{
/*
This extra video container is needed for
scrolling thumbnails in firefox, otherwise the
flex thumbnails resize instead of causing
overflow.
*/
}
<div
className = 'remote-videos-container'
id = 'filmstripRemoteVideosContainer' />
</div>
<audio
id = 'userJoined'
preload = 'auto'
src = 'sounds/joined.wav' />
<audio
id = 'userLeft'
preload = 'auto'
src = 'sounds/left.wav' />
</div>
</div>
);
}
} }
export default reactReduxConnect()(Conference); export default reactReduxConnect()(Conference);