Web Player - Project Todo Board

Scope & Architecture

Scope

[Scope] Build a reusable web player template for anime/movie/series websites.
[Scope] Build a browser extension version that can inject the player controls.
Define package structure: core player, UI layer, adapters, plugins, extension.
Choose supported browsers and minimum device requirements.
Create demo page with sample videos, episodes, subtitles, and mock sources.

Classic Player Controls

MVP

Implement play / pause control.
Implement seek forward/backward and direct seek to time.
Build video timeline with current time, duration, buffered state, and hover state.
Implement fullscreen enter/exit with browser fallback.
Implement volume slider, mute, unmute, and saved volume preference.
Implement playback speed controls: 0.5x, 1x, 1.25x, 1.5x, 2x.
Implement quality selector with auto/manual quality modes.

Video Engine & State

Core

Create player state machine: idle, loading, playing, paused, buffering, ended, error.
Handle native HTML5 video events and normalize them for the UI.
Add error screen for unsupported source, network error, decode error, and DRM/permission issue.
Persist player preferences: volume, speed, subtitle style, last quality.
Expose player API: play(), pause(), seek(), loadSource(), destroy().

Timeline, Shortcuts & Gestures

UX

Add keyboard shortcuts: space/K play-pause, arrows seek, F fullscreen, M mute.
Add next/previous episode shortcuts and buttons.
Implement left-click hold on video to temporarily play at 2x speed.
Implement double-click left side to rewind 10 seconds.
Implement double-click right side to forward 10 seconds.
Implement left-side vertical slide gesture for brightness.
Implement right-side vertical slide gesture for volume.
Add mobile/touch-friendly feedback overlay for gestures.

Episodes & Progress

Series

Create episode list component with active episode highlight.
Implement next/previous episode navigation.
Implement auto-next episode after video ends.
Save episode watch progress locally.
Sync episode progress with backend when user is logged in.
Add resume prompt: “Continue from 12:34?”
Mark completed episodes based on watch percentage.

PiP & Screenshot

Tools

Implement Picture-in-Picture button.
Detect PiP browser support and hide/disable when unsupported.
Implement screenshot capture from current video frame.
Add filename format for screenshots: title_episode_timestamp.png.
Handle CORS limitation message when screenshot cannot be captured.

Intro / Outro Detection & Skip

Smart

Add manual intro/outro timestamp markers per episode.
Show “Skip Intro” button only inside intro time range.
Show “Skip Outro” button near ending section.
Design detection pipeline options: audio fingerprint, visual similarity, or community markers.
Store skip segments per title/season/episode.
Add setting to auto-skip intro/outro.

Smart Timeline Previews

Preview

Generate timeline thumbnail sprites for hover preview.
Show preview thumbnail and timestamp on timeline hover.
Add chapter/scene markers to timeline.
Add intro/outro/recap markers as colored timeline zones.
Optimize preview loading with lazy image loading.

Subtitles System

Subs

Add local subtitle upload: .vtt, .srt, .ass basic support.
Add subtitle track selector and default language preference.
Add subtitle customization: size, color, background, position, delay.
Create adapter system for auto-adding subtitles from legitimate subtitle providers.
Add subtitle sync controls: + / - delay.
Convert SRT to VTT in browser or backend.

Sources, Quality & Legal Media

Media

Implement add-source UI for direct video URL or site-provided source.
Create source adapter interface for websites to provide video URLs safely.
Support HLS playback where browser/player stack allows it.
Support multiple source fallback when one source fails.
Keep downloads/source features permission-based for legal/user-owned media only.
Display source health: loading, failed, selected quality, CDN/source name.

Download / Clip Tools

Clip

Add download button only when source permission allows it.
Implement clip start/end selector on timeline.
Export short clips for user-owned or permitted media.
Add progress UI for clip/download process.
Add fallback message when browser blocks download or CORS prevents processing.

Watch Together

Social

Create room creation/join flow.
Sync play, pause, seek, speed, and episode changes between users.
Add host mode and permissions: host-only control vs everyone can control.
Add latency correction and drift detection.
Add basic chat or reactions panel.
Handle reconnect flow without breaking the watch session.

Watch Sync & Cloud Progress

Sync

Create backend model for watch history and progress.
Sync progress across devices.
Add conflict handling: local progress vs cloud progress.
Add private/incognito mode that does not sync watch history.
Create import/export for watch progress backup.

Browser Extension

Ext

Set up extension manifest and permissions.
Build content script to detect video elements on supported sites.
Inject Web Player overlay without breaking original page layout.
Create per-site adapter system for anime/movie/series sites.
Add extension popup for enable/disable, settings, supported sites.
Add safe fallback when site blocks injection or video is protected.

Developer Customization

SDK

Design configuration object for web developers.
Allow theme customization: colors, icons, control visibility, layout.
Expose event callbacks: onPlay, onPause, onSeek, onEpisodeChange, onSourceChange.
Create plugin system for subtitles, intro skip, watch together, downloads.
Add TypeScript types for the public API.
Create minimal install snippet for websites.

Testing & Quality

QA

Test Chrome, Firefox, Edge, and mobile browsers.
Test keyboard-only usage and accessibility labels.
Test fullscreen, PiP, subtitles, quality switching, and screenshots.
Add unit tests for state machine and utility functions.
Add integration tests with sample HLS/direct MP4 sources.
Profile performance: CPU, memory, thumbnail loading, extension injection cost.

Docs, Demo & Release Plan

Docs

Write README with features, setup, architecture, and roadmap.
Create developer docs for website template usage.
Create extension installation/dev guide.
Prepare public demo page with fake anime/movie/series examples.
Define MVP release checklist and v1.0 feature freeze.
Create issue labels: MVP, Smart Feature, Extension, Bug, Docs, Later.

Web Player İş Paylaşımı

General

Scope & Architecture

Classic Player Controls

Video Engine & State

Timeline, Shortcuts & Gestures

Episodes & Progress

PiP & Screenshot

Intro / Outro Detection & Skip

Smart Timeline Previews

Subtitles System

Sources, Quality & Legal Media

Download / Clip Tools

Watch Together

Watch Sync & Cloud Progress

Browser Extension

Developer Customization

Testing & Quality

Docs, Demo & Release Plan

Kerem

Emre

Bulk Add