{"id":49458253,"url":"https://github.com/ogrodev/interactive-react-player","last_synced_at":"2026-04-30T08:03:52.509Z","repository":{"id":111400215,"uuid":"346061104","full_name":"ogrodev/interactive-react-player","owner":"ogrodev","description":null,"archived":false,"fork":false,"pushed_at":"2021-03-17T22:06:15.000Z","size":2379,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2023-07-21T03:28:48.150Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"react-live-video-player.vercel.app","language":"JavaScript","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/ogrodev.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}},"created_at":"2021-03-09T15:55:06.000Z","updated_at":"2023-07-21T03:28:49.550Z","dependencies_parsed_at":"2023-05-18T15:16:41.022Z","dependency_job_id":null,"html_url":"https://github.com/ogrodev/interactive-react-player","commit_stats":null,"previous_names":["ogrodev/interactive-react-player"],"tags_count":null,"template":null,"template_full_name":null,"purl":"pkg:github/ogrodev/interactive-react-player","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ogrodev%2Finteractive-react-player","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ogrodev%2Finteractive-react-player/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ogrodev%2Finteractive-react-player/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ogrodev%2Finteractive-react-player/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ogrodev","download_url":"https://codeload.github.com/ogrodev/interactive-react-player/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ogrodev%2Finteractive-react-player/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32458241,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-29T22:27:22.272Z","status":"online","status_checked_at":"2026-04-30T02:00:05.929Z","response_time":57,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":[],"created_at":"2026-04-30T08:03:47.414Z","updated_at":"2026-04-30T08:03:52.502Z","avatar_url":"https://github.com/ogrodev.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Player with interactive modals and customs controls\n[![DemoLink](https://img.shields.io/badge/DEMO-online-brightgreen)](https://react-live-video-player.vercel.app/)\n\u003cbr/\u003e\nThis project is a use case! I've implemented custom controls and there is a feature for adding questions when the player reaches given timeframe.\n\u003cbr/\u003e\nI've used \n* [ReactJS](https://reactjs.org) \n* [ChakraUI](https://chakra-ui.com/)\n* [React Player](https://github.com/cookpete/react-player)\n\u003cbr/\u003e\nIf you want to test it locally clone the repository, enter it and run:\n`npm start`\n\u003cbr/\u003e\nThen access [localhost](http://localhost:3000) as you would in create-react-app developments.\n\u003cbr/\u003e\nMost of the project is in English, but some parts are in pt-br.\n\u003cbr/\u003e\n## How to use\n\u003cbr/\u003e\nThe usage is very simple, just follow the steps below.\n\n![Steps](https://sweetsoul.sirv.com/Images/Github/CustomReactPlayer/demo.png)\n\n1. Video URL (Paste any video URL accepted in [React Player](https://github.com/cookpete/react-player)\n2. Checkbox to set the LiveMode (It's a Live?)\n3. Use logo? (If unchecked removes the logo from the top right corner)\n4. If Use logo is true, the shown logo will be the link in this input or if empty, the chakra UI logo.\n5. Primary color to match the volume and time sliders, as well the `box-shadow` color when liveMode is ON.\n6. Secondary color to use in text inside LiveMode Badge\n7. Ask a question at certain given time. Input 1= Question to be asked \u003e\u003e Input 2= Time in seconds to be displayed.\n8. Add new question inputs\n\u003cbr/\u003e\nP.S.: The question in sending the answer to console for now.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fogrodev%2Finteractive-react-player","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fogrodev%2Finteractive-react-player","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fogrodev%2Finteractive-react-player/lists"}