99 lines
2.6 KiB
TypeScript
99 lines
2.6 KiB
TypeScript
import { createRoot } from "react-dom/client";
|
|
import { Menu } from "./menu";
|
|
import { createContext, useEffect, useState } from "react";
|
|
import { MediaContainer } from "./media";
|
|
import { MinistreamApiClient, StreamInfo } from "./api";
|
|
import React from "react";
|
|
import { Log } from "./log";
|
|
|
|
interface AppProps {
|
|
api: MinistreamApiClient
|
|
}
|
|
|
|
const titleKey = "ministream.title"
|
|
|
|
function setTitleFromLocalstorage() {
|
|
var title = localStorage.getItem(titleKey)
|
|
if (title) {
|
|
setTitle(title)
|
|
}
|
|
}
|
|
|
|
function setTitle(title: string) {
|
|
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 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
|
|
}
|
|
|
|
|
|
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)
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
updateTitle()
|
|
}, [])
|
|
|
|
return (
|
|
<>
|
|
<Menu
|
|
items={streamList}
|
|
selectedItem={selectedStream}
|
|
selectCallback={updateSelect}
|
|
/>
|
|
<MediaContainer selectedStream={selectedStream} api={api} />
|
|
</>
|
|
)
|
|
}
|
|
|
|
const rootElement = document.getElementById("app");
|
|
setTitleFromLocalstorage()
|
|
if (rootElement) {
|
|
const root = createRoot(rootElement)
|
|
const api = new MinistreamApiClient()
|
|
root.render(<App api={api} />)
|
|
} |