mirror of https://github.com/dani/vroom.git
566 lines
20 KiB
Plaintext
566 lines
20 KiB
Plaintext
% title sprintf l('ROOM_s'), $room;
|
|
%= include 'header'
|
|
<div class="container-fluid">
|
|
<nav id="toolbar"
|
|
class="navbar navbar-default">
|
|
<div class="navbar-header">
|
|
<button class="navbar-toggle"
|
|
data-toggle="collapse"
|
|
data-target="#roomToolBar">
|
|
<span class="sr-only">
|
|
</span>
|
|
<span class="icon-bar">
|
|
</span>
|
|
<span class="icon-bar">
|
|
</span>
|
|
<span class="icon-bar">
|
|
</span>
|
|
</button>
|
|
<div class="btn-group visible-xs-block header-btn-group">
|
|
<button class="btn btn-lg btn-default navbar-btn btn-mute-mic">
|
|
<span class="glyphicon glyphicon-volume-off">
|
|
</span>
|
|
</button>
|
|
<button class="btn btn-lg btn-default navbar-btn btn-suspend-cam">
|
|
<span class="glyphicon glyphicon-facetime-video">
|
|
</span>
|
|
</button>
|
|
</div>
|
|
<div class="btn-group visible-xs-block header-btn-group col-xs-push-1">
|
|
<button class="btn btn-lg btn-default help btn-logout navbar-btn"
|
|
data-toggle="tooltip"
|
|
data-placement="bottom"
|
|
title="<%= l('LOGOUT') %>">
|
|
<span class="glyphicon glyphicon-log-out">
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div id="roomToolBar"
|
|
class="collapse navbar-collapse">
|
|
<div class="navbar-form navbar-btn-group navbar-left input-group">
|
|
<div class="input-group">
|
|
<input type="text"
|
|
id="displayName"
|
|
class="form-control input-lg help"
|
|
placeholder="<%= l('YOUR_NAME') %>"
|
|
data-toggle="tooltip"
|
|
data-placement="bottom"
|
|
title="<%= l('NAME_SENT_TO_OTHERS') %>">
|
|
<span class="input-group-btn">
|
|
<button id="changeColorButton"
|
|
class="btn btn-lg btn-default help"
|
|
data-toggle="tooltip"
|
|
data-placement="bottom"
|
|
title="<%= l('CHANGE_COLOR') %>">
|
|
<span class="glyphicon glyphicon-tag">
|
|
</span>
|
|
</button>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="btn-group navbar-form navbar-btn-group navbar-left hidden-xs">
|
|
<button id="chatDropdown"
|
|
class="btn btn-lg btn-default collapsed help"
|
|
data-toggle="collapse" data-target="#chatMenu"
|
|
data-toggle="tooltip"
|
|
data-placement="bottom"
|
|
title="<%= l('CLICK_TO_CHAT') %>">
|
|
<span class="glyphicon glyphicon-comment">
|
|
</span>
|
|
<span class="badge" id="unreadMsg">
|
|
0
|
|
</span>
|
|
</button>
|
|
% if (get_opt_features->{etherpad}){
|
|
<button class="btn btn-lg btn-default help btn-etherpad"
|
|
data-toggle="tooltip"
|
|
data-placement="bottom"
|
|
title="<%= l('OPEN_ETHERPAD') %>">
|
|
<span class="glyphicon glyphicon-pencil">
|
|
</span>
|
|
</button>
|
|
% }
|
|
</div>
|
|
<div class="btn-group navbar-form navbar-btn-group navbar-left hidden-xs">
|
|
<button class="btn btn-lg btn-default btn-mute-mic help"
|
|
data-toggle="tooltip"
|
|
data-placement="bottom"
|
|
title="<%= l('MUTE_MIC') %>">
|
|
<span class="glyphicon glyphicon-volume-off">
|
|
</span>
|
|
</button>
|
|
<button class="btn btn-lg btn-default btn-suspend-cam help"
|
|
data-toggle="tooltip"
|
|
data-placement="bottom"
|
|
title="<%= l('SUSPEND_CAM') %>">
|
|
<span class="glyphicon glyphicon-facetime-video">
|
|
</span>
|
|
</button>
|
|
<button class="btn btn-lg btn-default help btn-share-screen"
|
|
data-toggle="tooltip"
|
|
data-placement="bottom"
|
|
title="<%= l('SHARE_YOUR_SCREEN') %>">
|
|
<span class="glyphicon glyphicon-blackboard">
|
|
</span>
|
|
</button>
|
|
</div>
|
|
<div class="btn-group navbar-form navbar-btn-group navbar-left hidden-xs aloneEl">
|
|
<button class="btn btn-lg btn-default btn-moh help"
|
|
data-toggle="tooltip"
|
|
data-placement="bottom"
|
|
title="<%= l('WAIT_WITH_MUSIC') %>">
|
|
<span class="glyphicon glyphicon-music">
|
|
</span>
|
|
</button>
|
|
</div>
|
|
<div class="btn-group navbar-form navbar-btn-group navbar-left">
|
|
<div class="btn-group ownerEl">
|
|
<button class="btn btn-lg btn-default help"
|
|
data-toggle="modal"
|
|
data-target="#inviteModal"
|
|
data-toggle="tooltip"
|
|
data-placement="bottom"
|
|
title="<%= l('INVITE_PEOPLE') %>">
|
|
<span class="glyphicon glyphicon-user">
|
|
</span>
|
|
</button>
|
|
</div>
|
|
<div class="btn-group ownerEl">
|
|
<button class="btn btn-lg btn-default help"
|
|
data-toggle="modal"
|
|
data-target="#configureModal"
|
|
data-toggle="tooltip"
|
|
data-placement="bottom"
|
|
title="<%= l('CONFIGURE') %>">
|
|
<span class="glyphicon glyphicon-cog">
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="btn-group navbar-form navbar-btn-group navbar-left">
|
|
<button class="btn btn-lg btn-default dropdown-toggle help unauthEl"
|
|
data-toggle="modal"
|
|
data-target="#ownerAuthModal"
|
|
data-toggle="tooltip"
|
|
data-placement="bottom"
|
|
title="<%= l('AUTH_IF_OWNER') %>">
|
|
<span class="glyphicon glyphicon-log-in">
|
|
</span>
|
|
</button>
|
|
</div>
|
|
<div class="navbar-form navbar-btn-group navbar-right hidden-xs"
|
|
data-toggle="buttons" >
|
|
<div class="btn-group">
|
|
<div id="timeCounter" class="btn btn-lg btn-default disabled">
|
|
00:00
|
|
</div>
|
|
<button class="btn btn-lg btn-default help btn-logout"
|
|
data-toggle="tooltip"
|
|
data-placement="bottom"
|
|
title="<%= l('LOGOUT') %>">
|
|
<span class="glyphicon glyphicon-log-out">
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<div class="modal fade"
|
|
id="quitModal"
|
|
aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<button class="close"
|
|
data-dismiss="modal">
|
|
×
|
|
</button>
|
|
<h4 class="modal-title">
|
|
%= l('LEAVE_THIS_ROOM')
|
|
</h4>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>
|
|
%= l('ARE_YOU_SURE_YOU_WANT_TO_LEAVE')
|
|
</p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button id="confirmQuitButton"
|
|
class="btn btn-primary">
|
|
%= l('QUIT')
|
|
</button>
|
|
<button class="btn btn-default"
|
|
data-dismiss="modal"
|
|
data-target="#quitModal">
|
|
%= l('CANCEL')
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal fade"
|
|
id="chromeExtMessage"
|
|
aria-hidden="true">
|
|
<div class="modal-dialog modal-sm">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<button class="close"
|
|
data-dismiss="modal">
|
|
×
|
|
</button>
|
|
<h4 class="modal-title">
|
|
%= l('EXTENSION_REQUIRED')
|
|
</h4>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>
|
|
%= l('VROOM_CHROME_EXTENSION')
|
|
</p>
|
|
<p>
|
|
<a class="btn btn-default btn-lg"
|
|
href="https://chrome.google.com/webstore/detail/<%= $config->{'interface.chrome_extension_id'} %>"
|
|
target="_blank">
|
|
<span class="glyphicon glyphicon-download-alt">
|
|
</span>
|
|
</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal fade"
|
|
id="firefoxShareScreenModal"
|
|
aria-hidden="true">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<button class="close"
|
|
data-dismiss="modal"
|
|
aria-hidden="true">
|
|
×
|
|
</button>
|
|
<h4 class="modal-title">
|
|
%= l('ALLOW_SCREEN_SHARING')
|
|
</h4>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>
|
|
%= l('ALLOW_SCREEN_SHARING_ON_FF')
|
|
%== sprintf l('SCREEN_SHARING_ABOUT_CONFIG_s'), $self->req->url->to_abs->host
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal fade"
|
|
id="disconnected"
|
|
aria-hidden="true">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<button class="close"
|
|
data-dismiss="modal">
|
|
×
|
|
</button>
|
|
<h4 class="modal-title">
|
|
%= l('CONNECTION_LOST')
|
|
</h4>
|
|
</div>
|
|
<div class="modal-body">
|
|
%= image url_for('/img/flash.png'), alt => l('CONNECTION_LOST'), class => "img-responsive center-block"
|
|
<br>
|
|
<p class="text-center">
|
|
%= l('CHECK_INTERNET_ACCESS')
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal fade"
|
|
id="connecting"
|
|
aria-hidden="false"
|
|
data-keyboard="false"
|
|
data-backdrop="static">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h4 class="modal-title">
|
|
%= l('CONNECTING')
|
|
</h4>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div id="connecting-msg"
|
|
class="connecting-msg">
|
|
%= image url_for('/img/connecting.gif'), alt => l('CONNECTING'), class => "img-responsive center-block"
|
|
<br>
|
|
<p class="text-center">
|
|
%= l('CONNECTING_PLEASE_WAIT')
|
|
</p>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-8 col-md-offset-2 alert alert-danger text-center"
|
|
id="connecting-err-reason"
|
|
role="alert">
|
|
</div>
|
|
</div>
|
|
<div id="room-is-locked"
|
|
class="connecting-msg"
|
|
style="display: none">
|
|
%= image url_for('/img/lock.png'), alt => l('LOCKED'), class => "img-responsive center-block"
|
|
</div>
|
|
<div id="no-media-msg"
|
|
class="connecting-msg"
|
|
style="display: none">
|
|
% if (defined(stash('video')) && stash('video') eq 'false'){
|
|
<p class="text-center">
|
|
%= l('NO_MEDIA_AVAILABLE')
|
|
</p>
|
|
<div class="row">
|
|
<div class="col-xs-2 col-xs-offset-4">
|
|
%= image url_for('/img/webcam.png'), alt => "Webcam", class => "img-responsive, center-block"
|
|
</div>
|
|
<div class="col-xs-2">
|
|
%= image url_for('/img/mic.png'), alt => "Microphone", class => "img-responsive, center-block"
|
|
</div>
|
|
</div>
|
|
<br>
|
|
<p class="text-center">
|
|
%= l('YOU_NEED8MIC_OR_WEBCAM')
|
|
</p>
|
|
% } else {
|
|
<p class="text-center">
|
|
%= l('CANT_ACCESS_WEBCAM')
|
|
</p>
|
|
%= image url_for('/img/webcam.png'), alt => "Webcam", class => "img-responsive center-block"
|
|
<br>
|
|
<p class="text-center">
|
|
%= l('CLICK_IF_NO_WEBCAM')
|
|
</p>
|
|
<p class="text-center">
|
|
<a class="btn btn-default btn-lg"
|
|
href="<%= $self->req->url->query(video => 'false') %>">
|
|
<span class="glyphicon glyphicon-headphones">
|
|
</span>
|
|
</a>
|
|
</p>
|
|
% }
|
|
</div>
|
|
<div id="auth-before-join"
|
|
class="connecting-msg"
|
|
style="display: none">
|
|
<form class="form-horizontal"
|
|
id="authBeforeJoinForm">
|
|
<div class="form-group">
|
|
<label for="authBeforJoinPass"
|
|
class="col-sm-4 control-label">
|
|
%= l('PASSWORD')
|
|
</label>
|
|
<div class="col-sm-4">
|
|
<input type="password"
|
|
class="form-control"
|
|
id="authBeforeJoinPass"
|
|
placeholder="<%= l('PASSWORD') %>">
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<div class="col-sm-offset-4 col-sm-8">
|
|
<button id="authBeforeJoinButton"
|
|
class="btn btn-primary"
|
|
type="submit"
|
|
disabled>
|
|
%= l('SUBMIT')
|
|
</button>
|
|
<a class="btn btn-default"
|
|
href="<%= url_for('/') %>">
|
|
%= l('CANCEL')
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div id="display-name-pre"
|
|
class="connecting-msg"
|
|
style="display: none">
|
|
<form class="form-horizontal"
|
|
id="displayNamePreForm">
|
|
<div class="col-md-8 col-md-offset-2 alert alert-info text-center"
|
|
role="alert">
|
|
%= l('SET_A_DISPLAY_NAME')
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="displayNamePre"
|
|
class="col-sm-4 control-label">
|
|
%= l('DISPLAY_NAME')
|
|
</label>
|
|
<div class="col-sm-4">
|
|
<input type="text"
|
|
class="form-control"
|
|
autocomplete="off"
|
|
id="displayNamePre"
|
|
placeholder="<%= l('YOUR_NAME') %>">
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<div class="col-sm-offset-4 col-sm-8">
|
|
<button id="displayNamePreButton"
|
|
class="btn btn-primary"
|
|
type="submit"
|
|
disabled>
|
|
%= l('SUBMIT')
|
|
</button>
|
|
<a class="btn btn-default"
|
|
href="<%= url_for('/') %>">
|
|
%= l('CANCEL')
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div id="no-webrtc-msg"
|
|
class="connecting-msg"
|
|
style="display: none">
|
|
<p>
|
|
%= l('NO_WEBRTC_SUPPORT')
|
|
</p>
|
|
% if ($ua !~ m/iphone|ipad|ipod/i){
|
|
<p>
|
|
%= l('DOWNLOAD_ONE_OF_THESE_BROWSERS')
|
|
</p>
|
|
<div class="row">
|
|
<%
|
|
my $ffurl = "http://www.mozilla.org/firefox/";
|
|
my $churl = "http://www.google.com/chrome/";
|
|
my $opurl = "http://www.opera.com";
|
|
if ($ua =~ m/android/i){
|
|
$ffurl = "https://play.google.com/store/apps/details?id=org.mozilla.firefox";
|
|
$churl = "https://play.google.com/store/apps/details?id=com.android.chrome";
|
|
$opurl = "https://play.google.com/store/apps/details?id=com.opera.browser";
|
|
}
|
|
%>
|
|
<div class="col-xs-4">
|
|
<a href="<%= $ffurl %>"
|
|
target="_blank">
|
|
%= image url_for('/img/firefox.png'), alt => "Mozilla Firefox", class => "img-responsive center-block"
|
|
</a>
|
|
</div>
|
|
<div class="col-xs-4">
|
|
<a href="<%= $churl %>"
|
|
target="_blank">
|
|
%= image url_for('/img/chrome.png'), alt => "Google Chrome", class => "img-responsive center-block"
|
|
</a>
|
|
</div>
|
|
<div class="col-xs-4">
|
|
<a href="<%= $opurl %>"
|
|
target="_blank">
|
|
%= image url_for('/img/opera.png'), alt => "Opera", class => "img-responsive center-block"
|
|
</a>
|
|
</div>
|
|
</div>
|
|
% }
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
%= include 'invite_modal'
|
|
%= include 'configure_modal'
|
|
%= include 'auth_modal'
|
|
%= include 'noscript'
|
|
<div class="frame">
|
|
<div id="chatMenu"
|
|
class="nav-collapse collapse hidden-xs">
|
|
<div id="chatHistory"
|
|
class="form-control">
|
|
</div>
|
|
<form id="chatForm">
|
|
<div class="input-group">
|
|
<textarea class="form-control"
|
|
id="chatBox"
|
|
form_id="chatForm"
|
|
placeholder="<%= l('SET_YOUR_NAME_TO_CHAT') %>"
|
|
rows=1 disabled></textarea>
|
|
<span class="input-group-btn">
|
|
<button type="submit"
|
|
id="sendChat"
|
|
class="btn btn-default help"
|
|
data-toggle="tooltip"
|
|
data-placement="bottom"
|
|
title="<%= l('SEND_MESSAGE') %>">
|
|
<span class="glyphicon glyphicon-share-alt">
|
|
</span>
|
|
</button>
|
|
<button id="saveChat"
|
|
class="btn btn-default help"
|
|
data-toggle="tooltip"
|
|
data-placement="bottom"
|
|
title="<%= l('SAVE_HISTORY') %>">
|
|
<span class="glyphicon glyphicon-floppy-save">
|
|
</span>
|
|
</button>
|
|
</span>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<audio id="mohPlayer"
|
|
src="<%= url_for('/snd/moh/' . $moh) %>"
|
|
loop>
|
|
</audio>
|
|
<div id="view"
|
|
class="view row-fluid">
|
|
<div id="webRTCVideo"
|
|
class="col-xs-12 col-sm-4">
|
|
<div class="col-xs-3 col-sm-12 col-lg-6 previewContainer"
|
|
id="videoLocalContainer">
|
|
<video id="webRTCVideoLocal"
|
|
class="webRTCVideo latencyUnknown"
|
|
muted
|
|
oncontextmenu="return false;">
|
|
</video>
|
|
<div id="localVolume"
|
|
class="volumeBar">
|
|
</div>
|
|
<div id="name_local"
|
|
class="displayName">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="mainView"
|
|
class="col-xs-12 col-sm-8">
|
|
% if (get_opt_features->{etherpad}){
|
|
<div id="etherpadContainer"
|
|
class="hidden-xs">
|
|
</div>
|
|
% }
|
|
<div id="mainVideo">
|
|
</div>
|
|
<div id="aloneMsg"
|
|
class="aloneEl">
|
|
<h2 class="text-center">
|
|
%= l('ALONE_IN_ROOM')
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
%= include 'js_common'
|
|
<script>
|
|
var roomName = '<%= $room %>';
|
|
$( document ).ready(function() {
|
|
etherpad = {
|
|
enabled: <%= get_opt_features->{etherpad} ? 'true' : 'false' %>,
|
|
% if (get_opt_features->{etherpad}){
|
|
% my $ethuri = Mojo::URL->new($config->{'etherpad.uri'});
|
|
host: "<%= $ethuri->scheme . '://' . $ethuri->host %>",
|
|
path: "<%= $ethuri->path . '/p/' %>",
|
|
group: "<%= $etherpadGroup %>"
|
|
% }
|
|
};
|
|
has_video = <%= ($video eq 'false') ? 'false' : 'true' %>;
|
|
initJoin(roomName);
|
|
$('#connecting').modal('show');
|
|
});
|
|
</script>
|
|
</div>
|
|
%= include 'footer'
|