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

Set title from siteinfo endpoint

Browse Source
This commit is contained in:
Torjus Håkestad 2023-12-05 03:19:01 +01:00
parent 2a5f0ea601
commit fbe9153bfc
3 changed files with 28 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/index.html
View File

@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>stream.t-juice.club</title>
<title></title>
<script src="./js/app.tsx" type="module"></script>
<link rel="stylesheet" href="./css/style.css" />
<link rel="stylesheet" href="./css/fonts.css" />

38
src/js/app.tsx
View File

@ -9,11 +9,27 @@ 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<string[]>([])
const [selectedStream, setSelectedStream] = useState<string | null>(null)
const updateSelect = (item: string) => {
const updateSelect = (item: string | null) => {
setSelectedStream(item)
}
@ -33,19 +49,8 @@ export function App({ api }: AppProps) {
}
const updateTitle = () => {
const titleKey = "ministream.title"
var title = localStorage.getItem(titleKey)
const setTitle = (title: string) => {
const el = document.querySelector('title')
if (el) {
el.textContent = title
}
}
if (title) {
setTitle(title)
}
api.siteInfo().then((info) => {
if (info.siteName != title) {
api.siteInfo().then((info) => {
if (info.siteName != document.title) {
setTitle(info.siteName)
localStorage.setItem(titleKey, info.siteName)
}
@ -60,11 +65,11 @@ export function App({ api }: AppProps) {
useEffect(() => {
updateStreamList()
}, [])
useEffect(() => {
updateTitle()
}, [])
return (
<>
<Menu
@ -78,8 +83,9 @@ export function App({ api }: AppProps) {
}
const rootElement = document.getElementById("app");
setTitleFromLocalstorage()
if (rootElement) {
const root = createRoot(rootElement);
const root = createRoot(rootElement)
const api = new MinistreamApiClient()
root.render(<App api={api} />)
}

7
src/js/menu.tsx
View File

@ -1,7 +1,7 @@
import { createRoot } from "react-dom/client";
import React from "react";
type StreamSelectCallback = (selected: string) => void
type StreamSelectCallback = (selected: string | null) => void
interface MenuProps {
items: string[]
@ -10,6 +10,7 @@ interface MenuProps {
}
export function Menu({ items, selectedItem, selectCallback }: MenuProps) {
const title = document.title
const menuitems = () => {
return (
<>
@ -28,7 +29,9 @@ export function Menu({ items, selectedItem, selectCallback }: MenuProps) {
return (
<div id="menu">
<aside>
<a className="menu-heading" href="#">stream.t-juice.club</a>
<a className="menu-heading" onClick={() => {
selectCallback(null)
}}href="#">{title}</a>
<ul className="menu-list">
{menuitems()}
</ul>