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

style: Update button variants to outlined in modals

Browse Source
This commit is contained in:
Peifan Li
2025-11-23 00:11:36 -05:00
parent d361d6995e
commit 45cccfa833
8 changed files with 58 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/App.tsx
View File

@@ -667,6 +667,8 @@ function App() {
onResetSearch={resetSearch}
theme={themeMode}
toggleTheme={toggleTheme}
collections={collections}
videos={videos}
/>
{/* Bilibili Parts Modal */}

4
frontend/src/components/AuthorsList.tsx
View File

@@ -15,9 +15,10 @@ import { Video } from '../types';
interface AuthorsListProps {
videos: Video[];
onItemClick?: () => void;
}
const AuthorsList: React.FC<AuthorsListProps> = ({ videos }) => {
const AuthorsList: React.FC<AuthorsListProps> = ({ videos, onItemClick }) => {
const [isOpen, setIsOpen] = useState<boolean>(true);
const [authors, setAuthors] = useState<string[]>([]);
const theme = useTheme();
@@ -64,6 +65,7 @@ const AuthorsList: React.FC<AuthorsListProps> = ({ videos }) => {
key={author}
component={Link}
to={`/author/${encodeURIComponent(author)}`}
onClick={onItemClick}
sx={{ pl: 2, borderRadius: 1 }}
>
<Person fontSize="small" sx={{ mr: 1, color: 'text.secondary' }} />

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

@@ -16,9 +16,10 @@ import { Collection } from '../types';
interface CollectionsProps {
collections: Collection[];
onItemClick?: () => void;
}
const Collections: React.FC<CollectionsProps> = ({ collections }) => {
const Collections: React.FC<CollectionsProps> = ({ collections, onItemClick }) => {
const [isOpen, setIsOpen] = useState<boolean>(true);
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down('md'));
@@ -51,6 +52,7 @@ const Collections: React.FC<CollectionsProps> = ({ collections }) => {
key={collection.id}
component={Link}
to={`/collection/${collection.id}`}
onClick={onItemClick}
sx={{ pl: 2, borderRadius: 1 }}
>
<Folder fontSize="small" sx={{ mr: 1, color: 'secondary.main' }} />

2
frontend/src/components/ConfirmationModal.tsx
View File

@@ -76,7 +76,7 @@ const ConfirmationModal: React.FC<ConfirmationModalProps> = ({
onClose();
}}
color={isDanger ? 'error' : 'primary'}
variant="contained"
variant="outlined"
autoFocus
>
{confirmText}

2
frontend/src/components/DeleteCollectionModal.tsx
View File

@@ -74,7 +74,7 @@ const DeleteCollectionModal: React.FC<DeleteCollectionModalProps> = ({
{videoCount > 0 && (
<Button
variant="contained"
variant="outlined"
color="error"
onClick={onDeleteCollectionAndVideos}
fullWidth

56
frontend/src/components/Header.tsx
View File

@@ -29,6 +29,9 @@ import {
import { FormEvent, useEffect, useState } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import logo from '../assets/logo.svg';
import { Collection, Video } from '../types';
import AuthorsList from './AuthorsList';
import Collections from './Collections';
import UploadModal from './UploadModal';
interface DownloadInfo {
@@ -46,6 +49,8 @@ interface HeaderProps {
onResetSearch?: () => void;
theme: string;
toggleTheme: () => void;
collections?: Collection[];
videos?: Video[];
}
const Header: React.FC<HeaderProps> = ({
@@ -56,7 +61,9 @@ const Header: React.FC<HeaderProps> = ({
searchTerm = '',
onResetSearch,
theme: currentThemeMode,
toggleTheme
toggleTheme,
collections = [],
videos = []
}) => {
const [videoUrl, setVideoUrl] = useState<string>('');
const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
@@ -277,16 +284,43 @@ const Header: React.FC<HeaderProps> = ({
{/* Mobile Dropdown Layout */}
{isMobile && (
<Collapse in={mobileMenuOpen} sx={{ width: '100%' }}>
<Stack spacing={2} sx={{ py: 2 }}>
{/* Row 1: Search Input */}
<Box>
{renderSearchInput()}
</Box>
{/* Row 2: Action Buttons */}
<Box sx={{ display: 'flex', justifyContent: 'center' }}>
{renderActionButtons()}
</Box>
</Stack>
<Box sx={{ maxHeight: '80vh', overflowY: 'auto' }}>
<Stack spacing={2} sx={{ py: 2 }}>
{/* Row 1: Search Input */}
<Box>
{renderSearchInput()}
</Box>
{/* Row 2: Action Buttons */}
<Box sx={{ display: 'flex', justifyContent: 'center' }}>
{renderActionButtons()}
</Box>
{/* Mobile Navigation Items */}
<Box sx={{ mt: 2 }}>
<Collections
collections={collections}
onItemClick={() => setMobileMenuOpen(false)}
/>
<Box sx={{ mt: 2 }}>
<AuthorsList
videos={videos}
onItemClick={() => setMobileMenuOpen(false)}
/>
</Box>
<Box sx={{ mt: 3, textAlign: 'center', mb: 2 }}>
<Button
component={Link}
to="/manage"
variant="outlined"
fullWidth
onClick={() => setMobileMenuOpen(false)}
>
Manage Videos
</Button>
</Box>
</Box>
</Stack>
</Box>
</Collapse>
)}
</Toolbar>

2
frontend/src/pages/Home.tsx
View File

@@ -271,7 +271,7 @@ const Home: React.FC<HomeProps> = ({
) : (
<Grid container spacing={4}>
{/* Sidebar container for Collections and Authors */}
<Grid size={{ xs: 12, md: 3 }}>
<Grid size={{ xs: 12, md: 3 }} sx={{ display: { xs: 'none', md: 'block' } }}>
<Box sx={{ position: 'sticky', top: 80 }}>
<Collections collections={collections} />
<Box sx={{ mt: 2 }}>

3
frontend/src/pages/VideoPlayer.tsx
View File

@@ -338,6 +338,7 @@ const VideoPlayer: React.FC<VideoPlayerProps> = ({
src={`${BACKEND_URL}${video.videoPath || video.sourceUrl}`}
onPlay={() => setIsPlaying(true)}
onPause={() => setIsPlaying(false)}
playsInline
>
Your browser does not support the video tag.
</video>
@@ -432,7 +433,7 @@ const VideoPlayer: React.FC<VideoPlayerProps> = ({
Add to Collection
</Button>
<Button
variant="contained"
variant="outlined"
color="error"
startIcon={<Delete />}
onClick={handleDelete}