make consts; clean up get status

webroot/index.html

@@ -79,7 +79,7 @@ GW TODO:
             autoplay
             playsinline
             muted
-            poster="/thumbnail.jpg"
+            poster="./img/logo.png"
           >
           </video>
         </div>

webroot/js/app.js

@@ -4,7 +4,7 @@ async function setupApp() {
   window.app = new Vue({
     el: "#app-container",
     data: {
-      streamStatus: "Stream is offline.", // Default state.
+      streamStatus: MESSAGE_OFFLINE, // Default state.
       viewerCount: 0,
       sessionMaxViewerCount: 0,
       overallMaxViewerCount: 0,
@@ -67,17 +67,13 @@ var websocketReconnectTimer;
 function setupWebsocket() {
   clearTimeout(websocketReconnectTimer);
 
-  // Uncomment to point to somewhere other than goth.land
+  var ws = new WebSocket(URL_WEBSOCKET);
-  const protocol = location.protocol == "https:" ? "wss" : "ws"
-  // var ws = new WebSocket(protocol + "://" + location.host + "/entry")
-
-  var ws = new WebSocket("wss://goth.land/entry")
 
   ws.onmessage = (e) => {
-    const model = JSON.parse(e.data)
+    const model = JSON.parse(e.data);
 
     // Ignore non-chat messages (such as keepalive PINGs)
-    if (model.type !== SocketMessageTypes.CHAT) { return; }
+    if (model.type !== SOCKET_MESSAGE_TYPES.CHAT) { return; }
 
     const message = new Message(model);
     

webroot/js/message.js

@@ -1,8 +1,3 @@
-const SocketMessageTypes = {
-	CHAT: 'CHAT',
-	PING: 'PING'
-}
-
 class Message {
 	constructor(model) {
 		this.author = model.author;
@@ -39,10 +34,6 @@ class Messaging {
 		this.maxMessageLength = 500;
 		this.maxMessageBuffer = 20;
 
-		this.keyUsername = 'owncast_username';
-		this.keyUserAvatar = 'owncast_avatar';
-		this.keyChatDisplayed = 'owncast_chat';
-
 		this.tagAppContainer = document.querySelector('#app-container');
 		this.tagChatToggle = document.querySelector('#chat-toggle');
 		this.tagUserInfoChanger = document.querySelector('#user-info-change');
@@ -89,16 +80,11 @@ class Messaging {
 	}
 
 	initLocalStates() {
-		this.username = getLocalStorage(this.keyUsername) || generateUsername();
+		this.username = getLocalStorage(KEY_USERNAME) || generateUsername();
-		console.log("=== initt state", getLocalStorage(this.keyUserAvatar))
+		this.imgUsernameAvatar.src = getLocalStorage(KEY_AVATAR) || generateAvatar(this.username);
-		this.imgUsernameAvatar.src = getLocalStorage(this.keyUserAvatar) || generateAvatar(this.username);
-
-
-		console.log("===",this.imgUsernameAvatar.src)
-
 		this.updateUsernameFields(this.username);
 
-		this.chatDisplayed = getLocalStorage(this.keyChatDisplayed) || false;
+		this.chatDisplayed = getLocalStorage(KEY_CHAT_DISPLAYED) || false;
 		this.displayChat();
 	}
 	updateUsernameFields(username) {
@@ -134,9 +120,9 @@ class Messaging {
 	handleChatToggle() {
 		this.chatDisplayed = !this.chatDisplayed;
 		if (this.chatDisplayed) {
-			setLocalStorage(this.keyChatDisplayed, this.chatDisplayed);
+			setLocalStorage(KEY_CHAT_DISPLAYED, this.chatDisplayed);
 		} else {
-			clearLocalStorage(this.keyChatDisplayed);
+			clearLocalStorage(KEY_CHAT_DISPLAYED);
 		}
 		this.displayChat();
 	}
@@ -164,8 +150,8 @@ class Messaging {
 			this.username = newValue;
 			this.updateUsernameFields(newValue);
 			this.imgUsernameAvatar.src = generateAvatar(newValue);
-			setLocalStorage(this.keyUsername, newValue);
+			setLocalStorage(KEY_USERNAME, newValue);
-			setLocalStorage(this.keyUserAvatar, this.imgUsernameAvatar.src);
+			setLocalStorage(KEY_AVATAR, this.imgUsernameAvatar.src);
 		}
 		this.handleHideChangeNameForm();
 	}

webroot/js/player/player.js

@@ -1,11 +1,8 @@
-// const streamURL = '/hls/stream.m3u8';
-const streamURL = 'https://goth.land/hls/stream.m3u8'; // Uncomment me to point to remote video
-
 // style hackings
 window.VIDEOJS_NO_DYNAMIC_STYLE = true;
 
 // Create the player for the first time
-const player = videojs('video', null, function () {
+const player = videojs(VIDEO_ID, null, function () {
   getStatus();
   setInterval(getStatus, 5000);
   setupPlayerEventHandlers();
@@ -18,17 +15,12 @@ player.ready(function () {
 
 function resetPlayer(player) {
   player.reset();
-  player.src({ type: 'application/x-mpegURL', src: streamURL });
+  player.src({ type: 'application/x-mpegURL', src: URL_STREAM });
-  if (app.isOnline) {
+  setVideoPoster(app.isOnline);
-    player.poster('/thumbnail.jpg');
-  } else {
-    // Change this to some kind of offline image.
-    player.poster('/img/logo.png');
-  }
 }
 
 function setupPlayerEventHandlers() {
-  const player = videojs('video');
+  const player = videojs(VIDEO_ID);
 
   player.on('error', function (e) {
     console.log("Player error: ", e);
@@ -68,8 +60,8 @@ function setupPlayerEventHandlers() {
 
 function restartPlayer() {
   try {
-    console.log('restarting')
+    console.log('restarting', player.src())
-    const player = videojs('video');
+    const player = videojs(VIDEO_ID);
     player.pause();
     player.src(player.src()); // Reload the same video
     player.load();

webroot/js/status.js

@@ -1,42 +1,45 @@
 var playerRestartTimer;
 
-async function getStatus() {
-  const url = "/status";
-
-  try {
-    const response = await fetch(url);
-    const status = await response.json();
 
+function handleStatus(status) {
   clearTimeout(playerRestartTimer);
-
   if (!app.isOnline && status.online) {
-      // The stream was offline, but now it's online.  Force start of playback after an arbitrary
+    // The stream was offline, but now it's online.  Force start of playback after an arbitrary delay to make sure the stream has actual data ready to go.
-      // delay to make sure the stream has actual data ready to go.
+    playerRestartTimer = setTimeout(restartPlayer, 3000);
-      playerRestartTimer = setTimeout(function () {
-        restartPlayer();
-      }, 3000);
   }
 
-    app.streamStatus = status.online
+  app.streamStatus = status.online ? MESSAGE_ONLINE : MESSAGE_OFFLINE;
-      ? "Stream is online."
-      : "Stream is offline."
-
-    const player = videojs('video');
-    if (app.isOnline) {
-      player.poster('/thumbnail.jpg');
-    } else {
-      // Change this to some kind of offline image.
-      player.poster('/img/logo.png');
-    }
 
   app.viewerCount = status.viewerCount;
   app.sessionMaxViewerCount = status.sessionMaxViewerCount;
   app.overallMaxViewerCount = status.overallMaxViewerCount;
   app.isOnline = status.online;
+  setVideoPoster(app.isOnline);
 
-  } catch (e) {
-    app.streamStatus = "Stream server is offline."
-    app.viewerCount = 0
 }
 
+function handleOffline() {
+  const player = videojs(VIDEO_ID);
+  player.poster(POSTER_DEFAULT);
+  app.streamStatus = MESSAGE_OFFLINE;
+  app.viewerCount = 0;
+}
+
+function getStatus() {
+  const options = {
+    // mode: 'no-cors',
+  }
+  fetch(URL_STATUS, options)
+    .then(response => {
+      if (!response.ok) {
+        throw new Error(`Network response was not ok ${response.ok}`);
+      }
+      return response.json();
+    })
+    .then(json => {
+      handleStatus(json);
+    })
+    .catch(error => {
+      handleOffline();
+    });
 }

webroot/js/utils.js

@@ -1,3 +1,29 @@
+const MESSAGE_OFFLINE = 'Stream is offline.';
+const MESSAGE_ONLINE = 'Stream is online.';
+
+// const URL_PREFIX = ''; 
+const URL_PREFIX = 'https://goth.land'; 
+const URL_STATUS = `${URL_PREFIX}/status`;
+const URL_STREAM = `${URL_PREFIX}/hls/stream.m3u8`;
+
+const URL_WEBSOCKET = 'wss://goth.land/entry';
+// const URL_WEBSOCKET = `${location.protocol === 'https:' ? 'wss' : 'ws'}://${location.host}/entry`;
+
+const POSTER_DEFAULT = `${URL_PREFIX}/img/logo.png`;
+const POSTER_THUMB = `${URL_PREFIX}/thumbnail.jpg`;
+
+const SOCKET_MESSAGE_TYPES = {
+	CHAT: 'CHAT',
+	PING: 'PING'
+}
+
+const KEY_USERNAME = 'owncast_username';
+const KEY_AVATAR = 'owncast_avatar';
+const KEY_CHAT_DISPLAYED = 'owncast_chat';
+
+const VIDEO_ID = 'video';
+
+
 function getLocalStorage(key) {
   try {
     return localStorage.getItem(key);
@@ -88,3 +114,9 @@ function generateAvatar(hash) {
 function generateUsername() {
   return `User ${(Math.floor(Math.random() * 42) + 1)}`;
 }
+
+function setVideoPoster(online) {
+  const player = videojs(VIDEO_ID);
+  const poster = online ? POSTER_THUMB : POSTER_DEFAULT;
+  player.poster(poster);
+}