зеркало из https://github.com/nextcloud/spreed.git
Add own screensharing options menu.
Signed-off-by: Ivan Sein <ivan@nextcloud.com>
This commit is contained in:
Ivan Sein
Родитель
55acd30c68
Коммит
bf00a79b69
|
|
@ -268,10 +268,26 @@ video {
|
|||
display: none;
|
||||
}
|
||||
|
||||
.participants-1 #toggleScreensharing {
|
||||
.participants-1 #screensharing-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#screensharing-menu {
|
||||
bottom: 44px;
|
||||
left: calc(50% - 40px);
|
||||
right: initial;
|
||||
color: initial;
|
||||
text-shadow: initial;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
#screensharing-menu.app-navigation-entry-menu:after {
|
||||
top: 100%;
|
||||
left: calc(50% - 5px);
|
||||
border-top-color: #fff;
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
|
||||
/* big speaker video */
|
||||
.participants-1 .videoContainer,
|
||||
.participants-2 .videoContainer,
|
||||
|
|
@ -419,6 +435,7 @@ video {
|
|||
.muteIndicator,
|
||||
.screensharingIndicator {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
background-color: transparent !important;
|
||||
border: none;
|
||||
width: 32px;
|
||||
|
|
@ -433,16 +450,6 @@ video {
|
|||
|
||||
.muteIndicator.audio-off {
|
||||
opacity: .7;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.screensharingIndicator.screen-on.screen-visible {
|
||||
animation: pulse 1s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.screensharingIndicator.screen-on {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#app-content:-webkit-full-screen {
|
||||
|
|
|
|||
22
js/app.js
22
js/app.js
|
|
@ -220,16 +220,17 @@
|
|||
|
||||
var screensharingStopped = function() {
|
||||
console.log("Screensharing now stopped");
|
||||
$('#toggleScreensharing').attr('data-original-title', 'Enable screensharing')
|
||||
$('#screensharing-button').attr('data-original-title', 'Enable screensharing')
|
||||
.addClass('screensharing-disabled icon-screen-off-white')
|
||||
.removeClass('icon-screen-white');
|
||||
$('#screensharing-menu').toggleClass('open', false);
|
||||
};
|
||||
|
||||
OCA.SpreedMe.webrtc.on('localScreenStopped', function() {
|
||||
screensharingStopped();
|
||||
});
|
||||
|
||||
$('#toggleScreensharing').click(function() {
|
||||
$('#screensharing-button').click(function() {
|
||||
var webrtc = OCA.SpreedMe.webrtc;
|
||||
if (!webrtc.capabilities.supportScreenSharing) {
|
||||
OC.Notification.showTemporary(t('spreed', 'Screensharing is not supported by your browser.'));
|
||||
|
|
@ -237,13 +238,12 @@
|
|||
}
|
||||
|
||||
if (webrtc.getLocalScreen()) {
|
||||
webrtc.stopScreenShare();
|
||||
screensharingStopped();
|
||||
$('#screensharing-menu').toggleClass('open');
|
||||
} else {
|
||||
webrtc.shareScreen(function(err) {
|
||||
if (!err) {
|
||||
OC.Notification.showTemporary(t('spreed', 'Screensharing is about to start…'));
|
||||
$('#toggleScreensharing').attr('data-original-title', 'Stop screensharing')
|
||||
$('#screensharing-button').attr('data-original-title', 'Screensharing options')
|
||||
.removeClass('screensharing-disabled icon-screen-off-white')
|
||||
.addClass('icon-screen-white');
|
||||
return;
|
||||
|
|
@ -284,6 +284,18 @@
|
|||
}
|
||||
});
|
||||
|
||||
$("#show-screen-button").on('click', function() {
|
||||
var currentUser = OCA.SpreedMe.webrtc.connection.getSessionid();
|
||||
OCA.SpreedMe.sharedScreens.switchScreenToId(currentUser);
|
||||
|
||||
$('#screensharing-menu').toggleClass('open', false);
|
||||
});
|
||||
|
||||
$("#stop-screen-button").on('click', function() {
|
||||
OCA.SpreedMe.webrtc.stopScreenShare();
|
||||
screensharingStopped();
|
||||
});
|
||||
|
||||
$("#guestName").on('click', function() {
|
||||
$('#guestName').addClass('hidden');
|
||||
$("#guestNameInput").removeClass('hidden');
|
||||
|
|
|
|||
34
js/webrtc.js
34
js/webrtc.js
|
|
@ -335,12 +335,23 @@ var spreedMappingTable = [];
|
|||
return;
|
||||
}
|
||||
|
||||
var screenId = OCA.SpreedMe.sharedScreens.getContainerId(id);
|
||||
var screenContainerId = null;
|
||||
for (var currentId in spreedListofSharedScreens) {
|
||||
if (currentId === screenId) {
|
||||
$(currentId).removeClass('hidden');
|
||||
// skip loop if the property is from prototype
|
||||
if (!spreedListofSharedScreens.hasOwnProperty(currentId)) {
|
||||
continue;
|
||||
}
|
||||
|
||||
// skip non-string ids
|
||||
if (!(typeof currentId === 'string' || currentId instanceof String)) {
|
||||
continue;
|
||||
}
|
||||
|
||||
screenContainerId = OCA.SpreedMe.sharedScreens.getContainerId(currentId);
|
||||
if (currentId === id) {
|
||||
$(screenContainerId).removeClass('hidden');
|
||||
} else {
|
||||
$(currentId).addClass('hidden');
|
||||
$(screenContainerId).addClass('hidden');
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -355,8 +366,7 @@ var spreedMappingTable = [];
|
|||
return;
|
||||
}
|
||||
|
||||
var screenContainerId = OCA.SpreedMe.sharedScreens.getContainerId(id);
|
||||
spreedListofSharedScreens[screenContainerId] = (new Date()).getTime();
|
||||
spreedListofSharedScreens[id] = (new Date()).getTime();
|
||||
|
||||
var screensharingIndicator = $(OCA.SpreedMe.speakers.getContainerId(id)).find('.screensharingIndicator');
|
||||
screensharingIndicator.removeClass('screen-off');
|
||||
|
|
@ -369,8 +379,7 @@ var spreedMappingTable = [];
|
|||
return;
|
||||
}
|
||||
|
||||
var containerId = OCA.SpreedMe.sharedScreens.getContainerId(id);
|
||||
spreedListofSharedScreens[containerId] = -1;
|
||||
spreedListofSharedScreens[id] = -1;
|
||||
|
||||
var screensharingIndicator = $(OCA.SpreedMe.speakers.getContainerId(id)).find('.screensharingIndicator');
|
||||
screensharingIndicator.addClass('screen-off');
|
||||
|
|
@ -390,17 +399,16 @@ var spreedMappingTable = [];
|
|||
}
|
||||
|
||||
var currentTime = spreedListofSharedScreens[currentId];
|
||||
if (currentTime > mostRecentTime && $(OCA.SpreedMe.sharedScreens.getContainerId(currentId.replace('\\', ''))).length > 0) {
|
||||
if (currentTime > mostRecentTime) {
|
||||
mostRecentTime = currentTime;
|
||||
mostRecentId = currentId;
|
||||
}
|
||||
}
|
||||
|
||||
if (mostRecentId !== null) {
|
||||
console.log('promoting: change promoted screen from "' + spreedMappingTable[id] + '" to "' + spreedMappingTable[mostRecentId]);
|
||||
OCA.SpreedMe.sharedScreens.switchScreenToId(mostRecentId.replace('\\', ''));
|
||||
OCA.SpreedMe.sharedScreens.switchScreenToId(mostRecentId);
|
||||
} else {
|
||||
console.log('promoting: no recent screen to promote - keep "' + spreedMappingTable[id] + '"');
|
||||
console.log('No screens to promote');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -651,7 +659,7 @@ var spreedMappingTable = [];
|
|||
screens.removeChild(localScreenContainer);
|
||||
}
|
||||
|
||||
OCA.SpreedMe.sharedScreens.add(OCA.SpreedMe.webrtc.connection.getSessionid());
|
||||
OCA.SpreedMe.sharedScreens.remove(OCA.SpreedMe.webrtc.connection.getSessionid());
|
||||
}
|
||||
|
||||
// Check if there are still some screens
|
||||
|
|
|
|||
|
|
@ -67,7 +67,23 @@ script(
|
|||
<div class="nameIndicator">
|
||||
<button id="mute" class="icon-audio-white" data-placement="top" data-toggle="tooltip" data-original-title="<?php p($l->t('Mute audio')) ?>"></button>
|
||||
<button id="hideVideo" class="icon-video-white" data-placement="top" data-toggle="tooltip" data-original-title="<?php p($l->t('Disable video')) ?>"></button>
|
||||
<button id="toggleScreensharing" class="icon-screen-off-white screensharing-disabled" data-placement="top" data-toggle="tooltip" data-original-title="<?php p($l->t('Share screen')) ?>"></button>
|
||||
<button id="screensharing-button" class="app-navigation-entry-utils-menu-button icon-screen-off-white screensharing-disabled" data-placement="top" data-toggle="tooltip" data-original-title="<?php p($l->t('Share screen')) ?>"></button>
|
||||
<div id="screensharing-menu" class="app-navigation-entry-menu">
|
||||
<ul>
|
||||
<li>
|
||||
<button id="show-screen-button">
|
||||
<span class="icon-screen"></span>
|
||||
<span><?php p($l->t('Show your screen'));?></span>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button id="stop-screen-button">
|
||||
<span class="icon-screen-off"></span>
|
||||
<span><?php p($l->t('Stop screensharing'));?></span>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -50,7 +50,23 @@ script(
|
|||
<div class="nameIndicator">
|
||||
<button id="mute" class="icon-audio-white" data-placement="top" data-toggle="tooltip" data-original-title="<?php p($l->t('Mute audio')) ?>"></button>
|
||||
<button id="hideVideo" class="icon-video-white" data-placement="top" data-toggle="tooltip" data-original-title="<?php p($l->t('Disable video')) ?>"></button>
|
||||
<button id="toggleScreensharing" class="icon-screen-off-white screensharing-disabled" data-placement="top" data-toggle="tooltip" data-original-title="<?php p($l->t('Share screen')) ?>"></button>
|
||||
<button id="screensharing-button" class="app-navigation-entry-utils-menu-button icon-screen-off-white screensharing-disabled" data-placement="top" data-toggle="tooltip" data-original-title="<?php p($l->t('Share screen')) ?>"></button>
|
||||
<div id="screensharing-menu" class="app-navigation-entry-menu">
|
||||
<ul>
|
||||
<li>
|
||||
<button id="show-screen-button">
|
||||
<span class="icon-screen"></span>
|
||||
<span><?php p($l->t('Show your screen'));?></span>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button id="stop-screen-button">
|
||||
<span class="icon-screen-off"></span>
|
||||
<span><?php p($l->t('Stop screensharing'));?></span>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче