1
Fork 0
mirror of https://github.com/jech/galene.git synced 2024-12-22 23:35:46 +01:00
galene/static/galene.html
Juliusz Chroboczek ac1dc77b30 Reconnect when server complains about a username.
If a token does not specify a username, the server will request
one by failing the join message.  Disconnect from the WebSocket
in that case, and display the login dialog with the password
field invisible.
2023-04-04 01:22:05 +02:00

289 lines
12 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<title>Galène</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="ScreenOrientation" content="autoRotate:disabled">
<link rel="stylesheet" type="text/css" href="/common.css"/>
<link rel="stylesheet" type="text/css" href="/galene.css"/>
<link rel="author" href="https://www.irif.fr/~jch/"/>
<link rel="stylesheet" type="text/css" href="/external/fontawesome/css/fontawesome.min.css"/>
<link rel="stylesheet" type="text/css" href="/external/fontawesome/css/solid.min.css"/>
<link rel="stylesheet" type="text/css" href="/external/fontawesome/css/regular.min.css"/>
<link rel="stylesheet" type="text/css" href="/external/toastify/toastify.css"/>
<link rel="stylesheet" type="text/css" href="/external/contextual/contextual.css"/>
</head>
<body>
<div id="main" class="app">
<div class="row full-height">
<nav id="left-sidebar">
<div class="users-header">
<div class="galene-header">Galène</div>
</div>
<div class="header-sep"></div>
<div id="users"></div>
</nav>
<div class="container">
<header>
<nav class="topnav navbar navbar-expand navbar-light fixed-top">
<div id="header">
<div class="collapse" title="Collapse left panel" id="sidebarCollapse">
<i class="fas fa-align-left" aria-hidden="true"></i>
</div>
<h1 id="title" class="header-title">Galène</h1>
</div>
<ul class="nav-menu">
<li>
<button id="presentbutton" class="invisible btn btn-success">
<i class="fas fa-play" aria-hidden="true"></i><span class="nav-text"> Enable</span>
</button>
</li>
<li>
<button id="unpresentbutton" class="invisible btn btn-cancel">
<i class="fas fa-stop" aria-hidden="true"></i><span class="nav-text"> Disable</span>
</button>
</li>
<li>
<div id="mutebutton" class="nav-link nav-button">
<span><i class="fas fa-microphone-slash" aria-hidden="true"></i></span>
<label>Mute</label>
</div>
</li>
<li>
<div id="sharebutton" class="invisible nav-link nav-button">
<span><i class="fas fa-share-square" aria-hidden="true"></i></span>
<label>Share Screen</label>
</div>
</li>
<li>
<div class="nav-button nav-link nav-more" id="openside">
<span><i class="fas fa-ellipsis-v" aria-hidden="true"></i></span>
</div>
</li>
</ul>
</nav>
</header>
<div class="row full-width" id="mainrow">
<div class="coln-left" id="left">
<div id="chat">
<div id="chatbox">
<div class="close-chat" id="close-chat" title="Hide chat">
<span class="close-icon"></span>
</div>
<div id="box"></div>
<div class="reply">
<form id="inputform">
<textarea id="input" class="form-reply"></textarea>
<input id="inputbutton" type="submit" value="&#10148;" class="btn btn-default"/>
</form>
</div>
</div>
</div>
</div>
<div id="resizer"></div>
<div class="coln-right" id="right">
<span class="show-video blink invisible" id="show-video">
<i class="fas fa-exchange-alt" aria-hidden="true"></i>
</span>
<div class="chat-btn show-chat invisible" id="show-chat">
<i class="far fa-comment-alt icon-chat" title="Show chat"></i>
</div>
<div class="chat-btn collapse-video invisible" id="collapse-video">
<i class="far fa-comment-alt icon-chat" title="Hide video and show chat"></i>
</div>
<div class="video-container invisible" id="video-container">
<div id="expand-video" class="expand-video">
<div id="peers"></div>
</div>
</div>
<div class="login-container invisible" id="login-container">
<div class="login-box">
<form id="userform" class="userform">
<label for="username">Username</label>
<input id="username" type="text" name="username"
autocomplete="username" class="form-control"/>
<div id="passwordform">
<label for="password">Password</label>
<input id="password" type="password" name="password"
autocomplete="current-password" class="form-control"/>
</div>
<label>Enable at start:</label>
<div class="present-switch">
<p class="switch-radio">
<input id="presentoff" type="radio" name="presentradio" value="" checked/>
<label for="presentoff">Nothing</label>
</p>
<p class="switch-radio">
<input id="presentmike" type="radio" name="presentradio" value="mike"/>
<label for="presentmike">Microphone</label>
</p>
<p class="switch-radio">
<input id="presentboth" type="radio" name="presentradio" value="both"/>
<label for="presentboth">Camera and microphone</label>
</p>
</div>
<div class="clear"></div>
<div class="connect">
<input id="connectbutton" type="submit" class="btn btn-blue" value="Connect"/>
</div>
</form>
<div class="clear"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="sidebarnav" class="sidenav">
<div class="sidenav-header">
<h2>Settings</h2>
<a class="closebtn" id="clodeside"><i class="fas fa-times" aria-hidden="true"></i></a>
</div>
<div class="sidenav-content" id="optionsdiv">
<div id="profile" class="profile invisible">
<div class="profile-user">
<div class="profile-logo">
<span><i class="fas fa-user" aria-hidden="true"></i></span>
</div>
<div class="profile-info">
<span id="userspan"></span>
<span id="permspan"></span>
</div>
<div class="user-logout">
<a id="disconnectbutton">
<span class="logout-icon"><i class="fas fa-sign-out-alt"></i></span>
<span class="logout-text">Logout</span>
</a>
</div>
</div>
</div>
<div id="mediaoptions" class="invisible">
<fieldset>
<legend>Media Options</legend>
<label for="videoselect" class="sidenav-label-first">Camera:</label>
<select id="videoselect" class="select select-inline">
<option value="">off</option>
</select>
<label for="audioselect" class="sidenav-label">Microphone:</label>
<select id="audioselect" class="select select-inline">
<option value="">off</option>
</select>
<form>
<input id="mirrorbox" type="checkbox" checked/>
<label for="mirrorbox">Mirror view</label>
</form>
<form>
<input id="blackboardbox" type="checkbox"/>
<label for="blackboardbox">Blackboard mode</label>
</form>
<form>
<input id="preprocessingbox" type="checkbox"/ checked>
<label for="preprocessingbox">Noise suppression</label>
</form>
<form>
<input id="hqaudiobox" type="checkbox"/>
<label for="hqaudiobox">High-quality audio</label>
</form>
</fieldset>
</div>
<fieldset>
<legend>Other Settings</legend>
<form id="filterform">
<label for="filterselect" class="sidenav-label-first">Filter:</label>
<select id="filterselect" class="select select-inline">
<option value="" selected>none</option>
</select>
</form>
<form id="sendform">
<label for="sendselect" class="sidenav-label-first">Send:</label>
<select id="sendselect" class="select select-inline">
<option value="lowest">lowest</option>
<option value="low">low</option>
<option value="normal" selected>normal</option>
<option value="unlimited">unlimited</option>
</select>
</form>
<form id="simulcastform">
<label for="simulcastselect" class="sidenav-label-first">Simulcast:</label>
<select id="simulcastselect" class="select select-inline">
<option value="off">off</option>
<option value="auto" selected>auto</option>
<option value="on">on</option>
</select>
</form>
<form id="requestform">
<label for="requestselect" class="sidenav-label">Receive:</label>
<select id="requestselect" class="select select-inline">
<option value="">nothing</option>
<option value="audio">audio only</option>
<option value="screenshare">screenshare only</option>
<option value="everything-low">low quality</option>
<option value="everything" selected>everything</option>
</select>
</form>
<form>
<input id="activitybox" type="checkbox"/>
<label for="activitybox">Activity detection</label>
</form>
<form>
<input id="displayallbox" type="checkbox"/>
<label for="displayallbox">Display audio-only users</label>
</form>
</fieldset>
</div>
</div>
<div id="videocontrols-template" class="invisible">
<div class="video-controls vc-overlay">
<div class="controls-button controls-left">
<span class="video-play" title="Play video">
<i class="fas fa-play"></i>
</span>
<span class="volume" title="Volume">
<i class="fas fa-volume-up volume-mute" aria-hidden="true"></i>
<input class="volume-slider" type="range" max="100" value="100" min="0" step="5" >
</span>
</div>
<div class="controls-button controls-right">
<span class="pip" title="Picture In Picture">
<i class="far fa-clone" aria-hidden="true"></i>
</span>
<span class="fullscreen" title="Fullscreen">
<i class="fas fa-expand" aria-hidden="true"></i>
</span>
</div>
</div>
</div>
<div id="topvideocontrols-template" class="invisible">
<div class="top-video-controls">
<div class="controls-button controls-right">
<span class="close-icon video-stop" title="Stop video">
</span>
</div>
</div>
</div>
<script src="/protocol.js" defer></script>
<script src="/external/toastify/toastify.js" defer></script>
<script src="/external/contextual/contextual.js" defer></script>
<script src="/galene.js" defer></script>
</body>
</html>