зеркало из https://github.com/nextcloud/spreed.git
722 строки
23 KiB
JavaScript
722 строки
23 KiB
JavaScript
/* global Marionette, Backbone, OCA */
|
|
|
|
/**
|
|
* @author Christoph Wurst <christoph@winzerhof-wurst.at>
|
|
*
|
|
* @license GNU AGPL version 3 or any later version
|
|
*
|
|
* This program is free software: you can redistribute it and/or modify
|
|
* it under the terms of the GNU Affero General Public License as
|
|
* published by the Free Software Foundation, either version 3 of the
|
|
* License, or (at your option) any later version.
|
|
*
|
|
* This program is distributed in the hope that it will be useful,
|
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
* GNU Affero General Public License for more details.
|
|
*
|
|
* You should have received a copy of the GNU Affero General Public License
|
|
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|
*
|
|
*/
|
|
|
|
(function(OCA, Marionette, Backbone, _) {
|
|
'use strict';
|
|
|
|
OCA.SpreedMe = OCA.SpreedMe || {};
|
|
|
|
var roomChannel = Backbone.Radio.channel('rooms');
|
|
|
|
var App = Marionette.Application.extend({
|
|
OWNER: 1,
|
|
MODERATOR: 2,
|
|
USER: 3,
|
|
GUEST: 4,
|
|
USERSELFJOINED: 5,
|
|
|
|
/** @property {OCA.SpreedMe.Models.Room} activeRoom */
|
|
activeRoom: null,
|
|
|
|
/** @property {OCA.SpreedMe.Models.RoomCollection} _rooms */
|
|
_rooms: null,
|
|
/** @property {OCA.SpreedMe.Views.RoomListView} _roomsView */
|
|
_roomsView: null,
|
|
/** @property {OCA.SpreedMe.Models.ParticipantCollection} _participants */
|
|
_participants: null,
|
|
/** @property {OCA.SpreedMe.Views.ParticipantView} _participantsView */
|
|
_participantsView: null,
|
|
/** @property {boolean} videoWasEnabledAtLeastOnce */
|
|
videoWasEnabledAtLeastOnce: false,
|
|
audioDisabled: localStorage.getItem("audioDisabled"),
|
|
videoDisabled: localStorage.getItem("videoDisabled"),
|
|
_searchTerm: '',
|
|
guestNick: null,
|
|
_registerPageEvents: function() {
|
|
$('#select-participants').select2({
|
|
ajax: {
|
|
url: OC.linkToOCS('apps/files_sharing/api/v1') + 'sharees',
|
|
dataType: 'json',
|
|
quietMillis: 100,
|
|
data: function (term) {
|
|
OCA.SpreedMe.app._searchTerm = term;
|
|
return {
|
|
format: 'json',
|
|
search: term,
|
|
perPage: 200,
|
|
itemType: 'call'
|
|
};
|
|
},
|
|
results: function (response) {
|
|
// TODO improve error case
|
|
if (response.ocs.data === undefined) {
|
|
console.error('Failure happened', response);
|
|
return;
|
|
}
|
|
|
|
var results = [];
|
|
|
|
$.each(response.ocs.data.exact.users, function(id, user) {
|
|
if (oc_current_user === user.value.shareWith) {
|
|
return;
|
|
}
|
|
results.push({ id: user.value.shareWith, displayName: user.label, type: "user"});
|
|
});
|
|
$.each(response.ocs.data.exact.groups, function(id, group) {
|
|
results.push({ id: group.value.shareWith, displayName: group.label + ' ' + t('spreed', '(group)'), type: "group"});
|
|
});
|
|
$.each(response.ocs.data.users, function(id, user) {
|
|
if (oc_current_user === user.value.shareWith) {
|
|
return;
|
|
}
|
|
results.push({ id: user.value.shareWith, displayName: user.label, type: "user"});
|
|
});
|
|
$.each(response.ocs.data.groups, function(id, group) {
|
|
results.push({ id: group.value.shareWith, displayName: group.label + ' ' + t('spreed', '(group)'), type: "group"});
|
|
});
|
|
|
|
//Add custom entry to create a new empty room
|
|
if (OCA.SpreedMe.app._searchTerm === '') {
|
|
results.unshift({ id: "create-public-room", displayName: t('spreed', 'New public call'), type: "createPublicRoom"});
|
|
} else {
|
|
results.push({ id: "create-public-room", displayName: t('spreed', 'New public call'), type: "createPublicRoom"});
|
|
}
|
|
|
|
return {
|
|
results: results,
|
|
more: false
|
|
};
|
|
}
|
|
},
|
|
initSelection: function (element, callback) {
|
|
console.log(element);
|
|
callback({id: element.val()});
|
|
},
|
|
formatResult: function (element) {
|
|
if (element.type === "createPublicRoom") {
|
|
return '<span><div class="avatar icon-add"></div>' + escapeHTML(element.displayName) + '</span>';
|
|
}
|
|
|
|
return '<span><div class="avatar" data-user="' + escapeHTML(element.id) + '" data-user-display-name="' + escapeHTML(element.displayName) + '"></div>' + escapeHTML(element.displayName) + '</span>';
|
|
},
|
|
formatSelection: function () {
|
|
return '<span class="select2-default" style="padding-left: 0;">'+OC.L10N.translate('spreed', 'Choose person…')+'</span>';
|
|
}
|
|
});
|
|
|
|
$('#select-participants').on("click", function() {
|
|
$('.select2-drop').find('.avatar').each(function () {
|
|
var element = $(this);
|
|
if (element.data('user-display-name')) {
|
|
element.avatar(element.data('user'), 32, undefined, false, undefined, element.data('user-display-name'));
|
|
} else {
|
|
element.avatar(element.data('user'), 32);
|
|
}
|
|
});
|
|
});
|
|
|
|
$('#select-participants').on("select2-selecting", function(e) {
|
|
switch (e.object.type) {
|
|
case "user":
|
|
OCA.SpreedMe.Calls.createOneToOneVideoCall(e.val);
|
|
break;
|
|
case "group":
|
|
OCA.SpreedMe.Calls.createGroupVideoCall(e.val);
|
|
break;
|
|
case "createPublicRoom":
|
|
OCA.SpreedMe.Calls.createPublicVideoCall();
|
|
break;
|
|
default:
|
|
console.log("Unknown type", e.object.type);
|
|
break;
|
|
}
|
|
});
|
|
|
|
$('#select-participants').on("select2-loaded", function() {
|
|
$('.select2-drop').find('.avatar').each(function () {
|
|
var element = $(this);
|
|
if (element.data('user-display-name')) {
|
|
element.avatar(element.data('user'), 32, undefined, false, undefined, element.data('user-display-name'));
|
|
} else {
|
|
element.avatar(element.data('user'), 32);
|
|
}
|
|
});
|
|
});
|
|
|
|
// Initialize button tooltips
|
|
$('[data-toggle="tooltip"]').tooltip({trigger: 'hover'}).click(function() {
|
|
$(this).tooltip('hide');
|
|
});
|
|
|
|
$('#hideVideo').click(function() {
|
|
if(!OCA.SpreedMe.app.videoWasEnabledAtLeastOnce) {
|
|
// don't allow clicking the video toggle
|
|
// when no video ever was streamed (that
|
|
// means that permission wasn't granted
|
|
// yet or there is no video available at
|
|
// all)
|
|
console.log('video can not be enabled - there was no stream available before');
|
|
return;
|
|
}
|
|
if ($(this).hasClass('video-disabled')) {
|
|
OCA.SpreedMe.app.enableVideo();
|
|
localStorage.removeItem("videoDisabled");
|
|
} else {
|
|
OCA.SpreedMe.app.disableVideo();
|
|
localStorage.setItem("videoDisabled", true);
|
|
}
|
|
});
|
|
|
|
$('#mute').click(function() {
|
|
if (OCA.SpreedMe.webrtc.webrtc.isAudioEnabled()) {
|
|
OCA.SpreedMe.app.disableAudio();
|
|
localStorage.setItem("audioDisabled", true);
|
|
} else {
|
|
OCA.SpreedMe.app.enableAudio();
|
|
localStorage.removeItem("audioDisabled");
|
|
}
|
|
});
|
|
|
|
$('#video-fullscreen').click(function() {
|
|
var fullscreenElem = document.getElementById('app-content');
|
|
|
|
if (!document.fullscreenElement && !document.mozFullScreenElement &&
|
|
!document.webkitFullscreenElement && !document.msFullscreenElement) {
|
|
if (fullscreenElem.requestFullscreen) {
|
|
fullscreenElem.requestFullscreen();
|
|
} else if (fullscreenElem.webkitRequestFullscreen) {
|
|
fullscreenElem.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
|
|
} else if (fullscreenElem.mozRequestFullScreen) {
|
|
fullscreenElem.mozRequestFullScreen();
|
|
} else if (fullscreenElem.msRequestFullscreen) {
|
|
fullscreenElem.msRequestFullscreen();
|
|
}
|
|
$(this).attr('data-original-title', 'Exit fullscreen');
|
|
} else {
|
|
if (document.exitFullscreen) {
|
|
document.exitFullscreen();
|
|
} else if (document.webkitExitFullscreen) {
|
|
document.webkitExitFullscreen();
|
|
} else if (document.mozCancelFullScreen) {
|
|
document.mozCancelFullScreen();
|
|
} else if (document.msExitFullscreen) {
|
|
document.msExitFullscreen();
|
|
}
|
|
$(this).attr('data-original-title', 'Fullscreen');
|
|
}
|
|
});
|
|
|
|
var screensharingStopped = function() {
|
|
console.log("Screensharing now stopped");
|
|
$('#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();
|
|
});
|
|
|
|
$('#screensharing-button').click(function() {
|
|
var webrtc = OCA.SpreedMe.webrtc;
|
|
if (!webrtc.capabilities.supportScreenSharing) {
|
|
if (window.location.protocol === 'https:') {
|
|
OC.Notification.showTemporary(t('spreed', 'Screensharing is not supported by your browser.'));
|
|
} else {
|
|
OC.Notification.showTemporary(t('spreed', 'Screensharing requires the page to be loaded through HTTPS.'));
|
|
}
|
|
return;
|
|
}
|
|
|
|
if (webrtc.getLocalScreen()) {
|
|
$('#screensharing-menu').toggleClass('open');
|
|
} else {
|
|
var screensharingButton = $(this);
|
|
screensharingButton.prop('disabled', true);
|
|
webrtc.shareScreen(function(err) {
|
|
screensharingButton.prop('disabled', false);
|
|
if (!err) {
|
|
$('#screensharing-button').attr('data-original-title', 'Screensharing options')
|
|
.removeClass('screensharing-disabled icon-screen-off-white')
|
|
.addClass('icon-screen-white');
|
|
return;
|
|
}
|
|
|
|
switch (err.name) {
|
|
case "HTTPS_REQUIRED":
|
|
OC.Notification.showTemporary(t('spreed', 'Screensharing requires the page to be loaded through HTTPS.'));
|
|
break;
|
|
case "PERMISSION_DENIED":
|
|
case "NotAllowedError":
|
|
case "CEF_GETSCREENMEDIA_CANCELED": // Experimental, may go away in the future.
|
|
break;
|
|
case "FF52_REQUIRED":
|
|
OC.Notification.showTemporary(t('spreed', 'Sharing your screen only works with Firefox version 52 or newer.'));
|
|
break;
|
|
case "EXTENSION_UNAVAILABLE":
|
|
var extensionURL = null;
|
|
if (!!window.chrome && !!window.chrome.webstore) {// Chrome
|
|
extensionURL = 'https://chrome.google.com/webstore/detail/screensharing-for-nextclo/kepnpjhambipllfmgmbapncekcmabkol';
|
|
}
|
|
|
|
if (extensionURL) {
|
|
var text = t('spreed', 'Screensharing extension is required to share your screen.');
|
|
var element = $('<a>').attr('href', extensionURL).attr('target','_blank').text(text);
|
|
|
|
OC.Notification.showTemporary(element, {isHTML: true});
|
|
} else {
|
|
OC.Notification.showTemporary(t('spreed', 'Please use a different browser like Firefox or Chrome to share your screen.'));
|
|
}
|
|
break;
|
|
default:
|
|
OC.Notification.showTemporary(t('spreed', 'An error occurred while starting screensharing.'));
|
|
console.log("Could not start screensharing", err);
|
|
break;
|
|
}
|
|
});
|
|
}
|
|
});
|
|
|
|
$("#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');
|
|
$("#guestNameConfirm").removeClass('hidden');
|
|
$("#guestNameInput").focus();
|
|
});
|
|
|
|
$('#guestNameConfirm').click(function () {
|
|
OCA.SpreedMe.app.changeGuestName();
|
|
$('#guestName').toggleClass('hidden');
|
|
$("#guestNameInput").toggleClass('hidden');
|
|
$("#guestNameConfirm").toggleClass('hidden');
|
|
});
|
|
|
|
$("#guestNameInput").keyup(function (e) {
|
|
var hide = false;
|
|
|
|
if (e.keyCode === 13) { // send new gues name on "enter"
|
|
hide = true;
|
|
OCA.SpreedMe.app.changeGuestName();
|
|
} else if (e.keyCode === 27) { // hide input filed again in ESC
|
|
hide = true;
|
|
}
|
|
|
|
if (hide) {
|
|
$('#guestName').toggleClass('hidden');
|
|
$("#guestNameInput").toggleClass('hidden');
|
|
$("#guestNameConfirm").toggleClass('hidden');
|
|
}
|
|
});
|
|
},
|
|
_showRoomList: function() {
|
|
this._roomsView = new OCA.SpreedMe.Views.RoomListView({
|
|
el: '#app-navigation ul',
|
|
collection: this._rooms
|
|
});
|
|
},
|
|
_showParticipantList: function() {
|
|
this._participants = new OCA.SpreedMe.Models.ParticipantCollection();
|
|
this._participantsView = new OCA.SpreedMe.Views.ParticipantView({
|
|
el: 'ul#participantWithList',
|
|
collection: this._participants
|
|
});
|
|
},
|
|
/**
|
|
* @param {string} token
|
|
*/
|
|
_setRoomActive: function(token) {
|
|
if (oc_current_user) {
|
|
this._rooms.forEach(function(room) {
|
|
room.set('active', room.get('token') === token);
|
|
});
|
|
}
|
|
},
|
|
addParticipantToRoom: function(token, participant) {
|
|
$.post(
|
|
OC.linkToOCS('apps/spreed/api/v1/room', 2) + token + '/participants',
|
|
{
|
|
newParticipant: participant
|
|
}
|
|
).done(function() {
|
|
this.syncRooms();
|
|
}.bind(this));
|
|
},
|
|
syncRooms: function() {
|
|
return this.signaling.syncRooms();
|
|
},
|
|
syncAndSetActiveRoom: function(token) {
|
|
var self = this;
|
|
if (oc_current_user) {
|
|
this.syncRooms()
|
|
.then(function() {
|
|
roomChannel.trigger('active', token);
|
|
// Disable video when entering a room with more than 5 participants.
|
|
self._rooms.forEach(function(room) {
|
|
if (room.get('token') === token) {
|
|
self.activeRoom = room;
|
|
if (Object.keys(room.get('participants')).length > 5) {
|
|
self.disableVideo();
|
|
}
|
|
self.setPageTitle(room.get('displayName'));
|
|
}
|
|
});
|
|
});
|
|
} else {
|
|
$.ajax({
|
|
url: OC.linkToOCS('apps/spreed/api/v1/room', 2) + token,
|
|
type: 'GET',
|
|
beforeSend: function (request) {
|
|
request.setRequestHeader('Accept', 'application/json');
|
|
},
|
|
success: function(result) {
|
|
var data = result.ocs.data;
|
|
self.setRoomMessageForGuest(data.participants);
|
|
self.setPageTitle(data.displayName);
|
|
if (Object.keys(data.participants).length > 5) {
|
|
self.disableVideo();
|
|
}
|
|
}
|
|
});
|
|
}
|
|
},
|
|
setPageTitle: function(title){
|
|
if (title) {
|
|
title += ' - ';
|
|
} else {
|
|
title = '';
|
|
}
|
|
title += t('spreed', 'Video calls');
|
|
title += ' - ' + oc_defaults.title;
|
|
window.document.title = title;
|
|
},
|
|
setEmptyContentMessage: function(icon, message, messageAdditional) {
|
|
//Remove previous icon, avatar or link from emptycontent
|
|
var emptyContentIcon = document.getElementById('emptycontent-icon');
|
|
emptyContentIcon.removeAttribute('class');
|
|
emptyContentIcon.innerHTML = '';
|
|
$('#shareRoomInput').addClass('hidden');
|
|
$('#shareRoomClipboardButton').addClass('hidden');
|
|
|
|
$('#emptycontent-icon').addClass(icon);
|
|
$('#emptycontent h2').text(message);
|
|
if (messageAdditional) {
|
|
$('#emptycontent p').text(messageAdditional);
|
|
} else {
|
|
$('#emptycontent p').text('');
|
|
}
|
|
},
|
|
setRoomMessageForGuest: function(participants) {
|
|
var message, messageAdditional;
|
|
|
|
//Remove previous icon or avatar
|
|
var emptyContentIcon = document.getElementById('emptycontent-icon');
|
|
emptyContentIcon.removeAttribute('class');
|
|
emptyContentIcon.innerHTML = '';
|
|
|
|
if (Object.keys(participants).length === 1) {
|
|
var waitingParticipantId, waitingParticipantName;
|
|
|
|
$.each(participants, function(id, participant) {
|
|
waitingParticipantId = id;
|
|
waitingParticipantName = participant.name;
|
|
});
|
|
|
|
// Avatar for username
|
|
var avatar = document.createElement('div');
|
|
avatar.className = 'avatar room-avatar';
|
|
|
|
$('#emptycontent-icon').append(avatar);
|
|
|
|
$('#emptycontent-icon').find('.avatar').each(function () {
|
|
if (waitingParticipantName && (waitingParticipantId !== waitingParticipantName)) {
|
|
$(this).avatar(waitingParticipantId, 128, undefined, false, undefined, waitingParticipantName);
|
|
} else {
|
|
$(this).avatar(waitingParticipantId, 128);
|
|
}
|
|
});
|
|
|
|
message = t('spreed', 'Waiting for {participantName} to join the call …', {participantName: waitingParticipantName});
|
|
messageAdditional = '';
|
|
} else {
|
|
message = t('spreed', 'Waiting for others to join the call …');
|
|
messageAdditional = '';
|
|
$('#emptycontent-icon').addClass('icon-contacts-dark');
|
|
}
|
|
|
|
$('#emptycontent h2').text(message);
|
|
$('#emptycontent p').text(messageAdditional);
|
|
},
|
|
initialize: function() {
|
|
if (oc_current_user) {
|
|
this._rooms = new OCA.SpreedMe.Models.RoomCollection();
|
|
this.listenTo(roomChannel, 'active', this._setRoomActive);
|
|
}
|
|
|
|
$(document).on('click', this.onDocumentClick);
|
|
OC.Util.History.addOnPopStateHandler(_.bind(this._onPopState, this));
|
|
},
|
|
onStart: function() {
|
|
this.setEmptyContentMessage(
|
|
'icon-video-off',
|
|
t('spreed', 'Waiting for camera and microphone permissions'),
|
|
t('spreed', 'Please, give your browser access to use your camera and microphone in order to use this app.')
|
|
);
|
|
|
|
if (!oc_current_user) {
|
|
this.initGuestName();
|
|
}
|
|
|
|
OCA.SpreedMe.initWebRTC();
|
|
},
|
|
startSpreed: function(configuration, signaling) {
|
|
console.log('Starting spreed …');
|
|
var self = this;
|
|
this.signaling = signaling;
|
|
|
|
$(window).unload(function () {
|
|
OCA.SpreedMe.Calls.leaveAllCalls();
|
|
signaling.disconnect();
|
|
});
|
|
|
|
this.setEmptyContentMessage(
|
|
'icon-video',
|
|
t('spreed', 'Looking great today! :)'),
|
|
t('spreed', 'Time to call your friends')
|
|
);
|
|
|
|
OCA.SpreedMe.initCalls(signaling);
|
|
|
|
this._registerPageEvents();
|
|
this.initShareRoomClipboard();
|
|
|
|
var token = $('#app').attr('data-token');
|
|
if (token) {
|
|
if (OCA.SpreedMe.webrtc.sessionReady) {
|
|
OCA.SpreedMe.Calls.join(token);
|
|
} else {
|
|
OCA.SpreedMe.webrtc.once('connectionReady', function() {
|
|
OCA.SpreedMe.Calls.join(token);
|
|
});
|
|
}
|
|
}
|
|
OCA.SpreedMe.Calls.showCamera();
|
|
|
|
if (oc_current_user) {
|
|
this._showRoomList();
|
|
this.signaling.setRoomCollection(this._rooms)
|
|
.then(function(data) {
|
|
$('#app-navigation').removeClass('icon-loading');
|
|
self._roomsView.render();
|
|
|
|
if (data.length === 0) {
|
|
$('#select-participants').select2('open');
|
|
}
|
|
});
|
|
|
|
this._showParticipantList();
|
|
}
|
|
|
|
this.initAudioVideoSettings(configuration);
|
|
},
|
|
_onPopState: function(params) {
|
|
if (!_.isUndefined(params.token)) {
|
|
OCA.SpreedMe.Calls.join(params.token);
|
|
}
|
|
},
|
|
onDocumentClick: function(event) {
|
|
var uiChannel = Backbone.Radio.channel('ui');
|
|
|
|
uiChannel.trigger('document:click', event);
|
|
},
|
|
initAudioVideoSettings: function(configuration) {
|
|
if (OCA.SpreedMe.app.audioDisabled) {
|
|
OCA.SpreedMe.app.disableAudio();
|
|
}
|
|
|
|
if (configuration.video !== false) {
|
|
if (OCA.SpreedMe.app.videoDisabled) {
|
|
OCA.SpreedMe.app.disableVideo();
|
|
}
|
|
} else {
|
|
OCA.SpreedMe.app.videoWasEnabledAtLeastOnce = false;
|
|
OCA.SpreedMe.app.disableVideo();
|
|
}
|
|
},
|
|
enableAudio: function() {
|
|
OCA.SpreedMe.webrtc.unmute();
|
|
$('#mute').attr('data-original-title', 'Mute audio')
|
|
.removeClass('audio-disabled icon-audio-off-white')
|
|
.addClass('icon-audio-white');
|
|
|
|
OCA.SpreedMe.app.audioDisabled = false;
|
|
},
|
|
disableAudio: function() {
|
|
OCA.SpreedMe.webrtc.mute();
|
|
$('#mute').attr('data-original-title', 'Enable audio')
|
|
.addClass('audio-disabled icon-audio-off-white')
|
|
.removeClass('icon-audio-white');
|
|
|
|
OCA.SpreedMe.app.audioDisabled = true;
|
|
},
|
|
enableVideo: function() {
|
|
var $hideVideoButton = $('#hideVideo');
|
|
var avatarContainer = $hideVideoButton.closest('.videoView').find('.avatar-container');
|
|
var localVideo = $hideVideoButton.closest('.videoView').find('#localVideo');
|
|
|
|
OCA.SpreedMe.webrtc.resumeVideo();
|
|
$hideVideoButton.attr('data-original-title', 'Disable video')
|
|
.removeClass('video-disabled icon-video-off-white')
|
|
.addClass('icon-video-white');
|
|
|
|
avatarContainer.hide();
|
|
localVideo.show();
|
|
|
|
OCA.SpreedMe.app.videoDisabled = false;
|
|
},
|
|
hideVideo: function() {
|
|
var $hideVideoButton = $('#hideVideo');
|
|
var avatarContainer = $hideVideoButton.closest('.videoView').find('.avatar-container');
|
|
var localVideo = $hideVideoButton.closest('.videoView').find('#localVideo');
|
|
|
|
$hideVideoButton.attr('data-original-title', 'Enable video')
|
|
.addClass('video-disabled icon-video-off-white')
|
|
.removeClass('icon-video-white');
|
|
|
|
var avatar = avatarContainer.find('.avatar');
|
|
var guestName = localStorage.getItem("nick");
|
|
if (oc_current_user) {
|
|
avatar.avatar(OC.currentUser, 128);
|
|
} else if (guestName) {
|
|
avatar.imageplaceholder(guestName, undefined, 128);
|
|
} else {
|
|
avatar.imageplaceholder('?', undefined, 128);
|
|
avatar.css('background-color', '#b9b9b9');
|
|
OC.Notification.showTemporary(t('spreed', 'You can set your name on the top right of this page so other participants can identify you better.'));
|
|
}
|
|
|
|
avatarContainer.removeClass('hidden');
|
|
avatarContainer.show();
|
|
localVideo.hide();
|
|
},
|
|
disableVideo: function() {
|
|
OCA.SpreedMe.webrtc.pauseVideo();
|
|
OCA.SpreedMe.app.hideVideo();
|
|
OCA.SpreedMe.app.videoDisabled = true;
|
|
},
|
|
initGuestName: function() {
|
|
var nick = localStorage.getItem("nick");
|
|
|
|
if (nick) {
|
|
$('#guestName').text(nick);
|
|
$('#guestNameInput').val(nick);
|
|
OCA.SpreedMe.app.guestNick = nick;
|
|
}
|
|
},
|
|
changeGuestName: function() {
|
|
var guestName = $.trim($('#guestNameInput').val());
|
|
var lastSavedNick = localStorage.getItem("nick");
|
|
|
|
if (guestName !== lastSavedNick) {
|
|
if (guestName.length > 0 && guestName.length <= 20) {
|
|
$('#guestName').text(guestName);
|
|
localStorage.setItem("nick", guestName);
|
|
OCA.SpreedMe.webrtc.sendDirectlyToAll('status', 'nickChanged', guestName);
|
|
} else if (lastSavedNick) {
|
|
$('#guestName').text(t('spreed', 'Guest'));
|
|
localStorage.removeItem("nick");
|
|
OCA.SpreedMe.webrtc.sendDirectlyToAll('status', 'nickChanged', '');
|
|
}
|
|
}
|
|
|
|
$('#guestNameInput').val(guestName);
|
|
|
|
var avatar = $('#localVideoContainer').find('.avatar');
|
|
var savedGuestName = localStorage.getItem("nick");
|
|
if (savedGuestName) {
|
|
avatar.imageplaceholder(savedGuestName, undefined, 128);
|
|
} else {
|
|
avatar.imageplaceholder('?', undefined, 128);
|
|
avatar.css('background-color', '#b9b9b9');
|
|
}
|
|
},
|
|
initShareRoomClipboard: function () {
|
|
$('body').find('.shareRoomClipboard').tooltip({
|
|
placement: 'bottom',
|
|
trigger: 'hover',
|
|
title: t('core', 'Copy')
|
|
});
|
|
|
|
var clipboard = new Clipboard('.shareRoomClipboard');
|
|
clipboard.on('success', function(e) {
|
|
var $input = $(e.trigger);
|
|
$input.tooltip('hide')
|
|
.attr('data-original-title', t('core', 'Copied!'))
|
|
.tooltip('fixTitle')
|
|
.tooltip({placement: 'bottom', trigger: 'manual'})
|
|
.tooltip('show');
|
|
_.delay(function() {
|
|
$input.tooltip('hide')
|
|
.attr('data-original-title', t('core', 'Copy'))
|
|
.tooltip('fixTitle');
|
|
}, 3000);
|
|
});
|
|
clipboard.on('error', function (e) {
|
|
var $input = $(e.trigger);
|
|
var actionMsg = '';
|
|
if (/iPhone|iPad/i.test(navigator.userAgent)) {
|
|
actionMsg = t('core', 'Not supported!');
|
|
} else if (/Mac/i.test(navigator.userAgent)) {
|
|
actionMsg = t('core', 'Press ⌘-C to copy.');
|
|
} else {
|
|
actionMsg = t('core', 'Press Ctrl-C to copy.');
|
|
}
|
|
|
|
$input.tooltip('hide')
|
|
.attr('data-original-title', actionMsg)
|
|
.tooltip('fixTitle')
|
|
.tooltip({placement: 'bottom', trigger: 'manual'})
|
|
.tooltip('show');
|
|
_.delay(function () {
|
|
$input.tooltip('hide')
|
|
.attr('data-original-title', t('spreed', 'Copy'))
|
|
.tooltip('fixTitle');
|
|
}, 3000);
|
|
});
|
|
}
|
|
});
|
|
|
|
OCA.SpreedMe.App = App;
|
|
})(OCA, Marionette, Backbone, _);
|