preact app integration

webroot/index2.html

@@ -30,6 +30,7 @@
 
     <link href="./styles/layout.css" rel="stylesheet" />
     <link href="./styles/chat.css" rel="stylesheet" />
+    <link href="./styles/user-content.css" rel="stylesheet" />
 
   </head>
 

webroot/js/app2.js

@@ -3,11 +3,28 @@ import htm from 'https://unpkg.com/htm?module';
 const html = htm.bind(h);
 
 
+import SocialIcon from './social.js';
 import UsernameForm from './chat/username.js';
 import Chat from './chat/chat.js';
 import Websocket from './websocket.js';
-
-import { getLocalStorage, generateAvatar, generateUsername, URL_OWNCAST, URL_CONFIG, URL_STATUS, addNewlines } from './utils.js';
+import { OwncastPlayer } from './player.js';
+
+import {
+  getLocalStorage,
+  generateAvatar,
+  generateUsername,
+  URL_OWNCAST,
+  URL_CONFIG,
+  URL_STATUS,
+  addNewlines,
+  pluralize,
+  TIMER_STATUS_UPDATE,
+  TIMER_DISABLE_CHAT_AFTER_OFFLINE,
+  TIMER_STREAM_DURATION_COUNTER,
+  TEMP_IMAGE,
+  MESSAGE_OFFLINE,
+  MESSAGE_ONLINE,
+} from './utils.js';
 import { KEY_USERNAME, KEY_AVATAR,  } from './utils/chat.js';
 
 export default class App extends Component {
@@ -16,13 +33,22 @@ export default class App extends Component {
 
     this.state = {
       websocket: new Websocket(),
-      chatEnabled: true, // always true for standalone chat
+      displayChat: false, // chat panel state
+      chatEnabled: false, // chat input box state
       username: getLocalStorage(KEY_USERNAME) || generateUsername(),
       userAvatarImage: getLocalStorage(KEY_AVATAR) || generateAvatar(`${this.username}${Date.now()}`),
 
-      streamStatus: null,
-      player: null,
       configData: {},
+      extraUserContent: '',
+
+      playerActive: false, // player object is active
+      streamOnline: false,  // stream is active/online
+
+      //status
+      streamStatusMessage: MESSAGE_OFFLINE,
+      viewerCount: '',
+      sessionMaxViewerCount: '',
+      overallMaxViewerCount: '',
     };
 
     // timers
@@ -32,25 +58,48 @@ export default class App extends Component {
     this.disableChatTimer = null;
     this.streamDurationTimer = null;
 
+    // misc dom events
+    this.handleChatPanelToggle = this.handleChatPanelToggle.bind(this);
     this.handleUsernameChange = this.handleUsernameChange.bind(this);
+
+    this.handleOfflineMode = this.handleOfflineMode.bind(this);
+    this.handleOnlineMode = this.handleOnlineMode.bind(this);
+    this.disableChatInput = this.disableChatInput.bind(this);
+
+    // player events
+    this.handlePlayerReady = this.handlePlayerReady.bind(this);
+    this.handlePlayerPlaying = this.handlePlayerPlaying.bind(this);
+    this.handlePlayerEnded = this.handlePlayerEnded.bind(this);
+    this.handlePlayerError = this.handlePlayerError.bind(this);
+
+    // fetch events
     this.getConfig = this.getConfig.bind(this);
     this.getStreamStatus = this.getStreamStatus.bind(this);
     this.getExtraUserContent = this.getExtraUserContent.bind(this);
 
+
   }
 
   componentDidMount() {
     this.getConfig();
 
-    // DO LATER..
-    // this.player = new OwncastPlayer();
-    // this.player.setupPlayerCallbacks({
-    //   onReady: this.handlePlayerReady,
-    //   onPlaying: this.handlePlayerPlaying,
-    //   onEnded: this.handlePlayerEnded,
-    //   onError: this.handlePlayerError,
-    // });
-    // this.player.init();
+    this.player = new OwncastPlayer();
+    this.player.setupPlayerCallbacks({
+      onReady: this.handlePlayerReady,
+      onPlaying: this.handlePlayerPlaying,
+      onEnded: this.handlePlayerEnded,
+      onError: this.handlePlayerError,
+    });
+    this.player.init();
+  }
+
+  componentWillUnmount() {
+    // clear all the timers
+    clearInterval(this.playerRestartTimer);
+    clearInterval(this.offlineTimer);
+    clearInterval(this.statusTimer);
+    clearTimeout(this.disableChatTimer);
+    clearInterval(this.streamDurationTimer);
   }
 
   // fetch /config data
@@ -98,8 +147,9 @@ export default class App extends Component {
         return response.text();
       })
       .then(text => {
-        const descriptionHTML = new showdown.Converter().makeHtml(text);
-        this.vueApp.extraUserContent = descriptionHTML;
+        this.setState({
+          extraUserContent: new showdown.Converter().makeHtml(text),
+        });
       })
       .catch(error => {
         this.handleNetworkingError(`Fetch extra content: ${error}`);
@@ -128,66 +178,89 @@ export default class App extends Component {
     if (!status) {
       return;
     }
-    // update UI
-    this.vueApp.viewerCount = status.viewerCount;
-    this.vueApp.sessionMaxViewerCount = status.sessionMaxViewerCount;
-    this.vueApp.overallMaxViewerCount = status.overallMaxViewerCount;
+    const {
+      viewerCount,
+      sessionMaxViewerCount,
+      overallMaxViewerCount,
+      online,
+    } = status;
+    const { streamOnline: curStreamOnline } = this.state;
 
     this.lastDisconnectTime = status.lastDisconnectTime;
 
-    if (!this.streamStatus) {
-      // display offline mode the first time we get status, and it's offline.
-      if (!status.online) {
-        this.handleOfflineMode();
-      } else {
-        this.handleOnlineMode();
-      }
-    } else {
-      if (status.online && !this.streamStatus.online) {
-        // stream has just come online.
-        this.handleOnlineMode();
-      } else if (!status.online && this.streamStatus.online) {
-        // stream has just flipped offline.
-        this.handleOfflineMode();
-      }
+    if (status.online && !curStreamOnline) {
+      // stream has just come online.
+      this.handleOnlineMode();
+    } else if (!status.online && curStreamOnline) {
+      // stream has just flipped offline.
+      this.handleOfflineMode();
     }
-
-    // keep a local copy
-    this.streamStatus = status;
-
     if (status.online) {
       // only do this if video is paused, so no unnecessary img fetches
       if (this.player.vjsPlayer && this.player.vjsPlayer.paused()) {
         this.player.setPoster();
       }
     }
+    this.setState({
+      viewerCount,
+      sessionMaxViewerCount,
+      overallMaxViewerCount,
+      streamOnline: online,
+    });
+  }
+
+  // when videojs player is ready, start polling for stream
+  handlePlayerReady() {
+    this.getStreamStatus();
+    this.statusTimer = setInterval(this.getStreamStatus, TIMER_STATUS_UPDATE);
+  }
+
+  handlePlayerPlaying() {
+    // do something?
+  }
+
+
+  // likely called some time after stream status has gone offline.
+  // basically hide video and show underlying "poster"
+  handlePlayerEnded() {
+    this.setState({
+      playerActive: false,
+    });
+  }
+
+  handlePlayerError() {
+    // do something?
+    this.handleOfflineMode();
+    this.handlePlayerEnded();
   }
 
   // stop status timer and disable chat after some time.
   handleOfflineMode() {
-    this.vueApp.isOnline = false;
     clearInterval(this.streamDurationTimer);
-    this.vueApp.streamStatus = MESSAGE_OFFLINE;
-    if (this.streamStatus) {
-      const remainingChatTime = TIMER_DISABLE_CHAT_AFTER_OFFLINE - (Date.now() - new Date(this.lastDisconnectTime));
-      const countdown = (remainingChatTime < 0) ? 0 : remainingChatTime;
-      this.disableChatTimer = setTimeout(this.messagingInterface.disableChat, countdown);
-    }
+    const remainingChatTime = TIMER_DISABLE_CHAT_AFTER_OFFLINE - (Date.now() - new Date(this.lastDisconnectTime));
+    const countdown = (remainingChatTime < 0) ? 0 : remainingChatTime;
+    this.disableChatTimer = setTimeout(this.disableChatInput, countdown);
+    this.setState({
+      streamOnline: false,
+      streamStatusMessage: MESSAGE_OFFLINE,
+    });
   }
 
   // play video!
   handleOnlineMode() {
-    this.vueApp.playerOn = true;
-    this.vueApp.isOnline = true;
-    this.vueApp.streamStatus = MESSAGE_ONLINE;
-
     this.player.startPlayer();
     clearTimeout(this.disableChatTimer);
     this.disableChatTimer = null;
-    this.messagingInterface.enableChat();
 
     this.streamDurationTimer =
       setInterval(this.setCurrentStreamDuration, TIMER_STREAM_DURATION_COUNTER);
+
+    this.setState({
+      playerActive: true,
+      streamOnline: true,
+      chatEnabled: true,
+      streamStatusMessage: MESSAGE_ONLINE,
+    });
   }
 
 
@@ -198,10 +271,16 @@ export default class App extends Component {
     });
   }
 
-  handleChatToggle() {
-    const { chatEnabled: curChatEnabled } = this.state;
+  handleChatPanelToggle() {
+    const { displayChat: curDisplayed } = this.state;
+    this.setState({
+      displayChat: !curDisplayed,
+    });
+  }
+
+  disableChatInput() {
     this.setState({
-      chatEnabled: !curChatEnabled,
+      chatEnabled: false,
     });
   }
 
@@ -210,49 +289,81 @@ export default class App extends Component {
   }
 
   render(props, state) {
-    const { username, userAvatarImage, websocket, configData } = state;
+    const {
+      username,
+      userAvatarImage,
+      websocket,
+      configData,
+      extraUserContent,
+      displayChat,
+      viewerCount,
+      sessionMaxViewerCount,
+      overallMaxViewerCount,
+      playerActive,
+      streamOnline,
+      streamStatusMessage,
+      chatEnabled,
+    } = state;
     const {
       version: appVersion,
       logo = {},
-      socialHandles,
-      name: streamnerName,
+      socialHandles = [],
+      name: streamerName,
       summary,
-      tags,
+      tags = [],
       title,
     } = configData;
-    const { small: smallLogo, large: largeLogo } = logo;
+    const { small: smallLogo = TEMP_IMAGE, large: largeLogo = TEMP_IMAGE } = logo;
 
     const bgLogo = { backgroundImage: `url(${smallLogo})` };
     const bgLogoLarge = { backgroundImage: `url(${largeLogo})` };
 
-    // not needed for standalone, just messages only. remove later.
+    const tagList = !tags.length ?
+      null :
+      tags.map((tag, index) => html`
+        <li key="tag${index}" class="tag rounded-sm text-gray-100 bg-gray-700">${tag}</li>
+      `);
+
+    const socialIconsList =
+      !socialHandles.length ?
+      null :
+      socialHandles.map((item, index) => html`
+        <li key="social${index}">
+          <${SocialIcon} platform=${item.platform} url=${item.url} />
+        </li>
+      `);
+
+
+    const chatClass = displayChat ? 'chat' : 'no-chat';
+    const mainClass = playerActive ? 'online' : '';
+    const streamInfoClass = streamOnline ? 'online' : '';
     return (
       html`
-        <div id="app-container" class="flex chat">
+        <div id="app-container" class="flex ${chatClass}">
           <div id="top-content">
             <header class="flex border-b border-gray-900 border-solid shadow-md">
-              <h1 v-cloak class="flex text-gray-400">
+              <h1 class="flex text-gray-400">
                 <span
                   id="logo-container"
                   class="rounded-full bg-white px-1 py-1"
                   style=${bgLogo}
                 >
-                  <img class="logo visually-hidden" src=${smallLogo}>
+                  <img class="logo visually-hidden" src=${smallLogo} />
                 </span>
                 <span class="instance-title">${title}</span>
               </h1>
-
-              <${UsernameForm}
-                username=${username}
-                userAvatarImage=${userAvatarImage}
-                handleUsernameChange=${this.handleUsernameChange}
-                handleChatToggle=${this.handleChatToggle}
-              />
-
+              <div id="user-options-container" class="flex">
+                <${UsernameForm}
+                  username=${username}
+                  userAvatarImage=${userAvatarImage}
+                  handleUsernameChange=${this.handleUsernameChange}
+                />
+                <button type="button" id="chat-toggle" onClick=${this.handleChatPanelToggle} class="flex bg-gray-800 hover:bg-gray-700">💬</button>
+              </div>
             </header>
           </div>
 
-          <main>
+          <main class=${mainClass}>
             <div
               id="video-container"
               class="flex owncast-video-container bg-black"
@@ -269,23 +380,46 @@ export default class App extends Component {
             </div>
 
 
-            <section id="stream-info" aria-label="Stream status" class="flex font-mono bg-gray-900 text-indigo-200 shadow-md border-b border-gray-100 border-solid">
-              <span>{{ streamStatus }}</span>
-              <span v-if="isOnline">{{ viewerCount }} {{ 'viewer' | plural(viewerCount) }}.</span>
-              <span v-if="isOnline">Max {{ sessionMaxViewerCount }} {{ 'viewer' | plural(sessionMaxViewerCount) }}.</span>
-              <span v-if="isOnline">{{ overallMaxViewerCount }} overall.</span>
+            <section id="stream-info" aria-label="Stream status" class="flex font-mono bg-gray-900 text-indigo-200 shadow-md border-b border-gray-100 border-solid ${streamInfoClass}">
+              <span>${streamStatusMessage}</span>
+              <span>${viewerCount} ${pluralize('viewer', viewerCount)}.</span>
+              <span>Max ${pluralize('viewer', sessionMaxViewerCount)}.</span>
+              <span>${overallMaxViewerCount} overall.</span>
             </section>
           </main>
 
           <section id="user-content" aria-label="User information">
-            <user-details
-              v-bind:logo="logo"
-              v-bind:platforms="socialHandles"
-              v-bind:summary="summary"
-              v-bind:tags="tags"
-            >{{streamerName}}</user-details>
-
-            <div v-html="extraUserContent" class="extra-user-content">{{extraUserContent}}</div>
+            <div class="user-content">
+              <div
+                class="user-image rounded-full bg-white"
+                style=${bgLogoLarge}
+              >
+                <img
+                  class="logo visually-hidden"
+                  alt="Logo"
+                  src=${largeLogo}
+                >
+              </div>
+              <div class="user-content-header border-b border-gray-500 border-solid">
+                <h2 class="font-semibold">
+                  About
+                  <span class="streamer-name text-indigo-600">${streamerName}</span>
+                </h2>
+                <ul class="social-list flex" v-if="this.platforms.length">
+                  <span class="follow-label">Follow me: </span>
+                  ${socialIconsList}
+                </ul>
+                <div class="stream-summary" dangerouslySetInnerHTML=${{ __html: summary }}></div>
+                <ul class="tag-list flex">
+                  ${tagList}
+                </ul>
+              </div>
+            </div>
+            <div
+              id="extra-user-content"
+              class="extra-user-content"
+              dangerouslySetInnerHTML=${{ __html: extraUserContent }}
+            ></div>
           </section>
 
           <footer class="flex">
@@ -300,7 +434,7 @@ export default class App extends Component {
           websocket=${websocket}
           username=${username}
           userAvatarImage=${userAvatarImage}
-          chatEnabled
+          chatEnabled=${chatEnabled}
         />
 
       </div>

webroot/js/chat/chat-input.js

@@ -240,8 +240,8 @@ export default class ChatInput extends Component {
 
           <${ContentEditable}
             class="appearance-none block w-full bg-gray-200 text-gray-700 border border-black-500 rounded py-2 px-2 my-2 focus:bg-white"
-            placeholderText=${placeholderText}
 
+            placeholderText=${placeholderText}
             innerRef=${this.formMessageInput}
             html=${inputHTML}
             disabled=${!inputEnabled}
@@ -251,7 +251,7 @@ export default class ChatInput extends Component {
             onBlur=${this.handleMessageInputBlur}
 
             onPaste=${this.handlePaste}
-            />
+          />
 
           <div id="message-form-actions" class="flex">
             <span id="message-form-warning" class="text-red-600 text-xs">${inputWarning}</span>

webroot/js/chat/standalone.js

@@ -48,7 +48,6 @@ export default class StandaloneChat extends Component {
           websocket=${websocket}
           username=${username}
           userAvatarImage=${userAvatarImage}
-          chatEnabled
           messagesOnly
         />
       `);
@@ -69,7 +68,6 @@ export default class StandaloneChat extends Component {
             websocket=${websocket}
             username=${username}
             userAvatarImage=${userAvatarImage}
-            chatEnabled
           />
         </${Fragment}>
     `);

webroot/js/chat/username.js

@@ -59,7 +59,7 @@ export default class UsernameForm extends Component {
   }
 
   render(props, state) {
-    const { username, userAvatarImage, handleChatToggle } = props;
+    const { username, userAvatarImage } = props;
     const { displayForm } = state;
 
     const narrowSpace = document.body.clientWidth < 640;
@@ -76,34 +76,31 @@ export default class UsernameForm extends Component {
     }
     return (
       html`
-        <div id="user-options-container" class="flex">
-          <div id="user-info">
-            <div id="user-info-display" style=${styles.info} title="Click to update user name" class="flex" onClick=${this.handleDisplayForm}>
-              <img
-                src=${userAvatarImage}
-                alt=""
-                id="username-avatar"
-                class="rounded-full bg-black bg-opacity-50 border border-solid border-gray-700"
-              />
-              <span id="username-display" class="text-indigo-600">${username}</span>
-            </div>
+        <div id="user-info">
+          <div id="user-info-display" style=${styles.info} title="Click to update user name" class="flex" onClick=${this.handleDisplayForm}>
+            <img
+              src=${userAvatarImage}
+              alt=""
+              id="username-avatar"
+              class="rounded-full bg-black bg-opacity-50 border border-solid border-gray-700"
+            />
+            <span id="username-display" class="text-indigo-600">${username}</span>
+          </div>
 
-            <div id="user-info-change" style=${styles.form}>
-              <input type="text"
-                id="username-change-input"
-                class="appearance-none block w-full bg-gray-200 text-gray-700 border border-black-500 rounded py-1 px-1 leading-tight focus:bg-white"
-                maxlength="100"
-                placeholder="Update username"
-                value=${username}
-                onKeydown=${this.handleKeydown}
-                ref=${this.textInput}
-              />
-              <button id="button-update-username" onClick=${this.handleUpdateUsername} class="bg-blue-500 hover:bg-blue-700 text-white py-1 px-1 rounded user-btn">Update</button>
+          <div id="user-info-change" style=${styles.form}>
+            <input type="text"
+              id="username-change-input"
+              class="appearance-none block w-full bg-gray-200 text-gray-700 border border-black-500 rounded py-1 px-1 leading-tight focus:bg-white"
+              maxlength="100"
+              placeholder="Update username"
+              value=${username}
+              onKeydown=${this.handleKeydown}
+              ref=${this.textInput}
+            />
+            <button id="button-update-username" onClick=${this.handleUpdateUsername} class="bg-blue-500 hover:bg-blue-700 text-white py-1 px-1 rounded user-btn">Update</button>
 
-              <button id="button-cancel-change" onClick=${this.handleHideForm} class="bg-gray-900 hover:bg-gray-800 py-1 px-2 rounded user-btn text-white text-opacity-50" title="cancel">X</button>
-            </div>
+            <button id="button-cancel-change" onClick=${this.handleHideForm} class="bg-gray-900 hover:bg-gray-800 py-1 px-2 rounded user-btn text-white text-opacity-50" title="cancel">X</button>
           </div>
-          <button type="button" id="chat-toggle" onClick=${handleChatToggle} class="flex bg-gray-800 hover:bg-gray-700">💬</button>
         </div>
     `);
   }

webroot/js/player.js

@@ -17,7 +17,6 @@ const VIDEO_OPTIONS = {
     vhs: {
       // used to select the lowest bitrate playlist initially. This helps to decrease playback start time. This setting is false by default.
       enableLowInitialPlaylist: true,
-
     }
   },
   liveTracker: {
@@ -128,27 +127,25 @@ 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 
+
+          // 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!
           constructor: function () {
             videoJsButtonClass.call(this, player);
-          }, // notice the comma
-    
+          },
+
           handleClick: function () {
             const videoElement = document.getElementsByTagName('video')[0];
             videoElement.webkitShowPlaybackTargetPicker();
-          }
+          },
         });
-    
+
         var concreteButtonInstance = this.vjsPlayer.controlBar.addChild(new concreteButtonClass());
         concreteButtonInstance.addClass("vjs-airplay");
       }
-    });  
+    });
   }
-  
-
 }
 
-export { OwncastPlayer };
+export { OwncastPlayer };

webroot/js/social.js

@@ -1,3 +1,5 @@
+import { html } from "https://unpkg.com/htm/preact/index.mjs?module";
+
 const SOCIAL_PLATFORMS = {
   default: {
     name: "default",
@@ -70,58 +72,31 @@ const SOCIAL_PLATFORMS = {
   },
 };
 
-Vue.component('social-list', {
-  props: ['platforms'],
-
-  template: `
-    <ul class="social-list flex" v-if="this.platforms.length">
-      <span class="follow-label">Follow me: </span>
-      <user-social-icon 
-        v-for="(item, index) in this.platforms"
-        v-if="item.platform && item.url"
-        v-bind:key="index"
-        v-bind:platform="item.platform"
-        v-bind:url="item.url"
-      />
-    </ul>
-  `,
-
-});
+export default function SocialIcon(props) {
+  const { platform, url } = props;
+  const platformInfo = SOCIAL_PLATFORMS[platform.toLowerCase()];
+  const inList = !!platformInfo;
+  const imgRow = inList ? platformInfo.imgPos[0] : 0;
+  const imgCol = inList ? platformInfo.imgPos[1] : 0;
 
-Vue.component('user-social-icon', {
-  props: ['platform', 'url'],
-  data: function() {
-    const platformInfo = SOCIAL_PLATFORMS[this.platform.toLowerCase()];
-    const inList = !!platformInfo;
-    const imgRow = inList ? platformInfo.imgPos[0] : 0;
-    const imgCol = inList ? platformInfo.imgPos[1] : 0;
-    return {
-      name: inList ? platformInfo.name : this.platform,
-      link: this.url,
+  const name = inList ? platformInfo.name : platform;
 
-      style: `--imgRow: -${imgRow}; --imgCol: -${imgCol};`,
-      itemClass: {
-        "user-social-item": true,
-        "flex": true,
-        "use-default": !inList,        
-      },
-      labelClass: {
-        "platform-label": true,
-        "visually-hidden": inList,
-        "text-indigo-800": true,
-      },
-    };
-  },
-  template: `
-    <li>
-      <a
-        v-bind:class="itemClass"
-        target="_blank"
-        :href="link"
-      >
-        <span class="platform-icon rounded-lg" :style="style" />
-        <span v-bind:class="labelClass">Find me on {{platform}}</span>
+  const style = `--imgRow: -${imgRow}; --imgCol: -${imgCol};`;
+  const itemClass = {
+    "user-social-item": true,
+    "flex": true,
+    "use-default": !inList,
+  };
+  const labelClass = {
+    "platform-label": true,
+    "visually-hidden": inList,
+    "text-indigo-800": true,
+  };
+  return (
+    html`
+      <a class=${itemClass} target="_blank" href=${url}>
+        <span class="platform-icon rounded-lg" style=${style}></span>
+        <span class=${labelClass}>Find me on ${name}</span>
       </a>
-    </li>
-  `,
-});
+  `);
+}

webroot/js/utils.js

@@ -7,6 +7,14 @@ export const URL_CONFIG = `/config`;
 export const URL_STREAM = `/hls/stream.m3u8`;
 export const URL_WEBSOCKET = `${location.protocol === 'https:' ? 'wss' : 'ws'}://${location.host}/entry`;
 
+export const TIMER_STATUS_UPDATE = 5000; // ms
+export const TIMER_DISABLE_CHAT_AFTER_OFFLINE = 5 * 60 * 1000; // 5 mins
+export const TIMER_STREAM_DURATION_COUNTER = 1000;
+export const TEMP_IMAGE = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
+
+export const MESSAGE_OFFLINE = 'Stream is offline.';
+export const MESSAGE_ONLINE = 'Stream is online';
+
 export const POSTER_DEFAULT = `/img/logo.png`;
 export const POSTER_THUMB = `/thumbnail.jpg`;
 
@@ -66,27 +74,27 @@ export function pluralize(string, count) {
 // Trying to determine if browser is mobile/tablet.
 // Source: https://developer.mozilla.org/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent
 export function hasTouchScreen() {
-  var hasTouchScreen = false;
+  let hasTouch = false;
   if ("maxTouchPoints" in navigator) {
-      hasTouchScreen = navigator.maxTouchPoints > 0;
+    hasTouch = navigator.maxTouchPoints > 0;
   } else if ("msMaxTouchPoints" in navigator) {
-      hasTouchScreen = navigator.msMaxTouchPoints > 0;
+    hasTouch = navigator.msMaxTouchPoints > 0;
   } else {
       var mQ = window.matchMedia && matchMedia("(pointer:coarse)");
       if (mQ && mQ.media === "(pointer:coarse)") {
-          hasTouchScreen = !!mQ.matches;
+        hasTouch = !!mQ.matches;
       } else if ('orientation' in window) {
-          hasTouchScreen = true; // deprecated, but good fallback
+        hasTouch = true; // deprecated, but good fallback
       } else {
           // Only as a last resort, fall back to user agent sniffing
           var UA = navigator.userAgent;
-          hasTouchScreen = (
+          hasTouch = (
               /\b(BlackBerry|webOS|iPhone|IEMobile)\b/i.test(UA) ||
               /\b(Android|Windows Phone|iPad|iPod)\b/i.test(UA)
           );
       }
   }
-  return hasTouchScreen;
+  return hasTouch;
 }
 
 // generate random avatar from https://robohash.org