Add initial experimental UI based on MUI

2025-03-30 19:56:21 +00:00 · 2022-11-28 16:39:13 -05:00 · 2022-11-28 16:39:13 -05:00 · 69fe4f067a
commit 69fe4f067a
parent 6155524e2c
14 changed files with 1793 additions and 233 deletions
--- a/src/apps/experimental/components/AppToolbar.tsx
+++ b/src/apps/experimental/components/AppToolbar.tsx
@ -0,0 +1,118 @@
+import SearchIcon from '@mui/icons-material/Search';
+import Avatar from '@mui/material/Avatar';
+import Box from '@mui/material/Box';
+import IconButton from '@mui/material/IconButton';
+import { useTheme } from '@mui/material/styles';
+import Toolbar from '@mui/material/Toolbar';
+import Tooltip from '@mui/material/Tooltip';
+import Typography from '@mui/material/Typography';
+import React, { FC } from 'react';
+import { Link } from 'react-router-dom';
+
+import { useApi } from 'hooks/useApi';
+import globalize from 'scripts/globalize';
+
+import { ID as UserMenuId } from './AppUserMenu';
+import AppTabs from './tabs/AppTabs';
+
+interface AppToolbarProps {
+    onUserButtonClick: (event: React.MouseEvent<HTMLElement>) => void
+}
+
+const AppToolbar: FC<AppToolbarProps> = ({
+    onUserButtonClick
+}) => {
+    const theme = useTheme();
+    const { api, user } = useApi();
+    const isUserLoggedIn = Boolean(user);
+
+    return (
+        <Toolbar
+            variant='dense'
+            sx={{
+                flexWrap: {
+                    xs: 'wrap',
+                    lg: 'nowrap'
+                }
+            }}
+        >
+            <Box
+                component={Link}
+                to='/'
+                color='inherit'
+                aria-label={globalize.translate('Home')}
+                sx={{
+                    display: 'inline-flex',
+                    textDecoration: 'none'
+                }}
+            >
+                <Box
+                    component='img'
+                    src='/assets/img/icon-transparent.png'
+                    sx={{
+                        height: '2rem',
+                        marginInlineEnd: 1
+                    }}
+                />
+                <Typography
+                    variant='h6'
+                    noWrap
+                    component='div'
+                    sx={{ display: { xs: 'none', sm: 'inline-block' } }}
+                >
+                    Jellyfin
+                </Typography>
+            </Box>
+
+            <AppTabs />
+
+            {isUserLoggedIn && (
+                <>
+                    <Box sx={{ display: 'flex', flexGrow: 1, justifyContent: 'flex-end' }}>
+                        <Tooltip title={globalize.translate('Search')}>
+                            <IconButton
+                                size='large'
+                                aria-label={globalize.translate('Search')}
+                                color='inherit'
+                                component={Link}
+                                to='/search.html'
+                            >
+                                <SearchIcon />
+                            </IconButton>
+                        </Tooltip>
+                    </Box>
+
+                    <Box sx={{ flexGrow: 0 }}>
+                        <Tooltip title={globalize.translate('UserMenu')}>
+                            <IconButton
+                                size='large'
+                                edge='end'
+                                aria-label={globalize.translate('UserMenu')}
+                                aria-controls={UserMenuId}
+                                aria-haspopup='true'
+                                onClick={onUserButtonClick}
+                                color='inherit'
+                                sx={{ padding: 0 }}
+                            >
+                                <Avatar
+                                    alt={user?.Name || undefined}
+                                    src={
+                                        api && user?.Id ?
+                                            `${api.basePath}/Users/${user.Id}/Images/Primary?tag=${user.PrimaryImageTag}` :
+                                            undefined
+                                    }
+                                    sx={{
+                                        bgcolor: theme.palette.primary.dark,
+                                        color: 'inherit'
+                                    }}
+                                />
+                            </IconButton>
+                        </Tooltip>
+                    </Box>
+                </>
+            )}
+        </Toolbar>
+    );
+};
+
+export default AppToolbar;