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

feat: Add paste functionality to search input

Browse Source
This commit is contained in:
Peifan Li
2025-12-20 23:34:09 -05:00
parent d196181b3d
commit 81d4a71885
1 changed files with 38 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
frontend/src/components/Header/SearchInput.tsx
View File

@@ -1,4 +1,4 @@
import { Clear, Search } from '@mui/icons-material';
import { Clear, ContentPaste, Search } from '@mui/icons-material';
import {
alpha,
Box,
@@ -40,6 +40,19 @@ const SearchInput: React.FC<SearchInputProps> = ({
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down('md'));
const handlePaste = async () => {
try {
const text = await navigator.clipboard.readText();
setVideoUrl(text);
} catch (err) {
console.error('Failed to paste from clipboard:', err);
}
};
const handleClear = () => {
setVideoUrl('');
};
return (
<Box component="form" onSubmit={onSubmit} sx={{ flexGrow: 1, display: 'flex', justifyContent: 'center', width: '100%' }}>
<TextField
@@ -60,6 +73,19 @@ const SearchInput: React.FC<SearchInputProps> = ({
}}
slotProps={{
input: {
startAdornment: (
<InputAdornment position="start">
<IconButton
onClick={handlePaste}
edge="start"
size="small"
disabled={isSubmitting || visitorMode}
sx={{ ml: 0 }}
>
<ContentPaste />
</IconButton>
</InputAdornment>
),
endAdornment: (
<InputAdornment position="end">
{isSearchMode && searchTerm && (
@@ -67,6 +93,17 @@ const SearchInput: React.FC<SearchInputProps> = ({
<Clear />
</IconButton>
)}
{videoUrl && (
<IconButton
onClick={handleClear}
edge="end"
size="small"
disabled={isSubmitting || visitorMode}
sx={{ mr: 0.5 }}
>
<Clear />
</IconButton>
)}
<Button
type="submit"
variant="contained"