{"id":19273593,"url":"https://github.com/zikwall/re-player","last_synced_at":"2025-07-04T00:05:35.667Z","repository":{"id":57170827,"uuid":"244012673","full_name":"zikwall/re-player","owner":"zikwall","description":":clapper: Video player for React Native based on ReactNativeVideo","archived":false,"fork":false,"pushed_at":"2020-09-17T16:06:36.000Z","size":13396,"stargazers_count":4,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-06-15T12:58:16.674Z","etag":null,"topics":["android","controls","ios","live","player","react-native","video","video-player"],"latest_commit_sha":null,"homepage":"","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/zikwall.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}},"created_at":"2020-02-29T17:37:30.000Z","updated_at":"2022-05-06T11:12:19.000Z","dependencies_parsed_at":"2022-08-27T13:20:10.837Z","dependency_job_id":null,"html_url":"https://github.com/zikwall/re-player","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/zikwall/re-player","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zikwall%2Fre-player","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zikwall%2Fre-player/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zikwall%2Fre-player/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zikwall%2Fre-player/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zikwall","download_url":"https://codeload.github.com/zikwall/re-player/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zikwall%2Fre-player/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263421911,"owners_count":23464047,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["android","controls","ios","live","player","react-native","video","video-player"],"created_at":"2024-11-09T20:43:33.795Z","updated_at":"2025-07-04T00:05:35.615Z","avatar_url":"https://github.com/zikwall.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![GitHub package.json version](https://img.shields.io/github/package-json/v/zikwall/re-player)\n![NPM](https://img.shields.io/npm/l/@zikwall/re-player)\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg width=\"700\" height=\"350\" src=\"https://github.com/zikwall/re-player/blob/master/screenshots/re-player-poster-2.png\"\u003e\n  \u003ch4\u003eFor React Native Apps\u003c/h4\u003e\n  \u003ch5\u003epowered by PlayHub app\u003c/h5\u003e\n\u003c/div\u003e\n\nCommon | Adaptive | Live Streaming\n--- | --- | ---\n![Gif1](/gifs/20200229_205716_2.gif) | ![Gif1](/gifs/20200229_205716_3.gif) | ![Gif1](/gifs/20200229_205838_1.gif)\n\n### Features\n\n- [x] Easy Customizable: events, icons components, other `props`.\n- [x] Light Animated \u0026 Responsive Components\n- [x] Controls \u0026 UI:\n    - [x] Play/Pause \u0026 with BigPlay\n    - [x] Volume with adaptive icons depending on the sound level \u0026 `onPress` for mute/unmute.\n    - [x] Crop (resize mode).\n    - [x] Full-screen mode.\n    - [x] Overlay Sidebar: You can set you custom content in side bar, e.g. playlist or related videos.\n    - [x] Lock: You can lock the control buttons and not show them.\n    - [x] Back from full-screen.\n    - [x] Title component on full-screen, e.g. text or text with image.\n- [x] Custom Events\n    - [x] On double taps left/right.\n    - [x] On double taps video transform to full-screen, one tab set visible controls.\n    - [x] Intercepts a standard gesture/button back during full-screen mode to exit it.\n    - [x] e.g. `onFullscreen`, `onPause`/`onPlay`, etc.\n- [x] Video types\n    - [x] Stream/Online without time controls \u0026 mark `live`.\n    - [x] Video ends with time controls \u0026 dynamic formatted (`h:i:s`) duration times (current, end).\n\n### Props\n\n- [x] `source` array of object { size: int, src: string }\n- [x] `title` string\n- [x] `nativeProps` object, available native react-native-video props\n- [x] `progressComponent` component, to set the loading status\n\n#### Future todo\n\n- [ ] `playlist`, see [Playlist Branch](https://github.com/zikwall/re-player/tree/playlist)\n- [ ] `fullscreenEnabled`\n- [ ] `hardwareEnabled`\n- [ ] `overlayEnabled`\n- [ ] `lockEnabled`\n- [ ] `doubleTapFullscreenEnabled`\n- [ ] `doubleTapSeekEnabled`\n- [ ] `statusBarMode`\n- [ ] `adTag`, wait PR: [#1839](https://github.com/react-native-community/react-native-video/pull/1839)\n\n### Events\n\n- [x] `onEventLoadStart()`\n- [x] `onEventLoad(videoData)`\n- [x] `onEventProgress(currentTime)`\n- [x] `onEventCrop(mode)`\n- [x] `onEventSeek(value)`\n- [x] `onEventDoubleTapSeek(seekValue, direction)`, direction one of `left`, `right`\n- [x] `onEventFullscreen(isFullscreen)`\n- [x] `onEventDoubleTapFullscreen(isFullscreen)`\n- [x] `onEventPlayPause(isPaused)`\n- [x] `onEventLock(isLocked)`\n- [x] `onEventMute(isMuted)`\n- [x] `onEventVolumeChange(volumeValue)`\n- [x] `onEventAudioBecomingNoisy()`\n- [x] `onEventAudioFocusChanged(hasAudioFocus)`\n- [x] `onEventHardwareBackPress(isFullscreen)`\n- [x] `onEventOverlayClose()`\n- [x] `onEventOverlayOpen()`\n- [x] `onEventShowControls`\n\n### Installation\n\n#### Before install dependencies\n\n- [x] `prop-types`\n- [x] `react-native-video`, see manual: https://github.com/react-native-community/react-native-video\n- [x] `react-native-orientation`, see manual: https://github.com/yamill/react-native-orientation\n- [x] `react-native-vector-icons`, see manual: https://github.com/oblador/react-native-vector-icons\n- [x] `@react-native-community/slider`, see manual: https://github.com/react-native-community/react-native-slider\n- [x] `react-native-typography`, see manual: https://github.com/hectahertz/react-native-typography\n\n#### Install RePLayer\n\n- [x] `npm i @zikwall/re-player`\n- [x] from git add `package.json` next line: `\"@zikwall/re-player\": \"git+https://git@github.com/zikwall/re-player.git\"`\n\n### Usage is very simple\n\n```js\n\nimport React from 'react';\nimport {\n    View,\n} from 'react-native';\nimport RePlayer from '@zikwall/re-player';\n\nconst App = () =\u003e {\n    return (\n        \u003cRePlayer\n             source={[\n                 {\n                     size: 576,\n                     src: 'http://ultotv.ru:8888/live/uhd/playlist.m3u8'\n                 },\n                 {\n                     size: 720,\n                     src: 'https://previews.customer.envatousercontent.com/h264-video-previews/01940919-82fb-43b7-b688-b585f0a0abe9/2158627.mp4'\n                 },\n                 {\n                     size: 1080,\n                     src: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4'\n                 },\n                 {\n                     size: 1080,\n                     src: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4'\n                 }\n             ]}\n             title={'Test'}\n             nativeProps={{\n                 poster: 'https://raw.githubusercontent.com/zikwall/re-player/master/screenshots/re-player-poster-2.png'\n            }}\n        /\u003e\n    )\n}\n\n```\n\n#### 16:9 aspect ratio example\n\n```js\n\n   // ...\n    \n    return (\n        \u003cView style={{ paddingTop: '56.25%' }}\u003e\n             \u003cView style={{\n                 position: 'absolute',\n                 left: 0,\n                 right:0,\n                 bottom: 0,\n                 top: 0,\n                 backgroundColor: '#000'\n              }}\u003e\n              \u003cRePlayer\n                  {...playerProps}\n              /\u003e\n            \u003c/View\u003e\n        \u003c/View\u003e\n    )\n\n   // ...\n\n```\n\n### Screenshots\n\nGeneral | Fullscreen \n--- | ---\n![Screen1](/screenshots/Screenshot_20200302-155459_lol.jpg) | ![Screen2](/screenshots/Screenshot_20200302-155510_lol.jpg)\n![Screen3](/screenshots/Screenshot_20200303-131430_lol.jpg) | ![Screen4](/screenshots/Screenshot_20200303-132643_lol.jpg)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzikwall%2Fre-player","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzikwall%2Fre-player","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzikwall%2Fre-player/lists"}