mirror of
https://github.com/ceratic/MediaCollectorLibaryFrontend.git
synced 2026-05-13 23:56:45 +02:00
first commit
This commit is contained in:
Lars Behrends
8
.env.example
Normal file
8
.env.example
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
# API Configuration
|
||||||
|
VITE_API_URL=http://192.168.1.102:57000/
|
||||||
|
|
||||||
|
# Development settings
|
||||||
|
VITE_DEV_MODE=false
|
||||||
|
|
||||||
|
# Optional: Override API base URL for different environments
|
||||||
|
# VITE_API_URL=https://your-domain.com/api
|
||||||
43
.gitignore
vendored
Normal file
43
.gitignore
vendored
Normal file
@@ -0,0 +1,43 @@
|
|||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
*.local
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
|
.DS_Store
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
|
|
||||||
|
# Environment variables
|
||||||
|
.env
|
||||||
|
.env.local
|
||||||
|
.env.development.local
|
||||||
|
.env.test.local
|
||||||
|
.env.production.local
|
||||||
|
|
||||||
|
# Build output
|
||||||
|
build/
|
||||||
|
*.tsbuildinfo
|
||||||
|
|
||||||
|
# Testing
|
||||||
|
coverage/
|
||||||
|
.nyc_output
|
||||||
|
|
||||||
|
# Temporary files
|
||||||
|
*.tmp
|
||||||
|
*.temp
|
||||||
126
API_INTEGRATION.md
Normal file
126
API_INTEGRATION.md
Normal file
@@ -0,0 +1,126 @@
|
|||||||
|
# API Integration Guide
|
||||||
|
|
||||||
|
This document explains how the React frontend integrates with the PHP backend API.
|
||||||
|
|
||||||
|
## API Configuration
|
||||||
|
|
||||||
|
### Environment Setup
|
||||||
|
|
||||||
|
1. Copy `.env.example` to `.env`:
|
||||||
|
```bash
|
||||||
|
cp .env.example .env
|
||||||
|
```
|
||||||
|
|
||||||
|
2. Configure your API URL in `.env`:
|
||||||
|
```env
|
||||||
|
VITE_API_URL=http://localhost:8080/api
|
||||||
|
```
|
||||||
|
|
||||||
|
### Available API Endpoints
|
||||||
|
|
||||||
|
Based on your backend routes, the following endpoints are available:
|
||||||
|
|
||||||
|
#### Authentication
|
||||||
|
- `POST /api/auth/login` - User login
|
||||||
|
- `POST /api/auth/register` - User registration
|
||||||
|
- `POST /api/auth/refresh` - Refresh JWT token
|
||||||
|
- `GET /api/auth/me` - Get current user (protected)
|
||||||
|
|
||||||
|
#### Media
|
||||||
|
- `GET /api/movies` - List movies with pagination
|
||||||
|
- `GET /api/movies/{id}` - Get single movie
|
||||||
|
- `GET /api/tvshows` - List TV shows with pagination
|
||||||
|
- `GET /api/tvshows/{id}` - Get single TV show
|
||||||
|
- `GET /api/games` - List games with pagination
|
||||||
|
- `GET /api/games/{id}` - Get single game
|
||||||
|
|
||||||
|
#### Search
|
||||||
|
- `GET /api/search?q={query}&type={type}` - Search across media types
|
||||||
|
|
||||||
|
#### System
|
||||||
|
- `GET /api/status` - API health check
|
||||||
|
|
||||||
|
### API Service Structure
|
||||||
|
|
||||||
|
The frontend is organized with:
|
||||||
|
|
||||||
|
1. **API Service** (`src/services/api.ts`)
|
||||||
|
- Axios configuration with interceptors
|
||||||
|
- Authentication handling
|
||||||
|
- Endpoint methods
|
||||||
|
|
||||||
|
2. **React Hooks** (`src/hooks/useApi.ts`)
|
||||||
|
- React Query integration
|
||||||
|
- Custom hooks for each endpoint
|
||||||
|
- Caching and error handling
|
||||||
|
|
||||||
|
3. **Updated Components**
|
||||||
|
- Movies page now uses `useMovies()` hook
|
||||||
|
- Dashboard uses `useDashboardStats()` and `useRecentActivity()`
|
||||||
|
- Search page uses `useSearch()` hook
|
||||||
|
|
||||||
|
### Authentication Flow
|
||||||
|
|
||||||
|
1. Login via `/api/auth/login`
|
||||||
|
2. Store JWT token in localStorage
|
||||||
|
3. Token automatically added to all requests
|
||||||
|
4. Auto-logout on 401 responses
|
||||||
|
|
||||||
|
### Pagination
|
||||||
|
|
||||||
|
All list endpoints support:
|
||||||
|
- `page` - Page number (default: 1)
|
||||||
|
- `per_page` - Items per page (default: 20)
|
||||||
|
- `search` - Search term
|
||||||
|
- `genre` - Filter by genre
|
||||||
|
- `year` - Filter by year
|
||||||
|
|
||||||
|
### Error Handling
|
||||||
|
|
||||||
|
- 401: Auto-redirect to login
|
||||||
|
- 404: Show "not found" message
|
||||||
|
- 500: Show generic error message
|
||||||
|
- Network: Show connection error
|
||||||
|
|
||||||
|
### Next Steps
|
||||||
|
|
||||||
|
1. **Complete Backend Endpoints**: Your MediaController needs implementations for:
|
||||||
|
- `listMovies()` method
|
||||||
|
- `getMovie()` method
|
||||||
|
- Dashboard stats endpoint
|
||||||
|
- Recent activity endpoint
|
||||||
|
|
||||||
|
2. **Add Missing Features**:
|
||||||
|
- Music API endpoints
|
||||||
|
- Adult content API endpoints
|
||||||
|
- Actors/performers API endpoints
|
||||||
|
- CRUD operations (create, update, delete)
|
||||||
|
|
||||||
|
3. **Testing**:
|
||||||
|
- Test API connectivity
|
||||||
|
- Test authentication flow
|
||||||
|
- Test error handling
|
||||||
|
|
||||||
|
### Example API Response Format
|
||||||
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"success": true,
|
||||||
|
"data": {
|
||||||
|
"items": [...],
|
||||||
|
"pagination": {
|
||||||
|
"total": 100,
|
||||||
|
"per_page": 20,
|
||||||
|
"current_page": 1,
|
||||||
|
"last_page": 5
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Development Notes
|
||||||
|
|
||||||
|
- The frontend includes fallback mock data
|
||||||
|
- API calls are made through React Query for caching
|
||||||
|
- All requests include JWT authentication headers
|
||||||
|
- CORS is configured for development
|
||||||
120
README.md
Normal file
120
README.md
Normal file
@@ -0,0 +1,120 @@
|
|||||||
|
# Media Collector - Modern React Frontend
|
||||||
|
|
||||||
|
A modern React-based frontend for the Media Collector application, built with Vite, TypeScript, and Tailwind CSS.
|
||||||
|
|
||||||
|
## Features
|
||||||
|
|
||||||
|
- 🎬 **Modern UI**: Clean, responsive design using Tailwind CSS
|
||||||
|
- ⚡ **Fast Development**: Vite for lightning-fast development and builds
|
||||||
|
- 🔷 **TypeScript**: Full type safety throughout the application
|
||||||
|
- 🎯 **Component-Based**: Modular, reusable React components
|
||||||
|
- 📱 **Responsive**: Mobile-first design that works on all devices
|
||||||
|
- 🎭 **Media Management**: Support for movies, TV shows, games, music, and adult content
|
||||||
|
- 🔍 **Search**: Unified search across all media types
|
||||||
|
- 📊 **Dashboard**: Overview of your media collection
|
||||||
|
|
||||||
|
## Tech Stack
|
||||||
|
|
||||||
|
- **React 18** - UI framework
|
||||||
|
- **TypeScript** - Type safety
|
||||||
|
- **Vite** - Build tool and dev server
|
||||||
|
- **Tailwind CSS** - Utility-first CSS framework
|
||||||
|
- **React Router** - Client-side routing
|
||||||
|
- **React Query** - Data fetching and caching
|
||||||
|
- **Heroicons** - Beautiful SVG icons
|
||||||
|
- **Axios** - HTTP client
|
||||||
|
|
||||||
|
## Getting Started
|
||||||
|
|
||||||
|
### Prerequisites
|
||||||
|
|
||||||
|
- Node.js 18+
|
||||||
|
- npm or yarn
|
||||||
|
|
||||||
|
### Installation
|
||||||
|
|
||||||
|
1. Navigate to the frontend directory:
|
||||||
|
```bash
|
||||||
|
cd frontend
|
||||||
|
```
|
||||||
|
|
||||||
|
2. Install dependencies:
|
||||||
|
```bash
|
||||||
|
npm install
|
||||||
|
```
|
||||||
|
|
||||||
|
3. Start the development server:
|
||||||
|
```bash
|
||||||
|
npm run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
The application will be available at `http://localhost:3000`
|
||||||
|
|
||||||
|
### Building for Production
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm run build
|
||||||
|
```
|
||||||
|
|
||||||
|
The built files will be output to `../public/react` for integration with the PHP backend.
|
||||||
|
|
||||||
|
## Project Structure
|
||||||
|
|
||||||
|
```
|
||||||
|
src/
|
||||||
|
├── components/ # Reusable UI components
|
||||||
|
│ ├── Layout.tsx # Main application layout
|
||||||
|
│ └── MovieCard.tsx # Movie display component
|
||||||
|
├── pages/ # Page components
|
||||||
|
│ ├── Dashboard.tsx # Dashboard overview
|
||||||
|
│ ├── Movies.tsx # Movies listing
|
||||||
|
│ ├── TVShows.tsx # TV shows listing
|
||||||
|
│ ├── Games.tsx # Games listing
|
||||||
|
│ ├── Music.tsx # Music listing
|
||||||
|
│ ├── Adult.tsx # Adult content
|
||||||
|
│ ├── Actors.tsx # Actors/performers
|
||||||
|
│ └── Search.tsx # Search functionality
|
||||||
|
├── types/ # TypeScript type definitions
|
||||||
|
│ └── index.ts # Main types file
|
||||||
|
├── App.tsx # Main application component
|
||||||
|
├── main.tsx # Application entry point
|
||||||
|
└── index.css # Global styles
|
||||||
|
```
|
||||||
|
|
||||||
|
## Available Scripts
|
||||||
|
|
||||||
|
- `npm run dev` - Start development server
|
||||||
|
- `npm run build` - Build for production
|
||||||
|
- `npm run preview` - Preview production build
|
||||||
|
- `npm run lint` - Run ESLint
|
||||||
|
|
||||||
|
## Configuration
|
||||||
|
|
||||||
|
- **Vite**: `vite.config.ts`
|
||||||
|
- **TypeScript**: `tsconfig.json`
|
||||||
|
- **Tailwind**: `tailwind.config.js`
|
||||||
|
- **PostCSS**: `postcss.config.js`
|
||||||
|
|
||||||
|
## Integration with PHP Backend
|
||||||
|
|
||||||
|
The React frontend is designed to work alongside the existing PHP backend:
|
||||||
|
|
||||||
|
1. API requests are proxied from `/api` to the PHP backend
|
||||||
|
2. Built files are output to `../public/react` for serving
|
||||||
|
3. The frontend can replace or complement the existing Twig templates
|
||||||
|
|
||||||
|
## Development Notes
|
||||||
|
|
||||||
|
- The project uses path aliases (`@/`) for clean imports
|
||||||
|
- Components are built with TypeScript for full type safety
|
||||||
|
- Tailwind CSS is configured with custom colors and animations
|
||||||
|
- The layout mirrors the original Twig template structure
|
||||||
|
|
||||||
|
## Future Enhancements
|
||||||
|
|
||||||
|
- [ ] Complete API integration
|
||||||
|
- [ ] Add real-time updates
|
||||||
|
- [ ] Implement advanced filtering
|
||||||
|
- [ ] Add media details pages
|
||||||
|
- [ ] Include user preferences
|
||||||
|
- [ ] Add dark mode support
|
||||||
91
index.html
Normal file
91
index.html
Normal file
@@ -0,0 +1,91 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de" class="dark">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
|
||||||
|
<title>MediaVault - Deine Sammlung</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
<script>
|
||||||
|
tailwind.config = {
|
||||||
|
darkMode: 'class',
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
fontFamily: {
|
||||||
|
sans: ['Inter', 'system-ui', 'sans-serif'],
|
||||||
|
},
|
||||||
|
colors: {
|
||||||
|
brand: {
|
||||||
|
50: '#f0f9ff',
|
||||||
|
100: '#e0f2fe',
|
||||||
|
400: '#38bdf8',
|
||||||
|
500: '#0ea5e9',
|
||||||
|
600: '#0284c7',
|
||||||
|
900: '#0c4a6e',
|
||||||
|
},
|
||||||
|
dark: {
|
||||||
|
bg: '#0f172a',
|
||||||
|
surface: '#1e293b',
|
||||||
|
border: '#334155'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
animation: {
|
||||||
|
'float': 'float 6s ease-in-out infinite',
|
||||||
|
},
|
||||||
|
keyframes: {
|
||||||
|
float: {
|
||||||
|
'0%, 100%': { transform: 'translateY(0)' },
|
||||||
|
'50%': { transform: 'translateY(-10px)' },
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Inter', sans-serif;
|
||||||
|
background-color: #020617; /* Very dark slate */
|
||||||
|
/* Mesh Gradient Background */
|
||||||
|
background-image:
|
||||||
|
radial-gradient(at 0% 0%, hsla(253,16%,7%,1) 0, transparent 50%),
|
||||||
|
radial-gradient(at 50% 0%, hsla(225,39%,30%,1) 0, transparent 50%),
|
||||||
|
radial-gradient(at 100% 0%, hsla(339,49%,30%,1) 0, transparent 50%);
|
||||||
|
background-attachment: fixed;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Native-like Scrollbar */
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 6px;
|
||||||
|
height: 6px;
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: rgba(255, 255, 255, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.glass-panel {
|
||||||
|
background: rgba(30, 41, 59, 0.7);
|
||||||
|
backdrop-filter: blur(20px);
|
||||||
|
-webkit-backdrop-filter: blur(20px);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.mask-image-gradient {
|
||||||
|
mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
|
||||||
|
-webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="text-slate-200 antialiased h-screen overflow-hidden selection:bg-brand-500/30">
|
||||||
|
<div id="root"></div>
|
||||||
|
<script type="module" src="/src/main.tsx"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
4374
package-lock.json
generated
Normal file
4374
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
42
package.json
Normal file
42
package.json
Normal file
@@ -0,0 +1,42 @@
|
|||||||
|
{
|
||||||
|
"name": "media-collector-frontend",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "tsc && vite build",
|
||||||
|
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@headlessui/react": "^1.7.17",
|
||||||
|
"@heroicons/react": "^2.0.18",
|
||||||
|
"@tanstack/react-query": "^5.90.16",
|
||||||
|
"@tanstack/react-query-devtools": "^5.91.2",
|
||||||
|
"axios": "^1.6.2",
|
||||||
|
"clsx": "^2.0.0",
|
||||||
|
"framer-motion": "^12.24.12",
|
||||||
|
"lucide-react": "^0.562.0",
|
||||||
|
"react": "^18.2.0",
|
||||||
|
"react-dom": "^18.2.0",
|
||||||
|
"react-hot-toast": "^2.4.1",
|
||||||
|
"react-query": "^3.39.3",
|
||||||
|
"react-router-dom": "^6.20.1"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@types/react": "^18.2.37",
|
||||||
|
"@types/react-dom": "^18.2.15",
|
||||||
|
"@typescript-eslint/eslint-plugin": "^6.10.0",
|
||||||
|
"@typescript-eslint/parser": "^6.10.0",
|
||||||
|
"@vitejs/plugin-react": "^4.1.1",
|
||||||
|
"autoprefixer": "^10.4.16",
|
||||||
|
"eslint": "^8.53.0",
|
||||||
|
"eslint-plugin-react-hooks": "^4.6.0",
|
||||||
|
"eslint-plugin-react-refresh": "^0.4.4",
|
||||||
|
"postcss": "^8.4.32",
|
||||||
|
"tailwindcss": "^3.3.6",
|
||||||
|
"typescript": "^5.2.2",
|
||||||
|
"vite": "^4.5.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
6
postcss.config.js
Normal file
6
postcss.config.js
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
export default {
|
||||||
|
plugins: {
|
||||||
|
tailwindcss: {},
|
||||||
|
autoprefixer: {},
|
||||||
|
},
|
||||||
|
}
|
||||||
48
src/App.tsx
Normal file
48
src/App.tsx
Normal file
@@ -0,0 +1,48 @@
|
|||||||
|
import React from 'react'
|
||||||
|
import { Routes, Route } from 'react-router-dom'
|
||||||
|
import Layout from './components/Layout'
|
||||||
|
import ErrorBoundary from './components/ErrorBoundary'
|
||||||
|
import Dashboard from './pages/Dashboard'
|
||||||
|
import Movies from './pages/Movies'
|
||||||
|
import MovieDetail from './pages/MovieDetail'
|
||||||
|
import TVShows from './pages/TVShows'
|
||||||
|
import TVShowDetail from './pages/TVShowDetail'
|
||||||
|
import GamesPage from './pages/GamesPage'
|
||||||
|
import GameDetail from './pages/GameDetail'
|
||||||
|
import Music from './pages/Music'
|
||||||
|
import Adult from './pages/Adult'
|
||||||
|
import AdultDetail from './pages/AdultDetail'
|
||||||
|
import Actors from './pages/Actors'
|
||||||
|
import ActorDetail from './pages/ActorDetail'
|
||||||
|
import Search from './pages/Search'
|
||||||
|
import Games from './pages/Games'
|
||||||
|
|
||||||
|
function App() {
|
||||||
|
return (
|
||||||
|
<div className="h-screen w-screen overflow-hidden">
|
||||||
|
<ErrorBoundary>
|
||||||
|
<Layout>
|
||||||
|
<Routes>
|
||||||
|
<Route path="/" element={<Dashboard />} />
|
||||||
|
<Route path="/dashboard" element={<Dashboard />} />
|
||||||
|
<Route path="/movies" element={<Movies />} />
|
||||||
|
<Route path="/movies/:id" element={<MovieDetail />} />
|
||||||
|
<Route path="/tvshows" element={<TVShows />} />
|
||||||
|
<Route path="/tvshows/:id" element={<TVShowDetail />} />
|
||||||
|
<Route path="/games" element={<Games />} />
|
||||||
|
<Route path="/games/:id" element={<GameDetail />} />
|
||||||
|
<Route path="/music" element={<Music />} />
|
||||||
|
<Route path="/music/:id" element={<Music />} />
|
||||||
|
<Route path="/adult" element={<Adult />} />
|
||||||
|
<Route path="/adult/:id" element={<AdultDetail />} />
|
||||||
|
<Route path="/actors" element={<Actors />} />
|
||||||
|
<Route path="/actors/:id" element={<ActorDetail />} />
|
||||||
|
<Route path="/search" element={<Search />} />
|
||||||
|
</Routes>
|
||||||
|
</Layout>
|
||||||
|
</ErrorBoundary>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default App
|
||||||
245
src/components/ContentFilters.tsx
Normal file
245
src/components/ContentFilters.tsx
Normal file
@@ -0,0 +1,245 @@
|
|||||||
|
import { useState } from 'react'
|
||||||
|
import { motion, AnimatePresence } from 'framer-motion'
|
||||||
|
import { Filter, X } from 'lucide-react'
|
||||||
|
|
||||||
|
interface FilterOptions {
|
||||||
|
sources: string[]
|
||||||
|
genres: string[]
|
||||||
|
years: string[]
|
||||||
|
}
|
||||||
|
|
||||||
|
interface FilterState {
|
||||||
|
source: string
|
||||||
|
genre: string
|
||||||
|
year: string
|
||||||
|
search: string
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ContentFiltersProps {
|
||||||
|
filters: FilterState
|
||||||
|
availableFilters: FilterOptions
|
||||||
|
onFiltersChange: (filters: FilterState) => void
|
||||||
|
onSearchChange: (search: string) => void
|
||||||
|
className?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function ContentFilters({
|
||||||
|
filters,
|
||||||
|
availableFilters,
|
||||||
|
onFiltersChange,
|
||||||
|
onSearchChange,
|
||||||
|
className = ''
|
||||||
|
}: ContentFiltersProps) {
|
||||||
|
const [showFilters, setShowFilters] = useState(false)
|
||||||
|
|
||||||
|
const handleFilterChange = (key: keyof FilterState, value: string) => {
|
||||||
|
const newFilters = { ...filters, [key]: value }
|
||||||
|
onFiltersChange(newFilters)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleClearFilters = () => {
|
||||||
|
onFiltersChange({
|
||||||
|
source: '',
|
||||||
|
genre: '',
|
||||||
|
year: '',
|
||||||
|
search: ''
|
||||||
|
})
|
||||||
|
onSearchChange('')
|
||||||
|
}
|
||||||
|
|
||||||
|
const hasActiveFilters = filters.source || filters.genre || filters.year || filters.search
|
||||||
|
|
||||||
|
const sources = ['All', ...availableFilters.sources]
|
||||||
|
const genres = ['All', ...availableFilters.genres]
|
||||||
|
const years = ['All', ...availableFilters.years]
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={`space-y-4 ${className}`}>
|
||||||
|
{/* Filter Toggle and Search */}
|
||||||
|
<div className="flex flex-col sm:flex-row gap-4">
|
||||||
|
{/* Search Bar */}
|
||||||
|
<div className="flex-1 relative">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="Search content..."
|
||||||
|
value={filters.search}
|
||||||
|
onChange={(e) => {
|
||||||
|
onSearchChange(e.target.value)
|
||||||
|
handleFilterChange('search', e.target.value)
|
||||||
|
}}
|
||||||
|
className="w-full px-4 py-2.5 bg-white/10 dark:bg-gray-800/50 border border-white/10 rounded-xl text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Filter Toggle Button */}
|
||||||
|
<motion.button
|
||||||
|
onClick={() => setShowFilters(!showFilters)}
|
||||||
|
className={`flex items-center gap-2 px-4 py-2.5 rounded-xl border transition-all ${
|
||||||
|
hasActiveFilters
|
||||||
|
? 'bg-purple-600/20 border-purple-500/50 text-purple-400'
|
||||||
|
: 'bg-white/10 border-white/10 text-gray-300 hover:bg-white/20'
|
||||||
|
}`}
|
||||||
|
whileHover={{ scale: 1.05 }}
|
||||||
|
whileTap={{ scale: 0.95 }}
|
||||||
|
>
|
||||||
|
<Filter className="w-4 h-4" />
|
||||||
|
Filters
|
||||||
|
{hasActiveFilters && (
|
||||||
|
<span className="w-2 h-2 bg-purple-400 rounded-full"></span>
|
||||||
|
)}
|
||||||
|
</motion.button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Expandable Filter Panel */}
|
||||||
|
<AnimatePresence>
|
||||||
|
{showFilters && (
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, height: 0 }}
|
||||||
|
animate={{ opacity: 1, height: 'auto' }}
|
||||||
|
exit={{ opacity: 0, height: 0 }}
|
||||||
|
className="bg-white/5 dark:bg-gray-800/50 rounded-xl p-6 border border-white/10"
|
||||||
|
>
|
||||||
|
<div className="flex items-center justify-between mb-4">
|
||||||
|
<h3 className="text-lg font-semibold text-white">Filter Options</h3>
|
||||||
|
<button
|
||||||
|
onClick={() => setShowFilters(false)}
|
||||||
|
className="text-gray-400 hover:text-white transition-colors"
|
||||||
|
>
|
||||||
|
<X className="w-5 h-5" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||||
|
{/* Source Filter */}
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-300 mb-2">
|
||||||
|
Source
|
||||||
|
</label>
|
||||||
|
<select
|
||||||
|
value={filters.source}
|
||||||
|
onChange={(e) => handleFilterChange('source', e.target.value)}
|
||||||
|
className="w-full px-3 py-2 bg-white/10 border border-white/10 rounded-lg text-white focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all"
|
||||||
|
>
|
||||||
|
{sources.map(source => (
|
||||||
|
<option key={source} value={source === 'All' ? '' : source}>
|
||||||
|
{source}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Genre Filter */}
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-300 mb-2">
|
||||||
|
Genre
|
||||||
|
</label>
|
||||||
|
<select
|
||||||
|
value={filters.genre}
|
||||||
|
onChange={(e) => handleFilterChange('genre', e.target.value)}
|
||||||
|
className="w-full px-3 py-2 bg-white/10 border border-white/10 rounded-lg text-white focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all"
|
||||||
|
>
|
||||||
|
{genres.map(genre => (
|
||||||
|
<option key={genre} value={genre === 'All' ? '' : genre}>
|
||||||
|
{genre}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Year Filter */}
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-300 mb-2">
|
||||||
|
Year
|
||||||
|
</label>
|
||||||
|
<select
|
||||||
|
value={filters.year}
|
||||||
|
onChange={(e) => handleFilterChange('year', e.target.value)}
|
||||||
|
className="w-full px-3 py-2 bg-white/10 border border-white/10 rounded-lg text-white focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all"
|
||||||
|
>
|
||||||
|
{years.map(year => (
|
||||||
|
<option key={year} value={year === 'All' ? '' : year}>
|
||||||
|
{year}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Clear Filters Button */}
|
||||||
|
<div className="mt-4 flex justify-end">
|
||||||
|
<button
|
||||||
|
onClick={handleClearFilters}
|
||||||
|
className="px-4 py-2 text-sm bg-red-600/20 border border-red-500/50 text-red-400 rounded-lg hover:bg-red-600/30 transition-colors"
|
||||||
|
>
|
||||||
|
Clear All Filters
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
</AnimatePresence>
|
||||||
|
|
||||||
|
{/* Active Filter Tags */}
|
||||||
|
{hasActiveFilters && (
|
||||||
|
<div className="flex flex-wrap gap-2">
|
||||||
|
{filters.search && (
|
||||||
|
<FilterTag
|
||||||
|
label="Search"
|
||||||
|
value={filters.search}
|
||||||
|
onRemove={() => {
|
||||||
|
handleFilterChange('search', '')
|
||||||
|
onSearchChange('')
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{filters.source && (
|
||||||
|
<FilterTag
|
||||||
|
label="Source"
|
||||||
|
value={filters.source}
|
||||||
|
onRemove={() => handleFilterChange('source', '')}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{filters.genre && (
|
||||||
|
<FilterTag
|
||||||
|
label="Genre"
|
||||||
|
value={filters.genre}
|
||||||
|
onRemove={() => handleFilterChange('genre', '')}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{filters.year && (
|
||||||
|
<FilterTag
|
||||||
|
label="Year"
|
||||||
|
value={filters.year}
|
||||||
|
onRemove={() => handleFilterChange('year', '')}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
interface FilterTagProps {
|
||||||
|
label: string
|
||||||
|
value: string
|
||||||
|
onRemove: () => void
|
||||||
|
}
|
||||||
|
|
||||||
|
function FilterTag({ label, value, onRemove }: FilterTagProps) {
|
||||||
|
return (
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, scale: 0.8 }}
|
||||||
|
animate={{ opacity: 1, scale: 1 }}
|
||||||
|
exit={{ opacity: 0, scale: 0.8 }}
|
||||||
|
className="inline-flex items-center gap-1 px-3 py-1 bg-purple-600/20 border border-purple-500/50 text-purple-300 rounded-full text-sm"
|
||||||
|
>
|
||||||
|
<span className="font-medium">{label}:</span>
|
||||||
|
<span>{value}</span>
|
||||||
|
<button
|
||||||
|
onClick={onRemove}
|
||||||
|
className="ml-1 text-purple-400 hover:text-purple-200 transition-colors"
|
||||||
|
>
|
||||||
|
<X className="w-3 h-3" />
|
||||||
|
</button>
|
||||||
|
</motion.div>
|
||||||
|
)
|
||||||
|
}
|
||||||
52
src/components/ErrorBoundary.tsx
Normal file
52
src/components/ErrorBoundary.tsx
Normal file
@@ -0,0 +1,52 @@
|
|||||||
|
import React, { Component, ReactNode } from 'react'
|
||||||
|
import { ExclamationTriangleIcon } from '@heroicons/react/24/outline'
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
children: ReactNode
|
||||||
|
}
|
||||||
|
|
||||||
|
interface State {
|
||||||
|
hasError: boolean
|
||||||
|
error?: Error
|
||||||
|
}
|
||||||
|
|
||||||
|
class ErrorBoundary extends Component<Props, State> {
|
||||||
|
constructor(props: Props) {
|
||||||
|
super(props)
|
||||||
|
this.state = { hasError: false }
|
||||||
|
}
|
||||||
|
|
||||||
|
static getDerivedStateFromError(error: Error): State {
|
||||||
|
return { hasError: true, error }
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
|
||||||
|
console.error('Error caught by boundary:', error, errorInfo)
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
if (this.state.hasError) {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-gray-50 flex items-center justify-center">
|
||||||
|
<div className="text-center">
|
||||||
|
<ExclamationTriangleIcon className="w-16 h-16 text-red-500 mx-auto mb-4" />
|
||||||
|
<h2 className="text-2xl font-bold text-gray-900 mb-2">Something went wrong</h2>
|
||||||
|
<p className="text-gray-600 mb-6">
|
||||||
|
{this.state.error?.message || 'An unexpected error occurred'}
|
||||||
|
</p>
|
||||||
|
<button
|
||||||
|
onClick={() => window.location.reload()}
|
||||||
|
className="btn btn-primary"
|
||||||
|
>
|
||||||
|
Reload Page
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
return this.props.children
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ErrorBoundary
|
||||||
402
src/components/GameCard.tsx
Normal file
402
src/components/GameCard.tsx
Normal file
@@ -0,0 +1,402 @@
|
|||||||
|
import { Link } from 'react-router-dom'
|
||||||
|
import { motion } from 'framer-motion'
|
||||||
|
import {
|
||||||
|
ComputerDesktopIcon as GamepadIcon,
|
||||||
|
StarIcon,
|
||||||
|
ClockIcon,
|
||||||
|
PlayIcon,
|
||||||
|
HeartIcon,
|
||||||
|
CheckCircleIcon,
|
||||||
|
TrophyIcon
|
||||||
|
} from '@heroicons/react/24/outline'
|
||||||
|
import { clsx } from 'clsx'
|
||||||
|
import { Tooltip } from './MicroInteractions'
|
||||||
|
|
||||||
|
export interface GameItem {
|
||||||
|
id: number
|
||||||
|
title: string
|
||||||
|
poster_url?: string
|
||||||
|
backdrop_url?: string
|
||||||
|
rating?: number
|
||||||
|
release_date?: string
|
||||||
|
playtime_hours?: number
|
||||||
|
source_name?: string
|
||||||
|
platform?: string
|
||||||
|
platforms?: string[]
|
||||||
|
platform_count?: number
|
||||||
|
platform_details?: Array<{ platform: string; display_name: string }>
|
||||||
|
developer?: string
|
||||||
|
genres?: string[]
|
||||||
|
completion_status?: 'BEATEN' | 'PLAYING' | 'UNPLAYED' | 'COMPLETED'
|
||||||
|
last_played?: string
|
||||||
|
community_score?: number
|
||||||
|
critic_score?: number
|
||||||
|
max_completion?: number
|
||||||
|
total_playtime?: number
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface GameCardProps {
|
||||||
|
game: GameItem
|
||||||
|
viewMode: 'grid' | 'list' | 'covers'
|
||||||
|
coverSize?: 'small' | 'medium' | 'large' | 'xlarge'
|
||||||
|
className?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
const completionStatusConfig = {
|
||||||
|
BEATEN: {
|
||||||
|
icon: TrophyIcon,
|
||||||
|
color: 'from-yellow-500 to-amber-600',
|
||||||
|
bgColor: 'bg-yellow-100 text-yellow-800',
|
||||||
|
label: 'BEATEN'
|
||||||
|
},
|
||||||
|
PLAYING: {
|
||||||
|
icon: PlayIcon,
|
||||||
|
color: 'from-blue-500 to-blue-600',
|
||||||
|
bgColor: 'bg-blue-100 text-blue-800',
|
||||||
|
label: 'PLAYING'
|
||||||
|
},
|
||||||
|
COMPLETED: {
|
||||||
|
icon: CheckCircleIcon,
|
||||||
|
color: 'from-green-500 to-green-600',
|
||||||
|
bgColor: 'bg-green-100 text-green-800',
|
||||||
|
label: 'COMPLETED'
|
||||||
|
},
|
||||||
|
UNPLAYED: {
|
||||||
|
icon: GamepadIcon,
|
||||||
|
color: 'from-gray-500 to-gray-600',
|
||||||
|
bgColor: 'bg-gray-100 text-gray-800',
|
||||||
|
label: 'UNPLAYED'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function GameCard({
|
||||||
|
game,
|
||||||
|
viewMode,
|
||||||
|
coverSize = 'medium',
|
||||||
|
className = ''
|
||||||
|
}: GameCardProps) {
|
||||||
|
|
||||||
|
// Cover size mappings
|
||||||
|
const listCoverSizeClasses = {
|
||||||
|
small: { width: '40px', height: '60px' },
|
||||||
|
medium: { width: '64px', height: '96px' },
|
||||||
|
large: { width: '80px', height: '120px' },
|
||||||
|
xlarge: { width: '96px', height: '144px' }
|
||||||
|
}
|
||||||
|
|
||||||
|
const coversHeightClasses = {
|
||||||
|
small: 'h-[28rem]',
|
||||||
|
medium: 'h-[28rem]',
|
||||||
|
large: 'h-[28rem]',
|
||||||
|
xlarge: 'h-[28rem]'
|
||||||
|
}
|
||||||
|
|
||||||
|
const statusConfig = game.completion_status ? completionStatusConfig[game.completion_status] : completionStatusConfig.UNPLAYED
|
||||||
|
const StatusIcon = statusConfig.icon
|
||||||
|
|
||||||
|
const formatPlaytime = (hours?: number) => {
|
||||||
|
if (!hours) return null
|
||||||
|
if (hours < 1) return `${Math.round(hours * 60)}m`
|
||||||
|
return `${hours}h`
|
||||||
|
}
|
||||||
|
|
||||||
|
const formatYear = (date?: string) => {
|
||||||
|
if (!date) return null
|
||||||
|
const parsedDate = new Date(date)
|
||||||
|
return isNaN(parsedDate.getTime()) ? null : parsedDate.getFullYear()
|
||||||
|
}
|
||||||
|
|
||||||
|
// Determine if this is a grouped game
|
||||||
|
const isGrouped = game.platform_count && game.platform_count > 1
|
||||||
|
const displayPlatforms = game.platforms || (game.platform ? [game.platform] : [])
|
||||||
|
const displayPlaytime = game.playtime_hours || (game.total_playtime ? game.total_playtime / 60 : undefined)
|
||||||
|
const displayCompletion = game.max_completion || game.completion_status
|
||||||
|
|
||||||
|
// List view
|
||||||
|
if (viewMode === 'list') {
|
||||||
|
return (
|
||||||
|
<motion.div
|
||||||
|
className={clsx(
|
||||||
|
"flex gap-4 p-4 bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 hover:shadow-lg transition-shadow cursor-pointer",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
whileHover={{ y: -2 }}
|
||||||
|
layout
|
||||||
|
>
|
||||||
|
<Link to={`/games/${game.id}`} className="flex gap-4 w-full">
|
||||||
|
<div className="w-32 h-48 flex-shrink-0 bg-gray-200 dark:bg-gray-700 rounded-lg overflow-hidden">
|
||||||
|
{game.poster_url ? (
|
||||||
|
<img
|
||||||
|
src={game.poster_url.startsWith('http') ? game.poster_url : `${(import.meta as any).env?.VITE_API_URL?.replace('/api', '') || ''}/images/playnite/${game.poster_url}`}
|
||||||
|
alt={game.title}
|
||||||
|
className="w-full h-full object-cover"
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<div className="w-full h-full bg-gradient-to-br from-green-400 to-emerald-500 flex items-center justify-center">
|
||||||
|
<GamepadIcon className="w-8 h-8 text-white/50" />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<div className="flex items-start justify-between">
|
||||||
|
<div>
|
||||||
|
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-1">{game.title}</h3>
|
||||||
|
<div className="flex items-center gap-4 text-sm text-gray-500 dark:text-gray-400 mb-2">
|
||||||
|
<div className="flex items-center gap-1">
|
||||||
|
<ClockIcon className="w-4 h-4" />
|
||||||
|
<span>{formatPlaytime(displayPlaytime) || 'Unknown'}</span>
|
||||||
|
</div>
|
||||||
|
{isGrouped ? (
|
||||||
|
<div className="flex items-center gap-1">
|
||||||
|
<span className="px-2 py-1 bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-200 rounded text-xs font-medium">
|
||||||
|
{game.platform_count} Platforms
|
||||||
|
</span>
|
||||||
|
<div className="flex gap-1">
|
||||||
|
{displayPlatforms.slice(0, 3).map((platform, index) => (
|
||||||
|
<span
|
||||||
|
key={platform}
|
||||||
|
className="px-2 py-1 bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-200 rounded text-xs font-medium"
|
||||||
|
>
|
||||||
|
{platform}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
{displayPlatforms.length > 3 && (
|
||||||
|
<span className="px-2 py-1 bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400 text-xs rounded">
|
||||||
|
+{displayPlatforms.length - 3}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : game.platform ? (
|
||||||
|
<span className="px-2 py-1 bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-200 rounded text-xs font-medium">
|
||||||
|
{game.platform}
|
||||||
|
</span>
|
||||||
|
) : null}
|
||||||
|
{game.developer && (
|
||||||
|
<span>{game.developer}</span>
|
||||||
|
)}
|
||||||
|
{game.release_date && (
|
||||||
|
<span>{formatYear(game.release_date)}</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
{game.genres && Array.isArray(game.genres) && game.genres.length > 0 && (
|
||||||
|
<div className="flex flex-wrap gap-1 mb-2">
|
||||||
|
{game.genres.slice(0, 3).map((genre, index) => (
|
||||||
|
<span
|
||||||
|
key={typeof genre === 'string' ? genre : `genre-${index}`}
|
||||||
|
className="px-2 py-1 bg-purple-100 dark:bg-purple-900/30 text-purple-800 dark:text-purple-200 rounded text-xs"
|
||||||
|
>
|
||||||
|
{typeof genre === 'string' ? genre : 'Unknown'}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
{game.genres.length > 3 && (
|
||||||
|
<span className="px-2 py-1 bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400 text-xs rounded">
|
||||||
|
+{game.genres.length - 3}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
{game.rating && (
|
||||||
|
<div className="flex items-center gap-1">
|
||||||
|
<StarIcon className="w-4 h-4 text-yellow-500" />
|
||||||
|
<span className="text-sm font-medium">{game.rating}/10</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{game.completion_status && (
|
||||||
|
<span className={clsx("px-2 py-1 rounded-full text-xs font-medium", statusConfig.bgColor)}>
|
||||||
|
{statusConfig.label}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
<motion.button
|
||||||
|
className="p-2 bg-green-600 rounded-full hover:bg-green-700 transition-colors"
|
||||||
|
whileHover={{ scale: 1.1 }}
|
||||||
|
whileTap={{ scale: 0.9 }}
|
||||||
|
>
|
||||||
|
<PlayIcon className="w-4 h-4 text-white" />
|
||||||
|
</motion.button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
</motion.div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Covers view
|
||||||
|
if (viewMode === 'covers') {
|
||||||
|
return (
|
||||||
|
<motion.div
|
||||||
|
className={clsx(
|
||||||
|
"relative group cursor-pointer overflow-hidden",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
whileHover={{ y: -5 }}
|
||||||
|
layout
|
||||||
|
>
|
||||||
|
<Link to={`/games/${game.id}`}>
|
||||||
|
{/* Calculate height based on 2:3 aspect ratio */}
|
||||||
|
{(() => {
|
||||||
|
const aspectRatio = 2/3; // Game posters are 2:3 aspect ratio
|
||||||
|
const height = 200 / aspectRatio; // Base width of 200px
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className="relative overflow-hidden rounded-t-lg shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1"
|
||||||
|
style={{
|
||||||
|
width: '200px',
|
||||||
|
height: `${height}px`
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{game.poster_url ? (
|
||||||
|
<img
|
||||||
|
src={game.poster_url.startsWith('http') ? game.poster_url : `${(import.meta as any).env?.VITE_API_URL?.replace('/api', '') || ''}/images/playnite/${game.poster_url}`}
|
||||||
|
alt={game.title}
|
||||||
|
className="w-full h-full object-cover"
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<div className="w-full h-full bg-gradient-to-br from-green-400 to-emerald-500 flex items-center justify-center">
|
||||||
|
<GamepadIcon className="w-8 h-8 text-white/50" />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Shelf effect - bottom shadow */}
|
||||||
|
<div className="absolute bottom-0 left-0 right-0 h-2 bg-gradient-to-t from-black/30 to-transparent"></div>
|
||||||
|
|
||||||
|
{/* Hover overlay */}
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300">
|
||||||
|
<div className="absolute top-2 right-2">
|
||||||
|
<motion.button
|
||||||
|
className="p-1 bg-green-600 rounded-full hover:bg-green-700 transition-colors"
|
||||||
|
whileHover={{ scale: 1.1 }}
|
||||||
|
whileTap={{ scale: 0.9 }}
|
||||||
|
>
|
||||||
|
<PlayIcon className="w-3 h-3 text-white" />
|
||||||
|
</motion.button>
|
||||||
|
</div>
|
||||||
|
{game.completion_status && game.completion_status !== 'UNPLAYED' && (
|
||||||
|
<div className="absolute top-2 left-2">
|
||||||
|
<Tooltip text={statusConfig.label}>
|
||||||
|
<StatusIcon className="w-4 h-4 text-green-400" />
|
||||||
|
</Tooltip>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})()}
|
||||||
|
</Link>
|
||||||
|
</motion.div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Grid view (default)
|
||||||
|
return (
|
||||||
|
<motion.div
|
||||||
|
className={clsx(
|
||||||
|
"group cursor-pointer overflow-hidden rounded-xl",
|
||||||
|
"transform transition-all duration-300",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
whileHover={{ y: -5 }}
|
||||||
|
layout
|
||||||
|
>
|
||||||
|
<Link to={`/games/${game.id}`}>
|
||||||
|
<div className="relative overflow-hidden rounded-xl bg-gray-200 dark:bg-gray-800">
|
||||||
|
{game.poster_url ? (
|
||||||
|
<img
|
||||||
|
src={game.poster_url.startsWith('http') ? game.poster_url : `${(import.meta as any).env?.VITE_API_URL?.replace('/api', '') || ''}/images/playnite/${game.poster_url}`}
|
||||||
|
alt={game.title}
|
||||||
|
className="w-full aspect-[2/3] object-cover group-hover:scale-105 transition-transform duration-300"
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<div className="w-full aspect-[2/3] bg-gradient-to-br from-green-400 to-emerald-500 flex items-center justify-center">
|
||||||
|
<GamepadIcon className="w-16 h-16 text-white/50" />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Overlay */}
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300">
|
||||||
|
<div className="absolute bottom-0 left-0 right-0 p-4">
|
||||||
|
<div className="flex items-center gap-2 mb-2">
|
||||||
|
<motion.button
|
||||||
|
className="p-2 bg-green-600 rounded-full hover:bg-green-700 transition-colors"
|
||||||
|
whileHover={{ scale: 1.1 }}
|
||||||
|
whileTap={{ scale: 0.9 }}
|
||||||
|
>
|
||||||
|
<PlayIcon className="w-4 h-4 text-white" />
|
||||||
|
</motion.button>
|
||||||
|
<motion.button
|
||||||
|
className="p-2 bg-white/20 backdrop-blur-sm rounded-full hover:bg-white/30 transition-colors"
|
||||||
|
whileHover={{ scale: 1.1 }}
|
||||||
|
whileTap={{ scale: 0.9 }}
|
||||||
|
>
|
||||||
|
<HeartIcon className="w-4 h-4 text-white" />
|
||||||
|
</motion.button>
|
||||||
|
{game.completion_status && game.completion_status !== 'UNPLAYED' && (
|
||||||
|
<Tooltip text={statusConfig.label}>
|
||||||
|
<StatusIcon className="w-5 h-5 text-green-400" />
|
||||||
|
</Tooltip>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<h3 className="text-white font-semibold text-sm line-clamp-2 mb-1">{game.title}</h3>
|
||||||
|
<div className="flex items-center gap-2 flex-wrap">
|
||||||
|
{isGrouped ? (
|
||||||
|
<>
|
||||||
|
<span className="px-2 py-1 bg-blue-500/80 text-white rounded text-xs font-medium">
|
||||||
|
{game.platform_count} Platforms
|
||||||
|
</span>
|
||||||
|
{displayPlatforms.slice(0, 2).map((platform) => (
|
||||||
|
<span
|
||||||
|
key={platform}
|
||||||
|
className="px-2 py-1 bg-green-500/80 text-white rounded text-xs font-medium"
|
||||||
|
>
|
||||||
|
{platform}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
{displayPlatforms.length > 2 && (
|
||||||
|
<span className="px-2 py-1 bg-gray-500/80 text-white rounded text-xs font-medium">
|
||||||
|
+{displayPlatforms.length - 2}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
) : game.platform ? (
|
||||||
|
<span className="px-2 py-1 bg-green-500/80 text-white rounded text-xs font-medium">
|
||||||
|
{game.platform}
|
||||||
|
</span>
|
||||||
|
) : null}
|
||||||
|
{game.rating && (
|
||||||
|
<span className="flex items-center gap-1 px-2 py-1 bg-yellow-500/80 text-white rounded text-xs font-medium">
|
||||||
|
<StarIcon className="w-3 h-3" />
|
||||||
|
{game.rating}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Completion status indicator */}
|
||||||
|
{game.completion_status && game.completion_status !== 'UNPLAYED' && (
|
||||||
|
<motion.div
|
||||||
|
className="absolute top-3 right-3 bg-white/90 backdrop-blur-sm px-3 py-1 rounded-full text-xs font-semibold shadow-lg"
|
||||||
|
initial={{ scale: 0 }}
|
||||||
|
animate={{ scale: 1 }}
|
||||||
|
transition={{ type: "spring", stiffness: 500 }}
|
||||||
|
>
|
||||||
|
<div className="flex items-center gap-1">
|
||||||
|
<StatusIcon className="w-3 h-3" />
|
||||||
|
{statusConfig.label}
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
</motion.div>
|
||||||
|
)
|
||||||
|
}
|
||||||
368
src/components/Layout.tsx
Normal file
368
src/components/Layout.tsx
Normal file
@@ -0,0 +1,368 @@
|
|||||||
|
import React, { useState, useEffect, createContext } from 'react'
|
||||||
|
import { useLocation, useNavigate } from 'react-router-dom'
|
||||||
|
import {
|
||||||
|
Search, Plus, Loader2, LayoutGrid, List, Barcode, ZoomIn, ZoomOut, Bell, Menu, X
|
||||||
|
} from 'lucide-react'
|
||||||
|
import { Sidebar } from './Sidebar'
|
||||||
|
import SearchDropdown from './SearchDropdown'
|
||||||
|
import Pagination from './Pagination'
|
||||||
|
import ContentFilters from './ContentFilters'
|
||||||
|
|
||||||
|
interface LayoutProps {
|
||||||
|
children: React.ReactNode
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ViewContextType {
|
||||||
|
viewMode: 'grid' | 'list' | 'cover'
|
||||||
|
gridColumns: number
|
||||||
|
coverSize: number
|
||||||
|
onViewModeChange: (mode: 'grid' | 'list' | 'cover') => void
|
||||||
|
onGridColumnsChange: (columns: number) => void
|
||||||
|
onCoverSizeChange: (size: number) => void
|
||||||
|
PaginationComponent: React.ComponentType<any>
|
||||||
|
FiltersComponent: React.ComponentType<any>
|
||||||
|
}
|
||||||
|
|
||||||
|
// Create View Context
|
||||||
|
export const ViewContext = createContext<ViewContextType | null>(null)
|
||||||
|
|
||||||
|
// Global state for view controls
|
||||||
|
let globalViewMode: 'grid' | 'list' | 'cover' = 'grid'
|
||||||
|
let globalGridColumns: number = 5
|
||||||
|
let globalCoverSize: number = 200
|
||||||
|
|
||||||
|
export default function Layout({ children }: LayoutProps) {
|
||||||
|
const [currentView, setCurrentView] = useState('dashboard')
|
||||||
|
const [viewMode, setViewMode] = useState<'grid' | 'list' | 'cover'>(globalViewMode)
|
||||||
|
const [gridColumns, setGridColumns] = useState<number>(globalGridColumns)
|
||||||
|
const [coverSize, setCoverSize] = useState<number>(globalCoverSize)
|
||||||
|
const [searchInput, setSearchInput] = useState('')
|
||||||
|
const [showSearchDropdown, setShowSearchDropdown] = useState(false)
|
||||||
|
const [isLoading] = useState(false)
|
||||||
|
const [stats] = useState<any>(null)
|
||||||
|
const [isSidebarOpen, setIsSidebarOpen] = useState(false)
|
||||||
|
const [isMobile, setIsMobile] = useState(false)
|
||||||
|
|
||||||
|
const location = useLocation()
|
||||||
|
const navigate = useNavigate()
|
||||||
|
|
||||||
|
// Update global state when local state changes
|
||||||
|
useEffect(() => {
|
||||||
|
globalViewMode = viewMode
|
||||||
|
}, [viewMode])
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
globalGridColumns = gridColumns
|
||||||
|
}, [gridColumns])
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
globalCoverSize = coverSize
|
||||||
|
}, [coverSize])
|
||||||
|
|
||||||
|
// Map current path to view
|
||||||
|
useEffect(() => {
|
||||||
|
const path = location.pathname.replace('/', '') || 'dashboard'
|
||||||
|
setCurrentView(path)
|
||||||
|
}, [location.pathname])
|
||||||
|
|
||||||
|
// Handle mobile detection
|
||||||
|
useEffect(() => {
|
||||||
|
const checkMobile = () => {
|
||||||
|
setIsMobile(window.innerWidth < 768)
|
||||||
|
if (window.innerWidth >= 768) {
|
||||||
|
setIsSidebarOpen(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
checkMobile()
|
||||||
|
window.addEventListener('resize', checkMobile)
|
||||||
|
return () => window.removeEventListener('resize', checkMobile)
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
// Adjust grid columns based on screen size
|
||||||
|
useEffect(() => {
|
||||||
|
const adjustGridColumns = () => {
|
||||||
|
if (window.innerWidth < 640) {
|
||||||
|
setGridColumns(2)
|
||||||
|
} else if (window.innerWidth < 1024) {
|
||||||
|
setGridColumns(3)
|
||||||
|
} else if (window.innerWidth < 1280) {
|
||||||
|
setGridColumns(4)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (viewMode === 'grid') {
|
||||||
|
adjustGridColumns()
|
||||||
|
window.addEventListener('resize', adjustGridColumns)
|
||||||
|
return () => window.removeEventListener('resize', adjustGridColumns)
|
||||||
|
}
|
||||||
|
}, [viewMode])
|
||||||
|
|
||||||
|
// Search handlers
|
||||||
|
const handleSearchFocus = () => {
|
||||||
|
setShowSearchDropdown(true)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleSearchChange = (value: string) => {
|
||||||
|
setSearchInput(value)
|
||||||
|
if (!showSearchDropdown && value.trim()) {
|
||||||
|
setShowSearchDropdown(true)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleSearchKeyDown = (e: React.KeyboardEvent) => {
|
||||||
|
if (e.key === 'Enter' && searchInput.trim()) {
|
||||||
|
navigate(`/search?q=${encodeURIComponent(searchInput.trim())}${currentView !== 'dashboard' ? `&type=${currentView}` : ''}`)
|
||||||
|
setShowSearchDropdown(false)
|
||||||
|
}
|
||||||
|
if (e.key === 'Escape') {
|
||||||
|
setShowSearchDropdown(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const closeSearchDropdown = () => {
|
||||||
|
setShowSearchDropdown(false)
|
||||||
|
}
|
||||||
|
|
||||||
|
const getViewTitle = () => {
|
||||||
|
const titles: Record<string, string> = {
|
||||||
|
dashboard: 'Dashboard',
|
||||||
|
movies: 'Filme',
|
||||||
|
tvshows: 'Serien',
|
||||||
|
games: 'Spiele',
|
||||||
|
music: 'Musik',
|
||||||
|
adult: 'Adult Library (18+)',
|
||||||
|
actors: 'Personen',
|
||||||
|
settings: 'Einstellungen'
|
||||||
|
}
|
||||||
|
return titles[currentView] || 'Bibliothek'
|
||||||
|
}
|
||||||
|
|
||||||
|
const isNavControlsVisible = currentView !== 'settings' && currentView !== 'dashboard'
|
||||||
|
const isAdultView = currentView === 'adult'
|
||||||
|
const showCoverControls = isAdultView && viewMode === 'cover'
|
||||||
|
|
||||||
|
// Create view context value
|
||||||
|
const viewContextValue: ViewContextType = {
|
||||||
|
viewMode,
|
||||||
|
gridColumns,
|
||||||
|
coverSize,
|
||||||
|
onViewModeChange: setViewMode,
|
||||||
|
onGridColumnsChange: setGridColumns,
|
||||||
|
onCoverSizeChange: setCoverSize,
|
||||||
|
PaginationComponent: Pagination,
|
||||||
|
FiltersComponent: ContentFilters
|
||||||
|
}
|
||||||
|
|
||||||
|
// Debug logs
|
||||||
|
console.log('Layout.tsx - State:', { viewMode, gridColumns, coverSize, currentView })
|
||||||
|
console.log('Layout.tsx - viewContextValue:', viewContextValue)
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex h-screen overflow-hidden relative">
|
||||||
|
{/* Mobile Menu Overlay */}
|
||||||
|
{isMobile && isSidebarOpen && (
|
||||||
|
<div
|
||||||
|
className="fixed inset-0 bg-black/50 z-40 md:hidden"
|
||||||
|
onClick={() => setIsSidebarOpen(false)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Mobile Menu Button */}
|
||||||
|
{isMobile && (
|
||||||
|
<button
|
||||||
|
onClick={() => setIsSidebarOpen(!isSidebarOpen)}
|
||||||
|
className="fixed top-4 left-4 z-50 p-2 bg-slate-800/90 backdrop-blur-sm rounded-lg border border-white/10 text-white hover:bg-slate-700/90 transition-colors md:hidden"
|
||||||
|
>
|
||||||
|
{isSidebarOpen ? <X size={20} /> : <Menu size={20} />}
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Modern Sidebar */}
|
||||||
|
<div className={`
|
||||||
|
${isMobile ? (isSidebarOpen ? 'translate-x-0' : '-translate-x-full') : 'translate-x-0'}
|
||||||
|
fixed md:relative z-50 md:z-auto transition-transform duration-300 ease-in-out
|
||||||
|
`}>
|
||||||
|
<Sidebar
|
||||||
|
currentView={currentView}
|
||||||
|
onChangeView={(view) => {
|
||||||
|
const path = view === 'dashboard' ? '/' : `/${view}`
|
||||||
|
navigate(path)
|
||||||
|
if (isMobile) setIsSidebarOpen(false)
|
||||||
|
}}
|
||||||
|
stats={stats}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Main Content Area - Card-like container */}
|
||||||
|
<main className="flex-1 my-2 md:my-4 mr-2 md:mr-4 bg-dark-surface/60 backdrop-blur-2xl rounded-[16px] md:rounded-[32px] border border-white/5 flex flex-col overflow-hidden shadow-2xl relative">
|
||||||
|
|
||||||
|
{/* Modern Floating Header */}
|
||||||
|
<div className={`px-4 md:px-8 py-3 md:py-5 flex items-center justify-between shrink-0 z-20 flex-wrap gap-4 ${isMobile ? 'bg-slate-900/95 backdrop-blur-sm border-b border-white/10' : ''}`}>
|
||||||
|
{/* Left: Title & Add */}
|
||||||
|
<div className="flex items-center gap-3 md:gap-6 min-w-0">
|
||||||
|
<h2 className="text-lg md:text-2xl font-bold text-white tracking-tight capitalize truncate">
|
||||||
|
{getViewTitle()}
|
||||||
|
</h2>
|
||||||
|
{isNavControlsVisible && !isMobile && (
|
||||||
|
<button
|
||||||
|
className="flex items-center justify-center w-8 h-8 md:w-10 md:h-10 rounded-full bg-brand-500 hover:bg-brand-400 text-white transition-all hover:scale-105 shadow-lg shadow-brand-500/25 shrink-0"
|
||||||
|
title="Add Media"
|
||||||
|
>
|
||||||
|
<Plus size={16} strokeWidth={3} />
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Center: Spotlight Search (Hidden on Settings or Detail) */}
|
||||||
|
{isNavControlsVisible && (
|
||||||
|
<div className={`flex-1 ${isMobile ? 'order-3 w-full' : 'max-w-xl mx-8'} relative group`}>
|
||||||
|
<div className="absolute inset-0 bg-brand-500/10 rounded-full blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
|
||||||
|
<div className="relative flex items-center bg-slate-800/50 border border-white/10 hover:border-white/20 hover:bg-slate-800 rounded-full px-3 md:px-4 h-10 md:h-12 transition-all">
|
||||||
|
<Search size={16} className="text-slate-400 mr-2 md:mr-3" />
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder={isMobile ? "Suche..." : "Suche in deiner Sammlung..."}
|
||||||
|
value={searchInput}
|
||||||
|
onFocus={handleSearchFocus}
|
||||||
|
onChange={(e) => handleSearchChange(e.target.value)}
|
||||||
|
onKeyDown={handleSearchKeyDown}
|
||||||
|
className="flex-1 bg-transparent text-white placeholder-slate-500 focus:outline-none text-sm"
|
||||||
|
/>
|
||||||
|
{isLoading && <Loader2 size={14} className="animate-spin text-slate-400 mr-2"/>}
|
||||||
|
{!isMobile && <div className="h-5 w-px bg-white/10 mx-3"></div>}
|
||||||
|
{!isMobile && (
|
||||||
|
<button className="text-slate-400 hover:text-white transition-colors">
|
||||||
|
<Barcode size={18} />
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Search Dropdown */}
|
||||||
|
{showSearchDropdown && (
|
||||||
|
<SearchDropdown
|
||||||
|
query={searchInput}
|
||||||
|
onClose={closeSearchDropdown}
|
||||||
|
currentSection={currentView === 'dashboard' ? undefined : currentView}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{!isNavControlsVisible && <div className="flex-1"></div>}
|
||||||
|
|
||||||
|
{/* Right: Controls */}
|
||||||
|
<div className="flex items-center gap-2 md:gap-4">
|
||||||
|
{/* Notifications (Mock) - Hidden on mobile */}
|
||||||
|
{!isMobile && (
|
||||||
|
<button className="relative p-2 text-slate-400 hover:text-white transition-colors">
|
||||||
|
<Bell size={20} />
|
||||||
|
<span className="absolute top-2 right-2 w-2 h-2 bg-red-500 rounded-full"></span>
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{!isMobile && <div className="h-6 w-px bg-white/10"></div>}
|
||||||
|
|
||||||
|
{/* View Toggles (Hidden on Settings or Detail) */}
|
||||||
|
{viewMode === 'grid' && isNavControlsVisible && (
|
||||||
|
<div className="flex items-center gap-1 md:gap-2 bg-slate-800/50 border border-white/5 rounded-full px-2 md:px-3 py-1.5">
|
||||||
|
<ZoomOut size={12} className="text-slate-400" />
|
||||||
|
<input
|
||||||
|
type="range"
|
||||||
|
min="2"
|
||||||
|
max="8"
|
||||||
|
step="1"
|
||||||
|
value={gridColumns}
|
||||||
|
onChange={(e) => {
|
||||||
|
const newColumns = parseInt(e.target.value)
|
||||||
|
console.log('Layout.tsx - Grid slider changed:', newColumns)
|
||||||
|
setGridColumns(newColumns)
|
||||||
|
}}
|
||||||
|
className="w-12 md:w-16 h-1 bg-slate-600 rounded-lg appearance-none cursor-pointer accent-brand-500"
|
||||||
|
/>
|
||||||
|
<ZoomIn size={12} className="text-slate-400" />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Cover Size Controls for Adult View */}
|
||||||
|
{showCoverControls && (
|
||||||
|
<div className="flex items-center gap-1 md:gap-2 bg-slate-800/50 border border-white/5 rounded-full px-2 md:px-3 py-1.5">
|
||||||
|
<ZoomOut size={12} className="text-slate-400" />
|
||||||
|
<input
|
||||||
|
type="range"
|
||||||
|
min="100"
|
||||||
|
max="400"
|
||||||
|
step="25"
|
||||||
|
value={coverSize}
|
||||||
|
onChange={(e) => {
|
||||||
|
const newSize = parseInt(e.target.value)
|
||||||
|
console.log('Layout.tsx - Cover slider changed:', newSize)
|
||||||
|
setCoverSize(newSize)
|
||||||
|
}}
|
||||||
|
className="w-16 md:w-20 h-1 bg-slate-600 rounded-lg appearance-none cursor-pointer accent-brand-500"
|
||||||
|
/>
|
||||||
|
<ZoomIn size={12} className="text-slate-400" />
|
||||||
|
{!isMobile && <span className="text-xs text-slate-400 ml-1">{coverSize}px</span>}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{isNavControlsVisible && (
|
||||||
|
<div className="flex bg-slate-800/50 p-0.5 md:p-1 rounded-full border border-white/5">
|
||||||
|
<button
|
||||||
|
onClick={() => {
|
||||||
|
console.log('Layout.tsx - View mode changed to: list')
|
||||||
|
setViewMode('list')
|
||||||
|
}}
|
||||||
|
className={`p-1.5 md:p-2 rounded-full transition-all ${viewMode === 'list' ? 'bg-white text-brand-900 shadow' : 'text-slate-400 hover:text-white'}`}
|
||||||
|
>
|
||||||
|
<List size={14} />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => {
|
||||||
|
console.log('Layout.tsx - View mode changed to: grid')
|
||||||
|
setViewMode('grid')
|
||||||
|
}}
|
||||||
|
className={`p-1.5 md:p-2 rounded-full transition-all ${viewMode === 'grid' ? 'bg-white text-brand-900 shadow' : 'text-slate-400 hover:text-white'}`}
|
||||||
|
>
|
||||||
|
<LayoutGrid size={14} />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => {
|
||||||
|
console.log('Layout.tsx - View mode changed to: cover')
|
||||||
|
setViewMode('cover')
|
||||||
|
}}
|
||||||
|
className={`p-1.5 md:p-2 rounded-full transition-all ${viewMode === 'cover' ? 'bg-white text-brand-900 shadow' : 'text-slate-400 hover:text-white'}`}
|
||||||
|
title="Cover View"
|
||||||
|
>
|
||||||
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||||
|
<rect x="3" y="3" width="18" height="18" rx="2" />
|
||||||
|
<path d="M3 9h18" />
|
||||||
|
<path d="M9 21V9" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Page Content */}
|
||||||
|
<div className="flex-1 overflow-hidden">
|
||||||
|
<div className="h-full overflow-y-auto custom-scrollbar">
|
||||||
|
<div className="">
|
||||||
|
{/* Wrap children in ViewContext Provider */}
|
||||||
|
<ViewContext.Provider value={viewContextValue}>
|
||||||
|
{children}
|
||||||
|
</ViewContext.Provider>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Export global state accessors for child components
|
||||||
|
export const getGlobalViewMode = () => globalViewMode
|
||||||
|
export const getGlobalGridColumns = () => globalGridColumns
|
||||||
|
export const getGlobalCoverSize = () => globalCoverSize
|
||||||
146
src/components/LoadingSkeleton.tsx
Normal file
146
src/components/LoadingSkeleton.tsx
Normal file
@@ -0,0 +1,146 @@
|
|||||||
|
import React from 'react'
|
||||||
|
import { motion } from 'framer-motion'
|
||||||
|
|
||||||
|
interface LoadingSkeletonProps {
|
||||||
|
className?: string
|
||||||
|
variant?: 'card' | 'list' | 'text' | 'avatar' | 'button'
|
||||||
|
width?: string | number
|
||||||
|
height?: string | number
|
||||||
|
lines?: number
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function LoadingSkeleton({
|
||||||
|
className = '',
|
||||||
|
variant = 'text',
|
||||||
|
width,
|
||||||
|
height,
|
||||||
|
lines = 1
|
||||||
|
}: LoadingSkeletonProps) {
|
||||||
|
const baseClasses = 'skeleton rounded-lg'
|
||||||
|
|
||||||
|
const variantClasses = {
|
||||||
|
card: 'h-64 w-full',
|
||||||
|
list: 'h-20 w-full',
|
||||||
|
text: 'h-4 w-full',
|
||||||
|
avatar: 'h-12 w-12 rounded-full',
|
||||||
|
button: 'h-10 w-24'
|
||||||
|
}
|
||||||
|
|
||||||
|
const style = {
|
||||||
|
width: width || undefined,
|
||||||
|
height: height || undefined
|
||||||
|
}
|
||||||
|
|
||||||
|
if (variant === 'text' && lines > 1) {
|
||||||
|
return (
|
||||||
|
<div className={`space-y-2 ${className}`}>
|
||||||
|
{Array.from({ length: lines }).map((_, index) => (
|
||||||
|
<motion.div
|
||||||
|
key={index}
|
||||||
|
className={`${baseClasses} ${variantClasses[variant]}`}
|
||||||
|
style={{
|
||||||
|
...style,
|
||||||
|
width: index === lines - 1 ? '70%' : '100%'
|
||||||
|
}}
|
||||||
|
initial={{ opacity: 0 }}
|
||||||
|
animate={{ opacity: 1 }}
|
||||||
|
transition={{ delay: index * 0.1 }}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<motion.div
|
||||||
|
className={`${baseClasses} ${variantClasses[variant]} ${className}`}
|
||||||
|
style={style}
|
||||||
|
initial={{ opacity: 0 }}
|
||||||
|
animate={{ opacity: 1 }}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Card skeleton component
|
||||||
|
export function CardSkeleton() {
|
||||||
|
return (
|
||||||
|
<motion.div
|
||||||
|
className="card p-6 space-y-4"
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
>
|
||||||
|
<div className="flex items-center space-x-4">
|
||||||
|
<LoadingSkeleton variant="avatar" />
|
||||||
|
<div className="flex-1 space-y-2">
|
||||||
|
<LoadingSkeleton variant="text" width="60%" />
|
||||||
|
<LoadingSkeleton variant="text" width="40%" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<LoadingSkeleton variant="text" lines={3} />
|
||||||
|
</motion.div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Movie card skeleton
|
||||||
|
export function MovieCardSkeleton() {
|
||||||
|
return (
|
||||||
|
<motion.div
|
||||||
|
className="card card-hover overflow-hidden"
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
>
|
||||||
|
<LoadingSkeleton variant="card" height="320px" />
|
||||||
|
<div className="p-4 space-y-3">
|
||||||
|
<LoadingSkeleton variant="text" width="80%" />
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<LoadingSkeleton variant="text" width="60px" />
|
||||||
|
<LoadingSkeleton variant="text" width="80px" />
|
||||||
|
</div>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<LoadingSkeleton variant="button" width="60px" />
|
||||||
|
<LoadingSkeleton variant="button" width="60px" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Stats card skeleton
|
||||||
|
export function StatsCardSkeleton() {
|
||||||
|
return (
|
||||||
|
<motion.div
|
||||||
|
className="card p-6"
|
||||||
|
initial={{ opacity: 0, scale: 0.9 }}
|
||||||
|
animate={{ opacity: 1, scale: 1 }}
|
||||||
|
transition={{ type: "spring", stiffness: 200 }}
|
||||||
|
>
|
||||||
|
<div className="flex items-center space-x-4">
|
||||||
|
<LoadingSkeleton variant="avatar" width="48px" height="48px" />
|
||||||
|
<div className="flex-1">
|
||||||
|
<LoadingSkeleton variant="text" width="40%" />
|
||||||
|
<LoadingSkeleton variant="text" width="30%" height="24px" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
// List item skeleton
|
||||||
|
export function ListItemSkeleton() {
|
||||||
|
return (
|
||||||
|
<motion.div
|
||||||
|
className="flex items-center space-x-4 p-4 rounded-xl hover:bg-gray-50"
|
||||||
|
initial={{ opacity: 0, x: -20 }}
|
||||||
|
animate={{ opacity: 1, x: 0 }}
|
||||||
|
>
|
||||||
|
<LoadingSkeleton variant="avatar" width="40px" height="60px" />
|
||||||
|
<div className="flex-1 space-y-2">
|
||||||
|
<LoadingSkeleton variant="text" width="70%" />
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<LoadingSkeleton variant="button" width="50px" />
|
||||||
|
<LoadingSkeleton variant="button" width="60px" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
)
|
||||||
|
}
|
||||||
500
src/components/MediaCard.tsx
Normal file
500
src/components/MediaCard.tsx
Normal file
@@ -0,0 +1,500 @@
|
|||||||
|
import { Link } from 'react-router-dom'
|
||||||
|
import { motion } from 'framer-motion'
|
||||||
|
import {
|
||||||
|
FilmIcon,
|
||||||
|
TvIcon,
|
||||||
|
MusicalNoteIcon,
|
||||||
|
ComputerDesktopIcon as GamepadIcon,
|
||||||
|
VideoCameraIcon,
|
||||||
|
StarIcon,
|
||||||
|
ClockIcon,
|
||||||
|
PlayIcon,
|
||||||
|
HeartIcon,
|
||||||
|
UserGroupIcon
|
||||||
|
} from '@heroicons/react/24/outline'
|
||||||
|
import { clsx } from 'clsx'
|
||||||
|
|
||||||
|
export type MediaType = 'movie' | 'tvshow' | 'game' | 'music' | 'adult' | 'actors'
|
||||||
|
|
||||||
|
export interface MediaItem {
|
||||||
|
id: number
|
||||||
|
title: string
|
||||||
|
poster_url?: string
|
||||||
|
backdrop_url?: string
|
||||||
|
rating?: number
|
||||||
|
release_date?: string
|
||||||
|
runtime_minutes?: number
|
||||||
|
source_name?: string
|
||||||
|
watched?: boolean
|
||||||
|
genres?: string[]
|
||||||
|
overview?: string
|
||||||
|
director?: string
|
||||||
|
writer?: string
|
||||||
|
cast?: string
|
||||||
|
year?: number
|
||||||
|
episodes?: number
|
||||||
|
seasons?: number
|
||||||
|
platform?: string
|
||||||
|
developer?: string
|
||||||
|
album?: string
|
||||||
|
artist?: string
|
||||||
|
studio?: string
|
||||||
|
metadata?: any
|
||||||
|
// Actor-specific fields
|
||||||
|
name?: string
|
||||||
|
thumbnail_path?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface MediaCardProps {
|
||||||
|
media: MediaItem
|
||||||
|
mediaType: MediaType
|
||||||
|
viewMode: 'grid' | 'list' | 'covers'
|
||||||
|
coverSize?: 'small' | 'medium' | 'large' | 'xlarge'
|
||||||
|
className?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
const mediaTypeConfig = {
|
||||||
|
movie: {
|
||||||
|
icon: FilmIcon,
|
||||||
|
color: 'from-blue-500 to-blue-600',
|
||||||
|
hoverColor: 'hover:bg-blue-50',
|
||||||
|
route: '/movies'
|
||||||
|
},
|
||||||
|
tvshow: {
|
||||||
|
icon: TvIcon,
|
||||||
|
color: 'from-purple-500 to-purple-600',
|
||||||
|
hoverColor: 'hover:bg-purple-50',
|
||||||
|
route: '/tvshows'
|
||||||
|
},
|
||||||
|
game: {
|
||||||
|
icon: GamepadIcon,
|
||||||
|
color: 'from-green-500 to-green-600',
|
||||||
|
hoverColor: 'hover:bg-green-50',
|
||||||
|
route: '/games'
|
||||||
|
},
|
||||||
|
music: {
|
||||||
|
icon: MusicalNoteIcon,
|
||||||
|
color: 'from-pink-500 to-pink-600',
|
||||||
|
hoverColor: 'hover:bg-pink-50',
|
||||||
|
route: '/music'
|
||||||
|
},
|
||||||
|
adult: {
|
||||||
|
icon: VideoCameraIcon,
|
||||||
|
color: 'from-red-500 to-red-600',
|
||||||
|
hoverColor: 'hover:bg-red-50',
|
||||||
|
route: '/adult'
|
||||||
|
},
|
||||||
|
actors: {
|
||||||
|
icon: UserGroupIcon,
|
||||||
|
color: 'from-indigo-500 to-indigo-600',
|
||||||
|
hoverColor: 'hover:bg-indigo-50',
|
||||||
|
route: '/actors'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function MediaCard({
|
||||||
|
media,
|
||||||
|
mediaType,
|
||||||
|
viewMode,
|
||||||
|
coverSize = 'medium',
|
||||||
|
className = ''
|
||||||
|
}: MediaCardProps) {
|
||||||
|
const config = mediaTypeConfig[mediaType]
|
||||||
|
const Icon = config.icon
|
||||||
|
|
||||||
|
// Cover size mappings
|
||||||
|
const listCoverSizeClasses = {
|
||||||
|
small: { width: '40px', height: '60px' },
|
||||||
|
medium: { width: '64px', height: '96px' },
|
||||||
|
large: { width: '80px', height: '120px' },
|
||||||
|
xlarge: { width: '96px', height: '144px' }
|
||||||
|
}
|
||||||
|
|
||||||
|
const coversHeightClasses = {
|
||||||
|
small: 'h-[28rem]',
|
||||||
|
medium: 'h-[28rem]',
|
||||||
|
large: 'h-[28rem]',
|
||||||
|
xlarge: 'h-[28rem]'
|
||||||
|
}
|
||||||
|
|
||||||
|
// Handle image URL
|
||||||
|
const getImageUrl = (url?: string | any) => {
|
||||||
|
if (!url || typeof url !== 'string') return null
|
||||||
|
|
||||||
|
if (url.startsWith('http')) return url
|
||||||
|
|
||||||
|
if (url.startsWith('/images/')) {
|
||||||
|
const apiUrl = (import.meta as any).env?.VITE_API_URL?.replace('/api', '') || ''
|
||||||
|
return `${apiUrl}${url}`
|
||||||
|
}
|
||||||
|
|
||||||
|
const apiUrl = (import.meta as any).env?.VITE_API_URL?.replace('/api', '') || ''
|
||||||
|
return `${apiUrl}/images/${url}`
|
||||||
|
}
|
||||||
|
|
||||||
|
// For actors, use thumbnail_path, otherwise use poster_url
|
||||||
|
const posterUrl = getImageUrl(
|
||||||
|
mediaType === 'actors'
|
||||||
|
? (media.thumbnail_path || media.poster_url)
|
||||||
|
: media.poster_url
|
||||||
|
)
|
||||||
|
|
||||||
|
const formatRuntime = (minutes?: number) => {
|
||||||
|
if (!minutes) return null
|
||||||
|
const hours = Math.floor(minutes / 60)
|
||||||
|
const mins = minutes % 60
|
||||||
|
return `${hours}h ${mins}m`
|
||||||
|
}
|
||||||
|
|
||||||
|
const formatYear = (date?: string | any) => {
|
||||||
|
if (!date || typeof date !== 'string') return null
|
||||||
|
const parsedDate = new Date(date)
|
||||||
|
return isNaN(parsedDate.getTime()) ? null : parsedDate.getFullYear()
|
||||||
|
}
|
||||||
|
|
||||||
|
// Get display title (use name for actors, title for others)
|
||||||
|
const displayTitle = mediaType === 'actors'
|
||||||
|
? (typeof media.name === 'string' ? media.name : (typeof media.title === 'string' ? media.title : 'Unknown'))
|
||||||
|
: (typeof media.title === 'string' ? media.title : 'Unknown')
|
||||||
|
|
||||||
|
// List view
|
||||||
|
if (viewMode === 'list') {
|
||||||
|
return (
|
||||||
|
<motion.li
|
||||||
|
className={clsx(
|
||||||
|
"px-4 py-3 hover:bg-gray-50 transition-all duration-200 rounded-xl group",
|
||||||
|
config.hoverColor,
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
initial={{ opacity: 0, x: -20 }}
|
||||||
|
animate={{ opacity: 1, x: 0 }}
|
||||||
|
whileHover={{ x: 5 }}
|
||||||
|
>
|
||||||
|
<div className="flex justify-between items-center">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<motion.div
|
||||||
|
className="relative"
|
||||||
|
whileHover={{ scale: 1.05 }}
|
||||||
|
whileTap={{ scale: 0.95 }}
|
||||||
|
>
|
||||||
|
{posterUrl ? (
|
||||||
|
<img
|
||||||
|
className="rounded-xl shadow-md group-hover:shadow-lg transition-shadow duration-300"
|
||||||
|
style={listCoverSizeClasses[coverSize]}
|
||||||
|
src={posterUrl}
|
||||||
|
alt={displayTitle}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<div className="bg-gradient-to-br from-gray-100 to-gray-200 rounded-xl mr-3 flex items-center justify-center shadow-md" style={listCoverSizeClasses[coverSize]}>
|
||||||
|
<Icon className="text-gray-400" width={32} height={32} />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{media.watched && (
|
||||||
|
<motion.div
|
||||||
|
className="absolute -top-1 -right-1 w-4 h-4 bg-green-500 rounded-full border-2 border-white shadow-lg"
|
||||||
|
initial={{ scale: 0 }}
|
||||||
|
animate={{ scale: 1 }}
|
||||||
|
transition={{ type: "spring", stiffness: 500 }}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</motion.div>
|
||||||
|
<div className="flex-1 ml-4">
|
||||||
|
<h3 className="text-sm font-semibold mb-1">
|
||||||
|
<Link
|
||||||
|
to={`${config.route}/${media.id}`}
|
||||||
|
className="no-underline text-gray-900 hover:text-blue-600 transition-colors duration-200"
|
||||||
|
>
|
||||||
|
{displayTitle}
|
||||||
|
</Link>
|
||||||
|
</h3>
|
||||||
|
<div className="flex items-center gap-3 text-sm text-gray-600">
|
||||||
|
{media.release_date && (
|
||||||
|
<span className="px-2 py-1 bg-gray-100 rounded-full text-xs">{formatYear(media.release_date)}</span>
|
||||||
|
)}
|
||||||
|
{media.rating && (
|
||||||
|
<span className="flex items-center gap-1 px-2 py-1 bg-yellow-100 text-yellow-800 rounded-full text-xs font-medium">
|
||||||
|
<StarIcon className="w-3 h-3" />
|
||||||
|
{media.rating}/10
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
{media.source_name && typeof media.source_name === 'string' && (
|
||||||
|
<span className="text-xs">{media.source_name}</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<motion.div
|
||||||
|
className="opacity-0 group-hover:opacity-100 transition-opacity duration-200"
|
||||||
|
initial={{ scale: 0.8 }}
|
||||||
|
whileHover={{ scale: 1 }}
|
||||||
|
>
|
||||||
|
<PlayIcon className="w-5 h-5 text-blue-500" />
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
</motion.li>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Covers view
|
||||||
|
if (viewMode === 'covers') {
|
||||||
|
return (
|
||||||
|
<motion.div
|
||||||
|
className={clsx(
|
||||||
|
"relative group cursor-pointer overflow-hidden",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
whileHover={{ y: -5 }}
|
||||||
|
>
|
||||||
|
<Link to={`${config.route}/${media.id}`}>
|
||||||
|
<motion.div
|
||||||
|
className={clsx(
|
||||||
|
`relative overflow-hidden rounded-2xl shadow-xl group-hover:shadow-2xl transition-all duration-300 ${coversHeightClasses[coverSize]}`
|
||||||
|
)}
|
||||||
|
whileHover={{ scale: 1.02 }}
|
||||||
|
>
|
||||||
|
{posterUrl ? (
|
||||||
|
<motion.img
|
||||||
|
src={posterUrl}
|
||||||
|
alt={displayTitle}
|
||||||
|
className={`w-full aspect-[2/3] object-cover`}
|
||||||
|
whileHover={{ scale: 1.1 }}
|
||||||
|
transition={{ duration: 0.3 }}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<div className={`w-full aspect-[2/3] bg-gradient-to-br from-gray-100 to-gray-200 rounded-2xl flex items-center justify-center`}>
|
||||||
|
<Icon className="text-gray-400 w-16 h-16" />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Overlay */}
|
||||||
|
<motion.div
|
||||||
|
className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/50 to-transparent"
|
||||||
|
initial={{ opacity: 0 }}
|
||||||
|
whileHover={{ opacity: 1 }}
|
||||||
|
transition={{ duration: 0.3 }}
|
||||||
|
>
|
||||||
|
<div className="absolute bottom-0 left-0 right-0 p-4">
|
||||||
|
<motion.h3
|
||||||
|
className="text-white font-bold text-lg mb-2 line-clamp-2"
|
||||||
|
initial={{ y: 20, opacity: 0 }}
|
||||||
|
whileHover={{ y: 0, opacity: 1 }}
|
||||||
|
transition={{ delay: 0.1 }}
|
||||||
|
>
|
||||||
|
{displayTitle}
|
||||||
|
</motion.h3>
|
||||||
|
<div className="flex items-center gap-2 text-sm text-gray-300">
|
||||||
|
{media.release_date && (
|
||||||
|
<span>{formatYear(media.release_date)}</span>
|
||||||
|
)}
|
||||||
|
{media.rating && (
|
||||||
|
<span className="flex items-center gap-1 px-2 py-1 bg-yellow-500/20 text-yellow-300 rounded-full text-xs font-medium">
|
||||||
|
<StarIcon className="w-3 h-3" />
|
||||||
|
{media.rating}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<motion.div
|
||||||
|
className="flex items-center gap-2 mt-3"
|
||||||
|
initial={{ y: 20, opacity: 0 }}
|
||||||
|
whileHover={{ y: 0, opacity: 1 }}
|
||||||
|
transition={{ delay: 0.2 }}
|
||||||
|
>
|
||||||
|
<motion.button
|
||||||
|
className="p-2 bg-blue-500 rounded-full text-white hover:bg-blue-600 transition-colors"
|
||||||
|
whileHover={{ scale: 1.1 }}
|
||||||
|
whileTap={{ scale: 0.9 }}
|
||||||
|
>
|
||||||
|
<PlayIcon className="w-4 h-4" />
|
||||||
|
</motion.button>
|
||||||
|
<motion.button
|
||||||
|
className="p-2 bg-white/20 backdrop-blur-sm rounded-full text-white hover:bg-white/30 transition-colors"
|
||||||
|
whileHover={{ scale: 1.1 }}
|
||||||
|
whileTap={{ scale: 0.9 }}
|
||||||
|
>
|
||||||
|
<HeartIcon className="w-4 h-4" />
|
||||||
|
</motion.button>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
{/* Watched indicator */}
|
||||||
|
{media.watched && (
|
||||||
|
<motion.div
|
||||||
|
className="absolute top-3 right-3 bg-green-500 text-white px-3 py-1 rounded-full text-xs font-semibold shadow-lg"
|
||||||
|
initial={{ scale: 0 }}
|
||||||
|
animate={{ scale: 1 }}
|
||||||
|
transition={{ type: "spring", stiffness: 500 }}
|
||||||
|
>
|
||||||
|
Watched
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
</motion.div>
|
||||||
|
</Link>
|
||||||
|
</motion.div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Grid view (default)
|
||||||
|
return (
|
||||||
|
<motion.div
|
||||||
|
className={clsx(
|
||||||
|
"card card-hover bg-white/90 backdrop-blur-sm rounded-2xl overflow-hidden",
|
||||||
|
"transform transition-all duration-300",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
whileHover={{ y: -8, boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.25)" }}
|
||||||
|
>
|
||||||
|
<Link to={`${config.route}/${media.id}`}>
|
||||||
|
<div className="relative overflow-hidden">
|
||||||
|
<motion.div
|
||||||
|
className="relative overflow-hidden"
|
||||||
|
whileHover={{ scale: 1.05 }}
|
||||||
|
transition={{ duration: 0.3 }}
|
||||||
|
>
|
||||||
|
{posterUrl ? (
|
||||||
|
<img
|
||||||
|
src={posterUrl}
|
||||||
|
alt={displayTitle}
|
||||||
|
className={`w-full aspect-[2/3] object-cover`}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<div className={`w-full aspect-[2/3] bg-gradient-to-br from-gray-100 to-gray-200 rounded-xl flex items-center justify-center`}>
|
||||||
|
<Icon className="text-gray-400 w-12 h-12" />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
{/* Watched indicator */}
|
||||||
|
{media.watched && (
|
||||||
|
<motion.div
|
||||||
|
className="absolute top-3 right-3 bg-green-500 text-white px-3 py-1 rounded-full text-xs font-semibold shadow-lg"
|
||||||
|
initial={{ scale: 0 }}
|
||||||
|
animate={{ scale: 1 }}
|
||||||
|
transition={{ type: "spring", stiffness: 500 }}
|
||||||
|
>
|
||||||
|
Watched
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Hover overlay */}
|
||||||
|
<motion.div
|
||||||
|
className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4"
|
||||||
|
whileHover={{ opacity: 1 }}
|
||||||
|
>
|
||||||
|
<motion.div
|
||||||
|
className="flex gap-2"
|
||||||
|
initial={{ y: 20, opacity: 0 }}
|
||||||
|
whileHover={{ y: 0, opacity: 1 }}
|
||||||
|
transition={{ delay: 0.1 }}
|
||||||
|
>
|
||||||
|
<motion.button
|
||||||
|
className="p-2 bg-blue-500 rounded-full text-white hover:bg-blue-600 transition-colors shadow-lg"
|
||||||
|
whileHover={{ scale: 1.1 }}
|
||||||
|
whileTap={{ scale: 0.9 }}
|
||||||
|
>
|
||||||
|
<PlayIcon className="w-4 h-4" />
|
||||||
|
</motion.button>
|
||||||
|
<motion.button
|
||||||
|
className="p-2 bg-white/20 backdrop-blur-sm rounded-full text-white hover:bg-white/30 transition-colors shadow-lg"
|
||||||
|
whileHover={{ scale: 1.1 }}
|
||||||
|
whileTap={{ scale: 0.9 }}
|
||||||
|
>
|
||||||
|
<HeartIcon className="w-4 h-4" />
|
||||||
|
</motion.button>
|
||||||
|
</motion.div>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
<div className="p-4">
|
||||||
|
<motion.h3
|
||||||
|
className="font-semibold text-gray-900 mb-2 line-clamp-2 hover:text-blue-600 transition-colors duration-200"
|
||||||
|
whileHover={{ color: "#2563eb" }}
|
||||||
|
>
|
||||||
|
{displayTitle}
|
||||||
|
</motion.h3>
|
||||||
|
|
||||||
|
<div className="flex items-center justify-between text-sm text-gray-600 mb-2">
|
||||||
|
{media.release_date && (
|
||||||
|
<span className="px-2 py-1 bg-gray-100 rounded-full text-xs">{formatYear(media.release_date)}</span>
|
||||||
|
)}
|
||||||
|
<span className="text-xs">{typeof media.source_name === 'string' ? media.source_name : ''}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{media.rating && (
|
||||||
|
<motion.div
|
||||||
|
className="flex items-center gap-1 text-sm mb-2"
|
||||||
|
initial={{ opacity: 0, x: -10 }}
|
||||||
|
animate={{ opacity: 1, x: 0 }}
|
||||||
|
transition={{ delay: 0.2 }}
|
||||||
|
>
|
||||||
|
<StarIcon className="w-4 h-4 text-yellow-500" />
|
||||||
|
<span className="font-medium">{media.rating}/10</span>
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{media.runtime_minutes && (
|
||||||
|
<div className="flex items-center gap-1 text-sm text-gray-600 mb-2">
|
||||||
|
<ClockIcon className="w-4 h-4" />
|
||||||
|
<span>{formatRuntime(media.runtime_minutes)}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Media-specific metadata */}
|
||||||
|
<div className="flex items-center gap-2 text-xs text-gray-500 mb-2">
|
||||||
|
{mediaType === 'tvshow' && media.episodes && (
|
||||||
|
<span>{media.episodes} episodes</span>
|
||||||
|
)}
|
||||||
|
{mediaType === 'tvshow' && media.seasons && (
|
||||||
|
<span>{media.seasons} seasons</span>
|
||||||
|
)}
|
||||||
|
{mediaType === 'game' && media.platform && typeof media.platform === 'string' && (
|
||||||
|
<span>{media.platform}</span>
|
||||||
|
)}
|
||||||
|
{mediaType === 'game' && media.developer && typeof media.developer === 'string' && (
|
||||||
|
<span>{media.developer}</span>
|
||||||
|
)}
|
||||||
|
{mediaType === 'music' && media.artist && typeof media.artist === 'string' && (
|
||||||
|
<span>{media.artist}</span>
|
||||||
|
)}
|
||||||
|
{mediaType === 'music' && media.album && typeof media.album === 'string' && (
|
||||||
|
<span>{media.album}</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{media.genres && Array.isArray(media.genres) && media.genres.length > 0 && (
|
||||||
|
<motion.div
|
||||||
|
className="mt-3 flex flex-wrap gap-1"
|
||||||
|
initial={{ opacity: 0, y: 10 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ delay: 0.3 }}
|
||||||
|
>
|
||||||
|
{media.genres.slice(0, 3).map((genre, index) => (
|
||||||
|
<motion.span
|
||||||
|
key={typeof genre === 'string' ? genre : `genre-${index}`}
|
||||||
|
className={clsx(
|
||||||
|
"px-2 py-1 text-xs rounded-full font-medium",
|
||||||
|
`bg-gradient-to-r ${config.color.replace('500', '100').replace('600', '200')} text-${config.color.split('-')[0]}-800`
|
||||||
|
)}
|
||||||
|
initial={{ opacity: 0, scale: 0.8 }}
|
||||||
|
animate={{ opacity: 1, scale: 1 }}
|
||||||
|
transition={{ delay: 0.4 + index * 0.1 }}
|
||||||
|
whileHover={{ scale: 1.05 }}
|
||||||
|
>
|
||||||
|
{typeof genre === 'string' ? genre : 'Unknown'}
|
||||||
|
</motion.span>
|
||||||
|
))}
|
||||||
|
{media.genres.length > 3 && (
|
||||||
|
<span className="px-2 py-1 bg-gray-100 text-gray-600 text-xs rounded-full">
|
||||||
|
+{media.genres.length - 3}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
</motion.div>
|
||||||
|
)
|
||||||
|
}
|
||||||
584
src/components/MediaDetail.tsx
Normal file
584
src/components/MediaDetail.tsx
Normal file
@@ -0,0 +1,584 @@
|
|||||||
|
import { useState } from 'react'
|
||||||
|
import { useParams, Link } from 'react-router-dom'
|
||||||
|
import { motion, AnimatePresence } from 'framer-motion'
|
||||||
|
import { useQuery } from '@tanstack/react-query'
|
||||||
|
import {
|
||||||
|
FilmIcon,
|
||||||
|
TvIcon,
|
||||||
|
MusicalNoteIcon,
|
||||||
|
VideoCameraIcon,
|
||||||
|
StarIcon,
|
||||||
|
ClockIcon,
|
||||||
|
CalendarIcon,
|
||||||
|
ArrowLeftIcon,
|
||||||
|
PlayIcon,
|
||||||
|
HeartIcon,
|
||||||
|
ShareIcon,
|
||||||
|
PlusIcon,
|
||||||
|
CheckIcon,
|
||||||
|
UserIcon,
|
||||||
|
GlobeAltIcon,
|
||||||
|
CurrencyDollarIcon,
|
||||||
|
FilmIcon as FilmStripIcon,
|
||||||
|
SparklesIcon,
|
||||||
|
MicrophoneIcon,
|
||||||
|
ComputerDesktopIcon
|
||||||
|
} from '@heroicons/react/24/outline'
|
||||||
|
import { Tooltip, PulseDot } from './MicroInteractions'
|
||||||
|
import { MediaItem, MediaType } from './MediaCard'
|
||||||
|
|
||||||
|
const mediaTypeConfig = {
|
||||||
|
movie: {
|
||||||
|
icon: FilmIcon,
|
||||||
|
title: 'Movie',
|
||||||
|
route: '/movies',
|
||||||
|
color: 'from-blue-500 to-blue-600',
|
||||||
|
metadataFields: ['director', 'writer', 'genre', 'cast']
|
||||||
|
},
|
||||||
|
tvshow: {
|
||||||
|
icon: TvIcon,
|
||||||
|
title: 'TV Show',
|
||||||
|
route: '/tvshows',
|
||||||
|
color: 'from-purple-500 to-purple-600',
|
||||||
|
metadataFields: ['creator', 'genre', 'cast', 'seasons', 'episodes']
|
||||||
|
},
|
||||||
|
game: {
|
||||||
|
icon: GamepadIcon,
|
||||||
|
title: 'Game',
|
||||||
|
route: '/games',
|
||||||
|
color: 'from-green-500 to-green-600',
|
||||||
|
metadataFields: ['developer', 'publisher', 'genre', 'platform']
|
||||||
|
},
|
||||||
|
music: {
|
||||||
|
icon: MusicalNoteIcon,
|
||||||
|
title: 'Album',
|
||||||
|
route: '/music',
|
||||||
|
color: 'from-pink-500 to-pink-600',
|
||||||
|
metadataFields: ['artist', 'genre', 'label', 'tracks']
|
||||||
|
},
|
||||||
|
adult: {
|
||||||
|
icon: VideoCameraIcon,
|
||||||
|
title: 'Adult Video',
|
||||||
|
route: '/adult',
|
||||||
|
color: 'from-red-500 to-red-600',
|
||||||
|
metadataFields: ['studio', 'genre', 'cast', 'duration']
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
interface MediaDetailProps {
|
||||||
|
mediaType: MediaType
|
||||||
|
apiEndpoint: (id: number) => Promise<MediaItem>
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function MediaDetail({ mediaType, apiEndpoint }: MediaDetailProps) {
|
||||||
|
const { id } = useParams<{ id: string }>()
|
||||||
|
const mediaId = parseInt(id || '0')
|
||||||
|
const [isWatched, setIsWatched] = useState(false)
|
||||||
|
const [isFavorite, setIsFavorite] = useState(false)
|
||||||
|
const [showShareMenu, setShowShareMenu] = useState(false)
|
||||||
|
|
||||||
|
const config = mediaTypeConfig[mediaType]
|
||||||
|
const Icon = config.icon
|
||||||
|
|
||||||
|
const { data: media, isLoading, error } = useQuery({
|
||||||
|
queryKey: [mediaType, mediaId],
|
||||||
|
queryFn: () => apiEndpoint(mediaId),
|
||||||
|
enabled: !!mediaId
|
||||||
|
})
|
||||||
|
|
||||||
|
// Handle image URL
|
||||||
|
const getImageUrl = (url?: string) => {
|
||||||
|
if (!url) return null
|
||||||
|
|
||||||
|
if (url.startsWith('http')) return url
|
||||||
|
|
||||||
|
if (url.startsWith('/images/')) {
|
||||||
|
const apiUrl = (import.meta as any).env?.VITE_API_URL?.replace('/api', '') || ''
|
||||||
|
return `${apiUrl}${url}`
|
||||||
|
}
|
||||||
|
|
||||||
|
const apiUrl = (import.meta as any).env?.VITE_API_URL?.replace('/api', '') || ''
|
||||||
|
return `${apiUrl}/images/${url}`
|
||||||
|
}
|
||||||
|
|
||||||
|
const posterUrl = getImageUrl(media?.poster_url)
|
||||||
|
const backdropUrl = getImageUrl(media?.backdrop_url)
|
||||||
|
|
||||||
|
if (isLoading) {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen gradient-bg flex items-center justify-center">
|
||||||
|
<motion.div
|
||||||
|
className="text-center"
|
||||||
|
initial={{ opacity: 0, scale: 0.9 }}
|
||||||
|
animate={{ opacity: 1, scale: 1 }}
|
||||||
|
>
|
||||||
|
<div className="relative">
|
||||||
|
<div className="w-16 h-16 border-4 border-blue-200 rounded-full"></div>
|
||||||
|
<motion.div
|
||||||
|
className="absolute top-0 left-0 w-16 h-16 border-4 border-blue-600 rounded-full border-t-transparent"
|
||||||
|
animate={{ rotate: 360 }}
|
||||||
|
transition={{ duration: 1, repeat: Infinity, ease: "linear" }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<motion.p
|
||||||
|
className="mt-6 text-gray-600 text-lg"
|
||||||
|
initial={{ opacity: 0, y: 10 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ delay: 0.2 }}
|
||||||
|
>
|
||||||
|
Loading {config.title.toLowerCase()} details...
|
||||||
|
</motion.p>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (error || !media) {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen gradient-bg flex items-center justify-center">
|
||||||
|
<motion.div
|
||||||
|
className="text-center max-w-md"
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
>
|
||||||
|
<motion.div
|
||||||
|
initial={{ scale: 0 }}
|
||||||
|
animate={{ scale: 1 }}
|
||||||
|
transition={{ type: "spring", stiffness: 200 }}
|
||||||
|
>
|
||||||
|
<Icon className="mx-auto h-20 w-20 text-gray-400 mb-6" />
|
||||||
|
</motion.div>
|
||||||
|
<h2 className="text-3xl font-bold text-gray-900 mb-3">{config.title} Not Found</h2>
|
||||||
|
<p className="text-gray-600 mb-8 text-lg">The {config.title.toLowerCase()} you're looking for doesn't exist or has been removed.</p>
|
||||||
|
<motion.div
|
||||||
|
whileHover={{ scale: 1.05 }}
|
||||||
|
whileTap={{ scale: 0.95 }}
|
||||||
|
>
|
||||||
|
<Link
|
||||||
|
to={config.route}
|
||||||
|
className="btn btn-primary"
|
||||||
|
>
|
||||||
|
<ArrowLeftIcon className="w-5 h-5 mr-2" />
|
||||||
|
Back to {config.title}s
|
||||||
|
</Link>
|
||||||
|
</motion.div>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const formatRuntime = (minutes?: number) => {
|
||||||
|
if (!minutes) return null
|
||||||
|
const hours = Math.floor(minutes / 60)
|
||||||
|
const mins = minutes % 60
|
||||||
|
return `${hours}h ${mins}m`
|
||||||
|
}
|
||||||
|
|
||||||
|
const formatYear = (date?: string) => {
|
||||||
|
if (!date) return null
|
||||||
|
return new Date(date).getFullYear()
|
||||||
|
}
|
||||||
|
|
||||||
|
const renderMetadataField = (field: string, value: any) => {
|
||||||
|
if (!value) return null
|
||||||
|
|
||||||
|
const fieldConfig: Record<string, { label: string; icon: any }> = {
|
||||||
|
director: { label: 'Director', icon: UserIcon },
|
||||||
|
writer: { label: 'Writer', icon: FilmStripIcon },
|
||||||
|
creator: { label: 'Creator', icon: UserIcon },
|
||||||
|
developer: { label: 'Developer', icon: ComputerDesktopIcon },
|
||||||
|
publisher: { label: 'Publisher', icon: FilmStripIcon },
|
||||||
|
artist: { label: 'Artist', icon: MicrophoneIcon },
|
||||||
|
studio: { label: 'Studio', icon: VideoCameraIcon },
|
||||||
|
genre: { label: 'Genre', icon: SparklesIcon },
|
||||||
|
cast: { label: 'Cast', icon: UserIcon },
|
||||||
|
seasons: { label: 'Seasons', icon: TvIcon },
|
||||||
|
episodes: { label: 'Episodes', icon: TvIcon },
|
||||||
|
platform: { label: 'Platform', icon: ComputerDesktopIcon },
|
||||||
|
label: { label: 'Label', icon: MusicalNoteIcon },
|
||||||
|
tracks: { label: 'Tracks', icon: MusicalNoteIcon },
|
||||||
|
duration: { label: 'Duration', icon: ClockIcon }
|
||||||
|
}
|
||||||
|
|
||||||
|
const config = fieldConfig[field]
|
||||||
|
if (!config) return null
|
||||||
|
|
||||||
|
const FieldIcon = config.icon
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<h3 className="text-lg font-semibold text-gray-900 mb-2 flex items-center gap-2">
|
||||||
|
<FieldIcon className="w-5 h-5 text-blue-500" />
|
||||||
|
{config.label}
|
||||||
|
</h3>
|
||||||
|
{field === 'genre' && typeof value === 'string' ? (
|
||||||
|
<div className="flex flex-wrap gap-2">
|
||||||
|
{value.split(',').map((g: string) => (
|
||||||
|
<span key={g} className="px-3 py-1 bg-gradient-to-r from-blue-100 to-blue-200 text-blue-800 rounded-full text-sm font-medium">
|
||||||
|
{g.trim()}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<p className="text-gray-700 text-lg">{value}</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen gradient-bg">
|
||||||
|
{/* Backdrop */}
|
||||||
|
{backdropUrl && (
|
||||||
|
<div className="relative h-96 lg:h-[500px] overflow-hidden">
|
||||||
|
<motion.img
|
||||||
|
src={backdropUrl}
|
||||||
|
alt={media.title}
|
||||||
|
className="w-full h-full object-cover"
|
||||||
|
initial={{ scale: 1.1 }}
|
||||||
|
animate={{ scale: 1 }}
|
||||||
|
transition={{ duration: 1.5 }}
|
||||||
|
/>
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent"></div>
|
||||||
|
|
||||||
|
{/* Back button */}
|
||||||
|
<motion.div
|
||||||
|
className="absolute top-4 left-4 z-10"
|
||||||
|
initial={{ opacity: 0, x: -20 }}
|
||||||
|
animate={{ opacity: 1, x: 0 }}
|
||||||
|
transition={{ delay: 0.3 }}
|
||||||
|
>
|
||||||
|
<Tooltip text={`Back to ${config.title.toLowerCase()}s`}>
|
||||||
|
<Link
|
||||||
|
to={config.route}
|
||||||
|
className="inline-flex items-center px-4 py-2 bg-black/50 backdrop-blur-sm text-white rounded-xl hover:bg-black/70 transition-all duration-200"
|
||||||
|
>
|
||||||
|
<ArrowLeftIcon className="w-5 h-5 mr-2" />
|
||||||
|
Back
|
||||||
|
</Link>
|
||||||
|
</Tooltip>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
{/* Floating action buttons */}
|
||||||
|
<motion.div
|
||||||
|
className="absolute top-4 right-4 z-10 flex gap-2"
|
||||||
|
initial={{ opacity: 0, x: 20 }}
|
||||||
|
animate={{ opacity: 1, x: 0 }}
|
||||||
|
transition={{ delay: 0.4 }}
|
||||||
|
>
|
||||||
|
<Tooltip text="Add to favorites">
|
||||||
|
<motion.button
|
||||||
|
onClick={() => setIsFavorite(!isFavorite)}
|
||||||
|
className="p-3 bg-black/50 backdrop-blur-sm text-white rounded-xl hover:bg-black/70 transition-all duration-200"
|
||||||
|
whileHover={{ scale: 1.1 }}
|
||||||
|
whileTap={{ scale: 0.9 }}
|
||||||
|
>
|
||||||
|
<HeartIcon className={`w-5 h-5 ${isFavorite ? 'fill-red-500 text-red-500' : ''}`} />
|
||||||
|
</motion.button>
|
||||||
|
</Tooltip>
|
||||||
|
|
||||||
|
<Tooltip text="Share">
|
||||||
|
<motion.button
|
||||||
|
onClick={() => setShowShareMenu(!showShareMenu)}
|
||||||
|
className="p-3 bg-black/50 backdrop-blur-sm text-white rounded-xl hover:bg-black/70 transition-all duration-200 relative"
|
||||||
|
whileHover={{ scale: 1.1 }}
|
||||||
|
whileTap={{ scale: 0.9 }}
|
||||||
|
>
|
||||||
|
<ShareIcon className="w-5 h-5" />
|
||||||
|
<AnimatePresence>
|
||||||
|
{showShareMenu && (
|
||||||
|
<motion.div
|
||||||
|
className="absolute right-0 top-full mt-2 bg-white rounded-xl shadow-2xl p-2 min-w-[150px]"
|
||||||
|
initial={{ opacity: 0, scale: 0.9, y: -10 }}
|
||||||
|
animate={{ opacity: 1, scale: 1, y: 0 }}
|
||||||
|
exit={{ opacity: 0, scale: 0.9, y: -10 }}
|
||||||
|
>
|
||||||
|
{['Copy Link', 'Facebook', 'Twitter', 'Email'].map((item) => (
|
||||||
|
<motion.button
|
||||||
|
key={item}
|
||||||
|
className="block w-full text-left px-3 py-2 text-gray-700 hover:bg-gray-100 rounded-lg transition-colors text-sm"
|
||||||
|
whileHover={{ x: 5 }}
|
||||||
|
>
|
||||||
|
{item}
|
||||||
|
</motion.button>
|
||||||
|
))}
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
</AnimatePresence>
|
||||||
|
</motion.button>
|
||||||
|
</Tooltip>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
{/* Media title overlay */}
|
||||||
|
<motion.div
|
||||||
|
className="absolute bottom-6 left-6 right-6"
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ delay: 0.5 }}
|
||||||
|
>
|
||||||
|
<h1 className="text-4xl lg:text-6xl font-bold text-white mb-3 drop-shadow-lg">
|
||||||
|
{media.title}
|
||||||
|
</h1>
|
||||||
|
<div className="flex items-center gap-4 text-white/90">
|
||||||
|
{media.release_date && (
|
||||||
|
<span className="flex items-center gap-1">
|
||||||
|
<CalendarIcon className="w-4 h-4" />
|
||||||
|
{formatYear(media.release_date)}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
{media.runtime_minutes && (
|
||||||
|
<span className="flex items-center gap-1">
|
||||||
|
<ClockIcon className="w-4 h-4" />
|
||||||
|
{formatRuntime(media.runtime_minutes)}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
{media.rating && (
|
||||||
|
<span className="flex items-center gap-1">
|
||||||
|
<StarIcon className="w-4 h-4 text-yellow-400" />
|
||||||
|
{media.rating}/10
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="container mx-auto px-4 py-8">
|
||||||
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||||
|
{/* Poster and basic info */}
|
||||||
|
<motion.div
|
||||||
|
className="lg:col-span-1"
|
||||||
|
initial={{ opacity: 0, x: -20 }}
|
||||||
|
animate={{ opacity: 1, x: 0 }}
|
||||||
|
transition={{ delay: 0.6 }}
|
||||||
|
>
|
||||||
|
<div className="sticky top-4 space-y-6">
|
||||||
|
{/* Poster */}
|
||||||
|
<motion.div
|
||||||
|
className="relative group overflow-hidden"
|
||||||
|
whileHover={{ scale: 1.02 }}
|
||||||
|
>
|
||||||
|
{posterUrl ? (
|
||||||
|
<img
|
||||||
|
src={posterUrl}
|
||||||
|
alt={media.title}
|
||||||
|
className="w-full rounded-2xl shadow-2xl"
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<div className="w-full aspect-[2/3] bg-gradient-to-br from-gray-100 to-gray-200 rounded-2xl flex items-center justify-center">
|
||||||
|
<Icon className="text-gray-400 w-20 h-20" />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Play button overlay */}
|
||||||
|
<motion.div
|
||||||
|
className="absolute inset-0 bg-black/60 rounded-2xl flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300"
|
||||||
|
whileHover={{ opacity: 1 }}
|
||||||
|
>
|
||||||
|
<motion.button
|
||||||
|
className="p-4 bg-blue-600 rounded-full text-white hover:bg-blue-700 transition-colors"
|
||||||
|
whileHover={{ scale: 1.1 }}
|
||||||
|
whileTap={{ scale: 0.9 }}
|
||||||
|
>
|
||||||
|
<PlayIcon className="w-8 h-8" />
|
||||||
|
</motion.button>
|
||||||
|
</motion.div>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
{/* Action buttons */}
|
||||||
|
<div className="flex gap-3">
|
||||||
|
<motion.button
|
||||||
|
onClick={() => setIsWatched(!isWatched)}
|
||||||
|
className={`flex-1 btn flex items-center justify-center gap-2 ${
|
||||||
|
isWatched ? 'bg-green-600 hover:bg-green-700' : 'btn-primary'
|
||||||
|
}`}
|
||||||
|
whileHover={{ scale: 1.02 }}
|
||||||
|
whileTap={{ scale: 0.98 }}
|
||||||
|
>
|
||||||
|
{isWatched ? (
|
||||||
|
<><CheckIcon className="w-5 h-5" /> Watched</>
|
||||||
|
) : (
|
||||||
|
<><PlusIcon className="w-5 h-5" /> Mark as Watched</>
|
||||||
|
)}
|
||||||
|
</motion.button>
|
||||||
|
|
||||||
|
<motion.button
|
||||||
|
onClick={() => setIsFavorite(!isFavorite)}
|
||||||
|
className={`p-3 rounded-xl border-2 transition-all duration-200 ${
|
||||||
|
isFavorite
|
||||||
|
? 'border-red-500 bg-red-50 text-red-500'
|
||||||
|
: 'border-gray-200 hover:border-red-300 hover:bg-red-50'
|
||||||
|
}`}
|
||||||
|
whileHover={{ scale: 1.1 }}
|
||||||
|
whileTap={{ scale: 0.9 }}
|
||||||
|
>
|
||||||
|
<HeartIcon className={`w-5 h-5 ${isFavorite ? 'fill-current' : ''}`} />
|
||||||
|
</motion.button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Media info */}
|
||||||
|
<div className="card p-6 space-y-4">
|
||||||
|
<h3 className="text-lg font-bold text-gray-900 flex items-center gap-2">
|
||||||
|
<SparklesIcon className="w-5 h-5 text-blue-500" />
|
||||||
|
{config.title} Details
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
{media.rating && (
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<span className="text-gray-600">Rating</span>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<StarIcon className="w-5 h-5 text-yellow-500" />
|
||||||
|
<span className="text-lg font-bold">{media.rating}/10</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{media.runtime_minutes && (
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<span className="text-gray-600">Runtime</span>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<ClockIcon className="w-5 h-5 text-gray-400" />
|
||||||
|
<span className="font-medium">{formatRuntime(media.runtime_minutes)}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{media.release_date && (
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<span className="text-gray-600">Release</span>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<ComputerDesktopIcon className="w-5 h-5 text-blue-500" />
|
||||||
|
<span className="font-medium">{formatYear(media.release_date)}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{media.source_name && (
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<span className="text-gray-600">Source</span>
|
||||||
|
<span className="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm font-medium">
|
||||||
|
{media.source_name}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{isWatched && (
|
||||||
|
<div className="flex items-center justify-between pt-2 border-t border-gray-200">
|
||||||
|
<span className="text-gray-600">Status</span>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<PulseDot color="green" />
|
||||||
|
<span className="text-green-600 font-medium">Watched</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
{/* Details */}
|
||||||
|
<motion.div
|
||||||
|
className="lg:col-span-2 space-y-8"
|
||||||
|
initial={{ opacity: 0, x: 20 }}
|
||||||
|
animate={{ opacity: 1, x: 0 }}
|
||||||
|
transition={{ delay: 0.7 }}
|
||||||
|
>
|
||||||
|
{/* Overview */}
|
||||||
|
{media.overview && (
|
||||||
|
<motion.div
|
||||||
|
className="card p-8"
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ delay: 0.8 }}
|
||||||
|
>
|
||||||
|
<h2 className="text-2xl font-bold text-gray-900 mb-4 flex items-center gap-2">
|
||||||
|
<FilmStripIcon className="w-6 h-6 text-blue-500" />
|
||||||
|
Overview
|
||||||
|
</h2>
|
||||||
|
<p className="text-gray-700 leading-relaxed text-lg">{media.overview}</p>
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Metadata */}
|
||||||
|
<motion.div
|
||||||
|
className="card p-8"
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ delay: 0.9 }}
|
||||||
|
>
|
||||||
|
<h2 className="text-2xl font-bold text-gray-900 mb-6 flex items-center gap-2">
|
||||||
|
<UserIcon className="w-6 h-6 text-blue-500" />
|
||||||
|
Details
|
||||||
|
</h2>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
|
{config.metadataFields.map((field) =>
|
||||||
|
renderMetadataField(field, (media as any)[field])
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
{/* Additional metadata */}
|
||||||
|
{media.metadata && typeof media.metadata === 'object' && (
|
||||||
|
<motion.div
|
||||||
|
className="card p-8"
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ delay: 1.0 }}
|
||||||
|
>
|
||||||
|
<h2 className="text-2xl font-bold text-gray-900 mb-6 flex items-center gap-2">
|
||||||
|
<GlobeAltIcon className="w-6 h-6 text-blue-500" />
|
||||||
|
Additional Information
|
||||||
|
</h2>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
|
{media.metadata.budget && (
|
||||||
|
<div className="flex items-center justify-between p-4 bg-gray-50 rounded-xl">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<CurrencyDollarIcon className="w-5 h-5 text-gray-400" />
|
||||||
|
<span className="text-gray-600">Budget</span>
|
||||||
|
</div>
|
||||||
|
<span className="text-gray-900 font-bold text-lg">
|
||||||
|
${media.metadata.budget.toLocaleString()}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{media.metadata.revenue && (
|
||||||
|
<div className="flex items-center justify-between p-4 bg-gray-50 rounded-xl">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<CurrencyDollarIcon className="w-5 h-5 text-green-500" />
|
||||||
|
<span className="text-gray-600">Revenue</span>
|
||||||
|
</div>
|
||||||
|
<span className="text-green-600 font-bold text-lg">
|
||||||
|
${media.metadata.revenue.toLocaleString()}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{media.metadata.original_language && (
|
||||||
|
<div className="flex items-center justify-between p-4 bg-gray-50 rounded-xl">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<GlobeAltIcon className="w-5 h-5 text-gray-400" />
|
||||||
|
<span className="text-gray-600">Language</span>
|
||||||
|
</div>
|
||||||
|
<span className="text-gray-900 font-medium">
|
||||||
|
{media.metadata.original_language.toUpperCase()}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{media.metadata.status && (
|
||||||
|
<div className="flex items-center justify-between p-4 bg-gray-50 rounded-xl">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<FilmIcon className="w-5 h-5 text-gray-400" />
|
||||||
|
<span className="text-gray-600">Status</span>
|
||||||
|
</div>
|
||||||
|
<span className="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm font-medium">
|
||||||
|
{media.metadata.status}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
255
src/components/MicroInteractions.tsx
Normal file
255
src/components/MicroInteractions.tsx
Normal file
@@ -0,0 +1,255 @@
|
|||||||
|
import React from 'react'
|
||||||
|
import { motion, AnimatePresence } from 'framer-motion'
|
||||||
|
|
||||||
|
interface TooltipProps {
|
||||||
|
text: string
|
||||||
|
children: React.ReactNode
|
||||||
|
position?: 'top' | 'bottom' | 'left' | 'right'
|
||||||
|
}
|
||||||
|
|
||||||
|
export function Tooltip({ text, children, position = 'top' }: TooltipProps) {
|
||||||
|
const [isVisible, setIsVisible] = React.useState(false)
|
||||||
|
|
||||||
|
const positionClasses = {
|
||||||
|
top: 'bottom-full left-1/2 transform -translate-x-1/2 mb-2',
|
||||||
|
bottom: 'top-full left-1/2 transform -translate-x-1/2 mt-2',
|
||||||
|
left: 'right-full top-1/2 transform -translate-y-1/2 mr-2',
|
||||||
|
right: 'left-full top-1/2 transform -translate-y-1/2 ml-2'
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="relative inline-block">
|
||||||
|
<div
|
||||||
|
onMouseEnter={() => setIsVisible(true)}
|
||||||
|
onMouseLeave={() => setIsVisible(false)}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
<AnimatePresence>
|
||||||
|
{isVisible && (
|
||||||
|
<motion.div
|
||||||
|
className={`absolute ${positionClasses[position]} z-50 px-2 py-1 text-xs text-white bg-gray-900 rounded-lg shadow-lg whitespace-nowrap`}
|
||||||
|
initial={{ opacity: 0, scale: 0.8 }}
|
||||||
|
animate={{ opacity: 1, scale: 1 }}
|
||||||
|
exit={{ opacity: 0, scale: 0.8 }}
|
||||||
|
transition={{ duration: 0.2 }}
|
||||||
|
>
|
||||||
|
{text}
|
||||||
|
<div className="absolute w-2 h-2 bg-gray-900 transform rotate-45" />
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
</AnimatePresence>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
interface RippleEffectProps {
|
||||||
|
children: React.ReactNode
|
||||||
|
className?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export function RippleEffect({ children, className = '' }: RippleEffectProps) {
|
||||||
|
const [ripples, setRipples] = React.useState<Array<{ id: number; x: number; y: number }>>([])
|
||||||
|
|
||||||
|
const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
|
||||||
|
const rect = e.currentTarget.getBoundingClientRect()
|
||||||
|
const x = e.clientX - rect.left
|
||||||
|
const y = e.clientY - rect.top
|
||||||
|
|
||||||
|
const newRipple = { id: Date.now(), x, y }
|
||||||
|
setRipples(prev => [...prev, newRipple])
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
setRipples(prev => prev.filter(r => r.id !== newRipple.id))
|
||||||
|
}, 600)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={`relative overflow-hidden ${className}`}
|
||||||
|
onClick={handleClick}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
<AnimatePresence>
|
||||||
|
{ripples.map(ripple => (
|
||||||
|
<motion.div
|
||||||
|
key={ripple.id}
|
||||||
|
className="absolute bg-white/30 rounded-full pointer-events-none"
|
||||||
|
style={{
|
||||||
|
left: ripple.x - 10,
|
||||||
|
top: ripple.y - 10,
|
||||||
|
width: 20,
|
||||||
|
height: 20
|
||||||
|
}}
|
||||||
|
initial={{ scale: 0, opacity: 1 }}
|
||||||
|
animate={{ scale: 4, opacity: 0 }}
|
||||||
|
exit={{ opacity: 0 }}
|
||||||
|
transition={{ duration: 0.6 }}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</AnimatePresence>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
interface PulseDotProps {
|
||||||
|
size?: 'sm' | 'md' | 'lg'
|
||||||
|
color?: 'blue' | 'green' | 'red' | 'yellow' | 'purple'
|
||||||
|
}
|
||||||
|
|
||||||
|
export function PulseDot({ size = 'md', color = 'blue' }: PulseDotProps) {
|
||||||
|
const sizeClasses = {
|
||||||
|
sm: 'w-2 h-2',
|
||||||
|
md: 'w-3 h-3',
|
||||||
|
lg: 'w-4 h-4'
|
||||||
|
}
|
||||||
|
|
||||||
|
const colorClasses = {
|
||||||
|
blue: 'bg-blue-500',
|
||||||
|
green: 'bg-green-500',
|
||||||
|
red: 'bg-red-500',
|
||||||
|
yellow: 'bg-yellow-500',
|
||||||
|
purple: 'bg-purple-500'
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="relative">
|
||||||
|
<div className={`${sizeClasses[size]} ${colorClasses[color]} rounded-full`} />
|
||||||
|
<motion.div
|
||||||
|
className={`absolute inset-0 ${colorClasses[color]} rounded-full`}
|
||||||
|
animate={{ scale: [1, 1.5, 1], opacity: [1, 0, 1] }}
|
||||||
|
transition={{ duration: 2, repeat: Infinity }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
interface SlideToggleProps {
|
||||||
|
isOn: boolean
|
||||||
|
onToggle: () => void
|
||||||
|
size?: 'sm' | 'md' | 'lg'
|
||||||
|
}
|
||||||
|
|
||||||
|
export function SlideToggle({ isOn, onToggle, size = 'md' }: SlideToggleProps) {
|
||||||
|
const sizeClasses = {
|
||||||
|
sm: 'w-8 h-4',
|
||||||
|
md: 'w-11 h-6',
|
||||||
|
lg: 'w-14 h-8'
|
||||||
|
}
|
||||||
|
|
||||||
|
const dotSizes = {
|
||||||
|
sm: 'w-3 h-3',
|
||||||
|
md: 'w-4 h-4',
|
||||||
|
lg: 'w-6 h-6'
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<motion.button
|
||||||
|
className={`${sizeClasses[size]} rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 ${
|
||||||
|
isOn ? 'bg-blue-600' : 'bg-gray-300'
|
||||||
|
}`}
|
||||||
|
onClick={onToggle}
|
||||||
|
whileHover={{ scale: 1.05 }}
|
||||||
|
whileTap={{ scale: 0.95 }}
|
||||||
|
>
|
||||||
|
<motion.div
|
||||||
|
className={`${dotSizes[size]} bg-white rounded-full shadow-md`}
|
||||||
|
animate={{ x: isOn ? (size === 'sm' ? 16 : size === 'md' ? 20 : 24) : 2 }}
|
||||||
|
transition={{ type: 'spring', stiffness: 500, damping: 30 }}
|
||||||
|
/>
|
||||||
|
</motion.button>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ProgressRingProps {
|
||||||
|
progress: number
|
||||||
|
size?: number
|
||||||
|
strokeWidth?: number
|
||||||
|
color?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export function ProgressRing({
|
||||||
|
progress,
|
||||||
|
size = 60,
|
||||||
|
strokeWidth = 4,
|
||||||
|
color = '#3B82F6'
|
||||||
|
}: ProgressRingProps) {
|
||||||
|
const radius = (size - strokeWidth) / 2
|
||||||
|
const circumference = radius * 2 * Math.PI
|
||||||
|
const strokeDashoffset = circumference - (progress / 100) * circumference
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="relative inline-flex items-center justify-center">
|
||||||
|
<svg width={size} height={size} className="transform -rotate-90">
|
||||||
|
<circle
|
||||||
|
cx={size / 2}
|
||||||
|
cy={size / 2}
|
||||||
|
r={radius}
|
||||||
|
stroke="#E5E7EB"
|
||||||
|
strokeWidth={strokeWidth}
|
||||||
|
fill="none"
|
||||||
|
/>
|
||||||
|
<motion.circle
|
||||||
|
cx={size / 2}
|
||||||
|
cy={size / 2}
|
||||||
|
r={radius}
|
||||||
|
stroke={color}
|
||||||
|
strokeWidth={strokeWidth}
|
||||||
|
fill="none"
|
||||||
|
strokeDasharray={circumference}
|
||||||
|
initial={{ strokeDashoffset: circumference }}
|
||||||
|
animate={{ strokeDashoffset }}
|
||||||
|
transition={{ duration: 0.5, ease: 'easeInOut' }}
|
||||||
|
strokeLinecap="round"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<div className="absolute inset-0 flex items-center justify-center">
|
||||||
|
<span className="text-sm font-semibold text-gray-700">
|
||||||
|
{Math.round(progress)}%
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
interface FloatingActionButtonProps {
|
||||||
|
onClick: () => void
|
||||||
|
icon: React.ReactNode
|
||||||
|
position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'
|
||||||
|
color?: 'blue' | 'green' | 'red' | 'purple'
|
||||||
|
}
|
||||||
|
|
||||||
|
export function FloatingActionButton({
|
||||||
|
onClick,
|
||||||
|
icon,
|
||||||
|
position = 'bottom-right',
|
||||||
|
color = 'blue'
|
||||||
|
}: FloatingActionButtonProps) {
|
||||||
|
const positionClasses = {
|
||||||
|
'bottom-right': 'bottom-6 right-6',
|
||||||
|
'bottom-left': 'bottom-6 left-6',
|
||||||
|
'top-right': 'top-6 right-6',
|
||||||
|
'top-left': 'top-6 left-6'
|
||||||
|
}
|
||||||
|
|
||||||
|
const colorClasses = {
|
||||||
|
blue: 'bg-blue-600 hover:bg-blue-700',
|
||||||
|
green: 'bg-green-600 hover:bg-green-700',
|
||||||
|
red: 'bg-red-600 hover:bg-red-700',
|
||||||
|
purple: 'bg-purple-600 hover:bg-purple-700'
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<motion.button
|
||||||
|
className={`fixed ${positionClasses[position]} ${colorClasses[color]} text-white rounded-full shadow-lg p-4 z-50`}
|
||||||
|
onClick={onClick}
|
||||||
|
whileHover={{ scale: 1.1 }}
|
||||||
|
whileTap={{ scale: 0.9 }}
|
||||||
|
initial={{ scale: 0 }}
|
||||||
|
animate={{ scale: 1 }}
|
||||||
|
transition={{ type: 'spring', stiffness: 300, damping: 20 }}
|
||||||
|
>
|
||||||
|
{icon}
|
||||||
|
</motion.button>
|
||||||
|
)
|
||||||
|
}
|
||||||
370
src/components/MovieCard.tsx
Normal file
370
src/components/MovieCard.tsx
Normal file
@@ -0,0 +1,370 @@
|
|||||||
|
import React from 'react'
|
||||||
|
import { Link } from 'react-router-dom'
|
||||||
|
import { motion } from 'framer-motion'
|
||||||
|
import { FilmIcon, StarIcon, ClockIcon, PlayIcon, HeartIcon } from '@heroicons/react/24/outline'
|
||||||
|
import { Movie, ViewMode } from '../types'
|
||||||
|
import { clsx } from 'clsx'
|
||||||
|
|
||||||
|
interface MovieCardProps {
|
||||||
|
movie: Movie
|
||||||
|
viewMode: ViewMode
|
||||||
|
coverSize?: 'small' | 'medium' | 'large' | 'xlarge'
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function MovieCard({ movie, viewMode, coverSize = 'medium' }: MovieCardProps) {
|
||||||
|
// Cover size mappings
|
||||||
|
const listCoverSizeClasses = {
|
||||||
|
small: { width: '40px', height: '60px' },
|
||||||
|
medium: { width: '64px', height: '96px' },
|
||||||
|
large: { width: '80px', height: '120px' },
|
||||||
|
xlarge: { width: '96px', height: '144px' }
|
||||||
|
}
|
||||||
|
|
||||||
|
const coversHeightClasses = {
|
||||||
|
small: 'h-[28rem]',
|
||||||
|
medium: 'h-[28rem]',
|
||||||
|
large: 'h-[28rem]',
|
||||||
|
xlarge: 'h-[28rem]'
|
||||||
|
}
|
||||||
|
|
||||||
|
const gridHeightClasses = {
|
||||||
|
small: 'h-48',
|
||||||
|
medium: 'h-72',
|
||||||
|
large: 'h-96',
|
||||||
|
xlarge: 'h-[28rem]'
|
||||||
|
}
|
||||||
|
// Handle image URL - if it's a relative path, prepend with API base URL
|
||||||
|
const getImageUrl = (url: string) => {
|
||||||
|
if (!url) return null
|
||||||
|
|
||||||
|
// If it's already a full URL, return as is
|
||||||
|
if (url.startsWith('http')) return url
|
||||||
|
|
||||||
|
// If it's a relative path starting with /images/, prepend API base
|
||||||
|
if (url.startsWith('/images/')) {
|
||||||
|
const apiUrl = (import.meta as any).env?.VITE_API_URL?.replace('/api', '') || ''
|
||||||
|
return `${apiUrl}${url}`
|
||||||
|
}
|
||||||
|
|
||||||
|
// Otherwise, assume it's relative to API
|
||||||
|
const apiUrl = (import.meta as any).env?.VITE_API_URL?.replace('/api', '') || ''
|
||||||
|
return `${apiUrl}/images/${url}`
|
||||||
|
}
|
||||||
|
|
||||||
|
const posterUrl = getImageUrl(movie.poster_url)
|
||||||
|
const releaseYear = movie.release_date ? new Date(movie.release_date).getFullYear() : null
|
||||||
|
|
||||||
|
const formatRuntime = (minutes?: number) => {
|
||||||
|
if (!minutes) return null
|
||||||
|
const hours = Math.floor(minutes / 60)
|
||||||
|
const mins = minutes % 60
|
||||||
|
return `${hours}h ${mins}m`
|
||||||
|
}
|
||||||
|
|
||||||
|
const formatYear = (date?: string) => {
|
||||||
|
if (!date) return null
|
||||||
|
return new Date(date).getFullYear()
|
||||||
|
}
|
||||||
|
|
||||||
|
if (viewMode === 'list') {
|
||||||
|
return (
|
||||||
|
<motion.li
|
||||||
|
className="px-4 py-3 hover:bg-gray-50 transition-all duration-200 rounded-xl group"
|
||||||
|
initial={{ opacity: 0, x: -20 }}
|
||||||
|
animate={{ opacity: 1, x: 0 }}
|
||||||
|
whileHover={{ x: 5, backgroundColor: "rgba(59, 130, 246, 0.05)" }}
|
||||||
|
>
|
||||||
|
<div className="flex justify-between items-center">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<motion.div
|
||||||
|
className="relative"
|
||||||
|
whileHover={{ scale: 1.05 }}
|
||||||
|
whileTap={{ scale: 0.95 }}
|
||||||
|
>
|
||||||
|
{movie.poster_url ? (
|
||||||
|
<img
|
||||||
|
className="rounded-xl shadow-md group-hover:shadow-lg transition-shadow duration-300"
|
||||||
|
style={listCoverSizeClasses[coverSize]}
|
||||||
|
src={posterUrl || ''}
|
||||||
|
alt={movie.title}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<div className="bg-gradient-to-br from-gray-100 to-gray-200 rounded-xl mr-3 flex items-center justify-center shadow-md" style={listCoverSizeClasses[coverSize]}>
|
||||||
|
<FilmIcon className="text-gray-400" width={32} height={32} />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{(movie.watched === true) && (
|
||||||
|
<motion.div
|
||||||
|
className="absolute -top-1 -right-1 w-4 h-4 bg-green-500 rounded-full border-2 border-white shadow-lg"
|
||||||
|
initial={{ scale: 0 }}
|
||||||
|
animate={{ scale: 1 }}
|
||||||
|
transition={{ type: "spring", stiffness: 500 }}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</motion.div>
|
||||||
|
<div className="flex-1 ml-4">
|
||||||
|
<h3 className="text-sm font-semibold mb-1">
|
||||||
|
<Link
|
||||||
|
to={`/movies/${movie.id}`}
|
||||||
|
className="no-underline text-gray-900 hover:text-blue-600 transition-colors duration-200"
|
||||||
|
>
|
||||||
|
{movie.title}
|
||||||
|
</Link>
|
||||||
|
</h3>
|
||||||
|
<div className="flex items-center gap-3 text-sm text-gray-600">
|
||||||
|
{movie.release_date && (
|
||||||
|
<span className="px-2 py-1 bg-gray-100 rounded-full text-xs">{formatYear(movie.release_date)}</span>
|
||||||
|
)}
|
||||||
|
{movie.rating && (
|
||||||
|
<span className="flex items-center gap-1 px-2 py-1 bg-yellow-100 text-yellow-800 rounded-full text-xs font-medium">
|
||||||
|
<StarIcon className="w-3 h-3" />
|
||||||
|
{movie.rating}/10
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
<span className="text-xs">{movie.source_name}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<motion.div
|
||||||
|
className="opacity-0 group-hover:opacity-100 transition-opacity duration-200"
|
||||||
|
initial={{ scale: 0.8 }}
|
||||||
|
whileHover={{ scale: 1 }}
|
||||||
|
>
|
||||||
|
<PlayIcon className="w-5 h-5 text-blue-500" />
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
</motion.li>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (viewMode === 'covers') {
|
||||||
|
return (
|
||||||
|
<motion.div
|
||||||
|
className="relative group cursor-pointer overflow-hidden"
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
whileHover={{ y: -5 }}
|
||||||
|
>
|
||||||
|
<Link to={`/movies/${movie.id}`}>
|
||||||
|
<motion.div
|
||||||
|
className={`relative overflow-hidden rounded-2xl shadow-xl group-hover:shadow-2xl transition-all duration-300 ${coversHeightClasses[coverSize]}`}
|
||||||
|
whileHover={{ scale: 1.02 }}
|
||||||
|
>
|
||||||
|
{movie.poster_url ? (
|
||||||
|
<motion.img
|
||||||
|
src={posterUrl || ''}
|
||||||
|
alt={movie.title}
|
||||||
|
className={`w-full aspect-[2/3] object-cover`}
|
||||||
|
whileHover={{ scale: 1.1 }}
|
||||||
|
transition={{ duration: 0.3 }}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<div className={`w-full aspect-[2/3] bg-gradient-to-br from-gray-100 to-gray-200 rounded-2xl flex items-center justify-center`}>
|
||||||
|
<FilmIcon className="text-gray-400 w-16 h-16" />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Overlay */}
|
||||||
|
<motion.div
|
||||||
|
className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/50 to-transparent"
|
||||||
|
initial={{ opacity: 0 }}
|
||||||
|
whileHover={{ opacity: 1 }}
|
||||||
|
transition={{ duration: 0.3 }}
|
||||||
|
>
|
||||||
|
<div className="absolute bottom-0 left-0 right-0 p-4">
|
||||||
|
<motion.h3
|
||||||
|
className="text-white font-bold text-lg mb-2 line-clamp-2"
|
||||||
|
initial={{ y: 20, opacity: 0 }}
|
||||||
|
whileHover={{ y: 0, opacity: 1 }}
|
||||||
|
transition={{ delay: 0.1 }}
|
||||||
|
>
|
||||||
|
{movie.title}
|
||||||
|
</motion.h3>
|
||||||
|
<div className="flex items-center gap-2 text-sm text-gray-300">
|
||||||
|
{movie.release_date && (
|
||||||
|
<span>{formatYear(movie.release_date)}</span>
|
||||||
|
)}
|
||||||
|
{movie.rating && (
|
||||||
|
<span className="flex items-center gap-1 px-2 py-1 bg-yellow-500/20 text-yellow-300 rounded-full text-xs font-medium">
|
||||||
|
<StarIcon className="w-3 h-3" />
|
||||||
|
{movie.rating}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<motion.div
|
||||||
|
className="flex items-center gap-2 mt-3"
|
||||||
|
initial={{ y: 20, opacity: 0 }}
|
||||||
|
whileHover={{ y: 0, opacity: 1 }}
|
||||||
|
transition={{ delay: 0.2 }}
|
||||||
|
>
|
||||||
|
<motion.button
|
||||||
|
className="p-2 bg-blue-500 rounded-full text-white hover:bg-blue-600 transition-colors"
|
||||||
|
whileHover={{ scale: 1.1 }}
|
||||||
|
whileTap={{ scale: 0.9 }}
|
||||||
|
>
|
||||||
|
<PlayIcon className="w-4 h-4" />
|
||||||
|
</motion.button>
|
||||||
|
<motion.button
|
||||||
|
className="p-2 bg-white/20 backdrop-blur-sm rounded-full text-white hover:bg-white/30 transition-colors"
|
||||||
|
whileHover={{ scale: 1.1 }}
|
||||||
|
whileTap={{ scale: 0.9 }}
|
||||||
|
>
|
||||||
|
<HeartIcon className="w-4 h-4" />
|
||||||
|
</motion.button>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
{/* Watched indicator */}
|
||||||
|
{(movie.watched === true) && (
|
||||||
|
<motion.div
|
||||||
|
className="absolute top-3 right-3 bg-green-500 text-white px-3 py-1 rounded-full text-xs font-semibold shadow-lg"
|
||||||
|
initial={{ scale: 0 }}
|
||||||
|
animate={{ scale: 1 }}
|
||||||
|
transition={{ type: "spring", stiffness: 500 }}
|
||||||
|
>
|
||||||
|
Watched
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
</motion.div>
|
||||||
|
</Link>
|
||||||
|
</motion.div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Grid view (default)
|
||||||
|
return (
|
||||||
|
<motion.div
|
||||||
|
className={clsx(
|
||||||
|
"card card-hover bg-white/90 backdrop-blur-sm rounded-2xl overflow-hidden",
|
||||||
|
"transform transition-all duration-300"
|
||||||
|
)}
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
whileHover={{ y: -8, boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.25)" }}
|
||||||
|
>
|
||||||
|
<Link to={`/movies/${movie.id}`}>
|
||||||
|
<div className="relative overflow-hidden">
|
||||||
|
<motion.div
|
||||||
|
className="relative overflow-hidden"
|
||||||
|
whileHover={{ scale: 1.05 }}
|
||||||
|
transition={{ duration: 0.3 }}
|
||||||
|
>
|
||||||
|
{posterUrl ? (
|
||||||
|
<img
|
||||||
|
src={posterUrl}
|
||||||
|
alt={movie.title}
|
||||||
|
className="w-full aspect-[2/3] object-cover rounded-2xl shadow-2xl"
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<div className="w-full aspect-[2/3] bg-gradient-to-br from-gray-100 to-gray-200 rounded-2xl flex items-center justify-center">
|
||||||
|
<FilmIcon className="text-gray-400 w-20 h-20" />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
{/* Watched indicator */}
|
||||||
|
{movie.watched === true && (
|
||||||
|
<motion.div
|
||||||
|
className="absolute top-3 right-3 bg-green-500 text-white px-3 py-1 rounded-full text-xs font-semibold shadow-lg"
|
||||||
|
initial={{ scale: 0 }}
|
||||||
|
animate={{ scale: 1 }}
|
||||||
|
transition={{ type: "spring", stiffness: 500 }}
|
||||||
|
>
|
||||||
|
Watched
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Hover overlay */}
|
||||||
|
<motion.div
|
||||||
|
className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4"
|
||||||
|
whileHover={{ opacity: 1 }}
|
||||||
|
>
|
||||||
|
<motion.div
|
||||||
|
className="flex gap-2"
|
||||||
|
initial={{ y: 20, opacity: 0 }}
|
||||||
|
whileHover={{ y: 0, opacity: 1 }}
|
||||||
|
transition={{ delay: 0.1 }}
|
||||||
|
>
|
||||||
|
<motion.button
|
||||||
|
className="p-2 bg-blue-500 rounded-full text-white hover:bg-blue-600 transition-colors shadow-lg"
|
||||||
|
whileHover={{ scale: 1.1 }}
|
||||||
|
whileTap={{ scale: 0.9 }}
|
||||||
|
>
|
||||||
|
<PlayIcon className="w-4 h-4" />
|
||||||
|
</motion.button>
|
||||||
|
<motion.button
|
||||||
|
className="p-2 bg-white/20 backdrop-blur-sm rounded-full text-white hover:bg-white/30 transition-colors shadow-lg"
|
||||||
|
whileHover={{ scale: 1.1 }}
|
||||||
|
whileTap={{ scale: 0.9 }}
|
||||||
|
>
|
||||||
|
<HeartIcon className="w-4 h-4" />
|
||||||
|
</motion.button>
|
||||||
|
</motion.div>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
<div className="p-4">
|
||||||
|
<motion.h3
|
||||||
|
className="font-semibold text-gray-900 mb-2 line-clamp-2 hover:text-blue-600 transition-colors duration-200"
|
||||||
|
whileHover={{ color: "#2563eb" }}
|
||||||
|
>
|
||||||
|
{movie.title}
|
||||||
|
</motion.h3>
|
||||||
|
|
||||||
|
<div className="flex items-center justify-between text-sm text-gray-600 mb-2">
|
||||||
|
{movie.release_date && (
|
||||||
|
<span className="px-2 py-1 bg-gray-100 rounded-full text-xs">{formatYear(movie.release_date)}</span>
|
||||||
|
)}
|
||||||
|
<span className="text-xs">{movie.source_name}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{movie.rating && (
|
||||||
|
<motion.div
|
||||||
|
className="flex items-center gap-1 text-sm mb-2"
|
||||||
|
initial={{ opacity: 0, x: -10 }}
|
||||||
|
animate={{ opacity: 1, x: 0 }}
|
||||||
|
transition={{ delay: 0.2 }}
|
||||||
|
>
|
||||||
|
<StarIcon className="w-4 h-4 text-yellow-500" />
|
||||||
|
<span className="font-medium">{movie.rating}/10</span>
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{movie.runtime_minutes && (
|
||||||
|
<div className="flex items-center gap-1 text-sm text-gray-600 mb-2">
|
||||||
|
<ClockIcon className="w-4 h-4" />
|
||||||
|
<span>{formatRuntime(movie.runtime_minutes)}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{movie.genres && movie.genres.length > 0 && (
|
||||||
|
<motion.div
|
||||||
|
className="mt-3 flex flex-wrap gap-1"
|
||||||
|
initial={{ opacity: 0, y: 10 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ delay: 0.3 }}
|
||||||
|
>
|
||||||
|
{movie.genres.slice(0, 3).map((genre, index) => (
|
||||||
|
<motion.span
|
||||||
|
key={genre}
|
||||||
|
className="px-2 py-1 bg-gradient-to-r from-blue-100 to-blue-200 text-blue-800 text-xs rounded-full font-medium"
|
||||||
|
initial={{ opacity: 0, scale: 0.8 }}
|
||||||
|
animate={{ opacity: 1, scale: 1 }}
|
||||||
|
transition={{ delay: 0.4 + index * 0.1 }}
|
||||||
|
whileHover={{ scale: 1.05 }}
|
||||||
|
>
|
||||||
|
{genre}
|
||||||
|
</motion.span>
|
||||||
|
))}
|
||||||
|
{movie.genres.length > 3 && (
|
||||||
|
<span className="px-2 py-1 bg-gray-100 text-gray-600 text-xs rounded-full">
|
||||||
|
+{movie.genres.length - 3}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
</motion.div>
|
||||||
|
)
|
||||||
|
}
|
||||||
128
src/components/Pagination.tsx
Normal file
128
src/components/Pagination.tsx
Normal file
@@ -0,0 +1,128 @@
|
|||||||
|
import { motion } from 'framer-motion'
|
||||||
|
|
||||||
|
interface PaginationProps {
|
||||||
|
currentPage: number
|
||||||
|
lastPage: number
|
||||||
|
total: number
|
||||||
|
onPageChange: (page: number) => void
|
||||||
|
itemsPerPage: number
|
||||||
|
onItemsPerPageChange: (items: number) => void
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function Pagination({
|
||||||
|
currentPage,
|
||||||
|
lastPage,
|
||||||
|
total,
|
||||||
|
onPageChange,
|
||||||
|
itemsPerPage,
|
||||||
|
onItemsPerPageChange
|
||||||
|
}: PaginationProps) {
|
||||||
|
const handlePrevious = () => {
|
||||||
|
if (currentPage > 1) {
|
||||||
|
onPageChange(currentPage - 1)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleNext = () => {
|
||||||
|
if (currentPage < lastPage) {
|
||||||
|
onPageChange(currentPage + 1)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handlePageSelect = (page: number) => {
|
||||||
|
onPageChange(page)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Generate page numbers to show
|
||||||
|
const getVisiblePages = () => {
|
||||||
|
const pages: number[] = []
|
||||||
|
const maxVisible = 5
|
||||||
|
|
||||||
|
if (lastPage <= maxVisible) {
|
||||||
|
for (let i = 1; i <= lastPage; i++) {
|
||||||
|
pages.push(i)
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
const start = Math.max(1, currentPage - 2)
|
||||||
|
const end = Math.min(lastPage, start + maxVisible - 1)
|
||||||
|
|
||||||
|
for (let i = start; i <= end; i++) {
|
||||||
|
pages.push(i)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return pages
|
||||||
|
}
|
||||||
|
|
||||||
|
if (lastPage <= 1) {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col sm:flex-row items-center justify-between gap-4 mt-8 p-4 bg-white/5 dark:bg-gray-800/50 rounded-xl border border-white/10">
|
||||||
|
{/* Items per page selector */}
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<span className="text-sm text-gray-600 dark:text-gray-400">Show:</span>
|
||||||
|
<select
|
||||||
|
value={itemsPerPage}
|
||||||
|
onChange={(e) => onItemsPerPageChange(parseInt(e.target.value))}
|
||||||
|
className="px-3 py-1.5 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-purple-500 focus:border-transparent"
|
||||||
|
>
|
||||||
|
<option value={10}>10</option>
|
||||||
|
<option value={20}>20</option>
|
||||||
|
<option value={50}>50</option>
|
||||||
|
<option value={100}>100</option>
|
||||||
|
</select>
|
||||||
|
<span className="text-sm text-gray-600 dark:text-gray-400">
|
||||||
|
of {total} items
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Pagination controls */}
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<motion.button
|
||||||
|
onClick={handlePrevious}
|
||||||
|
disabled={currentPage === 1}
|
||||||
|
className="px-3 py-1.5 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white hover:bg-gray-100 dark:hover:bg-gray-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
||||||
|
whileHover={{ scale: currentPage !== 1 ? 1.05 : 1 }}
|
||||||
|
whileTap={{ scale: currentPage !== 1 ? 0.95 : 1 }}
|
||||||
|
>
|
||||||
|
Previous
|
||||||
|
</motion.button>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-1">
|
||||||
|
{getVisiblePages().map((page) => (
|
||||||
|
<motion.button
|
||||||
|
key={page}
|
||||||
|
onClick={() => handlePageSelect(page)}
|
||||||
|
className={`w-8 h-8 text-sm rounded-lg transition-colors ${
|
||||||
|
currentPage === page
|
||||||
|
? 'bg-purple-600 text-white'
|
||||||
|
: 'bg-white dark:bg-gray-700 text-gray-900 dark:text-white hover:bg-gray-100 dark:hover:bg-gray-600'
|
||||||
|
}`}
|
||||||
|
whileHover={{ scale: 1.1 }}
|
||||||
|
whileTap={{ scale: 0.9 }}
|
||||||
|
>
|
||||||
|
{page}
|
||||||
|
</motion.button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<motion.button
|
||||||
|
onClick={handleNext}
|
||||||
|
disabled={currentPage === lastPage}
|
||||||
|
className="px-3 py-1.5 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white hover:bg-gray-100 dark:hover:bg-gray-600 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
||||||
|
whileHover={{ scale: currentPage !== lastPage ? 1.05 : 1 }}
|
||||||
|
whileTap={{ scale: currentPage !== lastPage ? 0.95 : 1 }}
|
||||||
|
>
|
||||||
|
Next
|
||||||
|
</motion.button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Page info */}
|
||||||
|
<div className="text-sm text-gray-600 dark:text-gray-400">
|
||||||
|
Page {currentPage} of {lastPage}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
309
src/components/SearchDropdown.tsx
Normal file
309
src/components/SearchDropdown.tsx
Normal file
@@ -0,0 +1,309 @@
|
|||||||
|
import { useState, useEffect, useRef } from 'react'
|
||||||
|
import { motion } from 'framer-motion'
|
||||||
|
import { useNavigate } from 'react-router-dom'
|
||||||
|
import { useSearch } from '../hooks/useApi'
|
||||||
|
import {
|
||||||
|
Film,
|
||||||
|
Tv,
|
||||||
|
Music,
|
||||||
|
Gamepad2,
|
||||||
|
FileVideo,
|
||||||
|
Users,
|
||||||
|
FileText,
|
||||||
|
Search,
|
||||||
|
Loader2
|
||||||
|
} from 'lucide-react'
|
||||||
|
|
||||||
|
interface SearchDropdownProps {
|
||||||
|
query: string
|
||||||
|
onClose: () => void
|
||||||
|
currentSection?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
interface SearchResult {
|
||||||
|
id: number
|
||||||
|
title?: string
|
||||||
|
name?: string
|
||||||
|
poster_url?: string
|
||||||
|
backdrop_url?: string
|
||||||
|
thumbnail_path?: string
|
||||||
|
year?: number
|
||||||
|
rating?: number
|
||||||
|
media_type: string
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export default function SearchDropdown({ query, onClose, currentSection }: SearchDropdownProps) {
|
||||||
|
const [debouncedQuery, setDebouncedQuery] = useState('')
|
||||||
|
const [selectedIndex, setSelectedIndex] = useState(0)
|
||||||
|
const navigate = useNavigate()
|
||||||
|
const dropdownRef = useRef<HTMLDivElement>(null)
|
||||||
|
|
||||||
|
// Debounce search query
|
||||||
|
useEffect(() => {
|
||||||
|
const timer = setTimeout(() => {
|
||||||
|
setDebouncedQuery(query.trim())
|
||||||
|
}, 300)
|
||||||
|
|
||||||
|
return () => clearTimeout(timer)
|
||||||
|
}, [query])
|
||||||
|
|
||||||
|
// Search API call - only search in current section if specified
|
||||||
|
const { data: searchResults, isLoading } = useSearch({
|
||||||
|
q: debouncedQuery,
|
||||||
|
type: (currentSection === 'movies' ? 'movie' :
|
||||||
|
currentSection === 'tvshows' ? 'tvshow' :
|
||||||
|
currentSection === 'games' ? 'game' :
|
||||||
|
currentSection === 'music' ? 'music' :
|
||||||
|
currentSection === 'adult' ? 'adult' :
|
||||||
|
currentSection === 'actors' ? 'actors' : 'all') as any,
|
||||||
|
per_page: 5
|
||||||
|
}) as any
|
||||||
|
|
||||||
|
// Close on click outside
|
||||||
|
useEffect(() => {
|
||||||
|
const handleClickOutside = (event: MouseEvent) => {
|
||||||
|
if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
|
||||||
|
onClose()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
document.addEventListener('mousedown', handleClickOutside)
|
||||||
|
return () => document.removeEventListener('mousedown', handleClickOutside)
|
||||||
|
}, [onClose])
|
||||||
|
|
||||||
|
// Keyboard navigation
|
||||||
|
useEffect(() => {
|
||||||
|
const handleKeyDown = (event: KeyboardEvent) => {
|
||||||
|
const allResults = getAllResults()
|
||||||
|
if (allResults.length === 0) return
|
||||||
|
|
||||||
|
const totalItems = allResults.length
|
||||||
|
|
||||||
|
switch (event.key) {
|
||||||
|
case 'ArrowDown':
|
||||||
|
event.preventDefault()
|
||||||
|
setSelectedIndex(prev => (prev + 1) % totalItems)
|
||||||
|
break
|
||||||
|
case 'ArrowUp':
|
||||||
|
event.preventDefault()
|
||||||
|
setSelectedIndex(prev => prev === 0 ? totalItems - 1 : prev - 1)
|
||||||
|
break
|
||||||
|
case 'Enter':
|
||||||
|
event.preventDefault()
|
||||||
|
if (allResults[selectedIndex]) {
|
||||||
|
handleResultClick(allResults[selectedIndex])
|
||||||
|
}
|
||||||
|
break
|
||||||
|
case 'Escape':
|
||||||
|
event.preventDefault()
|
||||||
|
onClose()
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
document.addEventListener('keydown', handleKeyDown)
|
||||||
|
return () => document.removeEventListener('keydown', handleKeyDown)
|
||||||
|
}, [selectedIndex, onClose])
|
||||||
|
|
||||||
|
const getAllResults = (): SearchResult[] => {
|
||||||
|
if (!searchResults) return []
|
||||||
|
|
||||||
|
const results: SearchResult[] = []
|
||||||
|
|
||||||
|
if (searchResults.movies?.items) {
|
||||||
|
results.push(...searchResults.movies.items.map((item: any) => ({ ...item, media_type: 'movie' })))
|
||||||
|
}
|
||||||
|
if (searchResults.tvshows?.items) {
|
||||||
|
results.push(...searchResults.tvshows.items.map((item: any) => ({ ...item, media_type: 'tvshow' })))
|
||||||
|
}
|
||||||
|
if (searchResults.games?.items) {
|
||||||
|
results.push(...searchResults.games.items.map((item: any) => ({ ...item, media_type: 'game' })))
|
||||||
|
}
|
||||||
|
if (searchResults.artists?.items) {
|
||||||
|
results.push(...searchResults.artists.items.map((item: any) => ({ ...item, media_type: 'music' })))
|
||||||
|
}
|
||||||
|
if (searchResults.actors?.items) {
|
||||||
|
results.push(...searchResults.actors.items.map((item: any) => ({ ...item, media_type: 'actors' })))
|
||||||
|
}
|
||||||
|
if (searchResults.adult?.items) {
|
||||||
|
results.push(...searchResults.adult.items.map((item: any) => ({ ...item, media_type: 'adult' })))
|
||||||
|
}
|
||||||
|
|
||||||
|
return results
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleResultClick = (result: SearchResult) => {
|
||||||
|
const route = `/${result.media_type === 'movie' ? 'movies' :
|
||||||
|
result.media_type === 'tvshow' ? 'tvshows' :
|
||||||
|
result.media_type === 'game' ? 'games' :
|
||||||
|
result.media_type === 'music' ? 'music' :
|
||||||
|
result.media_type === 'actors' ? 'actors' :
|
||||||
|
result.media_type === 'adult' ? 'adult' : 'movies'}/${result.id}`
|
||||||
|
navigate(route)
|
||||||
|
onClose()
|
||||||
|
}
|
||||||
|
|
||||||
|
const getMediaTypeIcon = (mediaType: string) => {
|
||||||
|
switch (mediaType) {
|
||||||
|
case 'movie': return Film
|
||||||
|
case 'tvshow': return Tv
|
||||||
|
case 'game': return Gamepad2
|
||||||
|
case 'music': return Music
|
||||||
|
case 'adult': return FileVideo
|
||||||
|
case 'actors': return Users
|
||||||
|
default: return FileText
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const getMediaTypeColor = (mediaType: string) => {
|
||||||
|
switch (mediaType) {
|
||||||
|
case 'movie': return 'from-blue-500 to-blue-600'
|
||||||
|
case 'tvshow': return 'from-purple-500 to-purple-600'
|
||||||
|
case 'game': return 'from-green-500 to-green-600'
|
||||||
|
case 'music': return 'from-pink-500 to-pink-600'
|
||||||
|
case 'adult': return 'from-red-500 to-red-600'
|
||||||
|
case 'actors': return 'from-indigo-500 to-indigo-600'
|
||||||
|
default: return 'from-gray-500 to-gray-600'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const getImage = (result: SearchResult): string | undefined => {
|
||||||
|
const imagePath = result.poster_url || result.backdrop_url || result.thumbnail_path
|
||||||
|
if (!imagePath) return undefined
|
||||||
|
|
||||||
|
// If it's already a full HTTP URL, use as-is
|
||||||
|
if (imagePath.startsWith('http')) {
|
||||||
|
return imagePath
|
||||||
|
}
|
||||||
|
|
||||||
|
// If it starts with /images/, use as-is (already correct path)
|
||||||
|
if (imagePath.startsWith('/images/')) {
|
||||||
|
return `${(import.meta as any).env?.VITE_API_URL?.replace('/api', '') || ''}${imagePath}`
|
||||||
|
}
|
||||||
|
|
||||||
|
// If it's a relative path without /images/, add the prefix
|
||||||
|
return `${(import.meta as any).env?.VITE_API_URL?.replace('/api', '') || ''}/images/${imagePath}`
|
||||||
|
}
|
||||||
|
|
||||||
|
const allResults = getAllResults()
|
||||||
|
|
||||||
|
if (!debouncedQuery) {
|
||||||
|
return (
|
||||||
|
<motion.div
|
||||||
|
ref={dropdownRef}
|
||||||
|
initial={{ opacity: 0, y: -10 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
exit={{ opacity: 0, y: -10 }}
|
||||||
|
className="absolute top-full left-0 right-0 mt-2 bg-slate-800/95 backdrop-blur-xl border border-white/10 rounded-2xl shadow-2xl overflow-hidden z-50"
|
||||||
|
style={{ minWidth: '400px' }}
|
||||||
|
>
|
||||||
|
<div className="p-6 text-center">
|
||||||
|
<Search className="w-12 h-12 text-slate-500 mx-auto mb-3" />
|
||||||
|
<p className="text-slate-400 text-sm">Gib einen Suchbegriff ein um Vorschauergebnisse zu sehen</p>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<motion.div
|
||||||
|
ref={dropdownRef}
|
||||||
|
initial={{ opacity: 0, y: -10 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
exit={{ opacity: 0, y: -10 }}
|
||||||
|
className="absolute top-full left-0 right-0 mt-2 bg-slate-800/95 backdrop-blur-xl border border-white/10 rounded-2xl shadow-2xl overflow-hidden z-50 max-h-96 overflow-y-auto"
|
||||||
|
style={{ minWidth: '400px' }}
|
||||||
|
>
|
||||||
|
{isLoading ? (
|
||||||
|
<div className="p-6 text-center">
|
||||||
|
<Loader2 className="w-8 h-8 text-brand-500 animate-spin mx-auto mb-3" />
|
||||||
|
<p className="text-slate-400 text-sm">Suche läuft...</p>
|
||||||
|
</div>
|
||||||
|
) : allResults.length === 0 ? (
|
||||||
|
<div className="p-6 text-center">
|
||||||
|
<FileText className="w-12 h-12 text-slate-500 mx-auto mb-3" />
|
||||||
|
<p className="text-slate-400 text-sm">Keine Ergebnisse für "{debouncedQuery}" gefunden</p>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="py-2">
|
||||||
|
{allResults.map((result, index) => {
|
||||||
|
const Icon = getMediaTypeIcon(result.media_type)
|
||||||
|
const colorClass = getMediaTypeColor(result.media_type)
|
||||||
|
const isSelected = index === selectedIndex
|
||||||
|
|
||||||
|
return (
|
||||||
|
<motion.div
|
||||||
|
key={`${result.media_type}-${result.id}`}
|
||||||
|
initial={{ opacity: 0, x: -20 }}
|
||||||
|
animate={{ opacity: 1, x: 0 }}
|
||||||
|
transition={{ delay: index * 0.05 }}
|
||||||
|
className={`px-4 py-3 cursor-pointer transition-all ${
|
||||||
|
isSelected ? 'bg-brand-500/20 border-l-2 border-brand-500' : 'hover:bg-white/5'
|
||||||
|
}`}
|
||||||
|
onClick={() => handleResultClick(result)}
|
||||||
|
>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
{/* Thumbnail */}
|
||||||
|
<div className="w-12 h-16 rounded-lg overflow-hidden flex-shrink-0 bg-slate-700">
|
||||||
|
{getImage(result) ? (
|
||||||
|
<img
|
||||||
|
src={getImage(result)}
|
||||||
|
alt={result.title || result.name}
|
||||||
|
className="w-full h-full object-cover"
|
||||||
|
onError={(e) => {
|
||||||
|
e.currentTarget.src = '/images/placeholder.jpg'
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<div className={`w-full h-full bg-gradient-to-br ${colorClass} flex items-center justify-center`}>
|
||||||
|
<Icon className="w-6 h-6 text-white/50" />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Content */}
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<div className="flex items-center gap-2 mb-1">
|
||||||
|
<div className={`p-1 rounded bg-gradient-to-r ${colorClass}`}>
|
||||||
|
<Icon className="w-3 h-3 text-white" />
|
||||||
|
</div>
|
||||||
|
<h4 className="text-white font-medium text-sm truncate">{result.title || result.name}</h4>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2 text-xs text-slate-400">
|
||||||
|
{result.year && <span>{result.year}</span>}
|
||||||
|
{result.rating && (
|
||||||
|
<>
|
||||||
|
<span>•</span>
|
||||||
|
<span>★ {parseFloat(String(result.rating)).toFixed(1)}</span>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
|
||||||
|
{/* View all results link */}
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0 }}
|
||||||
|
animate={{ opacity: 1 }}
|
||||||
|
transition={{ delay: allResults.length * 0.05 }}
|
||||||
|
className="border-t border-white/10 px-4 py-3"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
onClick={() => {
|
||||||
|
navigate(`/search?q=${encodeURIComponent(debouncedQuery)}${currentSection && currentSection !== 'all' ? `&type=${currentSection}` : ''}`)
|
||||||
|
onClose()
|
||||||
|
}}
|
||||||
|
className="w-full text-center text-brand-400 hover:text-brand-300 text-sm font-medium transition-colors"
|
||||||
|
>
|
||||||
|
Alle Ergebnisse für "{debouncedQuery}" anzeigen →
|
||||||
|
</button>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</motion.div>
|
||||||
|
)
|
||||||
|
}
|
||||||
144
src/components/Sidebar.tsx
Normal file
144
src/components/Sidebar.tsx
Normal file
@@ -0,0 +1,144 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { Box, Layers, LogOut } from 'lucide-react';
|
||||||
|
|
||||||
|
// Mock NAV_ITEMS for compatibility
|
||||||
|
const NAV_ITEMS = [
|
||||||
|
{ id: 'dashboard', label: 'Dashboard', icon: React.createElement(Layers) },
|
||||||
|
{ id: 'movies', label: 'Filme', icon: React.createElement(Box) },
|
||||||
|
{ id: 'tvshows', label: 'Serien', icon: React.createElement(Box) },
|
||||||
|
{ id: 'games', label: 'Spiele', icon: React.createElement(Box) },
|
||||||
|
{ id: 'music', label: 'Musik', icon: React.createElement(Box) },
|
||||||
|
{ id: 'adult', label: 'Adult', icon: React.createElement(Box) },
|
||||||
|
{ id: 'actors', label: 'Personen', icon: React.createElement(Box) },
|
||||||
|
{ id: 'settings', label: 'Einstellungen', icon: React.createElement(Box) },
|
||||||
|
];
|
||||||
|
|
||||||
|
interface SidebarProps {
|
||||||
|
currentView: string;
|
||||||
|
onChangeView: (view: string) => void;
|
||||||
|
stats: any;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const Sidebar: React.FC<SidebarProps> = ({ currentView, onChangeView, stats }) => {
|
||||||
|
|
||||||
|
const getCount = (id: string) => {
|
||||||
|
if (!stats) return 0;
|
||||||
|
if (id === 'dashboard') return 0;
|
||||||
|
// Removed 'all' logic
|
||||||
|
if (stats.typeCounts && stats.typeCounts[id] !== undefined) {
|
||||||
|
return stats.typeCounts[id];
|
||||||
|
}
|
||||||
|
return 0;
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="w-[260px] flex flex-col h-full shrink-0 py-6 pl-6 pr-2">
|
||||||
|
{/* App Logo / Brand Area */}
|
||||||
|
<div className="px-4 mb-8 flex items-center gap-3">
|
||||||
|
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-brand-500 to-indigo-600 flex items-center justify-center shadow-lg shadow-brand-500/20 text-white font-bold text-lg">
|
||||||
|
MV
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h1 className="font-bold text-white tracking-tight text-lg">MediaVault</h1>
|
||||||
|
<p className="text-[10px] text-slate-400 font-medium uppercase tracking-wider">Collection</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Navigation Container */}
|
||||||
|
<div className="flex-1 overflow-y-auto custom-scrollbar space-y-8">
|
||||||
|
|
||||||
|
{/* Main Group */}
|
||||||
|
<div>
|
||||||
|
<div className="px-4 mb-3 text-[11px] font-bold text-slate-500 uppercase tracking-widest opacity-80">Hauptmenü</div>
|
||||||
|
<nav className="space-y-1">
|
||||||
|
{NAV_ITEMS.filter(item => item.id === 'dashboard' || item.id === 'settings').map((item) => {
|
||||||
|
const isActive = currentView === item.id;
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
key={item.id}
|
||||||
|
onClick={() => onChangeView(item.id)}
|
||||||
|
className={`w-full flex items-center justify-between px-4 py-3 rounded-xl transition-all duration-300 group ${
|
||||||
|
isActive
|
||||||
|
? 'bg-brand-600 text-white shadow-lg shadow-brand-500/20 font-medium'
|
||||||
|
: 'text-slate-400 hover:bg-white/5 hover:text-slate-100'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
{/* Icon wrapper to ensure uniform size */}
|
||||||
|
<span className={`${isActive ? 'text-white' : 'text-slate-400 group-hover:text-slate-200'}`}>
|
||||||
|
{React.cloneElement(item.icon as React.ReactElement<any>, { size: 18 })}
|
||||||
|
</span>
|
||||||
|
<span className="text-sm">{item.label}</span>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Library Group */}
|
||||||
|
<div>
|
||||||
|
<div className="px-4 mb-3 text-[11px] font-bold text-slate-500 uppercase tracking-widest opacity-80">Kategorien</div>
|
||||||
|
<nav className="space-y-1">
|
||||||
|
{NAV_ITEMS.filter(item => item.id !== 'dashboard' && item.id !== 'settings').map((item) => {
|
||||||
|
const isActive = currentView === item.id;
|
||||||
|
const count = getCount(item.id);
|
||||||
|
const isAdult = item.id === 'adult';
|
||||||
|
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
key={item.id}
|
||||||
|
onClick={() => onChangeView(item.id)}
|
||||||
|
className={`w-full flex items-center justify-between px-4 py-3 rounded-xl transition-all duration-300 group ${
|
||||||
|
isActive
|
||||||
|
? isAdult ? 'bg-red-900/40 text-red-200 border border-red-500/20' : 'bg-white/10 text-white font-medium border border-white/5'
|
||||||
|
: isAdult ? 'text-red-400/60 hover:bg-red-500/10 hover:text-red-300' : 'text-slate-400 hover:bg-white/5 hover:text-slate-100'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<span className={`${isActive ? (isAdult ? 'text-red-400' : 'text-brand-400') : (isAdult ? 'text-red-400/60' : 'text-slate-500 group-hover:text-slate-300')}`}>
|
||||||
|
{React.cloneElement(item.icon as React.ReactElement<any>, { size: 18 })}
|
||||||
|
</span>
|
||||||
|
<span className="text-sm">{item.label}</span>
|
||||||
|
</div>
|
||||||
|
{count > 0 && (
|
||||||
|
<span className={`text-[10px] px-2 py-0.5 rounded-full font-semibold transition-colors ${isActive ? 'bg-white text-brand-900' : 'bg-slate-800 text-slate-500 group-hover:bg-slate-700 group-hover:text-slate-300'}`}>
|
||||||
|
{count}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Platform Folders (Visual Decoration) */}
|
||||||
|
<div>
|
||||||
|
<div className="px-4 mb-3 text-[11px] font-bold text-slate-500 uppercase tracking-widest opacity-80">Plattformen</div>
|
||||||
|
<div className="space-y-1">
|
||||||
|
{['Steam', 'PlayStation', 'Xbox', 'Switch', 'VR'].map((p, idx) => (
|
||||||
|
<div key={idx} className="px-4 py-2 flex items-center gap-3 text-sm text-slate-500 hover:text-slate-300 cursor-pointer transition-colors group">
|
||||||
|
<Box size={14} className="group-hover:text-brand-400 transition-colors" />
|
||||||
|
<span>{p}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* User / Footer Area */}
|
||||||
|
<div className="mt-4 px-4 pt-4 border-t border-white/5">
|
||||||
|
<div className="flex items-center gap-3 p-2 rounded-xl hover:bg-white/5 cursor-pointer transition-colors">
|
||||||
|
<div className="w-8 h-8 rounded-full bg-slate-700 border border-white/10 flex items-center justify-center">
|
||||||
|
<span className="text-xs font-bold text-white">JD</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<div className="text-xs font-bold text-white truncate">John Doe</div>
|
||||||
|
<div className="text-[10px] text-slate-500 truncate">Pro Account</div>
|
||||||
|
</div>
|
||||||
|
<LogOut size={14} className="text-slate-500 hover:text-white" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
335
src/hooks/useApi.ts
Normal file
335
src/hooks/useApi.ts
Normal file
@@ -0,0 +1,335 @@
|
|||||||
|
import { useQuery, UseQueryOptions } from '@tanstack/react-query'
|
||||||
|
import { useMutation, UseMutationOptions } from '@tanstack/react-query'
|
||||||
|
import {
|
||||||
|
moviesApi,
|
||||||
|
tvShowsApi,
|
||||||
|
gamesApi,
|
||||||
|
searchApi,
|
||||||
|
dashboardApi,
|
||||||
|
authApi,
|
||||||
|
adultApi,
|
||||||
|
actorsApi
|
||||||
|
} from '../services/api'
|
||||||
|
|
||||||
|
// Movies hooks
|
||||||
|
export function useMovies(params?: {
|
||||||
|
page?: number
|
||||||
|
per_page?: number
|
||||||
|
genre?: string
|
||||||
|
year?: number
|
||||||
|
search?: string
|
||||||
|
}) {
|
||||||
|
return useQuery({
|
||||||
|
queryKey: ['movies', params],
|
||||||
|
queryFn: () => moviesApi.list(params),
|
||||||
|
placeholderData: (previousData: any) => previousData,
|
||||||
|
staleTime: 5 * 60 * 1000, // 5 minutes
|
||||||
|
gcTime: 10 * 60 * 1000, // 10 minutes
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useMovie(id: number) {
|
||||||
|
return useQuery({
|
||||||
|
queryKey: ['movie', id],
|
||||||
|
queryFn: () => moviesApi.get(id),
|
||||||
|
enabled: !!id,
|
||||||
|
staleTime: 5 * 60 * 1000,
|
||||||
|
gcTime: 10 * 60 * 1000,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useCreateMovie(options?: UseMutationOptions<any, Error, any>) {
|
||||||
|
return useMutation({
|
||||||
|
mutationFn: moviesApi.create,
|
||||||
|
...options
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useUpdateMovie(options?: UseMutationOptions<any, Error, { id: number; data: any }>) {
|
||||||
|
return useMutation({
|
||||||
|
mutationFn: ({ id, data }) => moviesApi.update(id, data),
|
||||||
|
...options
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useDeleteMovie(options?: UseMutationOptions<void, Error, number>) {
|
||||||
|
return useMutation({
|
||||||
|
mutationFn: moviesApi.delete,
|
||||||
|
...options
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// TV Shows hooks
|
||||||
|
export function useTvShows(params?: {
|
||||||
|
page?: number
|
||||||
|
per_page?: number
|
||||||
|
genre?: string
|
||||||
|
year?: number
|
||||||
|
search?: string
|
||||||
|
}) {
|
||||||
|
return useQuery({
|
||||||
|
queryKey: ['tvshows', params?.page, params?.per_page, params?.genre, params?.year, params?.search],
|
||||||
|
queryFn: () => tvShowsApi.list(params),
|
||||||
|
placeholderData: (previousData: any) => previousData,
|
||||||
|
staleTime: 5 * 60 * 1000,
|
||||||
|
gcTime: 10 * 60 * 1000,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useTvShow(id: number) {
|
||||||
|
return useQuery({
|
||||||
|
queryKey: ['tvshow', id],
|
||||||
|
queryFn: () => tvShowsApi.get(id),
|
||||||
|
enabled: !!id,
|
||||||
|
staleTime: 5 * 60 * 1000,
|
||||||
|
gcTime: 10 * 60 * 1000,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useCreateTvShow(options?: UseMutationOptions<any, Error, any>) {
|
||||||
|
return useMutation({
|
||||||
|
mutationFn: tvShowsApi.create,
|
||||||
|
...options
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useUpdateTvShow(options?: UseMutationOptions<any, Error, { id: number; data: any }>) {
|
||||||
|
return useMutation({
|
||||||
|
mutationFn: ({ id, data }) => tvShowsApi.update(id, data),
|
||||||
|
...options
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useDeleteTvShow(options?: UseMutationOptions<void, Error, number>) {
|
||||||
|
return useMutation({
|
||||||
|
mutationFn: tvShowsApi.delete,
|
||||||
|
...options
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// Games hooks
|
||||||
|
export function useGames(params?: {
|
||||||
|
page?: number
|
||||||
|
per_page?: number
|
||||||
|
genre?: string
|
||||||
|
year?: number
|
||||||
|
search?: string
|
||||||
|
platform?: string
|
||||||
|
developer?: string
|
||||||
|
completion_status?: string
|
||||||
|
source_name?: string
|
||||||
|
rating?: string
|
||||||
|
sort?: string
|
||||||
|
order?: string
|
||||||
|
}) {
|
||||||
|
return useQuery({
|
||||||
|
queryKey: ['games', params],
|
||||||
|
queryFn: () => gamesApi.list(params),
|
||||||
|
placeholderData: (previousData: any) => previousData,
|
||||||
|
staleTime: 5 * 60 * 1000,
|
||||||
|
gcTime: 10 * 60 * 1000,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
interface PaginatedResponse<T> {
|
||||||
|
items: T[]
|
||||||
|
pagination: {
|
||||||
|
total: number
|
||||||
|
per_page: number
|
||||||
|
current_page: number
|
||||||
|
last_page: number
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useGame(id: number) {
|
||||||
|
return useQuery({
|
||||||
|
queryKey: ['game', id],
|
||||||
|
queryFn: () => gamesApi.get(id),
|
||||||
|
enabled: !!id,
|
||||||
|
staleTime: 5 * 60 * 1000,
|
||||||
|
gcTime: 10 * 60 * 1000,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useCreateGame(options?: UseMutationOptions<any, Error, any>) {
|
||||||
|
return useMutation({
|
||||||
|
mutationFn: gamesApi.create,
|
||||||
|
...options
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useUpdateGame(options?: UseMutationOptions<any, Error, { id: number; data: any }>) {
|
||||||
|
return useMutation({
|
||||||
|
mutationFn: ({ id, data }) => gamesApi.update(id, data),
|
||||||
|
...options
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useDeleteGame(options?: UseMutationOptions<void, Error, number>) {
|
||||||
|
return useMutation({
|
||||||
|
mutationFn: gamesApi.delete,
|
||||||
|
...options
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// Grouped Games hook
|
||||||
|
export function useGroupedGames(params?: {
|
||||||
|
page?: number
|
||||||
|
per_page?: number
|
||||||
|
search?: string
|
||||||
|
genres?: string[]
|
||||||
|
platforms?: string[]
|
||||||
|
features?: string[]
|
||||||
|
playtime_filter?: string
|
||||||
|
sort?: string
|
||||||
|
}) {
|
||||||
|
return useQuery({
|
||||||
|
queryKey: ['grouped-games', params],
|
||||||
|
queryFn: () => gamesApi.getGrouped(params),
|
||||||
|
placeholderData: (previousData: any) => previousData,
|
||||||
|
staleTime: 5 * 60 * 1000,
|
||||||
|
gcTime: 10 * 60 * 1000,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// Search hooks
|
||||||
|
export function useSearch(params: {
|
||||||
|
q: string
|
||||||
|
type?: 'all' | 'movie' | 'tvshow' | 'game' | 'music' | 'actors'
|
||||||
|
page?: number
|
||||||
|
per_page?: number
|
||||||
|
}) {
|
||||||
|
return useQuery({
|
||||||
|
queryKey: ['search', params],
|
||||||
|
queryFn: () => searchApi.search(params),
|
||||||
|
enabled: !!params.q,
|
||||||
|
placeholderData: (previousData: any) => previousData,
|
||||||
|
staleTime: 2 * 60 * 1000, // 2 minutes for search
|
||||||
|
gcTime: 5 * 60 * 1000,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// Dashboard hooks
|
||||||
|
export function useDashboardStats() {
|
||||||
|
return useQuery({
|
||||||
|
queryKey: ['dashboard-stats'],
|
||||||
|
queryFn: dashboardApi.getStats,
|
||||||
|
staleTime: 2 * 60 * 1000, // 2 minutes for stats
|
||||||
|
gcTime: 5 * 60 * 1000,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useRecentActivity() {
|
||||||
|
return useQuery({
|
||||||
|
queryKey: ['recent-activity'],
|
||||||
|
queryFn: dashboardApi.getRecentActivity,
|
||||||
|
staleTime: 1 * 60 * 1000, // 1 minute for activity
|
||||||
|
gcTime: 5 * 60 * 1000,
|
||||||
|
refetchInterval: 5 * 60 * 1000, // Refetch every 5 minutes
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// Auth hooks
|
||||||
|
export function useAuth() {
|
||||||
|
return useQuery({
|
||||||
|
queryKey: ['auth-user'],
|
||||||
|
queryFn: authApi.getCurrentUser,
|
||||||
|
enabled: authApi.isAuthenticated(),
|
||||||
|
staleTime: 15 * 60 * 1000, // 15 minutes
|
||||||
|
gcTime: 30 * 60 * 1000,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useLogin(options?: UseMutationOptions<any, Error, { username: string; password: string }>) {
|
||||||
|
return useMutation({
|
||||||
|
mutationFn: ({ username, password }) => authApi.login({ username, password }),
|
||||||
|
...options
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useRegister(options?: UseMutationOptions<any, Error, { username: string; email: string; password: string }>) {
|
||||||
|
return useMutation({
|
||||||
|
mutationFn: ({ username, email, password }) => authApi.register({ username, email, password }),
|
||||||
|
...options
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useLogout() {
|
||||||
|
return useMutation({
|
||||||
|
mutationFn: () => authApi.logout()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// Adult content hooks
|
||||||
|
export function useAdults(params?: {
|
||||||
|
page?: number
|
||||||
|
per_page?: number
|
||||||
|
genre?: string
|
||||||
|
year?: number
|
||||||
|
search?: string
|
||||||
|
source?: string
|
||||||
|
}) {
|
||||||
|
return useQuery({
|
||||||
|
queryKey: ['adult', params?.page, params?.per_page, params?.genre, params?.year, params?.search, params?.source],
|
||||||
|
queryFn: () => adultApi.list(params),
|
||||||
|
staleTime: 5 * 60 * 1000,
|
||||||
|
gcTime: 10 * 60 * 1000,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useAdult(id: number) {
|
||||||
|
return useQuery({
|
||||||
|
queryKey: ['adult', id],
|
||||||
|
queryFn: () => adultApi.get(id),
|
||||||
|
staleTime: 5 * 60 * 1000,
|
||||||
|
gcTime: 10 * 60 * 1000,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// Actors hooks
|
||||||
|
export function useActors(params?: {
|
||||||
|
page?: number
|
||||||
|
per_page?: number
|
||||||
|
search?: string
|
||||||
|
gender?: string
|
||||||
|
adult?: boolean
|
||||||
|
sort?: string
|
||||||
|
order?: string
|
||||||
|
}) {
|
||||||
|
return useQuery({
|
||||||
|
queryKey: ['actors', params?.page, params?.per_page, params?.search, params?.gender, params?.adult, params?.sort, params?.order],
|
||||||
|
queryFn: () => actorsApi.list(params),
|
||||||
|
staleTime: 5 * 60 * 1000,
|
||||||
|
gcTime: 10 * 60 * 1000,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useActor(id: number) {
|
||||||
|
return useQuery({
|
||||||
|
queryKey: ['actor', id],
|
||||||
|
queryFn: () => actorsApi.get(id),
|
||||||
|
staleTime: 5 * 60 * 1000,
|
||||||
|
gcTime: 10 * 60 * 1000,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useCreateAdult(options?: UseMutationOptions<any, Error, any>) {
|
||||||
|
return useMutation({
|
||||||
|
mutationFn: adultApi.create,
|
||||||
|
...options
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useUpdateAdult(options?: UseMutationOptions<any, Error, { id: number; data: any }>) {
|
||||||
|
return useMutation({
|
||||||
|
mutationFn: ({ id, data }) => adultApi.update(id, data),
|
||||||
|
...options
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useDeleteAdult(options?: UseMutationOptions<void, Error, number>) {
|
||||||
|
return useMutation({
|
||||||
|
mutationFn: adultApi.delete,
|
||||||
|
...options
|
||||||
|
})
|
||||||
|
}
|
||||||
214
src/index.css
Normal file
214
src/index.css
Normal file
@@ -0,0 +1,214 @@
|
|||||||
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
|
||||||
|
|
||||||
|
@tailwind base;
|
||||||
|
@tailwind components;
|
||||||
|
@tailwind utilities;
|
||||||
|
|
||||||
|
@layer base {
|
||||||
|
html {
|
||||||
|
font-family: 'Inter', system-ui, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
@apply bg-slate-50 text-slate-900;
|
||||||
|
font-feature-settings: "rlig" 1, "calt" 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark body {
|
||||||
|
@apply bg-slate-950 text-slate-100;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@layer components {
|
||||||
|
.btn {
|
||||||
|
@apply inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-medium transition-all duration-150 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none hover:scale-[1.02] active:scale-[0.98];
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary {
|
||||||
|
@apply bg-slate-900 text-white hover:bg-slate-800 focus:ring-slate-500 shadow-sm hover:shadow-md transition-all duration-200 dark:bg-white dark:text-slate-900 dark:hover:bg-slate-100 dark:focus:ring-slate-400;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary {
|
||||||
|
@apply bg-white text-slate-700 border border-slate-200 hover:bg-slate-50 hover:border-slate-300 focus:ring-slate-500 shadow-sm hover:shadow-md transition-all duration-200 dark:bg-slate-800 dark:text-slate-200 dark:border-slate-600 dark:hover:bg-slate-700 dark:hover:border-slate-500 dark:focus:ring-slate-400;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-ghost {
|
||||||
|
@apply text-gray-600 hover:text-gray-900 hover:bg-gray-100 focus:ring-gray-500 rounded-lg dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-800 dark:focus:ring-gray-400;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
@apply glass-card overflow-hidden transition-all duration-200 hover:shadow-lg hover:scale-[1.01];
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-hover {
|
||||||
|
@apply transition-all duration-200 hover:shadow-lg hover:-translate-y-1 hover:scale-[1.01];
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-item {
|
||||||
|
@apply flex items-center px-3 py-2 text-sm font-medium rounded-lg transition-all duration-150;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-item-modern {
|
||||||
|
@apply flex items-center px-3 py-2 text-sm font-medium rounded-lg transition-all duration-150 border border-transparent hover:scale-[1.01];
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-item-active-purple {
|
||||||
|
@apply bg-purple-100 text-purple-700 border border-purple-200 font-semibold rounded-lg;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark .sidebar-item-active-purple {
|
||||||
|
@apply bg-purple-900/30 text-purple-300 border border-purple-700/50 font-semibold rounded-lg;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-item-active {
|
||||||
|
@apply bg-gradient-to-r from-blue-600 to-blue-700 text-white shadow-lg;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-item-active-modern {
|
||||||
|
@apply bg-slate-900 text-white shadow-sm border border-slate-800;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark .sidebar-item-active-modern {
|
||||||
|
@apply bg-white text-slate-900 shadow-sm border border-slate-200;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-item-inactive {
|
||||||
|
@apply text-slate-300 hover:bg-slate-700/50 hover:text-white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-item-inactive-modern {
|
||||||
|
@apply text-slate-300 hover:bg-slate-700/60 hover:text-white hover:shadow-lg hover:border hover:border-white/10;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-item-inactive-modern-dark {
|
||||||
|
@apply text-slate-400 hover:bg-slate-800/50 hover:text-slate-200;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-item-inactive-modern-light {
|
||||||
|
@apply text-slate-600 hover:bg-slate-100/70 hover:text-slate-900;
|
||||||
|
}
|
||||||
|
|
||||||
|
.glass-effect {
|
||||||
|
@apply bg-white/10 backdrop-blur-md border border-white/20;
|
||||||
|
}
|
||||||
|
|
||||||
|
.glass-card {
|
||||||
|
@apply bg-white border border-slate-200/60 shadow-sm;
|
||||||
|
}
|
||||||
|
|
||||||
|
.glass-card-dark {
|
||||||
|
@apply bg-slate-800 border border-slate-700/60 shadow-sm;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gradient-border {
|
||||||
|
@apply relative bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 p-0.5 rounded-2xl;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gradient-border-inner {
|
||||||
|
@apply bg-white dark:bg-gray-900 rounded-2xl;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gradient-bg {
|
||||||
|
@apply bg-gradient-to-br from-slate-50 via-white to-slate-50;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gradient-bg-dark {
|
||||||
|
@apply bg-gradient-to-br from-slate-900 via-gray-900 to-slate-900;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gradient-text {
|
||||||
|
@apply bg-gradient-to-r from-slate-600 to-slate-900 bg-clip-text text-transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark .gradient-text {
|
||||||
|
@apply bg-gradient-to-r from-slate-300 to-slate-100 bg-clip-text text-transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skeleton {
|
||||||
|
@apply animate-pulse bg-gradient-to-r from-gray-200 via-gray-300 to-gray-200 bg-[length:200%_100%];
|
||||||
|
animation: shimmer 1.5s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fade-in {
|
||||||
|
animation: fadeIn 0.5s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slide-up {
|
||||||
|
animation: slideUp 0.4s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bounce-in {
|
||||||
|
animation: bounceIn 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Modern Glass Panel Styles */
|
||||||
|
.glass-panel {
|
||||||
|
background: rgba(30, 41, 59, 0.7);
|
||||||
|
backdrop-filter: blur(20px);
|
||||||
|
-webkit-backdrop-filter: blur(20px);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-scrollbar {
|
||||||
|
scrollbar-width: thin;
|
||||||
|
scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-scrollbar::-webkit-scrollbar {
|
||||||
|
width: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-scrollbar::-webkit-scrollbar-track {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-scrollbar::-webkit-scrollbar-thumb {
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: rgba(255, 255, 255, 0.2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@layer utilities {
|
||||||
|
.text-balance {
|
||||||
|
text-wrap: balance;
|
||||||
|
}
|
||||||
|
|
||||||
|
.animate-in {
|
||||||
|
animation: fadeIn 0.3s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.animate-out {
|
||||||
|
animation: fadeOut 0.3s ease-out;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes shimmer {
|
||||||
|
0% { background-position: -200% 0; }
|
||||||
|
100% { background-position: 200% 0; }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fadeIn {
|
||||||
|
from { opacity: 0; transform: translateY(10px); }
|
||||||
|
to { opacity: 1; transform: translateY(0); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fadeOut {
|
||||||
|
from { opacity: 1; transform: translateY(0); }
|
||||||
|
to { opacity: 0; transform: translateY(-10px); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slideUp {
|
||||||
|
from { opacity: 0; transform: translateY(20px); }
|
||||||
|
to { opacity: 1; transform: translateY(0); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes bounceIn {
|
||||||
|
0% { opacity: 0; transform: scale(0.3); }
|
||||||
|
50% { opacity: 1; transform: scale(1.05); }
|
||||||
|
70% { transform: scale(0.9); }
|
||||||
|
100% { opacity: 1; transform: scale(1); }
|
||||||
|
}
|
||||||
36
src/main.tsx
Normal file
36
src/main.tsx
Normal file
@@ -0,0 +1,36 @@
|
|||||||
|
import React from 'react'
|
||||||
|
import ReactDOM from 'react-dom/client'
|
||||||
|
import { BrowserRouter } from 'react-router-dom'
|
||||||
|
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
|
||||||
|
import { Toaster } from 'react-hot-toast'
|
||||||
|
import App from './App.tsx'
|
||||||
|
import './index.css'
|
||||||
|
|
||||||
|
const queryClient = new QueryClient({
|
||||||
|
defaultOptions: {
|
||||||
|
queries: {
|
||||||
|
retry: 1,
|
||||||
|
refetchOnWindowFocus: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
ReactDOM.createRoot(document.getElementById('root')!).render(
|
||||||
|
<React.StrictMode>
|
||||||
|
<QueryClientProvider client={queryClient}>
|
||||||
|
<BrowserRouter>
|
||||||
|
<App />
|
||||||
|
<Toaster
|
||||||
|
position="top-right"
|
||||||
|
toastOptions={{
|
||||||
|
duration: 4000,
|
||||||
|
style: {
|
||||||
|
background: '#363636',
|
||||||
|
color: '#fff',
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</BrowserRouter>
|
||||||
|
</QueryClientProvider>
|
||||||
|
</React.StrictMode>,
|
||||||
|
)
|
||||||
877
src/pages/ActorDetail.tsx
Normal file
877
src/pages/ActorDetail.tsx
Normal file
@@ -0,0 +1,877 @@
|
|||||||
|
import { useParams, useNavigate } from 'react-router-dom'
|
||||||
|
import { motion } from 'framer-motion'
|
||||||
|
import {
|
||||||
|
ArrowLeft,
|
||||||
|
User,
|
||||||
|
Film,
|
||||||
|
Tv,
|
||||||
|
Video,
|
||||||
|
Heart,
|
||||||
|
Play,
|
||||||
|
Calendar,
|
||||||
|
MapPin,
|
||||||
|
Star,
|
||||||
|
Activity,
|
||||||
|
Ruler,
|
||||||
|
Weight,
|
||||||
|
Palette,
|
||||||
|
Scissors,
|
||||||
|
Eye,
|
||||||
|
Globe,
|
||||||
|
Loader2
|
||||||
|
} from 'lucide-react'
|
||||||
|
import { useActor } from '../hooks/useApi'
|
||||||
|
|
||||||
|
interface ActorDetailProps {
|
||||||
|
viewMode?: 'grid' | 'list'
|
||||||
|
gridColumns?: number
|
||||||
|
onViewModeChange?: (mode: 'grid' | 'list') => void
|
||||||
|
onGridColumnsChange?: (columns: number) => void
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ActorDetail {
|
||||||
|
id: number
|
||||||
|
name: string
|
||||||
|
thumbnail_path?: string
|
||||||
|
metadata?: any
|
||||||
|
movies?: any[]
|
||||||
|
tvshows?: any[]
|
||||||
|
adult_videos?: any[]
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function ActorDetail({
|
||||||
|
viewMode = 'grid',
|
||||||
|
gridColumns = 4,
|
||||||
|
onViewModeChange,
|
||||||
|
onGridColumnsChange
|
||||||
|
}: ActorDetailProps) {
|
||||||
|
const { id } = useParams<{ id: string }>()
|
||||||
|
const navigate = useNavigate()
|
||||||
|
const actorId = parseInt(id || '0')
|
||||||
|
|
||||||
|
const { data: actor, isLoading, error } = useActor(actorId)
|
||||||
|
|
||||||
|
const handleBack = () => {
|
||||||
|
navigate('/actors')
|
||||||
|
}
|
||||||
|
|
||||||
|
const getActorImage = (actor: ActorDetail) => {
|
||||||
|
if (actor.thumbnail_path) {
|
||||||
|
// If it's already a full HTTP URL, use as-is
|
||||||
|
if (actor.thumbnail_path.startsWith('http')) {
|
||||||
|
return actor.thumbnail_path
|
||||||
|
}
|
||||||
|
|
||||||
|
// If it starts with /images/, use as-is (already correct path)
|
||||||
|
if (actor.thumbnail_path.startsWith('/images/')) {
|
||||||
|
return `${(import.meta as any).env?.VITE_API_URL?.replace('/api', '') || ''}${actor.thumbnail_path}`
|
||||||
|
}
|
||||||
|
|
||||||
|
// If it's a relative path without /images/, add the prefix
|
||||||
|
return `${(import.meta as any).env?.VITE_API_URL?.replace('/api', '') || ''}/images/${actor.thumbnail_path}`
|
||||||
|
}
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
|
||||||
|
const renderMeasurements = (actor: ActorDetail) => {
|
||||||
|
const metadata = actor.metadata ? (typeof actor.metadata === 'string' ? JSON.parse(actor.metadata) : actor.metadata) : {}
|
||||||
|
const measurements = metadata.measurements || {}
|
||||||
|
|
||||||
|
if (!Object.keys(measurements).length && !metadata.height && !metadata.weight && !metadata.cup_size && !metadata.hair_color && !metadata.eye_color) return null
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="bg-dark-surface rounded-2xl border border-dark-border p-6 shadow-lg">
|
||||||
|
<div className="flex items-center gap-2 pb-4 border-b border-white/5">
|
||||||
|
<Activity className="text-brand-500" />
|
||||||
|
<h3 className="font-bold text-white text-lg">Physical Information</h3>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-1 gap-3 mt-4">
|
||||||
|
{metadata.height && (
|
||||||
|
<div className="flex items-center gap-3 p-3 rounded-xl bg-white/5 border border-white/5 hover:bg-white/10 transition-colors">
|
||||||
|
<div className="p-2 rounded-lg bg-brand-500/20 text-brand-400">
|
||||||
|
<Ruler className="w-4 h-4" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div className="text-[10px] uppercase tracking-wider font-bold text-slate-500">Height</div>
|
||||||
|
<div className="text-sm font-medium text-slate-200">{metadata.height}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{metadata.weight && (
|
||||||
|
<div className="flex items-center gap-3 p-3 rounded-xl bg-white/5 border border-white/5 hover:bg-white/10 transition-colors">
|
||||||
|
<div className="p-2 rounded-lg bg-brand-500/20 text-brand-400">
|
||||||
|
<Weight className="w-4 h-4" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div className="text-[10px] uppercase tracking-wider font-bold text-slate-500">Weight</div>
|
||||||
|
<div className="text-sm font-medium text-slate-200">{metadata.weight}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{measurements.bust && measurements.waist && measurements.hips && (
|
||||||
|
<div className="pt-2">
|
||||||
|
<div className="text-[10px] uppercase tracking-wider font-bold text-slate-500 mb-2">Measurements</div>
|
||||||
|
<div className="grid grid-cols-3 gap-2">
|
||||||
|
<div className="text-center p-2 rounded-lg bg-white/5 border border-white/5">
|
||||||
|
<div className="text-[9px] uppercase font-bold text-slate-500">Bust</div>
|
||||||
|
<div className="text-sm font-bold text-white">{measurements.bust}</div>
|
||||||
|
</div>
|
||||||
|
<div className="text-center p-2 rounded-lg bg-white/5 border border-white/5">
|
||||||
|
<div className="text-[9px] uppercase font-bold text-slate-500">Waist</div>
|
||||||
|
<div className="text-sm font-bold text-white">{measurements.waist}</div>
|
||||||
|
</div>
|
||||||
|
<div className="text-center p-2 rounded-lg bg-white/5 border border-white/5">
|
||||||
|
<div className="text-[9px] uppercase font-bold text-slate-500">Hips</div>
|
||||||
|
<div className="text-sm font-bold text-white">{measurements.hips}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{metadata.cup_size && (
|
||||||
|
<div className="flex items-center gap-3 p-3 rounded-xl bg-white/5 border border-white/5 hover:bg-white/10 transition-colors">
|
||||||
|
<div className="p-2 rounded-lg bg-brand-500/20 text-brand-400">
|
||||||
|
<Heart className="w-4 h-4" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div className="text-[10px] uppercase tracking-wider font-bold text-slate-500">Cup Size</div>
|
||||||
|
<div className="text-sm font-medium text-slate-200">{metadata.cup_size}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div className="grid grid-cols-2 gap-3">
|
||||||
|
{metadata.hair_color && (
|
||||||
|
<div className="flex items-center gap-3 p-3 rounded-xl bg-white/5 border border-white/5 hover:bg-white/10 transition-colors">
|
||||||
|
<div className="p-2 rounded-lg bg-brand-500/20 text-brand-400">
|
||||||
|
<Scissors className="w-4 h-4" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div className="text-[10px] uppercase tracking-wider font-bold text-slate-500">Hair</div>
|
||||||
|
<div className="text-sm font-medium text-slate-200">{metadata.hair_color}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{metadata.eye_color && (
|
||||||
|
<div className="flex items-center gap-3 p-3 rounded-xl bg-white/5 border border-white/5 hover:bg-white/10 transition-colors">
|
||||||
|
<div className="p-2 rounded-lg bg-brand-500/20 text-brand-400">
|
||||||
|
<Eye className="w-4 h-4" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div className="text-[10px] uppercase tracking-wider font-bold text-slate-500">Eyes</div>
|
||||||
|
<div className="text-sm font-medium text-slate-200">{metadata.eye_color}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
{metadata.piercings && (
|
||||||
|
<div className="pt-2">
|
||||||
|
<div className="text-[10px] uppercase tracking-wider font-bold text-slate-500 mb-2">Piercings</div>
|
||||||
|
<p className="text-sm text-slate-300">{metadata.piercings}</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{metadata.tattoos && (
|
||||||
|
<div className="pt-2">
|
||||||
|
<div className="text-[10px] uppercase tracking-wider font-bold text-slate-500 mb-2 flex items-center gap-2">
|
||||||
|
<Palette size={14} /> Tattoos
|
||||||
|
</div>
|
||||||
|
<p className="text-sm text-slate-300">{metadata.tattoos}</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const renderPersonalInfo = (actor: ActorDetail) => {
|
||||||
|
const metadata = actor.metadata ? (typeof actor.metadata === 'string' ? JSON.parse(actor.metadata) : actor.metadata) : {}
|
||||||
|
|
||||||
|
if (!metadata.birth_date && !metadata.birth_place && !metadata.nationality && !metadata.ethnicity && !metadata.age) return null
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="bg-dark-surface rounded-2xl border border-dark-border p-6 shadow-lg">
|
||||||
|
<div className="flex items-center gap-2 pb-4 border-b border-white/5">
|
||||||
|
<User className="text-brand-500" />
|
||||||
|
<h3 className="font-bold text-white text-lg">Personal Information</h3>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-1 gap-3 mt-4">
|
||||||
|
{metadata.birth_date && (
|
||||||
|
<div className="flex items-center gap-3 p-3 rounded-xl bg-white/5 border border-white/5 hover:bg-white/10 transition-colors">
|
||||||
|
<div className="p-2 rounded-lg bg-brand-500/20 text-brand-400">
|
||||||
|
<Calendar className="w-4 h-4" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div className="text-[10px] uppercase tracking-wider font-bold text-slate-500">Birth Date</div>
|
||||||
|
<div className="text-sm font-medium text-slate-200">{new Date(metadata.birth_date).toLocaleDateString()}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{metadata.age && (
|
||||||
|
<div className="flex items-center gap-3 p-3 rounded-xl bg-white/5 border border-white/5 hover:bg-white/10 transition-colors">
|
||||||
|
<div className="p-2 rounded-lg bg-brand-500/20 text-brand-400">
|
||||||
|
<Star className="w-4 h-4" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div className="text-[10px] uppercase tracking-wider font-bold text-slate-500">Age</div>
|
||||||
|
<div className="text-sm font-medium text-slate-200">{metadata.age}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{metadata.birth_place && (
|
||||||
|
<div className="flex items-center gap-3 p-3 rounded-xl bg-white/5 border border-white/5 hover:bg-white/10 transition-colors">
|
||||||
|
<div className="p-2 rounded-lg bg-brand-500/20 text-brand-400">
|
||||||
|
<MapPin className="w-4 h-4" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div className="text-[10px] uppercase tracking-wider font-bold text-slate-500">Birth Place</div>
|
||||||
|
<div className="text-sm font-medium text-slate-200">{metadata.birth_place}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{metadata.nationality && (
|
||||||
|
<div className="flex items-center gap-3 p-3 rounded-xl bg-white/5 border border-white/5 hover:bg-white/10 transition-colors">
|
||||||
|
<div className="p-2 rounded-lg bg-brand-500/20 text-brand-400">
|
||||||
|
<Globe className="w-4 h-4" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div className="text-[10px] uppercase tracking-wider font-bold text-slate-500">Nationality</div>
|
||||||
|
<div className="text-sm font-medium text-slate-200">{metadata.nationality}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{metadata.ethnicity && (
|
||||||
|
<div className="flex items-center gap-3 p-3 rounded-xl bg-white/5 border border-white/5 hover:bg-white/10 transition-colors">
|
||||||
|
<div className="p-2 rounded-lg bg-brand-500/20 text-brand-400">
|
||||||
|
<User className="w-4 h-4" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div className="text-[10px] uppercase tracking-wider font-bold text-slate-500">Ethnicity</div>
|
||||||
|
<div className="text-sm font-medium text-slate-200">{metadata.ethnicity}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{metadata.gender && (
|
||||||
|
<div className="flex items-center gap-3 p-3 rounded-xl bg-white/5 border border-white/5 hover:bg-white/10 transition-colors">
|
||||||
|
<div className="p-2 rounded-lg bg-brand-500/20 text-brand-400">
|
||||||
|
<User className="w-4 h-4" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div className="text-[10px] uppercase tracking-wider font-bold text-slate-500">Gender</div>
|
||||||
|
<div className="text-sm font-medium text-slate-200 capitalize">{metadata.gender}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const renderCareerInfo = (actor: ActorDetail) => {
|
||||||
|
const metadata = actor.metadata ? (typeof actor.metadata === 'string' ? JSON.parse(actor.metadata) : actor.metadata) : {}
|
||||||
|
|
||||||
|
if (!metadata.career_length && !metadata.debut_year && !metadata.retirement_year && !metadata.scene_count) return null
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="bg-dark-surface rounded-2xl border border-dark-border p-6 shadow-lg">
|
||||||
|
<div className="flex items-center gap-2 pb-4 border-b border-white/5">
|
||||||
|
<Film className="text-brand-500" />
|
||||||
|
<h3 className="font-bold text-white text-lg">Career Information</h3>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-1 gap-3 mt-4">
|
||||||
|
{metadata.career_length && (
|
||||||
|
<div className="flex items-center gap-3 p-3 rounded-xl bg-white/5 border border-white/5 hover:bg-white/10 transition-colors">
|
||||||
|
<div className="p-2 rounded-lg bg-brand-500/20 text-brand-400">
|
||||||
|
<Calendar className="w-4 h-4" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div className="text-[10px] uppercase tracking-wider font-bold text-slate-500">Career Length</div>
|
||||||
|
<div className="text-sm font-medium text-slate-200">{metadata.career_length}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{metadata.debut_year && (
|
||||||
|
<div className="flex items-center gap-3 p-3 rounded-xl bg-white/5 border border-white/5 hover:bg-white/10 transition-colors">
|
||||||
|
<div className="p-2 rounded-lg bg-brand-500/20 text-brand-400">
|
||||||
|
<Star className="w-4 h-4" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div className="text-[10px] uppercase tracking-wider font-bold text-slate-500">Debut Year</div>
|
||||||
|
<div className="text-sm font-medium text-slate-200">{metadata.debut_year}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{metadata.retirement_year && (
|
||||||
|
<div className="flex items-center gap-3 p-3 rounded-xl bg-white/5 border border-white/5 hover:bg-white/10 transition-colors">
|
||||||
|
<div className="p-2 rounded-lg bg-brand-500/20 text-brand-400">
|
||||||
|
<Calendar className="w-4 h-4" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div className="text-[10px] uppercase tracking-wider font-bold text-slate-500">Retirement Year</div>
|
||||||
|
<div className="text-sm font-medium text-slate-200">{metadata.retirement_year}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{metadata.scene_count && (
|
||||||
|
<div className="flex items-center gap-3 p-3 rounded-xl bg-white/5 border border-white/5 hover:bg-white/10 transition-colors">
|
||||||
|
<div className="p-2 rounded-lg bg-brand-500/20 text-brand-400">
|
||||||
|
<Film className="w-4 h-4" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div className="text-[10px] uppercase tracking-wider font-bold text-slate-500">Scene Count</div>
|
||||||
|
<div className="text-sm font-medium text-slate-200">{metadata.scene_count}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{metadata.aliases && metadata.aliases.length > 0 && (
|
||||||
|
<div className="pt-2">
|
||||||
|
<div className="text-[10px] uppercase tracking-wider font-bold text-slate-500 mb-2">Aliases</div>
|
||||||
|
<div className="flex flex-wrap gap-2">
|
||||||
|
{metadata.aliases.map((alias: string, index: number) => (
|
||||||
|
<span key={index} className="px-2.5 py-1 rounded-md bg-slate-800 text-slate-300 text-xs border border-white/5">
|
||||||
|
{alias}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const renderBiography = (actor: ActorDetail) => {
|
||||||
|
const metadata = actor.metadata ? (typeof actor.metadata === 'string' ? JSON.parse(actor.metadata) : actor.metadata) : {}
|
||||||
|
|
||||||
|
if (!metadata.biography && !metadata.details) return null
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="bg-dark-surface rounded-2xl border border-dark-border p-6 shadow-lg">
|
||||||
|
<div className="flex items-center gap-2 pb-4 border-b border-white/5">
|
||||||
|
<User className="text-brand-500" />
|
||||||
|
<h3 className="font-bold text-white text-lg">Biography</h3>
|
||||||
|
</div>
|
||||||
|
<div className="mt-4 space-y-3">
|
||||||
|
{metadata.biography && (
|
||||||
|
<p className="text-slate-300 leading-relaxed">{metadata.biography}</p>
|
||||||
|
)}
|
||||||
|
{metadata.details && (
|
||||||
|
<p className="text-slate-300 leading-relaxed">{metadata.details}</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const renderSocialMedia = (actor: ActorDetail) => {
|
||||||
|
const metadata = actor.metadata ? (typeof actor.metadata === 'string' ? JSON.parse(actor.metadata) : actor.metadata) : {}
|
||||||
|
const socialMedia = metadata.social_media || {}
|
||||||
|
|
||||||
|
if (!socialMedia.website && !metadata.stash_url) return null
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="bg-dark-surface rounded-2xl border border-dark-border p-6 shadow-lg">
|
||||||
|
<div className="flex items-center gap-2 pb-4 border-b border-white/5">
|
||||||
|
<Globe className="text-brand-500" />
|
||||||
|
<h3 className="font-bold text-white text-lg">Social Media & Links</h3>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-3 mt-4">
|
||||||
|
{socialMedia.website && (
|
||||||
|
<a
|
||||||
|
href={socialMedia.website}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="flex items-center gap-3 p-3 rounded-xl bg-white/5 border border-white/5 hover:bg-white/10 hover:border-brand-500/40 transition-all group"
|
||||||
|
>
|
||||||
|
<div className="p-2 rounded-lg bg-brand-500/20 text-brand-400">
|
||||||
|
<Globe className="w-4 h-4" />
|
||||||
|
</div>
|
||||||
|
<div className="flex-1">
|
||||||
|
<div className="text-[10px] uppercase tracking-wider font-bold text-slate-500">Website</div>
|
||||||
|
<div className="text-sm font-medium text-slate-200 group-hover:text-brand-400 transition-colors truncate">
|
||||||
|
{socialMedia.website}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
)}
|
||||||
|
{metadata.stash_url && (
|
||||||
|
<a
|
||||||
|
href={metadata.stash_url}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="flex items-center gap-3 p-3 rounded-xl bg-white/5 border border-white/5 hover:bg-white/10 hover:border-brand-500/40 transition-all group"
|
||||||
|
>
|
||||||
|
<div className="p-2 rounded-lg bg-brand-500/20 text-brand-400">
|
||||||
|
<Heart className="w-4 h-4" />
|
||||||
|
</div>
|
||||||
|
<div className="flex-1">
|
||||||
|
<div className="text-[10px] uppercase tracking-wider font-bold text-slate-500">Stash Profile</div>
|
||||||
|
<div className="text-sm font-medium text-slate-200 group-hover:text-brand-400 transition-colors">
|
||||||
|
View Profile
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const renderMediaCard = (media: any, type: 'movie' | 'tvshow' | 'adult') => {
|
||||||
|
const getIcon = () => {
|
||||||
|
switch (type) {
|
||||||
|
case 'movie': return <Film className="w-5 h-5" />
|
||||||
|
case 'tvshow': return <Tv className="w-5 h-5" />
|
||||||
|
case 'adult': return <Video className="w-5 h-5 text-pink-500" />
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const getImage = () => {
|
||||||
|
if (media.poster_url || media.thumbnail_path || media.screenshot_url) {
|
||||||
|
const imagePath = media.poster_url || media.thumbnail_path || media.screenshot_url
|
||||||
|
|
||||||
|
if (imagePath.startsWith('http')) {
|
||||||
|
return imagePath
|
||||||
|
}
|
||||||
|
|
||||||
|
// If it starts with /images/, use as-is (already correct path)
|
||||||
|
if (imagePath.startsWith('/images/')) {
|
||||||
|
return `${(import.meta as any).env?.VITE_API_URL?.replace('/api', '') || ''}${imagePath}`
|
||||||
|
}
|
||||||
|
|
||||||
|
// If it's a relative path without /images/, add the prefix
|
||||||
|
return `${(import.meta as any).env?.VITE_API_URL?.replace('/api', '') || ''}/images/${imagePath}`
|
||||||
|
}
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
|
||||||
|
const getAspectRatio = () => {
|
||||||
|
// Check for poster_aspect_ratio first, then fall back to 2/3
|
||||||
|
return media.poster_aspect_ratio || 2/3
|
||||||
|
}
|
||||||
|
|
||||||
|
const getPosterStyle = () => {
|
||||||
|
const aspectRatio = getAspectRatio()
|
||||||
|
return {
|
||||||
|
aspectRatio: aspectRatio.toString(),
|
||||||
|
/*idth: '100%',
|
||||||
|
height: 'auto'*/
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const getTitle = () => {
|
||||||
|
return media.title || media.name || 'Unknown'
|
||||||
|
}
|
||||||
|
|
||||||
|
const getYear = () => {
|
||||||
|
return media.release_date ? new Date(media.release_date).getFullYear() : 'Unknown'
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleCardClick = () => {
|
||||||
|
switch (type) {
|
||||||
|
case 'movie':
|
||||||
|
navigate(`/movies/${media.id}`)
|
||||||
|
break
|
||||||
|
case 'tvshow':
|
||||||
|
navigate(`/tvshows/${media.id}`)
|
||||||
|
break
|
||||||
|
case 'adult':
|
||||||
|
navigate(`/adult/${media.id}`)
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// List View Component
|
||||||
|
if (viewMode === 'list') {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
onClick={handleCardClick}
|
||||||
|
className="group flex items-start gap-4 p-4 rounded-xl bg-dark-surface border border-dark-border hover:border-brand-500/40 hover:bg-slate-800/80 transition-all cursor-pointer overflow-hidden"
|
||||||
|
>
|
||||||
|
{/* Poster */}
|
||||||
|
<div className="w-16 h-24 rounded-lg bg-slate-900 shrink-0 overflow-hidden shadow-lg border border-white/5 relative">
|
||||||
|
<img src={getImage() || ''} alt={getTitle()} className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500" />
|
||||||
|
<div className="absolute top-1 left-1 px-1 rounded bg-black/60 text-[10px] font-bold text-white backdrop-blur-sm">
|
||||||
|
{media.rating || 'N/A'}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Info */}
|
||||||
|
<div className="flex-1 min-w-0 py-1">
|
||||||
|
<h4 className="font-bold text-white text-base leading-tight truncate group-hover:text-brand-400 transition-colors">{getTitle()}</h4>
|
||||||
|
<div className="flex flex-wrap items-center gap-x-2 gap-y-1 mt-1 text-xs text-slate-400">
|
||||||
|
<span>{getYear()}</span>
|
||||||
|
<span className="w-1 h-1 rounded-full bg-slate-600"></span>
|
||||||
|
<span className="uppercase tracking-wider font-medium">{type}</span>
|
||||||
|
{media.rating && typeof media.rating === 'number' && (
|
||||||
|
<>
|
||||||
|
<span className="w-1 h-1 rounded-full bg-slate-600"></span>
|
||||||
|
<span className="flex items-center gap-1">
|
||||||
|
<span className="text-yellow-400">★</span>
|
||||||
|
{media.rating.toFixed(1)}
|
||||||
|
</span>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-3 flex items-center gap-2">
|
||||||
|
<div className="px-2 py-1 rounded bg-brand-500/10 border border-brand-500/20 text-brand-300 text-xs font-medium truncate max-w-full">
|
||||||
|
{type === 'movie' ? 'Movie' : type === 'tvshow' ? 'TV Show' : 'Adult Video'}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Hover Arrow */}
|
||||||
|
<div className="absolute right-4 top-1/2 -translate-y-1/2 opacity-0 group-hover:opacity-100 transition-opacity transform translate-x-2 group-hover:translate-x-0">
|
||||||
|
<ArrowLeft className="rotate-180 text-slate-500" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Grid View Component (original)
|
||||||
|
return (
|
||||||
|
<motion.div
|
||||||
|
whileHover={{ scale: 1.02 }}
|
||||||
|
onClick={handleCardClick}
|
||||||
|
className="bg-slate-50 dark:bg-slate-800 rounded-lg border border-slate-200 dark:border-slate-700 overflow-hidden hover:shadow-lg transition-shadow cursor-pointer"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="relative bg-slate-200 dark:bg-slate-700"
|
||||||
|
style={getPosterStyle()}
|
||||||
|
>
|
||||||
|
{getImage() ? (
|
||||||
|
<img
|
||||||
|
src={getImage()}
|
||||||
|
alt={getTitle()}
|
||||||
|
className="w-full h-full object-cover"
|
||||||
|
onError={(e) => {
|
||||||
|
console.error('Failed to load image:', getImage(), 'for media:', getTitle())
|
||||||
|
// Set a fallback background
|
||||||
|
const target = e.target as HTMLImageElement
|
||||||
|
target.style.display = 'none'
|
||||||
|
target.parentElement?.classList.add('bg-gradient-to-br', 'from-gray-300', 'to-gray-400', 'dark:from-gray-600', 'dark:to-gray-700')
|
||||||
|
// Add icon as fallback
|
||||||
|
const iconDiv = document.createElement('div')
|
||||||
|
iconDiv.className = 'w-full h-full flex items-center justify-center'
|
||||||
|
iconDiv.innerHTML = '<div class="text-gray-500 text-2xl">🎬</div>'
|
||||||
|
target.parentElement?.appendChild(iconDiv)
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<div className="w-full h-full flex items-center justify-center bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-600 dark:to-gray-700">
|
||||||
|
{getIcon()}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Play Button Overlay */}
|
||||||
|
<div className="absolute inset-0 bg-black/40 opacity-0 hover:opacity-100 transition-opacity flex items-center justify-center">
|
||||||
|
<Play className="w-12 h-12 text-white" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="p-4">
|
||||||
|
<h4 className="font-semibold text-slate-900 dark:text-slate-100 truncate mb-1">
|
||||||
|
{getTitle()}
|
||||||
|
</h4>
|
||||||
|
<div className="flex items-center justify-between text-sm text-gray-600 dark:text-gray-400">
|
||||||
|
<span>{getYear()}</span>
|
||||||
|
{media.rating && typeof media.rating === 'number' && (
|
||||||
|
<span className="flex items-center gap-1">
|
||||||
|
<span>⭐</span>
|
||||||
|
{media.rating.toFixed(1)}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isLoading) {
|
||||||
|
return (
|
||||||
|
<div className="flex items-center justify-center h-full">
|
||||||
|
<div className="flex flex-col items-center gap-4">
|
||||||
|
<Loader2 className="animate-spin text-brand-500" size={48} />
|
||||||
|
<div className="text-slate-400">Loading actor details...</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (error || !actor) {
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col items-center justify-center h-full">
|
||||||
|
<div className="text-red-400 mb-4">Failed to load actor details</div>
|
||||||
|
<button
|
||||||
|
onClick={handleBack}
|
||||||
|
className="px-4 py-2 bg-brand-500 hover:bg-brand-400 text-white rounded-lg transition-colors"
|
||||||
|
>
|
||||||
|
Back to Actors
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const movies = actor.movies || []
|
||||||
|
const tvshows = actor.tvshows || []
|
||||||
|
const adultVideos = actor.adult_videos || []
|
||||||
|
const hasAdultContent = adultVideos.length > 0
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="h-full w-full flex flex-col overflow-hidden animate-in fade-in slide-in-from-right-4 duration-300 relative">
|
||||||
|
|
||||||
|
{/* Modern Header / Banner */}
|
||||||
|
<div className="relative h-64 shrink-0 overflow-hidden">
|
||||||
|
{/* Blurred Background */}
|
||||||
|
<div className="absolute inset-0">
|
||||||
|
{actor.thumbnail_path ? (
|
||||||
|
<img src={getActorImage(actor) || ''} alt="" className="w-full h-full object-cover blur-2xl opacity-40 scale-110" />
|
||||||
|
) : (
|
||||||
|
<div className="w-full h-full bg-gradient-to-br from-brand-900 to-slate-900" />
|
||||||
|
)}
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-b from-transparent via-dark-bg/50 to-dark-bg" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Navigation */}
|
||||||
|
<div className="absolute top-0 left-0 p-6 z-20">
|
||||||
|
<button
|
||||||
|
onClick={handleBack}
|
||||||
|
className="flex items-center gap-2 px-4 py-2 bg-black/20 hover:bg-black/40 backdrop-blur-md border border-white/10 text-white rounded-full transition-all group"
|
||||||
|
>
|
||||||
|
<ArrowLeft size={20} className="group-hover:-translate-x-1 transition-transform" />
|
||||||
|
<span className="font-medium">Zurück</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Content Container (Overlapping Header) */}
|
||||||
|
<div className="flex-1 overflow-y-auto custom-scrollbar -mt-32 relative z-10">
|
||||||
|
{/* Profile Identity Card */}
|
||||||
|
<div className="flex flex-col md:flex-row items-end md:items-start gap-8 mb-12">
|
||||||
|
{/* Avatar */}
|
||||||
|
<div className="w-48 h-48 rounded-2xl overflow-hidden border-4 border-dark-bg shadow-2xl bg-slate-800 shrink-0 relative group">
|
||||||
|
{actor.thumbnail_path ? (
|
||||||
|
<img
|
||||||
|
src={getActorImage(actor) || ''}
|
||||||
|
alt={actor.name}
|
||||||
|
className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
|
||||||
|
onError={(e) => {
|
||||||
|
console.error('Failed to load actor thumbnail:', getActorImage(actor), 'for actor:', actor.name)
|
||||||
|
const target = e.target as HTMLImageElement
|
||||||
|
target.style.display = 'none'
|
||||||
|
const parent = target.parentElement
|
||||||
|
if (parent) {
|
||||||
|
parent.innerHTML = '<div class="w-full h-full flex items-center justify-center bg-gradient-to-br from-gray-600 to-gray-800"><svg class="w-12 h-12 text-white/50" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM12 10.5a5.25 5.25 0 007.5 0m-7.5 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25c0-.621-.504-1.125-1.125-1.125h-1.5z" /></svg></div>'
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<div className="w-full h-full flex items-center justify-center text-slate-600">
|
||||||
|
<User size={64} />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Name & Bio */}
|
||||||
|
<div className="flex-1 pt-4 min-w-0">
|
||||||
|
<div className="flex flex-wrap items-center gap-4 mb-2">
|
||||||
|
<h1 className="text-4xl md:text-6xl font-black text-white tracking-tight drop-shadow-lg">{actor.name}</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Quick Stats Line */}
|
||||||
|
<div className="flex flex-wrap items-center gap-4 text-sm font-medium text-slate-300 mb-6">
|
||||||
|
{actor.metadata?.nationality && (
|
||||||
|
<div className="flex items-center gap-1.5 text-slate-400">
|
||||||
|
<MapPin size={16} className="text-brand-500" />
|
||||||
|
{actor.metadata.nationality}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div className="h-1 w-1 rounded-full bg-slate-600"></div>
|
||||||
|
<div className="flex items-center gap-1.5 text-slate-400">
|
||||||
|
<Film size={16} className="text-blue-500" />
|
||||||
|
<span className="text-white">{movies.length + tvshows.length + adultVideos.length}</span> Werke
|
||||||
|
</div>
|
||||||
|
{actor.metadata?.age && (
|
||||||
|
<>
|
||||||
|
<div className="h-1 w-1 rounded-full bg-slate-600"></div>
|
||||||
|
<div className="flex items-center gap-1.5 text-slate-400">
|
||||||
|
<Star size={16} className="text-yellow-500" />
|
||||||
|
<span className="text-white">{actor.metadata.age}</span> Jahre
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Bio */}
|
||||||
|
<p className="text-slate-400 text-lg leading-relaxed max-w-4xl">
|
||||||
|
{actor.metadata?.biography || actor.metadata?.details || (
|
||||||
|
<span className="italic opacity-60">Keine Biografie verfügbar.</span>
|
||||||
|
)}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 xl:grid-cols-4 gap-8">
|
||||||
|
|
||||||
|
{/* LEFT COLUMN: Personal & Physical Info */}
|
||||||
|
<div className="xl:col-span-1 space-y-6">
|
||||||
|
{/* Personal Information */}
|
||||||
|
{renderPersonalInfo(actor)}
|
||||||
|
|
||||||
|
{/* Physical Information - Only for adult actors */}
|
||||||
|
{hasAdultContent && renderMeasurements(actor)}
|
||||||
|
|
||||||
|
{/* Career Information */}
|
||||||
|
{renderCareerInfo(actor)}
|
||||||
|
|
||||||
|
{/* Biography */}
|
||||||
|
{renderBiography(actor)}
|
||||||
|
|
||||||
|
{/* Social Media & Links */}
|
||||||
|
{renderSocialMedia(actor)}
|
||||||
|
|
||||||
|
{/* Quick Stats */}
|
||||||
|
<div className="bg-dark-surface rounded-2xl border border-dark-border p-6 shadow-lg">
|
||||||
|
<div className="flex items-center gap-2 pb-4 border-b border-white/5">
|
||||||
|
<User className="text-brand-500" />
|
||||||
|
<h3 className="font-bold text-white text-lg">Quick Stats</h3>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-3 mt-4">
|
||||||
|
<div className="flex justify-between items-center p-3 rounded-xl bg-white/5 border border-white/5">
|
||||||
|
<span className="text-slate-400 text-sm">Total Appearances</span>
|
||||||
|
<span className="font-bold text-slate-200">
|
||||||
|
{movies.length + tvshows.length + adultVideos.length}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between items-center p-3 rounded-xl bg-white/5 border border-white/5">
|
||||||
|
<span className="text-slate-400 text-sm">Movies</span>
|
||||||
|
<span className="font-medium text-slate-200">{movies.length}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between items-center p-3 rounded-xl bg-white/5 border border-white/5">
|
||||||
|
<span className="text-slate-400 text-sm">TV Shows</span>
|
||||||
|
<span className="font-medium text-slate-200">{tvshows.length}</span>
|
||||||
|
</div>
|
||||||
|
{hasAdultContent && (
|
||||||
|
<div className="flex justify-between items-center p-3 rounded-xl bg-pink-500/10 border border-pink-500/20">
|
||||||
|
<span className="text-pink-400 text-sm">Adult Videos</span>
|
||||||
|
<span className="font-medium text-pink-400">
|
||||||
|
{adultVideos.length}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/* RIGHT COLUMN: Filmography */}
|
||||||
|
<div className="xl:col-span-3 space-y-8">
|
||||||
|
{/* Movies Section */}
|
||||||
|
{movies.length > 0 && (
|
||||||
|
<div className="bg-dark-surface rounded-2xl border border-dark-border p-6 shadow-lg">
|
||||||
|
<div className="flex items-center justify-between mb-6">
|
||||||
|
<h3 className="text-xl font-bold text-white flex items-center gap-2">
|
||||||
|
<div className="p-2 bg-blue-500/20 rounded-lg">
|
||||||
|
<Film className="w-5 h-5 text-blue-400" />
|
||||||
|
</div>
|
||||||
|
Movies
|
||||||
|
</h3>
|
||||||
|
<span className="text-sm font-medium text-slate-400 bg-slate-800/50 px-3 py-1 rounded-full border border-white/5">
|
||||||
|
{movies.length}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className={`grid gap-4 transition-all duration-500 ease-out ${
|
||||||
|
viewMode === 'grid'
|
||||||
|
? `grid-cols-2 md:grid-cols-3 lg:grid-cols-${Math.min(gridColumns, 4)} xl:grid-cols-${gridColumns}`
|
||||||
|
: 'grid-cols-1'
|
||||||
|
}`}>
|
||||||
|
{movies.map((movie: any) => (
|
||||||
|
<div key={movie.id}>
|
||||||
|
{renderMediaCard(movie, 'movie')}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* TV Shows Section */}
|
||||||
|
{tvshows.length > 0 && (
|
||||||
|
<div className="bg-dark-surface rounded-2xl border border-dark-border p-6 shadow-lg">
|
||||||
|
<div className="flex items-center justify-between mb-6">
|
||||||
|
<h3 className="text-xl font-bold text-white flex items-center gap-2">
|
||||||
|
<div className="p-2 bg-purple-500/20 rounded-lg">
|
||||||
|
<Tv className="w-5 h-5 text-purple-400" />
|
||||||
|
</div>
|
||||||
|
TV Shows
|
||||||
|
</h3>
|
||||||
|
<span className="text-sm font-medium text-slate-400 bg-slate-800/50 px-3 py-1 rounded-full border border-white/5">
|
||||||
|
{tvshows.length}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className={`grid gap-4 transition-all duration-500 ease-out ${
|
||||||
|
viewMode === 'grid'
|
||||||
|
? `grid-cols-2 md:grid-cols-3 lg:grid-cols-${Math.min(gridColumns, 4)} xl:grid-cols-${gridColumns}`
|
||||||
|
: 'grid-cols-1'
|
||||||
|
}`}>
|
||||||
|
{tvshows.map((tvshow: any) => (
|
||||||
|
<div key={tvshow.id}>
|
||||||
|
{renderMediaCard(tvshow, 'tvshow')}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Adult Content Section */}
|
||||||
|
{adultVideos.length > 0 && (
|
||||||
|
<div className="bg-gradient-to-br from-pink-500/10 to-purple-500/10 rounded-2xl border border-pink-500/20 p-6 shadow-lg">
|
||||||
|
<div className="flex items-center justify-between mb-6">
|
||||||
|
<h3 className="text-xl font-bold text-pink-400 flex items-center gap-2">
|
||||||
|
<div className="p-2 bg-pink-500/20 rounded-lg">
|
||||||
|
<Video className="w-5 h-5" />
|
||||||
|
</div>
|
||||||
|
Adult Videos
|
||||||
|
</h3>
|
||||||
|
<span className="text-sm font-medium text-pink-400 bg-pink-500/10 px-3 py-1 rounded-full border border-pink-500/20">
|
||||||
|
{adultVideos.length}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-pink-500/10 rounded-xl p-4 mb-6 border border-pink-500/20">
|
||||||
|
<div className="flex items-center gap-3 text-pink-300 mb-2">
|
||||||
|
<Heart className="w-5 h-5" />
|
||||||
|
<span className="font-semibold">Adult Content Warning</span>
|
||||||
|
</div>
|
||||||
|
<p className="text-pink-400 text-sm">
|
||||||
|
This section contains adult content. Please verify you are 18+ years old.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={`grid gap-4 transition-all duration-500 ease-out ${
|
||||||
|
viewMode === 'grid'
|
||||||
|
? `grid-cols-2 md:grid-cols-3 lg:grid-cols-${Math.min(gridColumns, 4)} xl:grid-cols-${gridColumns}`
|
||||||
|
: 'grid-cols-1'
|
||||||
|
}`}>
|
||||||
|
{adultVideos.map((video: any) => (
|
||||||
|
<div key={video.id}>
|
||||||
|
{renderMediaCard(video, 'adult')}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* No Content */}
|
||||||
|
{movies.length === 0 && tvshows.length === 0 && adultVideos.length === 0 && (
|
||||||
|
<div className="bg-dark-surface rounded-2xl border border-dark-border p-12 text-center shadow-lg">
|
||||||
|
<div className="text-slate-600 text-6xl mb-4">🎬</div>
|
||||||
|
<h3 className="text-xl font-bold text-slate-200 mb-3">
|
||||||
|
No Media Found
|
||||||
|
</h3>
|
||||||
|
<p className="text-slate-400 max-w-md mx-auto">
|
||||||
|
This actor hasn't appeared in any movies, TV shows, or adult content yet.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
704
src/pages/Actors.tsx
Normal file
704
src/pages/Actors.tsx
Normal file
@@ -0,0 +1,704 @@
|
|||||||
|
import React, { useState } from 'react'
|
||||||
|
import { motion, AnimatePresence } from 'framer-motion'
|
||||||
|
import { useNavigate } from 'react-router-dom'
|
||||||
|
import {
|
||||||
|
UserIcon,
|
||||||
|
PlayIcon,
|
||||||
|
FilmIcon,
|
||||||
|
TvIcon,
|
||||||
|
VideoCameraIcon,
|
||||||
|
MagnifyingGlassIcon,
|
||||||
|
FunnelIcon,
|
||||||
|
ArrowUpIcon,
|
||||||
|
ArrowDownIcon,
|
||||||
|
EyeIcon,
|
||||||
|
PlusIcon,
|
||||||
|
LockClosedIcon
|
||||||
|
} from '@heroicons/react/24/outline'
|
||||||
|
import { useActors } from '../hooks/useApi'
|
||||||
|
import { Tooltip } from '../components/MicroInteractions'
|
||||||
|
|
||||||
|
interface Actor {
|
||||||
|
id: number
|
||||||
|
name: string
|
||||||
|
thumbnail_path?: string
|
||||||
|
metadata?: any
|
||||||
|
movie_count?: number
|
||||||
|
tv_show_count?: number
|
||||||
|
adult_video_count?: number
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function Actors() {
|
||||||
|
// Load preferences from localStorage
|
||||||
|
const getStoredPreferences = () => {
|
||||||
|
const stored = localStorage.getItem('actorsPreferences')
|
||||||
|
return stored ? JSON.parse(stored) : {}
|
||||||
|
}
|
||||||
|
|
||||||
|
const [searchTerm, setSearchTerm] = useState('')
|
||||||
|
const [selectedGender, setSelectedGender] = useState(() => getStoredPreferences().gender || '')
|
||||||
|
const [showAdultOnly, setShowAdultOnly] = useState(() => getStoredPreferences().adult || false)
|
||||||
|
const [sortBy, setSortBy] = useState(() => getStoredPreferences().sortBy || 'name')
|
||||||
|
const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>(() => getStoredPreferences().sortOrder || 'asc')
|
||||||
|
const [showFilters, setShowFilters] = useState(false)
|
||||||
|
const [viewMode, setViewMode] = useState<'grid' | 'list' | 'cover'>(() => getStoredPreferences().viewMode || 'grid')
|
||||||
|
const [itemsPerPage, setItemsPerPage] = useState(() => getStoredPreferences().itemsPerPage || 20)
|
||||||
|
const [imageSize, setImageSize] = useState(() => getStoredPreferences().imageSize || 200)
|
||||||
|
const [preserveAspectRatio, setPreserveAspectRatio] = useState(() => getStoredPreferences().preserveAspectRatio !== false)
|
||||||
|
const [currentPage, setCurrentPage] = useState(1)
|
||||||
|
const navigate = useNavigate()
|
||||||
|
|
||||||
|
// Save preferences to localStorage
|
||||||
|
const savePreferences = (updates: any) => {
|
||||||
|
const preferences = {
|
||||||
|
gender: selectedGender,
|
||||||
|
adult: showAdultOnly,
|
||||||
|
sortBy,
|
||||||
|
sortOrder,
|
||||||
|
viewMode,
|
||||||
|
itemsPerPage,
|
||||||
|
imageSize,
|
||||||
|
preserveAspectRatio,
|
||||||
|
...updates
|
||||||
|
}
|
||||||
|
localStorage.setItem('actorsPreferences', JSON.stringify(preferences))
|
||||||
|
}
|
||||||
|
|
||||||
|
// Fetch actors
|
||||||
|
const { data: actorsData, isLoading, error } = useActors({
|
||||||
|
search: searchTerm || undefined,
|
||||||
|
gender: selectedGender || undefined,
|
||||||
|
adult: showAdultOnly || undefined,
|
||||||
|
sort: sortBy,
|
||||||
|
order: sortOrder,
|
||||||
|
page: currentPage,
|
||||||
|
per_page: itemsPerPage
|
||||||
|
})
|
||||||
|
|
||||||
|
const actors = actorsData?.items || []
|
||||||
|
const pagination = actorsData?.pagination
|
||||||
|
|
||||||
|
// Pagination handlers
|
||||||
|
const handlePreviousPage = () => {
|
||||||
|
if (pagination && currentPage > 1) {
|
||||||
|
setCurrentPage(currentPage - 1)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleNextPage = () => {
|
||||||
|
if (pagination && currentPage < pagination.last_page) {
|
||||||
|
setCurrentPage(currentPage + 1)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleActorClick = (actor: Actor) => {
|
||||||
|
navigate(`/actors/${actor.id}`)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Reset page when filters change
|
||||||
|
const handleFilterChange = () => {
|
||||||
|
setCurrentPage(1)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleSearch = (term: string) => {
|
||||||
|
setSearchTerm(term)
|
||||||
|
setCurrentPage(1)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleSort = (field: string) => {
|
||||||
|
let newOrder = 'asc'
|
||||||
|
if (sortBy === field) {
|
||||||
|
newOrder = sortOrder === 'asc' ? 'desc' : 'asc'
|
||||||
|
} else {
|
||||||
|
newOrder = 'asc'
|
||||||
|
}
|
||||||
|
|
||||||
|
setSortBy(field)
|
||||||
|
setSortOrder(newOrder as 'asc' | 'desc')
|
||||||
|
setCurrentPage(1)
|
||||||
|
savePreferences({ sortBy: field, sortOrder: newOrder })
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleGenderChange = (gender: string) => {
|
||||||
|
setSelectedGender(gender)
|
||||||
|
setCurrentPage(1)
|
||||||
|
savePreferences({ gender })
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleAdultChange = (adult: boolean) => {
|
||||||
|
setShowAdultOnly(adult)
|
||||||
|
setCurrentPage(1)
|
||||||
|
savePreferences({ adult })
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleViewModeChange = (mode: 'grid' | 'list' | 'cover') => {
|
||||||
|
setViewMode(mode)
|
||||||
|
savePreferences({ viewMode: mode })
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleItemsPerPageChange = (newItemsPerPage: number) => {
|
||||||
|
setItemsPerPage(newItemsPerPage)
|
||||||
|
setCurrentPage(1)
|
||||||
|
savePreferences({ itemsPerPage: newItemsPerPage })
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleImageSizeChange = (newImageSize: number) => {
|
||||||
|
setImageSize(newImageSize)
|
||||||
|
savePreferences({ imageSize: newImageSize })
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleAspectRatioChange = (newPreserveAspectRatio: boolean) => {
|
||||||
|
setPreserveAspectRatio(newPreserveAspectRatio)
|
||||||
|
savePreferences({ preserveAspectRatio: newPreserveAspectRatio })
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleClearFilters = () => {
|
||||||
|
setSelectedGender('')
|
||||||
|
setShowAdultOnly(false)
|
||||||
|
setSearchTerm('')
|
||||||
|
setCurrentPage(1)
|
||||||
|
savePreferences({ gender: '', adult: false })
|
||||||
|
}
|
||||||
|
|
||||||
|
// Mock data for filters
|
||||||
|
const genders = ['All', 'Male', 'Female', 'Non-binary']
|
||||||
|
|
||||||
|
// Sorting options
|
||||||
|
const sortOptions = [
|
||||||
|
{ value: 'name', label: 'Name' },
|
||||||
|
{ value: 'age', label: 'Age' },
|
||||||
|
{ value: 'media_count', label: 'Total Videos' },
|
||||||
|
{ value: 'movie_count', label: 'Movies' },
|
||||||
|
{ value: 'tv_show_count', label: 'TV Shows' },
|
||||||
|
{ value: 'adult_count', label: 'Adult Videos' }
|
||||||
|
]
|
||||||
|
|
||||||
|
const getActorImage = (actor: Actor) => {
|
||||||
|
if (actor.thumbnail_path) {
|
||||||
|
// If it's already a full HTTP URL, use as-is
|
||||||
|
if (actor.thumbnail_path.startsWith('http')) {
|
||||||
|
return actor.thumbnail_path
|
||||||
|
}
|
||||||
|
|
||||||
|
// If it starts with /images/, use as-is (already correct path)
|
||||||
|
if (actor.thumbnail_path.startsWith('/images/')) {
|
||||||
|
return `${(import.meta as any).env?.VITE_API_URL?.replace('/api', '') || ''}${actor.thumbnail_path}`
|
||||||
|
}
|
||||||
|
|
||||||
|
// If it's a relative path without /images/, add the prefix
|
||||||
|
return `${(import.meta as any).env?.VITE_API_URL?.replace('/api', '') || ''}/images/${actor.thumbnail_path}`
|
||||||
|
}
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
|
||||||
|
const renderMediaCount = (actor: Actor) => {
|
||||||
|
const movieCount = actor.movie_count || 0
|
||||||
|
const tvShowCount = actor.tv_show_count || 0
|
||||||
|
const adultCount = actor.adult_video_count || 0
|
||||||
|
const total = movieCount + tvShowCount + adultCount
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400">
|
||||||
|
{movieCount > 0 && (
|
||||||
|
<Tooltip content={`${movieCount} Movies`}>
|
||||||
|
<span className="flex items-center gap-1">
|
||||||
|
<FilmIcon className="w-4 h-4" />
|
||||||
|
{movieCount}
|
||||||
|
</span>
|
||||||
|
</Tooltip>
|
||||||
|
)}
|
||||||
|
{tvShowCount > 0 && (
|
||||||
|
<Tooltip content={`${tvShowCount} TV Shows`}>
|
||||||
|
<span className="flex items-center gap-1">
|
||||||
|
<TvIcon className="w-4 h-4" />
|
||||||
|
{tvShowCount}
|
||||||
|
</span>
|
||||||
|
</Tooltip>
|
||||||
|
)}
|
||||||
|
{adultCount > 0 && (
|
||||||
|
<Tooltip content={`${adultCount} Adult Videos`}>
|
||||||
|
<span className="flex items-center gap-1 text-pink-600 dark:text-pink-400">
|
||||||
|
<VideoCameraIcon className="w-4 h-4" />
|
||||||
|
{adultCount}
|
||||||
|
</span>
|
||||||
|
</Tooltip>
|
||||||
|
)}
|
||||||
|
<span className="text-gray-500">({total} total)</span>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const renderGender = (actor: Actor) => {
|
||||||
|
const gender = actor.metadata?.gender
|
||||||
|
if (!gender) return null
|
||||||
|
|
||||||
|
const genderColors = {
|
||||||
|
male: 'text-blue-600 dark:text-blue-400',
|
||||||
|
female: 'text-pink-600 dark:text-pink-400',
|
||||||
|
'non-binary': 'text-purple-600 dark:text-purple-400'
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<span className={`text-xs font-medium ${genderColors[gender.toLowerCase()] || 'text-gray-600 dark:text-gray-400'}`}>
|
||||||
|
{gender.charAt(0).toUpperCase()}
|
||||||
|
</span>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<motion.div
|
||||||
|
className="flex justify-between items-center"
|
||||||
|
initial={{ opacity: 0, y: -20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.5 }}
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<motion.h1
|
||||||
|
className="text-4xl font-bold text-slate-900 dark:text-slate-100 mb-2"
|
||||||
|
initial={{ opacity: 0, x: -20 }}
|
||||||
|
animate={{ opacity: 1, x: 0 }}
|
||||||
|
transition={{ delay: 0.1 }}
|
||||||
|
>
|
||||||
|
<span className="bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
|
||||||
|
Actors
|
||||||
|
</span>
|
||||||
|
</motion.h1>
|
||||||
|
<motion.p
|
||||||
|
className="text-slate-600 dark:text-slate-400"
|
||||||
|
initial={{ opacity: 0, x: -20 }}
|
||||||
|
animate={{ opacity: 1, x: 0 }}
|
||||||
|
transition={{ delay: 0.2 }}
|
||||||
|
>
|
||||||
|
Browse and discover actors from movies, TV shows, and adult content
|
||||||
|
</motion.p>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
<div className="min-h-screen transition-colors duration-300">
|
||||||
|
|
||||||
|
<div className="container mx-auto px-4 py-6">
|
||||||
|
{/* Search and Filters */}
|
||||||
|
<div className="flex flex-col lg:flex-row gap-4 mb-6">
|
||||||
|
{/* Search Bar */}
|
||||||
|
<div className="flex-1">
|
||||||
|
<div className="relative">
|
||||||
|
<MagnifyingGlassIcon className="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400" />
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="Search actors..."
|
||||||
|
value={searchTerm}
|
||||||
|
onChange={(e) => handleSearch(e.target.value)}
|
||||||
|
className="w-full pl-10 pr-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:ring-2 focus:ring-purple-500 focus:border-transparent"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Filter Toggle */}
|
||||||
|
<motion.button
|
||||||
|
onClick={() => setShowFilters(!showFilters)}
|
||||||
|
className="btn btn-secondary flex items-center gap-2"
|
||||||
|
whileHover={{ scale: 1.05 }}
|
||||||
|
whileTap={{ scale: 0.95 }}
|
||||||
|
>
|
||||||
|
<FunnelIcon className="w-4 h-4" />
|
||||||
|
Filters
|
||||||
|
</motion.button>
|
||||||
|
|
||||||
|
{/* View Mode Toggle */}
|
||||||
|
<div className="flex bg-gray-200 dark:bg-gray-700 rounded-lg p-1">
|
||||||
|
<button
|
||||||
|
onClick={() => handleViewModeChange('grid')}
|
||||||
|
className={`px-3 py-1 rounded text-sm font-medium transition-colors ${
|
||||||
|
viewMode === 'grid'
|
||||||
|
? 'bg-white dark:bg-gray-600 text-gray-900 dark:text-white shadow'
|
||||||
|
: 'text-gray-600 dark:text-gray-400'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
Grid
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => handleViewModeChange('list')}
|
||||||
|
className={`px-3 py-1 rounded text-sm font-medium transition-colors ${
|
||||||
|
viewMode === 'list'
|
||||||
|
? 'bg-white dark:bg-gray-600 text-gray-900 dark:text-white shadow'
|
||||||
|
: 'text-gray-600 dark:text-gray-400'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
List
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => handleViewModeChange('cover')}
|
||||||
|
className={`px-3 py-1 rounded text-sm font-medium transition-colors ${
|
||||||
|
viewMode === 'cover'
|
||||||
|
? 'bg-white dark:bg-gray-600 text-gray-900 dark:text-white shadow'
|
||||||
|
: 'text-gray-600 dark:text-gray-400'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
Cover
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Items Per Page Selector */}
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<span className="text-sm text-gray-600 dark:text-gray-400">Show:</span>
|
||||||
|
<select
|
||||||
|
value={itemsPerPage}
|
||||||
|
onChange={(e) => handleItemsPerPageChange(parseInt(e.target.value))}
|
||||||
|
className="px-2 py-1 text-sm border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-purple-500 focus:border-transparent"
|
||||||
|
>
|
||||||
|
<option value={10}>10</option>
|
||||||
|
<option value={20}>20</option>
|
||||||
|
<option value={50}>50</option>
|
||||||
|
<option value={100}>100</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Image Size Slider */}
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<span className="text-sm text-gray-600 dark:text-gray-400">Size:</span>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<span className="text-xs text-gray-500 dark:text-gray-400">S</span>
|
||||||
|
<input
|
||||||
|
type="range"
|
||||||
|
min="100"
|
||||||
|
max="400"
|
||||||
|
step="10"
|
||||||
|
value={imageSize}
|
||||||
|
onChange={(e) => handleImageSizeChange(parseInt(e.target.value))}
|
||||||
|
className="w-24 h-2 bg-gray-200 dark:bg-gray-700 rounded-lg appearance-none cursor-pointer accent-purple-500"
|
||||||
|
/>
|
||||||
|
<span className="text-xs text-gray-500 dark:text-gray-400">L</span>
|
||||||
|
<span className="text-xs text-gray-600 dark:text-gray-400 font-medium w-8">{imageSize}px</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Aspect Ratio Toggle */}
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<span className="text-sm text-gray-600 dark:text-gray-400">Aspect:</span>
|
||||||
|
<button
|
||||||
|
onClick={() => handleAspectRatioChange(!preserveAspectRatio)}
|
||||||
|
className={`px-3 py-1 rounded text-sm font-medium transition-colors ${
|
||||||
|
preserveAspectRatio
|
||||||
|
? 'bg-purple-600 text-white'
|
||||||
|
: 'bg-gray-200 dark:bg-gray-600 text-gray-700 dark:text-gray-300'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{preserveAspectRatio ? '2:3' : 'Stretch'}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Filter Panel */}
|
||||||
|
<AnimatePresence>
|
||||||
|
{showFilters && (
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, height: 0 }}
|
||||||
|
animate={{ opacity: 1, height: 'auto' }}
|
||||||
|
exit={{ opacity: 0, height: 0 }}
|
||||||
|
className="bg-white dark:bg-gray-800 rounded-xl p-4 mb-6 border border-gray-200 dark:border-gray-700"
|
||||||
|
>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||||
|
Gender
|
||||||
|
</label>
|
||||||
|
<select
|
||||||
|
value={selectedGender}
|
||||||
|
onChange={(e) => handleGenderChange(e.target.value)}
|
||||||
|
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-purple-500 focus:border-transparent"
|
||||||
|
>
|
||||||
|
{genders.map(gender => (
|
||||||
|
<option key={gender} value={gender === 'All' ? '' : gender}>
|
||||||
|
{gender}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||||
|
Adult Content Only
|
||||||
|
</label>
|
||||||
|
<select
|
||||||
|
value={showAdultOnly ? 'true' : 'false'}
|
||||||
|
onChange={(e) => handleAdultChange(e.target.value === 'true')}
|
||||||
|
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-purple-500 focus:border-transparent"
|
||||||
|
>
|
||||||
|
<option value="false">All Actors</option>
|
||||||
|
<option value="true">Adult Actors Only</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||||
|
Sort By
|
||||||
|
</label>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<select
|
||||||
|
value={sortBy}
|
||||||
|
onChange={(e) => handleSort(e.target.value)}
|
||||||
|
className="flex-1 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-purple-500 focus:border-transparent"
|
||||||
|
>
|
||||||
|
{sortOptions.map(option => (
|
||||||
|
<option key={option.value} value={option.value}>
|
||||||
|
{option.label}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<div className="flex flex-col gap-1">
|
||||||
|
<motion.button
|
||||||
|
onClick={() => handleSort(sortBy)}
|
||||||
|
className={`px-3 py-2 rounded-lg text-sm font-medium transition-colors ${
|
||||||
|
sortOrder === 'asc'
|
||||||
|
? 'bg-purple-600 text-white'
|
||||||
|
: 'bg-gray-200 dark:bg-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-500'
|
||||||
|
}`}
|
||||||
|
whileHover={{ scale: 1.05 }}
|
||||||
|
whileTap={{ scale: 0.95 }}
|
||||||
|
>
|
||||||
|
<ArrowUpIcon className="w-4 h-4" />
|
||||||
|
</motion.button>
|
||||||
|
<motion.button
|
||||||
|
onClick={() => handleSort(sortBy)}
|
||||||
|
className={`px-3 py-2 rounded-lg text-sm font-medium transition-colors ${
|
||||||
|
sortOrder === 'desc'
|
||||||
|
? 'bg-purple-600 text-white'
|
||||||
|
: 'bg-gray-200 dark:bg-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-500'
|
||||||
|
}`}
|
||||||
|
whileHover={{ scale: 1.05 }}
|
||||||
|
whileTap={{ scale: 0.95 }}
|
||||||
|
>
|
||||||
|
<ArrowDownIcon className="w-4 h-4" />
|
||||||
|
</motion.button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-end">
|
||||||
|
<button
|
||||||
|
onClick={handleClearFilters}
|
||||||
|
className="btn btn-secondary w-full"
|
||||||
|
>
|
||||||
|
Clear Filters
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
</AnimatePresence>
|
||||||
|
|
||||||
|
{/* Results Count */}
|
||||||
|
<div className="flex items-center justify-between mb-6">
|
||||||
|
<div className="text-gray-600 dark:text-gray-400">
|
||||||
|
Showing {actors.length} of {pagination?.total || 0} actors
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Loading State */}
|
||||||
|
{isLoading && (
|
||||||
|
<div className="flex justify-center items-center py-12">
|
||||||
|
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500"></div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Error State */}
|
||||||
|
{error && (
|
||||||
|
<div className="text-center py-12">
|
||||||
|
<div className="text-red-500 mb-4">Failed to load actors</div>
|
||||||
|
<button
|
||||||
|
onClick={() => window.location.reload()}
|
||||||
|
className="btn btn-primary"
|
||||||
|
>
|
||||||
|
Retry
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Actors Grid/List */}
|
||||||
|
{!isLoading && !error && (
|
||||||
|
<motion.div
|
||||||
|
layout
|
||||||
|
className={
|
||||||
|
viewMode === 'grid'
|
||||||
|
? 'grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-6'
|
||||||
|
: viewMode === 'cover'
|
||||||
|
? 'flex flex-wrap gap-4 justify-center'
|
||||||
|
: 'space-y-4'
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{actors.map((actor: Actor, index: number) => (
|
||||||
|
<motion.div
|
||||||
|
key={actor.id}
|
||||||
|
layout
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ delay: index * 0.1 }}
|
||||||
|
onClick={() => handleActorClick(actor)}
|
||||||
|
className={
|
||||||
|
viewMode === 'grid'
|
||||||
|
? 'group cursor-pointer'
|
||||||
|
: viewMode === 'cover'
|
||||||
|
? 'group cursor-pointer flex-shrink-0'
|
||||||
|
: 'flex gap-4 p-4 bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 hover:shadow-lg transition-shadow cursor-pointer'
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{viewMode === 'grid' ? (
|
||||||
|
// Grid View
|
||||||
|
<div className="relative overflow-hidden rounded-xl bg-gray-200 dark:bg-gray-800">
|
||||||
|
{getActorImage(actor) ? (
|
||||||
|
<img
|
||||||
|
src={getActorImage(actor)}
|
||||||
|
alt={actor.name}
|
||||||
|
style={{
|
||||||
|
width: `${imageSize}px`,
|
||||||
|
height: preserveAspectRatio ? `${imageSize * 1.5}px` : `${imageSize}px`
|
||||||
|
}}
|
||||||
|
className={preserveAspectRatio ? "object-cover group-hover:scale-105 transition-transform duration-300" : "object-contain group-hover:scale-105 transition-transform duration-300"}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: `${imageSize}px`,
|
||||||
|
height: preserveAspectRatio ? `${imageSize * 1.5}px` : `${imageSize}px`
|
||||||
|
}}
|
||||||
|
className="flex items-center justify-center bg-gradient-to-br from-blue-400 to-purple-500"
|
||||||
|
>
|
||||||
|
<UserIcon className="w-16 h-16 text-white opacity-50" />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Overlay */}
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-t from-black/70 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300">
|
||||||
|
<div className="absolute bottom-4 left-4 right-4">
|
||||||
|
<h3 className="text-white font-bold text-lg mb-1 truncate">{actor.name}</h3>
|
||||||
|
{renderMediaCount(actor)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Gender Badge */}
|
||||||
|
{renderGender(actor) && (
|
||||||
|
<div className="absolute top-2 right-2 bg-white/90 dark:bg-gray-800/90 rounded-full w-6 h-6 flex items-center justify-center">
|
||||||
|
{renderGender(actor)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
) : viewMode === 'cover' ? (
|
||||||
|
// Cover View (Shelf-style)
|
||||||
|
<div className="relative group">
|
||||||
|
<div
|
||||||
|
className="relative overflow-hidden rounded-t-lg shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1"
|
||||||
|
style={{
|
||||||
|
width: `${imageSize * 0.8}px`,
|
||||||
|
height: `${imageSize * 1.2}px`
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{getActorImage(actor) ? (
|
||||||
|
<img
|
||||||
|
src={getActorImage(actor)}
|
||||||
|
alt={actor.name}
|
||||||
|
className="w-full h-full object-cover"
|
||||||
|
onError={(e) => {
|
||||||
|
e.currentTarget.src = '/images/placeholder.jpg'
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<div className="w-full h-full bg-gradient-to-br from-blue-400 to-purple-400 flex items-center justify-center">
|
||||||
|
<UserIcon className="w-8 h-8 text-white/50" />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Shelf effect - bottom shadow */}
|
||||||
|
<div className="absolute bottom-0 left-0 right-0 h-2 bg-gradient-to-t from-black/30 to-transparent"></div>
|
||||||
|
|
||||||
|
{/* Hover overlay */}
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300">
|
||||||
|
<div className="absolute top-2 right-2">
|
||||||
|
<motion.button
|
||||||
|
className="p-1 bg-purple-600 rounded-full hover:bg-purple-700 transition-colors"
|
||||||
|
whileHover={{ scale: 1.1 }}
|
||||||
|
whileTap={{ scale: 0.9 }}
|
||||||
|
>
|
||||||
|
<UserIcon className="w-3 h-3 text-white" />
|
||||||
|
</motion.button>
|
||||||
|
</div>
|
||||||
|
{renderGender(actor) && (
|
||||||
|
<div className="absolute top-2 left-2 bg-white/90 dark:bg-gray-800/90 rounded-full w-5 h-5 flex items-center justify-center">
|
||||||
|
{renderGender(actor)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/* Title below cover */}
|
||||||
|
<div style={{ width: `${imageSize * 0.8}px` }} className="pt-2">
|
||||||
|
<h4 className="text-sm font-medium text-gray-900 dark:text-white text-center truncate">
|
||||||
|
{actor.name}
|
||||||
|
</h4>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
// List View
|
||||||
|
<>
|
||||||
|
<div
|
||||||
|
className="relative flex-shrink-0 rounded-lg overflow-hidden bg-gray-200 dark:bg-gray-800"
|
||||||
|
style={{
|
||||||
|
width: `${Math.min(imageSize * 0.6, 120)}px`,
|
||||||
|
height: `${Math.min(imageSize * 0.6, 120)}px`
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{getActorImage(actor) ? (
|
||||||
|
<img
|
||||||
|
src={getActorImage(actor)}
|
||||||
|
alt={actor.name}
|
||||||
|
className="w-full h-full object-cover"
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<div className="w-full h-full flex items-center justify-center bg-gradient-to-br from-blue-400 to-purple-500">
|
||||||
|
<UserIcon className="w-8 h-8 text-white opacity-50" />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<div className="flex items-center gap-3 mb-2">
|
||||||
|
<h3 className="text-lg font-semibold text-gray-900 dark:text-white truncate">
|
||||||
|
{actor.name}
|
||||||
|
</h3>
|
||||||
|
{renderGender(actor)}
|
||||||
|
</div>
|
||||||
|
{renderMediaCount(actor)}
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Pagination */}
|
||||||
|
{pagination && pagination.last_page > 1 && (
|
||||||
|
<div className="flex items-center justify-center gap-2 mt-8">
|
||||||
|
<button
|
||||||
|
className="btn btn-secondary"
|
||||||
|
disabled={pagination?.current_page === 1}
|
||||||
|
onClick={handlePreviousPage}
|
||||||
|
>
|
||||||
|
Previous
|
||||||
|
</button>
|
||||||
|
<span className="text-gray-600 dark:text-gray-400">
|
||||||
|
Page {pagination?.current_page || 1} of {pagination?.last_page || 1}
|
||||||
|
</span>
|
||||||
|
<button
|
||||||
|
className="btn btn-secondary"
|
||||||
|
disabled={pagination?.current_page === pagination?.last_page}
|
||||||
|
onClick={handleNextPage}
|
||||||
|
>
|
||||||
|
Next
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
435
src/pages/Adult copy.tsx
Normal file
435
src/pages/Adult copy.tsx
Normal file
@@ -0,0 +1,435 @@
|
|||||||
|
import { useState, useContext } from 'react'
|
||||||
|
import { motion } from 'framer-motion'
|
||||||
|
import { useNavigate } from 'react-router-dom'
|
||||||
|
import {
|
||||||
|
Play,
|
||||||
|
Plus,
|
||||||
|
Eye,
|
||||||
|
Lock,
|
||||||
|
AlertTriangle,
|
||||||
|
Star,
|
||||||
|
Heart,
|
||||||
|
Circle,
|
||||||
|
CheckCircle2
|
||||||
|
} from 'lucide-react'
|
||||||
|
import { useAdults } from '../hooks/useApi'
|
||||||
|
import { Tooltip } from '../components/MicroInteractions'
|
||||||
|
import { ViewContext } from '../components/Layout'
|
||||||
|
|
||||||
|
// Import from alternative frontend
|
||||||
|
import { MediaListView } from '../../../frontend/components/MediaListView'
|
||||||
|
|
||||||
|
interface PaginatedResponse<T> {
|
||||||
|
items: T[]
|
||||||
|
pagination: {
|
||||||
|
total: number
|
||||||
|
per_page: number
|
||||||
|
current_page: number
|
||||||
|
last_page: number
|
||||||
|
}
|
||||||
|
available_filters?: {
|
||||||
|
sources?: string[]
|
||||||
|
genres?: string[]
|
||||||
|
years?: string[]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
interface AdultContent {
|
||||||
|
id: number
|
||||||
|
title: string
|
||||||
|
overview?: string
|
||||||
|
poster_url?: string
|
||||||
|
poster_aspect_ratio?: number
|
||||||
|
backdrop_url?: string
|
||||||
|
screenshot_url?: string
|
||||||
|
release_date?: string
|
||||||
|
rating?: number
|
||||||
|
runtime_minutes?: number
|
||||||
|
watched?: boolean
|
||||||
|
source_name?: string
|
||||||
|
genre?: string
|
||||||
|
studio?: string
|
||||||
|
cast?: string[]
|
||||||
|
director?: string
|
||||||
|
year?: number
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function Adult() {
|
||||||
|
// Get view context from Layout
|
||||||
|
const viewContext = useContext(ViewContext)
|
||||||
|
|
||||||
|
// Extract values from context or use defaults
|
||||||
|
const viewMode = viewContext?.viewMode || 'grid'
|
||||||
|
const gridColumns = viewContext?.gridColumns || 5
|
||||||
|
const coverSize = viewContext?.coverSize || 200
|
||||||
|
const PaginationComp = viewContext?.PaginationComponent
|
||||||
|
const FiltersComp = viewContext?.FiltersComponent
|
||||||
|
|
||||||
|
// Load preferences from localStorage
|
||||||
|
const getStoredPreferences = () => {
|
||||||
|
const stored = localStorage.getItem('adultPreferences')
|
||||||
|
return stored ? JSON.parse(stored) : {}
|
||||||
|
}
|
||||||
|
|
||||||
|
const [searchTerm, setSearchTerm] = useState('')
|
||||||
|
const [selectedGenre, setSelectedGenre] = useState('')
|
||||||
|
const [selectedYear, setSelectedYear] = useState('')
|
||||||
|
const [selectedSource, setSelectedSource] = useState('')
|
||||||
|
const [currentPage, setCurrentPage] = useState(1)
|
||||||
|
const navigate = useNavigate()
|
||||||
|
|
||||||
|
const [itemsPerPage, setItemsPerPage] = useState(() => getStoredPreferences().itemsPerPage || 20)
|
||||||
|
|
||||||
|
// Save preferences to localStorage
|
||||||
|
const savePreferences = (updates: any) => {
|
||||||
|
const preferences = {
|
||||||
|
itemsPerPage,
|
||||||
|
...updates
|
||||||
|
}
|
||||||
|
localStorage.setItem('adultPreferences', JSON.stringify(preferences))
|
||||||
|
}
|
||||||
|
// Fetch adult content
|
||||||
|
const { data: adultData, isLoading, error } = useAdults({
|
||||||
|
search: searchTerm || undefined,
|
||||||
|
genre: selectedGenre || undefined,
|
||||||
|
year: selectedYear ? parseInt(selectedYear) : undefined,
|
||||||
|
source: selectedSource || undefined,
|
||||||
|
page: currentPage,
|
||||||
|
per_page: itemsPerPage
|
||||||
|
}) as { data?: PaginatedResponse<AdultContent>; isLoading: boolean; error: any }
|
||||||
|
|
||||||
|
const adultContent = adultData?.items || []
|
||||||
|
const pagination = adultData?.pagination
|
||||||
|
const availableFilters = adultData?.available_filters || {}
|
||||||
|
const availableSources = availableFilters.sources || ['XBVR', 'Stash', 'Other']
|
||||||
|
|
||||||
|
// Convert adult content to MediaItem format for MediaListView
|
||||||
|
const mediaItems = adultContent.map(content => ({
|
||||||
|
id: content.id.toString(),
|
||||||
|
title: content.title || 'Untitled Adult Content',
|
||||||
|
type: 'adult' as const,
|
||||||
|
coverUrl: content.poster_url || content.screenshot_url || '',
|
||||||
|
rating: Number(content.rating) || 0,
|
||||||
|
status: 'completed' as const,
|
||||||
|
releaseYear: content.year || (content.release_date ? new Date(content.release_date).getFullYear() : new Date().getFullYear()),
|
||||||
|
addedAt: new Date().toISOString(),
|
||||||
|
favorite: false,
|
||||||
|
platform: content.source_name || 'Unknown',
|
||||||
|
description: content.overview || '',
|
||||||
|
genres: content.genre ? [content.genre] : []
|
||||||
|
}))
|
||||||
|
|
||||||
|
// State for MediaListView
|
||||||
|
const [selectedId, setSelectedId] = useState<string | null>(null)
|
||||||
|
const [multiSelectedIds, setMultiSelectedIds] = useState<Set<string>>(new Set())
|
||||||
|
|
||||||
|
const handleSelect = (item: any) => {
|
||||||
|
setSelectedId(item.id)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleToggleSelect = (id: string) => {
|
||||||
|
const newSelected = new Set(multiSelectedIds)
|
||||||
|
if (newSelected.has(id)) {
|
||||||
|
newSelected.delete(id)
|
||||||
|
} else {
|
||||||
|
newSelected.add(id)
|
||||||
|
}
|
||||||
|
setMultiSelectedIds(newSelected)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Pagination handlers
|
||||||
|
const handlePageChange = (page: number) => {
|
||||||
|
setCurrentPage(page)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleItemsPerPageChange = (newItemsPerPage: number) => {
|
||||||
|
setItemsPerPage(newItemsPerPage)
|
||||||
|
setCurrentPage(1)
|
||||||
|
savePreferences({ itemsPerPage: newItemsPerPage })
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleContentClick = (content: AdultContent) => {
|
||||||
|
navigate(`/adult/${content.id}`)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Filter handlers
|
||||||
|
const handleFiltersChange = (filters: any) => {
|
||||||
|
setSelectedSource(filters.source || '')
|
||||||
|
setSelectedGenre(filters.genre || '')
|
||||||
|
setSelectedYear(filters.year || '')
|
||||||
|
setCurrentPage(1)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleSearch = (term: string) => {
|
||||||
|
setSearchTerm(term)
|
||||||
|
setCurrentPage(1)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Mock genres for adult content
|
||||||
|
const genres = [
|
||||||
|
'All', 'Action', 'Adventure', 'Comedy', 'Drama', 'Fantasy',
|
||||||
|
'Horror', 'Mystery', 'Romance', 'Sci-Fi', 'Thriller', 'Other'
|
||||||
|
]
|
||||||
|
|
||||||
|
// Mock years
|
||||||
|
const currentYear = new Date().getFullYear()
|
||||||
|
const years = ['All', ...Array.from({ length: 10 }, (_, i) => (currentYear - i).toString())]
|
||||||
|
|
||||||
|
// Prepare filter data for FiltersComponent
|
||||||
|
const filterState = {
|
||||||
|
search: searchTerm,
|
||||||
|
source: selectedSource,
|
||||||
|
genre: selectedGenre,
|
||||||
|
year: selectedYear
|
||||||
|
}
|
||||||
|
|
||||||
|
const filterOptions = {
|
||||||
|
sources: availableSources || [],
|
||||||
|
genres: availableFilters.genres || genres.slice(1),
|
||||||
|
years: availableFilters.years || years.slice(1)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Helper function to get grid classes based on column count
|
||||||
|
const getGridClass = (columns: number) => {
|
||||||
|
const columnClasses = {
|
||||||
|
2: 'grid-cols-1 md:grid-cols-2',
|
||||||
|
3: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
|
||||||
|
4: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
|
||||||
|
5: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5',
|
||||||
|
6: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6',
|
||||||
|
7: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-7',
|
||||||
|
8: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-8'
|
||||||
|
}
|
||||||
|
return columnClasses[columns as keyof typeof columnClasses] || columnClasses[5]
|
||||||
|
}
|
||||||
|
|
||||||
|
const formatYear = (date?: string) => {
|
||||||
|
if (!date) return 'Unknown'
|
||||||
|
return new Date(date).getFullYear()
|
||||||
|
}
|
||||||
|
|
||||||
|
const renderRating = (rating?: number | string) => {
|
||||||
|
const numericRating = typeof rating === 'string' ? parseFloat(rating) : rating
|
||||||
|
if (!numericRating || typeof numericRating !== 'number' || isNaN(numericRating)) return null
|
||||||
|
return (
|
||||||
|
<div className="flex items-center gap-1">
|
||||||
|
{[...Array(5)].map((_, i) => (
|
||||||
|
<Star
|
||||||
|
key={i}
|
||||||
|
className={`w-4 h-4 ${
|
||||||
|
i < Math.floor(numericRating) ? 'text-yellow-400 dark:text-yellow-500 fill-yellow-400' : 'text-gray-300 dark:text-gray-600'
|
||||||
|
}`}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
<span className="text-sm text-gray-600 dark:text-gray-400 ml-1">{numericRating.toFixed(1)}</span>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isLoading) {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-gray-50 dark:bg-gray-900">
|
||||||
|
<div className="animate-pulse">
|
||||||
|
<div className="h-48 bg-gray-200 dark:bg-gray-800"></div>
|
||||||
|
<div className="container mx-auto px-4 py-8">
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
|
||||||
|
{[...Array(8)].map((_, i) => (
|
||||||
|
<div key={i} className="bg-gray-200 dark:bg-gray-800 rounded-xl h-64"></div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-gray-50 dark:bg-gray-900 flex items-center justify-center">
|
||||||
|
<div className="text-center">
|
||||||
|
<AlertTriangle className="w-16 h-16 text-red-500 mx-auto mb-4" />
|
||||||
|
<h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">Content Error</h2>
|
||||||
|
<p className="text-gray-600 dark:text-gray-400 mb-6">Failed to load adult content. Please try again later.</p>
|
||||||
|
<button className="btn btn-primary" onClick={() => window.location.reload()}>
|
||||||
|
Reload Page
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen transition-colors duration-300">
|
||||||
|
{/* Filters Component */}
|
||||||
|
{FiltersComp && (
|
||||||
|
<FiltersComp
|
||||||
|
filters={filterState}
|
||||||
|
availableFilters={filterOptions}
|
||||||
|
onFiltersChange={handleFiltersChange}
|
||||||
|
onSearchChange={handleSearch}
|
||||||
|
className="mb-6"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Content Grid/List/Cover */}
|
||||||
|
{adultContent.length === 0 ? (
|
||||||
|
<div className="text-center py-12">
|
||||||
|
<Lock className="w-16 h-16 text-gray-400 mx-auto mb-4" />
|
||||||
|
<h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">No Content Found</h3>
|
||||||
|
<p className="text-gray-600 dark:text-gray-400">
|
||||||
|
Try adjusting your search or filters to find what you're looking for.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
) : viewMode === 'list' ? (
|
||||||
|
// Use MediaListView for list mode
|
||||||
|
<div className="h-[600px] border border-slate-200 dark:border-slate-700 rounded-lg overflow-hidden">
|
||||||
|
<MediaListView
|
||||||
|
items={mediaItems}
|
||||||
|
onSelect={handleSelect}
|
||||||
|
selectedId={selectedId}
|
||||||
|
onToggleSelect={handleToggleSelect}
|
||||||
|
multiSelectedIds={multiSelectedIds}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
) : viewMode === 'cover' ? (
|
||||||
|
// Cover View (Shelf-style) - use dynamic cover size
|
||||||
|
<div className="flex flex-wrap gap-4 justify-center">
|
||||||
|
{adultContent.map((content: AdultContent, index: number) => (
|
||||||
|
<div className="relative group" key={content.id}>
|
||||||
|
{(() => {
|
||||||
|
const aspectRatio = content.poster_aspect_ratio || 1.5;
|
||||||
|
const height = coverSize / aspectRatio;
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className="relative overflow-hidden rounded-t-lg shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1"
|
||||||
|
style={{
|
||||||
|
width: `${coverSize}px`,
|
||||||
|
height: `${height}px`
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{content.poster_url ? (
|
||||||
|
<img
|
||||||
|
src={content.poster_url.startsWith('http') ? content.poster_url : `${(import.meta as any).env?.VITE_API_URL?.replace('/api', '') || ''}${content.poster_url}`}
|
||||||
|
alt={content.title}
|
||||||
|
className="w-full h-full object-cover"
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<div className="w-full h-full bg-gradient-to-br from-purple-400 to-pink-400 flex items-center justify-center">
|
||||||
|
<Lock className="w-8 h-8 text-white/50" />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Shelf effect - bottom shadow */}
|
||||||
|
<div className="absolute bottom-0 left-0 right-0 h-2 bg-gradient-to-t from-black/30 to-transparent"></div>
|
||||||
|
|
||||||
|
{/* Hover overlay */}
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300">
|
||||||
|
<div className="absolute top-2 right-2">
|
||||||
|
<motion.button
|
||||||
|
className="p-1 bg-purple-600 rounded-full hover:bg-purple-700 transition-colors"
|
||||||
|
whileHover={{ scale: 1.1 }}
|
||||||
|
whileTap={{ scale: 0.9 }}
|
||||||
|
>
|
||||||
|
<Play className="w-3 h-3 text-white" />
|
||||||
|
</motion.button>
|
||||||
|
</div>
|
||||||
|
{content.watched && (
|
||||||
|
<div className="absolute top-2 left-2">
|
||||||
|
<Eye className="w-4 h-4 text-green-400" />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})()}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<motion.div
|
||||||
|
layout
|
||||||
|
className={`grid gap-6 ${getGridClass(gridColumns)}`}
|
||||||
|
>
|
||||||
|
{adultContent.map((content: AdultContent, index: number) => (
|
||||||
|
<motion.div
|
||||||
|
key={content.id}
|
||||||
|
layout
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ delay: index * 0.1 }}
|
||||||
|
onClick={() => handleContentClick(content)}
|
||||||
|
className="group cursor-pointer"
|
||||||
|
>
|
||||||
|
{/* Grid View */}
|
||||||
|
<div className="relative overflow-hidden rounded-xl bg-gray-200 dark:bg-gray-800">
|
||||||
|
{content.poster_url || content.screenshot_url ? (
|
||||||
|
<img
|
||||||
|
src={
|
||||||
|
(content.poster_url || content.screenshot_url)?.startsWith('http')
|
||||||
|
? (content.poster_url || content.screenshot_url)
|
||||||
|
: `${(import.meta as any).env?.VITE_API_URL?.replace('/api', '') || ''}${content.poster_url || content.screenshot_url}`
|
||||||
|
}
|
||||||
|
alt={content.title}
|
||||||
|
className="w-full h-64 object-cover group-hover:scale-105 transition-transform duration-300"
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<div className="w-full h-64 bg-gradient-to-br from-purple-400 to-pink-400 flex items-center justify-center">
|
||||||
|
<Lock className="w-16 h-16 text-white/50" />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Overlay */}
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300">
|
||||||
|
<div className="absolute bottom-0 left-0 right-0 p-4">
|
||||||
|
<div className="flex items-center gap-2 mb-2">
|
||||||
|
<motion.button
|
||||||
|
className="p-2 bg-purple-600 rounded-full hover:bg-purple-700 transition-colors"
|
||||||
|
whileHover={{ scale: 1.1 }}
|
||||||
|
whileTap={{ scale: 0.9 }}
|
||||||
|
>
|
||||||
|
<Play className="w-4 h-4 text-white" />
|
||||||
|
</motion.button>
|
||||||
|
<motion.button
|
||||||
|
className="p-2 bg-white/20 backdrop-blur-sm rounded-full hover:bg-white/30 transition-colors"
|
||||||
|
whileHover={{ scale: 1.1 }}
|
||||||
|
whileTap={{ scale: 0.9 }}
|
||||||
|
>
|
||||||
|
<Plus className="w-4 h-4 text-white" />
|
||||||
|
</motion.button>
|
||||||
|
{content.watched && (
|
||||||
|
<Tooltip text="Watched">
|
||||||
|
<Eye className="w-5 h-5 text-green-400" />
|
||||||
|
</Tooltip>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<h3 className="text-white font-semibold text-sm line-clamp-2 mb-1">{content.title}</h3>
|
||||||
|
<div className="flex items-center gap-2 flex-wrap">
|
||||||
|
{content.source_name && (
|
||||||
|
<div className="px-2 py-1 bg-blue-500/80 text-white rounded text-xs font-medium">
|
||||||
|
{content.source_name}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{content.rating && renderRating(content.rating)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Pagination Component */}
|
||||||
|
{PaginationComp && pagination && pagination.last_page > 1 && (
|
||||||
|
<PaginationComp
|
||||||
|
currentPage={currentPage}
|
||||||
|
lastPage={pagination.last_page}
|
||||||
|
total={pagination.total}
|
||||||
|
onPageChange={handlePageChange}
|
||||||
|
itemsPerPage={itemsPerPage}
|
||||||
|
onItemsPerPageChange={handleItemsPerPageChange}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
458
src/pages/Adult.tsx
Normal file
458
src/pages/Adult.tsx
Normal file
@@ -0,0 +1,458 @@
|
|||||||
|
import { useState, useContext } from 'react'
|
||||||
|
import { motion } from 'framer-motion'
|
||||||
|
import { useNavigate } from 'react-router-dom'
|
||||||
|
import {
|
||||||
|
Play,
|
||||||
|
Plus,
|
||||||
|
Eye,
|
||||||
|
Lock,
|
||||||
|
AlertTriangle,
|
||||||
|
Star,
|
||||||
|
Heart,
|
||||||
|
Circle,
|
||||||
|
CheckCircle2
|
||||||
|
} from 'lucide-react'
|
||||||
|
import { useAdults } from '../hooks/useApi'
|
||||||
|
import { Tooltip } from '../components/MicroInteractions'
|
||||||
|
import { ViewContext } from '../components/Layout'
|
||||||
|
|
||||||
|
// Import from alternative frontend
|
||||||
|
import { MediaListView } from '../../../frontend/components/MediaListView'
|
||||||
|
import { MediaDetailView } from '../../../frontend/components/MediaDetailView'
|
||||||
|
|
||||||
|
interface PaginatedResponse<T> {
|
||||||
|
items: T[]
|
||||||
|
pagination: {
|
||||||
|
total: number
|
||||||
|
per_page: number
|
||||||
|
current_page: number
|
||||||
|
last_page: number
|
||||||
|
}
|
||||||
|
available_filters?: {
|
||||||
|
sources?: string[]
|
||||||
|
genres?: string[]
|
||||||
|
years?: string[]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
interface AdultContent {
|
||||||
|
id: number
|
||||||
|
title: string
|
||||||
|
overview?: string
|
||||||
|
poster_url?: string
|
||||||
|
poster_aspect_ratio?: number
|
||||||
|
backdrop_url?: string
|
||||||
|
screenshot_url?: string
|
||||||
|
release_date?: string
|
||||||
|
rating?: number
|
||||||
|
runtime_minutes?: number
|
||||||
|
watched?: boolean
|
||||||
|
source_name?: string
|
||||||
|
genre?: string
|
||||||
|
studio?: string
|
||||||
|
cast?: string[]
|
||||||
|
director?: string
|
||||||
|
year?: number
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function Adult() {
|
||||||
|
// Get view context from Layout
|
||||||
|
const viewContext = useContext(ViewContext)
|
||||||
|
|
||||||
|
// Extract values from context or use defaults
|
||||||
|
const viewMode = viewContext?.viewMode || 'grid'
|
||||||
|
const gridColumns = viewContext?.gridColumns || 5
|
||||||
|
const coverSize = viewContext?.coverSize || 200
|
||||||
|
const PaginationComp = viewContext?.PaginationComponent
|
||||||
|
const FiltersComp = viewContext?.FiltersComponent
|
||||||
|
|
||||||
|
// Load preferences from localStorage
|
||||||
|
const getStoredPreferences = () => {
|
||||||
|
const stored = localStorage.getItem('adultPreferences')
|
||||||
|
return stored ? JSON.parse(stored) : {}
|
||||||
|
}
|
||||||
|
|
||||||
|
const [searchTerm, setSearchTerm] = useState('')
|
||||||
|
const [selectedGenre, setSelectedGenre] = useState('')
|
||||||
|
const [selectedYear, setSelectedYear] = useState('')
|
||||||
|
const [selectedSource, setSelectedSource] = useState('')
|
||||||
|
const [currentPage, setCurrentPage] = useState(1)
|
||||||
|
const navigate = useNavigate()
|
||||||
|
|
||||||
|
const [itemsPerPage, setItemsPerPage] = useState(() => getStoredPreferences().itemsPerPage || 20)
|
||||||
|
|
||||||
|
// Save preferences to localStorage
|
||||||
|
const savePreferences = (updates: any) => {
|
||||||
|
const preferences = {
|
||||||
|
itemsPerPage,
|
||||||
|
...updates
|
||||||
|
}
|
||||||
|
localStorage.setItem('adultPreferences', JSON.stringify(preferences))
|
||||||
|
}
|
||||||
|
// Fetch adult content
|
||||||
|
const { data: adultData, isLoading, error } = useAdults({
|
||||||
|
search: searchTerm || undefined,
|
||||||
|
genre: selectedGenre || undefined,
|
||||||
|
year: selectedYear ? parseInt(selectedYear) : undefined,
|
||||||
|
source: selectedSource || undefined,
|
||||||
|
page: currentPage,
|
||||||
|
per_page: itemsPerPage
|
||||||
|
}) as { data?: PaginatedResponse<AdultContent>; isLoading: boolean; error: any }
|
||||||
|
|
||||||
|
const adultContent = adultData?.items || []
|
||||||
|
const pagination = adultData?.pagination
|
||||||
|
const availableFilters = adultData?.available_filters || {}
|
||||||
|
const availableSources = availableFilters.sources || ['XBVR', 'Stash', 'Other']
|
||||||
|
|
||||||
|
// Convert adult content to MediaItem format for MediaListView
|
||||||
|
const mediaItems = adultContent.map(content => ({
|
||||||
|
id: content.id.toString(),
|
||||||
|
title: content.title || 'Untitled Adult Content',
|
||||||
|
type: 'adult' as const,
|
||||||
|
coverUrl: content.poster_url || content.screenshot_url || '',
|
||||||
|
rating: Number(content.rating) || 0,
|
||||||
|
status: 'completed' as const,
|
||||||
|
releaseYear: content.year || (content.release_date ? new Date(content.release_date).getFullYear() : new Date().getFullYear()),
|
||||||
|
addedAt: new Date().toISOString(),
|
||||||
|
favorite: false,
|
||||||
|
platform: content.source_name || 'Unknown',
|
||||||
|
description: content.overview || '',
|
||||||
|
genres: content.genre ? [content.genre] : []
|
||||||
|
}))
|
||||||
|
|
||||||
|
// State for MediaListView
|
||||||
|
const [selectedId, setSelectedId] = useState<string | null>(null)
|
||||||
|
const [multiSelectedIds, setMultiSelectedIds] = useState<Set<string>>(new Set())
|
||||||
|
const [detailItem, setDetailItem] = useState<any>(null)
|
||||||
|
|
||||||
|
const handleSelect = (item: any) => {
|
||||||
|
setSelectedId(item.id)
|
||||||
|
setDetailItem(item)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleToggleSelect = (id: string) => {
|
||||||
|
const newSelected = new Set(multiSelectedIds)
|
||||||
|
if (newSelected.has(id)) {
|
||||||
|
newSelected.delete(id)
|
||||||
|
} else {
|
||||||
|
newSelected.add(id)
|
||||||
|
}
|
||||||
|
setMultiSelectedIds(newSelected)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Pagination handlers
|
||||||
|
const handlePageChange = (page: number) => {
|
||||||
|
setCurrentPage(page)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleItemsPerPageChange = (newItemsPerPage: number) => {
|
||||||
|
setItemsPerPage(newItemsPerPage)
|
||||||
|
setCurrentPage(1)
|
||||||
|
savePreferences({ itemsPerPage: newItemsPerPage })
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleContentClick = (content: AdultContent) => {
|
||||||
|
navigate(`/adult/${content.id}`)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Filter handlers
|
||||||
|
const handleFiltersChange = (filters: any) => {
|
||||||
|
setSelectedSource(filters.source || '')
|
||||||
|
setSelectedGenre(filters.genre || '')
|
||||||
|
setSelectedYear(filters.year || '')
|
||||||
|
setCurrentPage(1)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleSearch = (term: string) => {
|
||||||
|
setSearchTerm(term)
|
||||||
|
setCurrentPage(1)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Mock genres for adult content
|
||||||
|
const genres = [
|
||||||
|
'All', 'Action', 'Adventure', 'Comedy', 'Drama', 'Fantasy',
|
||||||
|
'Horror', 'Mystery', 'Romance', 'Sci-Fi', 'Thriller', 'Other'
|
||||||
|
]
|
||||||
|
|
||||||
|
// Mock years
|
||||||
|
const currentYear = new Date().getFullYear()
|
||||||
|
const years = ['All', ...Array.from({ length: 10 }, (_, i) => (currentYear - i).toString())]
|
||||||
|
|
||||||
|
// Prepare filter data for FiltersComponent
|
||||||
|
const filterState = {
|
||||||
|
search: searchTerm,
|
||||||
|
source: selectedSource,
|
||||||
|
genre: selectedGenre,
|
||||||
|
year: selectedYear
|
||||||
|
}
|
||||||
|
|
||||||
|
const filterOptions = {
|
||||||
|
sources: availableSources || [],
|
||||||
|
genres: availableFilters.genres || genres.slice(1),
|
||||||
|
years: availableFilters.years || years.slice(1)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Helper function to get grid classes based on column count
|
||||||
|
const getGridClass = (columns: number) => {
|
||||||
|
const columnClasses = {
|
||||||
|
2: 'grid-cols-1 md:grid-cols-2',
|
||||||
|
3: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
|
||||||
|
4: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
|
||||||
|
5: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5',
|
||||||
|
6: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6',
|
||||||
|
7: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-7',
|
||||||
|
8: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-8'
|
||||||
|
}
|
||||||
|
return columnClasses[columns as keyof typeof columnClasses] || columnClasses[5]
|
||||||
|
}
|
||||||
|
|
||||||
|
const formatYear = (date?: string) => {
|
||||||
|
if (!date) return 'Unknown'
|
||||||
|
return new Date(date).getFullYear()
|
||||||
|
}
|
||||||
|
|
||||||
|
const renderRating = (rating?: number | string) => {
|
||||||
|
const numericRating = typeof rating === 'string' ? parseFloat(rating) : rating
|
||||||
|
if (!numericRating || typeof numericRating !== 'number' || isNaN(numericRating)) return null
|
||||||
|
return (
|
||||||
|
<div className="flex items-center gap-1">
|
||||||
|
{[...Array(5)].map((_, i) => (
|
||||||
|
<Star
|
||||||
|
key={i}
|
||||||
|
className={`w-4 h-4 ${
|
||||||
|
i < Math.floor(numericRating) ? 'text-yellow-400 dark:text-yellow-500 fill-yellow-400' : 'text-gray-300 dark:text-gray-600'
|
||||||
|
}`}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
<span className="text-sm text-gray-600 dark:text-gray-400 ml-1">{numericRating.toFixed(1)}</span>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isLoading) {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-gray-50 dark:bg-gray-900">
|
||||||
|
<div className="animate-pulse">
|
||||||
|
<div className="h-48 bg-gray-200 dark:bg-gray-800"></div>
|
||||||
|
<div className="container mx-auto px-4 py-8">
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
|
||||||
|
{[...Array(8)].map((_, i) => (
|
||||||
|
<div key={i} className="bg-gray-200 dark:bg-gray-800 rounded-xl h-64"></div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-gray-50 dark:bg-gray-900 flex items-center justify-center">
|
||||||
|
<div className="text-center">
|
||||||
|
<AlertTriangle className="w-16 h-16 text-red-500 mx-auto mb-4" />
|
||||||
|
<h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">Content Error</h2>
|
||||||
|
<p className="text-gray-600 dark:text-gray-400 mb-6">Failed to load adult content. Please try again later.</p>
|
||||||
|
<button className="btn btn-primary" onClick={() => window.location.reload()}>
|
||||||
|
Reload Page
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen transition-colors duration-300">
|
||||||
|
{/* Filters Component */}
|
||||||
|
{FiltersComp && (
|
||||||
|
<FiltersComp
|
||||||
|
filters={filterState}
|
||||||
|
availableFilters={filterOptions}
|
||||||
|
onFiltersChange={handleFiltersChange}
|
||||||
|
onSearchChange={handleSearch}
|
||||||
|
className="mb-6"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Content Grid/List/Cover */}
|
||||||
|
{adultContent.length === 0 ? (
|
||||||
|
<div className="text-center py-12">
|
||||||
|
<Lock className="w-16 h-16 text-gray-400 mx-auto mb-4" />
|
||||||
|
<h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">No Content Found</h3>
|
||||||
|
<p className="text-gray-600 dark:text-gray-400">
|
||||||
|
Try adjusting your search or filters to find what you're looking for.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
) : viewMode === 'list' ? (
|
||||||
|
// Use MediaListView for list mode with sideview
|
||||||
|
<div className="flex w-full h-full">
|
||||||
|
<div className={`${detailItem ? 'w-1/2 hidden md:flex' : 'w-full'} h-full flex flex-col transition-all duration-500`}>
|
||||||
|
<div className="h-[600px] border border-slate-200 dark:border-slate-700 rounded-lg overflow-hidden">
|
||||||
|
<MediaListView
|
||||||
|
items={mediaItems}
|
||||||
|
onSelect={handleSelect}
|
||||||
|
selectedId={selectedId}
|
||||||
|
onToggleSelect={handleToggleSelect}
|
||||||
|
multiSelectedIds={multiSelectedIds}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{detailItem && (
|
||||||
|
<div className="w-full md:w-1/2 h-full border-l border-white/5 relative overflow-hidden animate-in slide-in-from-right duration-300">
|
||||||
|
<MediaDetailView
|
||||||
|
item={detailItem}
|
||||||
|
allMedia={mediaItems}
|
||||||
|
onBack={() => setDetailItem(null)}
|
||||||
|
onEdit={(item) => console.log('Edit item:', item)}
|
||||||
|
onToggleFavorite={(id, isFav) => console.log('Toggle favorite:', id, isFav)}
|
||||||
|
onSelectRelated={(item) => setDetailItem(item)}
|
||||||
|
onSelectPerson={(name, id) => console.log('Select person:', name, id)}
|
||||||
|
onViewAll={(type, id) => console.log('View all:', type, id)}
|
||||||
|
onToggleSelect={(id, isSelected) => console.log('Toggle select:', id, isSelected)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
) : viewMode === 'cover' ? (
|
||||||
|
// Cover View (Shelf-style) - use dynamic cover size
|
||||||
|
<div className="flex flex-wrap gap-4 justify-center">
|
||||||
|
{adultContent.map((content: AdultContent) => (
|
||||||
|
<div className="relative group" key={content.id}>
|
||||||
|
{(() => {
|
||||||
|
const aspectRatio = content.poster_aspect_ratio || 1.5;
|
||||||
|
const height = coverSize / aspectRatio;
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className="relative overflow-hidden rounded-t-lg shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1"
|
||||||
|
style={{
|
||||||
|
width: `${coverSize}px`,
|
||||||
|
height: `${height}px`
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{content.poster_url ? (
|
||||||
|
<img
|
||||||
|
src={content.poster_url.startsWith('http') ? content.poster_url : `${(import.meta as any).env?.VITE_API_URL?.replace('/api', '') || ''}${content.poster_url}`}
|
||||||
|
alt={content.title}
|
||||||
|
className="w-full h-full object-cover"
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<div className="w-full h-full bg-gradient-to-br from-purple-400 to-pink-400 flex items-center justify-center">
|
||||||
|
<Lock className="w-8 h-8 text-white/50" />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Shelf effect - bottom shadow */}
|
||||||
|
<div className="absolute bottom-0 left-0 right-0 h-2 bg-gradient-to-t from-black/30 to-transparent"></div>
|
||||||
|
|
||||||
|
{/* Hover overlay */}
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300">
|
||||||
|
<div className="absolute top-2 right-2">
|
||||||
|
<motion.button
|
||||||
|
className="p-1 bg-purple-600 rounded-full hover:bg-purple-700 transition-colors"
|
||||||
|
whileHover={{ scale: 1.1 }}
|
||||||
|
whileTap={{ scale: 0.9 }}
|
||||||
|
>
|
||||||
|
<Play className="w-3 h-3 text-white" />
|
||||||
|
</motion.button>
|
||||||
|
</div>
|
||||||
|
{content.watched && (
|
||||||
|
<div className="absolute top-2 left-2">
|
||||||
|
<Eye className="w-4 h-4 text-green-400" />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})()}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<motion.div
|
||||||
|
layout
|
||||||
|
className={`grid gap-6 ${getGridClass(gridColumns)}`}
|
||||||
|
>
|
||||||
|
{adultContent.map((content: AdultContent, index: number) => (
|
||||||
|
<motion.div
|
||||||
|
key={content.id}
|
||||||
|
layout
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ delay: index * 0.1 }}
|
||||||
|
onClick={() => handleContentClick(content)}
|
||||||
|
className="group cursor-pointer"
|
||||||
|
>
|
||||||
|
{/* Grid View */}
|
||||||
|
<div className="relative overflow-hidden rounded-xl bg-gray-200 dark:bg-gray-800">
|
||||||
|
{content.poster_url || content.screenshot_url ? (
|
||||||
|
<img
|
||||||
|
src={
|
||||||
|
(content.poster_url || content.screenshot_url)?.startsWith('http')
|
||||||
|
? (content.poster_url || content.screenshot_url)
|
||||||
|
: `${(import.meta as any).env?.VITE_API_URL?.replace('/api', '') || ''}${content.poster_url || content.screenshot_url}`
|
||||||
|
}
|
||||||
|
alt={content.title}
|
||||||
|
className="w-full h-64 object-cover group-hover:scale-105 transition-transform duration-300"
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<div className="w-full h-64 bg-gradient-to-br from-purple-400 to-pink-400 flex items-center justify-center">
|
||||||
|
<Lock className="w-16 h-16 text-white/50" />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Overlay */}
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300">
|
||||||
|
<div className="absolute bottom-0 left-0 right-0 p-4">
|
||||||
|
<div className="flex items-center gap-2 mb-2">
|
||||||
|
<motion.button
|
||||||
|
className="p-2 bg-purple-600 rounded-full hover:bg-purple-700 transition-colors"
|
||||||
|
whileHover={{ scale: 1.1 }}
|
||||||
|
whileTap={{ scale: 0.9 }}
|
||||||
|
>
|
||||||
|
<Play className="w-4 h-4 text-white" />
|
||||||
|
</motion.button>
|
||||||
|
<motion.button
|
||||||
|
className="p-2 bg-white/20 backdrop-blur-sm rounded-full hover:bg-white/30 transition-colors"
|
||||||
|
whileHover={{ scale: 1.1 }}
|
||||||
|
whileTap={{ scale: 0.9 }}
|
||||||
|
>
|
||||||
|
<Plus className="w-4 h-4 text-white" />
|
||||||
|
</motion.button>
|
||||||
|
{content.watched && (
|
||||||
|
<Tooltip text="Watched">
|
||||||
|
<Eye className="w-5 h-5 text-green-400" />
|
||||||
|
</Tooltip>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<h3 className="text-white font-semibold text-sm line-clamp-2 mb-1">{content.title}</h3>
|
||||||
|
<div className="flex items-center gap-2 flex-wrap">
|
||||||
|
{content.source_name && (
|
||||||
|
<div className="px-2 py-1 bg-blue-500/80 text-white rounded text-xs font-medium">
|
||||||
|
{content.source_name}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{content.rating && renderRating(content.rating)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Pagination Component */}
|
||||||
|
{PaginationComp && pagination && pagination.last_page > 1 && (
|
||||||
|
<PaginationComp
|
||||||
|
currentPage={currentPage}
|
||||||
|
lastPage={pagination.last_page}
|
||||||
|
total={pagination.total}
|
||||||
|
onPageChange={handlePageChange}
|
||||||
|
itemsPerPage={itemsPerPage}
|
||||||
|
onItemsPerPageChange={handleItemsPerPageChange}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
435
src/pages/AdultDetail.tsx
Normal file
435
src/pages/AdultDetail.tsx
Normal file
@@ -0,0 +1,435 @@
|
|||||||
|
import React from 'react'
|
||||||
|
import { motion } from 'framer-motion'
|
||||||
|
import { useParams, useNavigate } from 'react-router-dom'
|
||||||
|
import {
|
||||||
|
ArrowLeftIcon,
|
||||||
|
PlayIcon,
|
||||||
|
CalendarIcon,
|
||||||
|
UserIcon,
|
||||||
|
FilmIcon,
|
||||||
|
PlusIcon,
|
||||||
|
CheckIcon,
|
||||||
|
ExclamationTriangleIcon,
|
||||||
|
LockClosedIcon
|
||||||
|
} from '@heroicons/react/24/outline'
|
||||||
|
import { StarIcon as StarIconSolid } from '@heroicons/react/24/solid'
|
||||||
|
import { useAdult } from '../hooks/useApi'
|
||||||
|
import { Tooltip } from '../components/MicroInteractions'
|
||||||
|
|
||||||
|
class AdultDetailErrorBoundary extends React.Component<
|
||||||
|
{ children: React.ReactNode; navigate: (to: string) => void },
|
||||||
|
{ hasError: boolean; error?: Error }
|
||||||
|
> {
|
||||||
|
constructor(props: any) {
|
||||||
|
super(props)
|
||||||
|
this.state = { hasError: false }
|
||||||
|
}
|
||||||
|
|
||||||
|
static getDerivedStateFromError(error: Error) {
|
||||||
|
return { hasError: true, error }
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
|
||||||
|
console.error('AdultDetail error:', error, errorInfo)
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
if (this.state.hasError) {
|
||||||
|
return (
|
||||||
|
<div className="text-center">
|
||||||
|
<ExclamationTriangleIcon className="w-16 h-16 text-red-500 mx-auto mb-4" />
|
||||||
|
<h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">Content Error</h2>
|
||||||
|
<p className="text-gray-600 dark:text-gray-400 mb-6">
|
||||||
|
{this.state.error?.message || 'Failed to load content details'}
|
||||||
|
</p>
|
||||||
|
<div className="flex gap-4 justify-center">
|
||||||
|
<button
|
||||||
|
onClick={() => this.props.navigate('/adult')}
|
||||||
|
className="btn btn-secondary"
|
||||||
|
>
|
||||||
|
Back to Adult
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => window.location.reload()}
|
||||||
|
className="btn btn-primary"
|
||||||
|
>
|
||||||
|
Reload Page
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
return this.props.children
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function AdultDetail() {
|
||||||
|
const { id } = useParams<{ id: string }>()
|
||||||
|
const navigate = useNavigate()
|
||||||
|
|
||||||
|
// Validate ID and handle invalid cases
|
||||||
|
const contentId = id ? Number(id) : null
|
||||||
|
const isValidId = contentId && !isNaN(contentId) && contentId > 0
|
||||||
|
|
||||||
|
// Early return for invalid ID
|
||||||
|
if (!isValidId) {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen flex items-center justify-center">
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="text-gray-400 text-6xl mb-4">🔒</div>
|
||||||
|
<h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">Invalid Content ID</h2>
|
||||||
|
<p className="text-gray-600 dark:text-gray-400 mb-6">The content ID is invalid or missing.</p>
|
||||||
|
<button
|
||||||
|
onClick={() => navigate('/adult')}
|
||||||
|
className="btn btn-primary"
|
||||||
|
>
|
||||||
|
Back to Adult
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const { data: adultContent, isLoading, error } = useAdult(contentId)
|
||||||
|
|
||||||
|
if (isLoading) {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen">
|
||||||
|
<div className="animate-pulse">
|
||||||
|
<div className="h-96 bg-gray-300 dark:bg-gray-700"></div>
|
||||||
|
<div className="container mx-auto px-4 py-8">
|
||||||
|
<div className="h-8 bg-gray-300 dark:bg-gray-700 rounded w-1/3 mb-4"></div>
|
||||||
|
<div className="h-4 bg-gray-300 dark:bg-gray-700 rounded w-2/3 mb-2"></div>
|
||||||
|
<div className="h-4 bg-gray-300 dark:bg-gray-700 rounded w-1/2"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (error || !adultContent) {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen flex items-center justify-center">
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="text-gray-400 text-6xl mb-4">🔒</div>
|
||||||
|
<h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">Content Not Found</h2>
|
||||||
|
<p className="text-gray-600 dark:text-gray-400 mb-6">The content you're looking for doesn't exist or has been removed.</p>
|
||||||
|
<button
|
||||||
|
onClick={() => navigate('/adult')}
|
||||||
|
className="btn btn-primary"
|
||||||
|
>
|
||||||
|
Back to Adult
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const posterUrl = adultContent.poster_url || adultContent.screenshot_url ?
|
||||||
|
((adultContent.poster_url || adultContent.screenshot_url).startsWith('http') ? (adultContent.poster_url || adultContent.screenshot_url) : `${(import.meta as any).env?.VITE_API_URL?.replace('/api', '') || ''}${adultContent.poster_url || adultContent.screenshot_url}`) :
|
||||||
|
null
|
||||||
|
|
||||||
|
const backdropUrl = adultContent.backdrop_url ?
|
||||||
|
(adultContent.backdrop_url.startsWith('http') ? adultContent.backdrop_url : `${(import.meta as any).env?.VITE_API_URL?.replace('/api', '') || ''}${adultContent.backdrop_url}`) :
|
||||||
|
null
|
||||||
|
|
||||||
|
const getPosterAspectRatio = () => {
|
||||||
|
// Check for poster_aspect_ratio first, then fall back to 2/3
|
||||||
|
return adultContent.poster_aspect_ratio || 2/3
|
||||||
|
}
|
||||||
|
|
||||||
|
const formatYear = (date?: string) => {
|
||||||
|
if (!date) return 'Unknown'
|
||||||
|
return new Date(date).getFullYear()
|
||||||
|
}
|
||||||
|
|
||||||
|
const formatDate = (date?: string) => {
|
||||||
|
if (!date) return 'Unknown'
|
||||||
|
return new Date(date).toLocaleDateString('en-US', {
|
||||||
|
year: 'numeric',
|
||||||
|
month: 'long',
|
||||||
|
day: 'numeric'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const formatRuntime = (minutes?: number) => {
|
||||||
|
if (!minutes) return 'Unknown'
|
||||||
|
const hours = Math.floor(minutes / 60)
|
||||||
|
const mins = minutes % 60
|
||||||
|
return `${hours}h ${mins}m`
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<AdultDetailErrorBoundary navigate={navigate}>
|
||||||
|
<div className="min-h-screen transition-colors duration-300">
|
||||||
|
{/* Hero Section - Compact */}
|
||||||
|
<div className="relative h-64 overflow-hidden">
|
||||||
|
{backdropUrl ? (
|
||||||
|
<>
|
||||||
|
<motion.img
|
||||||
|
src={backdropUrl}
|
||||||
|
alt={adultContent.title}
|
||||||
|
className="w-full h-full object-cover"
|
||||||
|
initial={{ scale: 1.1 }}
|
||||||
|
animate={{ scale: 1 }}
|
||||||
|
transition={{ duration: 1.5 }}
|
||||||
|
/>
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-t from-gray-900 via-gray-900/50 to-transparent dark:from-black dark:via-black/50 dark:to-transparent"></div>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<div className="w-full h-full bg-gradient-to-br from-purple-600 to-pink-600 dark:from-purple-800 dark:to-pink-800"></div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Back Button */}
|
||||||
|
<motion.button
|
||||||
|
onClick={() => navigate(-1)}
|
||||||
|
className="absolute top-4 left-4 p-2 bg-black/50 dark:bg-black/70 backdrop-blur-sm rounded-lg text-white hover:bg-black/70 dark:hover:bg-black/80 transition-all duration-200"
|
||||||
|
whileHover={{ scale: 1.05 }}
|
||||||
|
whileTap={{ scale: 0.95 }}
|
||||||
|
>
|
||||||
|
<ArrowLeftIcon className="w-5 h-5" />
|
||||||
|
</motion.button>
|
||||||
|
|
||||||
|
{/* Play Button - Compact */}
|
||||||
|
<motion.button
|
||||||
|
className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 p-4 bg-white/90 dark:bg-white/80 backdrop-blur-sm rounded-full shadow-xl hover:bg-white dark:hover:bg-white/90 transition-all duration-200"
|
||||||
|
whileHover={{ scale: 1.1 }}
|
||||||
|
whileTap={{ scale: 0.9 }}
|
||||||
|
>
|
||||||
|
<PlayIcon className="w-8 h-8 text-purple-600 dark:text-purple-500" />
|
||||||
|
</motion.button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Main Content - Compact */}
|
||||||
|
<div className="container mx-auto px-4 py-6">
|
||||||
|
<div className="flex flex-col lg:flex-row gap-6">
|
||||||
|
{/* Poster and Basic Info - Compact */}
|
||||||
|
<div className="lg:w-1/3">
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, x: -20 }}
|
||||||
|
animate={{ opacity: 1, x: 0 }}
|
||||||
|
transition={{ delay: 0.2 }}
|
||||||
|
>
|
||||||
|
{posterUrl ? (
|
||||||
|
<motion.img
|
||||||
|
src={posterUrl}
|
||||||
|
alt={adultContent.title}
|
||||||
|
className="w-full rounded-lg shadow-lg mb-4 dark:shadow-black/20"
|
||||||
|
whileHover={{ scale: 1.02 }}
|
||||||
|
onError={(e) => {
|
||||||
|
console.error('Failed to load poster:', posterUrl, 'for adult content:', adultContent.title)
|
||||||
|
// Set a fallback background
|
||||||
|
const target = e.target as HTMLImageElement
|
||||||
|
target.style.display = 'none'
|
||||||
|
const parent = target.parentElement
|
||||||
|
if (parent) {
|
||||||
|
parent.className = 'w-full bg-gray-200 dark:bg-gray-800 rounded-lg flex items-center justify-center mb-4'
|
||||||
|
parent.style.aspectRatio = getPosterAspectRatio().toString()
|
||||||
|
const iconDiv = document.createElement('div')
|
||||||
|
iconDiv.className = 'text-gray-400 dark:text-gray-600'
|
||||||
|
iconDiv.innerHTML = '<svg class="w-24 h-24" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m0 5.25v3.75a4.5 4.5 0 10-9 0v-3.75m0-5.25H6m13.5 0A2.25 2.25 0 0017.25 8.5h-10.5A2.25 2.25 0 004.5 10.75v10.5A2.25 2.25 0 006.75 23.5h10.5a2.25 2.25 0 002.25-2.25v-10.5z" /></svg>'
|
||||||
|
parent.appendChild(iconDiv)
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<div
|
||||||
|
className="w-full bg-gray-200 dark:bg-gray-800 rounded-lg flex items-center justify-center mb-4"
|
||||||
|
style={{ aspectRatio: getPosterAspectRatio() }}
|
||||||
|
>
|
||||||
|
<LockClosedIcon className="w-24 h-24 text-gray-400 dark:text-gray-600" />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="space-y-3">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<h1 className="text-2xl font-bold text-gray-900 dark:text-white">{adultContent.title}</h1>
|
||||||
|
{adultContent.watched && (
|
||||||
|
<Tooltip text="Watched">
|
||||||
|
<CheckIcon className="w-5 h-5 text-green-600 dark:text-green-500" />
|
||||||
|
</Tooltip>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-3 text-sm text-gray-600 dark:text-gray-400">
|
||||||
|
<div className="flex items-center gap-1">
|
||||||
|
<CalendarIcon className="w-4 h-4" />
|
||||||
|
<span>{formatYear(adultContent.release_date)}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-1">
|
||||||
|
<FilmIcon className="w-4 h-4" />
|
||||||
|
<span>Adult Content</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{adultContent.rating && (
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<div className="flex items-center">
|
||||||
|
{[...Array(5)].map((_, i) => (
|
||||||
|
<StarIconSolid
|
||||||
|
key={i}
|
||||||
|
className={`w-5 h-5 ${
|
||||||
|
i < Math.floor(Number(adultContent.rating) || 0)
|
||||||
|
? 'text-yellow-400 dark:text-yellow-500'
|
||||||
|
: 'text-gray-300 dark:text-gray-600'
|
||||||
|
}`}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<span className="text-base font-semibold text-gray-900 dark:text-white">
|
||||||
|
{Number(adultContent.rating)?.toFixed(1)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<motion.button
|
||||||
|
className="btn btn-primary flex-1 flex items-center justify-center gap-2 text-sm py-2"
|
||||||
|
whileHover={{ scale: 1.02 }}
|
||||||
|
whileTap={{ scale: 0.98 }}
|
||||||
|
>
|
||||||
|
<PlayIcon className="w-4 h-4" />
|
||||||
|
Play Now
|
||||||
|
</motion.button>
|
||||||
|
<motion.button
|
||||||
|
className="btn btn-secondary flex items-center justify-center gap-2 text-sm py-2"
|
||||||
|
whileHover={{ scale: 1.02 }}
|
||||||
|
whileTap={{ scale: 0.98 }}
|
||||||
|
>
|
||||||
|
<PlusIcon className="w-4 h-4" />
|
||||||
|
Add to List
|
||||||
|
</motion.button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Details - Compact */}
|
||||||
|
<div className="lg:w-2/3">
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, x: 20 }}
|
||||||
|
animate={{ opacity: 1, x: 0 }}
|
||||||
|
transition={{ delay: 0.3 }}
|
||||||
|
className="space-y-4"
|
||||||
|
>
|
||||||
|
<div className="bg-gradient-to-br from-purple-50 to-pink-50 dark:from-purple-900/20 dark:to-pink-900/20 rounded-2xl shadow-lg p-6 border border-purple-200 dark:border-purple-800">
|
||||||
|
<h3 className="text-lg font-semibold text-purple-800 dark:text-purple-200 mb-3 flex items-center gap-2">
|
||||||
|
<UserIcon className="w-5 h-5" />
|
||||||
|
Description
|
||||||
|
</h3>
|
||||||
|
<p className="text-slate-700 dark:text-slate-300 leading-relaxed text-sm">
|
||||||
|
{adultContent.overview || 'No description available for this content.'}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-gradient-to-br from-blue-50 to-indigo-50 dark:from-blue-900/20 dark:to-indigo-900/20 rounded-2xl shadow-lg p-6 border border-blue-200 dark:border-blue-800">
|
||||||
|
<h3 className="text-lg font-semibold text-blue-800 dark:text-blue-200 mb-4 flex items-center gap-2">
|
||||||
|
<CalendarIcon className="w-5 h-5" />
|
||||||
|
Details
|
||||||
|
</h3>
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
<div className="bg-white/50 dark:bg-gray-800/50 rounded-lg p-3">
|
||||||
|
<span className="text-xs text-blue-600 dark:text-blue-400 font-medium">Release Date</span>
|
||||||
|
<p className="font-medium text-slate-900 dark:text-slate-100 text-sm mt-1">{formatDate(adultContent.release_date)}</p>
|
||||||
|
</div>
|
||||||
|
<div className="bg-white/50 dark:bg-gray-800/50 rounded-lg p-3">
|
||||||
|
<span className="text-xs text-blue-600 dark:text-blue-400 font-medium">Duration</span>
|
||||||
|
<p className="font-medium text-slate-900 dark:text-slate-100 text-sm mt-1">
|
||||||
|
{adultContent.runtime_minutes ? formatRuntime(adultContent.runtime_minutes) : 'Unknown'}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="bg-white/50 dark:bg-gray-800/50 rounded-lg p-3">
|
||||||
|
<span className="text-xs text-blue-600 dark:text-blue-400 font-medium">Rating</span>
|
||||||
|
<p className="font-medium text-slate-900 dark:text-slate-100 text-sm mt-1">
|
||||||
|
{adultContent.rating ? `${adultContent.rating}/10` : 'Not Rated'}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="bg-white/50 dark:bg-gray-800/50 rounded-lg p-3">
|
||||||
|
<span className="text-xs text-blue-600 dark:text-blue-400 font-medium">Source</span>
|
||||||
|
<p className="font-medium text-slate-900 dark:text-slate-100 text-sm mt-1">{adultContent.source_name || 'Unknown'}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-gradient-to-br from-green-50 to-emerald-50 dark:from-green-900/20 dark:to-emerald-900/20 rounded-2xl shadow-lg p-6 border border-green-200 dark:border-green-800">
|
||||||
|
<h3 className="text-lg font-semibold text-green-800 dark:text-green-200 mb-4 flex items-center gap-2">
|
||||||
|
<UserIcon className="w-5 h-5" />
|
||||||
|
Cast & Actors
|
||||||
|
</h3>
|
||||||
|
{adultContent.actors && adultContent.actors.length > 0 ? (
|
||||||
|
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3">
|
||||||
|
{adultContent.actors.map((actor: any) => (
|
||||||
|
<motion.div
|
||||||
|
key={actor.id}
|
||||||
|
whileHover={{ scale: 1.02 }}
|
||||||
|
onClick={() => navigate(`/actors/${actor.id}`)}
|
||||||
|
className="bg-gray-50 dark:bg-gray-800 rounded-lg p-3 border border-gray-200 dark:border-gray-700 hover:shadow-lg transition-all cursor-pointer"
|
||||||
|
>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<div className="w-10 h-10 rounded-full overflow-hidden bg-gray-200 dark:bg-gray-700 flex-shrink-0">
|
||||||
|
{actor.thumbnail_path ? (
|
||||||
|
<img
|
||||||
|
src={actor.thumbnail_path.startsWith('http') ? actor.thumbnail_path : `${(import.meta as any).env?.VITE_API_URL?.replace('/api', '') || ''}${actor.thumbnail_path}`}
|
||||||
|
alt={actor.name}
|
||||||
|
className="w-full h-full object-cover"
|
||||||
|
onError={(e) => {
|
||||||
|
console.error('Failed to load actor thumbnail:', actor.thumbnail_path, 'for actor:', actor.name)
|
||||||
|
const target = e.target as HTMLImageElement
|
||||||
|
target.style.display = 'none'
|
||||||
|
const parent = target.parentElement
|
||||||
|
if (parent) {
|
||||||
|
parent.innerHTML = '<div class="w-full h-full flex items-center justify-center bg-gradient-to-br from-blue-400 to-purple-500"><svg class="w-5 h-5 text-white/50" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM12 10.5a5.25 5.25 0 007.5 0m-7.5 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25c0-.621-.504-1.125-1.125-1.125h-1.5z" /></svg></div>'
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<div className="w-full h-full flex items-center justify-center bg-gradient-to-br from-blue-400 to-purple-500">
|
||||||
|
<UserIcon className="w-5 h-5 text-white/50" />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="min-w-0 flex-1">
|
||||||
|
<h4 className="font-medium text-gray-900 dark:text-white truncate text-sm">
|
||||||
|
{actor.name}
|
||||||
|
</h4>
|
||||||
|
{actor.metadata?.age && (
|
||||||
|
<p className="text-xs text-gray-500 dark:text-gray-400">
|
||||||
|
Age: {actor.metadata.age}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<p className="text-gray-500 dark:text-gray-400 italic text-sm">
|
||||||
|
No actor information available for this content.
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-gradient-to-br from-red-50 to-orange-50 dark:from-red-900/20 dark:to-orange-900/20 rounded-2xl shadow-lg p-6 border border-red-200 dark:border-red-800">
|
||||||
|
<h3 className="text-lg font-semibold text-red-800 dark:text-red-200 mb-3 flex items-center gap-2">
|
||||||
|
<ExclamationTriangleIcon className="w-5 h-5" />
|
||||||
|
Content Warning
|
||||||
|
</h3>
|
||||||
|
<div className="bg-red-100 dark:bg-red-900/40 rounded-xl p-4 border border-red-300 dark:border-red-700">
|
||||||
|
<div className="flex items-center gap-2 text-red-800 dark:text-red-200">
|
||||||
|
<LockClosedIcon className="w-4 h-4" />
|
||||||
|
<span className="font-medium text-sm">Adult Content - 18+ Only</span>
|
||||||
|
</div>
|
||||||
|
<p className="text-red-700 dark:text-red-300 text-xs mt-1">
|
||||||
|
This content is intended for mature audiences only. Viewer discretion is advised.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</AdultDetailErrorBoundary>
|
||||||
|
)
|
||||||
|
}
|
||||||
220
src/pages/Dashboard.tsx
Normal file
220
src/pages/Dashboard.tsx
Normal file
@@ -0,0 +1,220 @@
|
|||||||
|
import React from 'react'
|
||||||
|
import { Link } from 'react-router-dom'
|
||||||
|
import { motion } from 'framer-motion'
|
||||||
|
import {
|
||||||
|
FilmIcon,
|
||||||
|
TvIcon,
|
||||||
|
MusicalNoteIcon,
|
||||||
|
LockClosedIcon,
|
||||||
|
UserIcon,
|
||||||
|
PlusIcon,
|
||||||
|
SparklesIcon
|
||||||
|
} from '@heroicons/react/24/outline'
|
||||||
|
import { useDashboardStats, useRecentActivity } from '../hooks/useApi'
|
||||||
|
|
||||||
|
export default function Dashboard() {
|
||||||
|
// Use real API calls
|
||||||
|
const { data: statsData, isLoading: statsLoading } = useDashboardStats()
|
||||||
|
const { data: activityData, isLoading: activityLoading } = useRecentActivity()
|
||||||
|
|
||||||
|
// Enhanced stats with gradients and better colors
|
||||||
|
const stats = statsData || [
|
||||||
|
{ name: 'Total Movies', value: '1,234', icon: FilmIcon, color: 'from-blue-500 to-blue-600', href: '/movies' },
|
||||||
|
{ name: 'TV Shows', value: '456', icon: TvIcon, color: 'from-purple-500 to-purple-600', href: '/tvshows' },
|
||||||
|
{ name: 'Games', value: '789', icon: MusicalNoteIcon, color: 'from-green-500 to-green-600', href: '/games' },
|
||||||
|
{ name: 'Music Albums', value: '321', icon: MusicalNoteIcon, color: 'from-pink-500 to-pink-600', href: '/music' },
|
||||||
|
{ name: 'Adult Videos', value: '234', icon: LockClosedIcon, color: 'from-red-500 to-red-600', href: '/adult' },
|
||||||
|
{ name: 'Actors', value: '567', icon: UserIcon, color: 'from-indigo-500 to-indigo-600', href: '/actors' },
|
||||||
|
]
|
||||||
|
|
||||||
|
const recentActivity = activityData || [
|
||||||
|
{ id: 1, action: 'Added movie', item: 'Inception', time: '2 hours ago', type: 'movie' },
|
||||||
|
{ id: 2, action: 'Watched', item: 'The Matrix', time: '4 hours ago', type: 'movie' },
|
||||||
|
{ id: 3, action: 'Added game', item: 'The Legend of Zelda', time: '6 hours ago', type: 'game' },
|
||||||
|
{ id: 4, action: 'Added album', item: 'Dark Side of the Moon', time: '1 day ago', type: 'music' },
|
||||||
|
{ id: 5, action: 'Added TV show', item: 'Breaking Bad', time: '2 days ago', type: 'tvshow' },
|
||||||
|
]
|
||||||
|
return (
|
||||||
|
<div className="space-y-8">
|
||||||
|
{/* Header */}
|
||||||
|
<motion.div
|
||||||
|
className="flex justify-between items-center"
|
||||||
|
initial={{ opacity: 0, y: -20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.5 }}
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<motion.h1
|
||||||
|
className="text-4xl font-bold text-gray-900 mb-2"
|
||||||
|
initial={{ opacity: 0, x: -20 }}
|
||||||
|
animate={{ opacity: 1, x: 0 }}
|
||||||
|
transition={{ delay: 0.1 }}
|
||||||
|
>
|
||||||
|
<span className="bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
|
||||||
|
Dashboard
|
||||||
|
</span>
|
||||||
|
</motion.h1>
|
||||||
|
<motion.p
|
||||||
|
className="text-gray-600 text-lg"
|
||||||
|
initial={{ opacity: 0, x: -20 }}
|
||||||
|
animate={{ opacity: 1, x: 0 }}
|
||||||
|
transition={{ delay: 0.2 }}
|
||||||
|
>
|
||||||
|
Welcome to your media collection
|
||||||
|
</motion.p>
|
||||||
|
</div>
|
||||||
|
<motion.button
|
||||||
|
className="btn btn-primary flex items-center gap-2 shadow-xl"
|
||||||
|
whileHover={{ scale: 1.05, boxShadow: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)" }}
|
||||||
|
whileTap={{ scale: 0.95 }}
|
||||||
|
initial={{ opacity: 0, x: 20 }}
|
||||||
|
animate={{ opacity: 1, x: 0 }}
|
||||||
|
transition={{ delay: 0.3 }}
|
||||||
|
>
|
||||||
|
<PlusIcon className="w-5 h-5" />
|
||||||
|
Add Media
|
||||||
|
</motion.button>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
{/* Stats Grid */}
|
||||||
|
<motion.div
|
||||||
|
className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ delay: 0.4, duration: 0.6 }}
|
||||||
|
>
|
||||||
|
{stats.map((stat, index) => (
|
||||||
|
<motion.div
|
||||||
|
key={stat.name}
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ delay: 0.5 + index * 0.1 }}
|
||||||
|
>
|
||||||
|
<Link
|
||||||
|
to={stat.href}
|
||||||
|
className="card card-hover p-6 block group"
|
||||||
|
>
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<motion.div
|
||||||
|
className={`bg-gradient-to-r ${stat.color} p-3 rounded-xl shadow-lg group-hover:shadow-xl transition-all duration-300`}
|
||||||
|
whileHover={{ scale: 1.1, rotate: 5 }}
|
||||||
|
whileTap={{ scale: 0.95 }}
|
||||||
|
>
|
||||||
|
<stat.icon className="w-6 h-6 text-white" />
|
||||||
|
</motion.div>
|
||||||
|
<div className="ml-4">
|
||||||
|
<p className="text-sm font-medium text-gray-600 mb-1">{stat.name}</p>
|
||||||
|
<motion.p
|
||||||
|
className="text-3xl font-bold text-gray-900"
|
||||||
|
initial={{ scale: 0 }}
|
||||||
|
animate={{ scale: 1 }}
|
||||||
|
transition={{ delay: 0.6 + index * 0.1, type: "spring", stiffness: 200 }}
|
||||||
|
>
|
||||||
|
{stat.value}
|
||||||
|
</motion.p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<motion.div
|
||||||
|
className="opacity-0 group-hover:opacity-100 transition-opacity duration-300"
|
||||||
|
initial={{ x: 10 }}
|
||||||
|
whileHover={{ x: 0 }}
|
||||||
|
>
|
||||||
|
<SparklesIcon className="w-5 h-5 text-blue-500" />
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
{/* Recent Activity */}
|
||||||
|
<motion.div
|
||||||
|
className="card p-6"
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ delay: 0.8, duration: 0.6 }}
|
||||||
|
>
|
||||||
|
<motion.h2
|
||||||
|
className="text-xl font-bold text-gray-900 mb-6 flex items-center gap-2"
|
||||||
|
initial={{ opacity: 0, x: -20 }}
|
||||||
|
animate={{ opacity: 1, x: 0 }}
|
||||||
|
transition={{ delay: 0.9 }}
|
||||||
|
>
|
||||||
|
<SparklesIcon className="w-6 h-6 text-blue-500" />
|
||||||
|
Recent Activity
|
||||||
|
</motion.h2>
|
||||||
|
<div className="space-y-3">
|
||||||
|
{recentActivity.map((activity, index) => (
|
||||||
|
<motion.div
|
||||||
|
key={activity.id}
|
||||||
|
className="flex items-center justify-between py-3 px-4 rounded-xl hover:bg-gray-50 transition-colors group"
|
||||||
|
initial={{ opacity: 0, x: -20 }}
|
||||||
|
animate={{ opacity: 1, x: 0 }}
|
||||||
|
transition={{ delay: 1.0 + index * 0.1 }}
|
||||||
|
whileHover={{ x: 5 }}
|
||||||
|
>
|
||||||
|
<div className="flex items-center">
|
||||||
|
<motion.div
|
||||||
|
className="w-3 h-3 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full mr-4 shadow-lg"
|
||||||
|
animate={{ scale: [1, 1.2, 1] }}
|
||||||
|
transition={{ duration: 2, repeat: Infinity, delay: index * 0.2 }}
|
||||||
|
/>
|
||||||
|
<div>
|
||||||
|
<p className="text-sm font-medium text-gray-900">
|
||||||
|
{activity.action} <span className="font-semibold text-blue-600">{activity.item}</span>
|
||||||
|
</p>
|
||||||
|
<p className="text-xs text-gray-500">{activity.time}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<motion.span
|
||||||
|
className="px-3 py-1 bg-gradient-to-r from-gray-100 to-gray-200 text-gray-700 text-xs rounded-full font-medium shadow-sm group-hover:shadow-md transition-shadow"
|
||||||
|
whileHover={{ scale: 1.05 }}
|
||||||
|
>
|
||||||
|
{activity.type}
|
||||||
|
</motion.span>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
{/* Quick Actions */}
|
||||||
|
<motion.div
|
||||||
|
className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4"
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ delay: 1.2, duration: 0.6 }}
|
||||||
|
>
|
||||||
|
{[
|
||||||
|
{ to: "/movies/add", icon: FilmIcon, color: "from-blue-500 to-blue-600", label: "Add Movie" },
|
||||||
|
{ to: "/tvshows/add", icon: TvIcon, color: "from-purple-500 to-purple-600", label: "Add TV Show" },
|
||||||
|
{ to: "/games/add", icon: MusicalNoteIcon, color: "from-green-500 to-green-600", label: "Add Game" },
|
||||||
|
{ to: "/music/add", icon: MusicalNoteIcon, color: "from-pink-500 to-pink-600", label: "Add Album" }
|
||||||
|
].map((action, index) => (
|
||||||
|
<motion.div
|
||||||
|
key={action.label}
|
||||||
|
initial={{ opacity: 0, scale: 0.8 }}
|
||||||
|
animate={{ opacity: 1, scale: 1 }}
|
||||||
|
transition={{ delay: 1.3 + index * 0.1 }}
|
||||||
|
>
|
||||||
|
<Link
|
||||||
|
to={action.to}
|
||||||
|
className="card p-6 text-center group block"
|
||||||
|
>
|
||||||
|
<motion.div
|
||||||
|
className={`w-12 h-12 bg-gradient-to-r ${action.color} rounded-xl flex items-center justify-center mx-auto mb-3 shadow-lg group-hover:shadow-xl transition-all duration-300`}
|
||||||
|
whileHover={{ scale: 1.1, rotate: 5 }}
|
||||||
|
whileTap={{ scale: 0.95 }}
|
||||||
|
>
|
||||||
|
<action.icon className="w-6 h-6 text-white" />
|
||||||
|
</motion.div>
|
||||||
|
<p className="text-sm font-medium text-gray-900 group-hover:text-blue-600 transition-colors">
|
||||||
|
{action.label}
|
||||||
|
</p>
|
||||||
|
</Link>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
566
src/pages/GameDetail.tsx
Normal file
566
src/pages/GameDetail.tsx
Normal file
@@ -0,0 +1,566 @@
|
|||||||
|
import { useState } from 'react'
|
||||||
|
import { useParams, Link, useNavigate } from 'react-router-dom'
|
||||||
|
import { motion, AnimatePresence } from 'framer-motion'
|
||||||
|
import { useQuery } from '@tanstack/react-query'
|
||||||
|
import {
|
||||||
|
ComputerDesktopIcon as GamepadIcon,
|
||||||
|
StarIcon,
|
||||||
|
ClockIcon,
|
||||||
|
CalendarIcon,
|
||||||
|
ArrowLeftIcon,
|
||||||
|
PlayIcon,
|
||||||
|
HeartIcon,
|
||||||
|
ShareIcon,
|
||||||
|
PlusIcon,
|
||||||
|
CheckIcon,
|
||||||
|
UserIcon,
|
||||||
|
GlobeAltIcon,
|
||||||
|
TrophyIcon,
|
||||||
|
CheckCircleIcon as CompletedIcon
|
||||||
|
} from '@heroicons/react/24/outline'
|
||||||
|
import { gamesApi } from '../services/api'
|
||||||
|
import { Tooltip, PulseDot } from '../components/MicroInteractions'
|
||||||
|
|
||||||
|
export default function GameDetail() {
|
||||||
|
const { id } = useParams<{ id: string }>()
|
||||||
|
const navigate = useNavigate()
|
||||||
|
const gameId = parseInt(id || '0')
|
||||||
|
const [isPlayed, setIsPlayed] = useState(false)
|
||||||
|
const [isFavorite, setIsFavorite] = useState(false)
|
||||||
|
const [showShareMenu, setShowShareMenu] = useState(false)
|
||||||
|
|
||||||
|
const { data: game, isLoading, error } = useQuery({
|
||||||
|
queryKey: ['game', gameId],
|
||||||
|
queryFn: () => gamesApi.get(gameId),
|
||||||
|
enabled: !!gameId
|
||||||
|
})
|
||||||
|
|
||||||
|
// Handle image URL
|
||||||
|
const getImageUrl = (url?: string) => {
|
||||||
|
if (!url) return null
|
||||||
|
|
||||||
|
// If it's already a full URL, return as is
|
||||||
|
if (url.startsWith('http')) return url
|
||||||
|
|
||||||
|
// If it's a relative path starting with /images/, prepend API base
|
||||||
|
if (url.startsWith('/images/')) {
|
||||||
|
const apiUrl = (import.meta as any).env?.VITE_API_URL?.replace('/api', '') || ''
|
||||||
|
return `${apiUrl}${url}`
|
||||||
|
}
|
||||||
|
|
||||||
|
// Otherwise, assume it's relative to API
|
||||||
|
const apiUrl = (import.meta as any).env?.VITE_API_URL?.replace('/api', '') || ''
|
||||||
|
return `${apiUrl}/images/${url}`
|
||||||
|
}
|
||||||
|
|
||||||
|
const posterUrl = getImageUrl(game?.poster_url)
|
||||||
|
const backdropUrl = getImageUrl(game?.backdrop_url)
|
||||||
|
|
||||||
|
if (isLoading) {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen flex items-center justify-center">
|
||||||
|
<motion.div
|
||||||
|
className="text-center"
|
||||||
|
initial={{ opacity: 0, scale: 0.9 }}
|
||||||
|
animate={{ opacity: 1, scale: 1 }}
|
||||||
|
>
|
||||||
|
<div className="relative">
|
||||||
|
<div className="w-16 h-16 border-4 border-green-200 rounded-full"></div>
|
||||||
|
<motion.div
|
||||||
|
className="absolute top-0 left-0 w-16 h-16 border-4 border-green-600 rounded-full border-t-transparent"
|
||||||
|
animate={{ rotate: 360 }}
|
||||||
|
transition={{ duration: 1, repeat: Infinity, ease: "linear" }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<motion.p
|
||||||
|
className="mt-6 text-gray-600 text-lg"
|
||||||
|
initial={{ opacity: 0, y: 10 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ delay: 0.2 }}
|
||||||
|
>
|
||||||
|
Loading game details...
|
||||||
|
</motion.p>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (error || !game) {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen flex items-center justify-center">
|
||||||
|
<motion.div
|
||||||
|
className="text-center max-w-md"
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
>
|
||||||
|
<motion.div
|
||||||
|
initial={{ scale: 0 }}
|
||||||
|
animate={{ scale: 1 }}
|
||||||
|
transition={{ type: "spring", stiffness: 200 }}
|
||||||
|
>
|
||||||
|
<GamepadIcon className="mx-auto h-20 w-20 text-gray-400 mb-6" />
|
||||||
|
</motion.div>
|
||||||
|
<h2 className="text-3xl font-bold text-gray-900 mb-3">Game Not Found</h2>
|
||||||
|
<p className="text-gray-600 mb-8 text-lg">The game you're looking for doesn't exist or has been removed.</p>
|
||||||
|
<motion.div
|
||||||
|
whileHover={{ scale: 1.05 }}
|
||||||
|
whileTap={{ scale: 0.95 }}
|
||||||
|
>
|
||||||
|
<Link
|
||||||
|
to="/games"
|
||||||
|
className="btn btn-primary"
|
||||||
|
>
|
||||||
|
<ArrowLeftIcon className="w-5 h-5 mr-2" />
|
||||||
|
Back to Games
|
||||||
|
</Link>
|
||||||
|
</motion.div>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const formatPlaytime = (hours?: number) => {
|
||||||
|
if (!hours) return null
|
||||||
|
if (hours < 1) return `${Math.round(hours * 60)}m`
|
||||||
|
return `${hours}h`
|
||||||
|
}
|
||||||
|
|
||||||
|
const formatYear = (date?: string) => {
|
||||||
|
if (!date) return null
|
||||||
|
return new Date(date).getFullYear()
|
||||||
|
}
|
||||||
|
|
||||||
|
const getCompletionStatusIcon = (status?: string) => {
|
||||||
|
switch (status) {
|
||||||
|
case 'BEATEN':
|
||||||
|
return TrophyIcon
|
||||||
|
case 'PLAYING':
|
||||||
|
return PlayIcon
|
||||||
|
case 'COMPLETED':
|
||||||
|
return CompletedIcon
|
||||||
|
default:
|
||||||
|
return GamepadIcon
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const getCompletionStatusColor = (status?: string) => {
|
||||||
|
switch (status) {
|
||||||
|
case 'BEATEN':
|
||||||
|
return 'text-yellow-600 bg-yellow-50'
|
||||||
|
case 'PLAYING':
|
||||||
|
return 'text-blue-600 bg-blue-50'
|
||||||
|
case 'COMPLETED':
|
||||||
|
return 'text-green-600 bg-green-50'
|
||||||
|
default:
|
||||||
|
return 'text-gray-600 bg-gray-50'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const StatusIcon = getCompletionStatusIcon(game.completion_status)
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen">
|
||||||
|
{/* Backdrop */}
|
||||||
|
{backdropUrl && (
|
||||||
|
<div className="relative h-96 lg:h-[500px] overflow-hidden">
|
||||||
|
<motion.img
|
||||||
|
src={backdropUrl}
|
||||||
|
alt={game.title}
|
||||||
|
className="w-full h-full object-cover"
|
||||||
|
initial={{ scale: 1.1 }}
|
||||||
|
animate={{ scale: 1 }}
|
||||||
|
transition={{ duration: 1.5 }}
|
||||||
|
/>
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent"></div>
|
||||||
|
|
||||||
|
{/* Back button */}
|
||||||
|
<motion.div
|
||||||
|
className="absolute top-4 left-4 z-10"
|
||||||
|
initial={{ opacity: 0, x: -20 }}
|
||||||
|
animate={{ opacity: 1, x: 0 }}
|
||||||
|
transition={{ delay: 0.3 }}
|
||||||
|
>
|
||||||
|
<Tooltip text="Back to games">
|
||||||
|
<Link
|
||||||
|
to="/games"
|
||||||
|
className="inline-flex items-center px-4 py-2 bg-black/50 backdrop-blur-sm text-white rounded-xl hover:bg-black/70 transition-all duration-200"
|
||||||
|
>
|
||||||
|
<ArrowLeftIcon className="w-5 h-5 mr-2" />
|
||||||
|
Back
|
||||||
|
</Link>
|
||||||
|
</Tooltip>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
{/* Floating action buttons */}
|
||||||
|
<motion.div
|
||||||
|
className="absolute top-4 right-4 z-10 flex gap-2"
|
||||||
|
initial={{ opacity: 0, x: 20 }}
|
||||||
|
animate={{ opacity: 1, x: 0 }}
|
||||||
|
transition={{ delay: 0.4 }}
|
||||||
|
>
|
||||||
|
<Tooltip text="Add to favorites">
|
||||||
|
<motion.button
|
||||||
|
onClick={() => setIsFavorite(!isFavorite)}
|
||||||
|
className="p-3 bg-black/50 backdrop-blur-sm text-white rounded-xl hover:bg-black/70 transition-all duration-200"
|
||||||
|
whileHover={{ scale: 1.1 }}
|
||||||
|
whileTap={{ scale: 0.9 }}
|
||||||
|
>
|
||||||
|
<HeartIcon className={`w-5 h-5 ${isFavorite ? 'fill-red-500 text-red-500' : ''}`} />
|
||||||
|
</motion.button>
|
||||||
|
</Tooltip>
|
||||||
|
|
||||||
|
<Tooltip text="Share">
|
||||||
|
<motion.button
|
||||||
|
onClick={() => setShowShareMenu(!showShareMenu)}
|
||||||
|
className="p-3 bg-black/50 backdrop-blur-sm text-white rounded-xl hover:bg-black/70 transition-all duration-200 relative"
|
||||||
|
whileHover={{ scale: 1.1 }}
|
||||||
|
whileTap={{ scale: 0.9 }}
|
||||||
|
>
|
||||||
|
<ShareIcon className="w-5 h-5" />
|
||||||
|
<AnimatePresence>
|
||||||
|
{showShareMenu && (
|
||||||
|
<motion.div
|
||||||
|
className="absolute right-0 top-full mt-2 bg-white rounded-xl shadow-2xl p-2 min-w-[150px]"
|
||||||
|
initial={{ opacity: 0, scale: 0.9, y: -10 }}
|
||||||
|
animate={{ opacity: 1, scale: 1, y: 0 }}
|
||||||
|
exit={{ opacity: 0, scale: 0.9, y: -10 }}
|
||||||
|
>
|
||||||
|
{['Copy Link', 'Facebook', 'Twitter', 'Email'].map((item) => (
|
||||||
|
<motion.button
|
||||||
|
key={item}
|
||||||
|
className="block w-full text-left px-3 py-2 text-gray-700 hover:bg-gray-100 rounded-lg transition-colors text-sm"
|
||||||
|
whileHover={{ x: 5 }}
|
||||||
|
>
|
||||||
|
{item}
|
||||||
|
</motion.button>
|
||||||
|
))}
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
</AnimatePresence>
|
||||||
|
</motion.button>
|
||||||
|
</Tooltip>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
{/* Game title overlay */}
|
||||||
|
<motion.div
|
||||||
|
className="absolute bottom-6 left-6 right-6"
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ delay: 0.5 }}
|
||||||
|
>
|
||||||
|
<h1 className="text-4xl lg:text-6xl font-bold text-white mb-3 drop-shadow-lg">
|
||||||
|
{game.title}
|
||||||
|
</h1>
|
||||||
|
<div className="flex items-center gap-4 text-white/90">
|
||||||
|
{game.completion_status && (
|
||||||
|
<span className={`flex items-center gap-1 px-3 py-1 rounded-full text-sm font-medium ${getCompletionStatusColor(game.completion_status)}`}>
|
||||||
|
<StatusIcon className="w-4 h-4" />
|
||||||
|
{game.completion_status}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
{game.release_date && (
|
||||||
|
<span className="flex items-center gap-1">
|
||||||
|
<CalendarIcon className="w-4 h-4" />
|
||||||
|
{formatYear(game.release_date)}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
{game.playtime_hours && (
|
||||||
|
<span className="flex items-center gap-1">
|
||||||
|
<ClockIcon className="w-4 h-4" />
|
||||||
|
{formatPlaytime(game.playtime_hours)}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
{game.rating && (
|
||||||
|
<span className="flex items-center gap-1">
|
||||||
|
<StarIcon className="w-4 h-4 text-yellow-400" />
|
||||||
|
{game.rating}/10
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="container mx-auto px-4 py-8">
|
||||||
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||||
|
{/* Poster and basic info */}
|
||||||
|
<motion.div
|
||||||
|
className="lg:col-span-1"
|
||||||
|
initial={{ opacity: 0, x: -20 }}
|
||||||
|
animate={{ opacity: 1, x: 0 }}
|
||||||
|
transition={{ delay: 0.6 }}
|
||||||
|
>
|
||||||
|
<div className="sticky top-4 space-y-6">
|
||||||
|
{/* Poster */}
|
||||||
|
<motion.div
|
||||||
|
className="relative group overflow-hidden"
|
||||||
|
whileHover={{ scale: 1.02 }}
|
||||||
|
>
|
||||||
|
{posterUrl ? (
|
||||||
|
<img
|
||||||
|
src={posterUrl}
|
||||||
|
alt={game.title}
|
||||||
|
className="w-3/4 mx-auto rounded-xl shadow-lg"
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<div className="w-3/4 mx-auto aspect-[2/3] bg-gradient-to-br from-green-100 to-green-200 rounded-xl flex items-center justify-center">
|
||||||
|
<GamepadIcon className="text-green-500 w-12 h-12" />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Play button overlay */}
|
||||||
|
<motion.div
|
||||||
|
className="absolute inset-0 bg-black/40 rounded-xl flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300"
|
||||||
|
whileHover={{ opacity: 1 }}
|
||||||
|
>
|
||||||
|
<motion.button
|
||||||
|
className="p-3 bg-green-600/90 backdrop-blur-sm rounded-full text-white hover:bg-green-700 transition-all duration-200"
|
||||||
|
whileHover={{ scale: 1.1 }}
|
||||||
|
whileTap={{ scale: 0.9 }}
|
||||||
|
>
|
||||||
|
<PlayIcon className="w-6 h-6" />
|
||||||
|
</motion.button>
|
||||||
|
</motion.div>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
{/* Action buttons */}
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<motion.button
|
||||||
|
onClick={() => setIsPlayed(!isPlayed)}
|
||||||
|
className={`flex-1 btn flex items-center justify-center gap-1 text-sm py-2 ${
|
||||||
|
isPlayed ? 'bg-green-600 hover:bg-green-700' : 'btn-primary'
|
||||||
|
}`}
|
||||||
|
whileHover={{ scale: 1.02 }}
|
||||||
|
whileTap={{ scale: 0.98 }}
|
||||||
|
>
|
||||||
|
{isPlayed ? (
|
||||||
|
<><CheckIcon className="w-4 h-4" /> Played</>
|
||||||
|
) : (
|
||||||
|
<><PlusIcon className="w-4 h-4" /> Mark as Played</>
|
||||||
|
)}
|
||||||
|
</motion.button>
|
||||||
|
|
||||||
|
<motion.button
|
||||||
|
onClick={() => setIsFavorite(!isFavorite)}
|
||||||
|
className={`p-2 rounded-xl border-2 transition-all duration-200 ${
|
||||||
|
isFavorite
|
||||||
|
? 'border-red-500 bg-red-50 text-red-500'
|
||||||
|
: 'border-gray-200 hover:border-red-300 hover:bg-red-50'
|
||||||
|
}`}
|
||||||
|
whileHover={{ scale: 1.1 }}
|
||||||
|
whileTap={{ scale: 0.9 }}
|
||||||
|
>
|
||||||
|
<HeartIcon className={`w-4 h-4 ${isFavorite ? 'fill-current' : ''}`} />
|
||||||
|
</motion.button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Game info */}
|
||||||
|
<div className="bg-gradient-to-br from-green-50 to-emerald-50 dark:from-green-900/20 dark:to-emerald-900/20 rounded-xl shadow-md p-5 border border-green-200 dark:border-green-800 space-y-3">
|
||||||
|
<h3 className="text-base font-bold text-green-800 dark:text-green-200 flex items-center gap-2">
|
||||||
|
<GamepadIcon className="w-4 h-4" />
|
||||||
|
Game Details
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
{game.rating && (
|
||||||
|
<div className="flex items-center justify-between p-2 bg-white/50 dark:bg-gray-800/50 rounded-lg">
|
||||||
|
<span className="text-green-600 dark:text-green-400 font-medium text-sm">Rating</span>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<StarIcon className="w-4 h-4 text-yellow-500" />
|
||||||
|
<span className="text-base font-bold text-slate-900 dark:text-slate-100">{game.rating}/10</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{game.playtime_hours && (
|
||||||
|
<div className="flex items-center justify-between p-2 bg-white/50 dark:bg-gray-800/50 rounded-lg">
|
||||||
|
<span className="text-green-600 dark:text-green-400 font-medium text-sm">Playtime</span>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<ClockIcon className="w-4 h-4 text-gray-400" />
|
||||||
|
<span className="font-medium text-slate-900 dark:text-slate-100 text-sm">{formatPlaytime(game.playtime_hours)}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{game.release_date && (
|
||||||
|
<div className="flex items-center justify-between p-2 bg-white/50 dark:bg-gray-800/50 rounded-lg">
|
||||||
|
<span className="text-green-600 dark:text-green-400 font-medium text-sm">Release</span>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<CalendarIcon className="w-4 h-4 text-gray-400" />
|
||||||
|
<span className="font-medium text-slate-900 dark:text-slate-100 text-sm">{formatYear(game.release_date)}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{game.platform && (
|
||||||
|
<div className="flex items-center justify-between p-2 bg-white/50 dark:bg-gray-800/50 rounded-lg">
|
||||||
|
<span className="text-green-600 dark:text-green-400 font-medium text-sm">Platform</span>
|
||||||
|
<span className="px-2 py-1 bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-200 rounded-full text-xs font-medium">
|
||||||
|
{game.platform}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{game.source_name && (
|
||||||
|
<div className="flex items-center justify-between p-2 bg-white/50 dark:bg-gray-800/50 rounded-lg">
|
||||||
|
<span className="text-green-600 dark:text-green-400 font-medium text-sm">Source</span>
|
||||||
|
<span className="px-2 py-1 bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-200 rounded-full text-xs font-medium">
|
||||||
|
{game.source_name}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{isPlayed && (
|
||||||
|
<div className="flex items-center justify-between p-3 bg-green-50 dark:bg-green-900/20 rounded-lg border-t border-green-200 dark:border-green-800">
|
||||||
|
<span className="text-green-600 dark:text-green-400 font-medium">Status</span>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<PulseDot color="green" />
|
||||||
|
<span className="text-green-600 dark:text-green-400 font-medium">Played</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
{/* Details */}
|
||||||
|
<motion.div
|
||||||
|
className="lg:col-span-2 space-y-8"
|
||||||
|
initial={{ opacity: 0, x: 20 }}
|
||||||
|
animate={{ opacity: 1, x: 0 }}
|
||||||
|
transition={{ delay: 0.7 }}
|
||||||
|
>
|
||||||
|
{/* Overview */}
|
||||||
|
{game.description && (
|
||||||
|
<motion.div
|
||||||
|
className="bg-gradient-to-br from-blue-50 to-indigo-50 dark:from-blue-900/20 dark:to-indigo-900/20 rounded-xl shadow-md p-6 border border-blue-200 dark:border-blue-800"
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ delay: 0.8 }}
|
||||||
|
>
|
||||||
|
<h2 className="text-xl font-bold text-blue-800 dark:text-blue-200 mb-3 flex items-center gap-2">
|
||||||
|
<GamepadIcon className="w-5 h-5" />
|
||||||
|
Overview
|
||||||
|
</h2>
|
||||||
|
<p className="text-slate-700 dark:text-slate-300 leading-relaxed">{game.description}</p>
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Gameplay */}
|
||||||
|
{game.gameplay && (
|
||||||
|
<motion.div
|
||||||
|
className="bg-gradient-to-br from-purple-50 to-pink-50 dark:from-purple-900/20 dark:to-pink-900/20 rounded-xl shadow-md p-6 border border-purple-200 dark:border-purple-800"
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ delay: 0.9 }}
|
||||||
|
>
|
||||||
|
<h2 className="text-xl font-bold text-purple-800 dark:text-purple-200 mb-3 flex items-center gap-2">
|
||||||
|
<PlayIcon className="w-5 h-5" />
|
||||||
|
Gameplay
|
||||||
|
</h2>
|
||||||
|
<p className="text-slate-700 dark:text-slate-300 leading-relaxed">{game.gameplay}</p>
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Game Details */}
|
||||||
|
<motion.div
|
||||||
|
className="bg-gradient-to-br from-green-50 to-emerald-50 dark:from-green-900/20 dark:to-emerald-900/20 rounded-xl shadow-md p-6 border border-green-200 dark:border-green-800"
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ delay: 1.0 }}
|
||||||
|
>
|
||||||
|
<h2 className="text-xl font-bold text-green-800 dark:text-green-200 mb-4 flex items-center gap-2">
|
||||||
|
<UserIcon className="w-5 h-5" />
|
||||||
|
Game Information
|
||||||
|
</h2>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
|
{game.developer && (
|
||||||
|
<div className="bg-white/50 dark:bg-gray-800/50 rounded-lg p-3">
|
||||||
|
<h3 className="text-base font-semibold text-gray-900 dark:text-white mb-1">Developer</h3>
|
||||||
|
<p className="text-gray-700 dark:text-gray-300">{game.developer}</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{game.publisher && (
|
||||||
|
<div className="bg-white/50 dark:bg-gray-800/50 rounded-lg p-3">
|
||||||
|
<h3 className="text-base font-semibold text-gray-900 dark:text-white mb-1">Publisher</h3>
|
||||||
|
<p className="text-gray-700 dark:text-gray-300">{game.publisher}</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{game.genres && Array.isArray(game.genres) && game.genres.length > 0 && (
|
||||||
|
<div className="bg-white/50 dark:bg-gray-800/50 rounded-lg p-3">
|
||||||
|
<h3 className="text-base font-semibold text-gray-900 dark:text-white mb-2">Genres</h3>
|
||||||
|
<div className="flex flex-wrap gap-2">
|
||||||
|
{game.genres.map((genre: string) => (
|
||||||
|
<span key={genre} className="px-2 py-1 bg-gradient-to-r from-green-100 to-emerald-100 text-green-800 rounded-full text-xs font-medium">
|
||||||
|
{genre}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{game.series && (
|
||||||
|
<div className="bg-white/50 dark:bg-gray-800/50 rounded-lg p-3">
|
||||||
|
<h3 className="text-base font-semibold text-gray-900 dark:text-white mb-1">Series</h3>
|
||||||
|
<p className="text-gray-700 dark:text-gray-300">{game.series}</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
{/* Additional metadata */}
|
||||||
|
{(game.community_score || game.critic_score || game.time_to_beat) && (
|
||||||
|
<motion.div
|
||||||
|
className="bg-gradient-to-br from-orange-50 to-amber-50 dark:from-orange-900/20 dark:to-amber-900/20 rounded-xl shadow-md p-6 border border-orange-200 dark:border-orange-800"
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ delay: 1.1 }}
|
||||||
|
>
|
||||||
|
<h2 className="text-xl font-bold text-orange-800 dark:text-orange-200 mb-4 flex items-center gap-2">
|
||||||
|
<StarIcon className="w-5 h-5" />
|
||||||
|
Scores & Stats
|
||||||
|
</h2>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
|
{game.community_score && (
|
||||||
|
<div className="flex items-center justify-between p-4 bg-gray-50 rounded-xl">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<GlobeAltIcon className="w-5 h-5 text-gray-400" />
|
||||||
|
<span className="text-gray-600">Community Score</span>
|
||||||
|
</div>
|
||||||
|
<span className="text-gray-900 font-bold text-lg">
|
||||||
|
{game.community_score}%
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{game.critic_score && (
|
||||||
|
<div className="flex items-center justify-between p-4 bg-gray-50 rounded-xl">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<StarIcon className="w-5 h-5 text-yellow-500" />
|
||||||
|
<span className="text-gray-600">Critic Score</span>
|
||||||
|
</div>
|
||||||
|
<span className="text-gray-900 font-bold text-lg">
|
||||||
|
{game.critic_score}%
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{game.time_to_beat && (
|
||||||
|
<div className="flex items-center justify-between p-4 bg-gray-50 rounded-xl">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<ClockIcon className="w-5 h-5 text-gray-400" />
|
||||||
|
<span className="text-gray-600">Time to Beat</span>
|
||||||
|
</div>
|
||||||
|
<span className="text-gray-900 font-medium">
|
||||||
|
{game.time_to_beat}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
171
src/pages/Games.tsx
Normal file
171
src/pages/Games.tsx
Normal file
@@ -0,0 +1,171 @@
|
|||||||
|
import React, { useState, useContext } from 'react'
|
||||||
|
import { motion } from 'framer-motion'
|
||||||
|
import { useGames } from '../hooks/useApi'
|
||||||
|
import { ViewContext } from '../components/Layout'
|
||||||
|
import { useNavigate } from 'react-router-dom'
|
||||||
|
import { ComputerDesktopIcon as GamepadIcon } from '@heroicons/react/24/outline'
|
||||||
|
|
||||||
|
// Import from alternative frontend
|
||||||
|
import { MediaListView } from '../../../frontend/components/MediaListView'
|
||||||
|
import { MediaDetailView } from '../../../frontend/components/MediaDetailView'
|
||||||
|
|
||||||
|
export default function Games() {
|
||||||
|
const viewContext = useContext(ViewContext)
|
||||||
|
const viewMode = viewContext?.viewMode || 'grid'
|
||||||
|
const gridColumns = viewContext?.gridColumns || 5
|
||||||
|
const coverSize = viewContext?.coverSize || 200
|
||||||
|
const PaginationComp = viewContext?.PaginationComponent
|
||||||
|
const navigate = useNavigate()
|
||||||
|
|
||||||
|
|
||||||
|
const handleContentClick = (content) => {
|
||||||
|
navigate(`/games/${content.id}`)
|
||||||
|
}
|
||||||
|
|
||||||
|
const getGridClass = (columns: number) => {
|
||||||
|
const columnClasses = {
|
||||||
|
2: 'grid-cols-1 md:grid-cols-2',
|
||||||
|
3: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
|
||||||
|
4: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
|
||||||
|
5: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5',
|
||||||
|
6: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6',
|
||||||
|
7: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-7',
|
||||||
|
8: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-8'
|
||||||
|
}
|
||||||
|
return columnClasses[columns as keyof typeof columnClasses] || columnClasses[5]
|
||||||
|
}
|
||||||
|
|
||||||
|
const [currentPage, setCurrentPage] = useState(1)
|
||||||
|
const [pageSize, setPageSize] = useState(24)
|
||||||
|
const { data: gamesData, isLoading } = useGames({
|
||||||
|
page: currentPage,
|
||||||
|
per_page: pageSize
|
||||||
|
})
|
||||||
|
|
||||||
|
const games = gamesData?.items || []
|
||||||
|
const pagination = gamesData?.pagination
|
||||||
|
|
||||||
|
// Convert games to MediaItem format for MediaListView
|
||||||
|
const mediaItems = games.map(game => ({
|
||||||
|
id: game.id.toString(),
|
||||||
|
title: game.title || 'Untitled Game',
|
||||||
|
type: 'game' as const,
|
||||||
|
coverUrl: game.cover_url || game.poster_url || '',
|
||||||
|
rating: Number(game.rating) || 0,
|
||||||
|
status: 'completed' as const, // Default status
|
||||||
|
releaseYear: game.release_year || game.year || new Date().getFullYear(),
|
||||||
|
addedAt: game.created_at || new Date().toISOString(),
|
||||||
|
favorite: game.favorite || false,
|
||||||
|
platform: game.platform || game.source_name || 'Unknown',
|
||||||
|
description: game.description || '',
|
||||||
|
genres: game.genres || []
|
||||||
|
}))
|
||||||
|
|
||||||
|
// State for MediaListView
|
||||||
|
const [selectedId, setSelectedId] = useState<string | null>(null)
|
||||||
|
const [multiSelectedIds, setMultiSelectedIds] = useState<Set<string>>(new Set())
|
||||||
|
const [detailItem, setDetailItem] = useState<any>(null)
|
||||||
|
|
||||||
|
const handleSelect = (item: any) => {
|
||||||
|
setSelectedId(item.id)
|
||||||
|
setDetailItem(item)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleToggleSelect = (id: string) => {
|
||||||
|
const newSelected = new Set(multiSelectedIds)
|
||||||
|
if (newSelected.has(id)) {
|
||||||
|
newSelected.delete(id)
|
||||||
|
} else {
|
||||||
|
newSelected.add(id)
|
||||||
|
}
|
||||||
|
setMultiSelectedIds(newSelected)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{isLoading ? (
|
||||||
|
<div className={`grid gap-6 ${getGridClass(gridColumns)}`}>
|
||||||
|
{Array.from({ length: pageSize }, (_, i) => (
|
||||||
|
<div key={i} className="bg-white dark:bg-slate-800 rounded-xl p-4 animate-pulse">
|
||||||
|
<div className="bg-slate-200 dark:bg-slate-600 h-32 rounded-lg mb-4"></div>
|
||||||
|
<div className="h-4 bg-slate-200 dark:bg-slate-600 rounded mb-2"></div>
|
||||||
|
<div className="h-4 bg-slate-200 dark:bg-slate-600 rounded w-3/4"></div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
) : viewMode === 'list' ? (
|
||||||
|
// Use MediaListView for list mode with sideview
|
||||||
|
<div className="flex w-full h-full">
|
||||||
|
<div className={`${detailItem ? 'w-1/2 hidden md:flex' : 'w-full'} h-full flex flex-col transition-all duration-500`}>
|
||||||
|
<div className="h-[600px] border border-slate-200 dark:border-slate-700 rounded-lg overflow-hidden">
|
||||||
|
<MediaListView
|
||||||
|
items={mediaItems}
|
||||||
|
onSelect={handleSelect}
|
||||||
|
selectedId={selectedId}
|
||||||
|
onToggleSelect={handleToggleSelect}
|
||||||
|
multiSelectedIds={multiSelectedIds}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{detailItem && (
|
||||||
|
<div className="w-full md:w-1/2 h-full border-l border-white/5 relative overflow-hidden animate-in slide-in-from-right duration-300">
|
||||||
|
<MediaDetailView
|
||||||
|
item={detailItem}
|
||||||
|
allMedia={mediaItems}
|
||||||
|
onBack={() => setDetailItem(null)}
|
||||||
|
onEdit={(item) => console.log('Edit item:', item)}
|
||||||
|
onToggleFavorite={(id, isFav) => console.log('Toggle favorite:', id, isFav)}
|
||||||
|
onSelectRelated={(item) => setDetailItem(item)}
|
||||||
|
onSelectPerson={(name, id) => console.log('Select person:', name, id)}
|
||||||
|
onViewAll={(type, id) => console.log('View all:', type, id)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
// Grid view
|
||||||
|
<motion.div
|
||||||
|
className={`grid gap-6 ${getGridClass(gridColumns)}`}
|
||||||
|
>
|
||||||
|
{games.map((game, index) => (
|
||||||
|
<motion.div
|
||||||
|
key={game.id}
|
||||||
|
initial={{ opacity: 0, scale: 0.8 }}
|
||||||
|
animate={{ opacity: 1, scale: 1 }}
|
||||||
|
onClick={() => handleContentClick(game)}
|
||||||
|
transition={{ delay: index * 0.03 }}
|
||||||
|
className="bg-white dark:bg-slate-800 rounded-xl p-6 shadow-lg hover:shadow-xl transition-shadow"
|
||||||
|
>
|
||||||
|
<div className="flex gap-4">
|
||||||
|
<div className="bg-slate-200 dark:bg-slate-600 w-24 h-32 rounded-lg flex-shrink-0"></div>
|
||||||
|
<div className="flex-1">
|
||||||
|
<h3 className="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-2">
|
||||||
|
{game.title || 'Untitled Game'}
|
||||||
|
</h3>
|
||||||
|
<p className="text-slate-600 dark:text-slate-400 text-sm">
|
||||||
|
{game.description || 'No description available'}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{!isLoading && pagination && pagination.last_page > 1 && PaginationComp && (
|
||||||
|
<div className="mt-8">
|
||||||
|
<PaginationComp
|
||||||
|
currentPage={currentPage}
|
||||||
|
lastPage={pagination.last_page}
|
||||||
|
total={pagination.total}
|
||||||
|
onPageChange={setCurrentPage}
|
||||||
|
itemsPerPage={pageSize}
|
||||||
|
onItemsPerPageChange={setPageSize}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
412
src/pages/GamesPage.tsx
Normal file
412
src/pages/GamesPage.tsx
Normal file
@@ -0,0 +1,412 @@
|
|||||||
|
import { useState } from 'react'
|
||||||
|
import React from 'react'
|
||||||
|
import { motion, AnimatePresence } from 'framer-motion'
|
||||||
|
import { useQuery } from '@tanstack/react-query'
|
||||||
|
import {
|
||||||
|
ComputerDesktopIcon as GamepadIcon,
|
||||||
|
MagnifyingGlassIcon,
|
||||||
|
AdjustmentsHorizontalIcon,
|
||||||
|
TrophyIcon,
|
||||||
|
PlayIcon,
|
||||||
|
CheckCircleIcon,
|
||||||
|
ChevronDownIcon,
|
||||||
|
ListBulletIcon,
|
||||||
|
Squares2X2Icon,
|
||||||
|
PhotoIcon
|
||||||
|
} from '@heroicons/react/24/outline'
|
||||||
|
import GameCard, { GameItem } from '../components/GameCard'
|
||||||
|
import { gamesApi } from '../services/api'
|
||||||
|
|
||||||
|
type ViewMode = 'grid' | 'list' | 'covers'
|
||||||
|
type SortOption = 'title_asc' | 'title_desc' | 'year_asc' | 'year_desc' | 'playtime_desc' | 'rating_desc' | 'last_played_desc'
|
||||||
|
|
||||||
|
const sortOptions: { value: SortOption; label: string }[] = [
|
||||||
|
{ value: 'title_asc', label: 'Title (A-Z)' },
|
||||||
|
{ value: 'title_desc', label: 'Title (Z-A)' },
|
||||||
|
{ value: 'year_asc', label: 'Release Year (Oldest First)' },
|
||||||
|
{ value: 'year_desc', label: 'Release Year (Newest First)' },
|
||||||
|
{ value: 'playtime_desc', label: 'Most Played' },
|
||||||
|
{ value: 'rating_desc', label: 'Highest Rated' },
|
||||||
|
{ value: 'last_played_desc', label: 'Last Played' }
|
||||||
|
]
|
||||||
|
|
||||||
|
const categoryIcons = {
|
||||||
|
BEATEN: TrophyIcon,
|
||||||
|
PLAYING: PlayIcon,
|
||||||
|
COMPLETED: CheckCircleIcon,
|
||||||
|
UNPLAYED: GamepadIcon
|
||||||
|
}
|
||||||
|
|
||||||
|
const categoryColors = {
|
||||||
|
BEATEN: 'from-yellow-500 to-amber-600',
|
||||||
|
PLAYING: 'from-blue-500 to-blue-600',
|
||||||
|
COMPLETED: 'from-green-500 to-green-600',
|
||||||
|
UNPLAYED: 'from-gray-500 to-gray-600'
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function GamesPage() {
|
||||||
|
const [searchTerm, setSearchTerm] = useState('')
|
||||||
|
const [selectedCategory, setSelectedCategory] = useState<string | null>(null)
|
||||||
|
const [viewMode, setViewMode] = useState<ViewMode>('grid')
|
||||||
|
const [sortBy, setSortBy] = useState<SortOption>('title_asc')
|
||||||
|
const [showFilters, setShowFilters] = useState(false)
|
||||||
|
const [expandedCategories, setExpandedCategories] = useState<Set<string>>(new Set(['BEATEN', 'PLAYING']))
|
||||||
|
|
||||||
|
const { data: gamesData, isLoading, error } = useQuery({
|
||||||
|
queryKey: ['games', searchTerm, sortBy],
|
||||||
|
queryFn: () => gamesApi.getAll({ search: searchTerm, sort: sortBy }),
|
||||||
|
enabled: !selectedCategory
|
||||||
|
})
|
||||||
|
|
||||||
|
const { data: categoryData, isLoading: isLoadingCategory } = useQuery({
|
||||||
|
queryKey: ['games', 'category', selectedCategory, searchTerm, sortBy],
|
||||||
|
queryFn: () => gamesApi.getByCategory(selectedCategory!, { search: searchTerm, sort: sortBy }),
|
||||||
|
enabled: !!selectedCategory
|
||||||
|
})
|
||||||
|
|
||||||
|
const toggleCategory = (category: string) => {
|
||||||
|
setExpandedCategories(prev => {
|
||||||
|
const newSet = new Set(prev)
|
||||||
|
if (newSet.has(category)) {
|
||||||
|
newSet.delete(category)
|
||||||
|
} else {
|
||||||
|
newSet.add(category)
|
||||||
|
}
|
||||||
|
return newSet
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleSearch = (e: React.FormEvent) => {
|
||||||
|
e.preventDefault()
|
||||||
|
}
|
||||||
|
|
||||||
|
const clearFilters = () => {
|
||||||
|
setSearchTerm('')
|
||||||
|
setSelectedCategory(null)
|
||||||
|
setSortBy('title_asc')
|
||||||
|
}
|
||||||
|
|
||||||
|
const activeFiltersCount = [
|
||||||
|
searchTerm,
|
||||||
|
selectedCategory,
|
||||||
|
sortBy !== 'title_asc'
|
||||||
|
].filter(Boolean).length
|
||||||
|
|
||||||
|
if (isLoading || isLoadingCategory) {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen flex items-center justify-center">
|
||||||
|
<motion.div
|
||||||
|
className="text-center"
|
||||||
|
initial={{ opacity: 0, scale: 0.9 }}
|
||||||
|
animate={{ opacity: 1, scale: 1 }}
|
||||||
|
>
|
||||||
|
<div className="relative">
|
||||||
|
<div className="w-16 h-16 border-4 border-green-200 rounded-full"></div>
|
||||||
|
<motion.div
|
||||||
|
className="absolute top-0 left-0 w-16 h-16 border-4 border-green-600 rounded-full border-t-transparent"
|
||||||
|
animate={{ rotate: 360 }}
|
||||||
|
transition={{ duration: 1, repeat: Infinity, ease: "linear" }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<motion.p
|
||||||
|
className="mt-6 text-gray-600 text-lg"
|
||||||
|
initial={{ opacity: 0, y: 10 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ delay: 0.2 }}
|
||||||
|
>
|
||||||
|
Loading games...
|
||||||
|
</motion.p>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen flex items-center justify-center">
|
||||||
|
<motion.div
|
||||||
|
className="text-center max-w-md"
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
>
|
||||||
|
<GamepadIcon className="mx-auto h-20 w-20 text-gray-400 mb-6" />
|
||||||
|
<h2 className="text-3xl font-bold text-gray-900 mb-3">Error Loading Games</h2>
|
||||||
|
<p className="text-gray-600 mb-8 text-lg">Failed to load your game library. Please try again later.</p>
|
||||||
|
<motion.button
|
||||||
|
onClick={() => window.location.reload()}
|
||||||
|
className="btn btn-primary"
|
||||||
|
whileHover={{ scale: 1.05 }}
|
||||||
|
whileTap={{ scale: 0.95 }}
|
||||||
|
>
|
||||||
|
Try Again
|
||||||
|
</motion.button>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const categories = selectedCategory
|
||||||
|
? [{ name: selectedCategory, count: categoryData?.count || 0, games: categoryData?.games || [] }]
|
||||||
|
: gamesData?.data || []
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-gray-50">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="bg-white shadow-sm border-b border-gray-200">
|
||||||
|
<div className="container mx-auto px-4 py-6">
|
||||||
|
<div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div className="p-2 bg-gradient-to-r from-green-500 to-emerald-600 rounded-xl">
|
||||||
|
<GamepadIcon className="w-6 h-6 text-white" />
|
||||||
|
</div>
|
||||||
|
<h1 className="text-3xl font-bold text-gray-900">Games Library</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Search and Filters */}
|
||||||
|
<div className="flex flex-col sm:flex-row gap-3 flex-1 lg:max-w-2xl">
|
||||||
|
<form onSubmit={handleSearch} className="flex-1">
|
||||||
|
<div className="relative">
|
||||||
|
<MagnifyingGlassIcon className="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400" />
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="Search games..."
|
||||||
|
value={searchTerm}
|
||||||
|
onChange={(e) => setSearchTerm(e.target.value)}
|
||||||
|
className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-xl focus:ring-2 focus:ring-green-500 focus:border-transparent"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<motion.button
|
||||||
|
onClick={() => setShowFilters(!showFilters)}
|
||||||
|
className={`px-4 py-2 rounded-xl border transition-all duration-200 flex items-center gap-2 ${
|
||||||
|
activeFiltersCount > 0
|
||||||
|
? 'border-green-500 bg-green-50 text-green-700'
|
||||||
|
: 'border-gray-300 hover:border-gray-400'
|
||||||
|
}`}
|
||||||
|
whileHover={{ scale: 1.02 }}
|
||||||
|
whileTap={{ scale: 0.98 }}
|
||||||
|
>
|
||||||
|
<AdjustmentsHorizontalIcon className="w-4 h-4" />
|
||||||
|
Filters
|
||||||
|
{activeFiltersCount > 0 && (
|
||||||
|
<span className="bg-green-600 text-white text-xs px-2 py-1 rounded-full">
|
||||||
|
{activeFiltersCount}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</motion.button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Filters Panel */}
|
||||||
|
<AnimatePresence>
|
||||||
|
{showFilters && (
|
||||||
|
<motion.div
|
||||||
|
className="mt-6 p-4 bg-gray-50 rounded-xl border border-gray-200"
|
||||||
|
initial={{ opacity: 0, height: 0 }}
|
||||||
|
animate={{ opacity: 1, height: 'auto' }}
|
||||||
|
exit={{ opacity: 0, height: 0 }}
|
||||||
|
transition={{ duration: 0.3 }}
|
||||||
|
>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||||
|
{/* Sort */}
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-2">Sort By</label>
|
||||||
|
<select
|
||||||
|
value={sortBy}
|
||||||
|
onChange={(e) => setSortBy(e.target.value as SortOption)}
|
||||||
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent"
|
||||||
|
>
|
||||||
|
{sortOptions.map(option => (
|
||||||
|
<option key={option.value} value={option.value}>
|
||||||
|
{option.label}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* View Mode */}
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-700 mb-2">View Mode</label>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
{[
|
||||||
|
{ mode: 'grid' as ViewMode, icon: Squares2X2Icon, label: 'Grid' },
|
||||||
|
{ mode: 'list' as ViewMode, icon: ListBulletIcon, label: 'List' },
|
||||||
|
{ mode: 'covers' as ViewMode, icon: PhotoIcon, label: 'Covers' }
|
||||||
|
].map(({ mode, icon: Icon, label }) => (
|
||||||
|
<motion.button
|
||||||
|
key={mode}
|
||||||
|
onClick={() => setViewMode(mode)}
|
||||||
|
className={`flex-1 px-3 py-2 rounded-lg border transition-all duration-200 flex items-center justify-center gap-1 ${
|
||||||
|
viewMode === mode
|
||||||
|
? 'border-green-500 bg-green-50 text-green-700'
|
||||||
|
: 'border-gray-300 hover:border-gray-400'
|
||||||
|
}`}
|
||||||
|
whileHover={{ scale: 1.02 }}
|
||||||
|
whileTap={{ scale: 0.98 }}
|
||||||
|
>
|
||||||
|
<Icon className="w-4 h-4" />
|
||||||
|
<span className="text-sm">{label}</span>
|
||||||
|
</motion.button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Clear Filters */}
|
||||||
|
<div className="flex items-end">
|
||||||
|
<motion.button
|
||||||
|
onClick={clearFilters}
|
||||||
|
className="w-full px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition-all duration-200"
|
||||||
|
whileHover={{ scale: 1.02 }}
|
||||||
|
whileTap={{ scale: 0.98 }}
|
||||||
|
>
|
||||||
|
Clear All Filters
|
||||||
|
</motion.button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
</AnimatePresence>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Categories and Games */}
|
||||||
|
<div className="container mx-auto px-4 py-8">
|
||||||
|
{/* Category Navigation */}
|
||||||
|
{!selectedCategory && (
|
||||||
|
<motion.div
|
||||||
|
className="mb-8"
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
>
|
||||||
|
<div className="flex flex-wrap gap-3">
|
||||||
|
{categories.map((category: any) => {
|
||||||
|
const Icon = categoryIcons[category.name as keyof typeof categoryIcons]
|
||||||
|
return (
|
||||||
|
<motion.button
|
||||||
|
key={category.name}
|
||||||
|
onClick={() => setSelectedCategory(category.name)}
|
||||||
|
className="group relative px-6 py-3 bg-white rounded-xl shadow-sm border border-gray-200 hover:shadow-md transition-all duration-200"
|
||||||
|
whileHover={{ scale: 1.02, y: -2 }}
|
||||||
|
whileTap={{ scale: 0.98 }}
|
||||||
|
>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div className={`p-2 bg-gradient-to-r ${categoryColors[category.name as keyof typeof categoryColors]} rounded-lg`}>
|
||||||
|
<Icon className="w-5 h-5 text-white" />
|
||||||
|
</div>
|
||||||
|
<div className="text-left">
|
||||||
|
<div className="font-semibold text-gray-900">{category.name}</div>
|
||||||
|
<div className="text-sm text-gray-500">{category.count} games</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<ChevronDownIcon className="absolute right-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400 group-hover:text-gray-600 transition-colors" />
|
||||||
|
</motion.button>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Back to Categories */}
|
||||||
|
{selectedCategory && (
|
||||||
|
<motion.div
|
||||||
|
className="mb-6"
|
||||||
|
initial={{ opacity: 0, x: -20 }}
|
||||||
|
animate={{ opacity: 1, x: 0 }}
|
||||||
|
>
|
||||||
|
<motion.button
|
||||||
|
onClick={() => setSelectedCategory(null)}
|
||||||
|
className="flex items-center gap-2 px-4 py-2 bg-white rounded-lg border border-gray-300 hover:bg-gray-50 transition-all duration-200"
|
||||||
|
whileHover={{ scale: 1.02 }}
|
||||||
|
whileTap={{ scale: 0.98 }}
|
||||||
|
>
|
||||||
|
<ChevronDownIcon className="w-4 h-4 rotate-90" />
|
||||||
|
Back to Categories
|
||||||
|
</motion.button>
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Games List */}
|
||||||
|
<div className="space-y-8">
|
||||||
|
{categories.map((category: any) => (
|
||||||
|
<motion.div
|
||||||
|
key={category.name}
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ delay: 0.1 }}
|
||||||
|
>
|
||||||
|
{/* Category Header */}
|
||||||
|
<div className="flex items-center justify-between mb-4">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div className={`p-2 bg-gradient-to-r ${categoryColors[category.name as keyof typeof categoryColors]} rounded-lg`}>
|
||||||
|
{React.createElement(categoryIcons[category.name as keyof typeof categoryIcons], {
|
||||||
|
className: "w-5 h-5 text-white"
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
<h2 className="text-2xl font-bold text-gray-900">
|
||||||
|
{category.name} ({category.count})
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{!selectedCategory && (
|
||||||
|
<motion.button
|
||||||
|
onClick={() => toggleCategory(category.name)}
|
||||||
|
className="flex items-center gap-2 px-3 py-1 text-sm text-gray-600 hover:text-gray-900 transition-colors"
|
||||||
|
whileHover={{ scale: 1.02 }}
|
||||||
|
whileTap={{ scale: 0.98 }}
|
||||||
|
>
|
||||||
|
{expandedCategories.has(category.name) ? 'Collapse' : 'Expand'}
|
||||||
|
<ChevronDownIcon className={`w-4 h-4 transform transition-transform ${
|
||||||
|
expandedCategories.has(category.name) ? 'rotate-180' : ''
|
||||||
|
}`} />
|
||||||
|
</motion.button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Games Grid/List */}
|
||||||
|
<AnimatePresence>
|
||||||
|
{(expandedCategories.has(category.name) || selectedCategory) && (
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, height: 0 }}
|
||||||
|
animate={{ opacity: 1, height: 'auto' }}
|
||||||
|
exit={{ opacity: 0, height: 0 }}
|
||||||
|
transition={{ duration: 0.3 }}
|
||||||
|
>
|
||||||
|
{category.games.length === 0 ? (
|
||||||
|
<div className="text-center py-12 bg-white rounded-xl border border-gray-200">
|
||||||
|
<GamepadIcon className="mx-auto w-12 h-12 text-gray-400 mb-4" />
|
||||||
|
<p className="text-gray-500">No games found in this category</p>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className={
|
||||||
|
viewMode === 'grid'
|
||||||
|
? 'grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-6'
|
||||||
|
: viewMode === 'list'
|
||||||
|
? 'space-y-2'
|
||||||
|
: 'grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-6'
|
||||||
|
}>
|
||||||
|
{category.games.map((game: GameItem, index: number) => (
|
||||||
|
<motion.div
|
||||||
|
key={game.id}
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ delay: index * 0.05 }}
|
||||||
|
>
|
||||||
|
<GameCard
|
||||||
|
game={game}
|
||||||
|
viewMode={viewMode}
|
||||||
|
/>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
</AnimatePresence>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
567
src/pages/MovieDetail.tsx
Normal file
567
src/pages/MovieDetail.tsx
Normal file
@@ -0,0 +1,567 @@
|
|||||||
|
import { useState } from 'react'
|
||||||
|
import { useParams, Link, useNavigate } from 'react-router-dom'
|
||||||
|
import { motion, AnimatePresence } from 'framer-motion'
|
||||||
|
import { useQuery } from '@tanstack/react-query'
|
||||||
|
import {
|
||||||
|
FilmIcon,
|
||||||
|
StarIcon,
|
||||||
|
ClockIcon,
|
||||||
|
CalendarIcon,
|
||||||
|
ArrowLeftIcon,
|
||||||
|
PlayIcon,
|
||||||
|
HeartIcon,
|
||||||
|
ShareIcon,
|
||||||
|
PlusIcon,
|
||||||
|
CheckIcon,
|
||||||
|
UserIcon,
|
||||||
|
GlobeAltIcon,
|
||||||
|
CurrencyDollarIcon,
|
||||||
|
FilmIcon as FilmStripIcon,
|
||||||
|
SparklesIcon
|
||||||
|
} from '@heroicons/react/24/outline'
|
||||||
|
import { moviesApi } from '../services/api'
|
||||||
|
import { Tooltip, PulseDot } from '../components/MicroInteractions'
|
||||||
|
|
||||||
|
export default function MovieDetail() {
|
||||||
|
const { id } = useParams<{ id: string }>()
|
||||||
|
const navigate = useNavigate()
|
||||||
|
const movieId = parseInt(id || '0')
|
||||||
|
const [isWatched, setIsWatched] = useState(false)
|
||||||
|
const [isFavorite, setIsFavorite] = useState(false)
|
||||||
|
const [showShareMenu, setShowShareMenu] = useState(false)
|
||||||
|
|
||||||
|
const { data: movie, isLoading, error } = useQuery({
|
||||||
|
queryKey: ['movie', movieId],
|
||||||
|
queryFn: () => moviesApi.get(movieId),
|
||||||
|
enabled: !!movieId
|
||||||
|
})
|
||||||
|
|
||||||
|
// Handle image URL
|
||||||
|
const getImageUrl = (url?: string) => {
|
||||||
|
if (!url) return null
|
||||||
|
|
||||||
|
// If it's already a full URL, return as is
|
||||||
|
if (url.startsWith('http')) return url
|
||||||
|
|
||||||
|
// If it's a relative path starting with /images/, prepend API base
|
||||||
|
if (url.startsWith('/images/')) {
|
||||||
|
const apiUrl = (import.meta as any).env?.VITE_API_URL?.replace('/api', '') || ''
|
||||||
|
return `${apiUrl}${url}`
|
||||||
|
}
|
||||||
|
|
||||||
|
// Otherwise, assume it's relative to API
|
||||||
|
const apiUrl = (import.meta as any).env?.VITE_API_URL?.replace('/api', '') || ''
|
||||||
|
return `${apiUrl}/images/${url}`
|
||||||
|
}
|
||||||
|
|
||||||
|
const posterUrl = getImageUrl(movie?.poster_url)
|
||||||
|
const backdropUrl = getImageUrl(movie?.backdrop_url)
|
||||||
|
|
||||||
|
if (isLoading) {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen flex items-center justify-center">
|
||||||
|
<motion.div
|
||||||
|
className="text-center"
|
||||||
|
initial={{ opacity: 0, scale: 0.9 }}
|
||||||
|
animate={{ opacity: 1, scale: 1 }}
|
||||||
|
>
|
||||||
|
<div className="relative">
|
||||||
|
<div className="w-16 h-16 border-4 border-blue-200 rounded-full"></div>
|
||||||
|
<motion.div
|
||||||
|
className="absolute top-0 left-0 w-16 h-16 border-4 border-blue-600 rounded-full border-t-transparent"
|
||||||
|
animate={{ rotate: 360 }}
|
||||||
|
transition={{ duration: 1, repeat: Infinity, ease: "linear" }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<motion.p
|
||||||
|
className="mt-6 text-gray-600 text-lg"
|
||||||
|
initial={{ opacity: 0, y: 10 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ delay: 0.2 }}
|
||||||
|
>
|
||||||
|
Loading movie details...
|
||||||
|
</motion.p>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (error || !movie) {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen flex items-center justify-center">
|
||||||
|
<motion.div
|
||||||
|
className="text-center max-w-md"
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
>
|
||||||
|
<motion.div
|
||||||
|
initial={{ scale: 0 }}
|
||||||
|
animate={{ scale: 1 }}
|
||||||
|
transition={{ type: "spring", stiffness: 200 }}
|
||||||
|
>
|
||||||
|
<FilmIcon className="mx-auto h-20 w-20 text-gray-400 mb-6" />
|
||||||
|
</motion.div>
|
||||||
|
<h2 className="text-3xl font-bold text-gray-900 mb-3">Movie Not Found</h2>
|
||||||
|
<p className="text-gray-600 mb-8 text-lg">The movie you're looking for doesn't exist or has been removed.</p>
|
||||||
|
<motion.div
|
||||||
|
whileHover={{ scale: 1.05 }}
|
||||||
|
whileTap={{ scale: 0.95 }}
|
||||||
|
>
|
||||||
|
<Link
|
||||||
|
to="/movies"
|
||||||
|
className="btn btn-primary"
|
||||||
|
>
|
||||||
|
<ArrowLeftIcon className="w-5 h-5 mr-2" />
|
||||||
|
Back to Movies
|
||||||
|
</Link>
|
||||||
|
</motion.div>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const formatRuntime = (minutes?: number) => {
|
||||||
|
if (!minutes) return null
|
||||||
|
const hours = Math.floor(minutes / 60)
|
||||||
|
const mins = minutes % 60
|
||||||
|
return `${hours}h ${mins}m`
|
||||||
|
}
|
||||||
|
|
||||||
|
const formatYear = (date?: string) => {
|
||||||
|
if (!date) return null
|
||||||
|
return new Date(date).getFullYear()
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen">
|
||||||
|
{/* Backdrop */}
|
||||||
|
{backdropUrl && (
|
||||||
|
<div className="relative h-96 lg:h-[500px] overflow-hidden">
|
||||||
|
<motion.img
|
||||||
|
src={backdropUrl}
|
||||||
|
alt={movie.title}
|
||||||
|
className="w-full h-full object-cover"
|
||||||
|
initial={{ scale: 1.1 }}
|
||||||
|
animate={{ scale: 1 }}
|
||||||
|
transition={{ duration: 1.5 }}
|
||||||
|
/>
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent"></div>
|
||||||
|
|
||||||
|
{/* Back button */}
|
||||||
|
<motion.div
|
||||||
|
className="absolute top-4 left-4 z-10"
|
||||||
|
initial={{ opacity: 0, x: -20 }}
|
||||||
|
animate={{ opacity: 1, x: 0 }}
|
||||||
|
transition={{ delay: 0.3 }}
|
||||||
|
>
|
||||||
|
<Tooltip text="Back to movies">
|
||||||
|
<Link
|
||||||
|
to="/movies"
|
||||||
|
className="inline-flex items-center px-4 py-2 bg-black/50 backdrop-blur-sm text-white rounded-xl hover:bg-black/70 transition-all duration-200"
|
||||||
|
>
|
||||||
|
<ArrowLeftIcon className="w-5 h-5 mr-2" />
|
||||||
|
Back
|
||||||
|
</Link>
|
||||||
|
</Tooltip>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
{/* Floating action buttons */}
|
||||||
|
<motion.div
|
||||||
|
className="absolute top-4 right-4 z-10 flex gap-2"
|
||||||
|
initial={{ opacity: 0, x: 20 }}
|
||||||
|
animate={{ opacity: 1, x: 0 }}
|
||||||
|
transition={{ delay: 0.4 }}
|
||||||
|
>
|
||||||
|
<Tooltip text="Add to favorites">
|
||||||
|
<motion.button
|
||||||
|
onClick={() => setIsFavorite(!isFavorite)}
|
||||||
|
className="p-3 bg-black/50 backdrop-blur-sm text-white rounded-xl hover:bg-black/70 transition-all duration-200"
|
||||||
|
whileHover={{ scale: 1.1 }}
|
||||||
|
whileTap={{ scale: 0.9 }}
|
||||||
|
>
|
||||||
|
<HeartIcon className={`w-5 h-5 ${isFavorite ? 'fill-red-500 text-red-500' : ''}`} />
|
||||||
|
</motion.button>
|
||||||
|
</Tooltip>
|
||||||
|
|
||||||
|
<Tooltip text="Share">
|
||||||
|
<motion.button
|
||||||
|
onClick={() => setShowShareMenu(!showShareMenu)}
|
||||||
|
className="p-3 bg-black/50 backdrop-blur-sm text-white rounded-xl hover:bg-black/70 transition-all duration-200 relative"
|
||||||
|
whileHover={{ scale: 1.1 }}
|
||||||
|
whileTap={{ scale: 0.9 }}
|
||||||
|
>
|
||||||
|
<ShareIcon className="w-5 h-5" />
|
||||||
|
<AnimatePresence>
|
||||||
|
{showShareMenu && (
|
||||||
|
<motion.div
|
||||||
|
className="absolute right-0 top-full mt-2 bg-white rounded-xl shadow-2xl p-2 min-w-[150px]"
|
||||||
|
initial={{ opacity: 0, scale: 0.9, y: -10 }}
|
||||||
|
animate={{ opacity: 1, scale: 1, y: 0 }}
|
||||||
|
exit={{ opacity: 0, scale: 0.9, y: -10 }}
|
||||||
|
>
|
||||||
|
{['Copy Link', 'Facebook', 'Twitter', 'Email'].map((item) => (
|
||||||
|
<motion.button
|
||||||
|
key={item}
|
||||||
|
className="block w-full text-left px-3 py-2 text-gray-700 hover:bg-gray-100 rounded-lg transition-colors text-sm"
|
||||||
|
whileHover={{ x: 5 }}
|
||||||
|
>
|
||||||
|
{item}
|
||||||
|
</motion.button>
|
||||||
|
))}
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
</AnimatePresence>
|
||||||
|
</motion.button>
|
||||||
|
</Tooltip>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
{/* Movie title overlay */}
|
||||||
|
<motion.div
|
||||||
|
className="absolute bottom-6 left-6 right-6"
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ delay: 0.5 }}
|
||||||
|
>
|
||||||
|
<h1 className="text-4xl lg:text-6xl font-bold text-white mb-3 drop-shadow-lg">
|
||||||
|
{movie.title}
|
||||||
|
</h1>
|
||||||
|
<div className="flex items-center gap-4 text-white/90">
|
||||||
|
{movie.release_date && (
|
||||||
|
<span className="flex items-center gap-1">
|
||||||
|
<CalendarIcon className="w-4 h-4" />
|
||||||
|
{formatYear(movie.release_date)}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
{movie.runtime_minutes && (
|
||||||
|
<span className="flex items-center gap-1">
|
||||||
|
<ClockIcon className="w-4 h-4" />
|
||||||
|
{formatRuntime(movie.runtime_minutes)}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
{movie.rating && (
|
||||||
|
<span className="flex items-center gap-1">
|
||||||
|
<StarIcon className="w-4 h-4 text-yellow-400" />
|
||||||
|
{movie.rating}/10
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="container mx-auto px-4 py-8">
|
||||||
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||||
|
{/* Poster and basic info */}
|
||||||
|
<motion.div
|
||||||
|
className="lg:col-span-1"
|
||||||
|
initial={{ opacity: 0, x: -20 }}
|
||||||
|
animate={{ opacity: 1, x: 0 }}
|
||||||
|
transition={{ delay: 0.6 }}
|
||||||
|
>
|
||||||
|
<div className="sticky top-4 space-y-6">
|
||||||
|
{/* Poster */}
|
||||||
|
<motion.div
|
||||||
|
className="relative group overflow-hidden"
|
||||||
|
whileHover={{ scale: 1.02 }}
|
||||||
|
>
|
||||||
|
{posterUrl ? (
|
||||||
|
<img
|
||||||
|
src={posterUrl}
|
||||||
|
alt={movie.title}
|
||||||
|
className="w-3/4 mx-auto rounded-xl shadow-lg"
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<div className="w-3/4 mx-auto aspect-[2/3] bg-gradient-to-br from-gray-100 to-gray-200 rounded-xl flex items-center justify-center">
|
||||||
|
<FilmIcon className="text-gray-400 w-12 h-12" />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Play button overlay */}
|
||||||
|
<motion.div
|
||||||
|
className="absolute inset-0 bg-black/40 rounded-xl flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300"
|
||||||
|
whileHover={{ opacity: 1 }}
|
||||||
|
>
|
||||||
|
<motion.button
|
||||||
|
className="p-3 bg-blue-600/90 backdrop-blur-sm rounded-full text-white hover:bg-blue-700 transition-all duration-200"
|
||||||
|
whileHover={{ scale: 1.1 }}
|
||||||
|
whileTap={{ scale: 0.9 }}
|
||||||
|
>
|
||||||
|
<PlayIcon className="w-6 h-6" />
|
||||||
|
</motion.button>
|
||||||
|
</motion.div>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
{/* Action buttons */}
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<motion.button
|
||||||
|
onClick={() => setIsWatched(!isWatched)}
|
||||||
|
className={`flex-1 btn flex items-center justify-center gap-1 text-sm py-2 ${
|
||||||
|
isWatched ? 'bg-green-600 hover:bg-green-700' : 'btn-primary'
|
||||||
|
}`}
|
||||||
|
whileHover={{ scale: 1.02 }}
|
||||||
|
whileTap={{ scale: 0.98 }}
|
||||||
|
>
|
||||||
|
{isWatched ? (
|
||||||
|
<><CheckIcon className="w-4 h-4" /> Watched</>
|
||||||
|
) : (
|
||||||
|
<><PlusIcon className="w-4 h-4" /> Mark as Watched</>
|
||||||
|
)}
|
||||||
|
</motion.button>
|
||||||
|
|
||||||
|
<motion.button
|
||||||
|
onClick={() => setIsFavorite(!isFavorite)}
|
||||||
|
className={`p-2 rounded-xl border-2 transition-all duration-200 ${
|
||||||
|
isFavorite
|
||||||
|
? 'border-red-500 bg-red-50 text-red-500'
|
||||||
|
: 'border-gray-200 hover:border-red-300 hover:bg-red-50'
|
||||||
|
}`}
|
||||||
|
whileHover={{ scale: 1.1 }}
|
||||||
|
whileTap={{ scale: 0.9 }}
|
||||||
|
>
|
||||||
|
<HeartIcon className={`w-4 h-4 ${isFavorite ? 'fill-current' : ''}`} />
|
||||||
|
</motion.button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Movie info */}
|
||||||
|
<div className="bg-gradient-to-br from-blue-50 to-indigo-50 dark:from-blue-900/20 dark:to-indigo-900/20 rounded-xl shadow-md p-5 border border-blue-200 dark:border-blue-800 space-y-3">
|
||||||
|
<h3 className="text-base font-bold text-blue-800 dark:text-blue-200 flex items-center gap-2">
|
||||||
|
<SparklesIcon className="w-4 h-4" />
|
||||||
|
Movie Details
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
{movie.rating && (
|
||||||
|
<div className="flex items-center justify-between p-2 bg-white/50 dark:bg-gray-800/50 rounded-lg">
|
||||||
|
<span className="text-blue-600 dark:text-blue-400 font-medium text-sm">Rating</span>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<StarIcon className="w-4 h-4 text-yellow-500" />
|
||||||
|
<span className="text-base font-bold text-slate-900 dark:text-slate-100">{movie.rating}/10</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{movie.runtime_minutes && (
|
||||||
|
<div className="flex items-center justify-between p-2 bg-white/50 dark:bg-gray-800/50 rounded-lg">
|
||||||
|
<span className="text-blue-600 dark:text-blue-400 font-medium text-sm">Runtime</span>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<ClockIcon className="w-4 h-4 text-gray-400" />
|
||||||
|
<span className="font-medium text-slate-900 dark:text-slate-100 text-sm">{formatRuntime(movie.runtime_minutes)}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{movie.release_date && (
|
||||||
|
<div className="flex items-center justify-between p-2 bg-white/50 dark:bg-gray-800/50 rounded-lg">
|
||||||
|
<span className="text-blue-600 dark:text-blue-400 font-medium text-sm">Release</span>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<CalendarIcon className="w-4 h-4 text-gray-400" />
|
||||||
|
<span className="font-medium text-slate-900 dark:text-slate-100 text-sm">{formatYear(movie.release_date)}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{movie.source_name && (
|
||||||
|
<div className="flex items-center justify-between p-2 bg-white/50 dark:bg-gray-800/50 rounded-lg">
|
||||||
|
<span className="text-blue-600 dark:text-blue-400 font-medium text-sm">Source</span>
|
||||||
|
<span className="px-2 py-1 bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-200 rounded-full text-xs font-medium">
|
||||||
|
{movie.source_name}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{isWatched && (
|
||||||
|
<div className="flex items-center justify-between p-3 bg-green-50 dark:bg-green-900/20 rounded-lg border-t border-green-200 dark:border-green-800">
|
||||||
|
<span className="text-green-600 dark:text-green-400 font-medium">Status</span>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<PulseDot color="green" />
|
||||||
|
<span className="text-green-600 dark:text-green-400 font-medium">Watched</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
{/* Details */}
|
||||||
|
<motion.div
|
||||||
|
className="lg:col-span-2 space-y-8"
|
||||||
|
initial={{ opacity: 0, x: 20 }}
|
||||||
|
animate={{ opacity: 1, x: 0 }}
|
||||||
|
transition={{ delay: 0.7 }}
|
||||||
|
>
|
||||||
|
{/* Overview */}
|
||||||
|
{movie.overview && (
|
||||||
|
<motion.div
|
||||||
|
className="bg-gradient-to-br from-purple-50 to-pink-50 dark:from-purple-900/20 dark:to-pink-900/20 rounded-xl shadow-md p-6 border border-purple-200 dark:border-purple-800"
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ delay: 0.8 }}
|
||||||
|
>
|
||||||
|
<h2 className="text-xl font-bold text-purple-800 dark:text-purple-200 mb-3 flex items-center gap-2">
|
||||||
|
<FilmStripIcon className="w-5 h-5" />
|
||||||
|
Overview
|
||||||
|
</h2>
|
||||||
|
<p className="text-slate-700 dark:text-slate-300 leading-relaxed">{movie.overview}</p>
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Cast & Crew */}
|
||||||
|
<motion.div
|
||||||
|
className="bg-gradient-to-br from-green-50 to-emerald-50 dark:from-green-900/20 dark:to-emerald-900/20 rounded-xl shadow-md p-6 border border-green-200 dark:border-green-800"
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ delay: 0.9 }}
|
||||||
|
>
|
||||||
|
<h2 className="text-xl font-bold text-green-800 dark:text-green-200 mb-4 flex items-center gap-2">
|
||||||
|
<UserIcon className="w-5 h-5" />
|
||||||
|
Cast & Crew
|
||||||
|
</h2>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
|
{movie.director && (
|
||||||
|
<div className="bg-white/50 dark:bg-gray-800/50 rounded-lg p-3">
|
||||||
|
<h3 className="text-base font-semibold text-gray-900 dark:text-white mb-1">Director</h3>
|
||||||
|
<p className="text-gray-700 dark:text-gray-300">{movie.director}</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{movie.writer && (
|
||||||
|
<div className="bg-white/50 dark:bg-gray-800/50 rounded-lg p-3">
|
||||||
|
<h3 className="text-base font-semibold text-gray-900 dark:text-white mb-1">Writer</h3>
|
||||||
|
<p className="text-gray-700 dark:text-gray-300">{movie.writer}</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{movie.genre && (
|
||||||
|
<div className="bg-white/50 dark:bg-gray-800/50 rounded-lg p-3">
|
||||||
|
<h3 className="text-base font-semibold text-gray-900 dark:text-white mb-2">Genre</h3>
|
||||||
|
<div className="flex flex-wrap gap-2">
|
||||||
|
{movie.genre.split(',').map((g: string) => (
|
||||||
|
<span key={g} className="px-2 py-1 bg-gradient-to-r from-blue-100 to-blue-200 text-blue-800 rounded-full text-xs font-medium">
|
||||||
|
{g.trim()}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
{/* Actors Section - Full Width */}
|
||||||
|
{movie.actors && Array.isArray(movie.actors) && (
|
||||||
|
<motion.div
|
||||||
|
className="bg-gradient-to-br from-green-50 to-emerald-50 dark:from-green-900/20 dark:to-emerald-900/20 rounded-xl shadow-md p-6 border border-green-200 dark:border-green-800"
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ delay: 1.0 }}
|
||||||
|
>
|
||||||
|
<h2 className="text-xl font-bold text-green-800 dark:text-green-200 mb-4 flex items-center gap-2">
|
||||||
|
<UserIcon className="w-5 h-5" />
|
||||||
|
Cast & Actors
|
||||||
|
</h2>
|
||||||
|
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-4">
|
||||||
|
{movie.actors.map((actor: any) => (
|
||||||
|
<motion.div
|
||||||
|
key={actor.id}
|
||||||
|
whileHover={{ scale: 1.02 }}
|
||||||
|
onClick={() => navigate(`/actors/${actor.id}`)}
|
||||||
|
className="bg-gray-50 dark:bg-gray-800 rounded-lg p-3 border border-gray-200 dark:border-gray-700 hover:shadow-lg transition-all cursor-pointer"
|
||||||
|
>
|
||||||
|
<div className="flex flex-col items-center gap-2">
|
||||||
|
<div className="w-16 h-16 rounded-full overflow-hidden bg-gray-200 dark:bg-gray-700 flex-shrink-0">
|
||||||
|
{actor.thumbnail_path ? (
|
||||||
|
<img
|
||||||
|
src={getImageUrl(actor.thumbnail_path) || ''}
|
||||||
|
alt={actor.name}
|
||||||
|
className="w-full h-full object-cover"
|
||||||
|
onError={(e) => {
|
||||||
|
const target = e.target as HTMLImageElement
|
||||||
|
target.style.display = 'none'
|
||||||
|
const parent = target.parentElement
|
||||||
|
if (parent) {
|
||||||
|
parent.innerHTML = '<div class="w-full h-full flex items-center justify-center bg-gradient-to-br from-blue-400 to-purple-500"><svg class="w-6 h-6 text-white/50" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM12 10.5a5.25 5.25 0 007.5 0m-7.5 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25c0-.621-.504-1.125-1.125-1.125h-1.5z" /></svg></div>'
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<div className="w-full h-full flex items-center justify-center bg-gradient-to-br from-blue-400 to-purple-500">
|
||||||
|
<UserIcon className="w-6 h-6 text-white/50" />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="text-center">
|
||||||
|
<h4 className="font-medium text-gray-900 dark:text-white text-sm truncate w-full">
|
||||||
|
{typeof actor.name === 'string' ? actor.name : 'Unknown Actor'}
|
||||||
|
</h4>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Additional metadata */}
|
||||||
|
{movie.metadata && typeof movie.metadata === 'object' && (
|
||||||
|
<motion.div
|
||||||
|
className="bg-gradient-to-br from-orange-50 to-amber-50 dark:from-orange-900/20 dark:to-amber-900/20 rounded-xl shadow-md p-6 border border-orange-200 dark:border-orange-800"
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ delay: 1.0 }}
|
||||||
|
>
|
||||||
|
<h2 className="text-xl font-bold text-orange-800 dark:text-orange-200 mb-4 flex items-center gap-2">
|
||||||
|
<GlobeAltIcon className="w-5 h-5" />
|
||||||
|
Additional Information
|
||||||
|
</h2>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
|
{movie.metadata.budget && (
|
||||||
|
<div className="flex items-center justify-between p-4 bg-gray-50 rounded-xl">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<CurrencyDollarIcon className="w-5 h-5 text-gray-400" />
|
||||||
|
<span className="text-gray-600">Budget</span>
|
||||||
|
</div>
|
||||||
|
<span className="text-gray-900 font-bold text-lg">
|
||||||
|
${movie.metadata.budget.toLocaleString()}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{movie.metadata.revenue && (
|
||||||
|
<div className="flex items-center justify-between p-4 bg-gray-50 rounded-xl">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<CurrencyDollarIcon className="w-5 h-5 text-green-500" />
|
||||||
|
<span className="text-gray-600">Revenue</span>
|
||||||
|
</div>
|
||||||
|
<span className="text-green-600 font-bold text-lg">
|
||||||
|
${movie.metadata.revenue.toLocaleString()}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{movie.metadata.original_language && (
|
||||||
|
<div className="flex items-center justify-between p-4 bg-gray-50 rounded-xl">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<GlobeAltIcon className="w-5 h-5 text-gray-400" />
|
||||||
|
<span className="text-gray-600">Language</span>
|
||||||
|
</div>
|
||||||
|
<span className="text-gray-900 font-medium">
|
||||||
|
{movie.metadata.original_language.toUpperCase()}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{movie.metadata.status && (
|
||||||
|
<div className="flex items-center justify-between p-4 bg-gray-50 rounded-xl">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<FilmIcon className="w-5 h-5 text-gray-400" />
|
||||||
|
<span className="text-gray-600">Status</span>
|
||||||
|
</div>
|
||||||
|
<span className="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm font-medium">
|
||||||
|
{movie.metadata.status}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
151
src/pages/Movies.tsx
Normal file
151
src/pages/Movies.tsx
Normal file
@@ -0,0 +1,151 @@
|
|||||||
|
import React, { useState, useContext } from 'react'
|
||||||
|
import { motion } from 'framer-motion'
|
||||||
|
import MovieCard from '../components/MovieCard'
|
||||||
|
import { MovieCardSkeleton } from '../components/LoadingSkeleton'
|
||||||
|
import { useMovies } from '../hooks/useApi'
|
||||||
|
import { ViewContext } from '../components/Layout'
|
||||||
|
import { FilmIcon } from '@heroicons/react/24/outline'
|
||||||
|
|
||||||
|
// Import from alternative frontend
|
||||||
|
import { MediaListView } from '../../../frontend/components/MediaListView'
|
||||||
|
import { MediaDetailView } from '../../../frontend/components/MediaDetailView'
|
||||||
|
|
||||||
|
export default function Movies() {
|
||||||
|
const viewContext = useContext(ViewContext)
|
||||||
|
const viewMode = viewContext?.viewMode || 'grid'
|
||||||
|
const gridColumns = viewContext?.gridColumns || 5
|
||||||
|
const coverSize = viewContext?.coverSize || 200
|
||||||
|
const PaginationComp = viewContext?.PaginationComponent
|
||||||
|
|
||||||
|
const getGridClass = (columns: number) => {
|
||||||
|
const columnClasses = {
|
||||||
|
2: 'grid-cols-1 md:grid-cols-2',
|
||||||
|
3: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
|
||||||
|
4: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
|
||||||
|
5: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5',
|
||||||
|
6: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6',
|
||||||
|
7: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-7',
|
||||||
|
8: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-8'
|
||||||
|
}
|
||||||
|
return columnClasses[columns as keyof typeof columnClasses] || columnClasses[5]
|
||||||
|
}
|
||||||
|
|
||||||
|
const [currentPage, setCurrentPage] = useState(1)
|
||||||
|
const [pageSize, setPageSize] = useState(24)
|
||||||
|
const { data: moviesData, isLoading } = useMovies({
|
||||||
|
page: currentPage,
|
||||||
|
per_page: pageSize
|
||||||
|
})
|
||||||
|
|
||||||
|
const movies = moviesData?.items || []
|
||||||
|
const pagination = moviesData?.pagination
|
||||||
|
|
||||||
|
// Convert movies to MediaItem format for MediaListView
|
||||||
|
const mediaItems = movies.map(movie => ({
|
||||||
|
id: movie.id.toString(),
|
||||||
|
title: movie.title || 'Untitled Movie',
|
||||||
|
type: 'movie' as const,
|
||||||
|
coverUrl: movie.poster_url || movie.cover_url || '',
|
||||||
|
rating: Number(movie.rating) || 0,
|
||||||
|
status: 'completed' as const, // Default status
|
||||||
|
releaseYear: movie.release_year || movie.year || new Date().getFullYear(),
|
||||||
|
addedAt: movie.created_at || new Date().toISOString(),
|
||||||
|
favorite: movie.favorite || false,
|
||||||
|
platform: movie.source_name || 'Unknown',
|
||||||
|
description: movie.description || '',
|
||||||
|
genres: movie.genres || []
|
||||||
|
}))
|
||||||
|
|
||||||
|
// State for MediaListView
|
||||||
|
const [selectedId, setSelectedId] = useState<string | null>(null)
|
||||||
|
const [multiSelectedIds, setMultiSelectedIds] = useState<Set<string>>(new Set())
|
||||||
|
const [detailItem, setDetailItem] = useState<any>(null)
|
||||||
|
|
||||||
|
const handleSelect = (item: any) => {
|
||||||
|
setSelectedId(item.id)
|
||||||
|
setDetailItem(item)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleToggleSelect = (id: string) => {
|
||||||
|
const newSelected = new Set(multiSelectedIds)
|
||||||
|
if (newSelected.has(id)) {
|
||||||
|
newSelected.delete(id)
|
||||||
|
} else {
|
||||||
|
newSelected.add(id)
|
||||||
|
}
|
||||||
|
setMultiSelectedIds(newSelected)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className="mx-auto">
|
||||||
|
{isLoading ? (
|
||||||
|
<div className={`grid gap-6 ${getGridClass(gridColumns)}`}>
|
||||||
|
{Array.from({ length: pageSize }, (_, i) => (
|
||||||
|
<MovieCardSkeleton key={i} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
) : viewMode === 'list' ? (
|
||||||
|
// Use MediaListView for list mode with sideview
|
||||||
|
<div className="flex w-full h-full">
|
||||||
|
<div className={`${detailItem ? 'w-1/2 hidden md:flex' : 'w-full'} h-full flex flex-col transition-all duration-500`}>
|
||||||
|
<div className="h-[600px] border border-slate-200 dark:border-slate-700 rounded-lg overflow-hidden">
|
||||||
|
<MediaListView
|
||||||
|
items={mediaItems}
|
||||||
|
onSelect={handleSelect}
|
||||||
|
selectedId={selectedId}
|
||||||
|
onToggleSelect={handleToggleSelect}
|
||||||
|
multiSelectedIds={multiSelectedIds}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{detailItem && (
|
||||||
|
<div className="w-full md:w-1/2 h-full border-l border-white/5 relative overflow-hidden animate-in slide-in-from-right duration-300">
|
||||||
|
<MediaDetailView
|
||||||
|
item={detailItem}
|
||||||
|
allMedia={mediaItems}
|
||||||
|
onBack={() => setDetailItem(null)}
|
||||||
|
onEdit={(item) => console.log('Edit item:', item)}
|
||||||
|
onToggleFavorite={(id, isFav) => console.log('Toggle favorite:', id, isFav)}
|
||||||
|
onSelectRelated={(item) => setDetailItem(item)}
|
||||||
|
onSelectPerson={(name, id) => console.log('Select person:', name, id)}
|
||||||
|
onViewAll={(type, id) => console.log('View all:', type, id)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
// Grid view with MovieCard
|
||||||
|
<motion.div
|
||||||
|
className={`grid gap-6 ${getGridClass(gridColumns)}`}
|
||||||
|
>
|
||||||
|
{movies.map((movie, index) => (
|
||||||
|
<motion.div
|
||||||
|
key={movie.id}
|
||||||
|
initial={{ opacity: 0, scale: 0.8 }}
|
||||||
|
animate={{ opacity: 1, scale: 1 }}
|
||||||
|
transition={{ delay: index * 0.03 }}
|
||||||
|
>
|
||||||
|
<MovieCard movie={movie} viewMode={viewMode} coverSize={coverSize} />
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{!isLoading && pagination && pagination.last_page > 1 && PaginationComp && (
|
||||||
|
<div className="mt-8">
|
||||||
|
<PaginationComp
|
||||||
|
currentPage={currentPage}
|
||||||
|
lastPage={pagination.last_page}
|
||||||
|
total={pagination.total}
|
||||||
|
onPageChange={setCurrentPage}
|
||||||
|
itemsPerPage={pageSize}
|
||||||
|
onItemsPerPageChange={setPageSize}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
18
src/pages/Music.tsx
Normal file
18
src/pages/Music.tsx
Normal file
@@ -0,0 +1,18 @@
|
|||||||
|
import React from 'react'
|
||||||
|
|
||||||
|
export default function Music() {
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-2xl font-bold text-gray-900">Music</h1>
|
||||||
|
<p className="text-gray-600">Manage your music collection</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="text-center py-12">
|
||||||
|
<div className="text-gray-400 text-6xl mb-4">🎵</div>
|
||||||
|
<h3 className="text-lg font-medium text-gray-900 mb-2">Music Page</h3>
|
||||||
|
<p className="text-gray-600">This page will be implemented with music management features</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
454
src/pages/Search.tsx
Normal file
454
src/pages/Search.tsx
Normal file
@@ -0,0 +1,454 @@
|
|||||||
|
import { useState, useEffect } from 'react'
|
||||||
|
import { useSearchParams, useNavigate } from 'react-router-dom'
|
||||||
|
import { useSearch } from '../hooks/useApi'
|
||||||
|
import MediaCard, { MediaType } from '../components/MediaCard'
|
||||||
|
import { motion } from 'framer-motion'
|
||||||
|
import {
|
||||||
|
FilmIcon,
|
||||||
|
TvIcon,
|
||||||
|
MusicalNoteIcon,
|
||||||
|
ComputerDesktopIcon as GamepadIcon,
|
||||||
|
VideoCameraIcon,
|
||||||
|
UserGroupIcon,
|
||||||
|
DocumentTextIcon,
|
||||||
|
MagnifyingGlassIcon,
|
||||||
|
SparklesIcon,
|
||||||
|
XMarkIcon
|
||||||
|
} from '@heroicons/react/24/outline'
|
||||||
|
import { clsx } from 'clsx'
|
||||||
|
|
||||||
|
export default function Search() {
|
||||||
|
const [searchParams] = useSearchParams()
|
||||||
|
const navigate = useNavigate()
|
||||||
|
const [query, setQuery] = useState(searchParams.get('q') || '')
|
||||||
|
const [type, setType] = useState(searchParams.get('type') || 'all')
|
||||||
|
const [viewMode, setViewMode] = useState<'grid' | 'list' | 'covers'>('grid')
|
||||||
|
const [debouncedQuery, setDebouncedQuery] = useState(query)
|
||||||
|
|
||||||
|
// Debounce search query to prevent excessive URL updates
|
||||||
|
useEffect(() => {
|
||||||
|
const timer = setTimeout(() => {
|
||||||
|
setDebouncedQuery(query)
|
||||||
|
}, 300) // 300ms delay
|
||||||
|
|
||||||
|
return () => clearTimeout(timer)
|
||||||
|
}, [query])
|
||||||
|
|
||||||
|
// Update URL when debounced query changes
|
||||||
|
useEffect(() => {
|
||||||
|
const params = new URLSearchParams(searchParams)
|
||||||
|
|
||||||
|
// Update query parameter
|
||||||
|
if (debouncedQuery.trim()) {
|
||||||
|
params.set('q', debouncedQuery.trim())
|
||||||
|
} else {
|
||||||
|
params.delete('q')
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update type parameter
|
||||||
|
if (type !== 'all') {
|
||||||
|
params.set('type', type)
|
||||||
|
} else {
|
||||||
|
params.delete('type')
|
||||||
|
}
|
||||||
|
|
||||||
|
// Navigate to new URL
|
||||||
|
const newUrl = `/search?${params.toString()}`
|
||||||
|
if (newUrl !== window.location.pathname + window.location.search) {
|
||||||
|
navigate(newUrl, { replace: true })
|
||||||
|
}
|
||||||
|
}, [debouncedQuery, type, searchParams, navigate])
|
||||||
|
|
||||||
|
// Update local state when URL params change (e.g., browser back/forward)
|
||||||
|
useEffect(() => {
|
||||||
|
const urlQuery = searchParams.get('q') || ''
|
||||||
|
const urlType = searchParams.get('type') || 'all'
|
||||||
|
|
||||||
|
if (urlQuery !== query) {
|
||||||
|
setQuery(urlQuery)
|
||||||
|
setDebouncedQuery(urlQuery)
|
||||||
|
}
|
||||||
|
if (urlType !== type) {
|
||||||
|
setType(urlType)
|
||||||
|
}
|
||||||
|
}, [searchParams])
|
||||||
|
|
||||||
|
// Handle search input changes (immediate UI update, debounced URL update)
|
||||||
|
const handleSearchChange = (newQuery: string) => {
|
||||||
|
setQuery(newQuery)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Handle type filter changes (immediate URL update)
|
||||||
|
const handleTypeChange = (newType: string) => {
|
||||||
|
setType(newType)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Use real API search with debounced query
|
||||||
|
const { data: searchResults, isLoading } = useSearch({
|
||||||
|
q: debouncedQuery,
|
||||||
|
type: type as any
|
||||||
|
})
|
||||||
|
|
||||||
|
const getMediaTypeBgGradient = (mediaType: string) => {
|
||||||
|
switch (mediaType) {
|
||||||
|
case 'movie': return 'bg-gradient-to-br from-blue-500 to-blue-600'
|
||||||
|
case 'tvshow': return 'bg-gradient-to-br from-purple-500 to-purple-600'
|
||||||
|
case 'game': return 'bg-gradient-to-br from-green-500 to-green-600'
|
||||||
|
case 'music': return 'bg-gradient-to-br from-pink-500 to-pink-600'
|
||||||
|
case 'adult': return 'bg-gradient-to-br from-red-500 to-red-600'
|
||||||
|
case 'actors': return 'bg-gradient-to-br from-indigo-500 to-indigo-600'
|
||||||
|
default: return 'bg-gradient-to-br from-gray-500 to-gray-600'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const getMediaTypeIcon = (mediaType: string) => {
|
||||||
|
switch (mediaType) {
|
||||||
|
case 'movie': return FilmIcon
|
||||||
|
case 'tvshow': return TvIcon
|
||||||
|
case 'game': return GamepadIcon
|
||||||
|
case 'music': return MusicalNoteIcon
|
||||||
|
case 'adult': return VideoCameraIcon
|
||||||
|
case 'actors': return UserGroupIcon
|
||||||
|
default: return DocumentTextIcon
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const getMediaTypeLabel = (mediaType: string) => {
|
||||||
|
switch (mediaType) {
|
||||||
|
case 'movie': return 'Movies'
|
||||||
|
case 'tvshow': return 'TV Shows'
|
||||||
|
case 'game': return 'Games'
|
||||||
|
case 'music': return 'Music'
|
||||||
|
case 'adult': return 'Adult'
|
||||||
|
case 'actors': return 'Actors'
|
||||||
|
default: return 'Other'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const renderSearchResults = () => {
|
||||||
|
if (!searchResults || isLoading) {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-purple-50 dark:from-slate-900 dark:via-blue-900/20 dark:to-purple-900/20">
|
||||||
|
<div className="text-center py-20">
|
||||||
|
<motion.div
|
||||||
|
initial={{ scale: 0 }}
|
||||||
|
animate={{ scale: 1 }}
|
||||||
|
transition={{ type: "spring", stiffness: 200, damping: 15 }}
|
||||||
|
className="inline-flex items-center justify-center w-20 h-20 bg-gradient-to-br from-blue-500 to-purple-600 rounded-3xl shadow-2xl mb-6"
|
||||||
|
>
|
||||||
|
<MagnifyingGlassIcon className="w-10 h-10 text-white" />
|
||||||
|
</motion.div>
|
||||||
|
<motion.h3
|
||||||
|
className="text-2xl font-bold text-slate-900 dark:text-white mb-3"
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ delay: 0.1 }}
|
||||||
|
>
|
||||||
|
<span className="bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
|
||||||
|
{debouncedQuery ? `Searching for "${debouncedQuery}"...` : 'Search Your Media'}
|
||||||
|
</span>
|
||||||
|
</motion.h3>
|
||||||
|
<motion.p
|
||||||
|
className="text-slate-600 dark:text-slate-400 max-w-md mx-auto"
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ delay: 0.2 }}
|
||||||
|
>
|
||||||
|
{debouncedQuery ? 'Finding matches across your collection...' : 'Enter a search term to discover movies, shows, games, and more'}
|
||||||
|
</motion.p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const results = []
|
||||||
|
let totalResults = 0
|
||||||
|
|
||||||
|
// Collect results from all media types
|
||||||
|
if (searchResults.movies?.items?.length) {
|
||||||
|
results.push({ type: 'movie', items: searchResults.movies.items })
|
||||||
|
totalResults += searchResults.movies.items.length
|
||||||
|
}
|
||||||
|
if (searchResults.tvshows?.items?.length) {
|
||||||
|
results.push({ type: 'tvshow', items: searchResults.tvshows.items })
|
||||||
|
totalResults += searchResults.tvshows.items.length
|
||||||
|
}
|
||||||
|
if (searchResults.games?.items?.length) {
|
||||||
|
results.push({ type: 'game', items: searchResults.games.items })
|
||||||
|
totalResults += searchResults.games.items.length
|
||||||
|
}
|
||||||
|
if (searchResults.artists?.items?.length) {
|
||||||
|
results.push({ type: 'music', items: searchResults.artists.items })
|
||||||
|
totalResults += searchResults.artists.items.length
|
||||||
|
}
|
||||||
|
if (searchResults.actors?.items?.length) {
|
||||||
|
results.push({ type: 'actors', items: searchResults.actors.items })
|
||||||
|
totalResults += searchResults.actors.items.length
|
||||||
|
}
|
||||||
|
|
||||||
|
if (totalResults === 0) {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-purple-50 dark:from-slate-900 dark:via-blue-900/20 dark:to-purple-900/20">
|
||||||
|
<div className="text-center py-20">
|
||||||
|
<motion.div
|
||||||
|
initial={{ scale: 0 }}
|
||||||
|
animate={{ scale: 1 }}
|
||||||
|
transition={{ type: "spring", stiffness: 200, damping: 15 }}
|
||||||
|
className="inline-flex items-center justify-center w-20 h-20 bg-gradient-to-br from-gray-400 to-gray-600 rounded-3xl shadow-2xl mb-6"
|
||||||
|
>
|
||||||
|
<DocumentTextIcon className="w-10 h-10 text-white" />
|
||||||
|
</motion.div>
|
||||||
|
<motion.h3
|
||||||
|
className="text-2xl font-bold text-slate-900 dark:text-white mb-3"
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ delay: 0.1 }}
|
||||||
|
>
|
||||||
|
<span className="bg-gradient-to-r from-gray-600 to-gray-800 bg-clip-text text-transparent">
|
||||||
|
No Results Found
|
||||||
|
</span>
|
||||||
|
</motion.h3>
|
||||||
|
<motion.p
|
||||||
|
className="text-slate-600 dark:text-slate-400 max-w-md mx-auto"
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ delay: 0.2 }}
|
||||||
|
>
|
||||||
|
No results found for "{debouncedQuery}". Try different keywords or adjust your filters.
|
||||||
|
</motion.p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-purple-50 dark:from-slate-900 dark:via-blue-900/20 dark:to-purple-900/20">
|
||||||
|
{/* Results Header */}
|
||||||
|
<motion.div
|
||||||
|
className="text-center py-8"
|
||||||
|
initial={{ opacity: 0, y: -20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.5 }}
|
||||||
|
>
|
||||||
|
<div className="flex items-center justify-center gap-3 mb-4">
|
||||||
|
<SparklesIcon className="w-6 h-6 text-purple-500" />
|
||||||
|
<h3 className="text-3xl font-bold text-slate-900 dark:text-white">
|
||||||
|
<span className="bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
|
||||||
|
Found {totalResults} Results
|
||||||
|
</span>
|
||||||
|
</h3>
|
||||||
|
<SparklesIcon className="w-6 h-6 text-blue-500" />
|
||||||
|
</div>
|
||||||
|
<p className="text-slate-600 dark:text-slate-400">
|
||||||
|
For "{debouncedQuery}" across your media collection
|
||||||
|
</p>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
{/* View Mode Toggle */}
|
||||||
|
<div className="flex justify-center mb-8">
|
||||||
|
<div className="inline-flex bg-white/80 dark:bg-slate-800/80 backdrop-blur-sm rounded-2xl p-1 shadow-lg border border-slate-200/50 dark:border-slate-700/50">
|
||||||
|
<button
|
||||||
|
onClick={() => setViewMode('grid')}
|
||||||
|
className={`px-4 py-2 rounded-xl text-sm font-medium transition-all duration-200 ${
|
||||||
|
viewMode === 'grid'
|
||||||
|
? 'bg-gradient-to-r from-blue-500 to-purple-600 text-white shadow-md'
|
||||||
|
: 'text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
Grid
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => setViewMode('list')}
|
||||||
|
className={`px-4 py-2 rounded-xl text-sm font-medium transition-all duration-200 ${
|
||||||
|
viewMode === 'list'
|
||||||
|
? 'bg-gradient-to-r from-blue-500 to-purple-600 text-white shadow-md'
|
||||||
|
: 'text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
List
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => setViewMode('covers')}
|
||||||
|
className={`px-4 py-2 rounded-xl text-sm font-medium transition-all duration-200 ${
|
||||||
|
viewMode === 'covers'
|
||||||
|
? 'bg-gradient-to-r from-blue-500 to-purple-600 text-white shadow-md'
|
||||||
|
: 'text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
Cover
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Results Sections */}
|
||||||
|
<div className="max-w-screen-2xl mx-auto px-6 space-y-12">
|
||||||
|
{results.map((section, sectionIndex) => {
|
||||||
|
const Icon = getMediaTypeIcon(section.type)
|
||||||
|
const label = getMediaTypeLabel(section.type)
|
||||||
|
const bgGradient = getMediaTypeBgGradient(section.type)
|
||||||
|
|
||||||
|
return (
|
||||||
|
<motion.div
|
||||||
|
key={section.type}
|
||||||
|
initial={{ opacity: 0, y: 30 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ delay: sectionIndex * 0.1 }}
|
||||||
|
>
|
||||||
|
{/* Section Header */}
|
||||||
|
<div className="flex items-center justify-between mb-6">
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<motion.div
|
||||||
|
className={clsx(
|
||||||
|
"p-3 rounded-2xl shadow-lg",
|
||||||
|
bgGradient
|
||||||
|
)}
|
||||||
|
whileHover={{ scale: 1.05 }}
|
||||||
|
whileTap={{ scale: 0.95 }}
|
||||||
|
>
|
||||||
|
<Icon className="w-6 h-6 text-white" />
|
||||||
|
</motion.div>
|
||||||
|
<div>
|
||||||
|
<h4 className="text-2xl font-bold text-slate-900 dark:text-white">
|
||||||
|
{label}
|
||||||
|
</h4>
|
||||||
|
<p className="text-slate-600 dark:text-slate-400 text-sm">
|
||||||
|
{section.items.length} items found
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<motion.div
|
||||||
|
className="bg-white/80 dark:bg-slate-800/80 backdrop-blur-sm rounded-2xl px-4 py-2 shadow-lg border border-slate-200/50 dark:border-slate-700/50"
|
||||||
|
whileHover={{ scale: 1.05 }}
|
||||||
|
>
|
||||||
|
<span className="text-sm font-medium text-slate-600 dark:text-slate-400">
|
||||||
|
{section.items.length} results
|
||||||
|
</span>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Media Grid */}
|
||||||
|
<div className={clsx(
|
||||||
|
viewMode === 'grid' && "grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-6",
|
||||||
|
viewMode === 'list' && "space-y-4",
|
||||||
|
viewMode === 'covers' && "flex flex-wrap gap-6 justify-center"
|
||||||
|
)}>
|
||||||
|
{section.items.map((item, index) => (
|
||||||
|
<motion.div
|
||||||
|
key={`${section.type}-${item.id}`}
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ delay: sectionIndex * 0.1 + index * 0.05 }}
|
||||||
|
className={viewMode === 'list' ? "bg-white/80 dark:bg-slate-800/80 backdrop-blur-sm rounded-2xl shadow-lg border border-slate-200/50 dark:border-slate-700/50" : ""}
|
||||||
|
>
|
||||||
|
<MediaCard
|
||||||
|
media={item}
|
||||||
|
mediaType={section.type as MediaType}
|
||||||
|
viewMode={viewMode}
|
||||||
|
coverSize="medium"
|
||||||
|
/>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen">
|
||||||
|
{/* Search Header */}
|
||||||
|
<motion.div
|
||||||
|
className="relative bg-gradient-to-br from-blue-600 via-purple-600 to-pink-600 overflow-hidden"
|
||||||
|
initial={{ opacity: 0, y: -20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.5 }}
|
||||||
|
>
|
||||||
|
{/* Background Pattern */}
|
||||||
|
<div className="absolute inset-0 opacity-10">
|
||||||
|
<div className="absolute inset-0 bg-black/20"></div>
|
||||||
|
<div className="absolute inset-0" style={{
|
||||||
|
backgroundImage: `url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.4'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`,
|
||||||
|
}}></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="relative max-w-screen-2xl mx-auto px-6 lg:px-8 py-12">
|
||||||
|
<div className="text-center text-white">
|
||||||
|
<motion.h1
|
||||||
|
className="text-4xl lg:text-5xl font-bold mb-4"
|
||||||
|
initial={{ opacity: 0, x: -20 }}
|
||||||
|
animate={{ opacity: 1, x: 0 }}
|
||||||
|
transition={{ delay: 0.1 }}
|
||||||
|
>
|
||||||
|
<span className="bg-gradient-to-r from-white to-blue-100 bg-clip-text text-transparent">
|
||||||
|
Media Search
|
||||||
|
</span>
|
||||||
|
</motion.h1>
|
||||||
|
<motion.p
|
||||||
|
className="text-xl text-white/80 max-w-2xl mx-auto"
|
||||||
|
initial={{ opacity: 0, x: -20 }}
|
||||||
|
animate={{ opacity: 1, x: 0 }}
|
||||||
|
transition={{ delay: 0.2 }}
|
||||||
|
>
|
||||||
|
Discover movies, TV shows, games, and music across your entire collection
|
||||||
|
</motion.p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
{/* Search Controls */}
|
||||||
|
<div className="bg-white/80 dark:bg-slate-800/80 backdrop-blur-sm border-b border-slate-200/50 dark:border-slate-700/50 sticky top-0 z-40 shadow-lg">
|
||||||
|
<div className="max-w-screen-2xl mx-auto px-6 lg:px-8 py-6">
|
||||||
|
<div className="flex flex-col lg:flex-row gap-4">
|
||||||
|
{/* Search Bar */}
|
||||||
|
<div className="flex-1">
|
||||||
|
<div className="relative">
|
||||||
|
<MagnifyingGlassIcon className="absolute left-4 top-1/2 transform -translate-y-1/2 w-5 h-5 text-slate-400" />
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="Search movies, shows, games, music..."
|
||||||
|
value={query}
|
||||||
|
onChange={(e) => handleSearchChange(e.target.value)}
|
||||||
|
className="w-full pl-12 pr-12 py-3 bg-white dark:bg-slate-800 border border-slate-300 dark:border-slate-600 rounded-2xl text-slate-900 dark:text-white placeholder-slate-500 dark:placeholder-slate-400 focus:ring-2 focus:ring-purple-500 focus:border-transparent shadow-lg"
|
||||||
|
/>
|
||||||
|
{query && (
|
||||||
|
<motion.button
|
||||||
|
type="button"
|
||||||
|
onClick={() => handleSearchChange('')}
|
||||||
|
className="absolute right-3 top-1/2 transform -translate-y-1/2 p-1 text-slate-400 hover:text-slate-600 dark:hover:text-slate-300 transition-colors"
|
||||||
|
whileHover={{ scale: 1.1 }}
|
||||||
|
whileTap={{ scale: 0.9 }}
|
||||||
|
>
|
||||||
|
<XMarkIcon className="w-4 h-4" />
|
||||||
|
</motion.button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Media Type Filter */}
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<select
|
||||||
|
value={type}
|
||||||
|
onChange={(e) => handleTypeChange(e.target.value)}
|
||||||
|
className="px-4 py-3 bg-white dark:bg-slate-800 border border-slate-300 dark:border-slate-600 rounded-2xl text-slate-900 dark:text-white focus:ring-2 focus:ring-purple-500 focus:border-transparent shadow-lg font-medium"
|
||||||
|
>
|
||||||
|
<option value="all">All Media</option>
|
||||||
|
<option value="movies">Movies</option>
|
||||||
|
<option value="tvshows">TV Shows</option>
|
||||||
|
<option value="games">Games</option>
|
||||||
|
<option value="music">Music</option>
|
||||||
|
<option value="adult">Adult</option>
|
||||||
|
<option value="actors">Actors</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Search Results */}
|
||||||
|
{renderSearchResults()}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
592
src/pages/TVShowDetail.tsx
Normal file
592
src/pages/TVShowDetail.tsx
Normal file
@@ -0,0 +1,592 @@
|
|||||||
|
import React, { useState } from 'react'
|
||||||
|
import { motion, AnimatePresence } from 'framer-motion'
|
||||||
|
import { useParams, useNavigate } from 'react-router-dom'
|
||||||
|
import {
|
||||||
|
ArrowLeftIcon,
|
||||||
|
PlayIcon,
|
||||||
|
CalendarIcon,
|
||||||
|
UserIcon,
|
||||||
|
TvIcon,
|
||||||
|
FilmIcon,
|
||||||
|
PlusIcon,
|
||||||
|
CheckIcon,
|
||||||
|
EyeIcon,
|
||||||
|
ExclamationTriangleIcon
|
||||||
|
} from '@heroicons/react/24/outline'
|
||||||
|
import { StarIcon as StarIconSolid } from '@heroicons/react/24/solid'
|
||||||
|
import { useTvShow } from '../hooks/useApi'
|
||||||
|
import { Tooltip } from '../components/MicroInteractions'
|
||||||
|
|
||||||
|
class TVShowDetailErrorBoundary extends React.Component<
|
||||||
|
{ children: React.ReactNode; navigate: (to: string) => void },
|
||||||
|
{ hasError: boolean; error?: Error }
|
||||||
|
> {
|
||||||
|
constructor(props: any) {
|
||||||
|
super(props)
|
||||||
|
this.state = { hasError: false }
|
||||||
|
}
|
||||||
|
|
||||||
|
static getDerivedStateFromError(error: Error) {
|
||||||
|
return { hasError: true, error }
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
|
||||||
|
console.error('TVShowDetail error:', error, errorInfo)
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
if (this.state.hasError) {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen flex items-center justify-center">
|
||||||
|
<div className="text-center">
|
||||||
|
<ExclamationTriangleIcon className="w-16 h-16 text-red-500 mx-auto mb-4" />
|
||||||
|
<h2 className="text-2xl font-bold text-gray-900 mb-2">TV Show Error</h2>
|
||||||
|
<p className="text-gray-600 mb-6">
|
||||||
|
{this.state.error?.message || 'Failed to load TV show details'}
|
||||||
|
</p>
|
||||||
|
<div className="flex gap-4 justify-center">
|
||||||
|
<button
|
||||||
|
onClick={() => this.props.navigate('/tvshows')}
|
||||||
|
className="btn btn-secondary"
|
||||||
|
>
|
||||||
|
Back to TV Shows
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => window.location.reload()}
|
||||||
|
className="btn btn-primary"
|
||||||
|
>
|
||||||
|
Reload Page
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
return this.props.children
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function TVShowDetail() {
|
||||||
|
const { id } = useParams<{ id: string }>()
|
||||||
|
const navigate = useNavigate()
|
||||||
|
const [activeTab, setActiveTab] = useState<'overview' | 'seasons' | 'episodes' | 'actors'>('overview')
|
||||||
|
const [selectedSeason, setSelectedSeason] = useState<number>(1)
|
||||||
|
|
||||||
|
// Validate ID and handle invalid cases
|
||||||
|
const tvShowId = id ? Number(id) : null
|
||||||
|
const isValidId = tvShowId && !isNaN(tvShowId) && tvShowId > 0
|
||||||
|
|
||||||
|
// Early return for invalid ID
|
||||||
|
if (!isValidId) {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-gray-50 flex items-center justify-center">
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="text-gray-400 text-6xl mb-4">📺</div>
|
||||||
|
<h2 className="text-2xl font-bold text-gray-900 mb-2">Invalid TV Show ID</h2>
|
||||||
|
<p className="text-gray-600 mb-6">The TV show ID is invalid or missing.</p>
|
||||||
|
<button
|
||||||
|
onClick={() => navigate('/tvshows')}
|
||||||
|
className="btn btn-primary"
|
||||||
|
>
|
||||||
|
Back to TV Shows
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const { data: tvShow, isLoading, error } = useTvShow(tvShowId)
|
||||||
|
|
||||||
|
if (isLoading) {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen">
|
||||||
|
<div className="animate-pulse">
|
||||||
|
<div className="h-96 bg-gray-300"></div>
|
||||||
|
<div className="container mx-auto px-4 py-8">
|
||||||
|
<div className="h-8 bg-gray-300 rounded w-1/3 mb-4"></div>
|
||||||
|
<div className="h-4 bg-gray-300 rounded w-2/3 mb-2"></div>
|
||||||
|
<div className="h-4 bg-gray-300 rounded w-1/2"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (error || !tvShow) {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-gray-50 flex items-center justify-center">
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="text-gray-400 text-6xl mb-4">📺</div>
|
||||||
|
<h2 className="text-2xl font-bold text-gray-900 mb-2">TV Show Not Found</h2>
|
||||||
|
<p className="text-gray-600 mb-6">The TV show you're looking for doesn't exist or has been removed.</p>
|
||||||
|
<button
|
||||||
|
onClick={() => navigate('/tvshows')}
|
||||||
|
className="btn btn-primary"
|
||||||
|
>
|
||||||
|
Back to TV Shows
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const getImage = (imagePath?: string): string | undefined => {
|
||||||
|
if (!imagePath) return undefined
|
||||||
|
|
||||||
|
// If it's already a full HTTP URL, use as-is
|
||||||
|
if (imagePath.startsWith('http')) {
|
||||||
|
return imagePath
|
||||||
|
}
|
||||||
|
|
||||||
|
// If it starts with /images/, use as-is (already correct path)
|
||||||
|
if (imagePath.startsWith('/images/')) {
|
||||||
|
return `${(import.meta as any).env?.VITE_API_URL?.replace('/api', '') || ''}${imagePath}`
|
||||||
|
}
|
||||||
|
|
||||||
|
// If it's a relative path without /images/, add the prefix
|
||||||
|
return `${(import.meta as any).env?.VITE_API_URL?.replace('/api', '') || ''}/images/${imagePath}`
|
||||||
|
}
|
||||||
|
|
||||||
|
const backdropUrl = getImage(tvShow.backdrop_url)
|
||||||
|
const posterUrl = getImage(tvShow.poster_url)
|
||||||
|
|
||||||
|
const formatYear = (date?: string) => {
|
||||||
|
if (!date) return 'Unknown'
|
||||||
|
return new Date(date).getFullYear()
|
||||||
|
}
|
||||||
|
|
||||||
|
const formatDate = (date?: string) => {
|
||||||
|
if (!date) return 'Unknown'
|
||||||
|
return new Date(date).toLocaleDateString('en-US', {
|
||||||
|
year: 'numeric',
|
||||||
|
month: 'long',
|
||||||
|
day: 'numeric'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const formatRuntime = (minutes?: number) => {
|
||||||
|
if (!minutes) return 'Unknown'
|
||||||
|
const hours = Math.floor(minutes / 60)
|
||||||
|
const mins = minutes % 60
|
||||||
|
return `${hours}h ${mins}m`
|
||||||
|
}
|
||||||
|
|
||||||
|
// Use real data from API
|
||||||
|
const seasons = tvShow?.seasons || []
|
||||||
|
const actors = tvShow?.actors || []
|
||||||
|
|
||||||
|
// Debug: Log the data structure
|
||||||
|
console.log('TV Show data:', tvShow)
|
||||||
|
console.log('Seasons:', seasons)
|
||||||
|
console.log('Actors:', actors)
|
||||||
|
|
||||||
|
const filteredEpisodes = seasons
|
||||||
|
.find((season: any) => season.season_number === selectedSeason)?.episodes || []
|
||||||
|
|
||||||
|
// Helper function to safely render episode data
|
||||||
|
const renderEpisodeTitle = (episode: any) => {
|
||||||
|
if (typeof episode.title === 'string') return episode.title
|
||||||
|
if (typeof episode.name === 'string') return episode.name
|
||||||
|
return 'Untitled Episode'
|
||||||
|
}
|
||||||
|
|
||||||
|
const renderEpisodeOverview = (episode: any): string => {
|
||||||
|
if (typeof episode.overview === 'string') return episode.overview
|
||||||
|
return 'No description available'
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<TVShowDetailErrorBoundary navigate={navigate}>
|
||||||
|
<div className="min-h-screen">
|
||||||
|
{/* Hero Section with Backdrop */}
|
||||||
|
<div className="relative h-96 overflow-hidden">
|
||||||
|
{backdropUrl ? (
|
||||||
|
<>
|
||||||
|
<motion.img
|
||||||
|
src={backdropUrl}
|
||||||
|
alt={tvShow.title}
|
||||||
|
className="w-full h-full object-cover"
|
||||||
|
initial={{ scale: 1.1 }}
|
||||||
|
animate={{ scale: 1 }}
|
||||||
|
transition={{ duration: 1.5 }}
|
||||||
|
/>
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-t from-gray-900 via-gray-900/50 to-transparent dark:from-black dark:via-black/50 dark:to-transparent"></div>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<div className="w-full h-full bg-gradient-to-br from-blue-600 to-purple-600 dark:from-blue-800 dark:to-purple-800"></div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Back Button */}
|
||||||
|
<motion.button
|
||||||
|
onClick={() => navigate(-1)}
|
||||||
|
className="absolute top-4 left-4 p-2 bg-black/50 dark:bg-black/70 backdrop-blur-sm rounded-lg text-white hover:bg-black/70 dark:hover:bg-black/80 transition-all duration-200"
|
||||||
|
whileHover={{ scale: 1.05 }}
|
||||||
|
whileTap={{ scale: 0.95 }}
|
||||||
|
>
|
||||||
|
<ArrowLeftIcon className="w-5 h-5" />
|
||||||
|
</motion.button>
|
||||||
|
|
||||||
|
{/* Play Button */}
|
||||||
|
<motion.button
|
||||||
|
className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 p-6 bg-white/90 dark:bg-white/80 backdrop-blur-sm rounded-full shadow-2xl hover:bg-white dark:hover:bg-white/90 transition-all duration-200"
|
||||||
|
whileHover={{ scale: 1.1 }}
|
||||||
|
whileTap={{ scale: 0.9 }}
|
||||||
|
>
|
||||||
|
<PlayIcon className="w-12 h-12 text-blue-600 dark:text-blue-500" />
|
||||||
|
</motion.button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Main Content */}
|
||||||
|
<div className="container mx-auto px-4 py-8">
|
||||||
|
<div className="flex flex-col lg:flex-row gap-8">
|
||||||
|
{/* Poster and Basic Info */}
|
||||||
|
<div className="lg:w-1/3">
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, x: -20 }}
|
||||||
|
animate={{ opacity: 1, x: 0 }}
|
||||||
|
transition={{ delay: 0.2 }}
|
||||||
|
>
|
||||||
|
{posterUrl ? (
|
||||||
|
<motion.img
|
||||||
|
src={posterUrl}
|
||||||
|
alt={tvShow.title}
|
||||||
|
className="w-3/4 mx-auto rounded-xl shadow-lg mb-4 dark:shadow-black/20"
|
||||||
|
whileHover={{ scale: 1.02 }}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<div className="w-3/4 mx-auto aspect-[2/3] bg-gray-200 dark:bg-gray-800 rounded-xl flex items-center justify-center mb-4">
|
||||||
|
<TvIcon className="w-16 h-16 text-gray-400 dark:text-gray-600" />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="space-y-3">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<h1 className="text-2xl font-bold text-gray-900 dark:text-white">{tvShow.title}</h1>
|
||||||
|
{tvShow.watched && (
|
||||||
|
<Tooltip text="Watched">
|
||||||
|
<CheckIcon className="w-5 h-5 text-green-600 dark:text-green-500" />
|
||||||
|
</Tooltip>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-3 text-xs text-gray-600 dark:text-gray-400">
|
||||||
|
<div className="flex items-center gap-1">
|
||||||
|
<CalendarIcon className="w-3 h-3" />
|
||||||
|
<span>{formatYear(tvShow.release_date)}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-1">
|
||||||
|
<TvIcon className="w-3 h-3" />
|
||||||
|
<span>{tvShow.number_of_seasons || seasons.length || 0} Seasons</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-1">
|
||||||
|
<FilmIcon className="w-3 h-3" />
|
||||||
|
<span>{tvShow.number_of_episodes || 0} Episodes</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{tvShow.rating && (
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<div className="flex items-center">
|
||||||
|
{[...Array(5)].map((_, i) => (
|
||||||
|
<StarIconSolid
|
||||||
|
key={i}
|
||||||
|
className={`w-4 h-4 ${
|
||||||
|
i < Math.floor(Number(tvShow.rating) || 0)
|
||||||
|
? 'text-yellow-400 dark:text-yellow-500'
|
||||||
|
: 'text-gray-300 dark:text-gray-600'
|
||||||
|
}`}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<span className="text-base font-semibold text-gray-900 dark:text-white">
|
||||||
|
{Number(tvShow.rating)?.toFixed(1)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<motion.button
|
||||||
|
className="btn btn-primary flex-1 flex items-center justify-center gap-1 text-sm"
|
||||||
|
whileHover={{ scale: 1.02 }}
|
||||||
|
whileTap={{ scale: 0.98 }}
|
||||||
|
>
|
||||||
|
<PlayIcon className="w-3 h-3" />
|
||||||
|
Play Now
|
||||||
|
</motion.button>
|
||||||
|
<motion.button
|
||||||
|
className="btn btn-secondary flex items-center justify-center gap-1 text-sm"
|
||||||
|
whileHover={{ scale: 1.02 }}
|
||||||
|
whileTap={{ scale: 0.98 }}
|
||||||
|
>
|
||||||
|
<PlusIcon className="w-3 h-3" />
|
||||||
|
Add to List
|
||||||
|
</motion.button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Details and Tabs */}
|
||||||
|
<div className="lg:w-2/3">
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, x: 20 }}
|
||||||
|
animate={{ opacity: 1, x: 0 }}
|
||||||
|
transition={{ delay: 0.3 }}
|
||||||
|
>
|
||||||
|
{/* Tab Navigation */}
|
||||||
|
<div className="border-b border-gray-200 dark:border-gray-700 mb-6">
|
||||||
|
<nav className="flex space-x-8">
|
||||||
|
{[
|
||||||
|
{ id: 'overview', label: 'Overview' },
|
||||||
|
{ id: 'seasons', label: 'Seasons' },
|
||||||
|
{ id: 'episodes', label: 'Episodes' },
|
||||||
|
{ id: 'actors', label: 'Cast & Crew' }
|
||||||
|
].map((tab) => (
|
||||||
|
<button
|
||||||
|
key={tab.id}
|
||||||
|
onClick={() => setActiveTab(tab.id as any)}
|
||||||
|
className={`py-4 px-1 border-b-2 font-medium text-sm transition-all duration-200 ${
|
||||||
|
activeTab === tab.id
|
||||||
|
? 'border-blue-500 text-blue-600 dark:border-blue-400 dark:text-blue-400'
|
||||||
|
: 'border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 hover:border-gray-300 dark:hover:border-gray-600'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{tab.label}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Tab Content */}
|
||||||
|
<AnimatePresence mode="wait">
|
||||||
|
{activeTab === 'overview' && (
|
||||||
|
<motion.div
|
||||||
|
key="overview"
|
||||||
|
initial={{ opacity: 0, y: 10 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
exit={{ opacity: 0, y: -10 }}
|
||||||
|
transition={{ duration: 0.3 }}
|
||||||
|
className="space-y-6"
|
||||||
|
>
|
||||||
|
<div className="bg-gradient-to-br from-purple-50 to-pink-50 dark:from-purple-900/20 dark:to-pink-900/20 rounded-xl shadow-md p-5 border border-purple-200 dark:border-purple-800">
|
||||||
|
<h3 className="text-lg font-semibold text-purple-800 dark:text-purple-200 mb-2">Synopsis</h3>
|
||||||
|
<p className="text-slate-700 dark:text-slate-300 leading-relaxed text-sm">
|
||||||
|
{tvShow.overview || 'No synopsis available for this TV show.'}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-gradient-to-br from-blue-50 to-indigo-50 dark:from-blue-900/20 dark:to-indigo-900/20 rounded-xl shadow-md p-5 border border-blue-200 dark:border-blue-800">
|
||||||
|
<h3 className="text-lg font-semibold text-blue-800 dark:text-blue-200 mb-3">Details</h3>
|
||||||
|
<div className="grid grid-cols-2 gap-3">
|
||||||
|
<div className="bg-white/50 dark:bg-gray-800/50 rounded-lg p-2">
|
||||||
|
<span className="text-xs text-blue-600 dark:text-blue-400 font-medium">First Air Date</span>
|
||||||
|
<p className="font-medium text-slate-900 dark:text-slate-100 text-sm">{formatDate(tvShow.release_date)}</p>
|
||||||
|
</div>
|
||||||
|
<div className="bg-white/50 dark:bg-gray-800/50 rounded-lg p-2">
|
||||||
|
<span className="text-xs text-blue-600 dark:text-blue-400 font-medium">Total Seasons</span>
|
||||||
|
<p className="font-medium text-slate-900 dark:text-slate-100 text-sm">{tvShow.number_of_seasons || seasons.length || 0}</p>
|
||||||
|
</div>
|
||||||
|
<div className="bg-white/50 dark:bg-gray-800/50 rounded-lg p-2">
|
||||||
|
<span className="text-xs text-blue-600 dark:text-blue-400 font-medium">Total Episodes</span>
|
||||||
|
<p className="font-medium text-slate-900 dark:text-slate-100 text-sm">{tvShow.number_of_episodes || 0}</p>
|
||||||
|
</div>
|
||||||
|
<div className="bg-white/50 dark:bg-gray-800/50 rounded-lg p-2">
|
||||||
|
<span className="text-xs text-blue-600 dark:text-blue-400 font-medium">Source</span>
|
||||||
|
<p className="font-medium text-slate-900 dark:text-slate-100 text-sm">{tvShow.source_name}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{activeTab === 'seasons' && (
|
||||||
|
<motion.div
|
||||||
|
key="seasons"
|
||||||
|
initial={{ opacity: 0, y: 10 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
exit={{ opacity: 0, y: -10 }}
|
||||||
|
transition={{ duration: 0.3 }}
|
||||||
|
className="space-y-4"
|
||||||
|
>
|
||||||
|
<h3 className="text-lg font-semibold text-green-800 dark:text-green-200 mb-3">Seasons</h3>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
|
{seasons.map((season: any) => (
|
||||||
|
<motion.div
|
||||||
|
key={season.season_number}
|
||||||
|
className="bg-gradient-to-br from-green-50 to-emerald-50 dark:from-green-900/20 dark:to-emerald-900/20 rounded-xl shadow-md p-4 hover:shadow-lg transition-all duration-200 cursor-pointer border border-green-200 dark:border-green-800"
|
||||||
|
whileHover={{ scale: 1.02 }}
|
||||||
|
onClick={() => {
|
||||||
|
setSelectedSeason(season.season_number)
|
||||||
|
setActiveTab('episodes')
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className="flex gap-4">
|
||||||
|
{season.poster_url ? (
|
||||||
|
<img
|
||||||
|
src={getImage(season.poster_url)}
|
||||||
|
alt={`Season ${season.season_number}`}
|
||||||
|
className="w-20 h-28 object-cover rounded-lg"
|
||||||
|
onError={(e) => {
|
||||||
|
e.currentTarget.src = '/images/placeholder.jpg'
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<div className="w-20 h-28 bg-gray-200 dark:bg-gray-700 rounded-lg flex items-center justify-center">
|
||||||
|
<TvIcon className="w-8 h-8 text-gray-400 dark:text-gray-600" />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div className="flex-1">
|
||||||
|
<h4 className="font-semibold text-gray-900 dark:text-white">Season {season.season_number}</h4>
|
||||||
|
<p className="text-sm text-gray-600 dark:text-gray-400 mb-2">{season.episode_count} Episodes</p>
|
||||||
|
<p className="text-sm text-gray-500 dark:text-gray-500">
|
||||||
|
{season.watched_episodes || 0} watched
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{activeTab === 'episodes' && (
|
||||||
|
<motion.div
|
||||||
|
key="episodes"
|
||||||
|
initial={{ opacity: 0, y: 10 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
exit={{ opacity: 0, y: -10 }}
|
||||||
|
transition={{ duration: 0.3 }}
|
||||||
|
className="space-y-4"
|
||||||
|
>
|
||||||
|
<div className="flex items-center justify-between mb-4">
|
||||||
|
<h3 className="text-lg font-semibold text-orange-800 dark:text-orange-200 mb-3">Episodes</h3>
|
||||||
|
<select
|
||||||
|
value={selectedSeason}
|
||||||
|
onChange={(e) => setSelectedSeason(Number(e.target.value))}
|
||||||
|
className="px-3 py-2 border border-gray-200 dark:border-gray-600 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-800 dark:text-white focus:ring-blue-500 dark:focus:ring-blue-400"
|
||||||
|
>
|
||||||
|
{seasons.map((season: any) => (
|
||||||
|
<option key={season.season_number} value={season.season_number}>
|
||||||
|
Season {season.season_number}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-3">
|
||||||
|
{filteredEpisodes.map((episode: any) => (
|
||||||
|
<motion.div
|
||||||
|
key={episode.id}
|
||||||
|
className="bg-gradient-to-br from-orange-50 to-amber-50 dark:from-orange-900/20 dark:to-amber-900/20 rounded-xl shadow-md p-3 hover:shadow-lg transition-all duration-200 border border-orange-200 dark:border-orange-800"
|
||||||
|
whileHover={{ scale: 1.01 }}
|
||||||
|
>
|
||||||
|
<div className="flex gap-4">
|
||||||
|
{episode.still_url ? (
|
||||||
|
<img
|
||||||
|
src={episode.still_url.startsWith('http') ? episode.still_url : `${(import.meta as any).env?.VITE_API_URL?.replace('/api', '') || ''}${episode.still_url}`}
|
||||||
|
alt={renderEpisodeTitle(episode)}
|
||||||
|
className="w-32 h-20 object-cover rounded-lg"
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<div className="w-32 h-20 bg-gray-200 dark:bg-gray-700 rounded-lg flex items-center justify-center">
|
||||||
|
<FilmIcon className="w-8 h-8 text-gray-400 dark:text-gray-600" />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div className="flex-1">
|
||||||
|
<div className="flex items-start justify-between">
|
||||||
|
<div>
|
||||||
|
<h4 className="font-semibold text-gray-900 dark:text-white">
|
||||||
|
S{episode.season_number?.toString().padStart(2, '0')}E{episode.episode_number?.toString().padStart(2, '0')} - {renderEpisodeTitle(episode)}
|
||||||
|
</h4>
|
||||||
|
<p className="text-sm text-gray-600 dark:text-gray-400 mb-2 line-clamp-2">
|
||||||
|
{renderEpisodeOverview(episode)}
|
||||||
|
</p>
|
||||||
|
<div className="flex items-center gap-4 text-sm text-gray-500 dark:text-gray-500">
|
||||||
|
<span>{formatDate(episode.air_date)}</span>
|
||||||
|
{episode.runtime_minutes && (
|
||||||
|
<span>{formatRuntime(episode.runtime_minutes)}</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
{episode.watched && (
|
||||||
|
<Tooltip text="Watched">
|
||||||
|
<EyeIcon className="w-5 h-5 text-green-600 dark:text-green-500" />
|
||||||
|
</Tooltip>
|
||||||
|
)}
|
||||||
|
<motion.button
|
||||||
|
className="p-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 transition-colors"
|
||||||
|
whileHover={{ scale: 1.1 }}
|
||||||
|
whileTap={{ scale: 0.9 }}
|
||||||
|
>
|
||||||
|
<PlayIcon className="w-4 h-4" />
|
||||||
|
</motion.button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{activeTab === 'actors' && (
|
||||||
|
<motion.div
|
||||||
|
key="actors"
|
||||||
|
initial={{ opacity: 0, y: 10 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
exit={{ opacity: 0, y: -10 }}
|
||||||
|
transition={{ duration: 0.3 }}
|
||||||
|
className="space-y-4"
|
||||||
|
>
|
||||||
|
<h3 className="text-lg font-semibold text-purple-800 dark:text-purple-200 mb-3">Cast & Crew</h3>
|
||||||
|
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
|
||||||
|
{actors.map((actor: any) => (
|
||||||
|
<motion.div
|
||||||
|
key={actor.id || Math.random()}
|
||||||
|
className="text-center group cursor-pointer"
|
||||||
|
whileHover={{ scale: 1.05 }}
|
||||||
|
onClick={() => {
|
||||||
|
if (actor.id) {
|
||||||
|
navigate(`/actors/${actor.id}`)
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{actor.thumbnail_path ? (
|
||||||
|
<img
|
||||||
|
src={actor.thumbnail_path.startsWith('http')
|
||||||
|
? actor.thumbnail_path
|
||||||
|
: `${(import.meta as any).env?.VITE_API_URL?.replace('/api', '') || ''}/images/${actor.thumbnail_path}`
|
||||||
|
}
|
||||||
|
alt={actor.name || 'Actor'}
|
||||||
|
className="w-full h-48 object-cover rounded-xl mb-3 group-hover:shadow-lg transition-shadow"
|
||||||
|
onError={(e) => {
|
||||||
|
e.currentTarget.src = '/images/placeholder.jpg'
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<div className="w-full h-48 bg-gray-200 dark:bg-gray-800 rounded-xl mb-3 flex items-center justify-center">
|
||||||
|
<UserIcon className="w-16 h-16 text-gray-400 dark:text-gray-600" />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<h4 className="font-medium text-gray-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">
|
||||||
|
{actor.name || 'Unknown Actor'}
|
||||||
|
</h4>
|
||||||
|
<p className="text-sm text-gray-500 dark:text-gray-400">
|
||||||
|
{actor.role || actor.character_name || 'Actor'}
|
||||||
|
</p>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
</AnimatePresence>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</TVShowDetailErrorBoundary>
|
||||||
|
)
|
||||||
|
}
|
||||||
245
src/pages/TVShows.tsx
Normal file
245
src/pages/TVShows.tsx
Normal file
@@ -0,0 +1,245 @@
|
|||||||
|
import React, { useState, useContext } from 'react'
|
||||||
|
import { motion } from 'framer-motion'
|
||||||
|
import { useTvShows } from '../hooks/useApi'
|
||||||
|
import { ViewContext } from '../components/Layout'
|
||||||
|
import { TvIcon } from '@heroicons/react/24/outline'
|
||||||
|
import { useNavigate } from 'react-router-dom'
|
||||||
|
import { Play, Eye, Lock} from 'lucide-react'
|
||||||
|
|
||||||
|
// Import from alternative frontend
|
||||||
|
import { MediaListView } from '../../../frontend/components/MediaListView'
|
||||||
|
import { MediaDetailView } from '../../../frontend/components/MediaDetailView'
|
||||||
|
|
||||||
|
export default function TVShows() {
|
||||||
|
const viewContext = useContext(ViewContext)
|
||||||
|
const viewMode = viewContext?.viewMode || 'grid'
|
||||||
|
const gridColumns = viewContext?.gridColumns || 5
|
||||||
|
const coverSize = viewContext?.coverSize || 200
|
||||||
|
const PaginationComp = viewContext?.PaginationComponent
|
||||||
|
const navigate = useNavigate()
|
||||||
|
|
||||||
|
const handleContentClick = (content) => {
|
||||||
|
navigate(`/tvshows/${content.id}`)
|
||||||
|
}
|
||||||
|
|
||||||
|
const getGridClass = (columns: number) => {
|
||||||
|
const columnClasses = {
|
||||||
|
2: 'grid-cols-1 md:grid-cols-2',
|
||||||
|
3: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
|
||||||
|
4: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
|
||||||
|
5: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5',
|
||||||
|
6: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6',
|
||||||
|
7: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-7',
|
||||||
|
8: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-8'
|
||||||
|
}
|
||||||
|
return columnClasses[columns as keyof typeof columnClasses] || columnClasses[5]
|
||||||
|
}
|
||||||
|
|
||||||
|
const [currentPage, setCurrentPage] = useState(1)
|
||||||
|
const [pageSize, setPageSize] = useState(24)
|
||||||
|
const { data: tvShowsData, isLoading } = useTvShows({
|
||||||
|
page: currentPage,
|
||||||
|
per_page: pageSize
|
||||||
|
})
|
||||||
|
|
||||||
|
const tvShows = tvShowsData?.items || []
|
||||||
|
const pagination = tvShowsData?.pagination
|
||||||
|
/*
|
||||||
|
total: tvShowsData?.total || 0,
|
||||||
|
last_page: tvShowsData?.lastPage || 1,
|
||||||
|
current_page: currentPage,
|
||||||
|
per_page: pageSize
|
||||||
|
}
|
||||||
|
*/
|
||||||
|
|
||||||
|
// Convert TV shows to MediaItem format for MediaListView
|
||||||
|
const mediaItems = tvShows.map(tvShow => ({
|
||||||
|
id: tvShow.id.toString(),
|
||||||
|
title: tvShow.title || 'Untitled TV Show',
|
||||||
|
type: 'tvshows' as const,
|
||||||
|
coverUrl: tvShow.poster_url || tvShow.cover_url || '',
|
||||||
|
rating: Number(tvShow.rating) || 0,
|
||||||
|
status: 'completed' as const, // Default status
|
||||||
|
releaseYear: tvShow.release_year || tvShow.year || new Date().getFullYear(),
|
||||||
|
addedAt: tvShow.created_at || new Date().toISOString(),
|
||||||
|
favorite: tvShow.favorite || false,
|
||||||
|
platform: tvShow.source_name || 'Unknown',
|
||||||
|
description: tvShow.description || '',
|
||||||
|
genres: tvShow.genres || []
|
||||||
|
}))
|
||||||
|
|
||||||
|
// State for MediaListView
|
||||||
|
const [selectedId, setSelectedId] = useState<string | null>(null)
|
||||||
|
const [multiSelectedIds, setMultiSelectedIds] = useState<Set<string>>(new Set())
|
||||||
|
const [detailItem, setDetailItem] = useState<any>(null)
|
||||||
|
|
||||||
|
const handleSelect = (item: any) => {
|
||||||
|
setSelectedId(item.id)
|
||||||
|
setDetailItem(item)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleToggleSelect = (id: string) => {
|
||||||
|
const newSelected = new Set(multiSelectedIds)
|
||||||
|
if (newSelected.has(id)) {
|
||||||
|
newSelected.delete(id)
|
||||||
|
} else {
|
||||||
|
newSelected.add(id)
|
||||||
|
}
|
||||||
|
setMultiSelectedIds(newSelected)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{isLoading ? (
|
||||||
|
<div className={`grid gap-6 ${getGridClass(gridColumns)}`}>
|
||||||
|
{Array.from({ length: pageSize }, (_, i) => (
|
||||||
|
<div key={i} className="bg-white dark:bg-slate-800 rounded-xl p-4 animate-pulse">
|
||||||
|
<div className="bg-slate-200 dark:bg-slate-600 h-32 rounded-lg mb-4"></div>
|
||||||
|
<div className="h-4 bg-slate-200 dark:bg-slate-600 rounded mb-2"></div>
|
||||||
|
<div className="h-4 bg-slate-200 dark:bg-slate-600 rounded w-3/4"></div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
) : viewMode === 'list' ? (
|
||||||
|
// Use MediaListView for list mode with sideview
|
||||||
|
<div className="flex w-full h-full">
|
||||||
|
<div className={`${detailItem ? 'w-1/2 hidden md:flex' : 'w-full'} h-full flex flex-col transition-all duration-500`}>
|
||||||
|
<div className="h-[600px] border border-slate-200 dark:border-slate-700 rounded-lg overflow-hidden">
|
||||||
|
<MediaListView
|
||||||
|
items={mediaItems}
|
||||||
|
onSelect={handleSelect}
|
||||||
|
selectedId={selectedId}
|
||||||
|
onToggleSelect={handleToggleSelect}
|
||||||
|
multiSelectedIds={multiSelectedIds}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{detailItem && (
|
||||||
|
<div className="w-full md:w-1/2 h-full border-l border-white/5 relative overflow-hidden animate-in slide-in-from-right duration-300">
|
||||||
|
<MediaDetailView
|
||||||
|
item={detailItem}
|
||||||
|
allMedia={mediaItems}
|
||||||
|
onBack={() => setDetailItem(null)}
|
||||||
|
onEdit={(item) => console.log('Edit item:', item)}
|
||||||
|
onToggleFavorite={(id, isFav) => console.log('Toggle favorite:', id, isFav)}
|
||||||
|
onSelectRelated={(item) => setDetailItem(item)}
|
||||||
|
onSelectPerson={(name, id) => console.log('Select person:', name, id)}
|
||||||
|
onViewAll={(type, id) => console.log('View all:', type, id)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
) : viewMode === 'grid' ? (
|
||||||
|
// Grid view
|
||||||
|
<motion.div
|
||||||
|
className={`grid gap-6 ${getGridClass(gridColumns)} p-4 md:p-8`}
|
||||||
|
>
|
||||||
|
{tvShows.map((tvShow: any, index: number) => (
|
||||||
|
<motion.div
|
||||||
|
onClick={() => handleContentClick(tvShow)}
|
||||||
|
key={tvShow.id}
|
||||||
|
initial={{ opacity: 0, scale: 0.8 }}
|
||||||
|
animate={{ opacity: 1, scale: 1 }}
|
||||||
|
transition={{ delay: index * 0.03 }}
|
||||||
|
className="bg-white dark:bg-slate-800 rounded-xl p-6 shadow-lg hover:shadow-xl transition-shadow group cursor-pointer"
|
||||||
|
>
|
||||||
|
<div className="flex gap-4">
|
||||||
|
|
||||||
|
{tvShow.poster_url ? (
|
||||||
|
<div className="bg-slate-200 dark:bg-slate-600 w-24 h-32 rounded-lg flex-shrink-0">
|
||||||
|
<img
|
||||||
|
src={tvShow.poster_url.startsWith('http') ? tvShow.poster_url : `${(import.meta as any).env?.VITE_API_URL?.replace('/api', '') || ''}/images/${tvShow.poster_url}`}
|
||||||
|
alt={tvShow.title}
|
||||||
|
className="w-full h-full object-cover"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="bg-slate-200 dark:bg-slate-600 w-24 h-32 rounded-lg flex-shrink-0"></div>
|
||||||
|
)}
|
||||||
|
<div className="flex-1">
|
||||||
|
<h3 className="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-2">
|
||||||
|
{tvShow.title || 'Untitled TV Show'}
|
||||||
|
</h3>
|
||||||
|
<p className="text-slate-600 dark:text-slate-400 text-sm">
|
||||||
|
{tvShow.description || 'No description available'}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</motion.div>
|
||||||
|
) : viewMode === 'cover' ? (
|
||||||
|
// Cover View (Shelf-style) - use dynamic cover size
|
||||||
|
<div className="flex flex-wrap gap-4 justify-center">
|
||||||
|
{tvShows.map((tvShow: any, index: number) => (
|
||||||
|
<>
|
||||||
|
<div className="relative group" key={tvShow.id}>
|
||||||
|
{(() => {
|
||||||
|
const aspectRatio = tvShow.poster_aspect_ratio || 1.5;
|
||||||
|
const height = coverSize / aspectRatio;
|
||||||
|
console.log(tvShow)
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className="relative overflow-hidden rounded-t-lg shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1"
|
||||||
|
style={{
|
||||||
|
width: `${coverSize}px`,
|
||||||
|
height: `${height}px`
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{tvShow.poster_url ? (
|
||||||
|
<img
|
||||||
|
src={tvShow.poster_url.startsWith('http') ? tvShow.poster_url : `${(import.meta as any).env?.VITE_API_URL?.replace('/api', '') || ''}/images/${tvShow.poster_url}`}
|
||||||
|
alt={tvShow.title}
|
||||||
|
className="w-full h-full object-cover"
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<div className="w-full h-full bg-gradient-to-br from-purple-400 to-pink-400 flex items-center justify-center">
|
||||||
|
<Lock className="w-8 h-8 text-white/50" />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Shelf effect - bottom shadow */}
|
||||||
|
<div className="absolute bottom-0 left-0 right-0 h-2 bg-gradient-to-t from-black/30 to-transparent"></div>
|
||||||
|
|
||||||
|
{/* Hover overlay */}
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300">
|
||||||
|
<div className="absolute top-2 right-2">
|
||||||
|
<motion.button
|
||||||
|
className="p-1 bg-purple-600 rounded-full hover:bg-purple-700 transition-colors"
|
||||||
|
whileHover={{ scale: 1.1 }}
|
||||||
|
whileTap={{ scale: 0.9 }}
|
||||||
|
>
|
||||||
|
<Play className="w-3 h-3 text-white" />
|
||||||
|
</motion.button>
|
||||||
|
</div>
|
||||||
|
{tvShow.watched && (
|
||||||
|
<div className="absolute top-2 left-2">
|
||||||
|
<Eye className="w-4 h-4 text-green-400" />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})()}
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
{!isLoading && pagination && pagination.last_page > 1 && PaginationComp && (
|
||||||
|
<div className="mt-8">
|
||||||
|
<PaginationComp
|
||||||
|
currentPage={currentPage}
|
||||||
|
lastPage={pagination.last_page}
|
||||||
|
total={pagination.total}
|
||||||
|
onPageChange={setCurrentPage}
|
||||||
|
itemsPerPage={pageSize}
|
||||||
|
onItemsPerPageChange={setPageSize}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
625
src/services/api.ts
Normal file
625
src/services/api.ts
Normal file
@@ -0,0 +1,625 @@
|
|||||||
|
import axios, { AxiosInstance, AxiosResponse } from 'axios'
|
||||||
|
import { PaginatedResponse } from '../types'
|
||||||
|
|
||||||
|
// API base configuration
|
||||||
|
const API_BASE_URL = (import.meta as any).env?.VITE_API_URL || '/api'
|
||||||
|
|
||||||
|
// Types for API responses
|
||||||
|
interface ApiResponse<T = any> {
|
||||||
|
success: boolean
|
||||||
|
data?: T
|
||||||
|
message?: string
|
||||||
|
error?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
interface LocalPaginatedResponse<T> {
|
||||||
|
items: T[]
|
||||||
|
pagination: {
|
||||||
|
total: number
|
||||||
|
per_page: number
|
||||||
|
current_page: number
|
||||||
|
last_page: number
|
||||||
|
}
|
||||||
|
available_filters?: {
|
||||||
|
genres?: string[]
|
||||||
|
directors?: string[]
|
||||||
|
sources?: string[]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
interface SearchResult {
|
||||||
|
games?: PaginatedResponse<any>
|
||||||
|
movies?: PaginatedResponse<any>
|
||||||
|
tvshows?: PaginatedResponse<any>
|
||||||
|
artists?: PaginatedResponse<any>
|
||||||
|
actors?: PaginatedResponse<any>
|
||||||
|
}
|
||||||
|
|
||||||
|
// Auth types
|
||||||
|
interface LoginCredentials {
|
||||||
|
username: string
|
||||||
|
password: string
|
||||||
|
}
|
||||||
|
|
||||||
|
interface RegisterData {
|
||||||
|
username: string
|
||||||
|
email: string
|
||||||
|
password: string
|
||||||
|
}
|
||||||
|
|
||||||
|
interface AuthResponse {
|
||||||
|
user: {
|
||||||
|
id: number
|
||||||
|
username: string
|
||||||
|
email: string
|
||||||
|
is_admin: boolean
|
||||||
|
}
|
||||||
|
token: string
|
||||||
|
refresh_token: string
|
||||||
|
}
|
||||||
|
|
||||||
|
// Create axios instance with default configuration
|
||||||
|
const createApiInstance = (): AxiosInstance => {
|
||||||
|
const instance = axios.create({
|
||||||
|
baseURL: API_BASE_URL,
|
||||||
|
timeout: 10000,
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
// Request interceptor to add auth token
|
||||||
|
instance.interceptors.request.use(
|
||||||
|
(config) => {
|
||||||
|
const token = localStorage.getItem('auth_token')
|
||||||
|
if (token) {
|
||||||
|
config.headers.Authorization = `Bearer ${token}`
|
||||||
|
}
|
||||||
|
return config
|
||||||
|
},
|
||||||
|
(error) => {
|
||||||
|
return Promise.reject(error)
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
// Response interceptor to handle common errors
|
||||||
|
instance.interceptors.response.use(
|
||||||
|
(response: AxiosResponse) => {
|
||||||
|
return response
|
||||||
|
},
|
||||||
|
(error) => {
|
||||||
|
if (error.response?.status === 401) {
|
||||||
|
// Token expired or invalid, clear local storage and redirect to login
|
||||||
|
localStorage.removeItem('auth_token')
|
||||||
|
localStorage.removeItem('refresh_token')
|
||||||
|
window.location.href = '/login'
|
||||||
|
}
|
||||||
|
return Promise.reject(error)
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
return instance
|
||||||
|
}
|
||||||
|
|
||||||
|
const api = createApiInstance()
|
||||||
|
|
||||||
|
// Auth API
|
||||||
|
export const authApi = {
|
||||||
|
login: async (credentials: LoginCredentials): Promise<AuthResponse> => {
|
||||||
|
const response = await api.post('/auth/login', credentials)
|
||||||
|
const { token, refresh_token } = response.data.data
|
||||||
|
|
||||||
|
// Store tokens
|
||||||
|
localStorage.setItem('auth_token', token)
|
||||||
|
localStorage.setItem('refresh_token', refresh_token)
|
||||||
|
|
||||||
|
return response.data.data
|
||||||
|
},
|
||||||
|
|
||||||
|
register: async (data: RegisterData): Promise<AuthResponse> => {
|
||||||
|
const response = await api.post('/auth/register', data)
|
||||||
|
const { token, refresh_token } = response.data.data
|
||||||
|
|
||||||
|
// Store tokens
|
||||||
|
localStorage.setItem('auth_token', token)
|
||||||
|
localStorage.setItem('refresh_token', refresh_token)
|
||||||
|
|
||||||
|
return response.data.data
|
||||||
|
},
|
||||||
|
|
||||||
|
getCurrentUser: async () => {
|
||||||
|
const response = await api.get('/auth/me')
|
||||||
|
return response.data.data
|
||||||
|
},
|
||||||
|
|
||||||
|
refreshToken: async () => {
|
||||||
|
const refreshToken = localStorage.getItem('refresh_token')
|
||||||
|
if (!refreshToken) {
|
||||||
|
throw new Error('No refresh token available')
|
||||||
|
}
|
||||||
|
|
||||||
|
const response = await api.post('/auth/refresh', { refresh_token: refreshToken })
|
||||||
|
const { token, refresh_token } = response.data.data
|
||||||
|
|
||||||
|
// Update stored tokens
|
||||||
|
localStorage.setItem('auth_token', token)
|
||||||
|
localStorage.setItem('refresh_token', refresh_token)
|
||||||
|
|
||||||
|
return response.data.data
|
||||||
|
},
|
||||||
|
|
||||||
|
logout: () => {
|
||||||
|
localStorage.removeItem('auth_token')
|
||||||
|
localStorage.removeItem('refresh_token')
|
||||||
|
},
|
||||||
|
|
||||||
|
isAuthenticated: (): boolean => {
|
||||||
|
return !!localStorage.getItem('auth_token')
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
// Movies API
|
||||||
|
export const moviesApi = {
|
||||||
|
list: async (params?: {
|
||||||
|
page?: number
|
||||||
|
per_page?: number
|
||||||
|
genre?: string
|
||||||
|
year?: number
|
||||||
|
search?: string
|
||||||
|
}): Promise<LocalPaginatedResponse<any>> => {
|
||||||
|
try {
|
||||||
|
const response = await api.get('/movies', { params })
|
||||||
|
return response.data.data
|
||||||
|
} catch (error: any) {
|
||||||
|
console.error('Movies API error:', error)
|
||||||
|
// Return fallback data if API fails
|
||||||
|
return {
|
||||||
|
items: [],
|
||||||
|
pagination: {
|
||||||
|
total: 0,
|
||||||
|
per_page: 20,
|
||||||
|
current_page: 1,
|
||||||
|
last_page: 1
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
get: async (id: number): Promise<any> => {
|
||||||
|
const response = await api.get(`/movies/${id}`)
|
||||||
|
return response.data.data
|
||||||
|
},
|
||||||
|
|
||||||
|
create: async (data: any): Promise<any> => {
|
||||||
|
const response = await api.post('/movies', data)
|
||||||
|
return response.data.data
|
||||||
|
},
|
||||||
|
|
||||||
|
update: async (id: number, data: any): Promise<any> => {
|
||||||
|
const response = await api.put(`/movies/${id}`, data)
|
||||||
|
return response.data.data
|
||||||
|
},
|
||||||
|
|
||||||
|
delete: async (id: number): Promise<void> => {
|
||||||
|
await api.delete(`/movies/${id}`)
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
// TV Shows API
|
||||||
|
export const tvShowsApi = {
|
||||||
|
list: async (params?: {
|
||||||
|
page?: number
|
||||||
|
per_page?: number
|
||||||
|
genre?: string
|
||||||
|
year?: number
|
||||||
|
search?: string
|
||||||
|
}): Promise<PaginatedResponse<any>> => {
|
||||||
|
try {
|
||||||
|
const response = await api.get('/tvshows', { params })
|
||||||
|
|
||||||
|
// Handle the wrapped API response structure
|
||||||
|
if (response.data?.success && response.data?.data) {
|
||||||
|
return response.data.data
|
||||||
|
}
|
||||||
|
|
||||||
|
return response.data
|
||||||
|
} catch (error: any) {
|
||||||
|
console.error('TV Shows API error:', error)
|
||||||
|
// Return fallback data if API fails
|
||||||
|
return {
|
||||||
|
items: [],
|
||||||
|
pagination: {
|
||||||
|
total: 0,
|
||||||
|
per_page: 20,
|
||||||
|
current_page: 1,
|
||||||
|
last_page: 1
|
||||||
|
},
|
||||||
|
available_filters: {
|
||||||
|
genres: [],
|
||||||
|
directors: [],
|
||||||
|
sources: []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
get: async (id: number): Promise<any> => {
|
||||||
|
try {
|
||||||
|
const response = await api.get(`/tvshows/${id}`)
|
||||||
|
|
||||||
|
// Handle the wrapped API response structure
|
||||||
|
if (response.data?.success && response.data?.data) {
|
||||||
|
return response.data.data
|
||||||
|
}
|
||||||
|
|
||||||
|
return response.data
|
||||||
|
} catch (error: any) {
|
||||||
|
console.error('TV Show API error:', error)
|
||||||
|
// Return fallback data if API fails
|
||||||
|
return {
|
||||||
|
id: id,
|
||||||
|
title: 'TV Show Not Found',
|
||||||
|
overview: 'Unable to load TV show details. Please try again later.',
|
||||||
|
release_date: '2023-01-01',
|
||||||
|
seasons: 1,
|
||||||
|
episodes: 10,
|
||||||
|
rating: 0,
|
||||||
|
poster_url: null,
|
||||||
|
backdrop_url: null,
|
||||||
|
watched: false,
|
||||||
|
source_name: 'Unknown'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
create: async (data: any): Promise<any> => {
|
||||||
|
const response = await api.post('/tvshows', data)
|
||||||
|
return response.data.data
|
||||||
|
},
|
||||||
|
|
||||||
|
update: async (id: number, data: any): Promise<any> => {
|
||||||
|
const response = await api.put(`/tvshows/${id}`, data)
|
||||||
|
return response.data.data
|
||||||
|
},
|
||||||
|
|
||||||
|
delete: async (id: number): Promise<void> => {
|
||||||
|
await api.delete(`/tvshows/${id}`)
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
// Games API
|
||||||
|
export const gamesApi = {
|
||||||
|
getAll: async (params?: {
|
||||||
|
search?: string
|
||||||
|
sort?: string
|
||||||
|
}): Promise<any> => {
|
||||||
|
try {
|
||||||
|
const response = await api.get('/games/grouped', { params })
|
||||||
|
return response.data
|
||||||
|
} catch (error: any) {
|
||||||
|
console.error('Games API error:', error)
|
||||||
|
// Return fallback data if API fails
|
||||||
|
return {
|
||||||
|
success: false,
|
||||||
|
data: []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
getByCategory: async (category: string, params?: {
|
||||||
|
search?: string
|
||||||
|
sort?: string
|
||||||
|
}): Promise<any> => {
|
||||||
|
try {
|
||||||
|
const response = await api.get(`/games/categories/${category}`, { params })
|
||||||
|
return response.data
|
||||||
|
} catch (error: any) {
|
||||||
|
console.error('Games category API error:', error)
|
||||||
|
// Return fallback data if API fails
|
||||||
|
return {
|
||||||
|
success: false,
|
||||||
|
data: {
|
||||||
|
category: category,
|
||||||
|
games: [],
|
||||||
|
count: 0
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
list: async (params?: {
|
||||||
|
page?: number
|
||||||
|
per_page?: number
|
||||||
|
genre?: string
|
||||||
|
year?: number
|
||||||
|
search?: string
|
||||||
|
platform?: string
|
||||||
|
developer?: string
|
||||||
|
completion_status?: string
|
||||||
|
source_name?: string
|
||||||
|
rating?: string
|
||||||
|
sort?: string
|
||||||
|
order?: string
|
||||||
|
}): Promise<LocalPaginatedResponse<any>> => {
|
||||||
|
try {
|
||||||
|
const response = await api.get('/games', { params })
|
||||||
|
return response.data.data
|
||||||
|
} catch (error: any) {
|
||||||
|
console.error('Games API error:', error)
|
||||||
|
// Return fallback data if API fails
|
||||||
|
return {
|
||||||
|
items: [],
|
||||||
|
pagination: {
|
||||||
|
total: 0,
|
||||||
|
per_page: 20,
|
||||||
|
current_page: 1,
|
||||||
|
last_page: 1
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
get: async (id: number): Promise<any> => {
|
||||||
|
try {
|
||||||
|
const response = await api.get(`/games/${id}`)
|
||||||
|
return response.data.data
|
||||||
|
} catch (error: any) {
|
||||||
|
console.error('Game API error:', error)
|
||||||
|
// Return fallback data if API fails
|
||||||
|
return {
|
||||||
|
id: id,
|
||||||
|
title: 'Game Not Found',
|
||||||
|
overview: 'Unable to load game details. Please try again later.',
|
||||||
|
release_date: '2023-01-01',
|
||||||
|
rating: 0,
|
||||||
|
poster_url: null,
|
||||||
|
backdrop_url: null,
|
||||||
|
watched: false,
|
||||||
|
source_name: 'Unknown'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
create: async (data: any): Promise<any> => {
|
||||||
|
const response = await api.post('/games', data)
|
||||||
|
return response.data.data
|
||||||
|
},
|
||||||
|
|
||||||
|
update: async (id: number, data: any): Promise<any> => {
|
||||||
|
const response = await api.put(`/games/${id}`, data)
|
||||||
|
return response.data.data
|
||||||
|
},
|
||||||
|
|
||||||
|
delete: async (id: number): Promise<void> => {
|
||||||
|
await api.delete(`/games/${id}`)
|
||||||
|
},
|
||||||
|
|
||||||
|
getGrouped: async (params?: {
|
||||||
|
page?: number
|
||||||
|
per_page?: number
|
||||||
|
search?: string
|
||||||
|
genres?: string[]
|
||||||
|
platforms?: string[]
|
||||||
|
features?: string[]
|
||||||
|
playtime_filter?: string
|
||||||
|
sort?: string
|
||||||
|
}): Promise<LocalPaginatedResponse<any>> => {
|
||||||
|
try {
|
||||||
|
const response = await api.get('/games/grouped', { params })
|
||||||
|
return response.data.data
|
||||||
|
} catch (error: any) {
|
||||||
|
console.error('Grouped games API error:', error)
|
||||||
|
// Return fallback data if API fails
|
||||||
|
return {
|
||||||
|
items: [],
|
||||||
|
pagination: {
|
||||||
|
total: 0,
|
||||||
|
per_page: 20,
|
||||||
|
current_page: 1,
|
||||||
|
last_page: 1
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
// Search API
|
||||||
|
export const searchApi = {
|
||||||
|
search: async (params: {
|
||||||
|
q: string
|
||||||
|
type?: 'all' | 'movie' | 'tvshow' | 'game' | 'music' | 'actors'
|
||||||
|
page?: number
|
||||||
|
per_page?: number
|
||||||
|
}): Promise<SearchResult> => {
|
||||||
|
const response = await api.get('/search', { params })
|
||||||
|
return response.data.data
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
// Dashboard API (for stats and recent activity)
|
||||||
|
export const dashboardApi = {
|
||||||
|
getStats: async (): Promise<any> => {
|
||||||
|
try {
|
||||||
|
const response = await api.get('/dashboard/stats')
|
||||||
|
return response.data.data
|
||||||
|
} catch (error: any) {
|
||||||
|
console.error('Dashboard stats API error:', error)
|
||||||
|
// Return fallback stats if API fails
|
||||||
|
return [
|
||||||
|
{ name: 'Total Movies', value: '1,234', icon: 'FilmIcon', color: 'bg-blue-500', href: '/movies' },
|
||||||
|
{ name: 'TV Shows', value: '456', icon: 'TvIcon', color: 'bg-purple-500', href: '/tvshows' },
|
||||||
|
{ name: 'Games', value: '789', icon: 'GamepadIcon', color: 'bg-green-500', href: '/games' },
|
||||||
|
{ name: 'Music Albums', value: '321', icon: 'MusicalNoteIcon', color: 'bg-pink-500', href: '/music' },
|
||||||
|
{ name: 'Adult Videos', value: '234', icon: 'LockClosedIcon', color: 'bg-red-500', href: '/adult' },
|
||||||
|
{ name: 'Actors', value: '567', icon: 'UserIcon', color: 'bg-indigo-500', href: '/actors' },
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
getRecentActivity: async (): Promise<any[]> => {
|
||||||
|
try {
|
||||||
|
const response = await api.get('/dashboard/activity')
|
||||||
|
return response.data.data
|
||||||
|
} catch (error: any) {
|
||||||
|
console.error('Recent activity API error:', error)
|
||||||
|
// Return fallback activity if API fails
|
||||||
|
return [
|
||||||
|
{ id: 1, action: 'Added movie', item: 'Inception', time: '2 hours ago', type: 'movie' },
|
||||||
|
{ id: 2, action: 'Watched', item: 'The Matrix', time: '4 hours ago', type: 'movie' },
|
||||||
|
{ id: 3, action: 'Added game', item: 'The Legend of Zelda', time: '6 hours ago', type: 'game' },
|
||||||
|
{ id: 4, action: 'Added album', item: 'Dark Side of the Moon', time: '1 day ago', type: 'music' },
|
||||||
|
{ id: 5, action: 'Added TV show', item: 'Breaking Bad', time: '2 days ago', type: 'tvshow' },
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
// Generic API for status and health checks
|
||||||
|
export const systemApi = {
|
||||||
|
getStatus: async (): Promise<{ status: string; timestamp: number; version: string }> => {
|
||||||
|
const response = await api.get('/status')
|
||||||
|
return response.data
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
// Adult content API
|
||||||
|
export const adultApi = {
|
||||||
|
list: async (params?: {
|
||||||
|
page?: number
|
||||||
|
per_page?: number
|
||||||
|
genre?: string
|
||||||
|
year?: number
|
||||||
|
search?: string
|
||||||
|
source?: string
|
||||||
|
}): Promise<PaginatedResponse<any>> => {
|
||||||
|
try {
|
||||||
|
// Convert source to sources for backend compatibility
|
||||||
|
const apiParams: any = { ...params }
|
||||||
|
if (params?.source) {
|
||||||
|
apiParams.sources = params.source
|
||||||
|
delete apiParams.source
|
||||||
|
}
|
||||||
|
const response = await api.get('/adult', { params: apiParams })
|
||||||
|
|
||||||
|
// Handle the wrapped API response structure
|
||||||
|
if (response.data?.success && response.data?.data) {
|
||||||
|
return response.data.data
|
||||||
|
}
|
||||||
|
|
||||||
|
return response.data
|
||||||
|
} catch (error: any) {
|
||||||
|
console.error('Adult API error:', error)
|
||||||
|
// Return fallback data if API fails
|
||||||
|
return {
|
||||||
|
items: [],
|
||||||
|
pagination: {
|
||||||
|
total: 0,
|
||||||
|
per_page: 20,
|
||||||
|
current_page: 1,
|
||||||
|
last_page: 1
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
get: async (id: number): Promise<any> => {
|
||||||
|
try {
|
||||||
|
const response = await api.get(`/adult/${id}`)
|
||||||
|
return response.data.data
|
||||||
|
} catch (error: any) {
|
||||||
|
console.error('Adult API error:', error)
|
||||||
|
// Return fallback data if API fails
|
||||||
|
return {
|
||||||
|
id: id,
|
||||||
|
title: 'Adult Content Not Found',
|
||||||
|
overview: 'Unable to load content details. Please try again later.',
|
||||||
|
release_date: '2023-01-01',
|
||||||
|
rating: 0,
|
||||||
|
poster_url: null,
|
||||||
|
backdrop_url: null,
|
||||||
|
watched: false,
|
||||||
|
source_name: 'Unknown',
|
||||||
|
actors: []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
create: async (data: any): Promise<any> => {
|
||||||
|
const response = await api.post('/adult', data)
|
||||||
|
return response.data
|
||||||
|
},
|
||||||
|
|
||||||
|
update: async (id: number, data: any): Promise<any> => {
|
||||||
|
const response = await api.put(`/adult/${id}`, data)
|
||||||
|
return response.data
|
||||||
|
},
|
||||||
|
|
||||||
|
delete: async (id: number): Promise<void> => {
|
||||||
|
await api.delete(`/adult/${id}`)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Actors API
|
||||||
|
export const actorsApi = {
|
||||||
|
list: async (params?: {
|
||||||
|
page?: number
|
||||||
|
per_page?: number
|
||||||
|
search?: string
|
||||||
|
gender?: string
|
||||||
|
adult?: boolean
|
||||||
|
sort?: string
|
||||||
|
order?: string
|
||||||
|
}): Promise<PaginatedResponse<any>> => {
|
||||||
|
try {
|
||||||
|
const response = await api.get('/actors', { params })
|
||||||
|
return response.data.data
|
||||||
|
} catch (error: any) {
|
||||||
|
console.error('Actors API error:', error)
|
||||||
|
// Return fallback data if API fails
|
||||||
|
return {
|
||||||
|
items: [],
|
||||||
|
pagination: {
|
||||||
|
total: 0,
|
||||||
|
per_page: 20,
|
||||||
|
current_page: 1,
|
||||||
|
last_page: 1
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
get: async (id: number): Promise<any> => {
|
||||||
|
try {
|
||||||
|
const response = await api.get(`/actors/${id}`)
|
||||||
|
return response.data.data
|
||||||
|
} catch (error: any) {
|
||||||
|
console.error('Actors API error:', error)
|
||||||
|
// Return fallback data if API fails
|
||||||
|
return {
|
||||||
|
id: id,
|
||||||
|
name: 'Actor Not Found',
|
||||||
|
thumbnail_path: null,
|
||||||
|
metadata: {},
|
||||||
|
movies: [],
|
||||||
|
tvshows: [],
|
||||||
|
adult_videos: []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
create: async (data: any): Promise<any> => {
|
||||||
|
const response = await api.post('/actors', data)
|
||||||
|
return response.data
|
||||||
|
},
|
||||||
|
|
||||||
|
update: async (id: number, data: any): Promise<any> => {
|
||||||
|
const response = await api.put(`/actors/${id}`, data)
|
||||||
|
return response.data
|
||||||
|
},
|
||||||
|
|
||||||
|
delete: async (id: number): Promise<void> => {
|
||||||
|
await api.delete(`/actors/${id}`)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default api
|
||||||
82
src/types/index.ts
Normal file
82
src/types/index.ts
Normal file
@@ -0,0 +1,82 @@
|
|||||||
|
export interface MediaItem {
|
||||||
|
id: string
|
||||||
|
title: string
|
||||||
|
poster_url?: string
|
||||||
|
backdrop_url?: string
|
||||||
|
release_date?: string
|
||||||
|
rating?: number
|
||||||
|
source_name: string
|
||||||
|
created_at: string
|
||||||
|
updated_at: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface Movie extends MediaItem {
|
||||||
|
runtime_minutes?: number
|
||||||
|
genres?: string[]
|
||||||
|
overview?: string
|
||||||
|
watched?: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface TVShow extends MediaItem {
|
||||||
|
episodes?: number
|
||||||
|
seasons?: number
|
||||||
|
overview?: string
|
||||||
|
watched?: boolean
|
||||||
|
genres?: string[]
|
||||||
|
first_air_date?: string
|
||||||
|
last_air_date?: string
|
||||||
|
status?: string
|
||||||
|
networks?: string[]
|
||||||
|
production_companies?: string[]
|
||||||
|
spoken_languages?: string[]
|
||||||
|
episode_run_time?: number[]
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface Game extends MediaItem {
|
||||||
|
platforms?: string[]
|
||||||
|
genres?: string[]
|
||||||
|
overview?: string
|
||||||
|
max_completion?: number
|
||||||
|
playtime_hours?: number
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface MusicAlbum extends MediaItem {
|
||||||
|
artist?: string
|
||||||
|
tracks?: number
|
||||||
|
year?: number
|
||||||
|
genre?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface AdultVideo extends MediaItem {
|
||||||
|
studio?: string
|
||||||
|
duration?: number
|
||||||
|
performers?: string[]
|
||||||
|
tags?: string[]
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface Actor {
|
||||||
|
id: string
|
||||||
|
name: string
|
||||||
|
image_url?: string
|
||||||
|
bio?: string
|
||||||
|
birth_date?: string
|
||||||
|
nationality?: string
|
||||||
|
videos_count?: number
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface SearchParams {
|
||||||
|
q?: string
|
||||||
|
type?: 'all' | 'movies' | 'tvshows' | 'games' | 'music' | 'adult' | 'actors'
|
||||||
|
page?: number
|
||||||
|
limit?: number
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface PaginatedResponse<T> {
|
||||||
|
data: T[]
|
||||||
|
total: number
|
||||||
|
page: number
|
||||||
|
limit: number
|
||||||
|
totalPages: number
|
||||||
|
}
|
||||||
|
|
||||||
|
export type ViewMode = 'grid' | 'list' | 'covers'
|
||||||
47
tailwind.config.js
Normal file
47
tailwind.config.js
Normal file
@@ -0,0 +1,47 @@
|
|||||||
|
/** @type {import('tailwindcss').Config} */
|
||||||
|
export default {
|
||||||
|
content: [
|
||||||
|
"./index.html",
|
||||||
|
"./src/**/*.{js,ts,jsx,tsx}",
|
||||||
|
],
|
||||||
|
darkMode: 'class', // Enable class-based dark mode
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
colors: {
|
||||||
|
slate: {
|
||||||
|
50: '#f8fafc',
|
||||||
|
100: '#f1f5f9',
|
||||||
|
200: '#e2e8f0',
|
||||||
|
300: '#cbd5e1',
|
||||||
|
400: '#94a3b8',
|
||||||
|
500: '#64748b',
|
||||||
|
600: '#475569',
|
||||||
|
700: '#334155',
|
||||||
|
800: '#1e293b',
|
||||||
|
900: '#0f172a',
|
||||||
|
950: '#020617',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
animation: {
|
||||||
|
'fade-in': 'fadeIn 0.5s ease-in-out',
|
||||||
|
'slide-up': 'slideUp 0.3s ease-out',
|
||||||
|
'slide-down': 'slideDown 0.3s ease-out',
|
||||||
|
},
|
||||||
|
keyframes: {
|
||||||
|
fadeIn: {
|
||||||
|
'0%': { opacity: '0' },
|
||||||
|
'100%': { opacity: '1' },
|
||||||
|
},
|
||||||
|
slideUp: {
|
||||||
|
'0%': { transform: 'translateY(10px)', opacity: '0' },
|
||||||
|
'100%': { transform: 'translateY(0)', opacity: '1' },
|
||||||
|
},
|
||||||
|
slideDown: {
|
||||||
|
'0%': { transform: 'translateY(-10px)', opacity: '0' },
|
||||||
|
'100%': { transform: 'translateY(0)', opacity: '1' },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
plugins: [],
|
||||||
|
}
|
||||||
36
tsconfig.json
Normal file
36
tsconfig.json
Normal file
@@ -0,0 +1,36 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "ES2020",
|
||||||
|
"useDefineForClassFields": true,
|
||||||
|
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||||
|
"module": "ESNext",
|
||||||
|
"skipLibCheck": true,
|
||||||
|
|
||||||
|
/* Bundler mode */
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowImportingTsExtensions": true,
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"noEmit": true,
|
||||||
|
"jsx": "react-jsx",
|
||||||
|
|
||||||
|
/* Linting */
|
||||||
|
"strict": true,
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"noFallthroughCasesInSwitch": true,
|
||||||
|
|
||||||
|
/* Path mapping */
|
||||||
|
"baseUrl": ".",
|
||||||
|
"paths": {
|
||||||
|
"@/*": ["src/*"],
|
||||||
|
"@/components/*": ["src/components/*"],
|
||||||
|
"@/pages/*": ["src/pages/*"],
|
||||||
|
"@/hooks/*": ["src/hooks/*"],
|
||||||
|
"@/utils/*": ["src/utils/*"],
|
||||||
|
"@/types/*": ["src/types/*"]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"include": ["src"],
|
||||||
|
"references": [{ "path": "./tsconfig.node.json" }]
|
||||||
|
}
|
||||||
10
tsconfig.node.json
Normal file
10
tsconfig.node.json
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"composite": true,
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"module": "ESNext",
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowSyntheticDefaultImports": true
|
||||||
|
},
|
||||||
|
"include": ["vite.config.ts"]
|
||||||
|
}
|
||||||
21
vite.config.ts
Normal file
21
vite.config.ts
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import react from '@vitejs/plugin-react'
|
||||||
|
|
||||||
|
// https://vitejs.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [react()],
|
||||||
|
server: {
|
||||||
|
port: 3000,
|
||||||
|
proxy: {
|
||||||
|
'/api': {
|
||||||
|
target: 'http://localhost:8080',
|
||||||
|
changeOrigin: true,
|
||||||
|
rewrite: (path) => path.replace(/^\/api/, '')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
build: {
|
||||||
|
outDir: '../public/react',
|
||||||
|
emptyOutDir: true
|
||||||
|
}
|
||||||
|
})
|
||||||
Reference in New Issue
Block a user