Noah Petherbridge
d8de60c990
* Added a top panel to put your video controls in. * Broadcaster can mute or unmute their own audio input. * When viewing others' cams, buttons appear to control their video: * Their username is displayed in the corner. * Mute/unmute button to silence their audio. * "X" button to close their camera. * Button to show what viewers are currently watching your camera. * Add an "About" page and config for app branding. * Add dark theme CSS for prefers-dark browsers.
427 lines
19 KiB
HTML
427 lines
19 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" type="text/css" href="/static/css/bulma-prefers-dark.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">
|
|
|
|
<!-- Top header panel -->
|
|
<header class="chat-header">
|
|
<div class="columns is-mobile">
|
|
<div class="column is-narrow">
|
|
<strong class="is-6">{{AsHTML .Config.Title}}</strong>
|
|
</div>
|
|
<div class="column">
|
|
<!-- Stop/Start video buttons -->
|
|
<button type="button"
|
|
v-if="webcam.active"
|
|
class="button is-small is-danger"
|
|
@click="stopVideo()">
|
|
<i class="fa fa-camera mr-2"></i>
|
|
Stop
|
|
</button>
|
|
<button type="button"
|
|
v-else
|
|
class="button is-small is-success"
|
|
@click="startVideo()"
|
|
:disabled="webcam.busy">
|
|
<i class="fa fa-camera mr-2"></i>
|
|
Start
|
|
</button>
|
|
|
|
<!-- Mute/Unmute my mic buttons (if streaming)-->
|
|
<button type="button"
|
|
v-if="webcam.active && !webcam.muted"
|
|
class="button is-small is-danger is-outlined ml-2"
|
|
@click="muteMe()">
|
|
<i class="fa fa-microphone mr-2"></i>
|
|
Mute
|
|
</button>
|
|
<button type="button"
|
|
v-if="webcam.active && webcam.muted"
|
|
class="button is-small is-danger ml-2"
|
|
@click="muteMe()">
|
|
<i class="fa fa-microphone mr-2"></i>
|
|
Unmute
|
|
</button>
|
|
|
|
<!-- Watchers button -->
|
|
<button type="button"
|
|
v-if="webcam.active"
|
|
class="button is-small is-info is-outlined ml-2"
|
|
@click="showViewers()">
|
|
<i class="fa fa-eye mr-2"></i>
|
|
[[Object.keys(webcam.watching).length]]
|
|
</button>
|
|
</div>
|
|
<div class="column is-narrow">
|
|
<a href="/about" target="_blank" class="button is-small is-link">About</a>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- 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>
|
|
|
|
<!-- Middle Column: Chat Room/History -->
|
|
<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 pr-0">
|
|
<!-- Responsive mobile button to pan to Left Column -->
|
|
<button type="button"
|
|
class="button is-success"
|
|
:class="{'is-small': isDM}"
|
|
@click="openChannelsPanel">
|
|
<i v-if="isDM" class="fa fa-arrow-left"></i>
|
|
<i v-else class="fa fa-message"></i>
|
|
</button>
|
|
</div>
|
|
<div class="column">
|
|
[[channelName]]
|
|
</div>
|
|
<div class="column is-narrow">
|
|
<!-- If a DM thread and the user has a profile URL -->
|
|
<button type="button"
|
|
v-if="this.channel.indexOf('@') === 0 && profileURLForUsername(this.channel)"
|
|
class="button is-small is-outlined is-light mr-1"
|
|
@click="openProfile({username: this.channel})">
|
|
<i class="fa fa-user"></i>
|
|
</button>
|
|
|
|
<!-- DMs: Leave convo button -->
|
|
<button type="button"
|
|
v-if="channel.indexOf('@') === 0"
|
|
class="float-right button is-small is-warning is-outlined"
|
|
@click="leaveDM()">
|
|
<i class="fa fa-trash"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Who List button, only shown on public channel view -->
|
|
<div v-if="!isDM" 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 Feeds-->
|
|
|
|
<!-- My video -->
|
|
<video class="feed"
|
|
v-show="webcam.active"
|
|
id="localVideo"
|
|
autoplay muted>
|
|
</video>
|
|
|
|
<!-- Others' videos -->
|
|
<div class="feed" v-for="(stream, username) in WebRTC.streams" v-bind:key="username">
|
|
<video class="feed"
|
|
:id="'videofeed-'+username"
|
|
autoplay>
|
|
</video>
|
|
<div class="caption">
|
|
[[username]]
|
|
</div>
|
|
<div class="close">
|
|
<a href="#"
|
|
class="has-text-danger"
|
|
title="Close video"
|
|
@click="closeVideo(username)">
|
|
<i class="fa fa-close"></i>
|
|
</a>
|
|
</div>
|
|
<div class="controls">
|
|
<button type="button"
|
|
v-if="isMuted(username)"
|
|
class="button is-small is-danger is-outlined p-1"
|
|
title="Unmute this video"
|
|
@click="muteVideo(username)">
|
|
<i class="fa fa-volume-xmark"></i>
|
|
</button>
|
|
<button type="button"
|
|
v-else
|
|
class="button is-small is-danger is-outlined p-1"
|
|
title="Mute this video"
|
|
@click="muteVideo(username)">
|
|
<i class="fa fa-volume-high"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-content" id="chatHistory">
|
|
|
|
<!-- No history? -->
|
|
<div v-if="chatHistory.length === 0">
|
|
<em v-if="isDM">
|
|
Starting a direct message chat with [[channel]]. Type a message and say hello!
|
|
</em>
|
|
<em v-else>
|
|
There are no messages in this channel yet.
|
|
</em>
|
|
</div>
|
|
|
|
<div v-for="(msg, i) in chatHistory" v-bind:key="i" class="mb-2">
|
|
<div class="media mb-0">
|
|
<div class="media-left">
|
|
<a :href="profileURLForUsername(msg.username)" @click.prevent="openProfile({username: msg.username})"
|
|
:class="{'cursor-default': !profileURLForUsername(msg.username)}">
|
|
<figure class="image is-24x24">
|
|
<img v-if="msg.isChatServer"
|
|
src="/static/img/server.png">
|
|
<img v-else-if="msg.isChatClient"
|
|
src="/static/img/client.png">
|
|
<img v-else-if="avatarForUsername(msg.username)"
|
|
:src="avatarForUsername(msg.username)">
|
|
<img v-else src="/static/img/shy.png">
|
|
</figure>
|
|
</a>
|
|
</div>
|
|
<div class="media-content">
|
|
<div class="columns is-mobile">
|
|
<div class="column">
|
|
<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 class="column is-narrow"
|
|
v-if="!(msg.isChatServer || msg.isChatClient || msg.username === username)">
|
|
<button type="button"
|
|
class="button is-dark is-outlined is-small"
|
|
@click="openDMs({username: msg.username})">
|
|
<i class="fa fa-message"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="msg.action === 'presence'">
|
|
<em>[[msg.message]]</em>
|
|
</div>
|
|
<div v-else class="content">
|
|
<div v-html="msg.message"></div>
|
|
</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">
|
|
|
|
</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">
|
|
<!-- Avatar URL if available -->
|
|
<div class="column is-narrow pr-0"
|
|
v-if="u.avatar">
|
|
<img :src="avatarURL(u)"
|
|
width="24" height="24"
|
|
:alt="'Avatar image for ' + u.username">
|
|
</div>
|
|
<div class="column pr-0"
|
|
:class="{'pl-1': u.avatar}">
|
|
<i class="fa fa-gavel has-text-warning-dark"
|
|
v-if="u.op"
|
|
title="Operator"></i>
|
|
[[ u.username ]]
|
|
</div>
|
|
<div class="column is-narrow pl-0">
|
|
<!-- Profile button -->
|
|
<button type="button"
|
|
v-if="u.profileURL"
|
|
class="button is-small px-2 py-1"
|
|
@click="openProfile(u)"
|
|
title="Open profile page">
|
|
<i class="fa fa-user"></i>
|
|
</button>
|
|
|
|
<!-- DM button -->
|
|
<button type="button"
|
|
class="button is-small px-2 py-1"
|
|
@click="openDMs(u)"
|
|
title="Start direct message thread"
|
|
:disabled="u.username === username">
|
|
<i class="fa fa-message"></i>
|
|
</button>
|
|
|
|
<!-- Video button -->
|
|
<button type="button" class="button is-small px-2 py-1"
|
|
:disabled="!u.videoActive"
|
|
title="Open video stream"
|
|
@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}};
|
|
const WebsiteURL = "{{.Config.WebsiteURL}}";
|
|
const UserJWTToken = {{.JWTTokenString}};
|
|
const UserJWTValid = {{if .JWTAuthOK}}true{{else}}false{{end}};
|
|
const UserJWTClaims = {{.JWTClaims.ToJSON}};
|
|
</script>
|
|
|
|
<script src="/static/js/vue-3.2.45.js"></script>
|
|
<script src="/static/js/BareRTC.js?{{.CacheHash}}"></script>
|
|
|
|
</body>
|
|
</html>
|
|
{{end}} |