VladPolskiy/nextcloud-spreed
1
0
Fork 0
mirror of https://github.com/nextcloud/spreed.git synced 2025-07-31 02:21:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

initial styling for 1-on-1 calls

Browse Source
This commit is contained in:
Jan-Christoph Borchardt
2016-09-20 17:43:23 +02:00
parent 57942fa7fc
commit dae6491617
5 changed files with 59 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
css/style.css
View File

@ -1,27 +1,55 @@
.participants-2 {
background-color: red;
}
video {
width: 100%;
z-index: 0;
max-height: 100%;
}
.videoView {
width: 33%;
float: left;
}
.participants-1 .videoView,
.videoContainer {
width: 33%;
float: left;
}
.nameIndicator {
position: relative;
width: 50%;
float: left;
border-radius: none;
}
.videoView {
position: absolute;
width: 33%;
right: 20px;
bottom: 20px;
z-index: 10;
}
.videoView video {
border-radius: 3px;
}
#app-content.participants-2 {
background-color: #000;
}
.participants-2 .videoContainer {
position: absolute;
width: 100%;
height: 100%;
}
.nameIndicator {
position: absolute;
bottom: 5%;
z-index: 5;
color: white;
color: #fff;
width: 100%;
text-align: center;
float: left;
top: -50px;
font-size: 16px;
}
.nameIndicator button {
opacity: 0.9;
background-color: transparent;
border: none;
width: 44px;
height: 44px;
background-size: 25px;
}
.nameIndicator button.audio-disabled,
.nameIndicator button.video-disabled {
opacity: .5;
}

4
img/app.svg Normal file
View File

@ -0,0 +1,4 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 16 16" version="1.1">
<path d="m3 3c-1.108 0-2 0.892-2 2v6c0 1.108 0.892 2 2 2h6c1.108 0 2-0.892 2-2v-1.334l4 3.334v-10l-4 3.334v-1.334c0-1.108-0.892-2-2-2z" fill="#fff"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 311 B

8
js/index.js
View File

@ -26,11 +26,11 @@ $(window).load(function() {
$('#hideVideo').click(function() {
if(videoHidden) {
webrtc.resumeVideo();
$(this).text('Disable video');
$(this).data('title', 'Disable video').removeClass('video-disabled');
videoHidden = false;
} else {
webrtc.pauseVideo();
$(this).text('Enable video');
$(this).data('title', 'Enable video').addClass('video-disabled');
videoHidden = true;
}
});
@ -38,11 +38,11 @@ $(window).load(function() {
$('#mute').click(function() {
if(audioMuted) {
webrtc.unmute();
$(this).text('Mute audio');
$(this).data('title', 'Mute audio').removeClass('audio-disabled');
audioMuted = false;
} else {
webrtc.mute();
$(this).text('Enable audio');
$(this).data('title', 'Enable audio').addClass('audio-disabled');
audioMuted = true;
}
});

7
js/webrtc.js
View File

@ -22,8 +22,11 @@ function openEventSource() {
users.forEach(function(user) {
currentUsersInRoom.push(user['userId']);
});
$('#app-content').attr('class','');
$('#app-content').addClass('participants-'+currentUsersInRoom.length);
if(currentUsersInRoom.length !== previousUsersInRoom.length) {
$('#app-content').attr('class','');
$('#app-content').addClass('participants-'+currentUsersInRoom.length);
}
var disconnectedUsers = previousUsersInRoom.diff(currentUsersInRoom);
disconnectedUsers.forEach(function(user) {

6
templates/index.php
View File

@ -38,8 +38,8 @@ script(
<div class="videoView hidden">
<video id="localVideo"></video>
<div class="nameIndicator">
<button id="mute"><?php p($l->t('Mute audio')) ?></button>
<button id="hideVideo"><?php p($l->t('Pause video')) ?></button>
<button id="mute" class="icon-audio-white" data-title="<?php p($l->t('Mute audio')) ?>"></button>
<button id="hideVideo" class="icon-video-white" data-title="<?php p($l->t('Pause video')) ?>"></button>
</div>
</div>
<div id="remotes" style="display: inline"></div>
@ -50,4 +50,4 @@ script(
<p class="uploadmessage"><?php p($l->t('Choose a room to the left or create a new one.')) ?></p>
</div>
</div>
</div>
</div>