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

668 lines
31 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">
Volume Controls, Mute/Unmute Video * 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.
2023-02-06 04:26:00 +00:00
<link rel="stylesheet" type="text/css" href="/static/css/bulma-prefers-dark.css">
Initial commit
2023-01-11 06:38:48 +00:00
<link rel="stylesheet" href="/static/fontawesome-free-6.1.2-web/css/all.css">
Spit and polish * 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.
2023-02-05 08:53:50 +00:00
<link rel="stylesheet" type="text/css" href="/static/css/chat.css?{{.CacheHash}}">
Timestamps, Sound Effects & Love
2023-02-06 21:27:29 +00:00
<title>{{.Config.Title}}</title>
Initial commit
2023-01-11 06:38:48 +00:00
</head>
<body>
<div id="BareRTC-App">
Timestamps, Sound Effects & Love
2023-02-06 21:27:29 +00:00
Initial commit
2023-01-11 06:38:48 +00:00
<!-- 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>
Timestamps, Sound Effects & Love
2023-02-06 21:27:29 +00:00
<!-- Settings modal -->
<div class="modal" :class="{'is-active': settingsModal.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">Chat Settings</p>
</header>
<div class="card-content">
Spit and polish * Track the window focus/blur events. Leaving the tab while in a channel now means you may still hear sound effects in that channel. * Add a CORS JSON API /v1/statistics to get details from the server about who is online. The CORSHosts whitelist in the settings.toml limits domain access to the endpoint.
2023-02-10 07:03:06 +00:00
<div class="field is-horizontal">
<div class="field-label is-normal">
<label class="label">Video size</label>
</div>
<div class="field-body">
<div class="field">
<div class="control">
<div class="select is-fullwidth">
<select v-model="webcam.videoScale">
<option v-for="s in webcam.videoScaleOptions"
v-bind:key="s[0]"
:value="s[0]">
[[ s[1] ]]
</option>
</select>
</div>
</div>
</div>
</div>
</div>
Timestamps, Sound Effects & Love
2023-02-06 21:27:29 +00:00
<h3 class="subtitle">Sounds</h3>
<div class="field is-horizontal">
<div class="field-label is-normal">
<label class="label">DM chat</label>
</div>
<div class="field-body">
<div class="field">
<div class="control">
<div class="select is-fullwidth">
<select v-model="config.sounds.settings.DM" @change="setSoundPref('DM')">
<option v-for="s in config.sounds.available"
v-bind:key="s.name"
:value="s.name">
[[s.name]]
</option>
</select>
</div>
</div>
</div>
</div>
</div>
<div class="field is-horizontal">
<div class="field-label is-normal">
<label class="label">Public chat</label>
</div>
<div class="field-body">
<div class="field">
<div class="control">
<div class="select is-fullwidth">
<select v-model="config.sounds.settings.Chat" @change="setSoundPref('Chat')">
<option v-for="s in config.sounds.available"
v-bind:key="s.name"
:value="s.name">
[[s.name]]
</option>
</select>
</div>
</div>
</div>
</div>
</div>
<div class="field is-horizontal">
<div class="field-label is-normal">
<label class="label">Room enter</label>
</div>
<div class="field-body">
<div class="field">
<div class="control">
<div class="select is-fullwidth">
<select v-model="config.sounds.settings.Enter" @change="setSoundPref('Enter')">
<option v-for="s in config.sounds.available"
v-bind:key="s.name"
:value="s.name">
[[s.name]]
</option>
</select>
</div>
</div>
</div>
</div>
</div>
<div class="field is-horizontal">
<div class="field-label is-normal">
<label class="label">Room leave</label>
</div>
<div class="field-body">
<div class="field">
<div class="control">
<div class="select is-fullwidth">
<select v-model="config.sounds.settings.Leave" @change="setSoundPref('Leave')">
<option v-for="s in config.sounds.available"
v-bind:key="s.name"
:value="s.name">
[[s.name]]
</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="card-footer">
<div class="card-footer-item">
<button type="button" class="button is-primary"
@click="hideSettings()">
Close
</button>
</div>
</footer>
</div>
</div>
</div>
NSFW Cameras and Moderator Commands
2023-02-11 06:46:39 +00:00
<!-- NSFW Modal: before user activates their webcam -->
<div class="modal" :class="{'is-active': nsfwModalCast.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">Broadcast my webcam</p>
</header>
<div class="card-content">
<p class="block">
You can turn on your webcam and enable others in the room to connect to yours.
The controls to stop, <i class="fa fa-microphone-slash"></i> mute audio, and
<i class="fa fa-eye"></i> see who is watching will be at the top of the page.
</p>
<p class="block">
If your camera will be featuring "<abbr title="Not Safe For Work">NSFW</abbr>" or sexual content, please mark it as such by
clicking on the <i class="fa fa-fire has-text-danger"></i> button or checking the box below to start with it enabled.
</p>
<div class="field">
<label class="checkbox">
<input type="checkbox"
v-model="webcam.nsfw">
Check this box if your webcam will <em>definitely</em> be NSFW. 😈
</label>
</div>
<div class="field">
<div class="control has-text-centered">
<button type="button"
class="button is-link mr-4"
@click="startVideo(true); nsfwModalCast.visible=false">Start webcam</button>
<button type="button"
class="button"
@click="nsfwModalCast.visible=false">Cancel</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- NSFW Modal: before user views a NSFW camera the first time -->
<div class="modal" :class="{'is-active': nsfwModalView.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">This camera may contain NSFW content</p>
</header>
<div class="card-content">
<p class="block">
This camera has been marked as "<abbr title="Not Safe For Work">NSFW</abbr>" and may
contain displays of sexuality. If you do not want to see this, look for cameras with
a <span class="button is-small is-info is-outlined px-1"><i class="fa fa-video"></i></span>
blue icon rather than the <span class="button is-small is-danger is-outlined px-1"><i class="fa fa-video"></i></span>
red ones.
</p>
<div class="field">
<label class="checkbox">
<input type="checkbox"
v-model="nsfwModalView.dontShowAgain">
Don't show this message again
</label>
</div>
<div class="field">
<div class="control has-text-centered">
<button type="button"
class="button is-link mr-4"
@click="openVideo(nsfwModalView.user, true); nsfwModalView.visible=false">Open webcam</button>
<button type="button"
class="button"
@click="nsfwModalView.visible=false">Cancel</button>
</div>
</div>
</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">
Spit and polish * 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.
2023-02-05 08:53:50 +00:00
Volume Controls, Mute/Unmute Video * 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.
2023-02-06 04:26:00 +00:00
<!-- Top header panel -->
<header class="chat-header">
<div class="columns is-mobile">
Spit and polish
2023-02-06 21:52:05 +00:00
<div class="column is-narrow pr-1">
Timestamps, Sound Effects & Love
2023-02-06 21:27:29 +00:00
<strong class="is-6">{{AsHTML .Config.Branding}}</strong>
Volume Controls, Mute/Unmute Video * 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.
2023-02-06 04:26:00 +00:00
</div>
Spit and polish
2023-02-06 21:52:05 +00:00
<div class="column px-1">
Volume Controls, Mute/Unmute Video * 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.
2023-02-06 04:26:00 +00:00
<!-- Stop/Start video buttons -->
<button type="button"
v-if="webcam.active"
NSFW Cameras and Moderator Commands
2023-02-11 06:46:39 +00:00
class="button is-small is-danger px-1"
Volume Controls, Mute/Unmute Video * 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.
2023-02-06 04:26:00 +00:00
@click="stopVideo()">
NSFW Cameras and Moderator Commands
2023-02-11 06:46:39 +00:00
<i class="fa fa-stop mr-2"></i>
Volume Controls, Mute/Unmute Video * 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.
2023-02-06 04:26:00 +00:00
Stop
</button>
<button type="button"
v-else
NSFW Cameras and Moderator Commands
2023-02-11 06:46:39 +00:00
class="button is-small is-success px-1"
Volume Controls, Mute/Unmute Video * 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.
2023-02-06 04:26:00 +00:00
@click="startVideo()"
:disabled="webcam.busy">
NSFW Cameras and Moderator Commands
2023-02-11 06:46:39 +00:00
<i class="fa fa-video mr-2"></i>
Share webcam
Volume Controls, Mute/Unmute Video * 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.
2023-02-06 04:26:00 +00:00
</button>
<!-- Mute/Unmute my mic buttons (if streaming)-->
<button type="button"
v-if="webcam.active && !webcam.muted"
Spit and polish
2023-02-06 21:52:05 +00:00
class="button is-small is-danger is-outlined ml-1 px-1"
Volume Controls, Mute/Unmute Video * 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.
2023-02-06 04:26:00 +00:00
@click="muteMe()">
<i class="fa fa-microphone mr-2"></i>
Mute
</button>
<button type="button"
v-if="webcam.active && webcam.muted"
Spit and polish
2023-02-06 21:52:05 +00:00
class="button is-small is-danger ml-1 px-1"
Volume Controls, Mute/Unmute Video * 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.
2023-02-06 04:26:00 +00:00
@click="muteMe()">
<i class="fa fa-microphone mr-2"></i>
Unmute
</button>
<!-- Watchers button -->
<button type="button"
v-if="webcam.active"
Spit and polish
2023-02-06 21:52:05 +00:00
class="button is-small is-info is-outlined ml-1 px-1"
Volume Controls, Mute/Unmute Video * 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.
2023-02-06 04:26:00 +00:00
@click="showViewers()">
<i class="fa fa-eye mr-2"></i>
[[Object.keys(webcam.watching).length]]
</button>
NSFW Cameras and Moderator Commands
2023-02-11 06:46:39 +00:00
<!-- NSFW toggle button -->
<button type="button"
v-if="webcam.active && config.permitNSFW"
class="button is-small px-1 ml-1"
:class="{'is-outlined is-dark': !webcam.nsfw,
'is-danger': webcam.nsfw}"
@click.prevent="webcam.nsfw = !webcam.nsfw; sendMe()"
title="Toggle the NSFW setting for your camera broadcast">
<i class="fa fa-fire"></i>
</button>
Volume Controls, Mute/Unmute Video * 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.
2023-02-06 04:26:00 +00:00
</div>
Spit and polish
2023-02-06 21:52:05 +00:00
<div class="column is-narrow pl-1">
<a href="/about" target="_blank" class="button is-small is-link px-2">
<i class="fa fa-info-circle"></i>
</a>
Timestamps, Sound Effects & Love
2023-02-06 21:27:29 +00:00
<button type="button"
Spit and polish
2023-02-06 21:52:05 +00:00
class="button is-small is-light ml-1 px-2"
Timestamps, Sound Effects & Love
2023-02-06 21:27:29 +00:00
@click="showSettings()"
title="Chat Settings">
<i class="fa fa-gear"></i>
</button>
Volume Controls, Mute/Unmute Video * 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.
2023-02-06 04:26:00 +00:00
</div>
</div>
</header>
Spit and polish * 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.
2023-02-05 08:53:50 +00:00
<!-- Left Column: Channels & DMs -->
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="left-column">
<div class="card grid-card">
<header class="card-header has-background-success-dark">
Spit and polish * 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.
2023-02-05 08:53:50 +00:00
<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>
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
</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">
Spit and polish * 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.
2023-02-05 08:53:50 +00:00
<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>
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>
<p class="menu-label">
Private Messages
</p>
<ul class="menu-list">
Spit and polish * 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.
2023-02-05 08:53:50 +00:00
<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>
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>
</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
Volume Controls, Mute/Unmute Video * 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.
2023-02-06 04:26:00 +00:00
<!-- Middle Column: Chat Room/History -->
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">
Spit and polish * 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.
2023-02-05 08:53:50 +00:00
<div class="columns is-mobile card-header-title has-text-light">
JWT Token-based Authentication * Add support for JWT tokens to authenticate users from your external app. * JWT backed users can have profile pictures, profile URLs, and operator status (admin). Note that no operator features exist yet. * Add WelcomeMessages to settings.toml for default ChatServer messages to write to each public channel directed at a new user logging in. * Markdown support for chat messages!
2023-02-06 01:42:09 +00:00
<div class="column is-narrow mobile-only pr-0">
Spit and polish * 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.
2023-02-05 08:53:50 +00:00
<!-- Responsive mobile button to pan to Left Column -->
<button type="button"
class="button is-success"
JWT Token-based Authentication * Add support for JWT tokens to authenticate users from your external app. * JWT backed users can have profile pictures, profile URLs, and operator status (admin). Note that no operator features exist yet. * Add WelcomeMessages to settings.toml for default ChatServer messages to write to each public channel directed at a new user logging in. * Markdown support for chat messages!
2023-02-06 01:42:09 +00:00
:class="{'is-small': isDM}"
Spit and polish * 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.
2023-02-05 08:53:50 +00:00
@click="openChannelsPanel">
JWT Token-based Authentication * Add support for JWT tokens to authenticate users from your external app. * JWT backed users can have profile pictures, profile URLs, and operator status (admin). Note that no operator features exist yet. * Add WelcomeMessages to settings.toml for default ChatServer messages to write to each public channel directed at a new user logging in. * Markdown support for chat messages!
2023-02-06 01:42:09 +00:00
<i v-if="isDM" class="fa fa-arrow-left"></i>
<i v-else class="fa fa-message"></i>
Spit and polish * 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.
2023-02-05 08:53:50 +00:00
</button>
</div>
JWT Token-based Authentication * Add support for JWT tokens to authenticate users from your external app. * JWT backed users can have profile pictures, profile URLs, and operator status (admin). Note that no operator features exist yet. * Add WelcomeMessages to settings.toml for default ChatServer messages to write to each public channel directed at a new user logging in. * Markdown support for chat messages!
2023-02-06 01:42:09 +00:00
<div class="column">
[[channelName]]
</div>
Spit and polish * 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.
2023-02-05 08:53:50 +00:00
<div class="column is-narrow">
JWT Token-based Authentication * Add support for JWT tokens to authenticate users from your external app. * JWT backed users can have profile pictures, profile URLs, and operator status (admin). Note that no operator features exist yet. * Add WelcomeMessages to settings.toml for default ChatServer messages to write to each public channel directed at a new user logging in. * Markdown support for chat messages!
2023-02-06 01:42:09 +00:00
<!-- 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>
Spit and polish * 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.
2023-02-05 08:53:50 +00:00
<!-- DMs: Leave convo button -->
<button type="button"
v-if="channel.indexOf('@') === 0"
JWT Token-based Authentication * Add support for JWT tokens to authenticate users from your external app. * JWT backed users can have profile pictures, profile URLs, and operator status (admin). Note that no operator features exist yet. * Add WelcomeMessages to settings.toml for default ChatServer messages to write to each public channel directed at a new user logging in. * Markdown support for chat messages!
2023-02-06 01:42:09 +00:00
class="float-right button is-small is-warning is-outlined"
Spit and polish * 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.
2023-02-05 08:53:50 +00:00
@click="leaveDM()">
<i class="fa fa-trash"></i>
</button>
</div>
JWT Token-based Authentication * Add support for JWT tokens to authenticate users from your external app. * JWT backed users can have profile pictures, profile URLs, and operator status (admin). Note that no operator features exist yet. * Add WelcomeMessages to settings.toml for default ChatServer messages to write to each public channel directed at a new user logging in. * Markdown support for chat messages!
2023-02-06 01:42:09 +00:00
<!-- Who List button, only shown on public channel view -->
<div v-if="!isDM" class="column is-narrow mobile-only">
Spit and polish * 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.
2023-02-05 08:53:50 +00:00
<!-- 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>
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
</header>
Spit and polish * Track the window focus/blur events. Leaving the tab while in a channel now means you may still hear sound effects in that channel. * Add a CORS JSON API /v1/statistics to get details from the server about who is online. The CORSHosts whitelist in the settings.toml limits domain access to the endpoint.
2023-02-10 07:03:06 +00:00
<div class="video-feeds" :class="webcam.videoScale" v-show="webcam.active || Object.keys(WebRTC.streams).length > 0">
Volume Controls, Mute/Unmute Video * 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.
2023-02-06 04:26:00 +00:00
<!-- Video Feeds-->
<!-- My video -->
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
<video class="feed"
id="localVideo"
NSFW Cameras and Moderator Commands
2023-02-11 06:46:39 +00:00
v-show="webcam.active"
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
autoplay muted>
Camera connectivity established! * Two users can activate their cameras locally and then connect them together with WebRTC with video and audio support working! * Limitation: users need to be broadcasting video themselves before they can connect to someone's camera. If the offerer doesn't add tracks of their own, the SDP offer doesn't request video channels; so even though the answerer adds their tracks to the connection, they aren't used by the offerer. * As currently implemented, the offerer's camera feed will also appear on screen for the answerer - every video connection opens the feed both ways. Compared to the previous commit (where clients shared SDP messages but not ICE candidates or anything further) the fixes and learnings were: * The back-end was trying to relay candidate messages, but there was a JSON marshalling error (json object casted into a string) - changed the Message type to map[string]interface{} and both sides could exchange ICE candidates. * Both sides needed to add their video tracks to the connection so that there was anything of value to be sent over the WebRTC channel. Other changes: * Server will send a ping message every minute to connected WebSockets.
2023-02-05 05:00:01 +00:00
</video>
Volume Controls, Mute/Unmute Video * 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.
2023-02-06 04:26:00 +00:00
<!-- 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"
Two-channel WebRTC for watching each other
2023-02-06 23:02:23 +00:00
@click="closeVideo(username, 'offerer')">
Volume Controls, Mute/Unmute Video * 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.
2023-02-06 04:26:00 +00:00
<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>
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 class="card-content" id="chatHistory">
JWT Token-based Authentication * Add support for JWT tokens to authenticate users from your external app. * JWT backed users can have profile pictures, profile URLs, and operator status (admin). Note that no operator features exist yet. * Add WelcomeMessages to settings.toml for default ChatServer messages to write to each public channel directed at a new user logging in. * Markdown support for chat messages!
2023-02-06 01:42:09 +00:00
<!-- 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">
Timestamps, Sound Effects & Love
2023-02-06 21:27:29 +00:00
<div class="column is-narrow">
JWT Token-based Authentication * Add support for JWT tokens to authenticate users from your external app. * JWT backed users can have profile pictures, profile URLs, and operator status (admin). Note that no operator features exist yet. * Add WelcomeMessages to settings.toml for default ChatServer messages to write to each public channel directed at a new user logging in. * Markdown support for chat messages!
2023-02-06 01:42:09 +00:00
<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>
Timestamps, Sound Effects & Love
2023-02-06 21:27:29 +00:00
<div class="column is-narrow">
<small class="has-text-grey" :title="msg.at">[[prettyDate(msg.at)]]</small>
</div>
<div class="column"
v-if="!(msg.isChatServer || msg.isChatClient || msg.username === username || isDM)">
JWT Token-based Authentication * Add support for JWT tokens to authenticate users from your external app. * JWT backed users can have profile pictures, profile URLs, and operator status (admin). Note that no operator features exist yet. * Add WelcomeMessages to settings.toml for default ChatServer messages to write to each public channel directed at a new user logging in. * Markdown support for chat messages!
2023-02-06 01:42:09 +00:00
<button type="button"
Timestamps, Sound Effects & Love
2023-02-06 21:27:29 +00:00
class="button is-grey is-outlined is-small px-2"
JWT Token-based Authentication * Add support for JWT tokens to authenticate users from your external app. * JWT backed users can have profile pictures, profile URLs, and operator status (admin). Note that no operator features exist yet. * Add WelcomeMessages to settings.toml for default ChatServer messages to write to each public channel directed at a new user logging in. * Markdown support for chat messages!
2023-02-06 01:42:09 +00:00
@click="openDMs({username: msg.username})">
<i class="fa fa-message"></i>
</button>
</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>
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>
JWT Token-based Authentication * Add support for JWT tokens to authenticate users from your external app. * JWT backed users can have profile pictures, profile URLs, and operator status (admin). Note that no operator features exist yet. * Add WelcomeMessages to settings.toml for default ChatServer messages to write to each public channel directed at a new user logging in. * Markdown support for chat messages!
2023-02-06 01:42:09 +00:00
<div v-else class="content">
<div v-html="msg.message"></div>
Initial commit
2023-01-11 06:38:48 +00:00
</div>
Spit and polish * 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.
2023-02-05 08:53:50 +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
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"
Spit and polish * Track the window focus/blur events. Leaving the tab while in a channel now means you may still hear sound effects in that channel. * Add a CORS JSON API /v1/statistics to get details from the server about who is online. The CORSHosts whitelist in the settings.toml limits domain access to the endpoint.
2023-02-10 07:03:06 +00:00
placeholder="Message"
@keydown="sendTypingNotification()">
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
</form>
</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
Spit and polish * 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.
2023-02-05 08:53:50 +00:00
<!-- Right Column: Who Is Online -->
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">
Spit and polish * 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.
2023-02-05 08:53:50 +00:00
<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>
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
</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">
JWT Token-based Authentication * Add support for JWT tokens to authenticate users from your external app. * JWT backed users can have profile pictures, profile URLs, and operator status (admin). Note that no operator features exist yet. * Add WelcomeMessages to settings.toml for default ChatServer messages to write to each public channel directed at a new user logging in. * Markdown support for chat messages!
2023-02-06 01:42:09 +00:00
<!-- Avatar URL if available -->
Default WhoList icons for guest users
2023-02-06 23:38:14 +00:00
<div class="column is-narrow pr-0">
<img v-if="u.avatar" :src="avatarURL(u)"
JWT Token-based Authentication * Add support for JWT tokens to authenticate users from your external app. * JWT backed users can have profile pictures, profile URLs, and operator status (admin). Note that no operator features exist yet. * Add WelcomeMessages to settings.toml for default ChatServer messages to write to each public channel directed at a new user logging in. * Markdown support for chat messages!
2023-02-06 01:42:09 +00:00
width="24" height="24"
:alt="'Avatar image for ' + u.username">
Default WhoList icons for guest users
2023-02-06 23:38:14 +00:00
<img v-else src="/static/img/shy.png"
width="24" height="24">
JWT Token-based Authentication * Add support for JWT tokens to authenticate users from your external app. * JWT backed users can have profile pictures, profile URLs, and operator status (admin). Note that no operator features exist yet. * Add WelcomeMessages to settings.toml for default ChatServer messages to write to each public channel directed at a new user logging in. * Markdown support for chat messages!
2023-02-06 01:42:09 +00:00
</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 -->
Spit and polish * 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.
2023-02-05 08:53:50 +00:00
<button type="button"
class="button is-small px-2 py-1"
@click="openDMs(u)"
JWT Token-based Authentication * Add support for JWT tokens to authenticate users from your external app. * JWT backed users can have profile pictures, profile URLs, and operator status (admin). Note that no operator features exist yet. * Add WelcomeMessages to settings.toml for default ChatServer messages to write to each public channel directed at a new user logging in. * Markdown support for chat messages!
2023-02-06 01:42:09 +00:00
title="Start direct message thread"
Spit and polish * 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.
2023-02-05 08:53:50 +00:00
:disabled="u.username === username">
<i class="fa fa-message"></i>
</button>
JWT Token-based Authentication * Add support for JWT tokens to authenticate users from your external app. * JWT backed users can have profile pictures, profile URLs, and operator status (admin). Note that no operator features exist yet. * Add WelcomeMessages to settings.toml for default ChatServer messages to write to each public channel directed at a new user logging in. * Markdown support for chat messages!
2023-02-06 01:42:09 +00:00
<!-- Video button -->
<button type="button" class="button is-small px-2 py-1"
Initial WebRTC Code * 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.
2023-01-27 06:54:02 +00:00
:disabled="!u.videoActive"
NSFW Cameras and Moderator Commands
2023-02-11 06:46:39 +00:00
:class="{
'is-danger is-outlined': u.videoActive && u.nsfw,
'is-info is-outlined': u.videoActive && !u.nsfw,
}"
JWT Token-based Authentication * Add support for JWT tokens to authenticate users from your external app. * JWT backed users can have profile pictures, profile URLs, and operator status (admin). Note that no operator features exist yet. * Add WelcomeMessages to settings.toml for default ChatServer messages to write to each public channel directed at a new user logging in. * Markdown support for chat messages!
2023-02-06 01:42:09 +00:00
title="Open video stream"
Initial WebRTC Code * 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.
2023-01-27 06:54:02 +00:00
@click="openVideo(u)">
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
<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 -->
Spit and polish * 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.
2023-02-05 08:53:50 +00:00
<script type="text/javascript">
const PublicChannels = {{.Config.GetChannels}};
JWT Token-based Authentication * Add support for JWT tokens to authenticate users from your external app. * JWT backed users can have profile pictures, profile URLs, and operator status (admin). Note that no operator features exist yet. * Add WelcomeMessages to settings.toml for default ChatServer messages to write to each public channel directed at a new user logging in. * Markdown support for chat messages!
2023-02-06 01:42:09 +00:00
const WebsiteURL = "{{.Config.WebsiteURL}}";
NSFW Cameras and Moderator Commands
2023-02-11 06:46:39 +00:00
const PermitNSFW = {{AsJS .Config.PermitNSFW}};
JWT Token-based Authentication * Add support for JWT tokens to authenticate users from your external app. * JWT backed users can have profile pictures, profile URLs, and operator status (admin). Note that no operator features exist yet. * Add WelcomeMessages to settings.toml for default ChatServer messages to write to each public channel directed at a new user logging in. * Markdown support for chat messages!
2023-02-06 01:42:09 +00:00
const UserJWTToken = {{.JWTTokenString}};
const UserJWTValid = {{if .JWTAuthOK}}true{{else}}false{{end}};
const UserJWTClaims = {{.JWTClaims.ToJSON}};
Spit and polish * 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.
2023-02-05 08:53:50 +00:00
</script>
Initial commit
2023-01-11 06:38:48 +00:00
<script src="/static/js/vue-3.2.45.js"></script>
Timestamps, Sound Effects & Love
2023-02-06 21:27:29 +00:00
<script src="/static/js/sounds.js?{{.CacheHash}}"></script>
Spit and polish * 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.
2023-02-05 08:53:50 +00:00
<script src="/static/js/BareRTC.js?{{.CacheHash}}"></script>
Initial commit
2023-01-11 06:38:48 +00:00
</body>
</html>
{{end}}
Reference in New Issue Copy Permalink