torjus/ministream-frontend
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: torjus:2e96de56e6c7dfb4adbaccea2fa15c85abfca4c1
Branches Tags
torjus:master
..
compare: torjus:bbd3adc4f77c29f900b23f574a891a1171e8ac4c
Branches Tags
torjus:master

No commits in common. "2e96de56e6c7dfb4adbaccea2fa15c85abfca4c1" and "bbd3adc4f77c29f900b23f574a891a1171e8ac4c" have entirely different histories.
2e96de56e6 ... bbd3adc4f7

15 changed files with 536 additions and 1699 deletions
Show Stats Expand all files Collapse all files

7
.eslintrc.cjs
View File

@ -1,7 +0,0 @@
/* eslint-env node */
module.exports = {
extends: ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
parser: "@typescript-eslint/parser",
plugins: ["@typescript-eslint"],
root: true,
};

2
.git-blame-ignore-revs
View File

@ -1,2 +0,0 @@
# First prettier run
3fd391efc774007b6f4fb3c92a82c6bf0efce207

2
.prettierignore
View File

@ -1,2 +0,0 @@
dist/
node_modules/

1
.prettierrc
View File

@ -1 +0,0 @@
{}

1263
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

4
package.json
View File

@ -13,11 +13,7 @@
"author": "", "author": "",
"license": "ISC", "license": "ISC",
"devDependencies": { "devDependencies": {
"@typescript-eslint/eslint-plugin": "^6.13.2",
"@typescript-eslint/parser": "^6.13.2",
"eslint": "^8.55.0",
"parcel": "^2.10.3", "parcel": "^2.10.3",
"prettier": "^3.1.0",
"process": "^0.11.10", "process": "^0.11.10",
"ts-loader": "^9.5.1", "ts-loader": "^9.5.1",
"typescript": "^5.3.2" "typescript": "^5.3.2"

2
src/css/fonts.css
View File

@ -1 +1 @@
@import url("https://fonts.googleapis.com/css2?family=Prompt:wght@300;600&display=swap"); @import url('https://fonts.googleapis.com/css2?family=Prompt:wght@300;600&display=swap');

176
src/css/style.css
View File

@ -1,162 +1,162 @@
:root { :root {
--menu-header-color: #1b1f22; --menu-header-color: #1B1F22;
--menu-header-text: #ffebf4; --menu-header-text: #FFEBF4;
--menu-background-color: #435058; --menu-background-color: #435058;
--menu-item-color: #4f5f69; --menu-item-color: #4F5F69;
--menu-item-hover: #607480; --menu-item-hover: #607480;
--menu-selected-color: #7f929f; --menu-selected-color: #7F929F;
--main-background: #121517; --main-background: #121517;
} }
body { body {
overflow: hidden; overflow: hidden;
height: 100vh; height: 100vh;
margin: 0px; margin: 0px;
} }
#main { #main {
flex: 1 1 auto; flex: 1 1 auto;
height: 100%; height: 100%;
background-color: var(--main-background); background-color: var(--main-background);
color: var(--menu-header-text); color: var(--menu-header-text);
font-family: "Prompt", sans-serif; font-family: 'Prompt', sans-serif;
font-weight: 600; font-weight: 600;
} }
.loader-wrapper { .loader-wrapper {
margin-top: 10em; margin-top: 10em;
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
.loader { .loader {
display: flex; display: flex;
width: min-content; width: min-content;
vertical-align: middle; vertical-align: middle;
} }
.loader .spinner { .loader .spinner {
margin-top: auto; margin-top: auto;
margin-bottom: auto; margin-bottom: auto;
} }
.loader .loading-text { .loader .loading-text {
margin-top: auto; margin-top: auto;
margin-bottom: auto; margin-bottom: auto;
margin-left: 0.5em; margin-left: 0.5em;
white-space: nowrap; white-space: nowrap;
} }
.video-wrapper { .video-wrapper {
justify-content: left; justify-content: left;
align-items: left; align-items: left;
} }
video { video {
position: absolute; position: absolute;
height: 100%; height: 100%;
width: auto; width: auto;
} }
main { main {
overflow-y: auto; overflow-y: auto;
} }
aside { aside {
width: max-content; width: max-content;
flex: 1 0 auto; flex: 1 0 auto;
margin-left: 0px; margin-left: 0px;
padding-left: 0px; padding-left: 0px;
background-color: var(--menu-background-color); background-color: var(--menu-background-color);
height: 100%; height: 100%;
} }
.menu-list { .menu-list {
list-style: none; list-style: none;
margin-top: 0px; margin-top: 0px;
} }
ul.menu-list { ul.menu-list {
padding-left: 0; padding-left: 0;
} }
a.menu-link { a.menu-link {
padding-left: 2em; padding-left: 2em;
font-family: "Prompt", sans-serif; font-family: 'Prompt', sans-serif;
font-weight: 300; font-weight: 300;
font-size: larger; font-size: larger;
margin-right: auto; margin-right: auto;
} }
.menu-heading { .menu-heading {
padding-left: 1em; padding-left: 1em;
padding-right: 1em; padding-right: 1em;
background-color: var(--menu-header-color); background-color: var(--menu-header-color);
color: var(--menu-header-text); color: var(--menu-header-text);
font-size: larger; font-size: larger;
font-family: "Prompt", sans-serif; font-family: 'Prompt', sans-serif;
font-weight: 600; font-weight: 600;
} }
a.menu-heading { a.menu-heading {
text-decoration: none; text-decoration: none;
} }
.menu-item a { .menu-item a {
color: var(--menu-header-text); color: var(--menu-header-text);
text-decoration: none; text-decoration: none;
} }
.menu-item { .menu-item {
cursor: pointer; cursor: pointer;
display: flex; display: flex;
} }
.menu-viewcount { .menu-viewcount {
font-family: "Prompt", sans-serif; font-family: 'Prompt', sans-serif;
font-size: larger; font-size: larger;
font-weight: 300; font-weight: 300;
color: var(--menu-header-text); color: var(--menu-header-text);
margin-top: 0; margin-top: 0;
margin-bottom: 0; margin-bottom: 0;
padding-right: 1em; padding-right: 1em;
height: 100%; height: 100%;
} }
li.menu-item { li.menu-item {
background-color: var(--menu-item-color); background-color: var(--menu-item-color);
margin-top: 1px; margin-top: 1px;
} }
li.menu-item:hover { li.menu-item:hover {
background-color: var(--menu-item-hover); background-color: var(--menu-item-hover);
} }
li.menu-selected { li.menu-selected {
background-color: var(--menu-selected-color); background-color: var(--menu-selected-color)
} }
#app { #app {
display: flex; display: flex;
height: 100%; height: 100%;
} }
.spinner { .spinner {
border: 4px solid var(--menu-header-text); border: 4px solid var(--menu-header-text);
border-top: 4px solid var(--menu-selected-color); border-top: 4px solid var(--menu-selected-color);
border-radius: 50%; border-radius: 50%;
width: 10px; width: 10px;
height: 10px; height: 10px;
animation: spin 1s linear infinite; animation: spin 1s linear infinite;
} }
@keyframes spin { @keyframes spin {
0% { 0% {
transform: rotate(0deg); transform: rotate(0deg);
} }
100% { 100% {
transform: rotate(360deg); transform: rotate(360deg);
} }
} }

6
src/index.html
View File

@ -1,14 +1,14 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8"/>
<title></title> <title></title>
<script src="./js/app.tsx" type="module"></script> <script src="./js/app.tsx" type="module"></script>
<link rel="stylesheet" href="./css/style.css" /> <link rel="stylesheet" href="./css/style.css" />
<link rel="stylesheet" href="./css/fonts.css" /> <link rel="stylesheet" href="./css/fonts.css" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1">
</head> </head>
<body> <body>
<div id="app" /> <div id="app" />
</body> </body>
</html> </html>

115
src/js/api.ts
View File

@ -1,75 +1,82 @@
export interface SiteInfo { export interface SiteInfo {
siteName: string; siteName: string
} }
export interface StreamInfo { export interface StreamInfo {
streamKey: string; streamKey: string
viewCount: number; viewCount: number
} }
export class MinistreamApiClient { export class MinistreamApiClient {
ENV: string; ENV: string
constructor() { constructor() {
if (process.env.NODE_ENV) { if (process.env.NODE_ENV) {
this.ENV = process.env.NODE_ENV; this.ENV = process.env.NODE_ENV
} else { } else {
this.ENV = "production"; this.ENV = "production"
} }
}
async listStreams(): Promise<StreamInfo[]> {
let data: StreamInfo[] = [];
let url = "/whip";
if (this.ENV !== "production") {
url = "http://localhost:8080/whip";
} }
const resp = await fetch(url); async listStreams(): Promise<StreamInfo[]> {
data = (await resp.json()) as unknown as StreamInfo[]; var data: StreamInfo[] = [];
var url = "/whip"
if (this.ENV !== "production") {
url = "http://localhost:8080/whip"
}
const sortedStreams = data.sort((a, b) => { try {
if (a.streamKey > b.streamKey) { const resp = await fetch(
return -1; url,
} else if (a.streamKey < b.streamKey) { );
return 1; data = await resp.json() as unknown as StreamInfo[];
} }
return 0; catch (e) {
}); throw e;
}
return sortedStreams; const sortedStreams = data.sort((a, b) => {
} if (a.streamKey > b.streamKey) {
return -1
} else if (a.streamKey < b.streamKey) {
return 1
}
return 0
})
async postOffer( return sortedStreams;
streamKey: string,
offer_sdp: RTCSessionDescription,
): Promise<RTCSessionDescription> {
let url = "/whip/" + streamKey;
if (this.ENV !== "production") {
url = "http://localhost:8080/whip/" + streamKey;
} }
const resp = await fetch(url, { async postOffer(streamKey: string, offer_sdp: RTCSessionDescription): Promise<RTCSessionDescription> {
method: "POST", var url = "/whip/" + streamKey
body: offer_sdp.sdp, if (this.ENV !== "production") {
}); url = "http://localhost:8080/whip/" + streamKey
const body = await resp.text(); }
const answer = new RTCSessionDescription({ type: "answer", sdp: body });
return answer; const resp = await fetch(url,
} {
method: "POST",
body: offer_sdp.sdp
})
const body = await resp.text()
const answer = new RTCSessionDescription({ type: "answer", sdp: body })
async siteInfo(): Promise<SiteInfo> { return answer
let url = "/api/siteinfo";
if (this.ENV !== "production") {
url = "http://localhost:8080/api/siteinfo";
} }
const resp = await fetch(url, { async siteInfo(): Promise<SiteInfo> {
method: "GET", var url = "/api/siteinfo"
}); if (this.ENV !== "production") {
const data = resp.json(); url = "http://localhost:8080/api/siteinfo"
}
return data as unknown as SiteInfo; const resp = await fetch(url,
} {
method: "GET",
})
const data = resp.json()
return data as unknown as SiteInfo
}
} }

140
src/js/app.tsx
View File

@ -1,97 +1,99 @@
import { createRoot } from "react-dom/client"; import { createRoot } from "react-dom/client";
import { Menu } from "./menu"; import { Menu } from "./menu";
import { useEffect, useState } from "react"; import { createContext, useEffect, useState } from "react";
import { MediaContainer } from "./media"; import { MediaContainer } from "./media";
import { MinistreamApiClient, StreamInfo } from "./api"; import { MinistreamApiClient, StreamInfo } from "./api";
import React from "react"; import React from "react";
import * as Log from "./log"; import { Log } from "./log";
interface AppProps { interface AppProps {
api: MinistreamApiClient; api: MinistreamApiClient
} }
const titleKey = "ministream.title"; const titleKey = "ministream.title"
function setTitleFromLocalstorage() { function setTitleFromLocalstorage() {
const title = localStorage.getItem(titleKey); var title = localStorage.getItem(titleKey)
if (title) { if (title) {
setTitle(title); setTitle(title)
} }
} }
function setTitle(title: string) { function setTitle(title: string) {
const el = document.querySelector("title"); const el = document.querySelector('title')
if (el) { if (el) {
el.textContent = title; el.textContent = title
} }
} }
export function App({ api }: AppProps) { export function App({ api }: AppProps) {
const [streamList, setStreamList] = useState<StreamInfo[]>([]); const [streamList, setStreamList] = useState<StreamInfo[]>([])
const [selectedStream, setSelectedStream] = useState<string | null>(null); const [selectedStream, setSelectedStream] = useState<string | null>(null)
const updateSelect = (item: string | null) => { const updateSelect = (item: string | null) => {
setSelectedStream(item); setSelectedStream(item)
}; }
const updateTitle = () => {
api.siteInfo().then((info) => {
if (info.siteName != document.title) {
setTitle(info.siteName);
localStorage.setItem(titleKey, info.siteName);
}
});
return;
};
useEffect(() => {
const updateStreamList = () => { const updateTitle = () => {
api.listStreams().then((list) => { api.siteInfo().then((info) => {
setStreamList((current) => { if (info.siteName != document.title) {
if (list.length != current.length) { setTitle(info.siteName)
Log.Debug("Updated streamList!"); localStorage.setItem(titleKey, info.siteName)
return list; }
} })
if ( return
!list.every((_, idx) => { }
return list[idx].streamKey === current[idx].streamKey;
useEffect(() => {
const updateStreamList = () => {
api.listStreams().then((list) => {
setStreamList((current) => {
if (list.length != current.length) {
Log.Debug("Updated streamList!")
return list
}
if (!list.every((_, idx) => {
return list[idx].streamKey === current[idx].streamKey
})) {
Log.Debug("Updated streamList..")
return list
}
return current
})
}) })
) {
Log.Debug("Updated streamList..");
return list;
}
return current;
});
});
};
updateStreamList(); }
const updateInterval = setInterval(() => {
updateStreamList();
}, 10000);
return () => clearInterval(updateInterval);
}, []);
useEffect(() => { updateStreamList()
updateTitle(); const updateInterval = setInterval(() => {
}, []); updateStreamList()
}, 10000)
return () => clearInterval(updateInterval)
}, [])
return ( useEffect(() => {
<> updateTitle()
<Menu }, [])
items={streamList}
selectedItem={selectedStream} return (
selectCallback={updateSelect} <>
/> <Menu
<MediaContainer selectedStream={selectedStream} api={api} /> items={streamList}
</> selectedItem={selectedStream}
); selectCallback={updateSelect}
/>
<MediaContainer selectedStream={selectedStream} api={api} />
</>
)
} }
const rootElement = document.getElementById("app"); const rootElement = document.getElementById("app");
setTitleFromLocalstorage(); setTitleFromLocalstorage()
if (rootElement) { if (rootElement) {
const root = createRoot(rootElement); const root = createRoot(rootElement)
const api = new MinistreamApiClient(); const api = new MinistreamApiClient()
root.render(<App api={api} />); root.render(<App api={api} />)
} }

98
src/js/log.ts
View File

@ -1,55 +1,61 @@
function levelToNumber(level: Level): number {
switch (level) {
case "DEBUG":
return 0;
case "INFO":
return 1;
case "ERROR":
return 2;
case "WARN":
return 3;
}
}
let currentLevel: Level = "INFO";
if (process.env.NODE_ENV !== "production") {
currentLevel = "DEBUG";
}
export type Level = "ERROR" | "WARN" | "INFO" | "DEBUG"; export namespace Log {
var currentLevel: Level = "INFO"
export function setLevel(level: Level) { if (process.env.NODE_ENV !== 'production') {
currentLevel = level; currentLevel = "DEBUG"
} }
export interface LogArgs { export type Level = "ERROR" | "WARN" | "INFO" | "DEBUG"
[key: string]: string;
}
const doLog = (level: Level, message: string, extras?: LogArgs) => { export function setLevel(level: Level) {
let logLine = `[${level}] ${message}`; currentLevel = level
}
if (extras) {
Object.keys(extras).forEach((key) => {
logLine = logLine + ` ${key}=${extras[key]}`;
});
}
if (levelToNumber(level) >= levelToNumber(currentLevel)) { export interface LogArgs {
console.log(logLine); [key: string]: string
} }
};
export function Error(message: string, extras?: LogArgs) { export function Error(message: string, extras?: LogArgs) {
doLog("ERROR", message, extras); doLog("ERROR", message, extras)
} }
export function Warn(message: string, extras?: LogArgs) { export function Warn(message: string, extras?: LogArgs) {
doLog("WARN", message, extras); doLog("WARN", message, extras)
} }
export function Info(message: string, extras?: LogArgs) { export function Info(message: string, extras?: LogArgs) {
doLog("INFO", message, extras); doLog("INFO", message, extras)
} }
export function Debug(message: string, extras?: LogArgs) { export function Debug(message: string, extras?: LogArgs) {
doLog("DEBUG", message, extras); doLog("DEBUG", message, extras)
} }
function doLog(level: Level, message: string, extras?: LogArgs) {
var logLine = `[${level}] ${message}`
if (extras) {
Object.keys(extras).forEach((key) => {
logLine = logLine + ` ${key}=${extras[key]}`
})
}
if (levelToNumber(level) >= levelToNumber(currentLevel)) {
console.log(logLine)
}
}
function levelToNumber(level: Level): number {
switch (level) {
case "DEBUG":
return 0
case "INFO":
return 1
case "ERROR":
return 2
case "WARN":
return 3
}
}
}

285
src/js/media.tsx
View File

@ -1,179 +1,172 @@
import { useRef, useEffect, useState } from "react"; import { ComponentProps, useRef, useEffect, useState } from "react"
import { MinistreamApiClient } from "./api"; import { MinistreamApiClient } from "./api"
import React from "react"; import { resolve } from "path"
import * as Log from "./log"; import React from "react"
import { Log } from "./log"
type MediaContainerProps = { type MediaContainerProps = {
selectedStream: string | null; selectedStream: string | null
api: MinistreamApiClient; api: MinistreamApiClient
}; }
export function MediaContainer({ selectedStream, api }: MediaContainerProps) { export function MediaContainer({ selectedStream, api }: MediaContainerProps) {
const [iceReady, setICEReady] = useState(false); const [iceReady, setICEReady] = useState(false)
const [remoteReady, setRemoteReady] = useState(false); const [remoteReady, setRemoteReady] = useState(false)
const [pc, setPC] = useState(new RTCPeerConnection()); const [pc, setPC] = useState(new RTCPeerConnection())
const [ms, setMs] = useState(new MediaStream()); const [ms, setMs] = useState(new MediaStream())
// if selected stream changed, recreate pc, and set all to not ready. // if selected stream changed, recreate pc, and set all to not ready.
useEffect(() => { useEffect(() => {
Log.Debug("Ran useEffect.", { because_state: "selectedStream" }); Log.Debug("Ran useEffect.", { "because_state": "selectedStream" })
setPC( setPC(new RTCPeerConnection({
new RTCPeerConnection({ iceServers: [{ urls: "stun:stun.l.google.com:19302" }]
iceServers: [{ urls: "stun:stun.l.google.com:19302" }], }))
}), setICEReady(false)
); setRemoteReady(false)
setICEReady(false); setMs(new MediaStream())
setRemoteReady(false);
setMs(new MediaStream());
}, [selectedStream]);
useEffect(() => { }, [selectedStream])
Log.Debug("Ran useEffect.", { because_state: "pc" });
pc.addTransceiver("video");
pc.addTransceiver("audio");
pc.ontrack = (event) => {
event.streams.forEach((st) =>
st.getTracks().forEach((track) => {
ms.addTrack(track);
}),
);
};
pc.onicecandidate = (event) => { useEffect(() => {
if (!event.candidate) { Log.Debug("Ran useEffect.", { "because_state": "pc" })
Log.Info("ICE gathering complete."); pc.addTransceiver("video")
setICEReady(true); pc.addTransceiver("audio")
} else { pc.ontrack = (event) => {
Log.Debug("Adding ICE candidate.", { event.streams.forEach((st) => st.getTracks().forEach((track) => {
candidate: event.candidate.candidate, ms.addTrack(track)
}); }))
} }
};
pc.oniceconnectionstatechange = () => { pc.onicecandidate = (event) => {
Log.Info("ICE gathering complete."); if (!event.candidate) {
}; Log.Info("ICE gathering complete.")
setICEReady(true)
} else {
Log.Debug("Adding ICE candidate.", { "candidate": event.candidate.candidate })
}
}
pc.createOffer().then((offer) => { pc.oniceconnectionstatechange = () => {
pc.setLocalDescription(offer).then(() => { Log.Info("ICE gathering complete.")
Log.Debug("Local description set."); }
});
});
}, [pc]);
useEffect(() => { pc.createOffer().then((offer) => {
Log.Debug("Ran useEffect", { because_state: "iceReady" }); pc.setLocalDescription(offer).then(() => { Log.Debug("Local description set.") })
if (!iceReady || !selectedStream) { })
return; }, [pc])
useEffect(() => {
Log.Debug("Ran useEffect", { "because_state": "iceReady" })
if (!iceReady || !selectedStream) {
return
}
const localOfferSdp = pc.localDescription?.sdp
if (!localOfferSdp) {
Log.Error("Unable to get local description.")
return
}
const localOffer = new RTCSessionDescription({ type: "offer", sdp: localOfferSdp })
api.postOffer(selectedStream, localOffer).then((remote) => {
pc.setRemoteDescription(remote).then(() => {
setRemoteReady(true)
})
})
}, [iceReady])
useEffect(() => {
Log.Debug("Ran useEffect", { "because_state": "remoteReady" })
if (!iceReady || !selectedStream || !remoteReady) {
return
}
}, [remoteReady])
const getElement = () => {
if (!selectedStream) {
return <LoadingText spinner={true} text="Waiting for stream selection." />
}
if (!iceReady) {
return <LoadingText spinner={true} text="Waiting for ICE gathering." />
}
if (!remoteReady) {
return <LoadingText spinner={true} text="Waiting for remote server." />
}
return (
<div className="video-wrapper">
<VideoPlayer ms={ms} />
</div>
)
} }
const localOfferSdp = pc.localDescription?.sdp;
if (!localOfferSdp) {
Log.Error("Unable to get local description.");
return;
}
const localOffer = new RTCSessionDescription({
type: "offer",
sdp: localOfferSdp,
});
api.postOffer(selectedStream, localOffer).then((remote) => {
pc.setRemoteDescription(remote).then(() => {
setRemoteReady(true);
});
});
}, [iceReady]);
useEffect(() => {
Log.Debug("Ran useEffect", { because_state: "remoteReady" });
if (!iceReady || !selectedStream || !remoteReady) {
return;
}
}, [remoteReady]);
const getElement = () => {
if (!selectedStream) {
return (
<LoadingText spinner={true} text="Waiting for stream selection." />
);
}
if (!iceReady) {
return <LoadingText spinner={true} text="Waiting for ICE gathering." />;
}
if (!remoteReady) {
return <LoadingText spinner={true} text="Waiting for remote server." />;
}
return ( return (
<div className="video-wrapper"> <div id="main">
<VideoPlayer ms={ms} /> <main>
</div> {getElement()}
); </main>
}; </div>
)
return (
<div id="main">
<main>{getElement()}</main>
</div>
);
} }
interface VideoPlayerProps { interface VideoPlayerProps {
ms: MediaStream; ms: MediaStream
} }
export function VideoPlayer({ ms }: VideoPlayerProps) { export function VideoPlayer({ ms }: VideoPlayerProps) {
const [ready, setReady] = useState(false); const [ready, setReady] = useState(false);
const videoRef = useRef<HTMLVideoElement>(null); const videoRef = useRef<HTMLVideoElement>(null)
useEffect(() => {
if (ready) {
return
}
if (videoRef.current) {
if (videoRef.current) {
const ref = videoRef.current
ref.srcObject = ms
videoRef.current.addEventListener('loadeddata', () => {
ref.hidden = false
setReady(true)
})
}
}
})
useEffect(() => {
if (ready) { if (ready) {
return; return (<video id="video" ref={videoRef} autoPlay muted controls />)
} else {
return (
<>
<video id="video" ref={videoRef} hidden autoPlay muted controls />
<LoadingText text="Waiting for video data." spinner={true} />
</>
)
} }
if (videoRef.current) {
if (videoRef.current) {
const ref = videoRef.current;
ref.srcObject = ms;
videoRef.current.addEventListener("loadeddata", () => {
ref.hidden = false;
setReady(true);
});
}
}
});
if (ready) {
return <video id="video" ref={videoRef} autoPlay muted controls />;
} else {
return (
<>
<video id="video" ref={videoRef} hidden autoPlay muted controls />
<LoadingText text="Waiting for video data." spinner={true} />
</>
);
}
} }
interface LoadingText { interface LoadingText {
text: string; text: string
spinner?: boolean; spinner?: boolean
} }
export function LoadingText({ text, spinner = false }: LoadingText) { export function LoadingText({ text, spinner = false }: LoadingText) {
let spinnerElement = <></>; var spinnerElement = (<></>)
if (spinner) { if (spinner) {
spinnerElement = <Spinner />; spinnerElement = (<Spinner />)
} }
return ( return (
<> <>
<div className="loader-wrapper"> <div className="loader-wrapper">
<div className="loader"> <div className="loader">
{spinnerElement} {spinnerElement}
<p className="loading-text">{text}</p> <p className="loading-text">{text}</p>
</div> </div>
</div> </div>
</> </>
); )
} }
export function Spinner() { export function Spinner() {
return <div className="spinner" />; return <div className="spinner" />
} }

100
src/js/menu.tsx
View File

@ -1,67 +1,53 @@
import { createRoot } from "react-dom/client";
import React from "react"; import React from "react";
import { StreamInfo } from "./api"; import { StreamInfo } from "./api";
type StreamSelectCallback = (selected: string | null) => void; type StreamSelectCallback = (selected: string | null) => void
interface MenuProps { interface MenuProps {
items: StreamInfo[]; items: StreamInfo[]
selectedItem: string | null; selectedItem: string | null
selectCallback: StreamSelectCallback; selectCallback: StreamSelectCallback
} }
export function Menu({ items, selectedItem, selectCallback }: MenuProps) { export function Menu({ items, selectedItem, selectCallback }: MenuProps) {
const title = document.title; const title = document.title
const menuitems = () => { const menuitems = () => {
return (
<>
{items.map((value, idx) => {
if (selectedItem == value.streamKey) {
return <>
<li key={idx} className="menu-item menu-selected">
<a href={"#" + value} className="menu-link">{value.streamKey}</a>
<p className="menu-viewcount">{value.viewCount}</p>
</li>
</>
} else {
return <>
<li key={idx} onClick={() => {
selectCallback(value.streamKey)
}} className="menu-item">
<a href={"#" + value.streamKey} className="menu-link">{value.streamKey}</a>
<p className="menu-viewcount">{value.viewCount}</p>
</li>
</>
}
})}
</>
)
}
return ( return (
<> <div id="menu">
{items.map((value, idx) => { <aside>
if (selectedItem == value.streamKey) { <a className="menu-heading" onClick={() => {
return ( selectCallback(null)
<> }} href="#">{title}</a>
<li key={idx} className="menu-item menu-selected"> <ul className="menu-list">
<a href={"#" + value} className="menu-link"> {menuitems()}
{value.streamKey} </ul>
</a> </aside>
<p className="menu-viewcount">{value.viewCount}</p> </div>
</li> )
</>
);
} else {
return (
<>
<li
key={idx}
onClick={() => {
selectCallback(value.streamKey);
}}
className="menu-item"
>
<a href={"#" + value.streamKey} className="menu-link">
{value.streamKey}
</a>
<p className="menu-viewcount">{value.viewCount}</p>
</li>
</>
);
}
})}
</>
);
};
return (
<div id="menu">
<aside>
<a
className="menu-heading"
onClick={() => {
selectCallback(null);
}}
href="#"
>
{title}
</a>
<ul className="menu-list">{menuitems()}</ul>
</aside>
</div>
);
} }

34
tsconfig.json
View File

@ -1,14 +1,22 @@
{ {
"compilerOptions": { "compilerOptions": {
"esModuleInterop": true, "esModuleInterop": true,
"jsx": "react", "jsx": "react",
"module": "esnext", "module": "esnext",
"moduleResolution": "node", "moduleResolution": "node",
"lib": ["dom", "esnext"], "lib": [
"strict": true, "dom",
"sourceMap": true, "esnext"
"target": "esnext" ],
}, "strict": true,
"exclude": ["node_modules"], "sourceMap": true,
"include": ["src/**/*.ts", "src/**/*.tsx"] "target": "esnext",
} },
"exclude": [
"node_modules"
],
"include": [
"src/**/*.ts",
"src/**/*.tsx"
],
}