Noah Petherbridge
8f60bdba0e
* Add configuration system and default public channels support * Add support for multiple channels and DM threads with users, with unread badge indicators. DMs rearrange themselves by most recently updated on top. * Responsive CSS to work well on mobile devices.
272 lines
11 KiB
HTML
272 lines
11 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">
|
|
|
|
<!-- Left Column: Channels & DMs -->
|
|
<div class="left-column">
|
|
<div class="card grid-card">
|
|
<header class="card-header has-background-success-dark">
|
|
<div class="columns is-mobile card-header-title has-text-light">
|
|
<div class="column is-narrow mobile-only">
|
|
<button type="button"
|
|
class="button is-success"
|
|
@click="openChatPanel">
|
|
<i class="fa fa-arrow-left"></i>
|
|
</button>
|
|
</div>
|
|
<div class="column">Channels</div>
|
|
</div>
|
|
</header>
|
|
<div class="card-content">
|
|
<aside class="menu">
|
|
<p class="menu-label">
|
|
Chat Rooms
|
|
</p>
|
|
|
|
<ul class="menu-list">
|
|
<li v-for="c in activeChannels()"
|
|
v-bind:key="c.ID">
|
|
<a :href="'#'+c.ID"
|
|
@click.prevent="setChannel(c)"
|
|
:class="{'is-active': c.ID == channel}">
|
|
[[c.Name]]
|
|
<span v-if="hasUnread(c.ID)"
|
|
class="tag is-danger">
|
|
[[hasUnread(c.ID)]]
|
|
</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<p class="menu-label">
|
|
Private Messages
|
|
</p>
|
|
|
|
<ul class="menu-list">
|
|
<li v-for="c in activeDMs()"
|
|
v-bind:key="c.channel">
|
|
<a :href="'#'+c.channel"
|
|
@click.prevent="setChannel(c.channel)"
|
|
:class="{'is-active': c.channel == channel}">
|
|
[[c.name]]
|
|
|
|
<span v-if="hasUnread(c.channel)"
|
|
class="tag is-danger">
|
|
[[hasUnread(c.channel)]]
|
|
</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</aside>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="chat-column">
|
|
<div class="card grid-card">
|
|
<header class="card-header has-background-link">
|
|
<div class="columns is-mobile card-header-title has-text-light">
|
|
<div class="column is-narrow mobile-only">
|
|
<!-- Responsive mobile button to pan to Left Column -->
|
|
<button type="button"
|
|
class="button is-success"
|
|
@click="openChannelsPanel">
|
|
<i class="fa fa-message"></i>
|
|
</button>
|
|
</div>
|
|
<div class="column">[[channelName]]</div>
|
|
<div class="column is-narrow">
|
|
<!-- DMs: Leave convo button -->
|
|
<button type="button"
|
|
v-if="channel.indexOf('@') === 0"
|
|
class="float-right button is-small is-warning is-outline"
|
|
@click="leaveDM()">
|
|
<i class="fa fa-trash"></i>
|
|
</button>
|
|
</div>
|
|
<div class="column is-narrow mobile-only">
|
|
<!-- Responsive mobile button to pan to Right Column -->
|
|
<button type="button"
|
|
class="button is-success"
|
|
@click="openWhoPanel">
|
|
<i class="fa fa-user-group"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<div class="video-feeds" v-show="webcam.active || Object.keys(WebRTC.streams).length > 0">
|
|
<video class="feed"
|
|
v-show="webcam.active"
|
|
id="localVideo"
|
|
autoplay muted>
|
|
x
|
|
</video>
|
|
<video class="feed"
|
|
v-for="(stream, username) in WebRTC.streams"
|
|
v-bind:key="username"
|
|
:id="'videofeed-'+username"
|
|
autoplay muted>
|
|
</video>
|
|
</div>
|
|
<div class="card-content" id="chatHistory">
|
|
|
|
<div v-for="(msg, i) in chatHistory" 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>
|
|
|
|
<!-- Right Column: Who Is Online -->
|
|
<div class="right-column">
|
|
<div class="card grid-card">
|
|
<header class="card-header has-background-success-dark">
|
|
<div class="columns is-mobile card-header-title has-text-light">
|
|
<div class="column">Who Is Online</div>
|
|
<div class="column is-narrow mobile-only">
|
|
<button type="button"
|
|
class="button is-success"
|
|
@click="openChatPanel">
|
|
<i class="fa fa-arrow-left"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</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 px-2 py-1"
|
|
@click="openDMs(u)"
|
|
:disabled="u.username === username">
|
|
<i class="fa fa-message"></i>
|
|
</button>
|
|
|
|
<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 type="text/javascript">
|
|
const PublicChannels = {{.Config.GetChannels}};
|
|
</script>
|
|
|
|
<script src="/static/js/vue-3.2.45.js"></script>
|
|
<script src="/static/js/BareRTC.js?{{.CacheHash}}"></script>
|
|
|
|
</body>
|
|
</html>
|
|
{{end}} |