Creepso/multi-downloader-nx
1
0
Fork 0
Code Issues 38 Pull requests 10 Projects Releases 70 Packages Wiki Activity Actions

Add context menus to Episode List

Browse source 
Adds Image and Description context menus to the Episode List

Co-authored-by: AnidlSupport <AnidlSupport@users.noreply.github.com>
This commit is contained in:
AnimeDL 2023-07-09 13:35:29 -07:00
parent 517b0cdc1b
commit b9222325d1
1 changed files with 31 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
gui/react/src/components/AddToQueue/DownloadSelector/Listing/EpisodeListing.tsx
View file

@ -77,12 +77,9 @@ const EpisodeListing: React.FC = () => {
const e = isNaN(parseInt(item.e)) ? item.e : parseInt(item.e);
const idStr = `S${item.season}E${e}`
const isSelected = selected.includes(e.toString());
return <Box {...{ mouseData: isSelected }} key={`Episode_List_Item_${index}`} sx={{
backdropFilter: isSelected ? 'brightness(1.5)' : '',
'&:hover': {
backdropFilter: 'brightness(1.5)'
}
}}
const imageRef = React.createRef<HTMLImageElement>();
const summaryRef = React.createRef<HTMLParagraphElement>();
return <Box {...{ mouseData: isSelected }} key={`Episode_List_Item_${index}`}
onClick={() => {
let arr: string[] = [];
if (isSelected) {
@ -92,12 +89,14 @@ const EpisodeListing: React.FC = () => {
}
setSelected(arr.filter(a => a.length > 0));
}}>
<ListItem sx={{ display: 'grid', gridTemplateColumns: '25px 50px 1fr 5fr' }}>
<ListItem sx={{backdropFilter: isSelected ? 'brightness(1.5)' : '',
'&:hover': {backdropFilter: 'brightness(1.5)'},
display: 'grid', gridTemplateColumns: '25px 50px 1fr 5fr' }}>
{ isSelected ? <CheckBox /> : <CheckBoxOutlineBlank /> }
<Typography color='text.primary' sx={{ textAlign: 'center' }}>
{idStr}
</Typography>
<img style={{ width: 'inherit', maxHeight: '200px', minWidth: '150px' }} src={item.img} alt="thumbnail" />
<img ref={imageRef} style={{ width: 'inherit', maxHeight: '200px', minWidth: '150px' }} src={item.img} alt="thumbnail" />
<Box sx={{ display: 'flex', flexDirection: 'column', pl: 1 }}>
<Box sx={{ display: 'grid', gridTemplateColumns: '1fr min-content' }}>
<Typography color='text.primary' variant="h5">
@ -107,7 +106,7 @@ const EpisodeListing: React.FC = () => {
{item.time.startsWith('00:') ? item.time.slice(3) : item.time}
</Typography>
</Box>
<Typography color='text.primary'>
<Typography color='text.primary' ref={summaryRef}>
{item.description}
</Typography>
<Box sx={{ display: 'grid', gridTemplateColumns: 'fit-content 1fr' }}>
@ -118,6 +117,29 @@ const EpisodeListing: React.FC = () => {
</Box>
</Box>
</ListItem>
<ContextMenu options={[ { text: 'Copy image URL', onClick: async () => {
await navigator.clipboard.writeText(item.img);
enqueueSnackbar('Copied URL to clipboard', {
variant: 'info'
});
}},
{
text: 'Open image in new tab',
onClick: () => {
window.open(item.img);
}
} ]} popupItem={imageRef} />
<ContextMenu options={[
{
onClick: async () => {
await navigator.clipboard.writeText(item.description!);
enqueueSnackbar('Copied summary to clipboard', {
variant: 'info'
})
},
text: "Copy summary to clipboard"
}
]} popupItem={summaryRef} />
{index < length - 1 && <Divider />}
</Box>;
})}