OnTv — Video & Live Streaming Platform

📺 OnTv — Video Discovery & Live Streaming

OnTv is a Persian-language media platform that brings together live broadcasts, on-demand programs, episodes, clips, and short-form videos.

The frontend connects these content formats through a responsive interface, helping viewers discover something new, follow a program, or return to content they have already watched.

🔎 Multiple Ways to Discover Content

Viewers can explore curated content rows, browse programs and clips, search the catalog, and discover content through tags and cast members.

Dedicated program pages bring together related media, while content filters and sorting options help users navigate the available videos.

🎬 A Custom Video Playback Experience

A key part of the frontend is its custom video player, built around React Player with support for HLS sources.

The player brings essential viewing controls into the platform’s own interface:

• ⚙️ Stream quality selection for supported HLS sources.
• ⏩ Playback speed controls for on-demand videos.
• ↔️ Ten-second forward and backward seeking.
• 🔊 Volume and mute controls.
• 🖥️ Fullscreen playback, including handling for iOS.
• 🔴 Return-to-live controls for live broadcasts.
• ▶️ Playback progress tracking and resume support.

Media pages also provide sharing, bookmarks, and download options when downloadable video sources are available.

📱 Short Videos with a Dedicated Reels Experience

OnTv includes a vertical Reels viewer designed for browsing short-form videos.

Users can move between videos through swipe gestures, mouse-wheel navigation, keyboard controls, or navigation buttons. The viewer loads additional reels as users explore and supports opening a specific shared reel.

Playback controls, reactions, sharing, and links to related programs connect short videos to the wider content catalog.

🔖 A Personal Viewing Experience

Phone-based one-time password authentication connects viewers to their personal account.

Users can save content, browse their watch history, and update profile information, including their avatar. Comments and reactions provide additional ways to engage with media.

Watch progress integration helps viewers return to previously watched content.

🎨 Designed for Persian-Speaking Viewers

The interface combines right-to-left layouts, Persian typography, Jalali date handling, and responsive components.

Light and dark themes support different viewing preferences, with the selected theme saved between visits. Loading skeletons and empty states provide feedback while content is being retrieved or when no results are available.

The project also includes PWA configuration and installation UI for an app-like experience on supported devices.

🛠️ Frontend Architecture & API Integration

The frontend uses Next.js App Router, React, and TypeScript, with Tailwind CSS, daisyUI, and Headless UI supporting interface development.

• 🔄 TanStack Query manages API queries, mutations, caching, and paginated content.
• 🌐 Axios connects frontend features to backend services.
• 🧩 Zustand provides a persisted user store.
• ✅ Formik + Yup handle profile forms and validation.
• 🎥 React Player + HLS support video playback.
• 🔍 Metadata, canonical URLs, structured data, and a sitemap endpoint support content discoverability.

API endpoints, query hooks, mutation hooks, and typed models are organized into separate layers to support the platform’s different content and account workflows.

🚀 What This Project Demonstrates

OnTv demonstrates frontend development for a media application: custom video controls, live-stream playback, gesture-based navigation, API integration, server-state management, authentication flows, and responsive Persian interfaces.