dani
/
vroom
mirror of https://github.com/dani/vroom.git
1
0
Fork 0
Code Issues Releases Wiki Activity
Video conf based on SimpleWebRTC https://vroom.fws.fr/documentation
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
432 Commits
1 Branch
0 Tags
472 MiB
Tag: Branch: Tree: 3e8b0bb819
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '3e8b0bb819'
${ noResults }
vroom/templates/default/join.html.ep

956 lines
42 KiB
Raw Blame History

% title sprintf l('ROOM_s'), $room;
%= include 'header'
<div class="container-fluid">
<nav id="toolbar" class="navbar navbar-default" role="toolbar">
<div class="navbar-header">
<button type="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>
<input id="roomName" name="roomName" type="hidden" value="<%= $room %>"/>
<div id="roomToolBar" class="collapse navbar-collapse">
<div class="navbar-form navbar-left input-group">
<div class="input-group">
<input type="text" id="displayName" class="form-control 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-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-left">
<% if ($etherpad eq 'true'){ %>
<div class="btn-group">
<% } %>
<button id="chatDropdown" class="btn 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>
</div>
<% if ($etherpad eq 'true'){ %>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default help" id="etherpadLabel" data-toggle="tooltip" data-placement="bottom" title="<%=l 'OPEN_ETHERPAD' %>">
<input type = "checkbox" id="etherpadButton">
<span class="glyphicon glyphicon-pencil">
</span>
</button>
</label>
</div>
</div>
<% } %>
<div class="btn-group navbar-form navbar-left" data-toggle="buttons">
<label class="btn btn-default help" id="muteMicLabel" data-toggle="tooltip" data-placement="bottom" title="<%=l 'MUTE_MIC' %>">
<input type="checkbox" id="muteMicButton">
<span class="glyphicon glyphicon-volume-off">
</span>
</label>
<label class="btn btn-default help" id="suspendCamLabel" data-toggle="tooltip" data-placement="bottom" title="<%=l 'SUSPEND_CAM' %>">
<input type="checkbox" id="suspendCamButton">
<span class="glyphicon glyphicon-eye-close">
</span>
</label>
<label class="btn btn-default help aloneEl" id="pauseMohLabel" data-toggle="tooltip" data-placement="bottom" title="<%=l 'PAUSE_MOH' %>">
<input type="checkbox" id="pauseMohButton">
<span class="glyphicon glyphicon-music">
</span>
</label>
<label class="btn btn-default help" id="shareScreenLabel" data-toggle="tooltip" data-placement="bottom" title="<%=l 'SHARE_YOUR_SCREEN' %>">
<input type="checkbox" id="shareScreenButton">
<span class="glyphicon glyphicon-expand">
</span>
</label>
</div>
<div class="btn-group navbar-form navbar-left">
<div class="btn-group dropdown ownerEl">
<button class="btn btn-default dropdown-toggle help" type="button" id="inviteMenuButton" data-toggle="dropdown" data-toggle="tooltip" data-placement="bottom" title="<%=l 'INVITE_PEOPLE' %>">
<span class="glyphicon glyphicon-user"></span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="inviteMenuButton" id="inviteMenu">
<li>
<center>
<p><%=l 'TO_INVITE_SHARE_THIS_URL' %></p>
<% my $url = $self->url_for('/')->to_abs;
$url .= ($url =~ m/\/$/) ? '':'/';
%>
<h4><a href="javascript:void(0)" onclick="inviteUrlPopup();"><%= $url . $room %></a></h4>
</center>
</li>
<li class="divider"></li>
<li>
<form class="navbar-form" id="inviteEmail" action="" method="post">
<center>
<p><%=l 'YOU_CAN_INVITE_BY_MAIL' %></p>
</center>
<div class="input-group">
<input type="email" id="recipient" class="form-control help" placeholder="<%=l 'EMAIL_PLACEHOLDER' %>" data-toggle="tooltip" data-placement="bottom" title="<%=l 'SEND_INVITE' %>"/>
<span class="input-group-btn">
<button id="inviteEmailButton" type="submit" class="btn btn-default help" data-toggle="tooltip" data-placement="bottom" title="<%=l 'SEND_INVITE' %>">
<span class="glyphicon glyphicon-send">
</span>
</button>
</span>
</div>
<div class="input-group">
<textarea id="message" name="message" class="form-control help" placeholder="<%=l 'MESSAGE' %>" data-toggle="tooltip" data-placement="bottom" title="<%=l 'SEND_CUSTOM_MESSAGE' %>"></textarea>
<span class="input-group-addon">
<span class="glyphicon glyphicon-envelope">
</span>
</span>
</div>
</form>
</li>
</ul>
</div>
<div class="btn-group dropdown ownerEl threePeersEl">
<button class="btn btn-default dropdown-toggle help" type="button" id="groupActionsButton" data-toggle="dropdown" data-toggle="tooltip" data-placement="bottom" title="<%=l 'GROUP_ACTIONS' %>">
<span class="glyphicon glyphicon-flag"></span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="groupActionsButton" id="confMenu">
<li>
<center>
<div class="navbar-form">
<div class="btn-group" data-toggle="buttons">
<button type="button" class="btn btn-default help" id="muteEveryoneButton" data-toggle="tooltip" data-placement="bottom" title="<%=l 'MUTE_EVERYONE' %>">
<span class="glyphicon glyphicon-volume-off">
</span>
</button>
<button type="button" class="btn btn-default help" id="unmuteEveryoneButton" data-toggle="tooltip" data-placement="bottom" title="<%=l 'UNMUTE_EVERYONE' %>">
<span class="glyphicon glyphicon-volume-up">
</span>
</buton>
<button type="button" class="btn btn-default help" id="suspendEveryoneButton" data-toggle="tooltip" data-placement="bottom" title="<%=l 'SUSPEND_EVERYONE' %>">
<span class="glyphicon glyphicon-eye-close">
</span>
</button>
<button type="button" class="btn btn-default help" id="resumeEveryoneButton" data-toggle="tooltip" data-placement="bottom" title="<%=l 'RESUME_EVERYONE' %>">
<span class="glyphicon glyphicon-eye-open">
</span>
</button>
</div>
</div>
</center>
</li>
</ul>
</div>
<div class="btn-group dropdown ownerEl">
<button class="btn btn-default dropdown-toggle help" type="button" id="confMenuButton" data-toggle="dropdown" data-toggle="tooltip" data-placement="bottom" title="<%=l 'CONFIGURE' %>">
<span class="glyphicon glyphicon-wrench"></span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="confMenuButton" id="confMenu">
<li>
<center>
<div class="navbar-form">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default help" id="lockLabel" data-toggle="tooltip" data-placement="bottom" title="<%=l 'PREVENT_TO_JOIN' %>">
<input type="checkbox" id="lockButton">
<span class="glyphicon glyphicon-ban-circle">
</span>
</label>
<label class="btn btn-default help" id="joinPassLabel" data-toggle="tooltip" data-placement="bottom" title="<%=l 'PASSWORD_PROTECT' %>">
<input type="checkbox" id="joinPassButton">
<span class="glyphicon glyphicon-lock">
</span>
</label>
<label class="btn btn-default help" id="persistentLabel" data-toggle="tooltip" data-placement="bottom" title="<%=l 'MAKE_THIS_ROOM_PERSISTENT' %>">
<input type="checkbox" id="persistentButton">
<span class="glyphicon glyphicon-pushpin">
</span>
</label>
<label class="btn btn-default help" id="askForNameLabel" data-toggle="tooltip" data-placement="bottom" title="<%=l 'FORCE_DISPLAY_NAME' %>">
<input type="checkbox" id="askForNameButton">
<span class="glyphicon glyphicon-leaf">
</span>
</label>
</div>
</div>
</center>
</li>
<li class="divider">
</li>
<li>
<center>
<div class="navbar-form">
<div class="btn-group">
<%
my $wipeTitle = ($etherpad) ? 'WIPE_CHAT_AND_PAD' : 'WIPE_CHAT';
%>
<button id="wipeDataButton" class="btn btn-default help" data-toggle="tooltip" data-placement="bottom" title="<%=l $wipeTitle %>">
<span class="glyphicon glyphicon-fire">
</span>
</button>
</div>
</div>
</center>
</li>
<li class="divider">
</li>
<li>
<center>
<p><%=l 'NOTIFICATION_ON_JOIN' %></p>
</center>
<ul class="list-inline" id="emailNotificationList">
</ul>
<form class="navbar-form" id="newEmailNotificationForm">
<div class="input-group">
<input type="email" id="newEmailNotification" class="form-control help" placeholder="<%=l 'EMAIL_PLACEHOLDER' %>" data-toggle="tooltip" data-placement="bottom" title="<%=l 'ADD_NOTIFICATION' %>"/>
<span class="input-group-btn">
<button id="newEmailNotificationButton" type="submit" class="btn btn-default help disabled" data-toggle="tooltip" data-placement="bottom" title="<%=l 'ADD_THIS_ADDRESS' %>">
<span class="glyphicon glyphicon-ok">
</span>
</button>
</span>
</div>
</form>
</li>
</ul>
</div>
</div>
<div class="btn-group navbar-form navbar-left">
<button class="btn btn-default dropdown-toggle help unauthEl" type="button" id="authMenuButton" data-toggle="dropdown" data-toggle="tooltip" data-placement="bottom" title="<%=l 'AUTHENTICATE' %>">
<span class="glyphicon glyphicon-log-in"></span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="authMenuButton" id="authMenu">
<li>
<form class="navbar-form" id="authForm">
<center>
<p><%=l 'AUTH_TO_MANAGE_THE_ROOM' %></p>
</center>
<div class="input-group">
<input type="password" id="authPass" class="form-control help" placeholder="<%=l 'PASSWORD' %>" data-toggle="tooltip" data-placement="bottom" title="<%=l 'AUTHENTICATE' %>"/>
<span class="input-group-btn">
<button id="authPassButton" type="submit" class="btn btn-default help disabled" data-toggle="tooltip" data-placement="bottom" title="<%=l 'AUTHENTICATE' %>">
<span class="glyphicon glyphicon-ok">
</span>
</button>
</span>
</div>
</form>
</li>
</ul>
</div>
<div class="navbar-form navbar-right" data-toggle="buttons" >
<div class="btn-group">
<button id="helpButton" class="btn btn-default help" data-toggle="modal" data-target="#helpModal" rel="tooltip" data-placement="bottom" title="<%=l 'HELP' %>">
<span class="glyphicon glyphicon-question-sign">
</span>
</button>
<div id="timeCounter" class="btn btn-default disabled"></div>
<button class="btn btn-default help" id="logoutButton" 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" role="dialog" id="helpModal" aria-labelledby="helpModal" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title"><%=l 'HELP' %></h4>
</div>
<div class="modal-body">
<div class="list-group">
<div class="list-group-item row">
<div class="col-md-3">
<center>
<input type="text" class="form-control" placeholder="<%=l 'YOUR_NAME' %>">
</center>
</div>
<div class="col-md-9">
<%=l 'HELP_SET_DISPLAY_NAME' %>
</div>
</div>
<div class="list-group-item row">
<div class="col-md-1">
<center>
<div class="btn btn-default">
<span class="glyphicon glyphicon-tag"></span>
</div>
</center>
</div>
<div class="col-md-11">
<%=l 'HELP_CHANGE_COLOR_BUTTON' %>
</div>
</div>
<div class="list-group-item row">
<div class="col-md-1">
<center>
<div class="btn btn-default">
<span class="glyphicon glyphicon-comment"></span>
</div>
</center>
</div>
<div class="col-md-11">
<%=l 'HELP_CHAT_BUTTON' %>
</div>
</div>
<div class="list-group-item row">
<div class="col-md-1">
<center>
<div class="btn btn-default">
<span class="glyphicon glyphicon-volume-off"></span>
</div>
</center>
</div>
<div class="col-md-11">
<%=l 'HELP_MUTE_BUTTON' %>
</div>
</div>
<div class="list-group-item row">
<div class="col-md-1">
<center>
<div class="btn btn-default">
<span class="glyphicon glyphicon-eye-close"></span>
</div>
</center>
</div>
<div class="col-md-11">
<%=l 'HELP_SUSPEND_CAM_BUTTON' %>
</div>
</div>
<div class="list-group-item row aloneEl">
<div class="col-md-1">
<center>
<div class="btn btn-default">
<span class="glyphicon glyphicon-music"></span>
</div>
</center>
</div>
<div class="col-md-11">
<%=l 'HELP_MOH_BUTTON' %>
</div>
</div>
<div class="list-group-item row">
<div class="col-md-1">
<center>
<div class="btn btn-default">
<span class="glyphicon glyphicon-expand"></span>
</div>
</center>
</div>
<div class="col-md-11">
<%=l 'HELP_SHARE_SCREEN_BUTTON' %>
</div>
</div>
<div class="list-group-item row ownerEl">
<div class="col-md-1">
<center>
<a data-toggle="collapse" href="#helpInviteMenuCollapse" class="btn btn-default">
<span class="glyphicon glyphicon-user"></span>
<span class="caret"></span>
</a>
</center>
</div>
<div class="col-md-11">
<%=l 'HELP_INVITE_MENU' %>
</div>
</div>
<div id="helpInviteMenuCollapse" class="collapse">
<div class="list-group-item row ownerEl">
<div class="col-md-1 col-md-offset-1">
<center>
<div class="btn btn-default">
<span class="glyphicon glyphicon-send"></span>
</div>
</center>
</div>
<div class="col-md-10">
<%=l 'HELP_EMAIL_INVITE_BUTTON' %>
</div>
</div>
</div>
<div class="list-group-item row ownerEl threePeersEl">
<div class="col-md-1">
<center>
<a data-toggle="collapse" href="#helpGroupActionsMenuCollapse" class="btn btn-default">
<span class="glyphicon glyphicon-flag"></span>
<span class="caret"></span>
</a>
</center>
</div>
<div class="col-md-11">
<%=l 'HELP_GROUP_ACTIONS' %>
</div>
</div>
<div id="helpGroupActionsMenuCollapse" class="collapse">
<div class="list-group-item row ownerEl threePeersEl">
<div class="col-md-1 col-md-offset-1">
<center>
<div class="btn btn-default">
<span class="glyphicon glyphicon-volume-off"></span>
</div>
</center>
</div>
<div class="col-md-10">
<%=l 'HELP_MUTE_EVERYONE_BUTTON' %>
</div>
</div>
<div class="list-group-item row ownerEl threePeersEl">
<div class="col-md-1 col-md-offset-1">
<center>
<div class="btn btn-default">
<span class="glyphicon glyphicon-volume-up"></span>
</div>
</center>
</div>
<div class="col-md-10">
<%=l 'HELP_UNMUTE_EVERYONE_BUTTON' %>
</div>
</div>
<div class="list-group-item row ownerEl threePeersEl">
<div class="col-md-1 col-md-offset-1">
<center>
<div class="btn btn-default">
<span class="glyphicon glyphicon-eye-close"></span>
</div>
</center>
</div>
<div class="col-md-10">
<%=l 'HELP_SUSPEND_EVERYONE_BUTTON' %>
</div>
</div>
<div class="list-group-item row ownerEl threePeersEl">
<div class="col-md-1 col-md-offset-1">
<center>
<div class="btn btn-default">
<span class="glyphicon glyphicon-eye-open"></span>
</div>
</center>
</div>
<div class="col-md-10">
<%=l 'HELP_RESUME_EVERYONE_BUTTON' %>
</div>
</div>
</div>
<div class="list-group-item row ownerEl">
<div class="col-md-1">
<center>
<a data-toggle="collapse" href="#helpConfMenuCollapse" class="btn btn-default">
<span class="glyphicon glyphicon-wrench"></span>
<span class="caret"></span>
</a>
</center>
</div>
<div class="col-md-11">
<%=l 'HELP_CONF_MENU' %>
</div>
</div>
<div id="helpConfMenuCollapse" class="collapse">
<div class="list-group-item row ownerEl">
<div class="col-md-1 col-md-offset-1">
<center>
<div class="btn btn-default">
<span class="glyphicon glyphicon-ban-circle"></span>
</div>
</center>
</div>
<div class="col-md-10">
<%=l 'HELP_LOCK_BUTTON' %>
</div>
</div>
<div class="list-group-item row ownerEl">
<div class="col-md-1 col-md-offset-1">
<center>
<div class="btn btn-default">
<span class="glyphicon glyphicon-lock"></span>
</div>
</center>
</div>
<div class="col-md-10">
<%=l 'HELP_PASSWORD_BUTTON' %>
</div>
</div>
<div class="list-group-item row ownerEl">
<div class="col-md-1 col-md-offset-1">
<center>
<div class="btn btn-default">
<span class="glyphicon glyphicon-pushpin"></span>
</div>
</center>
</div>
<div class="col-md-10">
<%=l 'HELP_PERSISTENT_BUTTON' %>
</div>
</div>
<div class="list-group-item row ownerEl">
<div class="col-md-1 col-md-offset-1">
<center>
<div class="btn btn-default">
<span class="glyphicon glyphicon-leaf"></span>
</div>
</center>
</div>
<div class="col-md-10">
<%=l 'HELP_ASK_FOR_NAME_BUTTON' %>
</div>
</div>
<div class="list-group-item row ownerEl">
<div class="col-md-1 col-md-offset-1">
<center>
<div class="btn btn-default">
<span class="glyphicon glyphicon-fire"></span>
</div>
</center>
</div>
<div class="col-md-10">
<%=l 'HELP_WIPE_DATA_BUTTON' %>
</div>
</div>
</div>
<div class="list-group-item row">
<div class="col-md-1">
<center>
<div class="btn btn-default">
<span class="glyphicon glyphicon-log-out"></span>
</div>
</center>
</div>
<div class="col-md-11">
<%=l 'HELP_LOGOUT_BUTTON' %>
</div>
</div>
<div class="list-group-item row ownerEl">
<div class="col-md-3">
<center>
<div class="btn-group">
<div class="btn btn-sm btn-default">
<span class="glyphicon glyphicon-volume-off"></span>
</div>
<div class="btn btn-sm btn-default">
<span class="glyphicon glyphicon-eye-close"></span>
</div>
<div class="btn btn-sm btn-default">
<span class="glyphicon glyphicon-certificate"></span>
</div>
<div class="btn btn-sm btn-default">
<span class="glyphicon glyphicon-remove-circle"></span>
</div>
</center>
</div>
<div class="col-md-9">
<%=l 'HELP_PEER_ACTIONS_BUTTONS' %>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" role="dialog" id="setDisplayName" aria-labelledby="setDisplayName" aria-hidden="true" data-keyboard="false" data-backdrop="static">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="setDisplayNameTitle"><%=l 'DISPLAY_NAME_REQUIRED' %></h4>
</div>
<div class="modal-body">
<form role="form" class="well" id="displayNamePreForm">
<label for="displayNamePre"><%=l 'SET_A_DISPLAY_NAME' %></label>
<div class="input-group">
<input type="text" class="form-control" id="displayNamePre" name="displayNamePre" placeholder="<%=l 'YOUR_NAME' %>">
<span class="input-group-btn">
<button type="submit" id="displayNamePreButton" class="btn btn-default disabled">
<span class="glyphicon glyphicon-log-in"></span>
</button>
</span>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="modal fade" role="dialog" id="wipeModal" aria-labelledby="wipeModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
&times;
</button>
<h4 class="modal-title">
<%=l 'WIPE_ROOM_DATA' %>
</h4>
</div>
<div class="modal-body">
<p>
<%=l 'YOU_ARE_ABOUT_TO_WIPE_DATA' %>
<%=l 'THIS_INCLUDE' %>
<ul>
<li>
<%=l 'CHAT_HISTORY' %>
</li>
<% if ($etherpad) { %>
<li>
<%=l 'PAD_CONTENT' %>
</li>
<% } %>
</ul>
</p>
</div>
<div class="modal-footer">
<button id="confirmWipeButton" class="btn btn-danger">
<%=l 'CONFIRM_WIPE' %>
</button>
<button class="btn btn-default" data-dismiss="modal" data-target="#wipeModal">
<%=l 'CANCEL' %>
</button>
</div>
</div>
</div>
</div>
<div class="modal fade" role="dialog" id="quitModal" aria-labelledby="quitModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
&times;
</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>
<p class="ownerEl">
<%=l 'YOU_CAN_WIPE_DATA_BEFORE_LEAVING' %>
</p>
</div>
<div class="modal-footer">
<button id="confirmWipeAndQuitButton" class="btn btn-danger ownerEl">
<%=l 'WIPE_AND_QUIT' %>
</button>
<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" role="dialog" id="chromeExtMessage" aria-labelledby="chromeExtMessage" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title" id="chromeExtMessageTitle"><%=l 'EXTENSION_REQUIRED' %></h4>
</div>
<div clas="modal-body">
<p>
<%=l 'VROOM_CHROME_EXTENSION' %>
</p>
<p>
<a class="btn btn-default btn-lg" href="https://chrome.google.com/webstore/detail/<%= $config->{chromeExtensionId} %>" target="_blank">
<span class="glyphicon glyphicon-download-alt">
</span>
</a>
</p>
</div>
</div>
</div>
</div>
<div class="modal fade" role="dialog" id="noWebrtcSupport" aria-labelledby="noWebrtcSupport" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title" id="noWebrtcSupportTitle"><%=l 'BROWSER_NOT_SUPPORTED' %></h4>
</div>
<div class="modal-body">
<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">
<center>
<img class="img-responsive" src="<%= $self->get_url('/') %>img/firefox.png" alt="Mozilla Firefox"/>
</center>
</a>
</div>
<div class="col-xs-4">
<a href="<%= $churl %>" target="_blank">
<center>
<img class="img-responsive" src="<%= $self->get_url('/') %>img/chrome.png" alt="Google Chrome"/>
</center>
</a>
</div>
<div class="col-xs-4">
<a href="<%= $opurl %>" target="_blank">
<center>
<img class="img-responsive" src="<%= $self->get_url('/') %>img/opera.png" alt="Opera"/>
</center>
</a>
</div>
</div>
<% } %>
</div>
</div>
</div>
</div>
<div class="modal fade" role="dialog" id="noWebcam" aria-labelledby="noWebcam" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title" id="noWebcamTitle"><%=l 'NO_WEBCAM' %></h4>
</div>
<div class="modal-body">
<p><%=l 'CANT_ACCESS_WEBCAM' %></p>
<center>
<img src="<%= $self->get_url('/') %>img/webcam.png" alt="Webcam"/>
<br>
<p>
<%=l 'CLICK_IF_NO_WEBCAM' %>
</p>
<p>
<a class="btn btn-default btn-lg" href="<%= $self->get_url('/') . $room %>?video=false">
<span class="glyphicon glyphicon-headphones">
</span>
</a>
</p>
</center>
</div>
</div>
</div>
</div>
<div class="modal fade" role="dialog" id="disconnected" aria-labelledby="disconnected" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title"><%=l 'CONNECTION_LOST' %></h4>
</div>
<div class="modal-body">
<center>
<img src="<%= $self->get_url('/') %>img/flash.png" alt="<%=l 'CONNECTION_LOST' %>"/>
<br>
<p>
<%=l 'CHECK_INTERNET_ACCESS' %>
</p>
</center>
</div>
</div>
</div>
</div>
<div class="modal fade" role="dialog" id="persistentModal" aria-labelledby="persistentModal" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title" id="persistentTitle"><%=l 'MAKE_THIS_ROOM_PERSISTENT' %></h4>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form" id="persistentForm">
<p>
<%=l 'SET_OWNER_PASS_PERSISTENT' %>
<ul>
<li><%= sprintf($self->l('A_STANDARD_ROOM_EXPIRES_AFTER_d'), int($config->{inactivityTimeout}/3600)) %></li>
<li>
<%=l 'A_PERSISTENT_ROOM' %>
<% if ($config->{persistentInactivityTimeout} > 0){ %>
<%= sprintf($self->l('EXPIRE_AFTER_d'), int($config->{persistentInactivityTimeout}/(3600*24))) %>
<% } else{ %>
<%=l 'WILL NEVER_EXPIRE' %>
<% } %>
</li>
</ul>
</p>
<div class="form-group">
<label for="ownerPass" class="col-sm-4 control-label">
<%=l 'PASSWORD' %>
</label>
<div class="col-sm-8">
<input type="password" id="ownerPass" class="form-control help" placeholder="<%=l 'PASSWORD' %>" data-toggle="tooltip" data-placement="bottom" title="<%=l 'PASSWORD' %>"/>
</div>
</div>
<div class="form-group">
<label for="ownerPassConfirm" class="col-sm-4 control-label">
<%=l 'CONFIRM_PASSWORD' %>
</label>
<div class="col-sm-8">
<input type="password" id="ownerPassConfirm" class="form-control help" placeholder="<%=l 'CONFIRM_PASSWORD' %>" data-toggle="tooltip" data-placement="bottom" title="<%=l 'CONFIRM_PASSWORD' %>"/>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-4 col-sm-8">
<button id="setOwnerPassButton" type="submit" class="btn btn-primary help disabled" data-toggle="tooltip" data-placement="bottom" title="<%=l 'SUBMIT' %>">
<%=l 'SUBMIT' %>
</button>
<button class="btn btn-default help" data-dismiss="modal" data-toggle="tooltip" data-placement="bottom" title="<%=l 'CANCEL' %>">
<%=l 'CANCEL' %>
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="modal fade" role="dialog" id="joinPassModal" aria-labelledby="joinPassModal" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title" id="joinPassTitle"><%=l 'PASSWORD_PROTECT' %></h4>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form" id="joinPassForm">
<p>
<%=l 'PROTECT_ROOM_WITH_PASSWORD' %>
</p>
<div class="form-group">
<label for="joinPass" class="col-sm-4 control-label">
<%=l 'PASSWORD' %>
</label>
<div class="col-sm-8">
<input type="password" id="joinPass" class="form-control help" placeholder="<%=l 'PASSWORD' %>" data-toggle="tooltip" data-placement="bottom" title="<%=l 'PASSWORD' %>"/>
</div>
</div>
<div class="form-group">
<label for="joinPassConfirm" class="col-sm-4 control-label">
<%=l 'CONFIRM_PASSWORD' %>
</label>
<div class="col-sm-8">
<input type="password" id="joinPassConfirm" class="form-control help" placeholder="<%=l 'CONFIRM_PASSWORD' %>" data-toggle="tooltip" data-placement="bottom" title="<%=l 'CONFIRM_PASSWORD' %>"/>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-4 col-sm-8">
<button id="setJoinPassButton" type="submit" class="btn btn-default btn-primary help disabled" data-toggle="tooltip" data-placement="bottom" title="<%=l 'SUBMIT' %>">
<%=l 'SUBMIT' %>
</button>
<button class="btn btn-default help" data-dismiss="modal" data-toggle="tooltip" data-placement="bottom" title="<%=l 'CANCEL' %>">
<%=l 'CANCEL' %>
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
%= include 'noscript'
<div class="frame">
<div id="chatMenu" class="nav-collapse collapse">
<div id="chatHistory" class="form-control">
</div>
<form role="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 type="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="<%= $self->get_url('/') %>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 ($etherpad eq 'true'){ %>
<div id="etherpadContainer"></div>
<% } %>
<div id="mainVideo">
</div>
<div id="aloneMsg" class="aloneEl">
<center>
<h2>
<%=l 'ALONE_IN_ROOM' %>
</h2>
</center>
</div>
</div>
</div>
</div>
%= include 'js_common'
%= include 'js_room'
<script>
var roomName = '<%= $room %>';
$( document ).ready(function() {
setTimeout(function(){
etherpad = {
enabled: <%= $etherpad %>,
uri: "<%= $config->{etherpadUri} %>",
group: "<%= $etherpadGroup %>"
};
<% if ($video eq 'false'){ %>
videoConstraints = false;
<% } else{ %>
videoConstraints = {
mandatory: {
maxFrameRate: 15,
}
};
<% } %>
webrtc = new SimpleWebRTC({
url: "<%= $config->{signalingServer} %>",
peerConnectionConfig: {
iceServers: [
{"url":"stun:<%= $config->{stunServer} %>"},
<%== ($config->{turnServer} && $config->{turnServer} ne '') ? "{\"url\":\"turn:$config->{turnServer}\", \"username\":\"$room\", \"credential\":\"$turnPassword\"}":'' %>
]
},
localVideoEl: 'webRTCVideoLocal',
autoRequestMedia: true,
enableDataChannels: true,
debug: false,
detectSpeakingEvents: true,
adjustPeerVolume: false,
autoAdjustMic: false,
harkOptions: {
interval: 300,
threshold: -20
},
media: {
video: videoConstraints,
audio: true
}
});
initVroom(roomName);
}, 300);
});
</script>
</div>
%= include 'footer'