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

427 lines
19 KiB
HTML
Raw Normal View History

Initial commit
2023-01-11 06:38:48 +00:00
{{define "index"}}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="/static/css/bulma.min.css">
Volume Controls, Mute/Unmute Video * Added a top panel to put your video controls in. * Broadcaster can mute or unmute their own audio input. * When viewing others' cams, buttons appear to control their video: * Their username is displayed in the corner. * Mute/unmute button to silence their audio. * "X" button to close their camera. * Button to show what viewers are currently watching your camera. * Add an "About" page and config for app branding. * Add dark theme CSS for prefers-dark browsers.
2023-02-06 04:26:00 +00:00
<link rel="stylesheet" type="text/css" href="/static/css/bulma-prefers-dark.css">
Initial commit
2023-01-11 06:38:48 +00:00
<link rel="stylesheet" href="/static/fontawesome-free-6.1.2-web/css/all.css">
Spit and polish * Add configuration system and default public channels support * Add support for multiple channels and DM threads with users, with unread badge indicators. DMs rearrange themselves by most recently updated on top. * Responsive CSS to work well on mobile devices.
2023-02-05 08:53:50 +00:00
<link rel="stylesheet" type="text/css" href="/static/css/chat.css?{{.CacheHash}}">
Initial commit
2023-01-11 06:38:48 +00:00
<title>BareRTC</title>
</head>
<body>
<div id="BareRTC-App">
<!-- Sign In modal -->
<div class="modal" :class="{'is-active': loginModal.visible}">
<div class="modal-background"></div>
<div class="modal-content">
<div class="card">
<header class="card-header has-background-info">
<p class="card-header-title has-text-light">Sign In</p>
</header>
<div class="card-content">
<form @submit.prevent="signIn()">
<div class="field">
<label class="label">Username</label>
<input class="input"
v-model="username"
placeholder="Username"
autocomplete="off"
autofocus
required>
</div>
<div class="field">
<div class="control">
<button class="button is-link">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
Progress on Chat Server * Reworked full screen CSS layout for the chat.html, still using Bulma components with some custom CSS Grid. * Duplicate username handling: server can push a new username to change the client's selection. * Who List sync between clients. * Local video casting works so far - plays back your camera in the local feed. Your video broadcasting boolean is synced to backend, which lights up the video button in the Who List.
2023-01-27 04:34:58 +00:00
<div class="chat-container">
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">
<div class="column is-narrow">
<strong class="is-6">{{AsHTML .Config.Title}}</strong>
</div>
<div class="column">
<!-- Stop/Start video buttons -->
<button type="button"
v-if="webcam.active"
class="button is-small is-danger"
@click="stopVideo()">
<i class="fa fa-camera mr-2"></i>
Stop
</button>
<button type="button"
v-else
class="button is-small is-success"
@click="startVideo()"
:disabled="webcam.busy">
<i class="fa fa-camera mr-2"></i>
Start
</button>
<!-- Mute/Unmute my mic buttons (if streaming)-->
<button type="button"
v-if="webcam.active && !webcam.muted"
class="button is-small is-danger is-outlined ml-2"
@click="muteMe()">
<i class="fa fa-microphone mr-2"></i>
Mute
</button>
<button type="button"
v-if="webcam.active && webcam.muted"
class="button is-small is-danger ml-2"
@click="muteMe()">
<i class="fa fa-microphone mr-2"></i>
Unmute
</button>
<!-- Watchers button -->
<button type="button"
v-if="webcam.active"
class="button is-small is-info is-outlined ml-2"
@click="showViewers()">
<i class="fa fa-eye mr-2"></i>
[[Object.keys(webcam.watching).length]]
</button>
</div>
<div class="column is-narrow">
<a href="/about" target="_blank" class="button is-small is-link">About</a>
</div>
</div>
</header>
Spit and polish * Add configuration system and default public channels support * Add support for multiple channels and DM threads with users, with unread badge indicators. DMs rearrange themselves by most recently updated on top. * Responsive CSS to work well on mobile devices.
2023-02-05 08:53:50 +00:00
<!-- Left Column: Channels & DMs -->
Progress on Chat Server * Reworked full screen CSS layout for the chat.html, still using Bulma components with some custom CSS Grid. * Duplicate username handling: server can push a new username to change the client's selection. * Who List sync between clients. * Local video casting works so far - plays back your camera in the local feed. Your video broadcasting boolean is synced to backend, which lights up the video button in the Who List.
2023-01-27 04:34:58 +00:00
<div class="left-column">
<div class="card grid-card">
<header class="card-header has-background-success-dark">
Spit and polish * Add configuration system and default public channels support * Add support for multiple channels and DM threads with users, with unread badge indicators. DMs rearrange themselves by most recently updated on top. * Responsive CSS to work well on mobile devices.
2023-02-05 08:53:50 +00:00
<div class="columns is-mobile card-header-title has-text-light">
<div class="column is-narrow mobile-only">
<button type="button"
class="button is-success"
@click="openChatPanel">
<i class="fa fa-arrow-left"></i>
</button>
</div>
<div class="column">Channels</div>
</div>
Progress on Chat Server * Reworked full screen CSS layout for the chat.html, still using Bulma components with some custom CSS Grid. * Duplicate username handling: server can push a new username to change the client's selection. * Who List sync between clients. * Local video casting works so far - plays back your camera in the local feed. Your video broadcasting boolean is synced to backend, which lights up the video button in the Who List.
2023-01-27 04:34:58 +00:00
</header>
<div class="card-content">
<aside class="menu">
<p class="menu-label">
Chat Rooms
Initial commit
2023-01-11 06:38:48 +00:00
</p>
Progress on Chat Server * Reworked full screen CSS layout for the chat.html, still using Bulma components with some custom CSS Grid. * Duplicate username handling: server can push a new username to change the client's selection. * Who List sync between clients. * Local video casting works so far - plays back your camera in the local feed. Your video broadcasting boolean is synced to backend, which lights up the video button in the Who List.
2023-01-27 04:34:58 +00:00
<ul class="menu-list">
Spit and polish * Add configuration system and default public channels support * Add support for multiple channels and DM threads with users, with unread badge indicators. DMs rearrange themselves by most recently updated on top. * Responsive CSS to work well on mobile devices.
2023-02-05 08:53:50 +00:00
<li v-for="c in activeChannels()"
v-bind:key="c.ID">
<a :href="'#'+c.ID"
@click.prevent="setChannel(c)"
:class="{'is-active': c.ID == channel}">
[[c.Name]]
<span v-if="hasUnread(c.ID)"
class="tag is-danger">
[[hasUnread(c.ID)]]
</span>
</a>
</li>
Progress on Chat Server * Reworked full screen CSS layout for the chat.html, still using Bulma components with some custom CSS Grid. * Duplicate username handling: server can push a new username to change the client's selection. * Who List sync between clients. * Local video casting works so far - plays back your camera in the local feed. Your video broadcasting boolean is synced to backend, which lights up the video button in the Who List.
2023-01-27 04:34:58 +00:00
</ul>
<p class="menu-label">
Private Messages
</p>
<ul class="menu-list">
Spit and polish * Add configuration system and default public channels support * Add support for multiple channels and DM threads with users, with unread badge indicators. DMs rearrange themselves by most recently updated on top. * Responsive CSS to work well on mobile devices.
2023-02-05 08:53:50 +00:00
<li v-for="c in activeDMs()"
v-bind:key="c.channel">
<a :href="'#'+c.channel"
@click.prevent="setChannel(c.channel)"
:class="{'is-active': c.channel == channel}">
[[c.name]]
<span v-if="hasUnread(c.channel)"
class="tag is-danger">
[[hasUnread(c.channel)]]
</span>
</a>
</li>
Progress on Chat Server * Reworked full screen CSS layout for the chat.html, still using Bulma components with some custom CSS Grid. * Duplicate username handling: server can push a new username to change the client's selection. * Who List sync between clients. * Local video casting works so far - plays back your camera in the local feed. Your video broadcasting boolean is synced to backend, which lights up the video button in the Who List.
2023-01-27 04:34:58 +00:00
</ul>
</aside>
Initial commit
2023-01-11 06:38:48 +00:00
</div>
</div>
Progress on Chat Server * Reworked full screen CSS layout for the chat.html, still using Bulma components with some custom CSS Grid. * Duplicate username handling: server can push a new username to change the client's selection. * Who List sync between clients. * Local video casting works so far - plays back your camera in the local feed. Your video broadcasting boolean is synced to backend, which lights up the video button in the Who List.
2023-01-27 04:34:58 +00:00
</div>
Initial commit
2023-01-11 06:38:48 +00:00
Volume Controls, Mute/Unmute Video * Added a top panel to put your video controls in. * Broadcaster can mute or unmute their own audio input. * When viewing others' cams, buttons appear to control their video: * Their username is displayed in the corner. * Mute/unmute button to silence their audio. * "X" button to close their camera. * Button to show what viewers are currently watching your camera. * Add an "About" page and config for app branding. * Add dark theme CSS for prefers-dark browsers.
2023-02-06 04:26:00 +00:00
<!-- Middle Column: Chat Room/History -->
Progress on Chat Server * Reworked full screen CSS layout for the chat.html, still using Bulma components with some custom CSS Grid. * Duplicate username handling: server can push a new username to change the client's selection. * Who List sync between clients. * Local video casting works so far - plays back your camera in the local feed. Your video broadcasting boolean is synced to backend, which lights up the video button in the Who List.
2023-01-27 04:34:58 +00:00
<div class="chat-column">
<div class="card grid-card">
<header class="card-header has-background-link">
Spit and polish * Add configuration system and default public channels support * Add support for multiple channels and DM threads with users, with unread badge indicators. DMs rearrange themselves by most recently updated on top. * Responsive CSS to work well on mobile devices.
2023-02-05 08:53:50 +00:00
<div class="columns is-mobile card-header-title has-text-light">
JWT Token-based Authentication * Add support for JWT tokens to authenticate users from your external app. * JWT backed users can have profile pictures, profile URLs, and operator status (admin). Note that no operator features exist yet. * Add WelcomeMessages to settings.toml for default ChatServer messages to write to each public channel directed at a new user logging in. * Markdown support for chat messages!
2023-02-06 01:42:09 +00:00
<div class="column is-narrow mobile-only pr-0">
Spit and polish * Add configuration system and default public channels support * Add support for multiple channels and DM threads with users, with unread badge indicators. DMs rearrange themselves by most recently updated on top. * Responsive CSS to work well on mobile devices.
2023-02-05 08:53:50 +00:00
<!-- Responsive mobile button to pan to Left Column -->
<button type="button"
class="button is-success"
JWT Token-based Authentication * Add support for JWT tokens to authenticate users from your external app. * JWT backed users can have profile pictures, profile URLs, and operator status (admin). Note that no operator features exist yet. * Add WelcomeMessages to settings.toml for default ChatServer messages to write to each public channel directed at a new user logging in. * Markdown support for chat messages!
2023-02-06 01:42:09 +00:00
:class="{'is-small': isDM}"
Spit and polish * Add configuration system and default public channels support * Add support for multiple channels and DM threads with users, with unread badge indicators. DMs rearrange themselves by most recently updated on top. * Responsive CSS to work well on mobile devices.
2023-02-05 08:53:50 +00:00
@click="openChannelsPanel">
JWT Token-based Authentication * Add support for JWT tokens to authenticate users from your external app. * JWT backed users can have profile pictures, profile URLs, and operator status (admin). Note that no operator features exist yet. * Add WelcomeMessages to settings.toml for default ChatServer messages to write to each public channel directed at a new user logging in. * Markdown support for chat messages!
2023-02-06 01:42:09 +00:00
<i v-if="isDM" class="fa fa-arrow-left"></i>
<i v-else class="fa fa-message"></i>
Spit and polish * Add configuration system and default public channels support * Add support for multiple channels and DM threads with users, with unread badge indicators. DMs rearrange themselves by most recently updated on top. * Responsive CSS to work well on mobile devices.
2023-02-05 08:53:50 +00:00
</button>
</div>
JWT Token-based Authentication * Add support for JWT tokens to authenticate users from your external app. * JWT backed users can have profile pictures, profile URLs, and operator status (admin). Note that no operator features exist yet. * Add WelcomeMessages to settings.toml for default ChatServer messages to write to each public channel directed at a new user logging in. * Markdown support for chat messages!
2023-02-06 01:42:09 +00:00
<div class="column">
[[channelName]]
</div>
Spit and polish * Add configuration system and default public channels support * Add support for multiple channels and DM threads with users, with unread badge indicators. DMs rearrange themselves by most recently updated on top. * Responsive CSS to work well on mobile devices.
2023-02-05 08:53:50 +00:00
<div class="column is-narrow">
JWT Token-based Authentication * Add support for JWT tokens to authenticate users from your external app. * JWT backed users can have profile pictures, profile URLs, and operator status (admin). Note that no operator features exist yet. * Add WelcomeMessages to settings.toml for default ChatServer messages to write to each public channel directed at a new user logging in. * Markdown support for chat messages!
2023-02-06 01:42:09 +00:00
<!-- If a DM thread and the user has a profile URL -->
<button type="button"
v-if="this.channel.indexOf('@') === 0 && profileURLForUsername(this.channel)"
class="button is-small is-outlined is-light mr-1"
@click="openProfile({username: this.channel})">
<i class="fa fa-user"></i>
</button>
Spit and polish * Add configuration system and default public channels support * Add support for multiple channels and DM threads with users, with unread badge indicators. DMs rearrange themselves by most recently updated on top. * Responsive CSS to work well on mobile devices.
2023-02-05 08:53:50 +00:00
<!-- DMs: Leave convo button -->
<button type="button"
v-if="channel.indexOf('@') === 0"
JWT Token-based Authentication * Add support for JWT tokens to authenticate users from your external app. * JWT backed users can have profile pictures, profile URLs, and operator status (admin). Note that no operator features exist yet. * Add WelcomeMessages to settings.toml for default ChatServer messages to write to each public channel directed at a new user logging in. * Markdown support for chat messages!
2023-02-06 01:42:09 +00:00
class="float-right button is-small is-warning is-outlined"
Spit and polish * Add configuration system and default public channels support * Add support for multiple channels and DM threads with users, with unread badge indicators. DMs rearrange themselves by most recently updated on top. * Responsive CSS to work well on mobile devices.
2023-02-05 08:53:50 +00:00
@click="leaveDM()">
<i class="fa fa-trash"></i>
</button>
</div>
JWT Token-based Authentication * Add support for JWT tokens to authenticate users from your external app. * JWT backed users can have profile pictures, profile URLs, and operator status (admin). Note that no operator features exist yet. * Add WelcomeMessages to settings.toml for default ChatServer messages to write to each public channel directed at a new user logging in. * Markdown support for chat messages!
2023-02-06 01:42:09 +00:00
<!-- Who List button, only shown on public channel view -->
<div v-if="!isDM" class="column is-narrow mobile-only">
Spit and polish * Add configuration system and default public channels support * Add support for multiple channels and DM threads with users, with unread badge indicators. DMs rearrange themselves by most recently updated on top. * Responsive CSS to work well on mobile devices.
2023-02-05 08:53:50 +00:00
<!-- Responsive mobile button to pan to Right Column -->
<button type="button"
class="button is-success"
@click="openWhoPanel">
<i class="fa fa-user-group"></i>
</button>
</div>
</div>
Progress on Chat Server * Reworked full screen CSS layout for the chat.html, still using Bulma components with some custom CSS Grid. * Duplicate username handling: server can push a new username to change the client's selection. * Who List sync between clients. * Local video casting works so far - plays back your camera in the local feed. Your video broadcasting boolean is synced to backend, which lights up the video button in the Who List.
2023-01-27 04:34:58 +00:00
</header>
Spit and polish * 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="video-feeds" v-show="webcam.active || Object.keys(WebRTC.streams).length > 0">
Volume Controls, Mute/Unmute Video * Added a top panel to put your video controls in. * Broadcaster can mute or unmute their own audio input. * When viewing others' cams, buttons appear to control their video: * Their username is displayed in the corner. * Mute/unmute button to silence their audio. * "X" button to close their camera. * Button to show what viewers are currently watching your camera. * Add an "About" page and config for app branding. * Add dark theme CSS for prefers-dark browsers.
2023-02-06 04:26:00 +00:00
<!-- Video Feeds-->
<!-- My video -->
Progress on Chat Server * Reworked full screen CSS layout for the chat.html, still using Bulma components with some custom CSS Grid. * Duplicate username handling: server can push a new username to change the client's selection. * Who List sync between clients. * Local video casting works so far - plays back your camera in the local feed. Your video broadcasting boolean is synced to backend, which lights up the video button in the Who List.
2023-01-27 04:34:58 +00:00
<video class="feed"
v-show="webcam.active"
id="localVideo"
autoplay muted>
Camera connectivity established! * Two users can activate their cameras locally and then connect them together with WebRTC with video and audio support working! * Limitation: users need to be broadcasting video themselves before they can connect to someone's camera. If the offerer doesn't add tracks of their own, the SDP offer doesn't request video channels; so even though the answerer adds their tracks to the connection, they aren't used by the offerer. * As currently implemented, the offerer's camera feed will also appear on screen for the answerer - every video connection opens the feed both ways. Compared to the previous commit (where clients shared SDP messages but not ICE candidates or anything further) the fixes and learnings were: * The back-end was trying to relay candidate messages, but there was a JSON marshalling error (json object casted into a string) - changed the Message type to map[string]interface{} and both sides could exchange ICE candidates. * Both sides needed to add their video tracks to the connection so that there was anything of value to be sent over the WebRTC channel. Other changes: * Server will send a ping message every minute to connected WebSockets.
2023-02-05 05:00:01 +00:00
</video>
Volume Controls, Mute/Unmute Video * Added a top panel to put your video controls in. * Broadcaster can mute or unmute their own audio input. * When viewing others' cams, buttons appear to control their video: * Their username is displayed in the corner. * Mute/unmute button to silence their audio. * "X" button to close their camera. * Button to show what viewers are currently watching your camera. * Add an "About" page and config for app branding. * Add dark theme CSS for prefers-dark browsers.
2023-02-06 04:26:00 +00:00
<!-- Others' videos -->
<div class="feed" v-for="(stream, username) in WebRTC.streams" v-bind:key="username">
<video class="feed"
:id="'videofeed-'+username"
autoplay>
</video>
<div class="caption">
[[username]]
</div>
<div class="close">
<a href="#"
class="has-text-danger"
title="Close video"
@click="closeVideo(username)">
<i class="fa fa-close"></i>
</a>
</div>
<div class="controls">
<button type="button"
v-if="isMuted(username)"
class="button is-small is-danger is-outlined p-1"
title="Unmute this video"
@click="muteVideo(username)">
<i class="fa fa-volume-xmark"></i>
</button>
<button type="button"
v-else
class="button is-small is-danger is-outlined p-1"
title="Mute this video"
@click="muteVideo(username)">
<i class="fa fa-volume-high"></i>
</button>
</div>
</div>
Progress on Chat Server * Reworked full screen CSS layout for the chat.html, still using Bulma components with some custom CSS Grid. * Duplicate username handling: server can push a new username to change the client's selection. * Who List sync between clients. * Local video casting works so far - plays back your camera in the local feed. Your video broadcasting boolean is synced to backend, which lights up the video button in the Who List.
2023-01-27 04:34:58 +00:00
</div>
<div class="card-content" id="chatHistory">
JWT Token-based Authentication * Add support for JWT tokens to authenticate users from your external app. * JWT backed users can have profile pictures, profile URLs, and operator status (admin). Note that no operator features exist yet. * Add WelcomeMessages to settings.toml for default ChatServer messages to write to each public channel directed at a new user logging in. * Markdown support for chat messages!
2023-02-06 01:42:09 +00:00
<!-- No history? -->
<div v-if="chatHistory.length === 0">
<em v-if="isDM">
Starting a direct message chat with [[channel]]. Type a message and say hello!
</em>
<em v-else>
There are no messages in this channel yet.
</em>
</div>
<div v-for="(msg, i) in chatHistory" v-bind:key="i" class="mb-2">
<div class="media mb-0">
<div class="media-left">
<a :href="profileURLForUsername(msg.username)" @click.prevent="openProfile({username: msg.username})"
:class="{'cursor-default': !profileURLForUsername(msg.username)}">
<figure class="image is-24x24">
<img v-if="msg.isChatServer"
src="/static/img/server.png">
<img v-else-if="msg.isChatClient"
src="/static/img/client.png">
<img v-else-if="avatarForUsername(msg.username)"
:src="avatarForUsername(msg.username)">
<img v-else src="/static/img/shy.png">
</figure>
</a>
</div>
<div class="media-content">
<div class="columns is-mobile">
<div class="column">
<label class="label"
:class="{'has-text-success is-dark': msg.isChatServer,
'has-text-warning is-dark': msg.isAdmin,
'has-text-danger': msg.isChatClient}">
[[msg.username]]
</label>
</div>
<div class="column is-narrow"
v-if="!(msg.isChatServer || msg.isChatClient || msg.username === username)">
<button type="button"
class="button is-dark is-outlined is-small"
@click="openDMs({username: msg.username})">
<i class="fa fa-message"></i>
</button>
</div>
</div>
</div>
Progress on Chat Server * Reworked full screen CSS layout for the chat.html, still using Bulma components with some custom CSS Grid. * Duplicate username handling: server can push a new username to change the client's selection. * Who List sync between clients. * Local video casting works so far - plays back your camera in the local feed. Your video broadcasting boolean is synced to backend, which lights up the video button in the Who List.
2023-01-27 04:34:58 +00:00
</div>
Initial commit
2023-01-11 06:38:48 +00:00
Progress on Chat Server * Reworked full screen CSS layout for the chat.html, still using Bulma components with some custom CSS Grid. * Duplicate username handling: server can push a new username to change the client's selection. * Who List sync between clients. * Local video casting works so far - plays back your camera in the local feed. Your video broadcasting boolean is synced to backend, which lights up the video button in the Who List.
2023-01-27 04:34:58 +00:00
<div v-if="msg.action === 'presence'">
<em>[[msg.message]]</em>
</div>
JWT Token-based Authentication * Add support for JWT tokens to authenticate users from your external app. * JWT backed users can have profile pictures, profile URLs, and operator status (admin). Note that no operator features exist yet. * Add WelcomeMessages to settings.toml for default ChatServer messages to write to each public channel directed at a new user logging in. * Markdown support for chat messages!
2023-02-06 01:42:09 +00:00
<div v-else class="content">
<div v-html="msg.message"></div>
Initial commit
2023-01-11 06:38:48 +00:00
</div>
Spit and polish * Add configuration system and default public channels support * Add support for multiple channels and DM threads with users, with unread badge indicators. DMs rearrange themselves by most recently updated on top. * Responsive CSS to work well on mobile devices.
2023-02-05 08:53:50 +00:00
Initial commit
2023-01-11 06:38:48 +00:00
</div>
Progress on Chat Server * Reworked full screen CSS layout for the chat.html, still using Bulma components with some custom CSS Grid. * Duplicate username handling: server can push a new username to change the client's selection. * Who List sync between clients. * Local video casting works so far - plays back your camera in the local feed. Your video broadcasting boolean is synced to backend, which lights up the video button in the Who List.
2023-01-27 04:34:58 +00:00
Initial commit
2023-01-11 06:38:48 +00:00
</div>
Progress on Chat Server * Reworked full screen CSS layout for the chat.html, still using Bulma components with some custom CSS Grid. * Duplicate username handling: server can push a new username to change the client's selection. * Who List sync between clients. * Local video casting works so far - plays back your camera in the local feed. Your video broadcasting boolean is synced to backend, which lights up the video button in the Who List.
2023-01-27 04:34:58 +00:00
</div>
</div>
<div class="chat-footer">
<div class="card">
<div class="card-content p-2">
<div class="columns">
<div class="column">
<form @submit.prevent="sendMessage()">
<input type="text" class="input"
v-model="message"
placeholder="Message">
</form>
</div>
<div class="column is-narrow">
</div>
</div>
Initial commit
2023-01-11 06:38:48 +00:00
Progress on Chat Server * Reworked full screen CSS layout for the chat.html, still using Bulma components with some custom CSS Grid. * Duplicate username handling: server can push a new username to change the client's selection. * Who List sync between clients. * Local video casting works so far - plays back your camera in the local feed. Your video broadcasting boolean is synced to backend, which lights up the video button in the Who List.
2023-01-27 04:34:58 +00:00
</div>
</div>
</div>
Initial commit
2023-01-11 06:38:48 +00:00
Spit and polish * Add configuration system and default public channels support * Add support for multiple channels and DM threads with users, with unread badge indicators. DMs rearrange themselves by most recently updated on top. * Responsive CSS to work well on mobile devices.
2023-02-05 08:53:50 +00:00
<!-- Right Column: Who Is Online -->
Progress on Chat Server * Reworked full screen CSS layout for the chat.html, still using Bulma components with some custom CSS Grid. * Duplicate username handling: server can push a new username to change the client's selection. * Who List sync between clients. * Local video casting works so far - plays back your camera in the local feed. Your video broadcasting boolean is synced to backend, which lights up the video button in the Who List.
2023-01-27 04:34:58 +00:00
<div class="right-column">
<div class="card grid-card">
<header class="card-header has-background-success-dark">
Spit and polish * Add configuration system and default public channels support * Add support for multiple channels and DM threads with users, with unread badge indicators. DMs rearrange themselves by most recently updated on top. * Responsive CSS to work well on mobile devices.
2023-02-05 08:53:50 +00:00
<div class="columns is-mobile card-header-title has-text-light">
<div class="column">Who Is Online</div>
<div class="column is-narrow mobile-only">
<button type="button"
class="button is-success"
@click="openChatPanel">
<i class="fa fa-arrow-left"></i>
</button>
</div>
</div>
Progress on Chat Server * Reworked full screen CSS layout for the chat.html, still using Bulma components with some custom CSS Grid. * Duplicate username handling: server can push a new username to change the client's selection. * Who List sync between clients. * Local video casting works so far - plays back your camera in the local feed. Your video broadcasting boolean is synced to backend, which lights up the video button in the Who List.
2023-01-27 04:34:58 +00:00
</header>
<div class="card-content p-2">
<ul class="menu-list">
<li v-for="(u, i) in whoList" v-bind:key="i">
<div class="columns is-mobile">
JWT Token-based Authentication * Add support for JWT tokens to authenticate users from your external app. * JWT backed users can have profile pictures, profile URLs, and operator status (admin). Note that no operator features exist yet. * Add WelcomeMessages to settings.toml for default ChatServer messages to write to each public channel directed at a new user logging in. * Markdown support for chat messages!
2023-02-06 01:42:09 +00:00
<!-- Avatar URL if available -->
<div class="column is-narrow pr-0"
v-if="u.avatar">
<img :src="avatarURL(u)"
width="24" height="24"
:alt="'Avatar image for ' + u.username">
</div>
<div class="column pr-0"
:class="{'pl-1': u.avatar}">
<i class="fa fa-gavel has-text-warning-dark"
v-if="u.op"
title="Operator"></i>
[[ u.username ]]
</div>
<div class="column is-narrow pl-0">
<!-- Profile button -->
<button type="button"
v-if="u.profileURL"
class="button is-small px-2 py-1"
@click="openProfile(u)"
title="Open profile page">
<i class="fa fa-user"></i>
</button>
<!-- DM button -->
Spit and polish * Add configuration system and default public channels support * Add support for multiple channels and DM threads with users, with unread badge indicators. DMs rearrange themselves by most recently updated on top. * Responsive CSS to work well on mobile devices.
2023-02-05 08:53:50 +00:00
<button type="button"
class="button is-small px-2 py-1"
@click="openDMs(u)"
JWT Token-based Authentication * Add support for JWT tokens to authenticate users from your external app. * JWT backed users can have profile pictures, profile URLs, and operator status (admin). Note that no operator features exist yet. * Add WelcomeMessages to settings.toml for default ChatServer messages to write to each public channel directed at a new user logging in. * Markdown support for chat messages!
2023-02-06 01:42:09 +00:00
title="Start direct message thread"
Spit and polish * Add configuration system and default public channels support * Add support for multiple channels and DM threads with users, with unread badge indicators. DMs rearrange themselves by most recently updated on top. * Responsive CSS to work well on mobile devices.
2023-02-05 08:53:50 +00:00
:disabled="u.username === username">
<i class="fa fa-message"></i>
</button>
JWT Token-based Authentication * Add support for JWT tokens to authenticate users from your external app. * JWT backed users can have profile pictures, profile URLs, and operator status (admin). Note that no operator features exist yet. * Add WelcomeMessages to settings.toml for default ChatServer messages to write to each public channel directed at a new user logging in. * Markdown support for chat messages!
2023-02-06 01:42:09 +00:00
<!-- Video button -->
<button type="button" class="button is-small px-2 py-1"
Initial WebRTC Code * WebRTC pees exchange local/remote descriptions ("offer" and "answer") * They don't seem to exchange ICE candidates yet * Some back and forth happens but the final WebRTC stream connection isn't established yet.
2023-01-27 06:54:02 +00:00
:disabled="!u.videoActive"
JWT Token-based Authentication * Add support for JWT tokens to authenticate users from your external app. * JWT backed users can have profile pictures, profile URLs, and operator status (admin). Note that no operator features exist yet. * Add WelcomeMessages to settings.toml for default ChatServer messages to write to each public channel directed at a new user logging in. * Markdown support for chat messages!
2023-02-06 01:42:09 +00:00
title="Open video stream"
Initial WebRTC Code * WebRTC pees exchange local/remote descriptions ("offer" and "answer") * They don't seem to exchange ICE candidates yet * Some back and forth happens but the final WebRTC stream connection isn't established yet.
2023-01-27 06:54:02 +00:00
@click="openVideo(u)">
Progress on Chat Server * Reworked full screen CSS layout for the chat.html, still using Bulma components with some custom CSS Grid. * Duplicate username handling: server can push a new username to change the client's selection. * Who List sync between clients. * Local video casting works so far - plays back your camera in the local feed. Your video broadcasting boolean is synced to backend, which lights up the video button in the Who List.
2023-01-27 04:34:58 +00:00
<i class="fa fa-video"></i>
</button>
</div>
</div>
</li>
</ul>
Initial commit
2023-01-11 06:38:48 +00:00
</div>
</div>
</div>
</div>
</div><!-- /app -->
Spit and polish * Add configuration system and default public channels support * Add support for multiple channels and DM threads with users, with unread badge indicators. DMs rearrange themselves by most recently updated on top. * Responsive CSS to work well on mobile devices.
2023-02-05 08:53:50 +00:00
<script type="text/javascript">
const PublicChannels = {{.Config.GetChannels}};
JWT Token-based Authentication * Add support for JWT tokens to authenticate users from your external app. * JWT backed users can have profile pictures, profile URLs, and operator status (admin). Note that no operator features exist yet. * Add WelcomeMessages to settings.toml for default ChatServer messages to write to each public channel directed at a new user logging in. * Markdown support for chat messages!
2023-02-06 01:42:09 +00:00
const WebsiteURL = "{{.Config.WebsiteURL}}";
const UserJWTToken = {{.JWTTokenString}};
const UserJWTValid = {{if .JWTAuthOK}}true{{else}}false{{end}};
const UserJWTClaims = {{.JWTClaims.ToJSON}};
Spit and polish * Add configuration system and default public channels support * Add support for multiple channels and DM threads with users, with unread badge indicators. DMs rearrange themselves by most recently updated on top. * Responsive CSS to work well on mobile devices.
2023-02-05 08:53:50 +00:00
</script>
Initial commit
2023-01-11 06:38:48 +00:00
<script src="/static/js/vue-3.2.45.js"></script>
Spit and polish * Add configuration system and default public channels support * Add support for multiple channels and DM threads with users, with unread badge indicators. DMs rearrange themselves by most recently updated on top. * Responsive CSS to work well on mobile devices.
2023-02-05 08:53:50 +00:00
<script src="/static/js/BareRTC.js?{{.CacheHash}}"></script>
Initial commit
2023-01-11 06:38:48 +00:00
</body>
</html>
{{end}}
Reference in New Issue Copy Permalink