ESH-Media

+ + {/* Search bar */} +

+ setQuery(e.target.value)} + onKeyDown={e => e.key === 'Enter' && !loading && handleSearch()} + autoFocus + /> + {query && ( + + )} + +

+ + {/* Filters (only in discover mode with TMDB key) */} + {apiKey && !selected && ( +

+ {/* Type toggle */} +

+ + +

+ + {/* Sort */} + {!isSearchMode && ( + handleFilterChange(() => setMinRating(v))} + options={RATINGS.map(r => ({ value: r.value, label: r.label === 'Любой' ? 'Рейтинг' : r.label }))} + placeholder="Рейтинг" + /> + )} + + {/* Year */} + handleFilterChange(() => setCountry(v))} options={COUNTRIES} placeholder="Страна" /> + )} +

+ + {/* Genres */} + {!isSearchMode && ( +

+ + {genres.map(g => ( + + ))} +

+ )} +

+ )} + + {message &&

{message}

} + + {/* Detail view */} + {selected ? ( +

+ {selected.poster && ( +

+ )} +

+ +

+ {selected.poster + ?

+ :

{selected.title.charAt(0)}

+ } +

{selected.title}

+ {selected.originalTitle !== selected.title && ( +

{selected.originalTitle}

+ )} +

+ {selected.year && {selected.year}} + {selected.mediaType === 'tv' && Сериал} + {selected.rating && {selected.rating}} +

+ {selected.overview &&

{selected.overview}

} +

+ +

+ {sitesLoading &&

Ищем на {sites.length} сайтах...

} + {!sitesLoading && !siteResults.length && !message &&

Поиск...

} + {siteResults.length > 0 &&

Найдено на сайтах

} + {siteResults.map((r, i) => ( +

onOpenUrl(r.title, r.url)}> + {r.source} + {r.title} +

+ {onBookmark && ( + + )} + Открыть → +

+ ))} +

+ ) : ( + <> + {tmdbLoading &&

{isSearchMode ? 'Поиск...' : 'Загрузка...'}

} + + {tmdbResults.length > 0 && ( + <> +

+ {tmdbResults.map((movie, i) => )} +

+ {!isSearchMode && page < totalPages && ( + + )} + + )} + + {/* Direct site results (no TMDB key) */} + {siteResults.length > 0 && ( +

+ {siteResults.map((r, i) => ( +

onOpenUrl(r.title, r.url)}> +

+ {r.poster + ? {r.title}

{ (e.target as HTMLImageElement).style.display = 'none'; (e.target as HTMLImageElement).nextElementSibling?.removeAttribute('style') }} /> + : null + } +

{r.title.charAt(0).toUpperCase()}

+ {r.title} + {r.year && {r.year}} + {r.source} +

+ ))} +

+ )} + + )} +

+ ) +} + +export default MovieSearch diff --git a/src/components/Settings.tsx b/src/components/Settings.tsx new file mode 100644 index 0000000..bd4ba3c --- /dev/null +++ b/src/components/Settings.tsx @@ -0,0 +1,292 @@ +import React, { useState, useEffect } from 'react' + +export interface AppEntry { + name: string + imageUrl: string + url: string + useProxy: boolean +} + +export interface Bookmark { + title: string + url: string + poster?: string + source?: string +} + +export interface MovieSite { + domain: string + type: 'dle' | 'hdrezka' | 'filmix' + enabled: boolean +} + +interface ProxyConfig { + host: string + port: string +} + +interface SettingsData { + apps: AppEntry[] + proxy: ProxyConfig + movieSites: MovieSite[] + tmdbApiKey: string + bookmarks: Bookmark[] +} + +interface SettingsProps { + onClose: () => void + onAppsChange: (apps: AppEntry[]) => void +} + +const DEFAULT_SETTINGS: SettingsData = { apps: [], proxy: { host: '127.0.0.1', port: '7890' }, movieSites: [], tmdbApiKey: '', bookmarks: [] } + +function guessMovieSiteType(domain: string): MovieSite['type'] { + if (/rezka/.test(domain)) return 'hdrezka' + if (/filmix/.test(domain)) return 'filmix' + return 'dle' +} + +function saveSettings(data: SettingsData) { + window.electron?.writeConfig(data) +} + +const Settings: React.FC = ({ onClose, onAppsChange }) => { + const [settings, setSettings] = useState(DEFAULT_SETTINGS) + const [newApp, setNewApp] = useState({ name: '', imageUrl: '', url: '', useProxy: false }) + + useEffect(() => { + window.electron?.readConfig().then((cfg: SettingsData | null) => { + if (cfg?.apps) setSettings(cfg) + }) + }, []) + + const updateProxy = (field: keyof ProxyConfig, value: string) => { + const updated = { ...settings, proxy: { ...settings.proxy, [field]: value } } + setSettings(updated) + saveSettings(updated) + window.electron?.setProxy(updated.proxy.host, updated.proxy.port) + } + + const toggleAppProxy = (index: number) => { + const apps = settings.apps.map((app, i) => + i === index ? { ...app, useProxy: !app.useProxy } : app + ) + const updated = { ...settings, apps } + setSettings(updated) + saveSettings(updated) + onAppsChange(apps) + } + + const addApp = () => { + if (!newApp.name || !newApp.url) return + const apps = [...settings.apps, newApp] + const updated = { ...settings, apps } + setSettings(updated) + saveSettings(updated) + onAppsChange(apps) + setNewApp({ name: '', imageUrl: '', url: '', useProxy: false }) + } + + const removeApp = (index: number) => { + const apps = settings.apps.filter((_, i) => i !== index) + const updated = { ...settings, apps } + setSettings(updated) + saveSettings(updated) + onAppsChange(apps) + } + + const [newSite, setNewSite] = useState({ domain: '', type: 'dle', enabled: true }) + + const addMovieSite = () => { + if (!newSite.domain.trim()) return + let domain = newSite.domain.trim() + if (domain.startsWith('https://')) domain = domain.slice(8) + else if (domain.startsWith('http://')) domain = domain.slice(7) + if (domain.endsWith('/')) domain = domain.slice(0, -1) + const movieSites = [...(settings.movieSites ?? []), { ...newSite, domain }] + const updated = { ...settings, movieSites } + setSettings(updated) + saveSettings(updated) + setNewSite({ domain: '', type: 'dle', enabled: true }) + } + + const removeMovieSite = (index: number) => { + const movieSites = (settings.movieSites ?? []).filter((_, i) => i !== index) + const updated = { ...settings, movieSites } + setSettings(updated) + saveSettings(updated) + } + + const toggleMovieSite = (index: number) => { + const movieSites = (settings.movieSites ?? []).map((s, i) => + i === index ? { ...s, enabled: !s.enabled } : s + ) + const updated = { ...settings, movieSites } + setSettings(updated) + saveSettings(updated) + } + + return ( +

e.stopPropagation()}> +

Настройки

+ +

Прокси

+ updateProxy('host', e.target.value)} + /> + : + updateProxy('port', e.target.value)} + /> +

+ http_proxy=http://{settings.proxy.host}:{settings.proxy.port} + https_proxy=http://{settings.proxy.host}:{settings.proxy.port} + socks5://{settings.proxy.host}:{settings.proxy.port} +

+ Прокси применяется к каждому сайту индивидуально — переключатель рядом с каждым приложением. +

+ +

Приложения

+ {settings.apps.map((app, i) => ( +

+ {app.imageUrl && ( +

+ )} +

+ {app.name} + {app.url} +

+ + Прокси +

toggleAppProxy(i)} + /> + + +

+ ))} + {settings.apps.length === 0 && ( +

Нет приложений. Добавьте ниже.

+ )} +

+ +

Добавить приложение

+ setNewApp({ ...newApp, name: e.target.value })} + /> + setNewApp({ ...newApp, url: e.target.value })} + /> + setNewApp({ ...newApp, imageUrl: e.target.value })} + /> + + Использовать прокси +

setNewApp({ ...newApp, useProxy: !newApp.useProxy })} + /> + + +

+ +

Поиск фильмов

TMDB API ключ

+ { + const updated = { ...settings, tmdbApiKey: e.target.value } + setSettings(updated) + saveSettings(updated) + }} + /> +

Нужен для постеров и метаданных. Без ключа поиск работает напрямую по сайтам.

Сайты

Тип определяется автоматически. Поддерживаются: kinogo, lordfilm, gidonline, hdrezka, filmix и их зеркала. Домен без https://

+ {(settings.movieSites ?? []).map((site, i) => ( +

+ {site.domain} + {site.type} +

+ + Вкл +

toggleMovieSite(i)} /> + + +

+ ))} + {!(settings.movieSites ?? []).length && ( +

Нет сайтов. Добавьте ниже.

+ )} +

Добавить сайт

+ { + const domain = e.target.value + setNewSite({ ...newSite, domain, type: guessMovieSiteType(domain) }) + }} + /> + + +

+ ) +} + +export default Settings diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx new file mode 100644 index 0000000..5b34149 --- /dev/null +++ b/src/components/Sidebar.tsx @@ -0,0 +1,72 @@ +import React, { useState, useRef, useEffect } from 'react' +import SidebarElement, { SidebarElementProps } from './SidebarElement' + +interface SidebarProps { + openedApps: SidebarElementProps[] + activeApp: string + setActiveApp: (name: string) => void +} + +const Sidebar: React.FC = ({ openedApps, activeApp, setActiveApp }) => { + const [expanded, setExpanded] = useState(false) + const timeoutRef = useRef | null>(null) + + const openedAppsCount = openedApps.length + useEffect(() => { + if (openedAppsCount === 0 && activeApp !== 'movie-search') setActiveApp('home') + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [openedAppsCount, setActiveApp]) + + const handleMouseEnter = () => { + if (timeoutRef.current) clearTimeout(timeoutRef.current) + timeoutRef.current = setTimeout(() => { + setExpanded(true) + window.electron?.adjustView(true) + }, 150) + } + + const handleMouseLeave = () => { + if (timeoutRef.current) clearTimeout(timeoutRef.current) + timeoutRef.current = setTimeout(() => { + setExpanded(false) + window.electron?.adjustView(false) + }, 150) + } + + const goHome = () => { + window.electron?.hideView() + setActiveApp('home') + } + + return ( +

+ + Домой +

+ + {openedApps.map(app => ( + + ))} +

+ ) +} + +export default Sidebar diff --git a/src/components/SidebarElement.tsx b/src/components/SidebarElement.tsx new file mode 100644 index 0000000..1afa94b --- /dev/null +++ b/src/components/SidebarElement.tsx @@ -0,0 +1,26 @@ +import React from 'react' + +export interface SidebarElementProps { + name: string + imageUrl: string + url: string + isActive: boolean + onClick: () => void +} + +const SidebarElement: React.FC = ({ name, imageUrl, isActive, onClick }) => { + return ( +

+ {imageUrl ? ( + {name}

+ ) : ( +

+ {name.charAt(0).toUpperCase()} +

+ )} + {name} +

+ ) +} + +export default SidebarElement diff --git a/src/main.tsx b/src/main.tsx new file mode 100644 index 0000000..0246336 --- /dev/null +++ b/src/main.tsx @@ -0,0 +1,36 @@ +import React from 'react' +import ReactDOM from 'react-dom/client' +import App from './App' + +declare global { + interface Window { + electron?: { + createView: (name: string, url: string, imageUrl: string, zoom: number, useProxy: boolean) => void + confirm: (text: string, funcName: string) => void + removeView: (name?: string) => void + hideView: () => void + showView: (name: string) => void + adjustView: (expanded: boolean) => void + on: (channel: string, func: (...args: any[]) => void) => () => void + getCurrentPage: () => Promise<{ name: string; url: string; imageUrl: string } | null> + handleAction: (action: string) => void + setProxy: (host: string, port: string) => void + expandWithHeader: () => void + collapseWithHeader: () => void + backwardPage: () => void + forwardPage: () => void + refreshPage: () => void + readConfig: () => Promise + writeConfig: (data: any) => void + searchMovies: (query: string, sites: any[]) => Promise + searchTmdb: (query: string, apiKey: string) => Promise<{ results: any[]; error?: string }> + discoverTmdb: (params: any) => Promise<{ results: any[]; totalPages: number; error?: string }> + } + } +} + +ReactDOM.createRoot(document.getElementById('root')!).render( + + + +) diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx new file mode 100644 index 0000000..98c3d2c --- /dev/null +++ b/src/pages/HomePage.tsx @@ -0,0 +1,102 @@ +import React, { useState, useEffect, useRef } from 'react' +import Header from '../components/Header' +import Sidebar from '../components/Sidebar' +import AppList from '../components/AppList' +import MovieSearch from '../components/MovieSearch' +import '../styles/main.css' +import { AppEntry, Bookmark } from '../components/Settings' + +interface OpenedApp { + name: string + imageUrl: string + url: string +} + +const HomePage: React.FC = () => { + const [openedApps, setOpenedApps] = useState([]) + const [activeApp, setActiveApp] = useState('home') + const [appCardList, setAppCardList] = useState([]) + const [movieQuery, setMovieQuery] = useState(null) + const [bookmarks, setBookmarks] = useState([]) + const configRef = useRef({}) + + useEffect(() => { + if (!window.electron) return + window.electron.readConfig().then((cfg: any) => { + configRef.current = cfg ?? {} + if (cfg?.apps) setAppCardList(cfg.apps) + if (cfg?.bookmarks) setBookmarks(cfg.bookmarks) + if (cfg?.proxy?.host && cfg?.proxy?.port) { + window.electron!.setProxy(cfg.proxy.host, cfg.proxy.port) + } + }) + const offOpenedApps = window.electron.on('update-opened-apps', (apps: OpenedApp[], activeName: string) => { + setOpenedApps(apps) + setActiveApp(activeName ?? 'home') + }) + const offAlert = window.electron.on('alert', (text: string) => alert(text)) + return () => { offOpenedApps(); offAlert() } + }, []) + + const handleSidebarAppClick = (name: string) => { + setActiveApp(name) + window.electron?.showView(name) + } + + const handleMovieSearch = (query: string) => { + window.electron?.hideView() + setMovieQuery(query) + setActiveApp('movie-search') + } + + const handleMovieSearchOpen = (name: string, url: string) => { + window.electron?.createView(name, url, '', 1.0, resolveUseProxy(url)) + setActiveApp(name) + } + + const handleBookmarkAdd = (title: string, url: string, poster: string, source: string) => { + const updated = [...bookmarks, { title, url, poster, source }] + setBookmarks(updated) + configRef.current = { ...configRef.current, bookmarks: updated } + window.electron?.writeConfig(configRef.current) + } + + const handleBookmarkRemove = (index: number) => { + const updated = bookmarks.filter((_, i) => i !== index) + setBookmarks(updated) + configRef.current = { ...configRef.current, bookmarks: updated } + window.electron?.writeConfig(configRef.current) + } + + const resolveUseProxy = (url: string) => { + try { + const host = new URL(url).hostname + const match = appCardList.find(a => { try { return new URL(a.url).hostname === host } catch { return false } }) + return match ? match.useProxy : true + } catch { return true } + } + + const handleBookmarkOpen = (b: Bookmark) => { + window.electron?.createView(b.title, b.url, b.poster || '', 1.0, resolveUseProxy(b.url)) + setActiveApp(b.title) + } + + const sidebarApps = openedApps.map(app => ({ + ...app, + isActive: activeApp === app.name, + onClick: () => handleSidebarAppClick(app.name), + })) + + return ( + <> +

+ + {activeApp === 'movie-search' + ? + : + } + + ) +} + +export default HomePage diff --git a/src/styles/main.css b/src/styles/main.css new file mode 100644 index 0000000..bbfc6c8 --- /dev/null +++ b/src/styles/main.css @@ -0,0 +1,1325 @@ +/* ---- Reset & Base ---- */ +*, *::before, *::after { box-sizing: border-box; } + +:root { + --accent: #E50914; + --accent-dim: rgba(229,9,20,0.15); + --bg: #111; + --bg-card: #1a1a1a; + --bg-hover: #252525; + --bg-elevated: #222; + --text: #fff; + --text-sub: #aaa; + --text-dim: #555; + --border: rgba(255,255,255,0.07); + --radius: 6px; + --header-h: 50px; +} + +body { + margin: 0; + padding: 0; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; + background: var(--bg); + color: var(--text); + overflow: hidden; + user-select: none; +} + +/* ---- Header ---- */ +.header { + position: fixed; + top: 0; left: 0; right: 0; + z-index: 200; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 16px; + transition: height 0.3s ease; + overflow: hidden; + background: rgba(0,0,0,0.92); + backdrop-filter: blur(16px); + -webkit-backdrop-filter: blur(16px); + border-bottom: 1px solid var(--border); +} + +.header.expanded { height: var(--header-h); } +.header.collapsed { height: 2px; background: #000; border: none; } + +.header-left, +.header-center, +.header-right { + display: flex; + align-items: center; + gap: 4px; +} + +.header-btn { + display: flex; + align-items: center; + justify-content: center; + width: 36px; + height: 36px; + border: none; + background: transparent; + color: #999; + border-radius: var(--radius); + cursor: pointer; + transition: background 0.15s, color 0.15s; + padding: 0; +} + +.header-btn:hover { background: rgba(255,255,255,0.08); color: #fff; } + +.nav-btn { color: #ccc; } +.nav-btn.disabled { color: #383838; cursor: default; } +.nav-btn.disabled:hover { background: transparent; color: #383838; } + +.header-search { + display: flex; + align-items: center; + gap: 6px; + width: 360px; +} + +.header-search-input { + flex: 1; + background: rgba(255,255,255,0.06); + border: 1px solid rgba(255,255,255,0.1); + border-radius: var(--radius); + color: #fff; + padding: 7px 12px; + font-size: 13px; + outline: none; + transition: border-color 0.2s, background 0.2s; +} + +.header-search-input::placeholder { color: #666; } +.header-search-input:focus { + border-color: rgba(255,255,255,0.25); + background: rgba(255,255,255,0.09); +} + +.header-search-btn { + display: flex; + align-items: center; + justify-content: center; + width: 32px; + height: 32px; + border: none; + background: rgba(255,255,255,0.07); + color: #888; + border-radius: var(--radius); + cursor: pointer; + padding: 0; + transition: background 0.15s, color 0.15s; + flex-shrink: 0; +} + +.header-search-btn:hover { background: rgba(255,255,255,0.13); color: #fff; } + +.header-close-btn { + color: #888; +} + +.header-close-btn:hover { + background: rgba(220, 50, 50, 0.15) !important; + color: #e05555 !important; +} + +/* ---- Sidebar ---- */ +.sidebar { + position: fixed; + left: 0; + top: var(--header-h); + width: 75px; + height: calc(100vh - var(--header-h)); + background: rgba(0,0,0,0.88); + backdrop-filter: blur(16px); + -webkit-backdrop-filter: blur(16px); + z-index: 150; + padding-top: 6px; + transition: width 0.22s cubic-bezier(0.4,0,0.2,1); + overflow: hidden; + border-right: 1px solid var(--border); +} + +.sidebar.expanded { width: 200px; } + +.sidebar-item { + display: flex; + align-items: center; + gap: 13px; + padding: 9px 14px; + cursor: pointer; + transition: background 0.15s; + white-space: nowrap; + position: relative; +} + +.sidebar-item::before { + content: ''; + position: absolute; + left: 0; top: 6px; bottom: 6px; + width: 3px; + background: var(--accent); + border-radius: 0 2px 2px 0; + opacity: 0; + transition: opacity 0.15s; +} + +.sidebar-item:hover { background: rgba(255,255,255,0.06); } +.sidebar-item.active { background: rgba(255,255,255,0.09); } +.sidebar-item.active::before { opacity: 1; } + +.sidebar-icon { + width: 26px; + height: 26px; + flex-shrink: 0; + color: #666; + transition: color 0.15s; +} + +.sidebar-item:hover .sidebar-icon, +.sidebar-item.active .sidebar-icon { color: #ddd; } + +.sidebar-app-icon { + width: 34px; + height: 34px; + border-radius: 8px; + object-fit: contain; + flex-shrink: 0; +} + +.sidebar-app-icon-placeholder { + width: 34px; + height: 34px; + border-radius: 8px; + background: #2a2a2a; + display: flex; + align-items: center; + justify-content: center; + font-size: 15px; + font-weight: 700; + color: #bbb; + flex-shrink: 0; +} + +.sidebar-item span { + font-size: 13px; + color: #ccc; + overflow: hidden; + text-overflow: ellipsis; + font-weight: 500; +} + +.sidebar.collapsed .sidebar-item span { display: none; } + +/* ---- App List ---- */ +.app-list { + position: fixed; + top: var(--header-h); + left: 75px; + right: 0; + bottom: 0; + padding: 28px 32px; + overflow-y: auto; + display: flex; + flex-wrap: wrap; + align-content: flex-start; + gap: 14px; + scrollbar-width: thin; + scrollbar-color: #2a2a2a transparent; +} + +.app-list::-webkit-scrollbar { width: 6px; } +.app-list::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 3px; } + +.app-list-empty { + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100%; + color: #444; + font-size: 14px; + text-align: center; + gap: 6px; +} + +/* ---- App Card ---- */ +.app-card { + width: 155px; + background: var(--bg-card); + border-radius: 10px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + cursor: pointer; + transition: transform 0.22s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.22s ease, background 0.15s; + gap: 10px; + padding: 20px 14px 16px; + border: 1px solid var(--border); +} + +.app-card:hover { + transform: scale(1.07) translateY(-2px); + background: var(--bg-hover); + box-shadow: 0 12px 40px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.1); +} + +.app-card img { + width: 76px; + height: 76px; + object-fit: contain; + border-radius: 12px; + transition: transform 0.2s; +} + +.app-card:hover img { transform: scale(1.05); } + +.app-card-icon-placeholder { + width: 76px; + height: 76px; + border-radius: 12px; + background: linear-gradient(135deg, #2a2a2a 0%, #333 100%); + display: flex; + align-items: center; + justify-content: center; + font-size: 32px; + font-weight: 700; + color: #bbb; +} + +.app-card h3 { + margin: 0; + font-size: 12px; + font-weight: 600; + color: #ccc; + text-align: center; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + max-width: 100%; + transition: color 0.15s; +} + +.app-card:hover h3 { color: #fff; } + +/* ---- Settings ---- */ +.settings-overlay { + position: fixed; + inset: 0; + background: rgba(0,0,0,0.82); + backdrop-filter: blur(6px); + -webkit-backdrop-filter: blur(6px); + z-index: 300; + display: flex; + align-items: center; + justify-content: center; + animation: fadeIn 0.15s ease; +} + +@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } +@keyframes slideUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } +@keyframes cardAppear { from { opacity: 0; transform: translateY(14px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } + +.settings-panel { + background: #161616; + border: 1px solid rgba(255,255,255,0.1); + border-radius: 12px; + width: 570px; + max-height: 86vh; + overflow-y: auto; + padding: 28px; + color: #ddd; + animation: slideUp 0.2s ease; + scrollbar-width: thin; + scrollbar-color: #2a2a2a transparent; +} + +.settings-panel::-webkit-scrollbar { width: 4px; } +.settings-panel::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 2px; } + +.settings-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 28px; +} + +.settings-header h2 { + margin: 0; + font-size: 20px; + font-weight: 700; + color: #fff; +} + +.settings-close { + background: none; + border: none; + color: #666; + font-size: 20px; + cursor: pointer; + padding: 4px 8px; + border-radius: 4px; + line-height: 1; + transition: color 0.15s, background 0.15s; +} + +.settings-close:hover { background: rgba(255,255,255,0.07); color: #fff; } + +.settings-section { margin-bottom: 30px; } + +.settings-section h3 { + margin: 0 0 14px; + font-size: 10px; + text-transform: uppercase; + letter-spacing: 0.12em; + color: #555; + font-weight: 600; +} + +.settings-section h4 { + margin: 16px 0 10px; + font-size: 13px; + color: #888; +} + +.proxy-row { + display: flex; + align-items: center; + gap: 8px; + margin-bottom: 12px; +} + +.proxy-colon { color: #555; font-size: 18px; } + +.settings-input { + background: rgba(255,255,255,0.05); + border: 1px solid rgba(255,255,255,0.1); + border-radius: var(--radius); + color: #eee; + padding: 9px 12px; + font-size: 13px; + flex: 1; + outline: none; + transition: border-color 0.2s, background 0.2s; +} + +.settings-input:focus { border-color: rgba(255,255,255,0.28); background: rgba(255,255,255,0.07); } +.proxy-port { flex: 0 0 80px; } + +.proxy-info { + display: flex; + flex-direction: column; + gap: 4px; + background: rgba(0,0,0,0.5); + border: 1px solid rgba(255,255,255,0.05); + border-radius: var(--radius); + padding: 10px 12px; + margin-bottom: 8px; +} + +.proxy-info code { font-size: 12px; color: #7ec8a0; font-family: monospace; } +.proxy-hint { font-size: 12px; color: #555; margin: 6px 0 0; } + +.settings-apps-list { + display: flex; + flex-direction: column; + gap: 6px; + margin-bottom: 8px; +} + +.settings-app-row { + display: flex; + align-items: center; + justify-content: space-between; + background: rgba(255,255,255,0.04); + border: 1px solid var(--border); + border-radius: 8px; + padding: 10px 12px; + gap: 12px; + transition: background 0.15s; +} + +.settings-app-row:hover { background: rgba(255,255,255,0.06); } + +.settings-app-info { + display: flex; + align-items: center; + gap: 10px; + flex: 1; + min-width: 0; +} + +.settings-app-icon { + width: 30px; + height: 30px; + border-radius: 6px; + object-fit: contain; + flex-shrink: 0; +} + +.settings-app-text { + display: flex; + flex-direction: column; + min-width: 0; +} + +.settings-app-name { font-size: 13px; font-weight: 600; color: #eee; } +.settings-app-url { + font-size: 11px; + color: #555; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + max-width: 240px; +} + +.settings-app-actions { + display: flex; + align-items: center; + gap: 12px; + flex-shrink: 0; +} + +.proxy-switch-label { + display: flex; + align-items: center; + gap: 8px; + font-size: 12px; + color: #777; + cursor: pointer; +} + +.proxy-switch { + width: 36px; + height: 20px; + border-radius: 10px; + position: relative; + cursor: pointer; + transition: background 0.2s; + flex-shrink: 0; +} + +.proxy-switch::after { + content: ''; + position: absolute; + width: 14px; + height: 14px; + border-radius: 50%; + background: #fff; + top: 3px; + transition: left 0.2s; +} + +.proxy-switch.off { background: #333; } +.proxy-switch.off::after { left: 3px; } +.proxy-switch.on { background: var(--accent); } +.proxy-switch.on::after { left: 19px; } + +.settings-remove-btn { + background: none; + border: none; + color: #c04040; + font-size: 15px; + cursor: pointer; + padding: 2px 6px; + border-radius: 4px; + line-height: 1; + transition: background 0.15s; +} + +.settings-remove-btn:hover { background: rgba(192,64,64,0.15); } + +.settings-empty { + color: #444; + font-size: 13px; + text-align: center; + padding: 14px; +} + +.add-app-form { + background: rgba(255,255,255,0.03); + border: 1px solid rgba(255,255,255,0.07); + border-radius: 8px; + padding: 16px; + display: flex; + flex-direction: column; + gap: 8px; +} + +.add-proxy-label { margin-top: 4px; } + +.settings-add-btn { + background: var(--accent); + border: none; + border-radius: var(--radius); + color: #fff; + padding: 10px; + font-size: 13px; + font-weight: 600; + cursor: pointer; + margin-top: 4px; + transition: background 0.15s, transform 0.1s; + letter-spacing: 0.03em; +} + +.settings-add-btn:hover { background: #f40612; } +.settings-add-btn:active { transform: scale(0.98); } + +.settings-select { + background: rgba(255,255,255,0.05); + border: 1px solid rgba(255,255,255,0.1); + border-radius: var(--radius); + color: #eee; + padding: 9px 12px; + font-size: 13px; + outline: none; + cursor: pointer; +} + +/* ---- Movie Search ---- */ +.movie-search { + position: fixed; + top: var(--header-h); + left: 75px; + right: 0; + bottom: 0; + padding: 28px 36px; + overflow-y: auto; + display: flex; + flex-direction: column; + gap: 20px; + scrollbar-width: thin; + scrollbar-color: #2a2a2a transparent; +} + +.movie-search::-webkit-scrollbar { width: 6px; } +.movie-search::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 3px; } + +.movie-search-bar { + display: flex; + gap: 8px; + max-width: 620px; +} + +.movie-search-input { + flex: 1; + font-size: 15px; + padding: 11px 16px; + border-radius: var(--radius); + background: rgba(255,255,255,0.06); + border: 1px solid rgba(255,255,255,0.1); + color: #fff; + outline: none; + transition: border-color 0.2s, background 0.2s; +} + +.movie-search-input::placeholder { color: #555; } +.movie-search-input:focus { border-color: rgba(255,255,255,0.25); background: rgba(255,255,255,0.09); } + +.movie-search-btn { + display: flex; + align-items: center; + justify-content: center; + width: 44px; + height: 44px; + border-radius: var(--radius); + background: var(--accent); + border: none; + color: #fff; + cursor: pointer; + transition: background 0.15s, transform 0.1s; + flex-shrink: 0; +} + +.movie-search-btn:hover { background: #f40612; } +.movie-search-btn:active { transform: scale(0.95); } +.movie-search-btn:disabled { background: #333; cursor: default; } + +.movie-search-message { font-size: 13px; color: #c04040; margin: 0; } + +/* ---- Search Filters ---- */ +.ms-filters { + display: flex; + flex-direction: column; + gap: 10px; + padding: 0 0 4px; +} + +.ms-filter-row { + display: flex; + flex-wrap: wrap; + gap: 8px; + align-items: center; +} + +.ms-type-toggle { + display: flex; + background: rgba(255,255,255,0.05); + border-radius: 8px; + padding: 3px; + flex-shrink: 0; +} + +.ms-type-btn { + background: transparent; + border: none; + color: #666; + font-size: 13px; + font-weight: 500; + padding: 5px 16px; + border-radius: 6px; + cursor: pointer; + transition: background 0.15s, color 0.15s; + white-space: nowrap; +} + +.ms-type-btn.active { + background: var(--accent); + color: #fff; +} + +/* Custom Select */ +.ms-select { + position: relative; + cursor: pointer; + user-select: none; + flex-shrink: 0; +} + +.ms-select-trigger { + display: flex; + align-items: center; + gap: 6px; + background: rgba(255,255,255,0.05); + border: 1px solid var(--border); + border-radius: 7px; + color: #888; + font-size: 12px; + padding: 6px 10px; + transition: border-color 0.15s, background 0.15s, color 0.15s; + white-space: nowrap; +} + +.ms-select-trigger svg { + flex-shrink: 0; + transition: transform 0.2s cubic-bezier(0.4,0,0.2,1); + opacity: 0.6; +} + +.ms-select:hover .ms-select-trigger { + background: rgba(255,255,255,0.08); + border-color: rgba(255,255,255,0.18); + color: #bbb; +} + +.ms-select.open .ms-select-trigger { + border-color: var(--accent); + background: rgba(229,9,20,0.08); + color: #eee; +} + +.ms-select.open .ms-select-trigger svg { + transform: rotate(180deg); +} + +.ms-select-placeholder { color: #666; } +.ms-select-active { color: #ddd; } + +.ms-select-dropdown { + position: absolute; + top: calc(100% + 5px); + left: 0; + min-width: 100%; + background: #1a1a1a; + border: 1px solid rgba(255,255,255,0.1); + border-radius: 9px; + box-shadow: 0 12px 40px rgba(0,0,0,0.7); + z-index: 200; + overflow-y: auto; + max-height: 220px; + animation: dropdownAppear 0.16s cubic-bezier(0.4,0,0.2,1); + scrollbar-width: thin; + scrollbar-color: #333 transparent; +} + +@keyframes dropdownAppear { + from { opacity: 0; transform: translateY(-6px) scale(0.97); } + to { opacity: 1; transform: translateY(0) scale(1); } +} + +.ms-select-opt { + padding: 8px 14px; + font-size: 12px; + color: #888; + cursor: pointer; + transition: background 0.12s, color 0.12s; + white-space: nowrap; +} + +.ms-select-opt:first-child { border-radius: 9px 9px 0 0; } +.ms-select-opt:last-child { border-radius: 0 0 9px 9px; } +.ms-select-opt:hover { background: rgba(255,255,255,0.06); color: #eee; } +.ms-select-opt.active { color: var(--accent); font-weight: 600; } + +.ms-genres { + display: flex; + gap: 6px; + flex-wrap: wrap; +} + +.ms-genre-chip { + background: rgba(255,255,255,0.06); + border: 1px solid var(--border); + border-radius: 20px; + color: #888; + font-size: 11px; + padding: 4px 12px; + cursor: pointer; + transition: background 0.15s, color 0.15s, border-color 0.15s; + white-space: nowrap; +} + +.ms-genre-chip:hover { background: rgba(255,255,255,0.1); color: #ccc; } +.ms-genre-chip.active { background: var(--accent); border-color: var(--accent); color: #fff; } + +.ms-load-more { + display: block; + margin: 20px auto 8px; + background: rgba(255,255,255,0.07); + border: 1px solid var(--border); + border-radius: 8px; + color: #aaa; + font-size: 13px; + padding: 10px 32px; + cursor: pointer; + transition: background 0.15s, color 0.15s; +} + +.ms-load-more:hover { background: rgba(255,255,255,0.12); color: #fff; } +.ms-load-more:disabled { opacity: 0.5; cursor: default; } + +.ms-clear-btn { + background: none; + border: none; + color: #555; + cursor: pointer; + padding: 0 6px; + display: flex; + align-items: center; + transition: color 0.15s; +} +.ms-clear-btn:hover { color: #aaa; } + +.nav-btn.active svg { stroke: var(--accent); } + +/* ---- TMDB Results Grid ---- */ +.movie-results { + display: flex; + flex-wrap: wrap; + gap: 12px; + align-content: flex-start; +} + +.movie-result-card { + display: flex; + flex-direction: column; + width: 135px; + background: var(--bg-card); + border-radius: 8px; + overflow: hidden; + cursor: pointer; + transition: transform 0.22s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.22s ease; + border: 1px solid var(--border); + animation: cardAppear 0.3s ease both; +} + +.movie-result-card:hover { + transform: scale(1.07) translateY(-3px); + box-shadow: 0 16px 48px rgba(0,0,0,0.7); + z-index: 5; +} + +.movie-result-poster { + width: 135px; + height: 202px; + overflow: hidden; + background: #1a1a1a; + flex-shrink: 0; + position: relative; +} + +.movie-result-poster img { + width: 100%; + height: 100%; + object-fit: cover; + display: block; + transition: transform 0.3s ease; +} + +.movie-result-card:hover .movie-result-poster img { transform: scale(1.04); } + +.movie-result-poster-placeholder { + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + font-size: 44px; + font-weight: 700; + color: #2a2a2a; + background: linear-gradient(135deg, #161616 0%, #222 100%); +} + +.movie-result-info { padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 3px; } + +.movie-result-title { + font-size: 12px; + font-weight: 600; + color: #ddd; + overflow: hidden; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + line-height: 1.4; +} + +.movie-result-year { font-size: 11px; color: #666; } +.movie-result-source { font-size: 10px; color: #444; margin-top: 1px; } + +.ms-card-meta { display: flex; gap: 8px; align-items: center; margin-top: 1px; } +.ms-card-rating { font-size: 11px; color: #f5c518; display: flex; align-items: center; gap: 2px; } +.ms-card-type { + font-size: 10px; + color: #aaa; + background: rgba(255,255,255,0.1); + padding: 1px 5px; + border-radius: 3px; +} + +/* ---- Movie Detail ---- */ +.ms-detail { + position: relative; + min-height: 100%; +} + +/* Blurred poster background */ +.ms-detail-bg { + position: fixed; + inset: 0; + top: var(--header-h); + left: 75px; + z-index: 0; + overflow: hidden; + pointer-events: none; +} + +.ms-detail-bg-img { + width: 100%; + height: 100%; + object-fit: cover; + object-position: center top; + filter: blur(32px) saturate(0.6) brightness(0.35); + transform: scale(1.08); +} + +.ms-detail-bg-gradient { + position: absolute; + inset: 0; + background: linear-gradient(to right, rgba(17,17,17,0.92) 0%, rgba(17,17,17,0.6) 40%, rgba(17,17,17,0.4) 100%), + linear-gradient(to bottom, rgba(17,17,17,0.4) 0%, rgba(17,17,17,0.85) 100%); +} + +.ms-detail-content { + position: relative; + z-index: 1; +} + +.ms-back-btn { + background: rgba(255,255,255,0.06); + border: 1px solid var(--border); + color: #aaa; + font-size: 13px; + cursor: pointer; + padding: 6px 14px; + margin-bottom: 24px; + border-radius: var(--radius); + transition: background 0.15s, color 0.15s; + display: inline-flex; + align-items: center; + gap: 6px; + font-weight: 500; +} + +.ms-back-btn:hover { background: rgba(255,255,255,0.1); color: #fff; } + +.ms-detail-card { + display: flex; + gap: 28px; + margin-bottom: 32px; + max-width: 760px; +} + +.ms-detail-poster { + width: 160px; + height: 240px; + border-radius: 10px; + object-fit: cover; + flex-shrink: 0; + box-shadow: 0 20px 60px rgba(0,0,0,0.8); +} + +.ms-poster-placeholder { + width: 160px; + height: 240px; + border-radius: 10px; + background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%); + display: flex; + align-items: center; + justify-content: center; + font-size: 52px; + font-weight: 700; + color: #333; + flex-shrink: 0; +} + +.ms-detail-info { + display: flex; + flex-direction: column; + gap: 10px; + padding-top: 4px; +} + +.ms-detail-title { + margin: 0; + font-size: 26px; + font-weight: 800; + color: #fff; + line-height: 1.15; + letter-spacing: -0.02em; +} + +.ms-detail-orig { margin: 0; font-size: 13px; color: #666; } + +.ms-detail-meta { + display: flex; + gap: 14px; + font-size: 13px; + color: #999; + align-items: center; + flex-wrap: wrap; +} + +.ms-detail-meta span { + display: flex; + align-items: center; + gap: 3px; +} + +.ms-detail-overview { + margin: 4px 0 0; + font-size: 13px; + color: #aaa; + line-height: 1.65; + max-width: 500px; + display: -webkit-box; + -webkit-line-clamp: 6; + -webkit-box-orient: vertical; + overflow: hidden; +} + +/* ---- Site Results ---- */ +.ms-sites-label { + font-size: 11px; + font-weight: 700; + color: #555; + text-transform: uppercase; + letter-spacing: 0.1em; + margin-bottom: 10px; +} + +.ms-site-results { + display: flex; + flex-direction: column; + gap: 5px; + max-width: 760px; +} + +.ms-site-row { + display: flex; + align-items: center; + gap: 14px; + background: rgba(255,255,255,0.05); + border: 1px solid rgba(255,255,255,0.06); + border-radius: 8px; + padding: 13px 18px; + cursor: pointer; + transition: background 0.15s, border-color 0.15s, transform 0.15s; +} + +.ms-site-row:hover { + background: rgba(255,255,255,0.09); + border-color: rgba(255,255,255,0.12); + transform: translateX(2px); +} + +.ms-site-source { + font-size: 11px; + color: #555; + width: 130px; + flex-shrink: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.ms-site-title { + flex: 1; + font-size: 13px; + font-weight: 500; + color: #ccc; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.ms-site-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } + +.ms-site-open { + font-size: 12px; + color: #444; + flex-shrink: 0; + transition: color 0.15s; +} + +.ms-site-row:hover .ms-site-open { color: #999; } + +.ms-bookmark-btn { + background: none; + border: none; + color: #444; + cursor: pointer; + padding: 4px 6px; + border-radius: 4px; + display: flex; + align-items: center; + transition: color 0.15s, background 0.15s; +} + +.ms-bookmark-btn:hover { color: #f5c518; background: rgba(245,197,24,0.1); } + +/* ---- Bookmarks Bar ---- */ +.bookmarks-bar { + width: 100%; + background: rgba(255,255,255,0.03); + border: 1px solid var(--border); + border-radius: 10px; + margin-bottom: 16px; + overflow: hidden; + transition: background 0.15s; +} + +.bookmarks-bar-header { + display: flex; + align-items: center; + gap: 8px; + padding: 10px 14px; + cursor: pointer; + font-size: 13px; + color: #666; + transition: background 0.15s, color 0.15s; + user-select: none; +} + +.bookmarks-bar-header:hover { background: rgba(255,255,255,0.04); color: #bbb; } +.bookmarks-bar-header span { flex: 1; font-weight: 500; } + +.bookmarks-collapse { + display: grid; + grid-template-rows: 0fr; + transition: grid-template-rows 0.32s cubic-bezier(0.4,0,0.2,1); +} + +.bookmarks-collapse.open { + grid-template-rows: 1fr; +} + +.bookmarks-collapse-inner { + overflow: hidden; +} + +.bookmarks-list { + display: flex; + gap: 10px; + padding: 0 14px 14px; + overflow-x: auto; + scrollbar-width: thin; + scrollbar-color: #2a2a2a transparent; +} + +.bookmarks-list::-webkit-scrollbar { height: 4px; } +.bookmarks-list::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 2px; } + +.bookmark-card { + display: flex; + flex-direction: column; + width: 105px; + background: var(--bg-card); + border-radius: 8px; + overflow: hidden; + cursor: pointer; + position: relative; + flex-shrink: 0; + border: 1px solid var(--border); + transition: transform 0.22s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.2s ease; +} + +.bookmark-card:hover { + transform: scale(1.07) translateY(-2px); + box-shadow: 0 12px 36px rgba(0,0,0,0.6); + z-index: 2; +} + +.bookmark-poster { + width: 105px; + height: 148px; + overflow: hidden; + background: #1a1a1a; + flex-shrink: 0; +} + +.bookmark-poster img { + width: 100%; + height: 100%; + object-fit: cover; + transition: transform 0.3s ease; +} + +.bookmark-card:hover .bookmark-poster img { transform: scale(1.06); } + +.bookmark-poster-placeholder { + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + font-size: 34px; + font-weight: 700; + color: #2a2a2a; + background: linear-gradient(135deg, #161616 0%, #222 100%); +} + +.bookmark-info { padding: 7px 8px 8px; display: flex; flex-direction: column; gap: 2px; } + +.bookmark-title { + font-size: 11px; + font-weight: 500; + color: #ccc; + overflow: hidden; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + line-height: 1.35; +} + +.bookmark-source { font-size: 10px; color: #555; } + +.bookmark-remove { + position: absolute; + top: 5px; + right: 5px; + background: rgba(0,0,0,0.72); + border: none; + color: #999; + font-size: 10px; + cursor: pointer; + width: 20px; + height: 20px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + transition: opacity 0.15s, color 0.15s, background 0.15s; + line-height: 1; + padding: 0; +} + +.bookmark-card:hover .bookmark-remove { opacity: 1; } +.bookmark-remove:hover { color: #fff; background: rgba(200,40,40,0.85); } + +/* ---- Modal Dialog ---- */ +.modal-overlay { + position: fixed; + inset: 0; + z-index: 9999; + display: flex; + align-items: center; + justify-content: center; + background: rgba(0,0,0,0); + transition: background 0.22s ease; +} + +.modal-overlay.visible { + background: rgba(0,0,0,0.78); +} + +.modal-card { + background: #1c1c1c; + border: 1px solid rgba(255,255,255,0.1); + border-radius: 12px; + padding: 32px 36px; + text-align: center; + min-width: 300px; + max-width: 420px; + box-shadow: 0 24px 64px rgba(0,0,0,0.8); + opacity: 0; + transform: scale(0.92) translateY(10px); + transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.34,1.56,0.64,1); +} + +.modal-overlay.visible .modal-card { + opacity: 1; + transform: scale(1) translateY(0); +} + +.modal-title { + font-size: 17px; + font-weight: 700; + color: #fff; + margin-bottom: 10px; +} + +.modal-msg { + font-size: 13px; + color: #999; + line-height: 1.5; + margin-bottom: 26px; +} + +.modal-btns { + display: flex; + gap: 10px; + justify-content: center; +} + +.modal-btn { + padding: 10px 26px; + border: none; + border-radius: 7px; + font-size: 13px; + font-weight: 600; + cursor: pointer; + transition: opacity 0.15s, transform 0.1s; +} + +.modal-btn:hover { opacity: 0.85; } +.modal-btn:active { transform: scale(0.97); } +.modal-btn-yes { background: #E50914; color: #fff; } +.modal-btn-no { background: rgba(255,255,255,0.1); color: #ccc; } +.modal-btn-ok { background: rgba(255,255,255,0.1); color: #ccc; } diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..42e0521 --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,17 @@ +{ + "compilerOptions": { + "target": "ES2020", + "useDefineForClassFields": true, + "lib": ["ES2020", "DOM", "DOM.Iterable"], + "module": "ESNext", + "skipLibCheck": true, + "moduleResolution": "bundler", + "allowImportingTsExtensions": true, + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "jsx": "react-jsx", + "strict": true + }, + "include": ["src"] +} diff --git a/vite.config.ts b/vite.config.ts new file mode 100644 index 0000000..a2a70e0 --- /dev/null +++ b/vite.config.ts @@ -0,0 +1,19 @@ +import { defineConfig } from 'vite' +import react from '@vitejs/plugin-react' + +export default defineConfig({ + plugins: [react()], + base: './', + build: { + outDir: 'dist', + }, + server: { + port: 5173, + watch: { + ignored: ['**/extensions/**', '**/node_modules/**'], + }, + }, + optimizeDeps: { + entries: ['index.html', 'src/**/*.tsx', 'src/**/*.ts'], + }, +})

{errorData?.text}

{errorData?.text}

{errorData?.title}

{errorData?.text}

{errorData?.title}

{errorData?.text}

{name}

{selected.title}

Настройки

Прокси

Приложения

Добавить приложение

Поиск фильмов

TMDB API ключ

Сайты

Добавить сайт