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

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

@@ -71,12 +71,13 @@ const Collections: React.FC<CollectionsProps> = ({ collections, onItemClick }) =
label={`${Math.floor(collection.videos?.length || 0)}`}
size="small"
variant="outlined"
sx={{
height: 20,
minWidth: 20,
sx={{
height: 20,
minWidth: 20,
ml: 1,
flexShrink: 0,
'& .MuiChip-label': {
padding: '0 4px',
padding: '0 6px',
fontSize: '0.75rem'
}
}}

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

@@ -34,7 +34,7 @@ const VideoCard: React.FC<VideoCardProps> = ({
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
const isTouch = useMediaQuery('(hover: none), (pointer: coarse)');
// Get collection information
const collectionInfo = getVideoCardCollectionInfo(
video,
@@ -45,9 +45,9 @@ const VideoCard: React.FC<VideoCardProps> = ({
// Hooks for different concerns
const hoverPreview = useVideoHoverPreview({ videoPath: video.videoPath });
const metadata = useVideoCardMetadata({ video });
const playerSelection = usePlayerSelection({
video,
getVideoUrl: metadata.getVideoUrl
const playerSelection = usePlayerSelection({
video,
getVideoUrl: metadata.getVideoUrl
});
const actions = useVideoCardActions({
video,
@@ -72,7 +72,6 @@ const VideoCard: React.FC<VideoCardProps> = ({
borderRadius: isMobile ? 0 : undefined,
...(!isMobile && {
'&:hover': {
transform: 'translateY(-4px)',
boxShadow: theme.shadows[8],
'& .delete-btn': {
opacity: 1
@@ -82,8 +81,8 @@ const VideoCard: React.FC<VideoCardProps> = ({
}
}
}),
border: collectionInfo.isFirstInAnyCollection
? `1px solid ${theme.palette.primary.main}`
border: collectionInfo.isFirstInAnyCollection
? `1px solid ${theme.palette.primary.main}`
: 'none'
}}
>

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

@@ -8,6 +8,7 @@ import {
CardMedia,
Chip,
FormControlLabel,
Grid,
IconButton,
Skeleton,
Stack,
@@ -134,57 +135,58 @@ const UpNextSidebar: React.FC<UpNextSidebarProps> = ({
sx={{ ml: 0, mr: 0 }}
/>
</Stack>
<Stack spacing={2}>
<Grid container spacing={2}>
{relatedVideos.map(relatedVideo => (
<Card
key={relatedVideo.id}
sx={{ display: 'flex', cursor: 'pointer', '&:hover': { bgcolor: 'action.hover' }, position: 'relative' }}
onClick={() => onVideoClick(relatedVideo.id)}
onMouseEnter={() => setHoveredVideoId(relatedVideo.id)}
onMouseLeave={() => setHoveredVideoId(null)}
>
<SidebarThumbnail video={relatedVideo} />
<Grid key={relatedVideo.id} size={{ xs: 12, md: 6, lg: 12 }}>
<Card
sx={{ display: 'flex', cursor: 'pointer', '&:hover': { bgcolor: 'action.hover' }, position: 'relative' }}
onClick={() => onVideoClick(relatedVideo.id)}
onMouseEnter={() => setHoveredVideoId(relatedVideo.id)}
onMouseLeave={() => setHoveredVideoId(null)}
>
<SidebarThumbnail video={relatedVideo} />
<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' }}>
{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)}
<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' }}>
{relatedVideo.title}
</Typography>
<Typography variant="caption" color="text.secondary" sx={{ ml: 1 }}>
· {relatedVideo.viewCount || 0} {t('views')}
<Typography variant="caption" display="block" color="text.secondary">
{relatedVideo.author}
</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 && (
<Tooltip title={t('addToCollection')} disableHoverListener={isTouch}>
<IconButton
size="small"
onClick={(e) => handleAddToCollectionClick(e, relatedVideo.id)}
sx={{
position: 'absolute',
bottom: 4,
right: 4,
padding: 0.5,
bgcolor: 'rgba(0,0,0,0.9)',
}}
>
<Add fontSize="small" />
</IconButton>
</Tooltip>
)}
</CardContent>
</Card>
{hoveredVideoId === relatedVideo.id && !isMobile && !isTouch && !visitorMode && (
<Tooltip title={t('addToCollection')} disableHoverListener={isTouch}>
<IconButton
size="small"
onClick={(e) => handleAddToCollectionClick(e, relatedVideo.id)}
sx={{
position: 'absolute',
bottom: 4,
right: 4,
padding: 0.5,
bgcolor: 'rgba(0,0,0,0.9)',
}}
>
<Add fontSize="small" />
</IconButton>
</Tooltip>
)}
</CardContent>
</Card>
</Grid>
))}
{relatedVideos.length === 0 && (
<Typography variant="body2" color="text.secondary">{t('noOtherVideos')}</Typography>
)}
</Stack>
</Grid>
{relatedVideos.length === 0 && (
<Typography variant="body2" color="text.secondary">{t('noOtherVideos')}</Typography>
)}
</Box>
);
};