misc issue fixes (#496)

* rename social-icons to prevent adblockers from blocking scripts, fix for #491

* hide viewer count when stream is off, fixes #428

* show a notice in document title of num messages if window is blurred, #426

* display indicator when stream has gone onlnie or offline when window is blurred

webroot/js/components/chat/chat.js

@@ -16,10 +16,10 @@ export default class Chat extends Component {
     super(props, context);
 
     this.state = {
-      webSocketConnected: true,
-      messages: [],
       chatUserNames: [],
+      messages: [],
       newMessagesReceived: false,
+      webSocketConnected: true,
     };
 
     this.scrollableMessagesContainer = createRef();
@@ -27,16 +27,20 @@ export default class Chat extends Component {
     this.websocket = null;
     this.receivedFirstMessages = false;
 
+    this.windowBlurred = false;
+    this.numMessagesSinceBlur = 0;
+
     this.getChatHistory = this.getChatHistory.bind(this);
+    this.handleNetworkingError = this.handleNetworkingError.bind(this);
+    this.handleWindowBlur = this.handleWindowBlur.bind(this);
+    this.handleWindowFocus = this.handleWindowFocus.bind(this);
+    this.handleWindowResize = debounce(this.handleWindowResize.bind(this), 500);
+    this.messageListCallback = this.messageListCallback.bind(this);
     this.receivedWebsocketMessage = this.receivedWebsocketMessage.bind(this);
+    this.scrollToBottom = this.scrollToBottom.bind(this);
+    this.submitChat = this.submitChat.bind(this);
     this.websocketConnected = this.websocketConnected.bind(this);
     this.websocketDisconnected = this.websocketDisconnected.bind(this);
-    this.submitChat = this.submitChat.bind(this);
-    this.submitChat = this.submitChat.bind(this);
-    this.scrollToBottom = this.scrollToBottom.bind(this);
-    this.handleWindowResize = debounce(this.handleWindowResize.bind(this), 500);
-    this.handleNetworkingError = this.handleNetworkingError.bind(this);
-    this.messageListCallback = this.messageListCallback.bind(this);
   }
 
   componentDidMount() {
@@ -45,6 +49,11 @@ export default class Chat extends Component {
 
    window.addEventListener('resize', this.handleWindowResize);
 
+   if (!this.props.messagesOnly) {
+    window.addEventListener('blur', this.handleWindowBlur);
+    window.addEventListener('focus', this.handleWindowFocus);
+   }
+
    this.messageListObserver = new MutationObserver(this.messageListCallback);
    this.messageListObserver.observe(this.scrollableMessagesContainer.current, { childList: true });
   }
@@ -87,6 +96,10 @@ export default class Chat extends Component {
   }
   componentWillUnmount() {
     window.removeEventListener('resize', this.handleWindowResize);
+    if (!this.props.messagesOnly) {
+      window.removeEventListener('blur', this.handleWindowBlur);
+      window.removeEventListener('focus', this.handleWindowFocus);
+     }
     this.messageListObserver.disconnect();
   }
 
@@ -141,6 +154,7 @@ export default class Chat extends Component {
 
   addMessage(message) {
     const { messages: curMessages } = this.state;
+    const { messagesOnly } = this.props;
 
     // if incoming message has same id as existing message, don't add it
     const existing = curMessages.filter(function (item) {
@@ -157,6 +171,11 @@ export default class Chat extends Component {
       }
       this.setState(newState);
     }
+
+    // if window is blurred and we get a new message, add 1 to title
+    if (!messagesOnly && message.type === 'CHAT' && this.windowBlurred) {
+      this.numMessagesSinceBlur += 1;
+    }
   }
 
   websocketConnected() {
@@ -216,6 +235,16 @@ export default class Chat extends Component {
     this.scrollToBottom();
   }
 
+  handleWindowBlur() {
+    this.windowBlurred = true;
+  }
+
+  handleWindowFocus() {
+    this.windowBlurred = false;
+    this.numMessagesSinceBlur = 0;
+    window.document.title = this.props.instanceTitle;
+  }
+
   // if the messages list grows in number of child message nodes due to new messages received, scroll to bottom.
   messageListCallback(mutations) {
     const numMutations = mutations.length;
@@ -234,9 +263,18 @@ export default class Chat extends Component {
           });
         }
       }
+      // update document title if window blurred
+      if (this.numMessagesSinceBlur && !this.props.messagesOnly && this.windowBlurred) {
+        this.updateDocumentTitle();
+      }
     }
   };
 
+  updateDocumentTitle() {
+    const num = this.numMessagesSinceBlur > 10 ? '10+' : this.numMessagesSinceBlur;
+    window.document.title = `${num} 💬 :: ${this.props.instanceTitle}`;
+  }
+
   render(props, state) {
     const { username, messagesOnly, chatInputEnabled } = props;
     const { messages, chatUserNames, webSocketConnected } = state;

webroot/js/components/platform-logos-list.js

@@ -2,7 +2,7 @@ import { h, Component } 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 { SOCIAL_PLATFORMS } from '../utils/platforms.js';
 import { classNames } from '../utils/helpers.js';
 
 function SocialIcon(props) {
@@ -60,4 +60,4 @@ export default function (props) {
     <span class="follow-label text-xs font-bold mr-2 uppercase">Follow me:</span>
     ${list}
   </ul>`;
-} 
+}