Noah Petherbridge
4f93c27651
* Reworked full screen CSS layout for the chat.html, still using Bulma components with some custom CSS Grid. * Duplicate username handling: server can push a new username to change the client's selection. * Who List sync between clients. * Local video casting works so far - plays back your camera in the local feed. Your video broadcasting boolean is synced to backend, which lights up the video button in the Who List.
245 lines
9.0 KiB
HTML
245 lines
9.0 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">
|
|
<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}} |