Linter and formatter #6
@ -1,7 +1,7 @@
|
||||
/* eslint-env node */
|
||||
module.exports = {
|
||||
extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended'],
|
||||
parser: '@typescript-eslint/parser',
|
||||
plugins: ['@typescript-eslint'],
|
||||
root: true,
|
||||
};
|
||||
extends: ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
|
||||
parser: "@typescript-eslint/parser",
|
||||
plugins: ["@typescript-eslint"],
|
||||
root: true,
|
||||
};
|
||||
|
||||
2
.prettierignore
Normal file
2
.prettierignore
Normal file
@ -0,0 +1,2 @@
|
||||
dist/
|
||||
node_modules/
|
||||
1
.prettierrc
Normal file
1
.prettierrc
Normal file
@ -0,0 +1 @@
|
||||
{}
|
||||
16
package-lock.json
generated
16
package-lock.json
generated
@ -20,6 +20,7 @@
|
||||
"@typescript-eslint/parser": "^6.13.2",
|
||||
"eslint": "^8.55.0",
|
||||
"parcel": "^2.10.3",
|
||||
"prettier": "^3.1.0",
|
||||
"process": "^0.11.10",
|
||||
"ts-loader": "^9.5.1",
|
||||
"typescript": "^5.3.2"
|
||||
@ -4831,6 +4832,21 @@
|
||||
"node": ">= 0.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/prettier": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/prettier/-/prettier-3.1.0.tgz",
|
||||
"integrity": "sha512-TQLvXjq5IAibjh8EpBIkNKxO749UEWABoiIZehEPiY4GNpVdhaFKqSTu+QrlU6D2dPAfubRmtJTi4K4YkQ5eXw==",
|
||||
"dev": true,
|
||||
"bin": {
|
||||
"prettier": "bin/prettier.cjs"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/prettier/prettier?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/process": {
|
||||
"version": "0.11.10",
|
||||
"resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
|
||||
|
||||
@ -17,6 +17,7 @@
|
||||
"@typescript-eslint/parser": "^6.13.2",
|
||||
"eslint": "^8.55.0",
|
||||
"parcel": "^2.10.3",
|
||||
"prettier": "^3.1.0",
|
||||
"process": "^0.11.10",
|
||||
"ts-loader": "^9.5.1",
|
||||
"typescript": "^5.3.2"
|
||||
|
||||
@ -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");
|
||||
|
||||
@ -1,162 +1,162 @@
|
||||
:root {
|
||||
--menu-header-color: #1B1F22;
|
||||
--menu-header-text: #FFEBF4;
|
||||
--menu-background-color: #435058;
|
||||
--menu-item-color: #4F5F69;
|
||||
--menu-item-hover: #607480;
|
||||
--menu-selected-color: #7F929F;
|
||||
--main-background: #121517;
|
||||
--menu-header-color: #1b1f22;
|
||||
--menu-header-text: #ffebf4;
|
||||
--menu-background-color: #435058;
|
||||
--menu-item-color: #4f5f69;
|
||||
--menu-item-hover: #607480;
|
||||
--menu-selected-color: #7f929f;
|
||||
--main-background: #121517;
|
||||
}
|
||||
|
||||
body {
|
||||
overflow: hidden;
|
||||
height: 100vh;
|
||||
margin: 0px;
|
||||
overflow: hidden;
|
||||
height: 100vh;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
#main {
|
||||
flex: 1 1 auto;
|
||||
height: 100%;
|
||||
background-color: var(--main-background);
|
||||
color: var(--menu-header-text);
|
||||
font-family: 'Prompt', sans-serif;
|
||||
font-weight: 600;
|
||||
flex: 1 1 auto;
|
||||
height: 100%;
|
||||
background-color: var(--main-background);
|
||||
color: var(--menu-header-text);
|
||||
font-family: "Prompt", sans-serif;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.loader-wrapper {
|
||||
margin-top: 10em;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 10em;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.loader {
|
||||
display: flex;
|
||||
width: min-content;
|
||||
vertical-align: middle;
|
||||
display: flex;
|
||||
width: min-content;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.loader .spinner {
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
}
|
||||
|
||||
.loader .loading-text {
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
margin-left: 0.5em;
|
||||
white-space: nowrap;
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
margin-left: 0.5em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.video-wrapper {
|
||||
justify-content: left;
|
||||
align-items: left;
|
||||
justify-content: left;
|
||||
align-items: left;
|
||||
}
|
||||
|
||||
video {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: auto;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
main {
|
||||
overflow-y: auto;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
aside {
|
||||
width: max-content;
|
||||
flex: 1 0 auto;
|
||||
margin-left: 0px;
|
||||
padding-left: 0px;
|
||||
background-color: var(--menu-background-color);
|
||||
height: 100%;
|
||||
width: max-content;
|
||||
flex: 1 0 auto;
|
||||
margin-left: 0px;
|
||||
padding-left: 0px;
|
||||
background-color: var(--menu-background-color);
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.menu-list {
|
||||
list-style: none;
|
||||
margin-top: 0px;
|
||||
list-style: none;
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
ul.menu-list {
|
||||
padding-left: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
a.menu-link {
|
||||
padding-left: 2em;
|
||||
font-family: 'Prompt', sans-serif;
|
||||
font-weight: 300;
|
||||
font-size: larger;
|
||||
margin-right: auto;
|
||||
padding-left: 2em;
|
||||
font-family: "Prompt", sans-serif;
|
||||
font-weight: 300;
|
||||
font-size: larger;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.menu-heading {
|
||||
padding-left: 1em;
|
||||
padding-right: 1em;
|
||||
background-color: var(--menu-header-color);
|
||||
color: var(--menu-header-text);
|
||||
font-size: larger;
|
||||
font-family: 'Prompt', sans-serif;
|
||||
font-weight: 600;
|
||||
padding-left: 1em;
|
||||
padding-right: 1em;
|
||||
background-color: var(--menu-header-color);
|
||||
color: var(--menu-header-text);
|
||||
font-size: larger;
|
||||
font-family: "Prompt", sans-serif;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
a.menu-heading {
|
||||
text-decoration: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.menu-item a {
|
||||
color: var(--menu-header-text);
|
||||
text-decoration: none;
|
||||
color: var(--menu-header-text);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.menu-viewcount {
|
||||
font-family: 'Prompt', sans-serif;
|
||||
font-size: larger;
|
||||
font-weight: 300;
|
||||
color: var(--menu-header-text);
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
padding-right: 1em;
|
||||
height: 100%;
|
||||
font-family: "Prompt", sans-serif;
|
||||
font-size: larger;
|
||||
font-weight: 300;
|
||||
color: var(--menu-header-text);
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
padding-right: 1em;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
li.menu-item {
|
||||
background-color: var(--menu-item-color);
|
||||
margin-top: 1px;
|
||||
background-color: var(--menu-item-color);
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
li.menu-item:hover {
|
||||
background-color: var(--menu-item-hover);
|
||||
background-color: var(--menu-item-hover);
|
||||
}
|
||||
|
||||
li.menu-selected {
|
||||
background-color: var(--menu-selected-color)
|
||||
background-color: var(--menu-selected-color);
|
||||
}
|
||||
|
||||
#app {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
border: 4px solid var(--menu-header-text);
|
||||
border-top: 4px solid var(--menu-selected-color);
|
||||
border-radius: 50%;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
animation: spin 1s linear infinite;
|
||||
border: 4px solid var(--menu-header-text);
|
||||
border-top: 4px solid var(--menu-selected-color);
|
||||
border-radius: 50%;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@ -1,12 +1,12 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta charset="utf-8" />
|
||||
<title></title>
|
||||
<script src="./js/app.tsx" type="module"></script>
|
||||
<link rel="stylesheet" href="./css/style.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>
|
||||
<body>
|
||||
<div id="app" />
|
||||
|
||||
110
src/js/api.ts
110
src/js/api.ts
@ -1,77 +1,75 @@
|
||||
|
||||
export interface SiteInfo {
|
||||
siteName: string
|
||||
siteName: string;
|
||||
}
|
||||
|
||||
export interface StreamInfo {
|
||||
streamKey: string
|
||||
viewCount: number
|
||||
streamKey: string;
|
||||
viewCount: number;
|
||||
}
|
||||
|
||||
export class MinistreamApiClient {
|
||||
ENV: string
|
||||
ENV: string;
|
||||
|
||||
constructor() {
|
||||
if (process.env.NODE_ENV) {
|
||||
this.ENV = process.env.NODE_ENV
|
||||
} else {
|
||||
this.ENV = "production"
|
||||
}
|
||||
constructor() {
|
||||
if (process.env.NODE_ENV) {
|
||||
this.ENV = process.env.NODE_ENV;
|
||||
} else {
|
||||
this.ENV = "production";
|
||||
}
|
||||
}
|
||||
|
||||
async listStreams(): Promise<StreamInfo[]> {
|
||||
let data: StreamInfo[] = [];
|
||||
let url = "/whip";
|
||||
if (this.ENV !== "production") {
|
||||
url = "http://localhost:8080/whip";
|
||||
}
|
||||
|
||||
async listStreams(): Promise<StreamInfo[]> {
|
||||
let data: StreamInfo[] = [];
|
||||
let url = "/whip"
|
||||
if (this.ENV !== "production") {
|
||||
url = "http://localhost:8080/whip"
|
||||
}
|
||||
const resp = await fetch(url);
|
||||
data = (await resp.json()) as unknown as StreamInfo[];
|
||||
|
||||
const resp = await fetch(
|
||||
url,
|
||||
);
|
||||
data = await resp.json() as unknown as StreamInfo[];
|
||||
const sortedStreams = data.sort((a, b) => {
|
||||
if (a.streamKey > b.streamKey) {
|
||||
return -1;
|
||||
} else if (a.streamKey < b.streamKey) {
|
||||
return 1;
|
||||
}
|
||||
return 0;
|
||||
});
|
||||
|
||||
const sortedStreams = data.sort((a, b) => {
|
||||
if (a.streamKey > b.streamKey) {
|
||||
return -1
|
||||
} else if (a.streamKey < b.streamKey) {
|
||||
return 1
|
||||
}
|
||||
return 0
|
||||
})
|
||||
return sortedStreams;
|
||||
}
|
||||
|
||||
return sortedStreams;
|
||||
async postOffer(
|
||||
streamKey: string,
|
||||
offer_sdp: RTCSessionDescription,
|
||||
): Promise<RTCSessionDescription> {
|
||||
let url = "/whip/" + streamKey;
|
||||
if (this.ENV !== "production") {
|
||||
url = "http://localhost:8080/whip/" + streamKey;
|
||||
}
|
||||
|
||||
async postOffer(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, {
|
||||
method: "POST",
|
||||
body: offer_sdp.sdp,
|
||||
});
|
||||
const body = await resp.text();
|
||||
const answer = new RTCSessionDescription({ type: "answer", sdp: body });
|
||||
|
||||
const resp = await fetch(url,
|
||||
{
|
||||
method: "POST",
|
||||
body: offer_sdp.sdp
|
||||
})
|
||||
const body = await resp.text()
|
||||
const answer = new RTCSessionDescription({ type: "answer", sdp: body })
|
||||
return answer;
|
||||
}
|
||||
|
||||
return answer
|
||||
async siteInfo(): Promise<SiteInfo> {
|
||||
let url = "/api/siteinfo";
|
||||
if (this.ENV !== "production") {
|
||||
url = "http://localhost:8080/api/siteinfo";
|
||||
}
|
||||
|
||||
async siteInfo(): Promise<SiteInfo> {
|
||||
let url = "/api/siteinfo"
|
||||
if (this.ENV !== "production") {
|
||||
url = "http://localhost:8080/api/siteinfo"
|
||||
}
|
||||
const resp = await fetch(url, {
|
||||
method: "GET",
|
||||
});
|
||||
const data = resp.json();
|
||||
|
||||
const resp = await fetch(url,
|
||||
{
|
||||
method: "GET",
|
||||
})
|
||||
const data = resp.json()
|
||||
|
||||
return data as unknown as SiteInfo
|
||||
}
|
||||
return data as unknown as SiteInfo;
|
||||
}
|
||||
}
|
||||
|
||||
134
src/js/app.tsx
134
src/js/app.tsx
@ -7,93 +7,91 @@ import React from "react";
|
||||
import * as Log from "./log";
|
||||
|
||||
interface AppProps {
|
||||
api: MinistreamApiClient
|
||||
api: MinistreamApiClient;
|
||||
}
|
||||
|
||||
const titleKey = "ministream.title"
|
||||
const titleKey = "ministream.title";
|
||||
|
||||
function setTitleFromLocalstorage() {
|
||||
const title = localStorage.getItem(titleKey)
|
||||
if (title) {
|
||||
setTitle(title)
|
||||
}
|
||||
const title = localStorage.getItem(titleKey);
|
||||
if (title) {
|
||||
setTitle(title);
|
||||
}
|
||||
}
|
||||
|
||||
function setTitle(title: string) {
|
||||
const el = document.querySelector('title')
|
||||
if (el) {
|
||||
el.textContent = title
|
||||
}
|
||||
const el = document.querySelector("title");
|
||||
if (el) {
|
||||
el.textContent = title;
|
||||
}
|
||||
}
|
||||
|
||||
export function App({ api }: AppProps) {
|
||||
const [streamList, setStreamList] = useState<StreamInfo[]>([])
|
||||
const [selectedStream, setSelectedStream] = useState<string | null>(null)
|
||||
const [streamList, setStreamList] = useState<StreamInfo[]>([]);
|
||||
const [selectedStream, setSelectedStream] = useState<string | null>(null);
|
||||
|
||||
const updateSelect = (item: string | null) => {
|
||||
setSelectedStream(item)
|
||||
}
|
||||
const updateSelect = (item: string | null) => {
|
||||
setSelectedStream(item);
|
||||
};
|
||||
|
||||
const updateTitle = () => {
|
||||
api.siteInfo().then((info) => {
|
||||
if (info.siteName != document.title) {
|
||||
setTitle(info.siteName);
|
||||
localStorage.setItem(titleKey, info.siteName);
|
||||
}
|
||||
});
|
||||
return;
|
||||
};
|
||||
|
||||
|
||||
const updateTitle = () => {
|
||||
api.siteInfo().then((info) => {
|
||||
if (info.siteName != document.title) {
|
||||
setTitle(info.siteName)
|
||||
localStorage.setItem(titleKey, info.siteName)
|
||||
}
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
|
||||
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
|
||||
})
|
||||
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;
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
}
|
||||
updateStreamList();
|
||||
const updateInterval = setInterval(() => {
|
||||
updateStreamList();
|
||||
}, 10000);
|
||||
return () => clearInterval(updateInterval);
|
||||
}, []);
|
||||
|
||||
updateStreamList()
|
||||
const updateInterval = setInterval(() => {
|
||||
updateStreamList()
|
||||
}, 10000)
|
||||
return () => clearInterval(updateInterval)
|
||||
}, [])
|
||||
useEffect(() => {
|
||||
updateTitle();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
updateTitle()
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<>
|
||||
<Menu
|
||||
items={streamList}
|
||||
selectedItem={selectedStream}
|
||||
selectCallback={updateSelect}
|
||||
/>
|
||||
<MediaContainer selectedStream={selectedStream} api={api} />
|
||||
</>
|
||||
)
|
||||
return (
|
||||
<>
|
||||
<Menu
|
||||
items={streamList}
|
||||
selectedItem={selectedStream}
|
||||
selectCallback={updateSelect}
|
||||
/>
|
||||
<MediaContainer selectedStream={selectedStream} api={api} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
const rootElement = document.getElementById("app");
|
||||
setTitleFromLocalstorage()
|
||||
setTitleFromLocalstorage();
|
||||
if (rootElement) {
|
||||
const root = createRoot(rootElement)
|
||||
const api = new MinistreamApiClient()
|
||||
root.render(<App api={api} />)
|
||||
const root = createRoot(rootElement);
|
||||
const api = new MinistreamApiClient();
|
||||
root.render(<App api={api} />);
|
||||
}
|
||||
@ -1,58 +1,55 @@
|
||||
|
||||
|
||||
|
||||
function levelToNumber(level: Level): number {
|
||||
switch (level) {
|
||||
case "DEBUG":
|
||||
return 0
|
||||
case "INFO":
|
||||
return 1
|
||||
case "ERROR":
|
||||
return 2
|
||||
case "WARN":
|
||||
return 3
|
||||
}
|
||||
switch (level) {
|
||||
case "DEBUG":
|
||||
return 0;
|
||||
case "INFO":
|
||||
return 1;
|
||||
case "ERROR":
|
||||
return 2;
|
||||
case "WARN":
|
||||
return 3;
|
||||
}
|
||||
}
|
||||
|
||||
let currentLevel: Level = "INFO"
|
||||
let currentLevel: Level = "INFO";
|
||||
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
currentLevel = "DEBUG"
|
||||
if (process.env.NODE_ENV !== "production") {
|
||||
currentLevel = "DEBUG";
|
||||
}
|
||||
|
||||
export type Level = "ERROR" | "WARN" | "INFO" | "DEBUG"
|
||||
export type Level = "ERROR" | "WARN" | "INFO" | "DEBUG";
|
||||
|
||||
export function setLevel(level: Level) {
|
||||
currentLevel = level
|
||||
currentLevel = level;
|
||||
}
|
||||
|
||||
export interface LogArgs {
|
||||
[key: string]: string
|
||||
[key: string]: string;
|
||||
}
|
||||
|
||||
const doLog = (level: Level, message: string, extras?: LogArgs) => {
|
||||
let logLine = `[${level}] ${message}`
|
||||
let logLine = `[${level}] ${message}`;
|
||||
|
||||
if (extras) {
|
||||
Object.keys(extras).forEach((key) => {
|
||||
logLine = logLine + ` ${key}=${extras[key]}`
|
||||
})
|
||||
}
|
||||
if (extras) {
|
||||
Object.keys(extras).forEach((key) => {
|
||||
logLine = logLine + ` ${key}=${extras[key]}`;
|
||||
});
|
||||
}
|
||||
|
||||
if (levelToNumber(level) >= levelToNumber(currentLevel)) {
|
||||
console.log(logLine)
|
||||
}
|
||||
}
|
||||
if (levelToNumber(level) >= levelToNumber(currentLevel)) {
|
||||
console.log(logLine);
|
||||
}
|
||||
};
|
||||
|
||||
export function Error(message: string, extras?: LogArgs) {
|
||||
doLog("ERROR", message, extras)
|
||||
doLog("ERROR", message, extras);
|
||||
}
|
||||
export function Warn(message: string, extras?: LogArgs) {
|
||||
doLog("WARN", message, extras)
|
||||
doLog("WARN", message, extras);
|
||||
}
|
||||
export function Info(message: string, extras?: LogArgs) {
|
||||
doLog("INFO", message, extras)
|
||||
doLog("INFO", message, extras);
|
||||
}
|
||||
export function Debug(message: string, extras?: LogArgs) {
|
||||
doLog("DEBUG", message, extras)
|
||||
doLog("DEBUG", message, extras);
|
||||
}
|
||||
|
||||
280
src/js/media.tsx
280
src/js/media.tsx
@ -1,171 +1,179 @@
|
||||
import { useRef, useEffect, useState } from "react"
|
||||
import { MinistreamApiClient } from "./api"
|
||||
import React from "react"
|
||||
import { useRef, useEffect, useState } from "react";
|
||||
import { MinistreamApiClient } from "./api";
|
||||
import React from "react";
|
||||
import * as Log from "./log";
|
||||
|
||||
type MediaContainerProps = {
|
||||
selectedStream: string | null
|
||||
api: MinistreamApiClient
|
||||
}
|
||||
selectedStream: string | null;
|
||||
api: MinistreamApiClient;
|
||||
};
|
||||
|
||||
export function MediaContainer({ selectedStream, api }: MediaContainerProps) {
|
||||
const [iceReady, setICEReady] = useState(false)
|
||||
const [remoteReady, setRemoteReady] = useState(false)
|
||||
const [pc, setPC] = useState(new RTCPeerConnection())
|
||||
const [ms, setMs] = useState(new MediaStream())
|
||||
const [iceReady, setICEReady] = useState(false);
|
||||
const [remoteReady, setRemoteReady] = useState(false);
|
||||
const [pc, setPC] = useState(new RTCPeerConnection());
|
||||
const [ms, setMs] = useState(new MediaStream());
|
||||
|
||||
// if selected stream changed, recreate pc, and set all to not ready.
|
||||
useEffect(() => {
|
||||
Log.Debug("Ran useEffect.", { "because_state": "selectedStream" })
|
||||
setPC(new RTCPeerConnection({
|
||||
iceServers: [{ urls: "stun:stun.l.google.com:19302" }]
|
||||
}))
|
||||
setICEReady(false)
|
||||
setRemoteReady(false)
|
||||
setMs(new MediaStream())
|
||||
// if selected stream changed, recreate pc, and set all to not ready.
|
||||
useEffect(() => {
|
||||
Log.Debug("Ran useEffect.", { because_state: "selectedStream" });
|
||||
setPC(
|
||||
new RTCPeerConnection({
|
||||
iceServers: [{ urls: "stun:stun.l.google.com:19302" }],
|
||||
}),
|
||||
);
|
||||
setICEReady(false);
|
||||
setRemoteReady(false);
|
||||
setMs(new MediaStream());
|
||||
}, [selectedStream]);
|
||||
|
||||
}, [selectedStream])
|
||||
useEffect(() => {
|
||||
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);
|
||||
}),
|
||||
);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
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) => {
|
||||
if (!event.candidate) {
|
||||
Log.Info("ICE gathering complete.");
|
||||
setICEReady(true);
|
||||
} else {
|
||||
Log.Debug("Adding ICE candidate.", {
|
||||
candidate: event.candidate.candidate,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
pc.onicecandidate = (event) => {
|
||||
if (!event.candidate) {
|
||||
Log.Info("ICE gathering complete.")
|
||||
setICEReady(true)
|
||||
} else {
|
||||
Log.Debug("Adding ICE candidate.", { "candidate": event.candidate.candidate })
|
||||
}
|
||||
}
|
||||
pc.oniceconnectionstatechange = () => {
|
||||
Log.Info("ICE gathering complete.");
|
||||
};
|
||||
|
||||
pc.oniceconnectionstatechange = () => {
|
||||
Log.Info("ICE gathering complete.")
|
||||
}
|
||||
pc.createOffer().then((offer) => {
|
||||
pc.setLocalDescription(offer).then(() => {
|
||||
Log.Debug("Local description set.");
|
||||
});
|
||||
});
|
||||
}, [pc]);
|
||||
|
||||
pc.createOffer().then((offer) => {
|
||||
pc.setLocalDescription(offer).then(() => { Log.Debug("Local description set.") })
|
||||
})
|
||||
}, [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": "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]);
|
||||
|
||||
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 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 id="main">
|
||||
<main>
|
||||
{getElement()}
|
||||
</main>
|
||||
</div>
|
||||
)
|
||||
<div className="video-wrapper">
|
||||
<VideoPlayer ms={ms} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div id="main">
|
||||
<main>{getElement()}</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface VideoPlayerProps {
|
||||
ms: MediaStream
|
||||
ms: MediaStream;
|
||||
}
|
||||
|
||||
export function VideoPlayer({ ms }: VideoPlayerProps) {
|
||||
const [ready, setReady] = useState(false);
|
||||
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)
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
const [ready, setReady] = useState(false);
|
||||
const videoRef = useRef<HTMLVideoElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
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} />
|
||||
</>
|
||||
)
|
||||
return;
|
||||
}
|
||||
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 {
|
||||
text: string
|
||||
spinner?: boolean
|
||||
text: string;
|
||||
spinner?: boolean;
|
||||
}
|
||||
|
||||
export function LoadingText({ text, spinner = false }: LoadingText) {
|
||||
let spinnerElement = (<></>)
|
||||
if (spinner) {
|
||||
spinnerElement = (<Spinner />)
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<div className="loader-wrapper">
|
||||
<div className="loader">
|
||||
{spinnerElement}
|
||||
<p className="loading-text">{text}</p>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
let spinnerElement = <></>;
|
||||
if (spinner) {
|
||||
spinnerElement = <Spinner />;
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<div className="loader-wrapper">
|
||||
<div className="loader">
|
||||
{spinnerElement}
|
||||
<p className="loading-text">{text}</p>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export function Spinner() {
|
||||
return <div className="spinner" />
|
||||
return <div className="spinner" />;
|
||||
}
|
||||
|
||||
@ -1,52 +1,67 @@
|
||||
import React from "react";
|
||||
import { StreamInfo } from "./api";
|
||||
|
||||
type StreamSelectCallback = (selected: string | null) => void
|
||||
type StreamSelectCallback = (selected: string | null) => void;
|
||||
|
||||
interface MenuProps {
|
||||
items: StreamInfo[]
|
||||
selectedItem: string | null
|
||||
selectCallback: StreamSelectCallback
|
||||
items: StreamInfo[];
|
||||
selectedItem: string | null;
|
||||
selectCallback: StreamSelectCallback;
|
||||
}
|
||||
|
||||
export function Menu({ items, selectedItem, selectCallback }: MenuProps) {
|
||||
const title = document.title
|
||||
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>
|
||||
</>
|
||||
}
|
||||
})}
|
||||
</>
|
||||
)
|
||||
}
|
||||
const title = document.title;
|
||||
const menuitems = () => {
|
||||
return (
|
||||
<div id="menu">
|
||||
<aside>
|
||||
<a className="menu-heading" onClick={() => {
|
||||
selectCallback(null)
|
||||
}} href="#">{title}</a>
|
||||
<ul className="menu-list">
|
||||
{menuitems()}
|
||||
</ul>
|
||||
</aside>
|
||||
</div>
|
||||
)
|
||||
|
||||
<>
|
||||
{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 (
|
||||
<div id="menu">
|
||||
<aside>
|
||||
<a
|
||||
className="menu-heading"
|
||||
onClick={() => {
|
||||
selectCallback(null);
|
||||
}}
|
||||
href="#"
|
||||
>
|
||||
{title}
|
||||
</a>
|
||||
<ul className="menu-list">{menuitems()}</ul>
|
||||
</aside>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,22 +1,14 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"esModuleInterop": true,
|
||||
"jsx": "react",
|
||||
"module": "esnext",
|
||||
"moduleResolution": "node",
|
||||
"lib": [
|
||||
"dom",
|
||||
"esnext"
|
||||
],
|
||||
"strict": true,
|
||||
"sourceMap": true,
|
||||
"target": "esnext",
|
||||
},
|
||||
"exclude": [
|
||||
"node_modules"
|
||||
],
|
||||
"include": [
|
||||
"src/**/*.ts",
|
||||
"src/**/*.tsx"
|
||||
],
|
||||
"compilerOptions": {
|
||||
"esModuleInterop": true,
|
||||
"jsx": "react",
|
||||
"module": "esnext",
|
||||
"moduleResolution": "node",
|
||||
"lib": ["dom", "esnext"],
|
||||
"strict": true,
|
||||
"sourceMap": true,
|
||||
"target": "esnext"
|
||||
},
|
||||
"exclude": ["node_modules"],
|
||||
"include": ["src/**/*.ts", "src/**/*.tsx"]
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user