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"));
-      })();
    </script>
  </body>
 </html>
--- a/webroot/index.html
+++ b/webroot/index.html
@ -28,30 +28,23 @@
				@@ -28,30 +28,23 @@
    <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>

    <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 App from './js/app.js';
-
-    (function () {
      render(html`<${App} />`, document.getElementById("app"));
-    })();
    </script>

-
    <noscript>
      <style>
        .noscript {
--- 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
@ -135,13 +135,26 @@ export default class ChatInput extends Component {
				@@ -135,13 +135,26 @@ export default class ChatInput extends Component {
  }

  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
+    const key = event.key;
+
+    if (key === 'Enter') {
      if (!this.prepNewLine) {
        this.sendMessage();
        event.preventDefault();
@ -149,10 +162,10 @@ export default class ChatInput extends Component {
				@@ -149,10 +162,10 @@ export default class ChatInput extends Component {
        return;
      }
    }
-		if (event.keyCode === 16 || event.keyCode === 17) { // ctrl, shift
+    if (key === 'Control' || key === 'Shift') {
      this.prepNewLine = true;
    }
-		if (event.keyCode === 9) { // tab
+    if (key === 'Tab') {
      if (this.autoCompleteNames()) {
        event.preventDefault();

@ -167,7 +180,7 @@ export default class ChatInput extends Component {
				@@ -167,7 +180,7 @@ export default class ChatInput extends Component {
      this.setState({
        inputWarning: `${numCharsLeft} chars left`,
      });
-			if (numCharsLeft <= 0 && !okCodes.includes(event.keyCode)) {
+      if (numCharsLeft <= 0 && !okCodes.includes(key)) {
        event.preventDefault(); // prevent typing more
        return;
      }
@ -179,7 +192,7 @@ export default class ChatInput extends Component {
				@@ -179,7 +192,7 @@ export default class ChatInput extends Component {
  }

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