style: Update button styles and add kebab menu for mobile
This commit is contained in:
Peifan Li
@@ -1,5 +1,5 @@
|
||||
import { Add, Cast, Delete, Share } from '@mui/icons-material';
|
||||
import { Button, Menu, MenuItem, Stack, Tooltip } from '@mui/material';
|
||||
import { Add, Cast, Delete, MoreVert, Share } from '@mui/icons-material';
|
||||
import { Button, IconButton, Menu, MenuItem, Stack, Tooltip, useMediaQuery, useTheme } from '@mui/material';
|
||||
import React, { useState } from 'react';
|
||||
import { useLanguage } from '../../../contexts/LanguageContext';
|
||||
import { useSnackbar } from '../../../contexts/SnackbarContext';
|
||||
@@ -22,7 +22,10 @@ const VideoActionButtons: React.FC<VideoActionButtonsProps> = ({
|
||||
const { t } = useLanguage();
|
||||
const { handleShare } = useShareVideo(video);
|
||||
const { showSnackbar } = useSnackbar();
|
||||
const theme = useTheme();
|
||||
const isMobile = useMediaQuery(theme.breakpoints.down('md'));
|
||||
const [playerMenuAnchor, setPlayerMenuAnchor] = useState<null | HTMLElement>(null);
|
||||
const [kebabMenuAnchor, setKebabMenuAnchor] = useState<null | HTMLElement>(null);
|
||||
|
||||
const getVideoUrl = (): string => {
|
||||
if (video.videoPath) {
|
||||
@@ -44,6 +47,14 @@ const VideoActionButtons: React.FC<VideoActionButtonsProps> = ({
|
||||
setPlayerMenuAnchor(null);
|
||||
};
|
||||
|
||||
const handleKebabMenuOpen = (event: React.MouseEvent<HTMLElement>) => {
|
||||
setKebabMenuAnchor(event.currentTarget);
|
||||
};
|
||||
|
||||
const handleKebabMenuClose = () => {
|
||||
setKebabMenuAnchor(null);
|
||||
};
|
||||
|
||||
const handlePlayerSelect = (player: string) => {
|
||||
const videoUrl = getVideoUrl();
|
||||
|
||||
@@ -122,7 +133,7 @@ const VideoActionButtons: React.FC<VideoActionButtonsProps> = ({
|
||||
handlePlayerMenuClose();
|
||||
};
|
||||
|
||||
return (
|
||||
const actionButtons = (
|
||||
<Stack direction="row" spacing={1}>
|
||||
<Tooltip title={t('playWith')}>
|
||||
<Button
|
||||
@@ -188,6 +199,129 @@ const VideoActionButtons: React.FC<VideoActionButtonsProps> = ({
|
||||
</Tooltip>
|
||||
</Stack>
|
||||
);
|
||||
|
||||
if (isMobile) {
|
||||
return (
|
||||
<>
|
||||
<Tooltip title="More actions">
|
||||
<IconButton
|
||||
onClick={handleKebabMenuOpen}
|
||||
sx={{
|
||||
color: kebabMenuAnchor ? 'primary.main' : 'text.secondary',
|
||||
'&:hover': { color: 'primary.main' }
|
||||
}}
|
||||
>
|
||||
<MoreVert />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Menu
|
||||
anchorEl={kebabMenuAnchor}
|
||||
open={Boolean(kebabMenuAnchor)}
|
||||
onClose={handleKebabMenuClose}
|
||||
anchorOrigin={{
|
||||
vertical: 'bottom',
|
||||
horizontal: 'right',
|
||||
}}
|
||||
transformOrigin={{
|
||||
vertical: 'top',
|
||||
horizontal: 'right',
|
||||
}}
|
||||
slotProps={{
|
||||
paper: {
|
||||
sx: {
|
||||
minWidth: 'auto',
|
||||
p: 1,
|
||||
px: 2,
|
||||
}
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Stack direction="row" spacing={2} sx={{ justifyContent: 'flex-end' }}>
|
||||
<Tooltip title={t('playWith')}>
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="inherit"
|
||||
onClick={() => {
|
||||
// Store the anchor before closing the kebab menu
|
||||
const anchor = kebabMenuAnchor;
|
||||
handleKebabMenuClose();
|
||||
// Use the stored anchor for the player menu
|
||||
if (anchor) {
|
||||
setPlayerMenuAnchor(anchor);
|
||||
}
|
||||
}}
|
||||
sx={{ minWidth: 'auto', p: 1, color: 'text.secondary', borderColor: 'text.secondary', '&:hover': { color: 'primary.main', borderColor: 'primary.main' } }}
|
||||
>
|
||||
<Cast />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
<Tooltip title={t('share')}>
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="inherit"
|
||||
onClick={() => {
|
||||
handleKebabMenuClose();
|
||||
handleShare();
|
||||
}}
|
||||
sx={{ minWidth: 'auto', p: 1, color: 'text.secondary', borderColor: 'text.secondary', '&:hover': { color: 'primary.main', borderColor: 'primary.main' } }}
|
||||
>
|
||||
<Share />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
<Tooltip title={t('addToCollection')}>
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="inherit"
|
||||
onClick={() => {
|
||||
handleKebabMenuClose();
|
||||
onAddToCollection();
|
||||
}}
|
||||
sx={{ minWidth: 'auto', p: 1, color: 'text.secondary', borderColor: 'text.secondary', '&:hover': { color: 'primary.main', borderColor: 'primary.main' } }}
|
||||
>
|
||||
<Add />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
<Tooltip title={t('delete')}>
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="inherit"
|
||||
onClick={() => {
|
||||
handleKebabMenuClose();
|
||||
onDelete();
|
||||
}}
|
||||
disabled={isDeleting}
|
||||
sx={{ minWidth: 'auto', p: 1, color: 'text.secondary', borderColor: 'text.secondary', '&:hover': { color: 'error.main', borderColor: 'error.main' } }}
|
||||
>
|
||||
<Delete />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
</Stack>
|
||||
</Menu>
|
||||
<Menu
|
||||
anchorEl={playerMenuAnchor}
|
||||
open={Boolean(playerMenuAnchor)}
|
||||
onClose={handlePlayerMenuClose}
|
||||
anchorOrigin={{
|
||||
vertical: 'bottom',
|
||||
horizontal: 'left',
|
||||
}}
|
||||
transformOrigin={{
|
||||
vertical: 'top',
|
||||
horizontal: 'left',
|
||||
}}
|
||||
>
|
||||
<MenuItem onClick={() => handlePlayerSelect('vlc')}>VLC</MenuItem>
|
||||
<MenuItem onClick={() => handlePlayerSelect('iina')}>IINA</MenuItem>
|
||||
<MenuItem onClick={() => handlePlayerSelect('mpv')}>mpv</MenuItem>
|
||||
<MenuItem onClick={() => handlePlayerSelect('potplayer')}>PotPlayer</MenuItem>
|
||||
<MenuItem onClick={() => handlePlayerSelect('infuse')}>Infuse</MenuItem>
|
||||
<MenuItem onClick={() => handlePlayerSelect('copy')}>{t('copyUrl')}</MenuItem>
|
||||
</Menu>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
return actionButtons;
|
||||
};
|
||||
|
||||
export default VideoActionButtons;
|
||||
|
||||
@@ -68,7 +68,7 @@ const VideoAuthorInfo: React.FC<VideoAuthorInfoProps> = ({
|
||||
sx={{
|
||||
cursor: 'pointer',
|
||||
'&:hover': { color: 'primary.main' },
|
||||
maxWidth: { xs: '180px', sm: 'none' },
|
||||
maxWidth: { xs: '200px', sm: 'none' },
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
whiteSpace: 'nowrap'
|
||||
@@ -86,7 +86,7 @@ const VideoAuthorInfo: React.FC<VideoAuthorInfoProps> = ({
|
||||
size="small"
|
||||
onClick={handleSubscribeClick}
|
||||
color={isSubscribed ? 'primary' : 'default'}
|
||||
sx={{ ml: { xs: 0, sm: 1 } }}
|
||||
sx={{ ml: { xs: 1, sm: 1 } }}
|
||||
>
|
||||
{isSubscribed ? <NotificationsActive /> : <Notifications />}
|
||||
</IconButton>
|
||||
|
||||
@@ -26,57 +26,93 @@ const VideoMetadata: React.FC<VideoMetadataProps> = ({
|
||||
<Box sx={{ bgcolor: 'background.paper', p: 2, borderRadius: 2 }}>
|
||||
<Box sx={{ display: 'flex', flexDirection: 'row', flexWrap: 'wrap', alignItems: 'center', columnGap: 3, rowGap: 1 }}>
|
||||
{video.sourceUrl && (
|
||||
<Typography variant="body2" sx={{ display: 'flex', alignItems: 'center' }}>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
fontSize: { xs: '0.75rem', sm: '0.875rem' }
|
||||
}}
|
||||
>
|
||||
<a href={video.sourceUrl} target="_blank" rel="noopener noreferrer" style={{ color: theme.palette.primary.main, textDecoration: 'none', display: 'flex', alignItems: 'center' }}>
|
||||
<LinkIcon fontSize="small" sx={{ mr: 0.5 }} />
|
||||
<LinkIcon sx={{ mr: 0.5, fontSize: { xs: '0.875rem', sm: '1rem' } }} />
|
||||
<strong>{t('originalLink')}</strong>
|
||||
</a>
|
||||
</Typography>
|
||||
)}
|
||||
{video.videoPath && (
|
||||
<Typography variant="body2" sx={{ display: 'flex', alignItems: 'center' }}>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
fontSize: { xs: '0.75rem', sm: '0.875rem' }
|
||||
}}
|
||||
>
|
||||
<a href={`${BACKEND_URL}${video.videoPath}`} download style={{ color: theme.palette.primary.main, textDecoration: 'none', display: 'flex', alignItems: 'center' }}>
|
||||
<Download fontSize="small" sx={{ mr: 0.5 }} />
|
||||
<Download sx={{ mr: 0.5, fontSize: { xs: '0.875rem', sm: '1rem' } }} />
|
||||
<strong>{t('download')}</strong>
|
||||
</a>
|
||||
</Typography>
|
||||
)}
|
||||
{videoCollections.length > 0 && (
|
||||
<Box sx={{ display: 'inline', alignItems: 'center' }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', flexWrap: 'wrap' }}>
|
||||
{videoCollections.map((c, index) => (
|
||||
<React.Fragment key={c.id}>
|
||||
<span
|
||||
<Box
|
||||
component="span"
|
||||
onClick={() => onCollectionClick(c.id)}
|
||||
style={{
|
||||
sx={{
|
||||
cursor: 'pointer',
|
||||
color: theme.palette.primary.main,
|
||||
color: 'primary.main',
|
||||
fontWeight: 'bold',
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
verticalAlign: 'bottom'
|
||||
fontSize: { xs: '0.75rem', sm: '0.875rem' }
|
||||
}}
|
||||
>
|
||||
<Folder fontSize="small" sx={{ mr: 0.5 }} />
|
||||
<Folder sx={{ mr: 0.5, fontSize: { xs: '0.875rem', sm: '1rem' } }} />
|
||||
{c.name}
|
||||
</span>
|
||||
</Box>
|
||||
{index < videoCollections.length - 1 ? <span style={{ marginRight: '4px' }}>, </span> : ''}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</Box>
|
||||
)}
|
||||
<Typography variant="body2" sx={{ display: 'flex', alignItems: 'center' }}>
|
||||
<VideoLibrary fontSize="small" sx={{ mr: 0.5 }} />
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
fontSize: { xs: '0.75rem', sm: '0.875rem' }
|
||||
}}
|
||||
>
|
||||
<VideoLibrary sx={{ mr: 0.5, fontSize: { xs: '0.875rem', sm: '1rem' } }} />
|
||||
{video.source ? video.source.charAt(0).toUpperCase() + video.source.slice(1) : 'Unknown'}
|
||||
</Typography>
|
||||
{video.addedAt && (
|
||||
<Typography variant="body2" sx={{ display: 'flex', alignItems: 'center' }}>
|
||||
<CalendarToday fontSize="small" sx={{ mr: 0.5 }} />
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
fontSize: { xs: '0.75rem', sm: '0.875rem' }
|
||||
}}
|
||||
>
|
||||
<CalendarToday sx={{ mr: 0.5, fontSize: { xs: '0.875rem', sm: '1rem' } }} />
|
||||
{new Date(video.addedAt).toISOString().split('T')[0]}
|
||||
</Typography>
|
||||
)}
|
||||
{videoResolution && (
|
||||
<Typography variant="body2" sx={{ display: 'flex', alignItems: 'center' }}>
|
||||
<HighQuality fontSize="small" sx={{ mr: 0.5 }} />
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
fontSize: { xs: '0.75rem', sm: '0.875rem' }
|
||||
}}
|
||||
>
|
||||
<HighQuality sx={{ mr: 0.5, fontSize: { xs: '0.875rem', sm: '1rem' } }} />
|
||||
{videoResolution && `${videoResolution}`}
|
||||
</Typography>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user