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

Set title and convert all class component to functional #4

Merged
torjus merged 6 commits from feature/set-title into master 2023-12-05 02:22:23 +00:00
Conversation 0 Commits 6 Files Changed 6 +28 -19
3 changed files with 28 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit fbe9153bfc - Show all commits

2
src/index.html
View File

@@ -2,7 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"/> <meta charset="utf-8"/>
<title>stream.t-juice.club</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" />

36
src/js/app.tsx
View File

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

7
src/js/menu.tsx
View File

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