apps/BareRTC
1
0
Fork 0
Code Issues 14 Pull Requests Packages Projects Releases Wiki Activity
4f93c27651
BareRTC/web/templates/chat.html

245 lines
9.0 KiB
HTML
Raw Normal View History

Initial commit
2023-01-11 06:38:48 +00:00
{{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">
Progress on Chat Server * 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.
2023-01-27 04:34:58 +00:00
<link rel="stylesheet" type="text/css" href="/static/css/chat.css?{{CacheHash}}">
Initial commit
2023-01-11 06:38:48 +00:00
<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>
Progress on Chat Server * 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.
2023-01-27 04:34:58 +00:00
<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
Initial commit
2023-01-11 06:38:48 +00:00
</p>
Progress on Chat Server * 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.
2023-01-27 04:34:58 +00:00
<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>
Initial commit
2023-01-11 06:38:48 +00:00
</div>
</div>
Progress on Chat Server * 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.
2023-01-27 04:34:58 +00:00
</div>
Initial commit
2023-01-11 06:38:48 +00:00
Progress on Chat Server * 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.
2023-01-27 04:34:58 +00:00
<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>
Initial commit
2023-01-11 06:38:48 +00:00
Progress on Chat Server * 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.
2023-01-27 04:34:58 +00:00
<div v-if="msg.action === 'presence'">
<em>[[msg.message]]</em>
</div>
<div v-else>
Initial commit
2023-01-11 06:38:48 +00:00
[[msg.message]]
</div>
</div>
Progress on Chat Server * 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.
2023-01-27 04:34:58 +00:00
Initial commit
2023-01-11 06:38:48 +00:00
</div>
Progress on Chat Server * 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.
2023-01-27 04:34:58 +00:00
</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>
Initial commit
2023-01-11 06:38:48 +00:00
Progress on Chat Server * 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.
2023-01-27 04:34:58 +00:00
</div>
</div>
</div>
Initial commit
2023-01-11 06:38:48 +00:00
Progress on Chat Server * 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.
2023-01-27 04:34:58 +00:00
<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>
Initial commit
2023-01-11 06:38:48 +00:00
</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}}
Reference in New Issue Copy Permalink