{"id":16222660,"url":"https://github.com/qur786/react-video-player","last_synced_at":"2026-04-08T16:02:36.052Z","repository":{"id":222344054,"uuid":"756975951","full_name":"qur786/react-video-player","owner":"qur786","description":null,"archived":false,"fork":false,"pushed_at":"2024-02-22T16:43:30.000Z","size":131,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-08T01:41:13.180Z","etag":null,"topics":["css","html","media-api","react","react-movable","tailwindcss","typescript","video-player"],"latest_commit_sha":null,"homepage":"https://qur786.github.io/react-video-player/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/qur786.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-02-13T17:06:01.000Z","updated_at":"2024-02-22T16:42:32.000Z","dependencies_parsed_at":"2024-02-13T18:30:50.443Z","dependency_job_id":"4bfee09f-fea8-4ff7-95c3-0f005f083cd1","html_url":"https://github.com/qur786/react-video-player","commit_stats":null,"previous_names":["qur786/react-video-player"],"tags_count":0,"template":false,"template_full_name":"qur786/react-spa-vite-template","purl":"pkg:github/qur786/react-video-player","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qur786%2Freact-video-player","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qur786%2Freact-video-player/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qur786%2Freact-video-player/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qur786%2Freact-video-player/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/qur786","download_url":"https://codeload.github.com/qur786/react-video-player/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qur786%2Freact-video-player/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31562697,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-08T14:31:17.711Z","status":"ssl_error","status_checked_at":"2026-04-08T14:31:17.202Z","response_time":54,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","html","media-api","react","react-movable","tailwindcss","typescript","video-player"],"created_at":"2024-10-10T12:14:51.129Z","updated_at":"2026-04-08T16:02:36.038Z","avatar_url":"https://github.com/qur786.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Video Player App\r\n\r\n**Live Demo:** [React Video Player](https://qur786.github.io/react-video-player/)\r\n\r\n## Overview\r\n\r\nThis project is a React.js-based video player application. It allows users to play videos from a playlist with essential features like play/pause toggle, seeking, timer, autoplay, and speed selector. Additionally, users can reorder the playlist and enjoy additional features such as fullscreen mode and keyboard shortcuts.\r\n\r\n## Running the Application Locally\r\n\r\n### Requirements\r\n\r\nTo run this application, you will need:\r\n\r\n- Git - [How to install Git?](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git)\r\n- Node.js (v18 or higher) - [How to install Node.js?](https://nodejs.org/en/download)\r\n- yarn - [How to install yarn?](https://classic.yarnpkg.com/lang/en/docs/install/#windows-stables)\r\n- Internet connection (for accessing video)\r\n- Web browser (for accessing the application)\r\n\r\n### To run the application locally, follow these steps:\r\n\r\n1. Clone this repository to your local machine using:\r\n\r\n```bash\r\ngit clone https://github.com/qur786/react-video-player.git\r\n```\r\n\r\n2. Navigate to the project directory:\r\n\r\n```bash\r\ncd react-video-player\r\n```\r\n\r\n3. Install dependencies:\r\n\r\n```bash\r\nyarn install\r\n```\r\n\r\n4. Start the development server:\r\n\r\n```bash\r\nyarn start\r\n```\r\n\r\n5. Open your browser and visit [http://localhost:3000/react-video-player/](http://localhost:3000/react-video-player/) to view the application.\r\n\r\n## Features\r\n\r\n1. **Video Player Component:**\r\n\r\n- Implements a video player with essential functionalities such as play/pause toggle, seeking, timer, autoplay, and speed selector.\r\n\r\n2. **Playlist Component:**\r\n\r\n- Provides a playlist component to display and manage videos.\r\n- Allows users to reorder videos in the playlist.\r\n- Clicking on a video in the playlist loads and plays that video in the video player.\r\n\r\n3. **React State Management:**\r\n\r\n- Manages video playback, playlist state, and other necessary variables using React state/context.\r\n\r\n4. **Styling:**\r\n\r\n- Utilizes Tailwind CSS for styling, ensuring a clean and user-friendly interface.\r\n\r\n5. **Additional Features:**\r\n\r\n- Fullscreen mode with default browser controls.\r\n- Keyboard shortcuts for ease of use.\r\n- Shortcuts for user reference (Available shortcuts have been shown in a modal)\r\n\r\n## Project Structure\r\n\r\n```\r\nreact-video-player/\r\n├── public/               # Public assets and index.html\r\n├── src/                  # Source files\r\n│   ├── components/       # React components\r\n│   ├── App.tsx           # Main application component\r\n│   ├── data.ts           # Video URLs data\r\n│   ├── shortcuts.ts      # Utility functions for shortcuts\r\n│   ├── index.css         # Entry CSS file\r\n│   └── main.tsx          # Entry point\r\n├── package.json          # Project dependencies and scripts\r\n└── README.md             # Project documentation\r\n```\r\n\r\n## Additional Notes\r\n\r\n- This project was completed within the given timeframe, adhering to most of the requirements specified in the assignment brief.\r\n- External libraries were used sparingly, with most features built in-house to ensure code quality and optimization.\r\n- Fullscreen mode utilizes default browser controls; custom controls are not implemented in fullscreen mode due to technical limitations.\r\n\r\n## Available shortcuts\r\n\r\n| Shortcuts | Description                                              |\r\n| --------- | -------------------------------------------------------- |\r\n| 0         | Press 0 to re-start the current video again.             |\r\n| p         | Press p to pause and play current video.                 |\r\n| V         | Press V to increase volume by 10%.                       |\r\n| v         | Press v to decrease volume by 10%.                       |\r\n| S         | Press S to increase speed by 0.25x.                      |\r\n| s         | Press s to decrease speed by 0.25x.                      |\r\n| n         | Press n to make current video speed normal.              |\r\n| w         | Press w to make current video jump ahead by 10 seconds.  |\r\n| q         | Press q to make current video jump behind by 10 seconds. |\r\n| f         | Press f to view video in full screen mode.               |\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fqur786%2Freact-video-player","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fqur786%2Freact-video-player","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fqur786%2Freact-video-player/lists"}