It builds

web/utils/apis.ts

@@ -0,0 +1,63 @@
+/* eslint-disable prefer-destructuring */
+const ADMIN_USERNAME = process.env.NEXT_PUBLIC_ADMIN_USERNAME;
+const ADMIN_STREAMKEY = process.env.NEXT_PUBLIC_ADMIN_STREAMKEY;
+const NEXT_PUBLIC_API_HOST = process.env.NEXT_PUBLIC_API_HOST;
+
+const API_LOCATION = `${NEXT_PUBLIC_API_HOST}api/admin/`;
+
+export const FETCH_INTERVAL = 15000;
+
+// Current inbound broadcaster info
+export const BROADCASTER = `${API_LOCATION}broadcaster`;
+
+// Disconnect inbound stream
+export const DISCONNECT = `${API_LOCATION}disconnect`;
+
+// Change the current streaming key in memory
+export const STREAMKEY_CHANGE = `${API_LOCATION}changekey`;
+
+// Current server config
+export const SERVER_CONFIG = `${API_LOCATION}serverconfig`;
+
+// Get viewer count over time
+export const VIEWERS_OVER_TIME = `${API_LOCATION}viewersOverTime`;
+
+// Get currently connected clients
+export const CONNECTED_CLIENTS = `${API_LOCATION}clients`;
+
+// Get hardware stats
+export const HARDWARE_STATS = `${API_LOCATION}hardwarestats`;
+
+// Get all logs
+export const LOGS_ALL = `${API_LOCATION}logs`;
+
+// Get warnings + errors
+export const LOGS_WARN = `${API_LOCATION}logs/warnings`;
+
+// Current Stream status.
+// This is literally the same as /api/status except it supports
+// auth.
+export const STREAM_STATUS = `${API_LOCATION}status`;
+
+export async function fetchData(url) {
+  const encoded = btoa(`${ADMIN_USERNAME}:${ADMIN_STREAMKEY}`);
+
+  try {
+    const response = await fetch(url, {
+      headers: {
+        'Authorization': `Basic ${encoded}`,
+      },
+      mode: 'cors',
+      credentials: 'include',
+    });
+    if (!response.ok) {
+      const message = `An error has occured: ${response.status}`;
+      throw new Error(message);
+    }
+    const json = await response.json();
+    return json;
+  } catch (error) {
+    console.log(error)
+  }
+  return {};
+}

web/utils/broadcast-status-context.tsx

@@ -0,0 +1,51 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+
+import { BROADCASTER, fetchData, FETCH_INTERVAL } from './apis';
+
+const initialState = {
+  broadcastActive: false,
+  message: '',
+  broadcaster: null,
+};
+
+export const BroadcastStatusContext = React.createContext(initialState);
+
+const BroadcastStatusProvider = ({ children }) => {
+  const [broadcasterStatus, setBroadcasterStatus] = useState(initialState);
+
+  const getBroadcastStatus = async () => {
+    try {
+      const result = await fetchData(BROADCASTER);
+      const broadcastActive = !!result.broadcaster || result.success;
+      setBroadcasterStatus({ ...result, broadcastActive });
+
+    } catch (error) {
+      setBroadcasterStatus({ ...broadcasterStatus, message: error.message });
+    }
+  };
+  
+  useEffect(() => {
+    let getStatusIntervalId = null;
+
+    getBroadcastStatus();
+    getStatusIntervalId = setInterval(getBroadcastStatus, FETCH_INTERVAL);
+  
+    // returned function will be called on component unmount 
+    return () => {
+      clearInterval(getStatusIntervalId);
+    }
+  }, [])
+
+  return (
+    <BroadcastStatusContext.Provider value={broadcasterStatus}>
+      {children}
+    </BroadcastStatusContext.Provider>
+  );
+}
+
+BroadcastStatusProvider.propTypes = {
+  children: PropTypes.element.isRequired,
+};
+
+export default BroadcastStatusProvider;

web/utils/format.ts

@@ -0,0 +1,19 @@
+export function formatIPAddress(ipAddress: string): string {
+  const ipAddressComponents = ipAddress.split(':')
+
+  // Wipe out the port component
+  ipAddressComponents[ipAddressComponents.length - 1] = '';
+
+  let ip = ipAddressComponents.join(':')
+  ip = ip.slice(0, ip.length - 1)
+  if (ip === '[::1]' || ip === '127.0.0.1') {
+    return "Localhost"
+  }
+
+  return ip;
+}
+
+// check if obj is {}
+export function isEmptyObject(obj) {
+  return !obj || Object.keys(obj).length === 0;
+}