stream doesn't want to work

webroot/js/utils/chat.js

@@ -0,0 +1,198 @@
+import {
+  CHAT_INITIAL_PLACEHOLDER_TEXT,
+  CHAT_PLACEHOLDER_TEXT,
+  CHAT_PLACEHOLDER_OFFLINE,
+} from './constants.js';
+
+// Taken from https://stackoverflow.com/a/46902361
+export function getCaretPosition(node) {
+  var range = window.getSelection().getRangeAt(0),
+    preCaretRange = range.cloneRange(),
+    caretPosition,
+    tmp = document.createElement('div');
+
+  preCaretRange.selectNodeContents(node);
+  preCaretRange.setEnd(range.endContainer, range.endOffset);
+  tmp.appendChild(preCaretRange.cloneContents());
+  caretPosition = tmp.innerHTML.length;
+  return caretPosition;
+}
+
+// Might not need this anymore
+// Pieced together from parts of https://stackoverflow.com/questions/6249095/how-to-set-caretcursor-position-in-contenteditable-element-div
+export function setCaretPosition(editableDiv, position) {
+  var range = document.createRange();
+  var sel = window.getSelection();
+  range.selectNode(editableDiv);
+  range.setStart(editableDiv.childNodes[0], position);
+  range.collapse(true);
+
+  sel.removeAllRanges();
+  sel.addRange(range);
+}
+
+export function generatePlaceholderText(isEnabled, hasSentFirstChatMessage) {
+  if (isEnabled) {
+    return hasSentFirstChatMessage
+      ? CHAT_PLACEHOLDER_TEXT
+      : CHAT_INITIAL_PLACEHOLDER_TEXT;
+  }
+  return CHAT_PLACEHOLDER_OFFLINE;
+}
+
+export function extraUserNamesFromMessageHistory(messages) {
+  const list = [];
+  if (messages) {
+    messages
+      .filter((m) => m.user && m.user.displayName)
+      .forEach(function (message) {
+        if (!list.includes(message.user.displayName)) {
+          list.push(message.user.displayName);
+        }
+      });
+  }
+  return list;
+}
+
+// utils from https://gist.github.com/nathansmith/86b5d4b23ed968a92fd4
+/*
+  You would call this after getting an element's
+  `.innerHTML` value, while the user is typing.
+*/
+export function convertToText(str = '') {
+  // Ensure string.
+  let value = String(str);
+
+  // Convert encoding.
+  value = value.replace(/ /gi, ' ');
+  value = value.replace(/&/gi, '&');
+
+  // Replace `<br>`.
+  value = value.replace(/<br>/gi, '\n');
+
+  // Replace `<div>` (from Chrome).
+  value = value.replace(/<div>/gi, '\n');
+
+  // Replace `<p>` (from IE).
+  value = value.replace(/<p>/gi, '\n');
+
+  // Cleanup the emoji titles.
+  value = value.replace(/\u200C{2}/gi, '');
+
+  // Trim each line.
+  value = value
+    .split('\n')
+    .map((line = '') => {
+      return line.trim();
+    })
+    .join('\n');
+
+  // No more than 2x newline, per "paragraph".
+  value = value.replace(/\n\n+/g, '\n\n');
+
+  // Clean up spaces.
+  value = value.replace(/[ ]+/g, ' ');
+  value = value.trim();
+
+  // Expose string.
+  return value;
+}
+
+/*
+  You would call this when a user pastes from
+  the clipboard into a `contenteditable` area.
+*/
+export function convertOnPaste(event = { preventDefault() {} }, emojiList) {
+  // Prevent paste.
+  event.preventDefault();
+
+  // Set later.
+  let value = '';
+
+  // Does method exist?
+  const hasEventClipboard = !!(
+    event.clipboardData &&
+    typeof event.clipboardData === 'object' &&
+    typeof event.clipboardData.getData === 'function'
+  );
+
+  // Get clipboard data?
+  if (hasEventClipboard) {
+    value = event.clipboardData.getData('text/plain');
+  }
+
+  // Insert into temp `<textarea>`, read back out.
+  const textarea = document.createElement('textarea');
+  textarea.innerHTML = value;
+  value = textarea.innerText;
+
+  // Clean up text.
+  value = convertToText(value);
+
+  const HTML = emojify(value, emojiList);
+
+  // Insert text.
+  if (typeof document.execCommand === 'function') {
+    document.execCommand('insertHTML', false, HTML);
+  }
+}
+
+export function createEmojiMarkup(data, isCustom) {
+  const emojiUrl = isCustom ? data.emoji : data.url;
+  const emojiName = (
+    isCustom
+      ? data.name
+      : data.url.split('\\').pop().split('/').pop().split('.').shift()
+  ).toLowerCase();
+  return (
+    '<img class="emoji" alt=":‌‌' +
+    emojiName +
+    '‌‌:" title=":‌‌' +
+    emojiName +
+    '‌‌:" src="' +
+    emojiUrl +
+    '"/>'
+  );
+}
+
+// trim html white space characters from ends of messages for more accurate counting
+export function trimNbsp(html) {
+  return html.replace(/^(?:&nbsp;|\s)+|(?:&nbsp;|\s)+$/gi, '');
+}
+
+export function emojify(HTML, emojiList) {
+  const textValue = convertToText(HTML);
+
+  for (var lastPos = textValue.length; lastPos >= 0; lastPos--) {
+    const endPos = textValue.lastIndexOf(':', lastPos);
+    if (endPos <= 0) {
+      break;
+    }
+    const startPos = textValue.lastIndexOf(':', endPos - 1);
+    if (startPos === -1) {
+      break;
+    }
+    const typedEmoji = textValue.substring(startPos + 1, endPos).trim();
+    const emojiIndex = emojiList.findIndex(function (emojiItem) {
+      return emojiItem.name.toLowerCase() === typedEmoji.toLowerCase();
+    });
+
+    if (emojiIndex != -1) {
+      const emojiImgElement = createEmojiMarkup(emojiList[emojiIndex], true);
+      HTML = HTML.replace(':' + typedEmoji + ':', emojiImgElement);
+    }
+  }
+  return HTML;
+}
+
+// MODERATOR UTILS
+export function checkIsModerator(message) {
+  const { user } = message;
+  const { scopes } = user;
+
+  if (!scopes || scopes.length === 0) {
+    return false;
+  }
+
+  return scopes.includes('MODERATOR');
+}

webroot/js/utils/constants.js

@@ -0,0 +1,66 @@
+// misc constants used throughout the app
+
+export const URL_STATUS = `/api/status`;
+export const URL_CHAT_HISTORY = `/api/chat`;
+export const URL_CUSTOM_EMOJIS = `/api/emoji`;
+export const URL_CONFIG = `/api/config`;
+export const URL_VIEWER_PING = `/api/ping`;
+
+// inline moderation actions
+export const URL_HIDE_MESSAGE = `/api/chat/updatemessagevisibility`;
+export const URL_BAN_USER = `/api/chat/users/setenabled`;
+
+// TODO: This directory is customizable in the config.  So we should expose this via the config API.
+export const URL_STREAM = `/hls/stream.m3u8`;
+export const URL_WEBSOCKET = `${
+  location.protocol === 'https:' ? 'wss' : 'ws'
+}://${location.host}/ws`;
+export const URL_CHAT_REGISTRATION = `/api/chat/register`;
+export const URL_FOLLOWERS = `/api/followers`;
+
+export const TIMER_STATUS_UPDATE = 5000; // ms
+export const TIMER_DISABLE_CHAT_AFTER_OFFLINE = 5 * 60 * 1000; // 5 mins
+export const TIMER_STREAM_DURATION_COUNTER = 1000;
+export const TEMP_IMAGE =
+  'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
+
+export const OWNCAST_LOGO_LOCAL = '/img/logo.svg';
+
+export const MESSAGE_OFFLINE = 'Stream is offline.';
+export const MESSAGE_ONLINE = 'Stream is online.';
+
+export const URL_OWNCAST = 'https://owncast.online'; // used in footer
+export const PLAYER_VOLUME = 'owncast_volume';
+
+export const KEY_ACCESS_TOKEN = 'owncast_access_token';
+export const KEY_EMBED_CHAT_ACCESS_TOKEN = 'owncast_embed_chat_access_token';
+export const KEY_USERNAME = 'owncast_username';
+export const KEY_CUSTOM_USERNAME_SET = 'owncast_custom_username_set';
+export const KEY_CHAT_DISPLAYED = 'owncast_chat';
+export const KEY_CHAT_FIRST_MESSAGE_SENT = 'owncast_first_message_sent';
+export const CHAT_INITIAL_PLACEHOLDER_TEXT =
+  'Type here to chat, no account necessary.';
+export const CHAT_PLACEHOLDER_TEXT = 'Message';
+export const CHAT_PLACEHOLDER_OFFLINE = 'Chat is offline.';
+export const CHAT_MAX_MESSAGE_LENGTH = 500;
+export const EST_SOCKET_PAYLOAD_BUFFER = 512;
+export const CHAT_CHAR_COUNT_BUFFER = 20;
+export const CHAT_OK_KEYCODES = [
+  'ArrowLeft',
+  'ArrowUp',
+  'ArrowRight',
+  'ArrowDown',
+  'Shift',
+  'Meta',
+  'Alt',
+  'Delete',
+  'Backspace',
+];
+export const CHAT_KEY_MODIFIERS = ['Control', 'Shift', 'Meta', 'Alt'];
+export const MESSAGE_JUMPTOBOTTOM_BUFFER = 500;
+
+// app styling
+export const WIDTH_SINGLE_COL = 780;
+export const HEIGHT_SHORT_WIDE = 500;
+export const ORIENTATION_PORTRAIT = 'portrait';
+export const ORIENTATION_LANDSCAPE = 'landscape';

webroot/js/utils/helpers.js

@@ -0,0 +1,210 @@
+import { ORIENTATION_LANDSCAPE, ORIENTATION_PORTRAIT } from './constants.js';
+
+export function getLocalStorage(key) {
+  try {
+    return localStorage.getItem(key);
+  } catch (e) {}
+  return null;
+}
+
+export function setLocalStorage(key, value) {
+  try {
+    if (value !== '' && value !== null) {
+      localStorage.setItem(key, value);
+    } else {
+      localStorage.removeItem(key);
+    }
+    return true;
+  } catch (e) {}
+  return false;
+}
+
+export function clearLocalStorage(key) {
+  localStorage.removeItem(key);
+}
+
+// jump down to the max height of a div, with a slight delay
+export function jumpToBottom(element) {
+  if (!element) return;
+
+  setTimeout(
+    () => {
+      element.scrollTo({
+        top: element.scrollHeight,
+        left: 0,
+        behavior: 'smooth',
+      });
+    },
+    50,
+    element
+  );
+}
+
+// convert newlines to <br>s
+export function addNewlines(str) {
+  return str.replace(/(?:\r\n|\r|\n)/g, '<br />');
+}
+
+export function pluralize(string, count) {
+  if (count === 1) {
+    return string;
+  } else {
+    return string + 's';
+  }
+}
+
+// Trying to determine if browser is mobile/tablet.
+// Source: https://developer.mozilla.org/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent
+export function hasTouchScreen() {
+  let hasTouch = false;
+  if ('maxTouchPoints' in navigator) {
+    hasTouch = navigator.maxTouchPoints > 0;
+  } else if ('msMaxTouchPoints' in navigator) {
+    hasTouch = navigator.msMaxTouchPoints > 0;
+  } else {
+    var mQ = window.matchMedia && matchMedia('(pointer:coarse)');
+    if (mQ && mQ.media === '(pointer:coarse)') {
+      hasTouch = !!mQ.matches;
+    } else if ('orientation' in window) {
+      hasTouch = true; // deprecated, but good fallback
+    } else {
+      // Only as a last resort, fall back to user agent sniffing
+      hasTouch = navigator.userAgentData.mobile;
+    }
+  }
+  return hasTouch;
+}
+
+export function getOrientation(forTouch = false) {
+  // chrome mobile gives misleading matchMedia result when keyboard is up
+  if (forTouch && window.screen && window.screen.orientation) {
+    return window.screen.orientation.type.match('portrait')
+      ? ORIENTATION_PORTRAIT
+      : ORIENTATION_LANDSCAPE;
+  } else {
+    // all other cases
+    return window.matchMedia('(orientation: portrait)').matches
+      ? ORIENTATION_PORTRAIT
+      : ORIENTATION_LANDSCAPE;
+  }
+}
+
+export function padLeft(text, pad, size) {
+  return String(pad.repeat(size) + text).slice(-size);
+}
+
+export function parseSecondsToDurationString(seconds = 0) {
+  const finiteSeconds = Number.isFinite(+seconds) ? Math.abs(seconds) : 0;
+
+  const days = Math.floor(finiteSeconds / 86400);
+  const daysString = days > 0 ? `${days} day${days > 1 ? 's' : ''} ` : '';
+
+  const hours = Math.floor((finiteSeconds / 3600) % 24);
+  const hoursString = hours || days ? padLeft(`${hours}:`, '0', 3) : '';
+
+  const mins = Math.floor((finiteSeconds / 60) % 60);
+  const minString = padLeft(`${mins}:`, '0', 3);
+
+  const secs = Math.floor(finiteSeconds % 60);
+  const secsString = padLeft(`${secs}`, '0', 2);
+
+  return daysString + hoursString + minString + secsString;
+}
+
+export function setVHvar() {
+  var vh = window.innerHeight * 0.01;
+  // Then we set the value in the --vh custom property to the root of the document
+  document.documentElement.style.setProperty('--vh', `${vh}px`);
+}
+
+export function doesObjectSupportFunction(object, functionName) {
+  return typeof object[functionName] === 'function';
+}
+
+// return a string of css classes
+export function classNames(json) {
+  const classes = [];
+
+  Object.entries(json).map(function (item) {
+    const [key, value] = item;
+    if (value) {
+      classes.push(key);
+    }
+    return null;
+  });
+  return classes.join(' ');
+}
+
+// taken from
+// https://medium.com/@TCAS3/debounce-deep-dive-javascript-es6-e6f8d983b7a1
+export function debounce(fn, time) {
+  let timeout;
+
+  return function () {
+    const functionCall = () => fn.apply(this, arguments);
+
+    clearTimeout(timeout);
+    timeout = setTimeout(functionCall, time);
+  };
+}
+
+export function getDiffInDaysFromNow(timestamp) {
+  const time = typeof timestamp === 'string' ? new Date(timestamp) : timestamp;
+  return (new Date() - time) / (24 * 3600 * 1000);
+}
+
+// "Last live today at [time]" or "last live [date]"
+export function makeLastOnlineString(timestamp) {
+  if (!timestamp) {
+    return '';
+  }
+  let string = '';
+  const time = new Date(timestamp);
+  const comparisonDate = new Date(time).setHours(0, 0, 0, 0);
+
+  if (comparisonDate == new Date().setHours(0, 0, 0, 0)) {
+    const atTime = time.toLocaleTimeString([], {
+      hour: '2-digit',
+      minute: '2-digit',
+    });
+    string = `Today ${atTime}`;
+  } else {
+    string = time.toLocaleDateString();
+  }
+
+  return `Last live: ${string}`;
+}
+
+// Routing & Tabs
+export const ROUTE_RECORDINGS = 'recordings';
+export const ROUTE_SCHEDULE = 'schedule';
+// looks for `/recording|schedule/id` pattern to determine what to display from the tab view
+export function checkUrlPathForDisplay() {
+  const pathTest = [ROUTE_RECORDINGS, ROUTE_SCHEDULE];
+  const pathParts = window.location.pathname.split('/');
+
+  if (pathParts.length >= 2) {
+    const part = pathParts[1].toLowerCase();
+    if (pathTest.includes(part)) {
+      return {
+        section: part,
+        sectionId: pathParts[2] || '',
+      };
+    }
+  }
+  return null;
+}
+
+export function paginateArray(items, page, perPage) {
+  const offset = perPage * (page - 1);
+  const totalPages = Math.ceil(items.length / perPage);
+  const paginatedItems = items.slice(offset, perPage * page);
+
+  return {
+    previousPage: page - 1 ? page - 1 : null,
+    nextPage: totalPages > page ? page + 1 : null,
+    total: items.length,
+    totalPages: totalPages,
+    items: paginatedItems,
+  };
+}

webroot/js/utils/user-colors.js

@@ -0,0 +1,17 @@
+export function messageBubbleColorForHue(hue) {
+  // Tweak these to adjust the result of the color
+  const saturation = 50;
+  const lightness = 50;
+  const alpha = 'var(--message-background-alpha)';
+
+  return `hsla(${hue}, ${saturation}%, ${lightness}%, ${alpha})`;
+}
+
+export function textColorForHue(hue) {
+  // Tweak these to adjust the result of the color
+  const saturation = 70;
+  const lightness = 80;
+  const alpha = 0.85;
+
+  return `hsla(${hue}, ${saturation}%, ${lightness}%, ${alpha})`;
+}

webroot/js/utils/websocket.js

@@ -0,0 +1,198 @@
+import { URL_WEBSOCKET } from './constants.js';
+/**
+ * These are the types of messages that we can handle with the websocket.
+ * Mostly used by `websocket.js` but if other components need to handle
+ * different types then it can import this file.
+ */
+export const SOCKET_MESSAGE_TYPES = {
+  CHAT: 'CHAT',
+  PING: 'PING',
+  NAME_CHANGE: 'NAME_CHANGE',
+  PONG: 'PONG',
+  SYSTEM: 'SYSTEM',
+  USER_JOINED: 'USER_JOINED',
+  CHAT_ACTION: 'CHAT_ACTION',
+  FEDIVERSE_ENGAGEMENT_FOLLOW: 'FEDIVERSE_ENGAGEMENT_FOLLOW',
+  FEDIVERSE_ENGAGEMENT_LIKE: 'FEDIVERSE_ENGAGEMENT_LIKE',
+  FEDIVERSE_ENGAGEMENT_REPOST: 'FEDIVERSE_ENGAGEMENT_REPOST',
+  CONNECTED_USER_INFO: 'CONNECTED_USER_INFO',
+  ERROR_USER_DISABLED: 'ERROR_USER_DISABLED',
+  ERROR_NEEDS_REGISTRATION: 'ERROR_NEEDS_REGISTRATION',
+  ERROR_MAX_CONNECTIONS_EXCEEDED: 'ERROR_MAX_CONNECTIONS_EXCEEDED',
+  VISIBILITY_UPDATE: 'VISIBILITY-UPDATE',
+};
+
+export const CALLBACKS = {
+  RAW_WEBSOCKET_MESSAGE_RECEIVED: 'rawWebsocketMessageReceived',
+  WEBSOCKET_CONNECTED: 'websocketConnected',
+};
+
+const TIMER_WEBSOCKET_RECONNECT = 5000; // ms
+
+export default class Websocket {
+  constructor(accessToken) {
+    this.websocket = null;
+    this.websocketReconnectTimer = null;
+    this.accessToken = accessToken;
+
+    this.websocketConnectedListeners = [];
+    this.websocketDisconnectListeners = [];
+    this.rawMessageListeners = [];
+
+    this.send = this.send.bind(this);
+    this.createAndConnect = this.createAndConnect.bind(this);
+    this.scheduleReconnect = this.scheduleReconnect.bind(this);
+    this.shutdown = this.shutdown.bind(this);
+
+    this.isShutdown = false;
+
+    this.createAndConnect();
+  }
+
+  createAndConnect() {
+    const url = new URL(URL_WEBSOCKET);
+    url.searchParams.append('accessToken', this.accessToken);
+
+    const ws = new WebSocket(url.toString());
+    ws.onopen = this.onOpen.bind(this);
+    ws.onclose = this.onClose.bind(this);
+    ws.onerror = this.onError.bind(this);
+    ws.onmessage = this.onMessage.bind(this);
+
+    this.websocket = ws;
+  }
+
+  // Other components should register for websocket callbacks.
+  addListener(type, callback) {
+    if (type == CALLBACKS.WEBSOCKET_CONNECTED) {
+      this.websocketConnectedListeners.push(callback);
+    } else if (type == CALLBACKS.WEBSOCKET_DISCONNECTED) {
+      this.websocketDisconnectListeners.push(callback);
+    } else if (type == CALLBACKS.RAW_WEBSOCKET_MESSAGE_RECEIVED) {
+      this.rawMessageListeners.push(callback);
+    }
+  }
+
+  // Interface with other components
+
+  // Outbound: Other components can pass an object to `send`.
+  send(message) {
+    // Sanity check that what we're sending is a valid type.
+    if (!message.type || !SOCKET_MESSAGE_TYPES[message.type]) {
+      console.warn(
+        `Outbound message: Unknown socket message type: "${message.type}" sent.`
+      );
+    }
+
+    const messageJSON = JSON.stringify(message);
+    this.websocket.send(messageJSON);
+  }
+
+  shutdown() {
+    this.isShutdown = true;
+    this.websocket.close();
+  }
+
+  // Private methods
+
+  // Fire the callbacks of the listeners.
+
+  notifyWebsocketConnectedListeners(message) {
+    this.websocketConnectedListeners.forEach(function (callback) {
+      callback(message);
+    });
+  }
+
+  notifyWebsocketDisconnectedListeners(message) {
+    this.websocketDisconnectListeners.forEach(function (callback) {
+      callback(message);
+    });
+  }
+
+  notifyRawMessageListeners(message) {
+    this.rawMessageListeners.forEach(function (callback) {
+      callback(message);
+    });
+  }
+
+  // Internal websocket callbacks
+
+  onOpen(e) {
+    if (this.websocketReconnectTimer) {
+      clearTimeout(this.websocketReconnectTimer);
+    }
+
+    this.notifyWebsocketConnectedListeners();
+  }
+
+  onClose(e) {
+    // connection closed, discard old websocket and create a new one in 5s
+    this.websocket = null;
+    this.notifyWebsocketDisconnectedListeners();
+    this.handleNetworkingError('Websocket closed.');
+    if (!this.isShutdown) {
+      this.scheduleReconnect();
+    }
+  }
+
+  // On ws error just close the socket and let it re-connect again for now.
+  onError(e) {
+    this.handleNetworkingError(`Socket error: ${JSON.parse(e)}`);
+    this.websocket.close();
+    if (!this.isShutdown) {
+      this.scheduleReconnect();
+    }
+  }
+
+  scheduleReconnect() {
+    this.websocketReconnectTimer = setTimeout(
+      this.createAndConnect,
+      TIMER_WEBSOCKET_RECONNECT
+    );
+  }
+
+  /*
+  onMessage is fired when an inbound object comes across the websocket.
+  If the message is of type `PING` we send a `PONG` back and do not
+  pass it along to listeners.
+  */
+  onMessage(e) {
+    // Optimization where multiple events can be sent within a
+    // single websocket message. So split them if needed.
+    var messages = e.data.split('\n');
+    for (var i = 0; i < messages.length; i++) {
+      try {
+        var model = JSON.parse(messages[i]);
+      } catch (e) {
+        console.error(e, e.data);
+        return;
+      }
+
+      if (!model.type) {
+        console.error('No type provided', model);
+        return;
+      }
+
+      // Send PONGs
+      if (model.type === SOCKET_MESSAGE_TYPES.PING) {
+        this.sendPong();
+        return;
+      }
+
+      // Notify any of the listeners via the raw socket message callback.
+      this.notifyRawMessageListeners(model);
+    }
+  }
+
+  // Reply to a PING as a keep alive.
+  sendPong() {
+    const pong = { type: SOCKET_MESSAGE_TYPES.PONG };
+    this.send(pong);
+  }
+
+  handleNetworkingError(error) {
+    console.error(
+      `Chat has been disconnected and is likely not working for you. It's possible you were removed from chat. If this is a server configuration issue, visit troubleshooting steps to resolve. https://owncast.online/docs/troubleshooting/#chat-is-disabled: ${error}`
+    );
+  }
+}