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/app.js

@@ -3,7 +3,7 @@ import htm from '/js/web_modules/htm.js';
 const html = htm.bind(h);
 
 import { OwncastPlayer } from './components/player.js';
-import SocialIconsList from './components/social-icons-list.js';
+import SocialIconsList from './components/platform-logos-list.js';
 import UsernameForm from './components/chat/username.js';
 import VideoPoster from './components/video-poster.js';
 import Chat from './components/chat/chat.js';
@@ -44,6 +44,7 @@ export default class App extends Component {
 
     const chatStorage = getLocalStorage(KEY_CHAT_DISPLAYED);
     this.hasTouchScreen = hasTouchScreen();
+    this.windowBlurred = false;
 
     this.state = {
       websocket: new Websocket(),
@@ -81,6 +82,8 @@ export default class App extends Component {
     this.handleUsernameChange = this.handleUsernameChange.bind(this);
     this.handleFormFocus = this.handleFormFocus.bind(this);
     this.handleFormBlur = this.handleFormBlur.bind(this);
+    this.handleWindowBlur = this.handleWindowBlur.bind(this);
+    this.handleWindowFocus = this.handleWindowFocus.bind(this);
     this.handleWindowResize = debounce(this.handleWindowResize.bind(this), 250);
 
     this.handleOfflineMode = this.handleOfflineMode.bind(this);
@@ -102,6 +105,8 @@ export default class App extends Component {
   componentDidMount() {
     this.getConfig();
     window.addEventListener('resize', this.handleWindowResize);
+    window.addEventListener('blur', this.handleWindowBlur);
+    window.addEventListener('focus', this.handleWindowFocus);
     if (this.hasTouchScreen) {
       window.addEventListener('orientationchange', this.handleWindowResize);
     }
@@ -123,6 +128,8 @@ export default class App extends Component {
     clearTimeout(this.disableChatTimer);
     clearInterval(this.streamDurationTimer);
     window.removeEventListener('resize', this.handleWindowResize);
+    window.removeEventListener('blur', this.handleWindowBlur);
+    window.removeEventListener('focus', this.handleWindowFocus);
     if (this.hasTouchScreen) {
       window.removeEventListener('orientationchange', this.handleWindowResize);
     }
@@ -248,6 +255,10 @@ export default class App extends Component {
     if (this.player.vjsPlayer && this.player.vjsPlayer.paused()) {
       this.handlePlayerEnded();
     }
+
+    if (this.windowBlurred) {
+      document.title = ` 🔴 ${this.state.configData && this.state.configData.title}`;
+    }
   }
 
   // play video!
@@ -267,6 +278,10 @@ export default class App extends Component {
       chatInputEnabled: true,
       streamStatusMessage: MESSAGE_ONLINE,
     });
+
+    if (this.windowBlurred) {
+      document.title = ` 🟢 ${this.state.configData && this.state.configData.title}`;
+    }
   }
 
   setCurrentStreamDuration() {
@@ -335,6 +350,15 @@ export default class App extends Component {
     });
   }
 
+  handleWindowBlur() {
+    this.windowBlurred = true;
+  }
+
+  handleWindowFocus() {
+    this.windowBlurred = false;
+    window.document.title = this.state.configData && this.state.configData.title;
+  }
+
   render(props, state) {
     const {
       chatInputEnabled,
@@ -381,7 +405,6 @@ export default class App extends Component {
       : null;
 
     const mainClass = playerActive ? 'online' : '';
-    const streamInfoClass = streamOnline ? 'online' : ''; // need?
     const isPortrait = this.hasTouchScreen && orientation === ORIENTATION_PORTRAIT;
     const shortHeight = windowHeight <= HEIGHT_SHORT_WIDE && !isPortrait;
     const singleColMode = windowWidth <= WIDTH_SINGLE_COL && !shortHeight;
@@ -462,10 +485,10 @@ export default class App extends Component {
           <section
             id="stream-info"
             aria-label="Stream status"
-            class="flex text-center flex-row justify-between font-mono py-2 px-8 bg-gray-900 text-indigo-200 shadow-md border-b border-gray-100 border-solid ${streamInfoClass}"
+            class="flex text-center flex-row justify-between font-mono py-2 px-8 bg-gray-900 text-indigo-200 shadow-md border-b border-gray-100 border-solid"
           >
             <span>${streamStatusMessage}</span>
-            <span>${viewerCount} ${pluralize('viewer', viewerCount)}.</span>
+            <span id="stream-viewer-count">${viewerCount} ${pluralize('viewer', viewerCount)}.</span>
           </section>
         </main>
 
@@ -514,6 +537,7 @@ export default class App extends Component {
           websocket=${websocket}
           username=${username}
           chatInputEnabled=${chatInputEnabled}
+          instanceTitle=${title}
         />
       </div>
     `;