1  import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 2  import { Box, Button, Paper, Stack, Typography } from '@mui/material';
 3  import Grid from '@mui/material/Grid2';
 4  import { useSignal } from '@preact/signals-react';
 5  import { IFileInfo, isIFolderFile, isIVideoFile, isPinFeature } from 'ipmc-interfaces';
 6  import React from 'react';
 7  import { useLocation } from 'wouter';
 8  import { useAppbarButtons, useTitle, useTranslation } from '../../hooks';
 9  import { IAppbarButtonOptions } from '../../services/AppbarButtonService';
10  import { FileInfoDisplay, PinButton } from '../atoms';
11  import { Display, DisplayButtons, ErrorBoundary, FileGridItem } from '../molecules';
12  import { VideoPlayer } from '../organisms';
13  
14  export function ItemPage(props: {
15  	item: IFileInfo;
16  }) {
17  	const file = props.item;
18  	const _t = useTranslation();
19  	const [_, setLocation] = useLocation();
20  	const title = useTitle(file);
21  
22  	const display = useSignal<Display>(Display.Poster);
23  
24  	useAppbarButtons([
25  		{
26  			component: (
27  				<Button onClick={() => history.back()} startIcon={<ArrowBackIcon />}>{_t('Back')}</Button>
28  			),
29  			position: 'start'
30  		},
31  		{
32  			component: (
33  				<Typography>{title}</Typography>
34  			),
35  			position: 'start'
36  		},
37  		...(isIFolderFile(file) ? [
38  			{
39  				component: (<DisplayButtons display={display} />),
40  				position: 'end',
41  			}
42  		] as IAppbarButtonOptions[] : []),
43  	]);
44  
45  	return isIFolderFile(file) ? (
46  		<Stack sx={{ overflow: 'auto' }} spacing={1}>
47  			<Paper>
48  				<FileInfoDisplay file={file} />
49  				{isPinFeature(file) && <PinButton item={file} />}
50  			</Paper>
51  			<Grid container spacing={1} sx={{ width: '100%' }}>
52  				{file.items.length === 0 ? (
53  					<Grid>{_t('NoItems')}</Grid>
54  				) : file.items.map(i => (
55  					<Grid key={i.cid}>
56  						<ErrorBoundary>
57  							<FileGridItem
58  								file={i}
59  								onOpen={() => setLocation(`/${i.name}`)}
60  								display={display}
61  							/>
62  						</ErrorBoundary>
63  					</Grid>
64  				))}
65  			</Grid>
66  		</Stack>
67  	) : (
68  		<Box>
69  			{isIVideoFile(file) && <VideoPlayer file={file} />}
70  			{isPinFeature(file) && <PinButton item={file} />}
71  		</Box>
72  	);
73  }