added twitch frontend components

frontend/package.json

@@ -18,11 +18,11 @@
     "@mui/icons-material": "^6.2.0",
     "@mui/material": "^6.2.0",
     "fp-ts": "^2.16.5",
+    "jotai": "^2.10.3",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-router-dom": "^6.23.1",
     "react-virtuoso": "^4.7.11",
-    "jotai": "^2.10.3",
     "rxjs": "^7.8.1"
   },
   "devDependencies": {

frontend/src/Layout.tsx

@@ -28,6 +28,7 @@ import Footer from './components/Footer'
 import Logout from './components/Logout'
 import SocketSubscriber from './components/SocketSubscriber'
 import ThemeToggler from './components/ThemeToggler'
+import TwitchIcon from './components/TwitchIcon'
 import { useI18n } from './hooks/useI18n'
 import Toaster from './providers/ToasterProvider'
 import { getAccentValue } from './utils'
@@ -154,6 +155,19 @@ export default function Layout() {
                 <ListItemText primary={i18n.t('subscriptionsButtonLabel')} />
               </ListItemButton>
             </Link>
+            <Link to={'/twitch'} style={
+              {
+                textDecoration: 'none',
+                color: mode === 'dark' ? '#ffffff' : '#000000DE'
+              }
+            }>
+              <ListItemButton>
+                <ListItemIcon>
+                  <TwitchIcon />
+                </ListItemIcon>
+                <ListItemText primary={"Twitch"} />
+              </ListItemButton>
+            </Link>
             <Link to={'/monitor'} style={
               {
                 textDecoration: 'none',

frontend/src/components/HomeSpeedDial.tsx

@@ -32,7 +32,6 @@ const HomeSpeedDial: React.FC<Props> = ({ onDownloadOpen, onEditorOpen }) => {
       ariaLabel="Home speed dial"
       sx={{ position: 'absolute', bottom: 64, right: 24 }}
       icon={<SpeedDialIcon />}
-      onClick={onDownloadOpen}
     >
       <SpeedDialAction
         icon={listView ? <ViewAgendaIcon /> : <FormatListBulleted />}

frontend/src/components/TwitchIcon.tsx

@@ -0,0 +1,22 @@
+import { useAtomValue } from 'jotai'
+import { settingsState } from '../atoms/settings'
+
+const TwitchIcon: React.FC = () => {
+  const { theme } = useAtomValue(settingsState)
+
+  return (
+    <svg
+      role="img"
+      viewBox="0 0 24 24"
+      width={24}
+      height={24}
+      xmlns="http://www.w3.org/2000/svg"
+      style={{ fill: theme === 'dark' ? '#fff' : '#757575' }}
+    >
+      <title>Twitch</title>
+      <path d="M11.571 4.714h1.715v5.143H11.57zm4.715 0H18v5.143h-1.714zM6 0L1.714 4.286v15.428h5.143V24l4.286-4.286h3.428L22.286 12V0zm14.571 11.143l-3.428 3.428h-3.429l-3 3v-3H6.857V1.714h13.714Z" />
+    </svg>
+  )
+}
+
+export default TwitchIcon

frontend/src/components/twitch/TwitchDialog.tsx

@@ -0,0 +1,143 @@
+import CloseIcon from '@mui/icons-material/Close'
+import {
+  Alert,
+  AppBar,
+  Box,
+  Button,
+  Container,
+  Dialog,
+  Grid,
+  IconButton,
+  Paper,
+  Slide,
+  TextField,
+  Toolbar,
+  Typography
+} from '@mui/material'
+import { TransitionProps } from '@mui/material/transitions'
+import { matchW } from 'fp-ts/lib/Either'
+import { pipe } from 'fp-ts/lib/function'
+import { useAtomValue } from 'jotai'
+import { forwardRef, startTransition, useState } from 'react'
+import { serverURL } from '../../atoms/settings'
+import { useToast } from '../../hooks/toast'
+import { useI18n } from '../../hooks/useI18n'
+import { ffetch } from '../../lib/httpClient'
+
+type Props = {
+  open: boolean
+  onClose: () => void
+}
+
+const Transition = forwardRef(function Transition(
+  props: TransitionProps & {
+    children: React.ReactElement
+  },
+  ref: React.Ref<unknown>,
+) {
+  return <Slide direction="up" ref={ref} {...props} />
+})
+
+const TwitchDialog: React.FC<Props> = ({ open, onClose }) => {
+  const [channelURL, setChannelURL] = useState('')
+
+  const { i18n } = useI18n()
+  const { pushMessage } = useToast()
+
+  const baseURL = useAtomValue(serverURL)
+
+  const submit = async (channelURL: string) => {
+    const task = ffetch<void>(`${baseURL}/twitch/user`, {
+      method: 'POST',
+      body: JSON.stringify({
+        user: channelURL.split('/').at(-1)
+      })
+    })
+    const either = await task()
+
+    pipe(
+      either,
+      matchW(
+        (l) => pushMessage(l, 'error'),
+        (_) => onClose()
+      )
+    )
+  }
+
+  return (
+    <Dialog
+      fullScreen
+      open={open}
+      onClose={onClose}
+      TransitionComponent={Transition}
+    >
+      <AppBar sx={{ position: 'relative' }}>
+        <Toolbar>
+          <IconButton
+            edge="start"
+            color="inherit"
+            onClick={onClose}
+            aria-label="close"
+          >
+            <CloseIcon />
+          </IconButton>
+          <Typography sx={{ ml: 2, flex: 1 }} variant="h6" component="div">
+            {i18n.t('subscriptionsButtonLabel')}
+          </Typography>
+        </Toolbar>
+      </AppBar>
+      <Box sx={{
+        backgroundColor: (theme) => theme.palette.background.default,
+        minHeight: (theme) => `calc(99vh - ${theme.mixins.toolbar.minHeight}px)`
+      }}>
+        <Container sx={{ my: 4 }}>
+          <Grid container spacing={2}>
+            <Grid item xs={12}>
+              <Paper
+                elevation={4}
+                sx={{
+                  p: 2,
+                  display: 'flex',
+                  flexDirection: 'column',
+                }}
+              >
+                <Grid container gap={1.5}>
+                  <Grid item xs={12}>
+                    <Alert severity="info">
+                      {i18n.t('subscriptionsInfo')}
+                    </Alert>
+                    <Alert severity="warning" sx={{ mt: 1 }}>
+                      {i18n.t('livestreamExperimentalWarning')}
+                    </Alert>
+                  </Grid>
+                  <Grid item xs={12} mt={1}>
+                    <TextField
+                      multiline
+                      fullWidth
+                      label={i18n.t('subscriptionsURLInput')}
+                      variant="outlined"
+                      placeholder="https://www.twitch.tv/a_twitch_user_that_exists"
+                      onChange={(e) => setChannelURL(e.target.value)}
+                    />
+                  </Grid>
+                  <Grid item xs={12}>
+                    <Button
+                      sx={{ mt: 2 }}
+                      variant="contained"
+                      disabled={channelURL === ''}
+                      onClick={() => startTransition(() => submit(channelURL))}
+                    >
+                      {i18n.t('startButton')}
+                    </Button>
+                  </Grid>
+                </Grid>
+              </Paper>
+            </Grid>
+          </Grid>
+        </Container>
+      </Box>
+    </Dialog>
+  )
+}
+
+export default TwitchDialog

frontend/src/router.tsx

@@ -6,6 +6,7 @@ import Terminal from './views/Terminal'
 
 const Home = lazy(() => import('./views/Home'))
 const Login = lazy(() => import('./views/Login'))
+const Twitch = lazy(() => import('./views/Twitch'))
 const Archive = lazy(() => import('./views/Archive'))
 const Settings = lazy(() => import('./views/Settings'))
 const LiveStream = lazy(() => import('./views/Livestream'))
@@ -111,6 +112,14 @@ export const router = createHashRouter([
           </Suspense >
         )
       },
+      {
+        path: '/twitch',
+        element: (
+          <Suspense fallback={<CircularProgress />}>
+            <Twitch />
+          </Suspense >
+        )
+      },
     ]
   },
 ])

frontend/src/views/Twitch.tsx

@@ -0,0 +1,77 @@
+import {
+  Chip,
+  Container,
+  Paper
+} from '@mui/material'
+import { matchW } from 'fp-ts/lib/Either'
+import { pipe } from 'fp-ts/lib/function'
+import { useAtomValue } from 'jotai'
+import { useState, useTransition } from 'react'
+import { serverURL } from '../atoms/settings'
+import LoadingBackdrop from '../components/LoadingBackdrop'
+import NoSubscriptions from '../components/subscriptions/NoSubscriptions'
+import SubscriptionsSpeedDial from '../components/subscriptions/SubscriptionsSpeedDial'
+import TwitchDialog from '../components/twitch/TwitchDialog'
+import { useToast } from '../hooks/toast'
+import useFetch from '../hooks/useFetch'
+import { ffetch } from '../lib/httpClient'
+
+const TwitchView: React.FC = () => {
+  const { pushMessage } = useToast()
+
+  const baseURL = useAtomValue(serverURL)
+
+  const [openDialog, setOpenDialog] = useState(false)
+
+  const { data: users, fetcher: refetch } = useFetch<Array<string>>('/twitch/users')
+
+  const [isPending, startTransition] = useTransition()
+
+  const deleteUser = async (user: string) => {
+    const task = ffetch<void>(`${baseURL}/twitch/user/${user}`, {
+      method: 'DELETE',
+    })
+    const either = await task()
+
+    pipe(
+      either,
+      matchW(
+        (l) => pushMessage(l, 'error'),
+        () => refetch()
+      )
+    )
+  }
+
+  return (
+    <>
+      <LoadingBackdrop isLoading={!users || isPending} />
+
+      <SubscriptionsSpeedDial onOpen={() => setOpenDialog(s => !s)} />
+
+      <TwitchDialog open={openDialog} onClose={() => {
+        setOpenDialog(s => !s)
+        refetch()
+      }} />
+
+      {
+        !users || users.length === 0 ?
+          <NoSubscriptions /> :
+          <Container maxWidth="xl" sx={{ mt: 4, mb: 8 }}>
+            <Paper sx={{
+              p: 2.5,
+              minHeight: '80vh',
+            }}>
+              {users.map(user => (
+                <Chip
+                  label={user}
+                  onDelete={() => startTransition(async () => await deleteUser(user))}
+                />
+              ))}
+            </Paper>
+          </Container>
+      }
+    </>
+  )
+}
+
+export default TwitchView

server/server.go

@@ -251,8 +251,9 @@ func newServer(c serverConfig) *http.Server {
 	// Twitch
 	r.Route("/twitch", func(r chi.Router) {
 		r.Use(middlewares.ApplyAuthenticationByConfig)
-		r.Get("/all", twitch.GetMonitoredUsers(c.tm))
-		r.Post("/add", twitch.MonitorUserHandler(c.tm))
+		r.Get("/users", twitch.GetMonitoredUsers(c.tm))
+		r.Post("/user", twitch.MonitorUserHandler(c.tm))
+		r.Delete("/user/{user}", twitch.DeleteUser(c.tm))
 	})
 
 	return &http.Server{Handler: r}

server/twitch/monitor.go

@@ -83,6 +83,13 @@ func (m *Monitor) GetMonitoredUsers() iter.Seq[string] {
 	return maps.Keys(m.monitored)
 }
 
+func (m *Monitor) DeleteUser(user string) {
+	m.mu.Lock()
+	defer m.mu.Unlock()
+	delete(m.monitored, user)
+	delete(m.lastState, user)
+}
+
 func DEFAULT_DOWNLOAD_HANDLER(db *internal.MemoryDB, mq *internal.MessageQueue) func(url string) error {
 	return func(url string) error {
 		p := &internal.Process{

server/twitch/rest.go

@@ -4,6 +4,8 @@ import (
 	"encoding/json"
 	"net/http"
 	"slices"
+
+	"github.com/go-chi/chi/v5"
 )
 
 type addUserReq struct {
@@ -32,7 +34,30 @@ func GetMonitoredUsers(m *Monitor) http.HandlerFunc {
 	return func(w http.ResponseWriter, r *http.Request) {
 		it := m.GetMonitoredUsers()
 
-		if err := json.NewEncoder(w).Encode(slices.Collect(it)); err != nil {
+		users := slices.Collect(it)
+		if users == nil {
+			users = make([]string, 0)
+		}
+
+		if err := json.NewEncoder(w).Encode(users); err != nil {
+			http.Error(w, err.Error(), http.StatusInternalServerError)
+			return
+		}
+	}
+}
+
+func DeleteUser(m *Monitor) http.HandlerFunc {
+	return func(w http.ResponseWriter, r *http.Request) {
+		user := chi.URLParam(r, "user")
+
+		if user == "" {
+			http.Error(w, "empty user", http.StatusBadRequest)
+			return
+		}
+
+		m.DeleteUser(user)
+
+		if err := json.NewEncoder(w).Encode("ok"); err != nil {
 			http.Error(w, err.Error(), http.StatusInternalServerError)
 			return
 		}