Noah Petherbridge
5dbe938780
* WebRTC pees exchange local/remote descriptions ("offer" and "answer")
* They don't seem to exchange ICE candidates yet
* Some back and forth happens but the final WebRTC stream connection
isn't established yet.
246 lines
9.1 KiB
HTML
246 lines
9.1 KiB
HTML
{{define "index"}}
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="stylesheet" type="text/css" href="/static/css/bulma.min.css">
|
|
<link rel="stylesheet" href="/static/fontawesome-free-6.1.2-web/css/all.css">
|
|
<link rel="stylesheet" type="text/css" href="/static/css/chat.css?{{CacheHash}}">
|
|
<title>BareRTC</title>
|
|
</head>
|
|
<body>
|
|
<div id="BareRTC-App">
|
|
<!-- Sign In modal -->
|
|
<div class="modal" :class="{'is-active': loginModal.visible}">
|
|
<div class="modal-background"></div>
|
|
<div class="modal-content">
|
|
<div class="card">
|
|
<header class="card-header has-background-info">
|
|
<p class="card-header-title has-text-light">Sign In</p>
|
|
</header>
|
|
<div class="card-content">
|
|
<form @submit.prevent="signIn()">
|
|
|
|
<div class="field">
|
|
<label class="label">Username</label>
|
|
<input class="input"
|
|
v-model="username"
|
|
placeholder="Username"
|
|
autocomplete="off"
|
|
autofocus
|
|
required>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<div class="control">
|
|
<button class="button is-link">Submit</button>
|
|
</div>
|
|
</div>
|
|
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="chat-container">
|
|
<div class="left-column">
|
|
<div class="card grid-card">
|
|
<header class="card-header has-background-success-dark">
|
|
<p class="card-header-title has-text-light">
|
|
Channels
|
|
</p>
|
|
</header>
|
|
<div class="card-content">
|
|
<aside class="menu">
|
|
<p class="menu-label">
|
|
Chat Rooms
|
|
</p>
|
|
|
|
<ul class="menu-list">
|
|
<li><a href="#" class="is-active">Chat Room</a></li>
|
|
</ul>
|
|
|
|
<p class="menu-label">
|
|
Private Messages
|
|
</p>
|
|
|
|
<ul class="menu-list">
|
|
<li><a href="#">Chat Room</a></li>
|
|
<li><a href="#">DMs</a></li>
|
|
<li><a href="#">DMs</a></li>
|
|
<li><a href="#">DMs</a></li>
|
|
<li><a href="#">DMs</a></li>
|
|
<li><a href="#">DMs</a></li>
|
|
<li><a href="#">DMs</a></li>
|
|
<li><a href="#">DMs</a></li>
|
|
<li><a href="#">DMs</a></li>
|
|
<li><a href="#">DMs</a></li>
|
|
<li><a href="#">DMs</a></li>
|
|
<li><a href="#">DMs</a></li>
|
|
<li><a href="#">DMs</a></li>
|
|
<li><a href="#">DMs</a></li>
|
|
<li><a href="#">DMs</a></li>
|
|
<li><a href="#">DMs</a></li>
|
|
<li><a href="#">DMs</a></li>
|
|
<li><a href="#">DMs</a></li>
|
|
<li><a href="#">DMs</a></li>
|
|
<li><a href="#">DMs</a></li>
|
|
</ul>
|
|
</aside>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="chat-column">
|
|
<div class="card grid-card">
|
|
<header class="card-header has-background-link">
|
|
<p class="card-header-title has-text-light">
|
|
Chat Room
|
|
</p>
|
|
</header>
|
|
<div class="video-feeds">
|
|
<video class="feed"
|
|
v-show="webcam.active"
|
|
id="localVideo"
|
|
autoplay muted>
|
|
x
|
|
</video>
|
|
<div class="feed">
|
|
y
|
|
</div>
|
|
<div class="feed">
|
|
y
|
|
</div>
|
|
<div class="feed">
|
|
y
|
|
</div>
|
|
<div class="feed">
|
|
y
|
|
</div>
|
|
<div class="feed">
|
|
y
|
|
</div>
|
|
<div class="feed">
|
|
y
|
|
</div>
|
|
<div class="feed">
|
|
y
|
|
</div>
|
|
<div class="feed">
|
|
y
|
|
</div>
|
|
<div class="feed">
|
|
y
|
|
</div>
|
|
<div class="feed">
|
|
y
|
|
</div>
|
|
<div class="feed">
|
|
y
|
|
</div>
|
|
<div class="feed">
|
|
y
|
|
</div>
|
|
<div class="feed">
|
|
y
|
|
</div>
|
|
</div>
|
|
<div class="card-content" id="chatHistory">
|
|
|
|
<div v-for="(msg, i) in history" v-bind:key="i">
|
|
<div>
|
|
<label class="label"
|
|
:class="{'has-text-success is-dark': msg.isChatServer,
|
|
'has-text-warning is-dark': msg.isAdmin,
|
|
'has-text-danger': msg.isChatClient}">
|
|
[[msg.username]]
|
|
</label>
|
|
</div>
|
|
|
|
<div v-if="msg.action === 'presence'">
|
|
<em>[[msg.message]]</em>
|
|
</div>
|
|
<div v-else>
|
|
[[msg.message]]
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="chat-footer">
|
|
<div class="card">
|
|
<div class="card-content p-2">
|
|
|
|
<div class="columns">
|
|
<div class="column">
|
|
<form @submit.prevent="sendMessage()">
|
|
<input type="text" class="input"
|
|
v-model="message"
|
|
placeholder="Message">
|
|
</form>
|
|
</div>
|
|
<div class="column is-narrow">
|
|
<button type="button"
|
|
v-if="webcam.active"
|
|
class="button is-danger"
|
|
@click="stopVideo()">
|
|
<i class="fa fa-camera mr-2"></i>
|
|
Stop
|
|
</button>
|
|
|
|
<button type="button"
|
|
v-else
|
|
class="button is-success"
|
|
@click="startVideo()"
|
|
:disabled="webcam.busy">
|
|
<i class="fa fa-camera mr-2"></i>
|
|
Start
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="right-column">
|
|
<div class="card grid-card">
|
|
<header class="card-header has-background-success-dark">
|
|
<p class="card-header-title has-text-light">
|
|
Who Is Online
|
|
</p>
|
|
</header>
|
|
<div class="card-content p-2">
|
|
|
|
<ul class="menu-list">
|
|
<li v-for="(u, i) in whoList" v-bind:key="i">
|
|
<div class="columns is-mobile">
|
|
<div class="column">[[ u.username ]]</div>
|
|
<div class="column is-narrow">
|
|
<button type="button" class="button is-small"
|
|
:disabled="!u.videoActive"
|
|
@click="openVideo(u)">
|
|
<i class="fa fa-video"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div><!-- /app -->
|
|
<script src="/static/js/vue-3.2.45.js"></script>
|
|
<script src="/static/js/BareRTC.js?{{CacheHash}}"></script>
|
|
|
|
</body>
|
|
</html>
|
|
{{end}} |