address MR comments

5 years ago · b399fbba22
7 changed files with 123 additions and 127 deletions
--- a/webroot/index-standalone-chat.html
+++ b/webroot/index-standalone-chat.html
@ -8,22 +8,17 @@
				@@ -8,22 +8,17 @@
    <link href="./styles/standalone-chat.css" rel="stylesheet" />

    <script src="//unpkg.com/showdown/dist/showdown.min.js"></script>
-
  </head>

  <body>
-
    <div id="messages-only"></div>

    <script type="module">
-      import { render, h } from 'https://unpkg.com/preact?module';
-      import htm from 'https://unpkg.com/htm?module';
-      const html = htm.bind(h);
+      import { render, html } from 'https://unpkg.com/htm/preact/standalone.module.js';
      import StandaloneChat from './js/app-standalone-chat.js';
-
-      (function () {
-        render(html`<${StandaloneChat} messagesOnly />`, document.getElementById("messages-only"));
-      })();
+      render(
+        html`<${StandaloneChat} messagesOnly />`, document.getElementById("messages-only")
+      );
    </script>
  </body>
 </html>
--- a/webroot/index-video-only.html
+++ b/webroot/index-video-only.html
@ -20,15 +20,9 @@
				@@ -20,15 +20,9 @@
    <div id="video-only"></div>

    <script type="module">
-      import { h, render } from 'https://unpkg.com/preact?module';
-      import htm from 'https://unpkg.com/htm?module';
-      const html = htm.bind(h);
-
+      import { render, html } from 'https://unpkg.com/htm/preact/standalone.module.js';
      import VideoOnly from './js/app-video-only.js';
-
-      (function () {
-        render(html`<${VideoOnly} />`, document.getElementById("video-only"));
-      })();
+      render(html`<${VideoOnly} />`, document.getElementById("video-only"));
    </script>
  </body>
 </html>
--- a/webroot/index.html
+++ b/webroot/index.html
@ -28,54 +28,47 @@
				@@ -28,54 +28,47 @@
    <script src="//unpkg.com/video.js@7.9.2/dist/video.js"></script>
    <!-- markdown renderer -->
    <script src="//unpkg.com/showdown/dist/showdown.min.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@justinribeiro/lite-youtube@0.6.2/lite-youtube.js"></script>
+

    <link href="./styles/video.css" rel="stylesheet" />
    <link href="./styles/chat.css" rel="stylesheet" />
    <link href="./styles/user-content.css" rel="stylesheet" />
    <link href="./styles/app.css" rel="stylesheet" />
-
  </head>
+  <body class="bg-gray-300 text-gray-800">
+    <div id="app"></div>

-
-<body class="bg-gray-300 text-gray-800">
-  <div id="app"></div>
-
-  <script type="module">
-    import { render, h } from 'https://unpkg.com/preact?module';
-    import htm from 'https://unpkg.com/htm?module';
-    const html = htm.bind(h);
-    import App from './js/app.js';
-
-    (function () {
+    <script type="module">
+      import { render, html } from 'https://unpkg.com/htm/preact/standalone.module.js';
+      import App from './js/app.js';
      render(html`<${App} />`, document.getElementById("app"));
-    })();
-  </script>
-
+    </script>

-<noscript>
-  <style>
-    .noscript {
-      text-align: center;
-      padding: 30px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      flex-direction: column;
-    }
+    <noscript>
+      <style>
+        .noscript {
+          text-align: center;
+          padding: 30px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          flex-direction: column;
+        }

-    .noscript a {
-      display: inline;
-      color: blue;
-      text-decoration: underline;
-    }
-  </style>
-  <div class="noscript">
-    <img src="https://owncast.online/images/logo.png" />
-    <br/>
-    <p>
-      This <a href="https://owncast.online" target="_blank">Owncast</a> stream requires Javascript to play.
-    </p>
-  </div>
-</noscript>
-</body>
+        .noscript a {
+          display: inline;
+          color: blue;
+          text-decoration: underline;
+        }
+      </style>
+      <div class="noscript">
+        <img src="https://owncast.online/images/logo.png" />
+        <br/>
+        <p>
+          This <a href="https://owncast.online" target="_blank">Owncast</a> stream requires Javascript to play.
+        </p>
+      </div>
+    </noscript>
+  </body>
 </html>
--- a/webroot/js/app-standalone-chat.js
+++ b/webroot/js/app-standalone-chat.js
@ -29,10 +29,6 @@ export default class StandaloneChat extends Component {
				@@ -29,10 +29,6 @@ export default class StandaloneChat extends Component {
    });
  }

-  handleChatToggle() {
-    return;
-  }
-
  render(props, state) {
    const { username, userAvatarImage, websocket } = state;

--- a/webroot/js/components/chat/chat-input.js
+++ b/webroot/js/components/chat/chat-input.js
@ -16,7 +16,7 @@ export default class ChatInput extends Component {
				@@ -16,7 +16,7 @@ export default class ChatInput extends Component {
    this.emojiPickerButton = createRef();

    this.messageCharCount = 0;
-		this.maxMessageLength = 500;
+    this.maxMessageLength = 500;
    this.maxMessageBuffer = 20;

    this.emojiPicker = null;
@ -98,94 +98,107 @@ export default class ChatInput extends Component {
				@@ -98,94 +98,107 @@ export default class ChatInput extends Component {
  }

  // autocomplete user names
-	autoCompleteNames() {
+  autoCompleteNames() {
    const { chatUserNames } = this.props;
-		const { inputHTML } = this.state;
-		const position = getCaretPosition(this.formMessageInput.current);
-		const at = inputHTML.lastIndexOf('@', position - 1);
-		if (at === -1) {
-			return false;
-		}
+    const { inputHTML } = this.state;
+    const position = getCaretPosition(this.formMessageInput.current);
+    const at = inputHTML.lastIndexOf('@', position - 1);
+    if (at === -1) {
+      return false;
+    }

-		let partial = inputHTML.substring(at + 1, position).trim();
+    let partial = inputHTML.substring(at + 1, position).trim();

-		if (partial === this.suggestion) {
-			partial = this.partial;
-		} else {
-			this.partial = partial;
-		}
+    if (partial === this.suggestion) {
+      partial = this.partial;
+    } else {
+      this.partial = partial;
+    }

-		const possibilities = chatUserNames.filter(function (username) {
-			return username.toLowerCase().startsWith(partial.toLowerCase());
-		});
+    const possibilities = chatUserNames.filter(function (username) {
+      return username.toLowerCase().startsWith(partial.toLowerCase());
+    });

-		if (this.completionIndex === undefined || ++this.completionIndex >= possibilities.length) {
-			this.completionIndex = 0;
-		}
+    if (this.completionIndex === undefined || ++this.completionIndex >= possibilities.length) {
+      this.completionIndex = 0;
+    }

-		if (possibilities.length > 0) {
-			this.suggestion = possibilities[this.completionIndex];
+    if (possibilities.length > 0) {
+      this.suggestion = possibilities[this.completionIndex];

      this.setState({
        inputHTML: inputHTML.substring(0, at + 1) + this.suggestion + ' ' + inputHTML.substring(position),
      })
-		}
+    }

-		return true;
+    return true;
  }

  handleMessageInputKeydown(event) {
-    const okCodes = [37,38,39,40,16,91,18,46,8];
+    const okCodes = [
+      'ArrowLeft',
+      'ArrowUp',
+      'ArrowRight',
+      'ArrowDown',
+      'Shift',
+      'Meta',
+      'Alt',
+      'Delete',
+      'Backspace',
+    ];
+    // const okCodes = [37,38,39,40,16,91,18,46,8];//left, up , right , down , shift, left window key, alt, delete, backspace
    const formField = this.formMessageInput.current;

    let textValue = formField.innerText.trim(); // get this only to count chars

    let numCharsLeft = this.maxMessageLength - textValue.length;
-		if (event.keyCode === 13) { // enter
-			if (!this.prepNewLine) {
-				this.sendMessage();
-				event.preventDefault();
-				this.prepNewLine = false;
-				return;
-			}
-		}
-		if (event.keyCode === 16 || event.keyCode === 17) { // ctrl, shift
-			this.prepNewLine = true;
-		}
-		if (event.keyCode === 9) { // tab
-			if (this.autoCompleteNames()) {
-				event.preventDefault();
-
-				// value could have been changed, update char count
-				textValue = formField.innerText.trim();
-				numCharsLeft = this.maxMessageLength - textValue.length;
-			}
-		}
+    const key = event.key;
+
+    if (key === 'Enter') {
+      if (!this.prepNewLine) {
+        this.sendMessage();
+        event.preventDefault();
+        this.prepNewLine = false;
+        return;
+      }
+    }
+    if (key === 'Control' || key === 'Shift') {
+      this.prepNewLine = true;
+    }
+    if (key === 'Tab') {
+      if (this.autoCompleteNames()) {
+        event.preventDefault();
+
+        // value could have been changed, update char count
+        textValue = formField.innerText.trim();
+        numCharsLeft = this.maxMessageLength - textValue.length;
+      }
+    }

    // text count
-		if (numCharsLeft <= this.maxMessageBuffer) {
-			this.setState({
+    if (numCharsLeft <= this.maxMessageBuffer) {
+      this.setState({
        inputWarning: `${numCharsLeft} chars left`,
      });
-			if (numCharsLeft <= 0 && !okCodes.includes(event.keyCode)) {
-				event.preventDefault(); // prevent typing more
-				return;
-			}
-		} else {
+      if (numCharsLeft <= 0 && !okCodes.includes(key)) {
+        event.preventDefault(); // prevent typing more
+        return;
+      }
+    } else {
      this.setState({
        inputWarning: '',
      });
-		}
-	}
+    }
+  }

-	handleMessageInputKeyup(event) {
-		if (event.keyCode === 16 || event.keyCode === 17) { // ctrl, shift
-			this.prepNewLine = false;
-		}
-	}
+  handleMessageInputKeyup(event) {
+    if (event.key === 'Control' || event.key === 'Shift') {
+      this.prepNewLine = false;
+    }
+  }

-	handleMessageInputBlur(event) {
-		this.prepNewLine = false;
+  handleMessageInputBlur(event) {
+    this.prepNewLine = false;
  }

  handlePaste(event) {
--- a/webroot/js/components/chat/chat.js
+++ b/webroot/js/components/chat/chat.js
@ -95,9 +95,9 @@ export default class Chat extends Component {
				@@ -95,9 +95,9 @@ export default class Chat extends Component {
  sendUsernameChange(oldName, newName, image) {
 		const nameChange = {
 			type: SOCKET_MESSAGE_TYPES.NAME_CHANGE,
-			oldName: oldName,
-			newName: newName,
-			image: image,
+			oldName,
+			newName,
+			image,
 		};
 		this.websocket.send(nameChange);
  }
@ -106,12 +106,14 @@ export default class Chat extends Component {
				@@ -106,12 +106,14 @@ export default class Chat extends Component {
    this.addMessage(message);
  }

-  // if incoming message has same id as existing message, don't add it
  addMessage(message) {
    const { messages: curMessages } = this.state;
+
+    // if incoming message has same id as existing message, don't add it
    const existing = curMessages.filter(function (item) {
      return item.id === message.id;
    })
+
    if (existing.length === 0 || !existing) {
      const newState = {
        messages: [...curMessages, message],
--- a/webroot/js/utils/chat.js
+++ b/webroot/js/utils/chat.js
@ -112,7 +112,10 @@ function getYoutubeIdFromURL(url) {
				@@ -112,7 +112,10 @@ function getYoutubeIdFromURL(url) {
 }

 function getYoutubeEmbedFromID(id) {
-	return `<iframe class="chat-embed youtube-embed" src="//www.youtube.com/embed/${id}" frameborder="0" allowfullscreen></iframe>`;
+  return `
+    <div class="chat-embed youtube-embed">
+      <lite-youtube videoid="${id}" />
+    </div>`;
 }

 function getInstagramEmbedFromURL(url) {