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

1124 lines
58 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">
Chat style updates
2023-06-12 03:33:26 +00:00
<link rel="stylesheet" type="text/css" href="/static/css/bulma-prefers-dark.css?{{.CacheHash}}">
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()">
Experiment to see if iOS devices can connect better w/ JWT auth
2023-02-25 00:47:28 +00:00
<div v-if="autoLogin" class="content">
<p>
Welcome to {{AsHTML .Config.Branding}}! Please just click on the "Enter Chat"
button below to log on. Your username has been pre-filled from the website that
sent you here.
</p>
<p>
This dialog box is added as an experiment to see whether it
helps iOS devices (iPads and iPhones) to log in to the chat more reliably, by
having you interact with the page before it connects to the server. Let us
know in chat if your iPhone or iPad is able to log in this way!
</p>
</div>
Initial commit
2023-01-11 06:38:48 +00:00
<div class="field">
<label class="label">Username</label>
<input class="input"
v-model="username"
placeholder="Username"
autocomplete="off"
autofocus
Experiment to see if iOS devices can connect better w/ JWT auth
2023-02-25 00:47:28 +00:00
:disabled="autoLogin"
Initial commit
2023-01-11 06:38:48 +00:00
required>
</div>
<div class="field">
<div class="control">
Experiment to see if iOS devices can connect better w/ JWT auth
2023-02-25 00:47:28 +00:00
<button class="button is-link">Enter Chat</button>
Initial commit
2023-01-11 06:38:48 +00:00
</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 * Add a scrollback buffer option to the chat Settings to trim room history so your browser can manage its memory usage * Update the wording that ChatServer sends to users when the /nsfw command has been used on them * Fix the ordering of active DMs for Chromium browsers so the most recently updated DM thread moves to the top of the list * Show an indicator on videos whether the person you watch also watches you back * Fix the "X" button on the photo modal not functioning correctly
2023-07-23 01:30:45 +00:00
<!-- Tab bar for the settings -->
<div class="tabs">
<ul>
<li :class="{'is-active': settingsModal.tab==='prefs'}">
<a href="#" @click.prevent="settingsModal.tab='prefs'">
Display
</a>
</li>
<li :class="{'is-active': settingsModal.tab==='sounds'}">
<a href="#" @click.prevent="settingsModal.tab='sounds'">
Sound effects
</a>
</li>
</ul>
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>
Spit and polish * Add a scrollback buffer option to the chat Settings to trim room history so your browser can manage its memory usage * Update the wording that ChatServer sends to users when the /nsfw command has been used on them * Fix the ordering of active DMs for Chromium browsers so the most recently updated DM thread moves to the top of the list * Show an indicator on videos whether the person you watch also watches you back * Fix the "X" button on the photo modal not functioning correctly
2023-07-23 01:30:45 +00:00
<!-- Display preferences -->
<div v-if="settingsModal.tab==='prefs'">
<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>
Font size options
2023-03-25 05:10:44 +00:00
</div>
</div>
</div>
</div>
Timestamps, Sound Effects & Love
2023-02-06 21:27:29 +00:00
Spit and polish * Add a scrollback buffer option to the chat Settings to trim room history so your browser can manage its memory usage * Update the wording that ChatServer sends to users when the /nsfw command has been used on them * Fix the ordering of active DMs for Chromium browsers so the most recently updated DM thread moves to the top of the list * Show an indicator on videos whether the person you watch also watches you back * Fix the "X" button on the photo modal not functioning correctly
2023-07-23 01:30:45 +00:00
<div class="field is-horizontal">
<div class="field-label is-normal">
<label class="label">Text size</label>
</div>
<div class="field-body">
<div class="field">
<div class="control">
<div class="select is-fullwidth">
<select v-model="fontSizeClass">
<option v-for="s in config.fontSizeClasses"
v-bind:key="s[0]"
:value="s[0]">
[[ s[1] ]]
</option>
</select>
</div>
</div>
</div>
Display names and WIP multiple camera support
2023-04-19 05:18:12 +00:00
</div>
</div>
Spit and polish * Add a scrollback buffer option to the chat Settings to trim room history so your browser can manage its memory usage * Update the wording that ChatServer sends to users when the /nsfw command has been used on them * Fix the ordering of active DMs for Chromium browsers so the most recently updated DM thread moves to the top of the list * Show an indicator on videos whether the person you watch also watches you back * Fix the "X" button on the photo modal not functioning correctly
2023-07-23 01:30:45 +00:00
<div class="field">
<label class="label">Scrollback buffer</label>
<div class="control">
<input type="number"
class="input"
v-model="scrollback"
min="0"
inputmode="numeric">
Display names and WIP multiple camera support
2023-04-19 05:18:12 +00:00
</div>
Spit and polish * Add a scrollback buffer option to the chat Settings to trim room history so your browser can manage its memory usage * Update the wording that ChatServer sends to users when the /nsfw command has been used on them * Fix the ordering of active DMs for Chromium browsers so the most recently updated DM thread moves to the top of the list * Show an indicator on videos whether the person you watch also watches you back * Fix the "X" button on the photo modal not functioning correctly
2023-07-23 01:30:45 +00:00
<p class="help">
How many chat history messages to keep at once (per channel/DM thread).
Older messages will be removed so your web browser doesn't run low on memory.
A value of zero (0) will mean "unlimited" and the chat history is never trimmed.
</p>
Display names and WIP multiple camera support
2023-04-19 05:18:12 +00:00
</div>
Spit and polish * Add a scrollback buffer option to the chat Settings to trim room history so your browser can manage its memory usage * Update the wording that ChatServer sends to users when the /nsfw command has been used on them * Fix the ordering of active DMs for Chromium browsers so the most recently updated DM thread moves to the top of the list * Show an indicator on videos whether the person you watch also watches you back * Fix the "X" button on the photo modal not functioning correctly
2023-07-23 01:30:45 +00:00
<h3 class="subtitle mb-2" v-if="webcam.videoDevices.length > 0 || webcam.audioDevices.length > 0">
Webcam Devices
</h3>
<div class="columns is-mobile" v-if="webcam.videoDevices.length > 0 || webcam.audioDevices.length > 0">
<div class="column">
<label class="label">Video source</label>
<div class="select is-fullwidth">
<select v-model="webcam.videoDeviceID" @change="startVideo({changeCamera: true, force: true})">
<option v-for="(d, i) in webcam.videoDevices"
:value="d.id">
[[ d.label || `Camera ${i}` ]]
</option>
</select>
</div>
Display names and WIP multiple camera support
2023-04-19 05:18:12 +00:00
</div>
Spit and polish * Add a scrollback buffer option to the chat Settings to trim room history so your browser can manage its memory usage * Update the wording that ChatServer sends to users when the /nsfw command has been used on them * Fix the ordering of active DMs for Chromium browsers so the most recently updated DM thread moves to the top of the list * Show an indicator on videos whether the person you watch also watches you back * Fix the "X" button on the photo modal not functioning correctly
2023-07-23 01:30:45 +00:00
<div class="column">
<label class="label">Audio source</label>
<div class="select is-fullwidth">
<select v-model="webcam.audioDeviceID" @change="startVideo({changeCamera: true, force: true})">
<option v-for="(d, i) in webcam.audioDevices"
:value="d.id">
[[ d.label || `Microphone ${i}` ]]
</option>
</select>
</div>
Display names and WIP multiple camera support
2023-04-19 05:18:12 +00:00
</div>
</div>
</div>
Spit and polish * Add a scrollback buffer option to the chat Settings to trim room history so your browser can manage its memory usage * Update the wording that ChatServer sends to users when the /nsfw command has been used on them * Fix the ordering of active DMs for Chromium browsers so the most recently updated DM thread moves to the top of the list * Show an indicator on videos whether the person you watch also watches you back * Fix the "X" button on the photo modal not functioning correctly
2023-07-23 01:30:45 +00:00
<!-- Sound settings -->
<div v-else-if="settingsModal.tab==='sounds'">
Display names and WIP multiple camera support
2023-04-19 05:18:12 +00:00
Spit and polish * Add a scrollback buffer option to the chat Settings to trim room history so your browser can manage its memory usage * Update the wording that ChatServer sends to users when the /nsfw command has been used on them * Fix the ordering of active DMs for Chromium browsers so the most recently updated DM thread moves to the top of the list * Show an indicator on videos whether the person you watch also watches you back * Fix the "X" button on the photo modal not functioning correctly
2023-07-23 01:30:45 +00:00
<div class="columns is-mobile">
<div class="column is-2 pr-1">
<label class="label">DM chat</label>
Display names and WIP multiple camera support
2023-04-19 05:18:12 +00:00
</div>
Spit and polish * Add a scrollback buffer option to the chat Settings to trim room history so your browser can manage its memory usage * Update the wording that ChatServer sends to users when the /nsfw command has been used on them * Fix the ordering of active DMs for Chromium browsers so the most recently updated DM thread moves to the top of the list * Show an indicator on videos whether the person you watch also watches you back * Fix the "X" button on the photo modal not functioning correctly
2023-07-23 01:30:45 +00:00
<div class="column">
<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>
Timestamps, Sound Effects & Love
2023-02-06 21:27:29 +00:00
</div>
</div>
Spit and polish * Add a scrollback buffer option to the chat Settings to trim room history so your browser can manage its memory usage * Update the wording that ChatServer sends to users when the /nsfw command has been used on them * Fix the ordering of active DMs for Chromium browsers so the most recently updated DM thread moves to the top of the list * Show an indicator on videos whether the person you watch also watches you back * Fix the "X" button on the photo modal not functioning correctly
2023-07-23 01:30:45 +00:00
<div class="column is-2 pr-1">
<label class="label">Public chat</label>
</div>
<div class="column">
<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>
Timestamps, Sound Effects & Love
2023-02-06 21:27:29 +00:00
</div>
</div>
</div>
Spit and polish * Add a scrollback buffer option to the chat Settings to trim room history so your browser can manage its memory usage * Update the wording that ChatServer sends to users when the /nsfw command has been used on them * Fix the ordering of active DMs for Chromium browsers so the most recently updated DM thread moves to the top of the list * Show an indicator on videos whether the person you watch also watches you back * Fix the "X" button on the photo modal not functioning correctly
2023-07-23 01:30:45 +00:00
<div class="columns is-mobile">
<div class="column is-2 pr-1">
<label class="label">Room enter</label>
</div>
<div class="column">
<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>
Timestamps, Sound Effects & Love
2023-02-06 21:27:29 +00:00
</div>
</div>
Spit and polish * Add a scrollback buffer option to the chat Settings to trim room history so your browser can manage its memory usage * Update the wording that ChatServer sends to users when the /nsfw command has been used on them * Fix the ordering of active DMs for Chromium browsers so the most recently updated DM thread moves to the top of the list * Show an indicator on videos whether the person you watch also watches you back * Fix the "X" button on the photo modal not functioning correctly
2023-07-23 01:30:45 +00:00
<div class="column is-2 pr-1">
<label class="label">Room leave</label>
</div>
<div class="column">
<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>
Timestamps, Sound Effects & Love
2023-02-06 21:27:29 +00:00
</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>
Sort the WhoList + Mutual Video options * The who list now sorts alphabetically instead of random * New user controls when they share video: * Require users to also be sharing before they open ours * We auto-open a viewer's video when they open ours
2023-04-01 02:46:42 +00:00
<p class="block mb-1">
If your camera will be featuring "<abbr title="Not Safe For Work">Explicit</abbr>" or sexual content, please mark it as such by
NSFW Cameras and Moderator Commands
2023-02-11 06:46:39 +00:00
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">
Sort the WhoList + Mutual Video options * The who list now sorts alphabetically instead of random * New user controls when they share video: * Require users to also be sharing before they open ours * We auto-open a viewer's video when they open ours
2023-04-01 02:46:42 +00:00
Check this box if your webcam will <em>definitely</em> be Explicit. 😈
</label>
</div>
<p class="block mb-1">
<label class="label">Mutual webcam options:</label>
</p>
<div class="field mb-1">
<label class="checkbox">
<input type="checkbox"
v-model="webcam.mutual">
People must be sharing their own camera before they can open mine
</label>
</div>
<div class="field">
<label class="checkbox">
<input type="checkbox"
v-model="webcam.mutualOpen">
When someone opens my camera, I also open their camera automatically
NSFW Cameras and Moderator Commands
2023-02-11 06:46:39 +00:00
</label>
</div>
<div class="field">
<div class="control has-text-centered">
<button type="button"
class="button is-link mr-4"
Add device picker for webcams and microphones to the settings modal
2023-07-09 19:33:02 +00:00
@click="startVideo({force: true}); nsfwModalCast.visible=false">Start webcam</button>
NSFW Cameras and Moderator Commands
2023-02-11 06:46:39 +00:00
<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>
Photo sharing support
2023-03-22 04:29:24 +00:00
<!-- Photo Detail Modal -->
<div class="modal" id="photo-modal">
<div class="modal-background" onclick="document.querySelector('#photo-modal').classList.remove('is-active')"></div>
<div class="modal-content photo-modal">
<div class="image is-fullwidth">
<img id="modalImage">
</div>
</div>
Spit and polish * Add a scrollback buffer option to the chat Settings to trim room history so your browser can manage its memory usage * Update the wording that ChatServer sends to users when the /nsfw command has been used on them * Fix the ordering of active DMs for Chromium browsers so the most recently updated DM thread moves to the top of the list * Show an indicator on videos whether the person you watch also watches you back * Fix the "X" button on the photo modal not functioning correctly
2023-07-23 01:30:45 +00:00
<button class="modal-close is-large" aria-label="close" onclick="document.querySelector('#photo-modal').classList.remove('is-active')"></button>
Photo sharing support
2023-03-22 04:29:24 +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 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"
Add device picker for webcams and microphones to the settings modal
2023-07-09 19:33:02 +00:00
@click="startVideo({})"
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
: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"
Pop-out draggable video support
2023-04-20 05:00:31 +00:00
class="button is-small is-success 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()">
Pop-out draggable video support
2023-04-20 05:00:31 +00:00
<i class="fa fa-microphone-slash 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
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">
Remember video mutality prefs on localStorage
2023-04-01 03:25:53 +00:00
<i class="fa fa-fire mr-1"></i> Explicit
NSFW Cameras and Moderator Commands
2023-02-11 06:46:39 +00:00
</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"
Kick off conflicting usernames + Frontend mobile fixes * When JWT tokens are used to join the chat and the username conflicts: instead of renaming the new user to add a "2" it will disconnect the original login (sending a message that they have signed in somewhere else and are logged out now) * When disconnected the text entry box will be greyed out. * Improvements for the mobile user experience: if you're viewing the chat history panel and have unread messages or DMs, a number indicator appears on the channels button. It is grey for public channel messages or red if any of them are DMs * Fix the emoji picker drop-down on the first messages of a DM thread
2023-07-18 03:38:07 +00:00
class="button is-success px-2"
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="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)"
Increase idle threshold to 5 minutes
2023-07-23 22:49:04 +00:00
class="tag is-success">
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
[[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 a scrollback buffer option to the chat Settings to trim room history so your browser can manage its memory usage * Update the wording that ChatServer sends to users when the /nsfw command has been used on them * Fix the ordering of active DMs for Chromium browsers so the most recently updated DM thread moves to the top of the list * Show an indicator on videos whether the person you watch also watches you back * Fix the "X" button on the photo modal not functioning correctly
2023-07-23 01:30:45 +00:00
<li v-for="c in activeDMs"
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
v-bind:key="c.channel">
<a :href="'#'+c.channel"
@click.prevent="setChannel(c.channel)"
:class="{'is-active': c.channel == channel}">
Video Status Bitflags + Improvements * Consolidate all the Video flags (active, nsfw, mutual, mutualOpen) into a bitmask flag (single integer) * New video flag for when the source has muted their video, to show a crossed out grey mic on their camera for other chatters * Bugfixes around syncing the mute state for self and other videos when videos are opened, closed and opened again * Profile pictures on the DMs list
2023-07-01 01:41:06 +00:00
<div class="columns is-mobile">
<!-- Avatar URL if available (copied from Who List) -->
<div class="column is-narrow pr-0" style="position: relative">
<img v-if="avatarForUsername(normalizeUsername(c.channel))" :src="avatarForUsername(normalizeUsername(c.channel))"
width="24" height="24" alt="">
<img v-else src="/static/img/shy.png"
width="24" height="24">
</div>
<div class="column">
[[c.name]]
<span v-if="hasUnread(c.channel)"
class="tag is-danger">
[[hasUnread(c.channel)]]
</span>
</div>
</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
</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">
Auto-scroll checkbox
2023-03-25 04:56:40 +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="card grid-card">
Spit and polish * Add a distinctly colored title and background for DM threads apart from the public channels * On the Who List, the profile picture is clickable to open profile links * Fix auto-scrolling issues: it won't autoscroll if the new message was in a different channel, and when toggling between channels always scroll back to the bottom of that channel
2023-06-24 18:12:02 +00:00
<header class="card-header"
:class="{'has-background-private': isDM, 'has-background-link': !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
<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"
Kick off conflicting usernames + Frontend mobile fixes * When JWT tokens are used to join the chat and the username conflicts: instead of renaming the new user to add a "2" it will disconnect the original login (sending a message that they have signed in somewhere else and are logged out now) * When disconnected the text entry box will be greyed out. * Improvements for the mobile user experience: if you're viewing the chat history panel and have unread messages or DMs, a number indicator appears on the channels button. It is grey for public channel messages or red if any of them are DMs * Fix the emoji picker drop-down on the first messages of a DM thread
2023-07-18 03:38:07 +00:00
class="button is-success px-2"
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>
Kick off conflicting usernames + Frontend mobile fixes * When JWT tokens are used to join the chat and the username conflicts: instead of renaming the new user to add a "2" it will disconnect the original login (sending a message that they have signed in somewhere else and are logged out now) * When disconnected the text entry box will be greyed out. * Improvements for the mobile user experience: if you're viewing the chat history panel and have unread messages or DMs, a number indicator appears on the channels button. It is grey for public channel messages or red if any of them are DMs * Fix the emoji picker drop-down on the first messages of a DM thread
2023-07-18 03:38:07 +00:00
<i v-else class="fa fa-comments"></i>
<!-- Indicator badge for unread messages -->
<span v-if="hasAnyUnread() > 0"
class="tag ml-1" :class="{'is-danger': anyUnreadDMs()}">
[[hasAnyUnread()]]
</span>
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"
Kick off conflicting usernames + Frontend mobile fixes * When JWT tokens are used to join the chat and the username conflicts: instead of renaming the new user to add a "2" it will disconnect the original login (sending a message that they have signed in somewhere else and are logged out now) * When disconnected the text entry box will be greyed out. * Improvements for the mobile user experience: if you're viewing the chat history panel and have unread messages or DMs, a number indicator appears on the channels button. It is grey for public channel messages or red if any of them are DMs * Fix the emoji picker drop-down on the first messages of a DM thread
2023-07-18 03:38:07 +00:00
class="button is-success px-2"
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="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>
Pop-out draggable video support
2023-04-20 05:00:31 +00:00
<div id="video-feeds" 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 -->
Pop-out draggable video support
2023-04-20 05:00:31 +00:00
<div class="feed" v-show="webcam.active"
:class="{'popped-out': WebRTC.poppedOut[username],
'popped-in': !WebRTC.poppedOut[username]}">
Draggable resizable video panels
2023-03-14 04:26:37 +00:00
<video class="feed"
id="localVideo"
autoplay muted>
</video>
Pop-out draggable video support
2023-04-20 05:00:31 +00:00
<div class="caption">
Video Status Bitflags + Improvements * Consolidate all the Video flags (active, nsfw, mutual, mutualOpen) into a bitmask flag (single integer) * New video flag for when the source has muted their video, to show a crossed out grey mic on their camera for other chatters * Bugfixes around syncing the mute state for self and other videos when videos are opened, closed and opened again * Profile pictures on the DMs list
2023-07-01 01:41:06 +00:00
<i class="fa fa-microphone-slash mr-1 has-text-grey"
v-if="webcam.muted"></i>
Pop-out draggable video support
2023-04-20 05:00:31 +00:00
[[username]]
</div>
<div class="controls">
<!-- MY Mute button -->
<button type="button"
v-if="webcam.active && !webcam.muted"
class="button is-small is-success is-outlined ml-1 px-2"
@click="muteMe()">
<i class="fa fa-microphone"></i>
</button>
<button type="button"
v-if="webcam.active && webcam.muted"
class="button is-small is-danger ml-1 px-2"
@click="muteMe()">
<i class="fa fa-microphone-slash"></i>
</button>
<!-- Pop-out MY video -->
<button type="button"
class="button is-small is-light is-outlined p-2 ml-2"
title="Pop out"
@click="popoutVideo(username)">
<i class="fa fa-up-right-from-square"></i>
</button>
</div>
Draggable resizable video panels
2023-03-14 04:26:37 +00:00
</div>
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 -->
Pop-out draggable video support
2023-04-20 05:00:31 +00:00
<div class="feed" v-for="(stream, username) in WebRTC.streams"
v-bind:key="username"
:class="{'popped-out': WebRTC.poppedOut[username],
'popped-in': !WebRTC.poppedOut[username]}">
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 class="feed"
:id="'videofeed-'+username"
autoplay>
</video>
<div class="caption">
Video Status Bitflags + Improvements * Consolidate all the Video flags (active, nsfw, mutual, mutualOpen) into a bitmask flag (single integer) * New video flag for when the source has muted their video, to show a crossed out grey mic on their camera for other chatters * Bugfixes around syncing the mute state for self and other videos when videos are opened, closed and opened again * Profile pictures on the DMs list
2023-07-01 01:41:06 +00:00
<i class="fa fa-microphone-slash mr-1 has-text-grey"
v-if="isSourceMuted(username)"></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
[[username]]
Spit and polish * Add a scrollback buffer option to the chat Settings to trim room history so your browser can manage its memory usage * Update the wording that ChatServer sends to users when the /nsfw command has been used on them * Fix the ordering of active DMs for Chromium browsers so the most recently updated DM thread moves to the top of the list * Show an indicator on videos whether the person you watch also watches you back * Fix the "X" button on the photo modal not functioning correctly
2023-07-23 01:30:45 +00:00
<i class="fa fa-people-arrows ml-1 has-text-grey is-size-7"
:title="username+' is watching your camera too'"
v-if="isWatchingMe(username)"></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
</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">
Pop-out draggable video support
2023-04-20 05:00:31 +00:00
<!-- Mute 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
<button type="button"
v-if="isMuted(username)"
Pop-out draggable video support
2023-04-20 05:00:31 +00:00
class="button is-small is-danger p-2"
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
title="Unmute this video"
@click="muteVideo(username)">
<i class="fa fa-volume-xmark"></i>
</button>
<button type="button"
v-else
Pop-out draggable video support
2023-04-20 05:00:31 +00:00
class="button is-small is-success is-outlined p-2"
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
title="Mute this video"
@click="muteVideo(username)">
<i class="fa fa-volume-high"></i>
</button>
Pop-out draggable video support
2023-04-20 05:00:31 +00:00
<!-- Pop-out -->
<button type="button"
class="button is-small is-light is-outlined p-2 ml-2"
title="Pop out"
@click="popoutVideo(username)">
<i class="fa fa-up-right-from-square"></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>
Style fix for videos: wrap, not scroll
2023-02-28 23:32:14 +00:00
<!-- Debugging - copy a lot of these to simulate more videos -->
<!--
<div class="feed">
hi
</div>
Draggable resizable video panels
2023-03-14 04:26:37 +00:00
<div class="feed">
hi
</div>
<div class="feed">
hi
</div>
<div class="feed">
hi
</div>
Style fix for videos: wrap, not scroll
2023-02-28 23:32:14 +00:00
-->
Draggable resizable video panels
2023-03-14 04:26:37 +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>
Spit and polish * Add a distinctly colored title and background for DM threads apart from the public channels * On the Who List, the profile picture is clickable to open profile links * Fix auto-scrolling issues: it won't autoscroll if the new message was in a different channel, and when toggling between channels always scroll back to the bottom of that channel
2023-06-24 18:12:02 +00:00
<div class="card-content" id="chatHistory" :class="{'has-background-dm': isDM}">
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
Pop-out draggable video support
2023-04-20 05:00:31 +00:00
<div class="autoscroll-field tag">
<label class="checkbox is-size-6" title="Automatically scroll when new chat messages come in.">
<input type="checkbox"
v-model="autoscroll"
:value="true">
Auto-scroll
</label>
</div>
Spit and polish * Add a distinctly colored title and background for DM threads apart from the public channels * On the Who List, the profile picture is clickable to open profile links * Fix auto-scrolling issues: it won't autoscroll if the new message was in a different channel, and when toggling between channels always scroll back to the bottom of that channel
2023-06-24 18:12:02 +00:00
<div :class="fontSizeClass">
Display names and WIP multiple camera support
2023-04-19 05:18:12 +00:00
DMs disclaimer banner
2023-07-28 03:40:16 +00:00
<!-- Disclaimer at the top of DMs -->
<!-- TODO: make this disclaimer configurable for other sites to modify -->
<div class="notification is-warning is-light" v-if="isDM">
<i class="fa fa-info-circle mr-1"></i>
<strong>Reminder:</strong> please conduct yourself honorably in Direct Messages.
Please refer to {{AsHTML .Config.Branding}}'s Privacy Policy or Terms of Service with regard to DMs.
</div>
Spit and polish * Add a distinctly colored title and background for DM threads apart from the public channels * On the Who List, the profile picture is clickable to open profile links * Fix auto-scrolling issues: it won't autoscroll if the new message was in a different channel, and when toggling between channels always scroll back to the bottom of that channel
2023-06-24 18:12:02 +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>
Chat style updates
2023-06-12 03:33:26 +00:00
</div>
Spit and polish * Add a distinctly colored title and background for DM threads apart from the public channels * On the Who List, the profile picture is clickable to open profile links * Fix auto-scrolling issues: it won't autoscroll if the new message was in a different channel, and when toggling between channels always scroll back to the bottom of that channel
2023-06-24 18:12:02 +00:00
<div v-for="(msg, i) in chatHistory" v-bind:key="i">
<!-- Enter chat presence messages draw as a short banner -->
<div v-if="msg.action === 'presence'" class="notification is-success is-light py-1 px-3 mb-2">
<!-- Tiny avatar next to name and action buttons -->
<div class="columns is-mobile">
<div class="column is-narrow pr-0 pt-4">
<figure class="image is-16x16">
<img v-if="avatarForUsername(msg.username)"
Chat style updates
2023-06-12 03:33:26 +00:00
:src="avatarForUsername(msg.username)">
<img v-else src="/static/img/shy.png">
</figure>
Timestamps, Sound Effects & Love
2023-02-06 21:27:29 +00:00
</div>
Spit and polish * Add a distinctly colored title and background for DM threads apart from the public channels * On the Who List, the profile picture is clickable to open profile links * Fix auto-scrolling issues: it won't autoscroll if the new message was in a different channel, and when toggling between channels always scroll back to the bottom of that channel
2023-06-24 18:12:02 +00:00
<div class="column">
<strong>[[ nicknameForUsername(msg.username) ]]</strong>
<small v-if="isUsernameOnline(msg.username)" class="ml-1">(@[[msg.username]])</small>
[[msg.message]]
</div>
</div>
Display names and WIP multiple camera support
2023-04-19 05:18:12 +00:00
Spit and polish * Add a distinctly colored title and background for DM threads apart from the public channels * On the Who List, the profile picture is clickable to open profile links * Fix auto-scrolling issues: it won't autoscroll if the new message was in a different channel, and when toggling between channels always scroll back to the bottom of that channel
2023-06-24 18:12:02 +00:00
</div>
<!-- Normal chat message: full size card w/ avatar -->
Emoji reactions
2023-07-01 03:00:21 +00:00
<div v-else class="box mb-2 px-4 pt-3 pb-1 position-relative">
Spit and polish * Add a distinctly colored title and background for DM threads apart from the public channels * On the Who List, the profile picture is clickable to open profile links * Fix auto-scrolling issues: it won't autoscroll if the new message was in a different channel, and when toggling between channels always scroll back to the bottom of that channel
2023-06-24 18:12:02 +00:00
<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-48x48">
<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>
Boot and Mute * Users can now boot viewers off their camera. From the viewer's POV the booter has just turned off their camera and it will remain "off" for the remainder of the booter's session. * Users can now mute one another: if you mute a user, you will no longer see that user's messages or DMs; and the muted user will never see your video as being active (like a boot but revokable if you unmute later).
2023-03-23 03:21:04 +00:00
</div>
Spit and polish * Add a distinctly colored title and background for DM threads apart from the public channels * On the Who List, the profile picture is clickable to open profile links * Fix auto-scrolling issues: it won't autoscroll if the new message was in a different channel, and when toggling between channels always scroll back to the bottom of that channel
2023-06-24 18:12:02 +00:00
<div class="media-content">
<div class="columns is-mobile pb-0">
<div class="column is-narrow pb-0">
<strong
:class="{'has-text-success is-dark': msg.isChatServer,
'has-text-warning is-dark': msg.isAdmin,
'has-text-danger': msg.isChatClient}">
<!-- User nickname/display name -->
[[nicknameForUsername(msg.username)]]
</strong>
</div>
<div class="column has-text-right pb-0">
<small class="has-text-grey is-size-7" :title="msg.at">[[prettyDate(msg.at)]]</small>
</div>
Chat style updates
2023-06-12 03:33:26 +00:00
</div>
Spit and polish * Add a distinctly colored title and background for DM threads apart from the public channels * On the Who List, the profile picture is clickable to open profile links * Fix auto-scrolling issues: it won't autoscroll if the new message was in a different channel, and when toggling between channels always scroll back to the bottom of that channel
2023-06-24 18:12:02 +00:00
<!-- User @username below it which may link to a profile URL if JWT -->
<div class="columns is-mobile pt-0" v-if="(msg.isChatClient || msg.isChatServer)">
<div class="column is-narrow pt-0">
<small v-if="!(msg.isChatClient || msg.isChatServer)">
<a v-if="profileURLForUsername(msg.username)"
:href="profileURLForUsername(msg.username)"
target="_blank"
class="has-text-grey">
@[[msg.username]]
</a>
<span v-else class="has-text-grey">@[[msg.username]]</span>
</small>
<small v-else class="has-text-grey">internal</small>
</div>
Chat style updates
2023-06-12 03:33:26 +00:00
</div>
Spit and polish * Add a distinctly colored title and background for DM threads apart from the public channels * On the Who List, the profile picture is clickable to open profile links * Fix auto-scrolling issues: it won't autoscroll if the new message was in a different channel, and when toggling between channels always scroll back to the bottom of that channel
2023-06-24 18:12:02 +00:00
<div v-else class="columns is-mobile pt-0">
<div class="column is-narrow pt-0">
<small v-if="!(msg.isChatClient || msg.isChatServer)">
<a v-if="profileURLForUsername(msg.username)"
:href="profileURLForUsername(msg.username)"
target="_blank"
class="has-text-grey">
@[[msg.username]]
</a>
<span v-else class="has-text-grey">@[[msg.username]]</span>
</small>
<small v-else class="has-text-grey">internal</small>
</div>
Message Takebacks
2023-06-24 20:08:15 +00:00
<div class="column is-narrow pl-1 pt-0">
Spit and polish * Add a distinctly colored title and background for DM threads apart from the public channels * On the Who List, the profile picture is clickable to open profile links * Fix auto-scrolling issues: it won't autoscroll if the new message was in a different channel, and when toggling between channels always scroll back to the bottom of that channel
2023-06-24 18:12:02 +00:00
<!-- DMs button -->
<button type="button"
Message Takebacks
2023-06-24 20:08:15 +00:00
v-if="!(msg.username === username || isDM)"
Spit and polish * Add a distinctly colored title and background for DM threads apart from the public channels * On the Who List, the profile picture is clickable to open profile links * Fix auto-scrolling issues: it won't autoscroll if the new message was in a different channel, and when toggling between channels always scroll back to the bottom of that channel
2023-06-24 18:12:02 +00:00
class="button is-grey is-outlined is-small px-2"
Message Takebacks
2023-06-24 20:08:15 +00:00
@click="openDMs({username: msg.username})"
title="Open a Direct Message (DM) thread">
Spit and polish * Add a distinctly colored title and background for DM threads apart from the public channels * On the Who List, the profile picture is clickable to open profile links * Fix auto-scrolling issues: it won't autoscroll if the new message was in a different channel, and when toggling between channels always scroll back to the bottom of that channel
2023-06-24 18:12:02 +00:00
<i class="fa fa-message"></i>
</button>
Message Takebacks
2023-06-24 20:08:15 +00:00
Spit and polish * Add a distinctly colored title and background for DM threads apart from the public channels * On the Who List, the profile picture is clickable to open profile links * Fix auto-scrolling issues: it won't autoscroll if the new message was in a different channel, and when toggling between channels always scroll back to the bottom of that channel
2023-06-24 18:12:02 +00:00
<!-- Mute button -->
<button type="button"
Message Takebacks
2023-06-24 20:08:15 +00:00
v-if="!(msg.username === username)"
class="button is-grey is-outlined is-small px-2 ml-1"
Spit and polish * Add a distinctly colored title and background for DM threads apart from the public channels * On the Who List, the profile picture is clickable to open profile links * Fix auto-scrolling issues: it won't autoscroll if the new message was in a different channel, and when toggling between channels always scroll back to the bottom of that channel
2023-06-24 18:12:02 +00:00
@click="muteUser(msg.username)"
title="Mute user">
<i class="fa fa-comment-slash"
:class="{'has-text-success': isMutedUser(msg.username),
'has-text-danger': !isMutedUser(msg.username)}"></i>
</button>
Message Takebacks
2023-06-24 20:08:15 +00:00
<!-- Owner or admin: take back the message -->
<button type="button"
v-if="msg.username === username || isOp"
class="button is-grey is-outlined is-small px-2 ml-1"
title="Take back this message (delete it for everybody)"
@click="takeback(msg)">
<i class="fa fa-rotate-left has-text-danger"></i>
</button>
<!-- Everyone else: can hide it locally -->
<button type="button"
v-if="msg.username !== username"
class="button is-grey is-outlined is-small px-2 ml-1"
title="Hide this message (delete it only for your view)"
@click="removeMessage(msg)">
<i class="fa fa-trash"></i>
</button>
Spit and polish * Add a distinctly colored title and background for DM threads apart from the public channels * On the Who List, the profile picture is clickable to open profile links * Fix auto-scrolling issues: it won't autoscroll if the new message was in a different channel, and when toggling between channels always scroll back to the bottom of that channel
2023-06-24 18:12:02 +00:00
</div>
Chat style updates
2023-06-12 03:33:26 +00:00
</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>
</div>
Initial commit
2023-01-11 06:38:48 +00:00
Emoji reactions
2023-07-01 03:00:21 +00:00
<!-- Emoji reactions menu -->
Kick off conflicting usernames + Frontend mobile fixes * When JWT tokens are used to join the chat and the username conflicts: instead of renaming the new user to add a "2" it will disconnect the original login (sending a message that they have signed in somewhere else and are logged out now) * When disconnected the text entry box will be greyed out. * Improvements for the mobile user experience: if you're viewing the chat history panel and have unread messages or DMs, a number indicator appears on the channels button. It is grey for public channel messages or red if any of them are DMs * Fix the emoji picker drop-down on the first messages of a DM thread
2023-07-18 03:38:07 +00:00
<div v-if="msg.msgID" class="dropdown is-right emoji-button"
:class="{'is-up': i >= 2}"
onclick="this.classList.toggle('is-active')">
Emoji reactions
2023-07-01 03:00:21 +00:00
<div class="dropdown-trigger">
<button class="button is-small px-2" aria-haspopup="true" :aria-controls="`react-menu-${msg.msgID}`">
<span>
<i class="fa fa-heart has-text-grey"></i>
<i class="fa fa-plus has-text-grey pl-1"></i>
</span>
</button>
</div>
<div class="dropdown-menu" :id="`react-menu-${msg.msgID}`" role="menu">
New emojis
2023-07-01 04:48:09 +00:00
<div class="dropdown-content p-0">
<!-- Iterate over reactions in rows of emojis-->
<div class="columns is-mobile ml-0 mb-2 mr-1"
v-for="row in config.reactions">
<!-- Loop over the icons -->
<div class="column p-0 is-narrow"
v-for="i in row">
<button type="button"
class="button px-2 mt-1 ml-1 mr-0 mb-1"
@click="sendReact(msg, i)">
[[i]]
</button>
</div>
</div>
Emoji reactions
2023-07-01 03:00:21 +00:00
</div>
</div>
</div>
Spit and polish * Add a distinctly colored title and background for DM threads apart from the public channels * On the Who List, the profile picture is clickable to open profile links * Fix auto-scrolling issues: it won't autoscroll if the new message was in a different channel, and when toggling between channels always scroll back to the bottom of that channel
2023-06-24 18:12:02 +00:00
<!-- Message box -->
<div class="content pl-5 py-3 mb-0">
<em v-if="msg.action === 'presence'">[[msg.message]]</em>
<div v-else v-html="msg.message"></div>
Emoji reactions
2023-07-01 03:00:21 +00:00
<!-- Reactions so far? -->
<div v-if="hasReactions(msg)" class="mt-1">
<span v-for="(users, emoji) in getReactions(msg)"
Can click an emoji to upvote it
2023-07-01 04:55:08 +00:00
class="tag is-secondary mr-1 cursor-pointer"
Take back emojis and other small tweaks
2023-07-01 18:39:08 +00:00
:class="{'is-success is-light': iReacted(msg, emoji), 'is-secondary': !iReacted(msg, emoji)}"
Emoji reactions
2023-07-01 03:00:21 +00:00
:title="emoji + ' by: ' + users.join(', ')"
Can click an emoji to upvote it
2023-07-01 04:55:08 +00:00
@click="sendReact(msg, emoji)">
Emoji reactions
2023-07-01 03:00:21 +00:00
[[emoji]] <small class="ml-1">[[users.length]]</small>
</span>
</div>
Spit and polish * Add a distinctly colored title and background for DM threads apart from the public channels * On the Who List, the profile picture is clickable to open profile links * Fix auto-scrolling issues: it won't autoscroll if the new message was in a different channel, and when toggling between channels always scroll back to the bottom of that channel
2023-06-24 18:12:02 +00:00
</div>
Chat style updates
2023-06-12 03:33:26 +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>
Display names and WIP multiple camera support
2023-04-19 05:18:12 +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
Tweak unmute user UX
2023-06-15 03:45:54 +00:00
<!-- If this is a DM with a muted user, offer to unmute. -->
<div v-if="isDM && isMutedUser(channel)" class="has-text-danger">
<i class="fa fa-comment-slash"></i>
<strong>[[channel]]</strong> is currently <strong>muted</strong> so you have not been seeing their recent
chat messages or DMs.
<a href="#" v-on:click.prevent="muteUser(channel)">Unmute them?</a>
</div>
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>
Photo sharing support
2023-03-22 04:29:24 +00:00
<!-- Chat Footer Frame -->
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-footer">
<div class="card">
<div class="card-content p-2">
Style fix
2023-03-22 04:59:02 +00:00
<div class="columns is-mobile">
No pictures shared over chat DMs
2023-07-28 05:29:56 +00:00
<div class="column"
Cached Blocklist from your website * New API endpoint: /api/blocklist where your site can pre-deliver muted username lists for users before they enter the chat. * Image sharing in DMs is allowed if either party is an operator.
2023-07-30 17:32:08 +00:00
:class="{'pr-1': canUploadFile}">
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 @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"
Kick off conflicting usernames + Frontend mobile fixes * When JWT tokens are used to join the chat and the username conflicts: instead of renaming the new user to add a "2" it will disconnect the original login (sending a message that they have signed in somewhere else and are logged out now) * When disconnected the text entry box will be greyed out. * Improvements for the mobile user experience: if you're viewing the chat history panel and have unread messages or DMs, a number indicator appears on the channels button. It is grey for public channel messages or red if any of them are DMs * Fix the emoji picker drop-down on the first messages of a DM thread
2023-07-18 03:38:07 +00:00
@keydown="sendTypingNotification()"
:disabled="!ws.connected">
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>
Cached Blocklist from your website * New API endpoint: /api/blocklist where your site can pre-deliver muted username lists for users before they enter the chat. * Image sharing in DMs is allowed if either party is an operator.
2023-07-30 17:32:08 +00:00
<div class="column pl-1 is-narrow" v-if="canUploadFile">
Photo sharing support
2023-03-22 04:29:24 +00:00
<button type="button" class="button"
@click="uploadFile()">
Pop-out draggable video support
2023-04-20 05:00:31 +00:00
<i class="fa fa-image"></i>
Photo sharing support
2023-03-22 04:29:24 +00:00
</button>
</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>
</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"
Kick off conflicting usernames + Frontend mobile fixes * When JWT tokens are used to join the chat and the username conflicts: instead of renaming the new user to add a "2" it will disconnect the original login (sending a message that they have signed in somewhere else and are logged out now) * When disconnected the text entry box will be greyed out. * Improvements for the mobile user experience: if you're viewing the chat history panel and have unread messages or DMs, a number indicator appears on the channels button. It is grey for public channel messages or red if any of them are DMs * Fix the emoji picker drop-down on the first messages of a DM thread
2023-07-18 03:38:07 +00:00
class="button is-success px-2"
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="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">
User status and idle detection
2023-03-28 04:13:04 +00:00
<div class="columns is-mobile mb-0">
<div class="column is-narrow">
Status:
</div>
<div class="column">
<div class="select is-small is-fullwidth">
<select v-model="status">
<option value="online">☀️ Active</option>
<option value="away">🕒 Away</option>
<option value="idle" v-show="status==='idle'">🕒 Idle</option>
Bugfixes with user status
2023-03-29 01:34:50 +00:00
<option value="hidden" v-if="jwt.claims != undefined && jwt.claims.op">🕵️ Hidden</option>
User status and idle detection
2023-03-28 04:13:04 +00:00
</select>
</div>
</div>
</div>
Boot and Mute * Users can now boot viewers off their camera. From the viewer's POV the booter has just turned off their camera and it will remain "off" for the remainder of the booter's session. * Users can now mute one another: if you mute a user, you will no longer see that user's messages or DMs; and the muted user will never see your video as being active (like a boot but revokable if you unmute later).
2023-03-23 03:21:04 +00:00
<div class="tabs has-text-small">
<ul>
<li :class="{'is-active': whoTab==='online'}">
<a class="is-size-7"
@click.prevent="whoTab='online'">
Online ([[ whoList.length ]])
</a>
</li>
<li v-if="webcam.active" :class="{'is-active': whoTab==='watching'}">
<a class="is-size-7"
@click.prevent="whoTab='watching'">
<i class="fa fa-eye mr-2"></i>
Watching ([[ Object.keys(webcam.watching).length ]])
</a>
</li>
</ul>
</div>
<!-- Who Is Online -->
<ul class="menu-list" v-if="whoTab==='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
<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 -->
User status and idle detection
2023-03-28 04:13:04 +00:00
<div class="column is-narrow pr-0" style="position: relative">
Spit and polish * Add a distinctly colored title and background for DM threads apart from the public channels * On the Who List, the profile picture is clickable to open profile links * Fix auto-scrolling issues: it won't autoscroll if the new message was in a different channel, and when toggling between channels always scroll back to the bottom of that channel
2023-06-24 18:12:02 +00:00
<a :href="profileURLForUsername(u.username)" @click.prevent="openProfile({username: u.username})"
:class="{'cursor-default': !profileURLForUsername(u.username)}"
class="p-0">
<img v-if="u.avatar" :src="avatarURL(u)"
Remove alt text on avatars in case of broken images
2023-07-08 17:52:12 +00:00
width="24" height="24" alt="">
Spit and polish * Add a distinctly colored title and background for DM threads apart from the public channels * On the Who List, the profile picture is clickable to open profile links * Fix auto-scrolling issues: it won't autoscroll if the new message was in a different channel, and when toggling between channels always scroll back to the bottom of that channel
2023-06-24 18:12:02 +00:00
<img v-else src="/static/img/shy.png"
width="24" height="24">
<!-- Away symbol -->
<div v-if="u.status !== 'online'" class="status-away-icon" :title="'Status: '+u.status">
<i class="fa fa-clock has-text-light"></i>
</div>
</a>
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>
Boot and Mute * Users can now boot viewers off their camera. From the viewer's POV the booter has just turned off their camera and it will remain "off" for the remainder of the booter's session. * Users can now mute one another: if you mute a user, you will no longer see that user's messages or DMs; and the muted user will never see your video as being active (like a boot but revokable if you unmute later).
2023-03-23 03:21:04 +00:00
<!-- Unmute User button (if muted) -->
<button type="button" v-if="isMutedUser(u.username)"
class="button is-small px-2 py-1"
@click="muteUser(u.username)"
title="This user is muted. Click to unmute them.">
<i class="fa fa-comment-slash has-text-danger"></i>
</button>
<!-- DM button (if not muted) -->
<button type="button" v-else
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
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"
Video Status Bitflags + Improvements * Consolidate all the Video flags (active, nsfw, mutual, mutualOpen) into a bitmask flag (single integer) * New video flag for when the source has muted their video, to show a crossed out grey mic on their camera for other chatters * Bugfixes around syncing the mute state for self and other videos when videos are opened, closed and opened again * Profile pictures on the DMs list
2023-07-01 01:41:06 +00:00
:disabled="!(u.video & VideoFlag.Active)"
NSFW Cameras and Moderator Commands
2023-02-11 06:46:39 +00:00
:class="{
Video Status Bitflags + Improvements * Consolidate all the Video flags (active, nsfw, mutual, mutualOpen) into a bitmask flag (single integer) * New video flag for when the source has muted their video, to show a crossed out grey mic on their camera for other chatters * Bugfixes around syncing the mute state for self and other videos when videos are opened, closed and opened again * Profile pictures on the DMs list
2023-07-01 01:41:06 +00:00
'is-danger is-outlined': (u.video & VideoFlag.Active) && (u.video & VideoFlag.NSFW),
'is-info is-outlined': (u.video & VideoFlag.Active) && !(u.video & VideoFlag.NSFW),
You can not open the camera of someone you have muted
2023-06-15 04:06:57 +00:00
'cursor-notallowed': isVideoNotAllowed(u),
NSFW Cameras and Moderator Commands
2023-02-11 06:46:39 +00:00
}"
Sort the WhoList + Mutual Video options * The who list now sorts alphabetically instead of random * New user controls when they share video: * Require users to also be sharing before they open ours * We auto-open a viewer's video when they open ours
2023-04-01 02:46:42 +00:00
:title="`Open video stream` +
Video Status Bitflags + Improvements * Consolidate all the Video flags (active, nsfw, mutual, mutualOpen) into a bitmask flag (single integer) * New video flag for when the source has muted their video, to show a crossed out grey mic on their camera for other chatters * Bugfixes around syncing the mute state for self and other videos when videos are opened, closed and opened again * Profile pictures on the DMs list
2023-07-01 01:41:06 +00:00
(u.video & VideoFlag.MutualRequired ? '; mutual video sharing required' : '') +
(u.video & VideoFlag.MutualOpen ? '; will auto-open your video' : '')"
Sort the WhoList + Mutual Video options * The who list now sorts alphabetically instead of random * New user controls when they share video: * Require users to also be sharing before they open ours * We auto-open a viewer's video when they open ours
2023-04-01 02:46:42 +00:00
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)">
Slashed out video icon if mutual and you can't follow
2023-04-01 03:12:20 +00:00
<i class="fa"
Video Status Bitflags + Improvements * Consolidate all the Video flags (active, nsfw, mutual, mutualOpen) into a bitmask flag (single integer) * New video flag for when the source has muted their video, to show a crossed out grey mic on their camera for other chatters * Bugfixes around syncing the mute state for self and other videos when videos are opened, closed and opened again * Profile pictures on the DMs list
2023-07-01 01:41:06 +00:00
:class="webcamIconClass(u)"></i>
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
</button>
</div>
</div>
</li>
</ul>
Initial commit
2023-01-11 06:38:48 +00:00
Boot and Mute * Users can now boot viewers off their camera. From the viewer's POV the booter has just turned off their camera and it will remain "off" for the remainder of the booter's session. * Users can now mute one another: if you mute a user, you will no longer see that user's messages or DMs; and the muted user will never see your video as being active (like a boot but revokable if you unmute later).
2023-03-23 03:21:04 +00:00
<!-- Watching My Webcam -->
<ul class="menu-list" v-if="whoTab==='watching'">
<li v-for="username in Object.keys(webcam.watching)" v-bind:key="username">
<div class="columns is-mobile">
<!-- Avatar URL if available -->
<div class="column is-narrow pr-0">
<i class="fa fa-eye"></i>
</div>
<div class="column pr-0">
[[ username ]]
</div>
<div class="column is-narrow pl-0">
<!-- Boot from cam button -->
<button type="button"
class="button is-small px-2 py-1"
@click="bootUser(username)"
title="Kick this person off your cam">
<i class="fa fa-user-xmark has-text-danger"></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}};
Add TURN server support
2023-06-14 04:57:31 +00:00
const TURN = {{.Config.TURN}};
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}};
Cached Blocklist from your website * New API endpoint: /api/blocklist where your site can pre-deliver muted username lists for users before they enter the chat. * Image sharing in DMs is allowed if either party is an operator.
2023-07-30 17:32:08 +00:00
const CachedBlocklist = {{.CachedBlocklist}};
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>
Pop-out draggable video support
2023-04-20 05:00:31 +00:00
<script src="/static/js/interact.min.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>
Style fix
2023-03-22 04:59:02 +00:00
{{end}}
Reference in New Issue Copy Permalink