refactor: talk => chat
This commit is contained in:
parent
b6b4fefa34
commit
525568d368
8 changed files with 1675 additions and 83 deletions
390
public/tabs/chat/chat.css
Normal file
390
public/tabs/chat/chat.css
Normal file
|
|
@ -0,0 +1,390 @@
|
|||
#chat .tab-content {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
}
|
||||
|
||||
.room-list {
|
||||
margin: 1rem 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.room-list > li.room a:before {
|
||||
position: absolute;
|
||||
left: -1.75rem;
|
||||
top: 0;
|
||||
font-weight: bold;
|
||||
font-size: x-large;
|
||||
content: "#";
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.room-list > li.room a {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
min-height: 1.5rem;
|
||||
line-height: 1.5rem;
|
||||
font-weight: bold;
|
||||
font-size: large;
|
||||
margin-left: 1.75rem;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.room-list > li.room.active a {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
#chat .sidebar {
|
||||
position: relative;
|
||||
width: min-content;
|
||||
min-width: 10rem;
|
||||
max-width: 32rem;
|
||||
overflow-x: scroll;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
#chat .sidebar #sidebar-toggle,
|
||||
#chat .sidebar #sidebar-toggle-icon {
|
||||
opacity: 0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#chat .sidebar .title {
|
||||
text-transform: uppercase;
|
||||
font-size: small;
|
||||
font-weight: bold;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
#chat #room-chat-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#chat #room-chat-content {
|
||||
overflow-y: scroll;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 5rem;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
#chat #room-chat-entry-container {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 5rem;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
#chat #room-chat-entry-container form {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
#chat #room-chat-entry-container form input[type="file"] {
|
||||
opacity: 0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#chat #room-chat-entry-container form button,
|
||||
#chat #room-chat-entry-container form label {
|
||||
position: relative;
|
||||
top: inherit;
|
||||
font-size: inherit;
|
||||
transition: inherit;
|
||||
width: 50px;
|
||||
padding: inherit;
|
||||
margin: 0 1rem;
|
||||
cursor: pointer;
|
||||
align-content: center;
|
||||
border-radius: var(--border-radius);
|
||||
border: 1px solid var(--text);
|
||||
}
|
||||
|
||||
#chat #room-chat-entry-container form textarea {
|
||||
width: 100%;
|
||||
flex-grow: 1;
|
||||
background: inherit;
|
||||
color: inherit;
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
#chat .message-container {
|
||||
position: relative;
|
||||
transition: all 0.33s;
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
margin-top: 0.75rem;
|
||||
padding: 2px;
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
#chat .message-container.user-tick.time-tick + .message-container.user-tick.time-tick,
|
||||
#chat .message-container.user-tick.time-tock + .message-container.user-tick.time-tock,
|
||||
#chat .message-container.user-tock.time-tick + .message-container.user-tock.time-tick,
|
||||
#chat .message-container.user-tock.time-tock + .message-container.user-tock.time-tock {
|
||||
margin-top: 0;
|
||||
padding: 0 2px;
|
||||
}
|
||||
|
||||
#chat
|
||||
.message-container.user-tick.time-tick
|
||||
+ .message-container.user-tick.time-tick
|
||||
.info-container,
|
||||
#chat
|
||||
.message-container.user-tick.time-tock
|
||||
+ .message-container.user-tick.time-tock
|
||||
.info-container,
|
||||
#chat
|
||||
.message-container.user-tock.time-tick
|
||||
+ .message-container.user-tock.time-tick
|
||||
.info-container,
|
||||
#chat
|
||||
.message-container.user-tock.time-tock
|
||||
+ .message-container.user-tock.time-tock
|
||||
.info-container {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
height: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#chat .message-container.sending {
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
#chat .message-container .message-actions-container {
|
||||
position: absolute;
|
||||
top: 0.5rem;
|
||||
right: 0.5rem;
|
||||
display: none; /* flex; */
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
#chat .message-container .message-actions-container .message-action {
|
||||
opacity: 0;
|
||||
transition: 0.2s ease-in-out;
|
||||
width: 0;
|
||||
height: 4rem;
|
||||
overflow: hidden;
|
||||
order: -1;
|
||||
cursor: pointer;
|
||||
margin-right: 1.25rem;
|
||||
padding-top: 0.25rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#chat .message-container .message-actions-container label {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#chat .message-container .message-actions-container input[type="checkbox"] {
|
||||
opacity: 0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#chat
|
||||
.message-container
|
||||
.message-actions-container
|
||||
input[type="checkbox"]:checked
|
||||
~ .message-action {
|
||||
opacity: 1;
|
||||
width: 4rem;
|
||||
}
|
||||
|
||||
#chat .message-container .message-actions-container .message-action .action-name {
|
||||
font-size: x-small;
|
||||
}
|
||||
|
||||
#chat .message-container .info-container {
|
||||
display: flex;
|
||||
margin-bottom: -1.75rem;
|
||||
height: 3.75rem;
|
||||
}
|
||||
|
||||
#chat .message-container .info-container .avatar-container {
|
||||
display: inline-block;
|
||||
margin: 0 4px;
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
border-radius: 16%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#chat .message-container .info-container .avatar-container img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#chat .message-container .info-container .username-container {
|
||||
margin: 0 4px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#chat .message-container .info-container .datetime-container {
|
||||
margin: 0 4px;
|
||||
}
|
||||
|
||||
#chat .message-container .info-container .datetime-container .long {
|
||||
font-size: x-small;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
#chat .message-container .info-container .datetime-container .short {
|
||||
font-size: xx-small;
|
||||
visibility: hidden;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#chat .message-container .message-content-container {
|
||||
padding-left: 8rem;
|
||||
}
|
||||
|
||||
#chat .embed-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 640px;
|
||||
}
|
||||
|
||||
#chat .embed-container .embed-actions-container {
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
top: 0.25rem;
|
||||
right: 0.25rem;
|
||||
height: 2rem;
|
||||
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
#chat .embed-container audio {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#chat .embed-container.rounded {
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
#chat .embed-container.short {
|
||||
height: 120px;
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
#chat .embed-container.tidal {
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
#chat .embed-container.vertical {
|
||||
max-width: 320px;
|
||||
overflow: hidden;
|
||||
aspect-ratio: 9 / 16 !important;
|
||||
}
|
||||
|
||||
#chat .embed-container.letterbox {
|
||||
/* height: 0; */
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
/* padding-bottom: 33%; */
|
||||
aspect-ratio: 16 / 9 !important;
|
||||
}
|
||||
|
||||
#chat .embed-container.square {
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
aspect-ratio: 1 / 1 !important;
|
||||
}
|
||||
|
||||
#chat .embed-container iframe,
|
||||
#chat .embed-container video {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
#chat .sidebar {
|
||||
z-index: 100;
|
||||
background: var(--bg);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
left: -100%;
|
||||
overflow-y: scroll;
|
||||
overflow: visible;
|
||||
transition: all ease-in-out 0.33s;
|
||||
}
|
||||
|
||||
#chat .sidebar #sidebar-toggle-icon {
|
||||
opacity: 1;
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
right: -2.5rem;
|
||||
cursor: pointer;
|
||||
transition: all ease-in-out 0.33s;
|
||||
background: rgba(128, 128, 128, 0.5);
|
||||
border-radius: 0 1rem 1rem 0;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
#chat .sidebar .icon {
|
||||
transition: all ease-in-out 0.33s;
|
||||
}
|
||||
|
||||
#chat .sidebar:has(#sidebar-toggle:checked) {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#chat .sidebar:has(#sidebar-toggle:checked) #sidebar-toggle-icon {
|
||||
right: 0;
|
||||
rotate: 180deg;
|
||||
}
|
||||
|
||||
#chat #room-chat-container {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
#chat #room-chat-container #room-chat-entry-container,
|
||||
#chat #room-chat-container #room-chat-entry-container form {
|
||||
padding: 0.25rem;
|
||||
}
|
||||
|
||||
#chat #room-chat-container #room-chat-entry-container form button,
|
||||
#chat #room-chat-container #room-chat-entry-container form label {
|
||||
margin: 0 0.5rem;
|
||||
}
|
||||
|
||||
#chat .message-container .message-content-container {
|
||||
padding-left: 4rem;
|
||||
}
|
||||
|
||||
#chat .message-container .info-container .datetime-container .long {
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
#chat .message-container .info-container .datetime-container .short {
|
||||
display: inline-block;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
226
public/tabs/chat/chat.html
Normal file
226
public/tabs/chat/chat.html
Normal file
|
|
@ -0,0 +1,226 @@
|
|||
<div id="chat" class="tab">
|
||||
<input
|
||||
type="radio"
|
||||
name="top-level-tabs"
|
||||
id="chat-tab-input"
|
||||
class="tab-switch"
|
||||
data-hash="/chat"
|
||||
/>
|
||||
<label for="chat-tab-input" class="tab-label"
|
||||
><div class="icon chat"></div>
|
||||
<div class="label">Chat</div>
|
||||
</label>
|
||||
<div class="tab-content">
|
||||
<style>
|
||||
<!-- #include file="./chat.css" -->
|
||||
</style>
|
||||
<script src="/js/external/mimetypes.js" type="text/javascript"></script>
|
||||
<script src="/js/external/punycode.js" type="text/javascript"></script>
|
||||
<script src="/tabs/chat/chat.js" type="text/javascript"></script>
|
||||
<div class="sidebar resizable">
|
||||
<input type="checkbox" id="sidebar-toggle" />
|
||||
<label id="sidebar-toggle-icon" for="sidebar-toggle">
|
||||
<div class="icon right"></div>
|
||||
</label>
|
||||
<div id="room-creation-container" data-requires-permission="rooms.create">
|
||||
<button
|
||||
id="toggle-room-creation-form-button"
|
||||
onclick="((event) => {
|
||||
event.preventDefault();
|
||||
const room_create_form = document.getElementById( 'room-create' );
|
||||
room_create_form.style[ 'height' ] = room_create_form.style[ 'height' ] === '5rem' ? '0' : '5rem';
|
||||
})(event)"
|
||||
>
|
||||
<div class="icon plus"></div>
|
||||
</button>
|
||||
<form
|
||||
id="room-create"
|
||||
data-smart="true"
|
||||
action="/api/rooms"
|
||||
method="POST"
|
||||
style="
|
||||
margin-top: 1rem;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
transition: all 0.5s;
|
||||
"
|
||||
>
|
||||
<input
|
||||
id="new-room-name-input"
|
||||
type="text"
|
||||
name="name"
|
||||
value=""
|
||||
placeholder="new room"
|
||||
/>
|
||||
<!-- <button class="primary" type="submit">
|
||||
<div class="icon plus"></div>
|
||||
</button> -->
|
||||
<input type="submit" hidden />
|
||||
<script>
|
||||
{
|
||||
const form = document.currentScript.closest("form");
|
||||
const room_create_form = document.getElementById("room-create");
|
||||
const new_room_name_input =
|
||||
document.getElementById("new-room-name-input");
|
||||
|
||||
form.on_reply = (new_room) => {
|
||||
const room_list = document.getElementById("room-list");
|
||||
room_list.insertAdjacentHTML(
|
||||
"beforeend",
|
||||
`<li id="room-selector-${new_room.id}" class="room"><a href="#/room/${new_room.id}">${new_room.name}</a></li>`,
|
||||
);
|
||||
|
||||
new_room_name_input.value = "";
|
||||
window.location.hash = `/chat/room/${new_room.id}`;
|
||||
room_create_form.style["height"] = "0";
|
||||
};
|
||||
}
|
||||
</script>
|
||||
</form>
|
||||
</div>
|
||||
<div>
|
||||
<span class="title">chat rooms</span>
|
||||
</div>
|
||||
<ul id="room-list" class="room-list"></ul>
|
||||
</div>
|
||||
<div id="room-chat-container">
|
||||
<div id="room-chat-content"></div>
|
||||
<div id="room-chat-entry-container">
|
||||
<form id="room-chat-entry" action="" data-smart="true" data-method="POST">
|
||||
<input
|
||||
id="file-upload-and-share-input"
|
||||
aria-label="Upload and share file"
|
||||
type="file"
|
||||
name="file-upload-and-share"
|
||||
multiple
|
||||
/>
|
||||
<label for="file-upload-and-share-input">
|
||||
<div class="icon attachment"></div>
|
||||
</label>
|
||||
<textarea
|
||||
id="room-chat-input"
|
||||
class="room-chat-input"
|
||||
rows="1"
|
||||
name="data.message"
|
||||
></textarea>
|
||||
<button id="room-chat-send" class="primary" aria-label="Send a message">
|
||||
<i class="icon send"></i>
|
||||
</button>
|
||||
<script>
|
||||
{
|
||||
const form = document.currentScript.closest("form");
|
||||
const file_input = document.querySelector(
|
||||
'input[name="file-upload-and-share"]',
|
||||
);
|
||||
const chat_input = document.getElementById("room-chat-input");
|
||||
const room_chat_container =
|
||||
document.getElementById("room-chat-container");
|
||||
const room_chat_content = document.getElementById("room-chat-content");
|
||||
|
||||
let messages_in_flight = {};
|
||||
|
||||
chat_input.addEventListener("keypress", (event) => {
|
||||
if (event.key === "Enter" && !event.shiftKey) {
|
||||
form.requestSubmit();
|
||||
}
|
||||
});
|
||||
|
||||
form.on_submit = async (event) => {
|
||||
const user = JSON.parse(document.body.dataset.user);
|
||||
const room_id = room_chat_container.dataset.room_id;
|
||||
if (!room_id) {
|
||||
alert("Failed to get room_id!");
|
||||
return false;
|
||||
}
|
||||
|
||||
form.uploaded_urls = [];
|
||||
form.errors = [];
|
||||
for await (const file of file_input.files) {
|
||||
const body = new FormData();
|
||||
body.append("file", file, encodeURIComponent(file.name));
|
||||
|
||||
const file_path = `/files/users/${user.id}/${encodeURIComponent(file.name)}`;
|
||||
|
||||
const file_upload_response = await api.fetch(file_path, {
|
||||
method: "PUT",
|
||||
body,
|
||||
});
|
||||
|
||||
if (!file_upload_response.ok) {
|
||||
const error = await file_upload_response.json();
|
||||
form.errors.push(error?.error?.message ?? "Unknown error.");
|
||||
continue;
|
||||
}
|
||||
|
||||
const file_url = `${window.location.protocol}//${window.location.host}${file_path}`;
|
||||
form.uploaded_urls.push(file_url);
|
||||
}
|
||||
|
||||
if (form.errors.length) {
|
||||
const errors = form.errors.join("\n\n");
|
||||
alert(errors);
|
||||
return false;
|
||||
}
|
||||
|
||||
const message = chat_input.value.trim();
|
||||
if (form.uploaded_urls.length === 0 && message.length === 0) {
|
||||
return false;
|
||||
}
|
||||
|
||||
form.action = `/api/rooms/${room_id}/events`;
|
||||
};
|
||||
|
||||
form.on_parsed = (json) => {
|
||||
const now = new Date().toISOString();
|
||||
|
||||
const temp_id = `TEMP-${now}`;
|
||||
json.id = temp_id;
|
||||
json.type = "chat";
|
||||
json.meta = {
|
||||
temp_id,
|
||||
};
|
||||
json.timestamps = {
|
||||
created: now,
|
||||
updated: now,
|
||||
};
|
||||
|
||||
if (form.uploaded_urls.length) {
|
||||
json.data = json.data ?? {};
|
||||
json.data.message =
|
||||
(typeof json.data.message === "string" &&
|
||||
json.data.message.trim().length
|
||||
? json.data.message.trim() + "\n"
|
||||
: "") + form.uploaded_urls.join("\n");
|
||||
}
|
||||
|
||||
const user = JSON.parse(document.body.dataset.user);
|
||||
render_text_event(room_chat_content, json, user);
|
||||
document
|
||||
.getElementById(`chat-${temp_id}`)
|
||||
?.classList.add("sending");
|
||||
};
|
||||
|
||||
form.on_error = (error) => {
|
||||
// TODO: mark the temporary message element with the failed class?
|
||||
alert(error);
|
||||
chat_input.focus();
|
||||
};
|
||||
|
||||
form.on_reply = (sent_message) => {
|
||||
document
|
||||
.getElementById(`chat-${sent_message.meta?.temp_id ?? ""}`)
|
||||
?.classList.remove("sending");
|
||||
|
||||
append_room_events([sent_message]);
|
||||
chat_input.value = "";
|
||||
chat_input.focus();
|
||||
};
|
||||
}
|
||||
</script>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
498
public/tabs/chat/chat.js
Normal file
498
public/tabs/chat/chat.js
Normal file
|
|
@ -0,0 +1,498 @@
|
|||
// wow https://stackoverflow.com/questions/3891641/regex-test-only-works-every-other-time
|
||||
// watch out for places we need to set `lastIndex` ... :frown:
|
||||
|
||||
const URL_MATCHING_REGEX =
|
||||
/(?:(?<protocol>[a-zA-Z]+):)?(?:\/\/)?(?:(?<auth>(?<username>\S.+)\:(?<password>.+))\@)?(?<host>(?:(?<hostname>[-a-zA-Z0-9\.]+)\.)?(?<domain>(?:[-a-zA-Z0-9]+?\.(?<tld>[-a-zA-Z0-9]{2,64}))|localhost)(?:\:(?<port>[0-9]{1,6}))?)\b(?<path>[-a-zA-Z0-9@:%_{}\[\]<>\(\)\+.~&\/="]*?(?<extension>\.[^\.?/#"\n<>]+)?)(?:\?(?<query>[a-zA-Z0-9!$%&<>()*+,-\.\/\:\;\=\?\@_~"]+))?(?:#(?<hash>[a-zA-Z0-9!$&'()*+,-\.\/\:\;\=\?\@_~"]*?))?(?:$|\s)/gim;
|
||||
|
||||
const VIDEO_ID_EXTRACTOR =
|
||||
/(?<video_domain>vimeo\.com|youtu(?:be\.com|\.be|be\.googleapis\.com))(?:\/(?<action>video|embed|watch|shorts|v))?.*(?:(?:\/|v=)(?<video_id>[A-Za-z0-9._%-]*))\S*/gi;
|
||||
const SPOTIFY_EXTRACTOR =
|
||||
/^\/(?<item_type>(?:album|artist|episode|playlist|tracks?))\/?(?<item_id>[a-zA-Z0-9]{22})/gi;
|
||||
const TIDAL_EXTRACTOR =
|
||||
/^\/(?:(?<action>.*?)\/)?(?<item_type>(?:album|artist|episode|playlist|tracks?))\/(?<item_id>[0-9]+)/gi;
|
||||
|
||||
const URL_MATCH_HANDLERS = [
|
||||
// Tidal
|
||||
(link_info) => {
|
||||
const is_tidal_link = ["tidal.com", "tidalhi.fi"].includes(link_info.domain?.toLowerCase());
|
||||
|
||||
if (!is_tidal_link) {
|
||||
return;
|
||||
}
|
||||
|
||||
TIDAL_EXTRACTOR.lastIndex = 0;
|
||||
|
||||
const {
|
||||
groups: { action, item_type, item_id },
|
||||
} = TIDAL_EXTRACTOR.exec(link_info.path ?? "") ?? { groups: {} };
|
||||
|
||||
if (!(item_type && item_id)) {
|
||||
return;
|
||||
}
|
||||
|
||||
return `
|
||||
<div class="embed-container iframe ${item_type.toLowerCase().indexOf("track") === 0 ? "short" : "square"} tidal">
|
||||
<div class="embed-actions-container">
|
||||
<button class="icon plus" onclick="console.log(\"close\");"/>
|
||||
<button class="icon pause" onclick="console.log(\"stop\");"/>
|
||||
</div>
|
||||
<iframe
|
||||
src="https://embed.tidal.com/${item_type.at(-1) === "s" ? item_type : `${item_type}s`}/${item_id}"
|
||||
allow="encrypted-media"
|
||||
sandbox="allow-same-origin allow-scripts allow-forms allow-popups"
|
||||
title="TIDAL Embed Player"
|
||||
loading="lazy"
|
||||
></iframe>
|
||||
</div>`;
|
||||
},
|
||||
|
||||
// Spotify
|
||||
(link_info) => {
|
||||
const is_spotify_link = ["spotify.com"].includes(link_info.domain?.toLowerCase());
|
||||
|
||||
if (!is_spotify_link) {
|
||||
return;
|
||||
}
|
||||
|
||||
SPOTIFY_EXTRACTOR.lastIndex = 0;
|
||||
|
||||
const {
|
||||
groups: { item_type, item_id },
|
||||
} = SPOTIFY_EXTRACTOR.exec(link_info.path ?? "") ?? { groups: {} };
|
||||
|
||||
if (!item_id) {
|
||||
return;
|
||||
}
|
||||
|
||||
return `
|
||||
<div class="embed-container iframe ${!item_type || item_type.toLowerCase().indexOf("track") === 0 ? "short" : "square"} spotify rounded">
|
||||
<div class="embed-actions-container">
|
||||
<button class="icon plus" onclick="console.log(\"close\");"/>
|
||||
<button class="icon pause" onclick="console.log(\"stop\");"/>
|
||||
</div>
|
||||
<iframe
|
||||
src="https://open.spotify.com/embed/${item_type ?? "track"}/${item_id}"
|
||||
allowfullscreen
|
||||
allow="clipboard-write; encrypted-media; fullscreen; picture-in-picture"
|
||||
loading="lazy"></iframe>
|
||||
</div>`;
|
||||
},
|
||||
|
||||
// YouTube
|
||||
(link_info) => {
|
||||
const is_youtube_link = ["youtube.com", "youtu.be", "youtube.googleapis.com"].includes(
|
||||
link_info.domain?.toLowerCase(),
|
||||
);
|
||||
|
||||
if (!is_youtube_link) {
|
||||
return;
|
||||
}
|
||||
|
||||
VIDEO_ID_EXTRACTOR.lastIndex = 0;
|
||||
|
||||
const {
|
||||
groups: { video_domain, action, video_id },
|
||||
} = VIDEO_ID_EXTRACTOR.exec(link_info.url) ?? { groups: {} };
|
||||
|
||||
if (!video_id) {
|
||||
return;
|
||||
}
|
||||
|
||||
return `
|
||||
<div class="embed-container iframe ${action === "shorts" ? "vertical" : "letterbox"} youtube">
|
||||
<div class="embed-actions-container">
|
||||
<button class="icon plus" onclick="console.log(\"close\");"/>
|
||||
<button class="icon pause" onclick="console.log(\"stop\");"/>
|
||||
</div>
|
||||
<iframe
|
||||
src="https://www.youtube.com/embed/${video_id}"
|
||||
title="YouTube video player"
|
||||
allow="clipboard-write; encrypted-media; picture-in-picture; web-share;"
|
||||
referrerpolicy="strict-origin-when-cross-origin"
|
||||
allowfullscreen
|
||||
loading="lazy"
|
||||
></iframe>
|
||||
</div>`;
|
||||
},
|
||||
|
||||
// Vimeo
|
||||
(link_info) => {
|
||||
const is_vimeo_link = ["vimeo.com"].includes(link_info.domain?.toLowerCase());
|
||||
|
||||
if (!is_vimeo_link) {
|
||||
return;
|
||||
}
|
||||
|
||||
VIDEO_ID_EXTRACTOR.lastIndex = 0;
|
||||
|
||||
const {
|
||||
groups: { video_domain, action, video_id },
|
||||
} = VIDEO_ID_EXTRACTOR.exec(link_info.url) ?? { groups: {} };
|
||||
|
||||
if (!video_id) {
|
||||
return;
|
||||
}
|
||||
|
||||
return `
|
||||
<div class="embed-container iframe letterbox vimeo">
|
||||
<div class="embed-actions-container">
|
||||
<button class="icon plus" onclick="console.log(\"close\");"/>
|
||||
<button class="icon pause" onclick="console.log(\"stop\");"/>
|
||||
</div>
|
||||
<iframe
|
||||
src="https://player.vimeo.com/video/${video_id}"
|
||||
frameborder="0"
|
||||
allow="fullscreen; picture-in-picture; clipboard-write; encrypted-media; web-share"
|
||||
referrerpolicy="strict-origin-when-cross-origin"
|
||||
title="Star Trek: Legacy"
|
||||
loading="lazy"></iframe>
|
||||
</div>`;
|
||||
},
|
||||
|
||||
// linkify generic url
|
||||
(link_info) => {
|
||||
// TODO: punycoding if something has unicode?
|
||||
// const punycode = get_punycode();
|
||||
// const punycoded_url = punycode.encode(match[0]);
|
||||
|
||||
if (typeof link_info.extension === "string") {
|
||||
const mime_types = get_mime_types(link_info.extension);
|
||||
|
||||
if (mime_types.length) {
|
||||
if (mime_types.includes("image/gif")) {
|
||||
return `<div class="embed-container image gif"><img src="${link_info.url}" alt="A gif from ${link_info.domain}" /></div>`;
|
||||
}
|
||||
|
||||
if (mime_types.includes("video/mp4")) {
|
||||
return `<div class="embed-container image gif letterbox"><video autoplay="true" muted="true" loop="true" playsinline="true"><source src="${link_info.url}" type="video/mp4"><a href="${link_info.url}">${link_info.url}</a></video></div>`;
|
||||
}
|
||||
|
||||
if (mime_types[0].indexOf("image") === 0) {
|
||||
return `<div class="embed-container image"><img src="${link_info.url}" alt="An image from ${link_info.domain}" /></div>`;
|
||||
}
|
||||
|
||||
if (mime_types[0].indexOf("audio") === 0) {
|
||||
return `
|
||||
<div class="audio-container" tabindex="-1">
|
||||
<audio controls>
|
||||
<source src="${link_info.url}" type="${mime_types[0].indexOf("audio/mpeg") === 0 ? "audio/mpeg" : mime_types[0]}">
|
||||
Your browser does not support the audio element.
|
||||
</audio>
|
||||
<div class="enhanced-audio-player-container">
|
||||
<div class="audio-player-display-container">
|
||||
<canvas class="audio-player-display"></canvas>
|
||||
</div>
|
||||
<div class="audio-controls-container">
|
||||
<div class="progress-container">
|
||||
<div class="time-container"><span class="current">00:00</span></div>
|
||||
<div class="slider-container">
|
||||
<input type="range" name="progress" title="" min="0" max="1000" step="1" value="0" />
|
||||
<label class="time-container" for="progress"><span class="current">00:00</span></label>
|
||||
</div>
|
||||
<div class="time-container"><span class="duration">00:00</span></div>
|
||||
</div>
|
||||
<div class="buttons-container">
|
||||
<div class="audio-control blank">
|
||||
<a href="${link_info.url}" download>
|
||||
<div class="icon download"></div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="audio-control skip-back"><div class="icon skip-back"></div></div>
|
||||
<div class="audio-control play-pause-toggle"><div class="icon play"></div><div class="icon pause"></div></div>
|
||||
<div class="audio-control skip-forward"><div class="icon skip-forward"></div></div>
|
||||
<div class="audio-control volume">
|
||||
<input type="range" name="volume" title="Volume" min="0" max="100" step="1" value="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return `<a href="${link_info.url}">${link_info.url}</a>`;
|
||||
},
|
||||
];
|
||||
|
||||
function message_text_to_html(input) {
|
||||
let html_message = (input ?? "").replace(/\n/g, "<br/>");
|
||||
let match;
|
||||
|
||||
URL_MATCHING_REGEX.lastIndex = 0;
|
||||
while ((match = URL_MATCHING_REGEX.exec(input)) !== null) {
|
||||
const url = match[0];
|
||||
|
||||
const {
|
||||
groups: { protocol, host, hostname, domain, tld, path, extension, query, hash },
|
||||
} = match;
|
||||
|
||||
for (const handler of URL_MATCH_HANDLERS) {
|
||||
const result = handler({
|
||||
url,
|
||||
protocol,
|
||||
host,
|
||||
hostname,
|
||||
domain,
|
||||
tld,
|
||||
path,
|
||||
extension,
|
||||
query,
|
||||
hash,
|
||||
});
|
||||
|
||||
if (typeof result === "string") {
|
||||
html_message = html_message.replace(url, result);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return html_message;
|
||||
}
|
||||
|
||||
const time_tick_tock_timeout = 60 * 1000; // 1 minute
|
||||
let last_event_datetime_value = 0;
|
||||
let time_tick_tock_class = "time-tock";
|
||||
|
||||
let last_creator_id = null;
|
||||
let user_tick_tock_class = "user-tock";
|
||||
function render_text_event(room_chat_content, event, creator, existing_element) {
|
||||
const event_datetime = datetime_to_local(event.timestamps.created);
|
||||
|
||||
if (event_datetime.value - last_event_datetime_value > time_tick_tock_timeout) {
|
||||
time_tick_tock_class = time_tick_tock_class === "time-tick" ? "time-tock" : "time-tick";
|
||||
}
|
||||
last_event_datetime_value = event_datetime.value;
|
||||
|
||||
if (last_creator_id !== creator.id) {
|
||||
user_tick_tock_class = user_tick_tock_class === "user-tick" ? "user-tock" : "user-tick";
|
||||
last_creator_id = creator.id;
|
||||
}
|
||||
|
||||
const message_id = event.id.substring(0, 49);
|
||||
const html_content = `<div id="chat-${message_id}" class="message-container ${user_tick_tock_class} ${time_tick_tock_class}" data-creator_id="${creator.id}">
|
||||
<div class="message-actions-container">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="show_message_actions-${message_id}"
|
||||
class="message-actions-display-toggle"
|
||||
/>
|
||||
<label for="show_message_actions-${message_id}" class="message-actions-display-toggle-label"
|
||||
><div class="icon more"></div>
|
||||
</label>
|
||||
<div class="message-action" data-action="reply"><i class="icon reply"></i><span class="action-name">Reply</span></div>
|
||||
<div class="message-action" data-action="forward_copy"><i class="icon forward-copy"></i><span class="action-name">Forward (Copy Link)</span></div>
|
||||
<div class="message-action" data-action="delete"><i class="icon trash"></i><span class="action-name">Delete</span></div>
|
||||
</div>
|
||||
<div class="info-container">
|
||||
<div class="avatar-container">
|
||||
<img src="${creator.meta?.avatar ?? "/images/default_avatar.gif"}" alt="user avatar" />
|
||||
</div>
|
||||
<div class="username-container">
|
||||
<span class="username">${creator.username ?? "unknown"}</span>
|
||||
</div>
|
||||
<div class="datetime-container">
|
||||
<span class="long">${event_datetime.long}</span>
|
||||
<span class="short">${event_datetime.short}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="message-content-container">${message_text_to_html(event.data.message)}</div>
|
||||
</div>`;
|
||||
|
||||
if (existing_element) {
|
||||
const template = document.createElement("template");
|
||||
template.innerHTML = html_content;
|
||||
existing_element.replaceWith(template.content.firstChild);
|
||||
} else {
|
||||
room_chat_content.insertAdjacentHTML("beforeend", html_content);
|
||||
}
|
||||
}
|
||||
|
||||
async function get_new_room_element() {
|
||||
const existing_new_room_element = document.getElementById("new-room");
|
||||
if (existing_new_room_element) {
|
||||
return existing_new_room_element;
|
||||
}
|
||||
|
||||
const room_list = document.getElementById("room-list");
|
||||
room_list.insertAdjacentHTML(
|
||||
"beforeend",
|
||||
`<li id="new-room" class="room"><a href="" contenteditable="true">new room</a></li>`,
|
||||
);
|
||||
await new Promise((resolve) => setTimeout(resolve, 1));
|
||||
|
||||
const new_room_element = document.getElementById("new-room");
|
||||
return new_room_element;
|
||||
}
|
||||
|
||||
const users = {};
|
||||
async function append_room_events(events) {
|
||||
const room_chat_content = document.getElementById("room-chat-content");
|
||||
let last_message_id = room_chat_content.dataset.last_message_id ?? "";
|
||||
for (const event of events) {
|
||||
// if the last message is undefined, it becomes this event, otherwise, if this event's id is newer,
|
||||
// it becomes the latest message
|
||||
last_message_id =
|
||||
event.id > last_message_id && event.id.indexOf("TEMP") !== 0
|
||||
? event.id
|
||||
: last_message_id;
|
||||
|
||||
// if the last message has been updated, update the content's dataset to reflect that
|
||||
if (last_message_id !== room_chat_content.dataset.last_message_id) {
|
||||
room_chat_content.dataset.last_message_id = last_message_id;
|
||||
}
|
||||
|
||||
users[event.creator_id] =
|
||||
users[event.creator_id] ??
|
||||
(await (await api.fetch(`/api/users/${event.creator_id}`)).json());
|
||||
|
||||
const existing_element =
|
||||
document.getElementById(`chat-${event.id.substring(0, 49)}`) ??
|
||||
(event.meta?.temp_id
|
||||
? document.getElementById(`chat-${event.meta.temp_id}`)
|
||||
: undefined);
|
||||
render_text_event(room_chat_content, event, users[event.creator_id], existing_element);
|
||||
}
|
||||
|
||||
room_chat_content.scrollTop = room_chat_content.scrollHeight;
|
||||
}
|
||||
|
||||
// TODO: we need some abortcontroller handling here or something
|
||||
// similar for when we change rooms, this is the most basic
|
||||
// first pass outline
|
||||
let room_polling_request_abort_controller = null;
|
||||
async function poll_for_new_events() {
|
||||
const room_chat_content = document.getElementById("room-chat-content");
|
||||
const room_id = room_chat_content.dataset.room_id;
|
||||
const last_message_id = room_chat_content.dataset.last_message_id;
|
||||
|
||||
if (!room_id) {
|
||||
return;
|
||||
}
|
||||
|
||||
const message_polling_url = `/api/rooms/${room_id}/events?type=chat&limit=100&sort=newest&wait=true${last_message_id ? `&after_id=${last_message_id}` : ""}`;
|
||||
|
||||
room_polling_request_abort_controller =
|
||||
room_polling_request_abort_controller || new AbortController();
|
||||
|
||||
api.fetch(message_polling_url, {
|
||||
signal: room_polling_request_abort_controller.signal,
|
||||
})
|
||||
.then(async (new_events_response) => {
|
||||
const new_events = ((await new_events_response.json()) ?? []).reverse();
|
||||
await append_room_events(new_events.toReversed());
|
||||
poll_for_new_events(room_id);
|
||||
})
|
||||
.catch((error) => {
|
||||
// TODO: poll again? back off?
|
||||
console.error(error);
|
||||
});
|
||||
}
|
||||
|
||||
async function load_room(room_id) {
|
||||
const room_chat_content = document.getElementById("room-chat-content");
|
||||
|
||||
if (room_polling_request_abort_controller) {
|
||||
room_polling_request_abort_controller.abort();
|
||||
room_polling_request_abort_controller = null;
|
||||
delete room_chat_content.dataset.last_message_id;
|
||||
}
|
||||
|
||||
const room_response = await api.fetch(`/api/rooms/${room_id}`);
|
||||
if (!room_response.ok) {
|
||||
const error = await room_response.json();
|
||||
alert(error.message ?? JSON.stringify(error));
|
||||
return;
|
||||
}
|
||||
|
||||
const room = await room_response.json();
|
||||
|
||||
room_chat_content.dataset.room_id = room.id;
|
||||
room_chat_content.innerHTML = "";
|
||||
|
||||
const room_selectors = document.querySelectorAll("li.room");
|
||||
for (const room_selector of room_selectors) {
|
||||
room_selector.classList.remove("active");
|
||||
if (room_selector.id === `room-selector-${room_id}`) {
|
||||
room_selector.classList.add("active");
|
||||
}
|
||||
}
|
||||
|
||||
const events_response = await api.fetch(
|
||||
`/api/rooms/${room_id}/events?type=chat&limit=100&sort=newest`,
|
||||
);
|
||||
if (!events_response.ok) {
|
||||
const error = await events_response.json();
|
||||
alert(error.message ?? JSON.stringify(error));
|
||||
return;
|
||||
}
|
||||
|
||||
const events = (await events_response.json()).reverse();
|
||||
|
||||
await append_room_events(events);
|
||||
poll_for_new_events(room_id);
|
||||
}
|
||||
|
||||
let last_room_update = undefined;
|
||||
async function update_chat_rooms() {
|
||||
const now = new Date();
|
||||
const time_since_last_update = now - (last_room_update ?? 0);
|
||||
if (time_since_last_update < 5_000) {
|
||||
return;
|
||||
}
|
||||
|
||||
const rooms_response = await api.fetch("/api/rooms");
|
||||
if (rooms_response.ok) {
|
||||
const room_list = document.getElementById("room-list");
|
||||
room_list.innerHTML = "";
|
||||
const rooms = await rooms_response.json();
|
||||
for (const room of rooms) {
|
||||
room_list.insertAdjacentHTML(
|
||||
"beforeend",
|
||||
`<li id="room-selector-${room.id}" class="room"><a href="#/chat/room/${room.id}">${room.name}</a></li>`,
|
||||
);
|
||||
}
|
||||
|
||||
last_room_update = now;
|
||||
}
|
||||
}
|
||||
window.addEventListener("locationchange", update_chat_rooms);
|
||||
|
||||
function check_for_room_in_url() {
|
||||
const user_json = document.body.dataset.user;
|
||||
if (!user_json) {
|
||||
return;
|
||||
}
|
||||
|
||||
const hash = window.location.hash;
|
||||
const chat_in_url = hash.indexOf("#/chat") === 0;
|
||||
if (!chat_in_url) {
|
||||
return;
|
||||
}
|
||||
|
||||
const first_room_id = document.querySelector("li.room")?.id.substring(14);
|
||||
|
||||
// #/chat/room/{room_id}
|
||||
// ^ 12
|
||||
const room_id = hash.substring(12) || first_room_id;
|
||||
|
||||
if (!room_id) {
|
||||
setTimeout(check_for_room_in_url, 100);
|
||||
return;
|
||||
}
|
||||
|
||||
const room_chat_container = document.getElementById("room-chat-container");
|
||||
|
||||
if (room_chat_container.dataset.room_id !== room_id) {
|
||||
window.location.hash = `/chat/room/${room_id}`;
|
||||
room_chat_container.dataset.room_id = room_id;
|
||||
load_room(room_id);
|
||||
}
|
||||
}
|
||||
window.addEventListener("locationchange", check_for_room_in_url);
|
||||
|
||||
document.addEventListener("DOMContentLoaded", async () => {
|
||||
await update_chat_rooms();
|
||||
check_for_room_in_url();
|
||||
});
|
||||
1555
public/tabs/chat/emojis/en.js
Normal file
1555
public/tabs/chat/emojis/en.js
Normal file
File diff suppressed because it is too large
Load diff
Loading…
Add table
Add a link
Reference in a new issue