393 lines
12 KiB
JavaScript
393 lines
12 KiB
JavaScript
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}))(?:\:(?<port>[0-9]{1,6}))?)\b(?<path>[-a-zA-Z0-9@:%_{}\[\]<>\(\)\+.~&\/="]*)(?:\?(?<query>[a-zA-Z0-9!$%&<>()*+,-\.\/\:\;\=\?\@_~"]+))?(?:#(?<hash>[a-zA-Z0-9!$&'()*+,-\.\/\:\;\=\?\@_~"]*?))?/gm;
|
|
|
|
const VIDEO_ID_EXTRACTOR =
|
|
/(?<protocol>https?)?(?::\/\/)?(?<host>(?:(?<subdomain>.*?)\.)?(?<domain>vimeo\.com|youtu(?:be\.com|\.be|be\.googleapis\.com)))\/(?<item_type>video|embed|watch|v)?\/?.*?\??(?:(?:v=)?(?<video_id>[A-Za-z0-9._%-]*))\S+?/gi;
|
|
const SPOTIFY_EXTRACTOR =
|
|
/(?<protocol>(?:spotify:.*|https?))?(?:\:(?:\/\/)?)?(?<host>(?:(?<subdomain>.+)\.)?(?<domain>spotify\.com))?.*?\/?(?<item_type>(?:album|artist|episode|playlist|tracks?))?\/?(?<item_id>[a-zA-Z0-9]{22})/gi;
|
|
const TIDAL_EXTRACTOR =
|
|
/(?<protocol>(?:tidal:track:|https?))?(?::\/\/)?(?<host>(?:(?<subdomain>.+)\.)?(?<domain>tidal\.com|tidalhi\.fi)).*?\/(?<item_type>(?:album|artist|tracks?))\/(?<item_id>[0-9]+)/gi;
|
|
|
|
const URL_MATCH_HANDLERS = [
|
|
// Tidal
|
|
(match) => {
|
|
const original_url = match[0];
|
|
|
|
// wow https://stackoverflow.com/questions/3891641/regex-test-only-works-every-other-time
|
|
TIDAL_EXTRACTOR.lastIndex = 0;
|
|
|
|
const {
|
|
groups: { item_type, item_id },
|
|
} = TIDAL_EXTRACTOR.exec(original_url) ?? { groups: {} };
|
|
|
|
console.dir({
|
|
original_url,
|
|
item_type,
|
|
item_id,
|
|
});
|
|
if (!(item_type && item_id)) {
|
|
return;
|
|
}
|
|
|
|
return `
|
|
<div class="embed-container ${item_type === "album" ? "square" : "short"} tidal rounded">
|
|
<div class="embed-actions-container">
|
|
<button class="icon plus" onclick="console.log(\"close\");"/>
|
|
<button class="icon talk" 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
|
|
(match) => {
|
|
const original_url = match[0];
|
|
|
|
SPOTIFY_EXTRACTOR.lastIndex = 0;
|
|
|
|
const {
|
|
groups: { host, subdomain, item_type, item_id },
|
|
} = SPOTIFY_EXTRACTOR.exec(original_url) ?? { groups: {} };
|
|
|
|
if (!item_id) {
|
|
return;
|
|
}
|
|
|
|
return `
|
|
<div class="embed-container ${["album", "artist"].includes(item_type) ? "square" : "short"} spotify rounded">
|
|
<div class="embed-actions-container">
|
|
<button class="icon plus" onclick="console.log(\"close\");"/>
|
|
<button class="icon talk" 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
|
|
(match) => {
|
|
const original_url = match[0];
|
|
|
|
VIDEO_ID_EXTRACTOR.lastIndex = 0;
|
|
|
|
const {
|
|
groups: { domain, video_id },
|
|
} = VIDEO_ID_EXTRACTOR.exec(original_url) ?? { groups: {} };
|
|
|
|
if (domain?.toLowerCase().indexOf("youtu") === -1 || !video_id) {
|
|
return;
|
|
}
|
|
|
|
return `
|
|
<div class="embed-container letterbox youtube">
|
|
<div class="embed-actions-container">
|
|
<button class="icon plus" onclick="console.log(\"close\");"/>
|
|
<button class="icon talk" 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
|
|
(match) => {
|
|
const original_url = match[0];
|
|
|
|
VIDEO_ID_EXTRACTOR.lastIndex = 0;
|
|
|
|
const {
|
|
groups: { domain, video_id },
|
|
} = VIDEO_ID_EXTRACTOR.exec(original_url) ?? { groups: {} };
|
|
|
|
if (domain?.toLowerCase().indexOf("vimeo") === -1 || !video_id) {
|
|
return;
|
|
}
|
|
|
|
return `
|
|
<div class="embed-container letterbox youtube">
|
|
<div class="embed-actions-container">
|
|
<button class="icon plus" onclick="console.log(\"close\");"/>
|
|
<button class="icon talk" 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
|
|
(match) => {
|
|
// TODO: punycoding if something has unicode?
|
|
// const punycode = get_punycode();
|
|
// const punycoded_url = punycode.encode(match[0]);
|
|
const groups = match.groups ?? {};
|
|
|
|
return `<a href="${groups.protocol ?? "http"}://${groups.host ?? ""}${groups.path ? `/${groups.path}` : ""}${groups.query ? `?${groups.query}` : ""}${groups.hash ? `#${groups.hash}` : ""}">${match[0]}</a>`;
|
|
},
|
|
];
|
|
|
|
function message_text_to_html(input) {
|
|
let html_message = input;
|
|
let match;
|
|
while ((match = URL_MATCHING_REGEX.exec(input)) !== null) {
|
|
for (const handler of URL_MATCH_HANDLERS) {
|
|
const result = handler(match);
|
|
if (typeof result === "string") {
|
|
html_message = html_message.replace(match[0], result);
|
|
}
|
|
}
|
|
}
|
|
|
|
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 html_content = `<div id="chat-${event.id}" class="message-container ${user_tick_tock_class} ${time_tick_tock_class}" data-creator_id="${creator.id}">
|
|
<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}`) ??
|
|
(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="#/talk/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 talk_in_url = hash.indexOf("#/talk") === 0;
|
|
if (!talk_in_url) {
|
|
return;
|
|
}
|
|
|
|
const first_room_id = document.querySelector("li.room")?.id.substring(14);
|
|
|
|
// #/talk/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 = `/talk/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();
|
|
});
|