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

feat: Add confirmation modals for video and collection actions

Browse Source
This commit is contained in:
Peifan Li
2025-11-22 13:17:31 -05:00
parent 32387184c0
commit 8e65f40277
9 changed files with 452 additions and 163 deletions
Download Patch File Download Diff File Expand all files Collapse all files

164
frontend/src/App.css
View File

@@ -17,8 +17,85 @@
--spacing-md: 15px;
--spacing-lg: 20px;
--spacing-xl: 30px;
--input-height: 46px;
}
/* ... (lines 22-131 unchanged) ... */
.url-input {
width: 100%;
height: var(--input-height);
padding: 0 20px;
border-radius: 24px 0 0 24px;
border: 1px solid var(--border-color);
background-color: var(--background-light);
color: var(--text-primary);
font-size: 1rem;
transition: all 0.2s ease;
min-width: 0;
/* Prevents flex item from overflowing */
}
/* ... (lines 145-156 unchanged) ... */
.submit-btn {
height: var(--input-height);
padding: 0 24px;
background-color: var(--background-light);
border: 1px solid var(--border-color);
border-left: none;
border-radius: 0 24px 24px 0;
color: var(--text-secondary);
cursor: pointer;
transition: all 0.2s ease;
font-weight: 500;
white-space: nowrap;
}
/* ... (lines 170-198 unchanged) ... */
.downloads-summary {
display: flex;
align-items: center;
gap: 8px;
background-color: var(--background-light);
border: 1px solid var(--border-color);
padding: 0 16px;
height: var(--input-height);
border-radius: 23px;
/* Half of 46px */
cursor: pointer;
transition: all 0.2s ease;
white-space: nowrap;
min-width: 160px;
}
.light-mode {
--primary-color: #ff3e3e;
--primary-hover: #ff1a1a;
--secondary-color: #e0e0e0;
--text-color: #121212;
--text-secondary: #555555;
--background-dark: #f9f9f9;
--background-darker: #ffffff;
--background-lighter: #f0f0f0;
--card-background: #ffffff;
--border-color: #e0e0e0;
--hover-color: #f0f0f0;
--shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
--background-light: #f0f0f0;
/* Added for input backgrounds */
--text-primary: #121212;
/* Added for input text */
}
/* Default dark mode variables that were missing or hardcoded */
:root {
--background-light: #2a2a2a;
--text-primary: #f0f0f0;
}
* {
margin: 0;
padding: 0;
@@ -93,7 +170,7 @@ body {
position: relative;
display: flex;
align-items: center;
gap: var(--spacing-md);
gap: 16px;
}
.form-group {
@@ -105,7 +182,8 @@ body {
.url-input {
width: 100%;
padding: 12px 20px;
height: var(--input-height);
padding: 0 20px;
border-radius: 24px 0 0 24px;
border: 1px solid var(--border-color);
background-color: var(--background-light);
@@ -129,6 +207,7 @@ body {
}
.submit-btn {
height: var(--input-height);
padding: 0 24px;
background-color: var(--background-light);
border: 1px solid var(--border-color);
@@ -164,8 +243,10 @@ body {
/* Downloads Indicator */
.downloads-indicator-container {
position: relative;
margin-left: 10px;
z-index: 100;
display: flex;
align-items: center;
height: 100%;
}
.downloads-summary {
@@ -174,8 +255,10 @@ body {
gap: 8px;
background-color: var(--background-light);
border: 1px solid var(--border-color);
padding: 8px 16px;
border-radius: 20px;
padding: 0 16px;
height: var(--input-height);
border-radius: 23px;
/* Half of 46px */
cursor: pointer;
transition: all 0.2s ease;
white-space: nowrap;
@@ -208,7 +291,7 @@ body {
top: calc(100% + 10px);
right: 0;
width: 300px;
background-color: var(--background-card);
background-color: var(--card-background);
border: 1px solid var(--border-color);
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
@@ -456,7 +539,7 @@ body {
font-weight: 700;
line-height: 1.4;
margin-bottom: 12px;
color: #fff;
color: var(--text-color);
}
.video-actions-row {
@@ -489,25 +572,37 @@ body {
.btn-secondary {
background-color: rgba(255, 255, 255, 0.1);
color: #fff;
color: var(--text-color);
}
.btn-secondary:hover {
background-color: rgba(255, 255, 255, 0.2);
}
.light-mode .btn-secondary {
background-color: rgba(0, 0, 0, 0.05);
}
.light-mode .btn-secondary:hover {
background-color: rgba(0, 0, 0, 0.1);
}
.btn-primary {
background-color: var(--text-color);
color: #000;
color: var(--background-darker);
}
.btn-primary:hover {
background-color: #e0e0e0;
opacity: 0.9;
}
.btn-danger {
background-color: rgba(255, 255, 255, 0.1);
color: #ff3e3e;
color: var(--primary-color);
}
.light-mode .btn-danger {
background-color: rgba(0, 0, 0, 0.05);
}
.btn-danger:hover {
@@ -516,7 +611,7 @@ body {
/* Channel/Description Box */
.channel-desc-container {
background-color: #2a2a2a;
background-color: var(--background-light);
border-radius: 12px;
padding: 16px;
margin-top: 16px;
@@ -549,7 +644,7 @@ body {
.channel-name {
font-weight: 600;
font-size: 1rem;
color: #fff;
color: var(--text-color);
text-decoration: none;
}
@@ -565,7 +660,7 @@ body {
.description-text {
font-size: 0.9rem;
line-height: 1.5;
color: #fff;
color: var(--text-color);
white-space: pre-wrap;
}
@@ -582,7 +677,7 @@ body {
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 16px;
color: #fff;
color: var(--text-color);
}
.related-videos-list {
@@ -623,7 +718,7 @@ body {
font-size: 0.9rem;
font-weight: 600;
line-height: 1.4;
color: #fff;
color: var(--text-color);
margin-bottom: 4px;
display: -webkit-box;
-webkit-line-clamp: 2;
@@ -1134,6 +1229,21 @@ body {
border-color: #ff3e3e;
}
.light-mode .glass-panel:hover {
background-color: rgba(0, 0, 0, 0.1);
}
.glass-panel:focus {
outline: none;
border-color: rgba(62, 166, 255, 0.5);
background-color: rgba(255, 255, 255, 0.1);
}
.light-mode .glass-panel:focus {
border-color: rgba(62, 166, 255, 0.5);
background-color: rgba(0, 0, 0, 0.1);
}
.video-link,
.author-link {
text-decoration: none;
@@ -1505,8 +1615,8 @@ body {
}
.modal-content {
background: linear-gradient(135deg, #1e1e1e 0%, #2a2a2a 100%);
border: 1px solid rgba(255, 255, 255, 0.1);
background: var(--card-background);
border: 1px solid var(--border-color);
border-radius: 16px;
width: 100%;
max-width: 550px;
@@ -1515,9 +1625,13 @@ body {
overflow: visible;
}
.light-mode .modal-content {
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1), 0 0 1px rgba(0, 0, 0, 0.1);
}
.modal-header {
padding: 24px 24px 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
border-bottom: 1px solid var(--border-color);
display: flex;
align-items: center;
justify-content: space-between;
@@ -1630,8 +1744,8 @@ body {
padding: 20px 24px 24px;
display: flex;
gap: 12px;
background: rgba(0, 0, 0, 0.2);
border-top: 1px solid rgba(255, 255, 255, 0.05);
background: var(--background-lighter);
border-top: 1px solid var(--border-color);
}
.modal-footer .btn {
@@ -1670,14 +1784,14 @@ body {
}
.modal-footer .secondary-btn {
background-color: rgba(255, 255, 255, 0.08);
background-color: var(--background-light);
color: var(--text-color);
border: 1px solid rgba(255, 255, 255, 0.1);
border: 1px solid var(--border-color);
}
.modal-footer .secondary-btn:hover:not(:disabled) {
background-color: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.2);
background-color: var(--hover-color);
border-color: var(--border-color);
}
/* Responsive modal styles */

17
frontend/src/App.tsx
View File

@@ -68,6 +68,21 @@ function App() {
});
const [isCheckingParts, setIsCheckingParts] = useState<boolean>(false);
// Theme state
const [theme, setTheme] = useState<string>(() => {
return localStorage.getItem('theme') || 'dark';
});
// Apply theme to body
useEffect(() => {
document.body.className = theme === 'light' ? 'light-mode' : '';
localStorage.setItem('theme', theme);
}, [theme]);
const toggleTheme = () => {
setTheme(prevTheme => prevTheme === 'light' ? 'dark' : 'light');
};
// Reference to the current search request's abort controller
const searchAbortController = useRef<AbortController | null>(null);
@@ -636,6 +651,8 @@ function App() {
isSearchMode={isSearchMode}
searchTerm={searchTerm}
onResetSearch={resetSearch}
theme={theme}
toggleTheme={toggleTheme}
/>
{/* Bilibili Parts Modal */}

55
frontend/src/components/ConfirmationModal.tsx Normal file
View File

@@ -0,0 +1,55 @@
import React from 'react';
interface ConfirmationModalProps {
isOpen: boolean;
onClose: () => void;
onConfirm: () => void;
title: string;
message: string;
confirmText?: string;
cancelText?: string;
isDanger?: boolean;
}
const ConfirmationModal: React.FC<ConfirmationModalProps> = ({
isOpen,
onClose,
onConfirm,
title,
message,
confirmText = 'Confirm',
cancelText = 'Cancel',
isDanger = false
}) => {
if (!isOpen) return null;
return (
<div className="modal-overlay" onClick={onClose}>
<div className="modal-content" onClick={(e) => e.stopPropagation()}>
<div className="modal-header">
<h2>{title}</h2>
<button className="close-btn" onClick={onClose}>×</button>
</div>
<div className="modal-body">
<p>{message}</p>
</div>
<div className="modal-footer">
<button className="btn secondary-btn" onClick={onClose}>
{cancelText}
</button>
<button
className={`btn ${isDanger ? 'danger-btn' : 'primary-btn'}`}
onClick={() => {
onConfirm();
onClose();
}}
>
{confirmText}
</button>
</div>
</div>
</div>
);
};
export default ConfirmationModal;

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

@@ -35,21 +35,17 @@ const DeleteCollectionModal: React.FC<DeleteCollectionModalProps> = ({
<div className="modal-actions" style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
<button
className="btn secondary-btn"
className="btn secondary-btn glass-panel"
onClick={onDeleteCollectionOnly}
style={{
width: '100%',
padding: '12px',
borderRadius: '8px',
border: '1px solid rgba(255, 255, 255, 0.1)',
background: 'rgba(255, 255, 255, 0.05)',
color: 'var(--text-color)',
cursor: 'pointer',
transition: 'all 0.2s ease'
}}
onMouseOver={(e) => e.currentTarget.style.background = 'rgba(255, 255, 255, 0.1)'}
onMouseOut={(e) => e.currentTarget.style.background = 'rgba(255, 255, 255, 0.05)'}
>
Delete Collection Only
</button>
{videoCount > 0 && (

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

@@ -15,6 +15,8 @@ interface HeaderProps {
isSearchMode?: boolean;
searchTerm?: string;
onResetSearch?: () => void;
theme: string;
toggleTheme: () => void;
}
const Header: React.FC<HeaderProps> = ({
@@ -23,7 +25,9 @@ const Header: React.FC<HeaderProps> = ({
activeDownloads = [],
isSearchMode = false,
searchTerm = '',
onResetSearch
onResetSearch,
theme,
toggleTheme
}) => {
const [videoUrl, setVideoUrl] = useState<string>('');
const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
@@ -98,10 +102,35 @@ const Header: React.FC<HeaderProps> = ({
return (
<header className="header">
<div className="header-content">
<Link to="/" className="logo">
<img src={logo} alt="MyTube Logo" className="logo-icon" />
<span style={{ color: '#f0f0f0' }}>MyTube</span>
</Link>
<div style={{ display: 'flex', alignItems: 'center', gap: '20px' }}>
<Link to="/" className="logo">
<img src={logo} alt="MyTube Logo" className="logo-icon" />
<span style={{ color: 'var(--text-color)' }}>MyTube</span>
</Link>
<button
onClick={toggleTheme}
className="theme-toggle-btn"
title={`Switch to ${theme === 'dark' ? 'light' : 'dark'} mode`}
style={{
background: 'none',
border: 'none',
fontSize: '1.2rem',
cursor: 'pointer',
padding: '8px',
borderRadius: '50%',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
color: 'var(--text-color)',
transition: 'background-color 0.2s'
}}
onMouseOver={(e) => e.currentTarget.style.backgroundColor = 'rgba(128, 128, 128, 0.1)'}
onMouseOut={(e) => e.currentTarget.style.backgroundColor = 'transparent'}
>
{theme === 'dark' ? '☀️' : '🌙'}
</button>
</div>
<form className="url-form" onSubmit={handleSubmit}>
<div className="form-group">

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

@@ -1,6 +1,7 @@
import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { Collection, Video } from '../types';
import ConfirmationModal from './ConfirmationModal';
const BACKEND_URL = import.meta.env.VITE_BACKEND_URL;
@@ -19,6 +20,7 @@ const VideoCard: React.FC<VideoCardProps> = ({
}) => {
const navigate = useNavigate();
const [isDeleting, setIsDeleting] = useState(false);
const [showDeleteModal, setShowDeleteModal] = useState(false);
// Format the date (assuming format YYYYMMDD from youtube-dl)
const formatDate = (dateString: string) => {
@@ -44,22 +46,26 @@ const VideoCard: React.FC<VideoCardProps> = ({
navigate(`/author/${encodeURIComponent(video.author)}`);
};
// Handle delete click
const handleDeleteClick = async (e: React.MouseEvent) => {
e.stopPropagation();
// Handle confirm delete
const confirmDelete = async () => {
if (!onDeleteVideo) return;
if (window.confirm(`Are you sure you want to delete "${video.title}"?`)) {
setIsDeleting(true);
try {
await onDeleteVideo(video.id);
} catch (error) {
console.error('Error deleting video:', error);
setIsDeleting(false);
}
setIsDeleting(true);
try {
await onDeleteVideo(video.id);
} catch (error) {
console.error('Error deleting video:', error);
setIsDeleting(false);
}
};
// Handle delete click
const handleDeleteClick = (e: React.MouseEvent) => {
e.stopPropagation();
if (!onDeleteVideo) return;
setShowDeleteModal(true);
};
// Find collections this video belongs to
const videoCollections = collections.filter(collection =>
collection.videos.includes(video.id)
@@ -108,82 +114,95 @@ const VideoCard: React.FC<VideoCardProps> = ({
};
return (
<div className={`video-card ${isFirstInAnyCollection ? 'collection-first' : ''}`}>
<div
className="thumbnail-container clickable"
onClick={handleVideoNavigation}
aria-label={isFirstInAnyCollection
? `View collection: ${firstInCollectionNames[0]}${firstInCollectionNames.length > 1 ? ' and others' : ''}`
: `Play ${video.title}`}
>
<img
src={thumbnailSrc || 'https://via.placeholder.com/480x360?text=No+Thumbnail'}
alt={`${video.title} thumbnail`}
className="thumbnail"
loading="lazy"
onError={(e) => {
const target = e.target as HTMLImageElement;
target.onerror = null;
target.src = 'https://via.placeholder.com/480x360?text=No+Thumbnail';
}}
/>
{getSourceIcon()}
{/* Show part number for multi-part videos */}
{video.partNumber && video.totalParts && video.totalParts > 1 && (
<div className="part-badge">
Part {video.partNumber}/{video.totalParts}
</div>
)}
{/* Show collection badge if this is the first video in a collection */}
{isFirstInAnyCollection && (
<div className="collection-badge" title={`Collection${firstInCollectionNames.length > 1 ? 's' : ''}: ${firstInCollectionNames.join(', ')}`}>
<span className="collection-icon">📁</span>
</div>
)}
{/* Delete button overlay */}
{showDeleteButton && onDeleteVideo && (
<button
className="card-delete-btn"
onClick={handleDeleteClick}
disabled={isDeleting}
title="Delete video"
>
{isDeleting ? '...' : '×'}
</button>
)}
</div>
<div className="video-info">
<h3
className="video-title clickable"
<>
<div className={`video-card ${isFirstInAnyCollection ? 'collection-first' : ''}`}>
{/* ... (rest of the video card JSX) ... */}
<div
className="thumbnail-container clickable"
onClick={handleVideoNavigation}
aria-label={isFirstInAnyCollection
? `View collection: ${firstInCollectionNames[0]}${firstInCollectionNames.length > 1 ? ' and others' : ''}`
: `Play ${video.title}`}
>
{isFirstInAnyCollection ? (
<>
{firstInCollectionNames[0]}
{firstInCollectionNames.length > 1 && <span className="more-collections"> +{firstInCollectionNames.length - 1}</span>}
</>
) : (
video.title
)}
</h3>
<div className="video-meta">
<span
className="author-link"
onClick={handleAuthorClick}
role="button"
tabIndex={0}
aria-label={`View all videos by ${video.author}`}
>
{video.author}
</span>
<span className="video-date">{formatDate(video.date)}</span>
</div>
<img
src={thumbnailSrc || 'https://via.placeholder.com/480x360?text=No+Thumbnail'}
alt={`${video.title} thumbnail`}
className="thumbnail"
loading="lazy"
onError={(e) => {
const target = e.target as HTMLImageElement;
target.onerror = null;
target.src = 'https://via.placeholder.com/480x360?text=No+Thumbnail';
}}
/>
{getSourceIcon()}
{/* Show part number for multi-part videos */}
{video.partNumber && video.totalParts && video.totalParts > 1 && (
<div className="part-badge">
Part {video.partNumber}/{video.totalParts}
</div>
)}
{/* Show collection badge if this is the first video in a collection */}
{isFirstInAnyCollection && (
<div className="collection-badge" title={`Collection${firstInCollectionNames.length > 1 ? 's' : ''}: ${firstInCollectionNames.join(', ')}`}>
<span className="collection-icon">📁</span>
</div>
)}
{/* Delete button overlay */}
{showDeleteButton && onDeleteVideo && (
<button
className="card-delete-btn"
onClick={handleDeleteClick}
disabled={isDeleting}
title="Delete video"
>
{isDeleting ? '...' : '×'}
</button>
)}
</div>
<div className="video-info">
<h3
className="video-title clickable"
onClick={handleVideoNavigation}
>
{isFirstInAnyCollection ? (
<>
{firstInCollectionNames[0]}
{firstInCollectionNames.length > 1 && <span className="more-collections"> +{firstInCollectionNames.length - 1}</span>}
</>
) : (
video.title
)}
</h3>
<div className="video-meta">
<span
className="author-link"
onClick={handleAuthorClick}
role="button"
tabIndex={0}
aria-label={`View all videos by ${video.author}`}
>
{video.author}
</span>
<span className="video-date">{formatDate(video.date)}</span>
</div>
</div>
</div>
</div>
<ConfirmationModal
isOpen={showDeleteModal}
onClose={() => setShowDeleteModal(false)}
onConfirm={confirmDelete}
title="Delete Video"
message={`Are you sure you want to delete "${video.title}"?`}
confirmText="Delete"
isDanger={true}
/>
</>
);
};

25
frontend/src/index.css
View File

@@ -1,18 +1,22 @@
/* CSS Reset */
*, *::before, *::after {
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html, body, #root {
html,
body,
#root {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow-x: hidden;
background-color: #121212;
color: #f0f0f0;
background-color: var(--background-dark);
color: var(--text-color);
}
body {
@@ -29,7 +33,10 @@ a {
color: inherit;
}
button, input, select, textarea {
button,
input,
select,
textarea {
font-family: inherit;
font-size: 100%;
line-height: 1.15;
@@ -42,11 +49,13 @@ button {
border: none;
}
ul, ol {
ul,
ol {
list-style: none;
}
img, video {
img,
video {
max-width: 100%;
height: auto;
display: block;
@@ -93,4 +102,4 @@ button:focus-visible {
::-webkit-scrollbar-thumb:hover {
background: #444;
}
}

38
frontend/src/pages/ManagePage.tsx
View File

@@ -1,5 +1,6 @@
import { useState } from 'react';
import { Link } from 'react-router-dom';
import ConfirmationModal from '../components/ConfirmationModal';
import { Collection, Video } from '../types';
const BACKEND_URL = import.meta.env.VITE_BACKEND_URL;
@@ -16,18 +17,27 @@ const ManagePage: React.FC<ManagePageProps> = ({ videos, onDeleteVideo, collecti
const [deletingId, setDeletingId] = useState<string | null>(null);
const [collectionToDelete, setCollectionToDelete] = useState<Collection | null>(null);
const [isDeletingCollection, setIsDeletingCollection] = useState<boolean>(false);
const [videoToDelete, setVideoToDelete] = useState<string | null>(null);
const [showVideoDeleteModal, setShowVideoDeleteModal] = useState<boolean>(false);
const filteredVideos = videos.filter(video =>
video.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
video.author.toLowerCase().includes(searchTerm.toLowerCase())
);
const handleDelete = async (id: string) => {
if (window.confirm('Are you sure you want to delete this video?')) {
setDeletingId(id);
await onDeleteVideo(id);
setDeletingId(null);
}
const confirmDeleteVideo = async () => {
if (!videoToDelete) return;
setDeletingId(videoToDelete);
await onDeleteVideo(videoToDelete);
setDeletingId(null);
setVideoToDelete(null);
setShowVideoDeleteModal(false); // Close the modal after deletion
};
const handleDelete = (id: string) => {
setVideoToDelete(id);
setShowVideoDeleteModal(true);
};
const confirmDeleteCollection = (collection: Collection) => {
@@ -96,7 +106,8 @@ const ManagePage: React.FC<ManagePageProps> = ({ videos, onDeleteVideo, collecti
disabled={isDeletingCollection}
style={{
width: '100%',
background: 'linear-gradient(135deg, #ff3e3e 0%, #ff6b6b 100%)'
background: 'linear-gradient(135deg, #ff3e3e 0%, #ff6b6b 100%)',
color: 'white'
}}
>
{isDeletingCollection ? 'Deleting...' : '⚠️ Delete Collection & Videos'}
@@ -118,6 +129,19 @@ const ManagePage: React.FC<ManagePageProps> = ({ videos, onDeleteVideo, collecti
</div>
)}
<ConfirmationModal
isOpen={showVideoDeleteModal}
onClose={() => {
setShowVideoDeleteModal(false);
setVideoToDelete(null);
}}
onConfirm={confirmDeleteVideo}
title="Delete Video"
message="Are you sure you want to delete this video?"
confirmText="Delete"
isDanger={true}
/>
<div className="manage-section">
<h2>Collections ({collections.length})</h2>
<div className="manage-list">

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

@@ -1,8 +1,8 @@
import axios from 'axios';
import { useEffect, useState } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import ConfirmationModal from '../components/ConfirmationModal';
import { Collection, Video } from '../types';
const API_URL = import.meta.env.VITE_API_URL;
const BACKEND_URL = import.meta.env.VITE_BACKEND_URL;
@@ -35,6 +35,16 @@ const VideoPlayer: React.FC<VideoPlayerProps> = ({
const [selectedCollection, setSelectedCollection] = useState<string>('');
const [videoCollections, setVideoCollections] = useState<Collection[]>([]);
// Confirmation Modal State
const [confirmationModal, setConfirmationModal] = useState({
isOpen: false,
title: '',
message: '',
onConfirm: () => { },
confirmText: 'Confirm',
isDanger: false
});
useEffect(() => {
// Don't try to fetch the video if it's being deleted
if (isDeleting) {
@@ -110,13 +120,9 @@ const VideoPlayer: React.FC<VideoPlayerProps> = ({
navigate(`/collection/${collectionId}`);
};
const handleDelete = async () => {
const executeDelete = async () => {
if (!id) return;
if (!window.confirm('Are you sure you want to delete this video?')) {
return;
}
setIsDeleting(true);
setDeleteError(null);
@@ -137,6 +143,17 @@ const VideoPlayer: React.FC<VideoPlayerProps> = ({
}
};
const handleDelete = () => {
setConfirmationModal({
isOpen: true,
title: 'Delete Video',
message: 'Are you sure you want to delete this video?',
onConfirm: executeDelete,
confirmText: 'Delete',
isDanger: true
});
};
const handleAddToCollection = () => {
setShowCollectionModal(true);
};
@@ -173,13 +190,9 @@ const VideoPlayer: React.FC<VideoPlayerProps> = ({
}
};
const handleRemoveFromCollection = async () => {
const executeRemoveFromCollection = async () => {
if (!id) return;
if (!window.confirm('Are you sure you want to remove this video from the collection?')) {
return;
}
try {
await onRemoveFromCollection(id);
handleCloseModal();
@@ -188,6 +201,17 @@ const VideoPlayer: React.FC<VideoPlayerProps> = ({
}
};
const handleRemoveFromCollection = () => {
setConfirmationModal({
isOpen: true,
title: 'Remove from Collection',
message: 'Are you sure you want to remove this video from the collection?',
onConfirm: executeRemoveFromCollection,
confirmText: 'Remove',
isDanger: true
});
};
if (loading) {
return <div className="loading">Loading video...</div>;
}
@@ -255,24 +279,24 @@ const VideoPlayer: React.FC<VideoPlayerProps> = ({
</div>
{deleteError && (
<div className="error-message" style={{ color: '#ff4d4d', marginTop: '10px' }}>
<div className="error-message" style={{ color: 'var(--primary-color)', marginTop: '10px' }}>
{deleteError}
</div>
)}
</div>
<div className="channel-desc-container">
<div className="video-stats" style={{ marginBottom: '8px', color: '#fff', fontWeight: 'bold' }}>
<div className="video-stats" style={{ marginBottom: '8px', color: 'var(--text-secondary)', fontWeight: 'bold' }}>
{/* Views would go here */}
{formatDate(video.date)}
</div>
<div className="description-text">
<div className="description-text" style={{ color: 'var(--text-color)' }}>
{/* We don't have a real description, so we'll show some metadata */}
<p>Source: {video.source === 'bilibili' ? 'Bilibili' : 'YouTube'}</p>
{video.sourceUrl && (
<p>
Original Link: <a href={video.sourceUrl} target="_blank" rel="noopener noreferrer" style={{ color: '#3ea6ff' }}>{video.sourceUrl}</a>
Original Link: <a href={video.sourceUrl} target="_blank" rel="noopener noreferrer" style={{ color: 'var(--primary-color)' }}>{video.sourceUrl}</a>
</p>
)}
</div>
@@ -375,34 +399,31 @@ const VideoPlayer: React.FC<VideoPlayerProps> = ({
<select
value={selectedCollection}
onChange={(e) => setSelectedCollection(e.target.value)}
className="glass-panel"
style={{
width: '100%',
padding: '12px 16px',
paddingRight: '40px',
backgroundColor: 'rgba(255, 255, 255, 0.05)',
border: '1px solid rgba(255, 255, 255, 0.1)',
borderRadius: '8px',
color: 'var(--text-color)',
fontSize: '1rem',
marginBottom: '0.8rem',
cursor: 'pointer',
appearance: 'none',
backgroundImage: `url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e")`,
backgroundImage: `url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='var(--text-color)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e")`,
backgroundRepeat: 'no-repeat',
backgroundPosition: 'right 12px center',
backgroundSize: '16px',
transition: 'all 0.2s ease'
}}
onMouseOver={(e) => e.currentTarget.style.backgroundColor = 'rgba(255, 255, 255, 0.1)'}
onMouseOut={(e) => e.currentTarget.style.backgroundColor = 'rgba(255, 255, 255, 0.05)'}
>
<option value="" style={{ color: 'black' }}>Select a collection</option>
<option value="" style={{ color: 'var(--text-color)', backgroundColor: 'var(--background-card)' }}>Select a collection</option>
{collections.map(collection => (
<option
key={collection.id}
value={collection.id}
disabled={videoCollections.length > 0 && videoCollections[0].id === collection.id}
style={{ color: 'black' }}
style={{ color: 'var(--text-color)', backgroundColor: 'var(--background-card)' }}
>
{collection.name} {videoCollections.length > 0 && videoCollections[0].id === collection.id ? '(Current)' : ''}
</option>
@@ -437,7 +458,7 @@ const VideoPlayer: React.FC<VideoPlayerProps> = ({
</h3>
<input
type="text"
className="collection-input"
className="collection-input glass-panel"
placeholder="Collection name"
value={newCollectionName}
onChange={(e) => setNewCollectionName(e.target.value)}
@@ -445,16 +466,11 @@ const VideoPlayer: React.FC<VideoPlayerProps> = ({
style={{
width: '100%',
padding: '12px 16px',
backgroundColor: 'rgba(255, 255, 255, 0.05)',
border: '1px solid rgba(255, 255, 255, 0.1)',
borderRadius: '8px',
color: 'var(--text-color)',
fontSize: '1rem',
marginBottom: '0.8rem',
transition: 'all 0.2s ease'
}}
onFocus={(e) => e.currentTarget.style.borderColor = 'rgba(62, 166, 255, 0.5)'}
onBlur={(e) => e.currentTarget.style.borderColor = 'rgba(255, 255, 255, 0.1)'}
/>
<button
className="modal-btn primary-btn"
@@ -487,6 +503,16 @@ const VideoPlayer: React.FC<VideoPlayerProps> = ({
</div>
)
}
<ConfirmationModal
isOpen={confirmationModal.isOpen}
onClose={() => setConfirmationModal({ ...confirmationModal, isOpen: false })}
onConfirm={confirmationModal.onConfirm}
title={confirmationModal.title}
message={confirmationModal.message}
confirmText={confirmationModal.confirmText}
isDanger={confirmationModal.isDanger}
/>
</div >
);
};