Merge remote-tracking branch 'upstream/master' into save-volume-settings

webroot/js/components/chat/chat-input.js

@@ -1,8 +1,9 @@
-import { h, Component, createRef } from 'https://unpkg.com/preact?module';
-import htm from 'https://unpkg.com/htm?module';
+import { h, Component, createRef } from '/js/web_modules/preact.js';
+import htm from '/js/web_modules/htm.js';
 const html = htm.bind(h);
 
-import { EmojiButton } from 'https://unpkg.com/@joeattardi/emoji-button@4.2.0/dist/index.js';
+import { EmojiButton } from '/js/web_modules/@joeattardi/emoji-button.js';
+
 import ContentEditable, { replaceCaret } from './content-editable.js';
 import { generatePlaceholderText, getCaretPosition, convertToText, convertOnPaste } from '../../utils/chat.js';
 import { getLocalStorage, setLocalStorage, classNames } from '../../utils/helpers.js';

webroot/js/components/chat/chat.js

@@ -1,5 +1,5 @@
-import { h, Component, createRef } from 'https://unpkg.com/preact?module';
-import htm from 'https://unpkg.com/htm?module';
+import { h, Component, createRef } from '/js/web_modules/preact.js';
+import htm from '/js/web_modules/htm.js';
 const html = htm.bind(h);
 
 import Message from './message.js';

webroot/js/components/chat/content-editable.js

@@ -6,7 +6,7 @@ and here:
 https://stackoverflow.com/questions/22677931/react-js-onchange-event-for-contenteditable/27255103#27255103
 
 */
-import { Component, createRef, h } from 'https://unpkg.com/preact?module';
+import { h, Component, createRef } from '/js/web_modules/preact.js';
 
 export function replaceCaret(el) {
   // Place the caret at the end of the element

webroot/js/components/chat/message.js

@@ -1,9 +1,9 @@
-import { h, Component } from 'https://unpkg.com/preact?module';
-import htm from 'https://unpkg.com/htm?module';
+import { h, Component } from '/js/web_modules/preact.js';
+import htm from '/js/web_modules/htm.js';
 const html = htm.bind(h);
 
 import { messageBubbleColorForString } from '../../utils/user-colors.js';
-import { formatMessageText } from '../../utils/chat.js';
+import { formatMessageText, formatTimestamp } from '../../utils/chat.js';
 import { generateAvatar } from '../../utils/helpers.js';
 import { SOCKET_MESSAGE_TYPES } from '../../utils/websocket.js';
 
@@ -13,9 +13,10 @@ export default class Message extends Component {
     const { type } = message;
 
     if (type === SOCKET_MESSAGE_TYPES.CHAT) {
-      const { image, author, body } = message;
+      const { image, author, body, timestamp } = message;
       const formattedMessage = formatMessageText(body, username);
       const avatar = image || generateAvatar(author);
+      const formattedTimestamp = formatTimestamp(timestamp);
 
       const authorColor = messageBubbleColorForString(author);
       const avatarBgColor = { backgroundColor: authorColor };
@@ -35,6 +36,7 @@ export default class Message extends Component {
               </div>
               <div
                 class="message-text text-gray-300 font-normal overflow-y-hidden"
+                title=${formattedTimestamp}
                 dangerouslySetInnerHTML=${
                   { __html: formattedMessage }
                 }

webroot/js/components/chat/username.js

@@ -1,5 +1,5 @@
-import { h, Component, createRef } from 'https://unpkg.com/preact?module';
-import htm from 'https://unpkg.com/htm?module';
+import { h, Component, createRef } from '/js/web_modules/preact.js';
+import htm from '/js/web_modules/htm.js';
 const html = htm.bind(h);
 
 import { generateAvatar, setLocalStorage } from '../../utils/helpers.js';

webroot/js/components/player.js

@@ -1,5 +1,7 @@
 // https://docs.videojs.com/player
 
+import videojs from '/js/web_modules/videojs/dist/video.min.js';
+
 const VIDEO_ID = 'video';
 // TODO: This directory is customizable in the config.  So we should expose this via the config API.
 const URL_STREAM = `/hls/stream.m3u8`;
@@ -53,13 +55,14 @@ class OwncastPlayer {
   }
 
   init() {
-    videojs.Vhs.xhr.beforeRequest = function (options) {
+    this.vjsPlayer = videojs(VIDEO_ID, VIDEO_OPTIONS);
+
+    this.vjsPlayer.beforeRequest = function (options) {
       const cachebuster = Math.round(new Date().getTime() / 1000);
       options.uri = `${options.uri}?cachebust=${cachebuster}`;
       return options;
     };
 
-    this.vjsPlayer = videojs(VIDEO_ID, VIDEO_OPTIONS);
     this.addAirplay();
     this.vjsPlayer.ready(this.handleReady);
   }
@@ -76,11 +79,11 @@ class OwncastPlayer {
   // play
   startPlayer() {
     this.log('Start playing');
-    const source = { ...VIDEO_SRC }
+    const source = { ...VIDEO_SRC };
     this.vjsPlayer.volume(localStorage.getItem('owncastVolume'));
     this.vjsPlayer.src(source);
     // this.vjsPlayer.play();
-  };
+  }
 
   handleReady() {
     this.log('on Ready');
@@ -124,7 +127,7 @@ class OwncastPlayer {
 
   setPoster() {
     const cachebuster = Math.round(new Date().getTime() / 1000);
-    const poster = POSTER_THUMB + "?okhi=" + cachebuster;
+    const poster = POSTER_THUMB + '?okhi=' + cachebuster;
 
     this.vjsPlayer.poster(poster);
   }
@@ -138,7 +141,6 @@ class OwncastPlayer {
       if (window.WebKitPlaybackTargetAvailabilityEvent) {
         var videoJsButtonClass = videojs.getComponent('Button');
         var concreteButtonClass = videojs.extend(videoJsButtonClass, {
-
           // The `init()` method will also work for constructor logic here, but it is
           // deprecated. If you provide an `init()` method, it will override the
           // `constructor()` method!
@@ -152,8 +154,10 @@ class OwncastPlayer {
           },
         });
 
-        var concreteButtonInstance = this.vjsPlayer.controlBar.addChild(new concreteButtonClass());
-        concreteButtonInstance.addClass("vjs-airplay");
+        var concreteButtonInstance = this.vjsPlayer.controlBar.addChild(
+          new concreteButtonClass()
+        );
+        concreteButtonInstance.addClass('vjs-airplay');
       }
     });
   }

webroot/js/components/social.js

@@ -1,5 +1,5 @@
-import { h } from 'https://unpkg.com/preact?module';
-import htm from 'https://unpkg.com/htm?module';
+import { h } from '/js/web_modules/preact.js';
+import htm from '/js/web_modules/htm.js';
 const html = htm.bind(h);
 import { SOCIAL_PLATFORMS } from '../utils/social.js';
 import { classNames } from '../utils/helpers.js';