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
Show Stats 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">
<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>