davidl/MyTube
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: Update spacing to use Grid component in UpNextSidebar

Browse Source
This commit is contained in:
Peifan Li
2025-12-29 16:56:12 -05:00
parent a664baf7e7
commit 21c3f4c514
3 changed files with 58 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/src/components/Collections.tsx
View File

@@ -75,8 +75,9 @@ const Collections: React.FC<CollectionsProps> = ({ collections, onItemClick }) =
height: 20, height: 20,
minWidth: 20, minWidth: 20,
ml: 1, ml: 1,
flexShrink: 0,
'& .MuiChip-label': { '& .MuiChip-label': {
padding: '0 4px', padding: '0 6px',
fontSize: '0.75rem' fontSize: '0.75rem'
} }
}} }}

1
frontend/src/components/VideoCard.tsx
View File

@@ -72,7 +72,6 @@ const VideoCard: React.FC<VideoCardProps> = ({
borderRadius: isMobile ? 0 : undefined, borderRadius: isMobile ? 0 : undefined,
...(!isMobile && { ...(!isMobile && {
'&:hover': { '&:hover': {
transform: 'translateY(-4px)',
boxShadow: theme.shadows[8], boxShadow: theme.shadows[8],
'& .delete-btn': { '& .delete-btn': {
opacity: 1 opacity: 1

92
frontend/src/components/VideoPlayer/UpNextSidebar.tsx
View File

@@ -8,6 +8,7 @@ import {
CardMedia, CardMedia,
Chip, Chip,
FormControlLabel, FormControlLabel,
Grid,
IconButton, IconButton,
Skeleton, Skeleton,
Stack, Stack,
@@ -134,57 +135,58 @@ const UpNextSidebar: React.FC<UpNextSidebarProps> = ({
sx={{ ml: 0, mr: 0 }} sx={{ ml: 0, mr: 0 }}
/> />
</Stack> </Stack>
<Stack spacing={2}> <Grid container spacing={2}>
{relatedVideos.map(relatedVideo => ( {relatedVideos.map(relatedVideo => (
<Card <Grid key={relatedVideo.id} size={{ xs: 12, md: 6, lg: 12 }}>
key={relatedVideo.id} <Card
sx={{ display: 'flex', cursor: 'pointer', '&:hover': { bgcolor: 'action.hover' }, position: 'relative' }} sx={{ display: 'flex', cursor: 'pointer', '&:hover': { bgcolor: 'action.hover' }, position: 'relative' }}
onClick={() => onVideoClick(relatedVideo.id)} onClick={() => onVideoClick(relatedVideo.id)}
onMouseEnter={() => setHoveredVideoId(relatedVideo.id)} onMouseEnter={() => setHoveredVideoId(relatedVideo.id)}
onMouseLeave={() => setHoveredVideoId(null)} onMouseLeave={() => setHoveredVideoId(null)}
> >
<SidebarThumbnail video={relatedVideo} /> <SidebarThumbnail video={relatedVideo} />
<CardContent sx={{ flex: '1 1 auto', minWidth: 0, p: 1, '&:last-child': { pb: 1 }, position: 'relative', display: 'flex', flexDirection: 'column' }}> <CardContent sx={{ flex: '1 1 auto', minWidth: 0, p: 1, '&:last-child': { pb: 1 }, position: 'relative', display: 'flex', flexDirection: 'column' }}>
<Typography variant="body2" fontWeight="bold" sx={{ lineHeight: 1.2, mb: 0.5, display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}> <Typography variant="body2" fontWeight="bold" sx={{ lineHeight: 1.2, mb: 0.5, display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>
{relatedVideo.title} {relatedVideo.title}
</Typography>
<Typography variant="caption" display="block" color="text.secondary">
{relatedVideo.author}
</Typography>
<Box sx={{ display: 'flex', alignItems: 'center', flexWrap: 'wrap', mt: 'auto' }}>
<Typography variant="caption" color="text.secondary">
{formatDate(relatedVideo.date)}
</Typography> </Typography>
<Typography variant="caption" color="text.secondary" sx={{ ml: 1 }}> <Typography variant="caption" display="block" color="text.secondary">
· {relatedVideo.viewCount || 0} {t('views')} {relatedVideo.author}
</Typography> </Typography>
</Box> <Box sx={{ display: 'flex', alignItems: 'center', flexWrap: 'wrap', mt: 'auto' }}>
<Typography variant="caption" color="text.secondary">
{formatDate(relatedVideo.date)}
</Typography>
<Typography variant="caption" color="text.secondary" sx={{ ml: 1 }}>
· {relatedVideo.viewCount || 0} {t('views')}
</Typography>
</Box>
{hoveredVideoId === relatedVideo.id && !isMobile && !isTouch && !visitorMode && ( {hoveredVideoId === relatedVideo.id && !isMobile && !isTouch && !visitorMode && (
<Tooltip title={t('addToCollection')} disableHoverListener={isTouch}> <Tooltip title={t('addToCollection')} disableHoverListener={isTouch}>
<IconButton <IconButton
size="small" size="small"
onClick={(e) => handleAddToCollectionClick(e, relatedVideo.id)} onClick={(e) => handleAddToCollectionClick(e, relatedVideo.id)}
sx={{ sx={{
position: 'absolute', position: 'absolute',
bottom: 4, bottom: 4,
right: 4, right: 4,
padding: 0.5, padding: 0.5,
bgcolor: 'rgba(0,0,0,0.9)', bgcolor: 'rgba(0,0,0,0.9)',
}} }}
> >
<Add fontSize="small" /> <Add fontSize="small" />
</IconButton> </IconButton>
</Tooltip> </Tooltip>
)} )}
</CardContent> </CardContent>
</Card> </Card>
</Grid>
))} ))}
{relatedVideos.length === 0 && ( </Grid>
<Typography variant="body2" color="text.secondary">{t('noOtherVideos')}</Typography> {relatedVideos.length === 0 && (
)} <Typography variant="body2" color="text.secondary">{t('noOtherVideos')}</Typography>
</Stack> )}
</Box> </Box>
); );
}; };