Implements welcome page.
This commit is contained in:
hristoterezov
parent
310e36d128
commit
1794003875
27
app.js
27
app.js
|
|
@ -1115,6 +1115,33 @@ function getCameraVideoSize(videoWidth,
|
|||
}
|
||||
|
||||
$(document).ready(function () {
|
||||
|
||||
if(config.enableWelcomePage && window.location.pathname == "/")
|
||||
{
|
||||
$("#videoconference_page").hide();
|
||||
$("#enter_room_button").click(function()
|
||||
{
|
||||
var val = Util.escapeHtml($("#enter_room_field").val());
|
||||
window.location.pathname = "/" + val;
|
||||
});
|
||||
|
||||
$("#enter_room_field").keydown(function (event) {
|
||||
if (event.keyCode === 13) {
|
||||
var val = Util.escapeHtml(this.value);
|
||||
window.location.pathname = "/" + val;
|
||||
}
|
||||
});
|
||||
|
||||
if(!config.isBrand)
|
||||
{
|
||||
$("#brand_logo").hide();
|
||||
$("#brand_header").hide();
|
||||
$("#header_text").hide();
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
$("#welcome_page").hide();
|
||||
Chat.init();
|
||||
|
||||
$('body').popover({ selector: '[data-toggle=popover]',
|
||||
|
|
|
|||
|
|
@ -19,5 +19,7 @@ var config = {
|
|||
// channelLastN: -1, // The default value of the channel attribute last-n.
|
||||
// useRtcpMux: true,
|
||||
// useBundle: true,
|
||||
enableRecording: false
|
||||
enableRecording: false,
|
||||
enableWelcomePage: false,
|
||||
isBrand: false
|
||||
};
|
||||
|
|
|
|||
150
css/main.css
150
css/main.css
|
|
@ -259,3 +259,153 @@ form {
|
|||
overflow: visible;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
#enter_room_field {
|
||||
border-radius: 10px;
|
||||
font-size: 16px;
|
||||
padding: 15px 55px 10px 30px;
|
||||
border: none;
|
||||
-moz-border-radius: 10px;
|
||||
-webkit-border-radius: 10px;
|
||||
-webkit-appearance: none;
|
||||
width: 318px;
|
||||
height: 55px;
|
||||
position:absolute;
|
||||
font-weight: 500;
|
||||
font-family: Helvetica;
|
||||
box-shadow: none;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
#enter_room_button {
|
||||
width: 73px;
|
||||
height: 45px;
|
||||
background-color: #16a8fe;
|
||||
moz-border-radius: 15px;
|
||||
-webkit-border-radius: 15px;
|
||||
color: #ffffff;
|
||||
font-weight: 600;
|
||||
border: none;
|
||||
position:absolute;
|
||||
margin-left: 240px;
|
||||
margin-top: 5px;
|
||||
font-size: 19px;
|
||||
font-family: Helvetica;
|
||||
padding-top: 6px;
|
||||
z-index: 2;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
#enter_room {
|
||||
margin: 70px auto 0px auto;
|
||||
width:318px;
|
||||
}
|
||||
|
||||
#welcome_page_header
|
||||
{
|
||||
background-image: url(../images/welcome_page/pattern-header.png);
|
||||
height: 290px;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
#welcome_page_main
|
||||
{
|
||||
background-image:url(../images/welcome_page/pattern-body.png);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
margin-top: 290px;
|
||||
}
|
||||
|
||||
#jitsi_logo
|
||||
{
|
||||
background-image:url(../images/welcome_page/jitsi-logo.png);
|
||||
width: 186px;
|
||||
height: 74px;
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
left: 30px;
|
||||
}
|
||||
|
||||
#brand_logo
|
||||
{
|
||||
background-image:url(../images/welcome_page/unicef-logo.png);
|
||||
width: 215px;
|
||||
height: 55px;
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: 30px;
|
||||
|
||||
}
|
||||
|
||||
#brand_header
|
||||
{
|
||||
background-image:url(../images/welcome_page/unicef-header-big.png);
|
||||
position:absolute;
|
||||
width: 583px;
|
||||
height: 274px;
|
||||
left: 340px;
|
||||
top:15px;
|
||||
}
|
||||
|
||||
#header_text
|
||||
{
|
||||
position: absolute;
|
||||
left: 200px;
|
||||
top: 150px;
|
||||
width: 885px;
|
||||
height: 100px;
|
||||
color: #ffffff;
|
||||
font-family: Helvetica;
|
||||
font-size: 24px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#features
|
||||
{
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.feature_row
|
||||
{
|
||||
width: 100%;
|
||||
left: 115px;
|
||||
position: relative;
|
||||
float: left;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.feature_holder
|
||||
{
|
||||
float:left;
|
||||
width: 169px;
|
||||
padding-left: 75px;
|
||||
}
|
||||
|
||||
.feature_icon
|
||||
{
|
||||
background-image:url(../images/welcome_page/bubble.png);
|
||||
background-repeat: no-repeat;
|
||||
width: 169px;
|
||||
height: 169px;
|
||||
font-family: Helvetica;
|
||||
color: #ffffff;
|
||||
font-size: 22px;
|
||||
/*font-weight: bold;*/
|
||||
text-align: center;
|
||||
display: table-cell;
|
||||
padding: 50px 29px 0px 17px;
|
||||
}
|
||||
|
||||
.feature_description
|
||||
{
|
||||
width: 169px;
|
||||
font-family: Helvetica;
|
||||
color: #ffffff;
|
||||
font-size: 16px;
|
||||
padding-top: 30px;
|
||||
line-height: 22px;
|
||||
font-weight: 200;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 7.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.8 KiB |
276
index.html
276
index.html
|
|
@ -1,4 +1,4 @@
|
|||
<html itemscope itemtype="http://schema.org/Product" prefix="og: http://ogp.me/ns#">
|
||||
<html itemscope itemtype="http://schema.org/Product" prefix="og: http://ogp.me/ns#" xmlns="http://www.w3.org/1999/html">
|
||||
<head>
|
||||
<title>Jitsi Videobridge meets WebRTC</title>
|
||||
<link rel="icon" type="image/png" href="/images/favicon.ico"/>
|
||||
|
|
@ -61,110 +61,186 @@
|
|||
<script src="libs/prezi_player.js?v=2"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div style="position: relative;" id="header_container">
|
||||
<div id="header">
|
||||
<span id="toolbar">
|
||||
<a class="button" data-toggle="popover" data-placement="bottom" data-content="Mute / Unmute" onclick='toggleAudio();'>
|
||||
<i id="mute" class="icon-microphone"></i>
|
||||
</a>
|
||||
<div class="header_button_separator"></div>
|
||||
<a class="button" data-toggle="popover" data-placement="bottom" data-content="Start / stop camera" onclick='buttonClick("#video", "icon-camera icon-camera-disabled");toggleVideo();'>
|
||||
<i id="video" class="icon-camera"></i>
|
||||
</a>
|
||||
<span id="recording" style="display: none">
|
||||
<div class="header_button_separator"></div>
|
||||
<a class="button" data-toggle="popover" data-placement="bottom" data-content="Record" onclick='toggleRecording();'>
|
||||
<i id="recordButton" class="icon-recEnable"></i>
|
||||
</a>
|
||||
</span>
|
||||
<div class="header_button_separator"></div>
|
||||
<a class="button" data-toggle="popover" data-placement="bottom" data-content="Lock / unlock room" onclick="Toolbar.openLockDialog();">
|
||||
<i id="lockIcon" class="icon-security"></i>
|
||||
</a>
|
||||
<div class="header_button_separator"></div>
|
||||
<a class="button" data-toggle="popover" data-placement="bottom" data-content="Invite others" onclick="Toolbar.openLinkDialog();">
|
||||
<i class="icon-link"></i>
|
||||
</a>
|
||||
<div class="header_button_separator"></div>
|
||||
<span class="toolbar_span">
|
||||
<a class="button" data-toggle="popover" data-placement="bottom" data-content="Open / close chat" onclick='Chat.toggleChat();'>
|
||||
<i id="chatButton" class="icon-chat"></i>
|
||||
</a>
|
||||
<span id="unreadMessages"></span>
|
||||
</span>
|
||||
<div class="header_button_separator"></div>
|
||||
<a class="button" data-toggle="popover" data-placement="bottom" data-content="Share Prezi" onclick='Prezi.openPreziDialog();'>
|
||||
<i class="icon-prezi"></i>
|
||||
</a>
|
||||
<span id="etherpadButton">
|
||||
<div class="header_button_separator"></div>
|
||||
<a class="button" data-toggle="popover" data-placement="bottom" data-content="Shared document" onclick='Etherpad.toggleEtherpad(0);'>
|
||||
<i class="icon-share-doc"></i>
|
||||
</a>
|
||||
</span>
|
||||
<div class="header_button_separator"></div>
|
||||
<span id="desktopsharing" style="display: none">
|
||||
<a class="button" data-toggle="popover" data-placement="bottom" data-content="Share screen" onclick="toggleScreenSharing();">
|
||||
<i class="icon-share-desktop"></i>
|
||||
</a>
|
||||
</span>
|
||||
<div class="header_button_separator"></div>
|
||||
<a class="button" data-toggle="popover" data-placement="bottom" data-content="Enter / Exit Full Screen" onclick='buttonClick("#fullScreen", "icon-full-screen icon-exit-full-screen");Toolbar.toggleFullScreen();'>
|
||||
<i id="fullScreen" class="icon-full-screen"></i>
|
||||
</a>
|
||||
<span id="sipCallButton">
|
||||
<div class="header_button_separator"></div>
|
||||
<a class="button" data-toggle="popover" data-placement="bottom" data-content="Call SIP number" onclick='callSipButtonClicked();'>
|
||||
<i class="icon-telephone"></i></a>
|
||||
</span>
|
||||
</span>
|
||||
<div id="welcome_page">
|
||||
<div id="welcome_page_header">
|
||||
<a href="http://jitsi.org" target="_new">
|
||||
<div id="jitsi_logo"></div>
|
||||
</a>
|
||||
<a href="http://unicefuganda.org/" target="_new">
|
||||
<div id="brand_logo"></div>
|
||||
</a>
|
||||
<div id="enter_room">
|
||||
<input id="enter_room_field" type="text" placeholder="Enter room name" />
|
||||
<input id="enter_room_button" type="button" value="GO" />
|
||||
</div>
|
||||
<div id="brand_header"></div>
|
||||
<div id="header_text">
|
||||
Welcome to uTalk! A free and open-source WebRTC video conferencing system developed by BlueJimp and UNICEF Uganda in collaboration with the Jitsi.org community.
|
||||
</div>
|
||||
</div>
|
||||
<div id="subject"></div>
|
||||
</div>
|
||||
<div id="settings">
|
||||
<h1>Connection Settings</h1>
|
||||
<form id="loginInfo">
|
||||
<label>JID: <input id="jid" type="text" name="jid" placeholder="me@example.com"/></label>
|
||||
<label>Password: <input id="password" type="password" name="password" placeholder="secret"/></label>
|
||||
<label>BOSH URL: <input id="boshURL" type="text" name="boshURL" placeholder="/http-bind"/></label>
|
||||
<input id="connect" type="submit" value="Connect" />
|
||||
</form>
|
||||
</div>
|
||||
<div id="reloadPresentation"><a onclick='Prezi.reloadPresentation();'><i title="Reload Prezi" class="fa fa-repeat fa-lg"></i></a></div>
|
||||
<div id="videospace" onmousemove="Toolbar.showToolbar();">
|
||||
<div id="largeVideoContainer" class="videocontainer">
|
||||
<div id="presentation"></div>
|
||||
<div id="etherpad"></div>
|
||||
<a href="http://jitsi.org" target="_new"><div class="watermark" id="leftwatermark"></div></a>
|
||||
<!-- a href="http://jitsi.org" target="_new"><div class="watermark" id="rightwatermark"></div></a -->
|
||||
<video id="largeVideo" autoplay oncontextmenu="return false;"></video>
|
||||
</div>
|
||||
<div id="remoteVideos">
|
||||
<span id="localVideoContainer" class="videocontainer">
|
||||
<span id="localNick" class="nick"></span>
|
||||
<span id="localVideoWrapper">
|
||||
<!--<video id="localVideo" autoplay oncontextmenu="return false;" muted></video> - is now per stream generated -->
|
||||
</span>
|
||||
<audio id="localAudio" autoplay oncontextmenu="return false;" muted></audio>
|
||||
<span class="focusindicator"></span>
|
||||
</span>
|
||||
<audio id="userJoined" src="sounds/joined.wav" preload="auto"></audio>
|
||||
<audio id="userLeft" src="sounds/left.wav" preload="auto"></audio>
|
||||
<div id="welcome_page_main">
|
||||
<div id="features">
|
||||
<div class="feature_row">
|
||||
<div class="feature_holder">
|
||||
<div class="feature_icon">Simple to use</div>
|
||||
<div class="feature_description">
|
||||
No downloads required. uTalk works directly within your browser. Simply share your conference URL with others to get started.
|
||||
</div>
|
||||
</div>
|
||||
<div class="feature_holder">
|
||||
<div class="feature_icon">Low bandwidth</div>
|
||||
<div class="feature_description">
|
||||
Multi-party video conferences work with as little as 128Kbps. Screen-sharing and audio-only conferences are possible with far less.
|
||||
</div>
|
||||
</div>
|
||||
<div class="feature_holder">
|
||||
<div class="feature_icon">Open source</div>
|
||||
<div class="feature_description">
|
||||
uTalk is licensed under the <GPL/LGPL/WHATEVER>. You can download, use, modify, and share the software without any restrictions.
|
||||
</div>
|
||||
</div>
|
||||
<div class="feature_holder">
|
||||
<div class="feature_icon">Unlimited users</div>
|
||||
<div class="feature_description">
|
||||
There are no artificial restrictions on the number of users or conference participants. Server power and bandwidth are the only limiting factors.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="feature_row">
|
||||
<div class="feature_holder">
|
||||
<div class="feature_icon">Screen sharing</div>
|
||||
<div class="feature_description">
|
||||
It's easy to share your screen with others. uTalk is ideal for on-line presentations, lectures, and tech support sessions.
|
||||
</div>
|
||||
</div>
|
||||
<div class="feature_holder">
|
||||
<div class="feature_icon">Secure rooms</div>
|
||||
<div class="feature_description">
|
||||
Need some privacy? uTalk conference rooms can be secured with a password in order to exclude unwanted guests and prevent interruptions.
|
||||
</div>
|
||||
</div>
|
||||
<div class="feature_holder">
|
||||
<div class="feature_icon">Shared notes</div>
|
||||
<div class="feature_description">
|
||||
uTalk features Etherpad, a real-time collaborative text editor that's great for meeting minutes, writing articles, and more.
|
||||
</div>
|
||||
</div>
|
||||
<div class="feature_holder">
|
||||
<div class="feature_icon">Usage statistics</div>
|
||||
<div class="feature_description">
|
||||
Learn about your users through easy integration with Piwik, Google Analytics, and other usage monitoring and statistics systems.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="chatspace">
|
||||
<div id="nickname">
|
||||
Enter a nickname in the box below
|
||||
<form>
|
||||
<input type='text' id="nickinput" placeholder='Choose a nickname' autofocus>
|
||||
</form>
|
||||
<div id="videoconference_page">
|
||||
<div style="position: relative;" id="header_container">
|
||||
<div id="header">
|
||||
<span id="toolbar">
|
||||
<a class="button" data-toggle="popover" data-placement="bottom" data-content="Mute / Unmute" onclick='toggleAudio();'>
|
||||
<i id="mute" class="icon-microphone"></i>
|
||||
</a>
|
||||
<div class="header_button_separator"></div>
|
||||
<a class="button" data-toggle="popover" data-placement="bottom" data-content="Start / stop camera" onclick='buttonClick("#video", "icon-camera icon-camera-disabled");toggleVideo();'>
|
||||
<i id="video" class="icon-camera"></i>
|
||||
</a>
|
||||
<span id="recording" style="display: none">
|
||||
<div class="header_button_separator"></div>
|
||||
<a class="button" data-toggle="popover" data-placement="bottom" data-content="Record" onclick='toggleRecording();'>
|
||||
<i id="recordButton" class="icon-recEnable"></i>
|
||||
</a>
|
||||
</span>
|
||||
<div class="header_button_separator"></div>
|
||||
<a class="button" data-toggle="popover" data-placement="bottom" data-content="Lock / unlock room" onclick="Toolbar.openLockDialog();">
|
||||
<i id="lockIcon" class="icon-security"></i>
|
||||
</a>
|
||||
<div class="header_button_separator"></div>
|
||||
<a class="button" data-toggle="popover" data-placement="bottom" data-content="Invite others" onclick="Toolbar.openLinkDialog();">
|
||||
<i class="icon-link"></i>
|
||||
</a>
|
||||
<div class="header_button_separator"></div>
|
||||
<span class="toolbar_span">
|
||||
<a class="button" data-toggle="popover" data-placement="bottom" data-content="Open / close chat" onclick='Chat.toggleChat();'>
|
||||
<i id="chatButton" class="icon-chat"></i>
|
||||
</a>
|
||||
<span id="unreadMessages"></span>
|
||||
</span>
|
||||
<div class="header_button_separator"></div>
|
||||
<a class="button" data-toggle="popover" data-placement="bottom" data-content="Share Prezi" onclick='Prezi.openPreziDialog();'>
|
||||
<i class="icon-prezi"></i>
|
||||
</a>
|
||||
<span id="etherpadButton">
|
||||
<div class="header_button_separator"></div>
|
||||
<a class="button" data-toggle="popover" data-placement="bottom" data-content="Shared document" onclick='Etherpad.toggleEtherpad(0);'>
|
||||
<i class="icon-share-doc"></i>
|
||||
</a>
|
||||
</span>
|
||||
<div class="header_button_separator"></div>
|
||||
<span id="desktopsharing" style="display: none">
|
||||
<a class="button" data-toggle="popover" data-placement="bottom" data-content="Share screen" onclick="toggleScreenSharing();">
|
||||
<i class="icon-share-desktop"></i>
|
||||
</a>
|
||||
</span>
|
||||
<div class="header_button_separator"></div>
|
||||
<a class="button" data-toggle="popover" data-placement="bottom" data-content="Enter / Exit Full Screen" onclick='buttonClick("#fullScreen", "icon-full-screen icon-exit-full-screen");Toolbar.toggleFullScreen();'>
|
||||
<i id="fullScreen" class="icon-full-screen"></i>
|
||||
</a>
|
||||
<span id="sipCallButton">
|
||||
<div class="header_button_separator"></div>
|
||||
<a class="button" data-toggle="popover" data-placement="bottom" data-content="Call SIP number" onclick='callSipButtonClicked();'>
|
||||
<i class="icon-telephone"></i></a>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div id="subject"></div>
|
||||
</div>
|
||||
<div id="settings">
|
||||
<h1>Connection Settings</h1>
|
||||
<form id="loginInfo">
|
||||
<label>JID: <input id="jid" type="text" name="jid" placeholder="me@example.com"/></label>
|
||||
<label>Password: <input id="password" type="password" name="password" placeholder="secret"/></label>
|
||||
<label>BOSH URL: <input id="boshURL" type="text" name="boshURL" placeholder="/http-bind"/></label>
|
||||
<input id="connect" type="submit" value="Connect" />
|
||||
</form>
|
||||
</div>
|
||||
<div id="reloadPresentation"><a onclick='Prezi.reloadPresentation();'><i title="Reload Prezi" class="fa fa-repeat fa-lg"></i></a></div>
|
||||
<div id="videospace" onmousemove="Toolbar.showToolbar();">
|
||||
<div id="largeVideoContainer" class="videocontainer">
|
||||
<div id="presentation"></div>
|
||||
<div id="etherpad"></div>
|
||||
<a href="http://jitsi.org" target="_new"><div class="watermark" id="leftwatermark"></div></a>
|
||||
<!-- a href="http://jitsi.org" target="_new"><div class="watermark" id="rightwatermark"></div></a -->
|
||||
<video id="largeVideo" autoplay oncontextmenu="return false;"></video>
|
||||
</div>
|
||||
<div id="remoteVideos">
|
||||
<span id="localVideoContainer" class="videocontainer">
|
||||
<span id="localNick" class="nick"></span>
|
||||
<span id="localVideoWrapper">
|
||||
<!--<video id="localVideo" autoplay oncontextmenu="return false;" muted></video> - is now per stream generated -->
|
||||
</span>
|
||||
<audio id="localAudio" autoplay oncontextmenu="return false;" muted></audio>
|
||||
<span class="focusindicator"></span>
|
||||
</span>
|
||||
<audio id="userJoined" src="sounds/joined.wav" preload="auto"></audio>
|
||||
<audio id="userLeft" src="sounds/left.wav" preload="auto"></audio>
|
||||
</div>
|
||||
</div>
|
||||
<div id="chatspace">
|
||||
<div id="nickname">
|
||||
Enter a nickname in the box below
|
||||
<form>
|
||||
<input type='text' id="nickinput" placeholder='Choose a nickname' autofocus>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!--div><i class="fa fa-comments"> </i><span class='nick'></span>: <span class='chattext'></span></div-->
|
||||
<div id="chatconversation"></div>
|
||||
<audio id="chatNotification" src="sounds/incomingMessage.wav" preload="auto"></audio>
|
||||
<textarea id="usermsg" placeholder='Enter text...' autofocus></textarea>
|
||||
<!--div><i class="fa fa-comments"> </i><span class='nick'></span>: <span class='chattext'></span></div-->
|
||||
<div id="chatconversation"></div>
|
||||
<audio id="chatNotification" src="sounds/incomingMessage.wav" preload="auto"></audio>
|
||||
<textarea id="usermsg" placeholder='Enter text...' autofocus></textarea>
|
||||
</div>
|
||||
<a id="downloadlog" onclick='dump(event.target);' data-toggle="popover" data-placement="right" data-content="Download logs" ><i class="fa fa-cloud-download"></i></a>
|
||||
</div>
|
||||
<a id="downloadlog" onclick='dump(event.target);' data-toggle="popover" data-placement="right" data-content="Download logs" ><i class="fa fa-cloud-download"></i></a>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in New Issue