├── .jshintrc
├── .babelrc
├── .npmignore
├── .eslintrc.js
├── assets
    └── img
    │   ├── back.png
    │   ├── pause.png
    │   ├── play.png
    │   ├── back@2x.png
    │   ├── back@3x.png
    │   ├── expand.png
    │   ├── pause@2x.png
    │   ├── pause@3x.png
    │   ├── play@2x.png
    │   ├── play@3x.png
    │   ├── shrink.png
    │   ├── volume.png
    │   ├── error-icon.png
    │   ├── expand@2x.png
    │   ├── expand@3x.png
    │   ├── shrink@2x.png
    │   ├── shrink@3x.png
    │   ├── volume@2x.png
    │   ├── volume@3x.png
    │   ├── error-icon@2x.png
    │   ├── error-icon@3x.png
    │   ├── loader-icon.png
    │   ├── top-vignette.png
    │   ├── bottom-vignette.png
    │   ├── loader-icon@2x.png
    │   ├── loader-icon@3x.png
    │   ├── top-vignette@2x.png
    │   ├── top-vignette@3x.png
    │   ├── bottom-vignette@2x.png
    │   └── bottom-vignette@3x.png
├── .gitignore
├── test
    └── package.json
├── .prettierrc.js
├── .github
    └── workflows
    │   └── ci.yml
├── package.json
├── LICENSE
├── VideoPlayer.d.ts
├── CHANGELOG.md
├── README.md
└── VideoPlayer.js


/.jshintrc:
--------------------------------------------------------------------------------
1 | { "esversion": 6 }
2 | 


--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": ["react-native"]
3 | }
4 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | npm-debug.log
3 | .DS_Store
4 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   root: true,
3 |   extends: "@react-native-community",
4 | };
5 | 


--------------------------------------------------------------------------------
/assets/img/back.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsnubix/react-native-video-controls/HEAD/assets/img/back.png


--------------------------------------------------------------------------------
/assets/img/pause.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsnubix/react-native-video-controls/HEAD/assets/img/pause.png


--------------------------------------------------------------------------------
/assets/img/play.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsnubix/react-native-video-controls/HEAD/assets/img/play.png


--------------------------------------------------------------------------------
/assets/img/back@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsnubix/react-native-video-controls/HEAD/assets/img/back@2x.png


--------------------------------------------------------------------------------
/assets/img/back@3x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsnubix/react-native-video-controls/HEAD/assets/img/back@3x.png


--------------------------------------------------------------------------------
/assets/img/expand.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsnubix/react-native-video-controls/HEAD/assets/img/expand.png


--------------------------------------------------------------------------------
/assets/img/pause@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsnubix/react-native-video-controls/HEAD/assets/img/pause@2x.png


--------------------------------------------------------------------------------
/assets/img/pause@3x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsnubix/react-native-video-controls/HEAD/assets/img/pause@3x.png


--------------------------------------------------------------------------------
/assets/img/play@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsnubix/react-native-video-controls/HEAD/assets/img/play@2x.png


--------------------------------------------------------------------------------
/assets/img/play@3x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsnubix/react-native-video-controls/HEAD/assets/img/play@3x.png


--------------------------------------------------------------------------------
/assets/img/shrink.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsnubix/react-native-video-controls/HEAD/assets/img/shrink.png


--------------------------------------------------------------------------------
/assets/img/volume.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsnubix/react-native-video-controls/HEAD/assets/img/volume.png


--------------------------------------------------------------------------------
/assets/img/error-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsnubix/react-native-video-controls/HEAD/assets/img/error-icon.png


--------------------------------------------------------------------------------
/assets/img/expand@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsnubix/react-native-video-controls/HEAD/assets/img/expand@2x.png


--------------------------------------------------------------------------------
/assets/img/expand@3x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsnubix/react-native-video-controls/HEAD/assets/img/expand@3x.png


--------------------------------------------------------------------------------
/assets/img/shrink@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsnubix/react-native-video-controls/HEAD/assets/img/shrink@2x.png


--------------------------------------------------------------------------------
/assets/img/shrink@3x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsnubix/react-native-video-controls/HEAD/assets/img/shrink@3x.png


--------------------------------------------------------------------------------
/assets/img/volume@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsnubix/react-native-video-controls/HEAD/assets/img/volume@2x.png


--------------------------------------------------------------------------------
/assets/img/volume@3x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsnubix/react-native-video-controls/HEAD/assets/img/volume@3x.png


--------------------------------------------------------------------------------
/assets/img/error-icon@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsnubix/react-native-video-controls/HEAD/assets/img/error-icon@2x.png


--------------------------------------------------------------------------------
/assets/img/error-icon@3x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsnubix/react-native-video-controls/HEAD/assets/img/error-icon@3x.png


--------------------------------------------------------------------------------
/assets/img/loader-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsnubix/react-native-video-controls/HEAD/assets/img/loader-icon.png


--------------------------------------------------------------------------------
/assets/img/top-vignette.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsnubix/react-native-video-controls/HEAD/assets/img/top-vignette.png


--------------------------------------------------------------------------------
/assets/img/bottom-vignette.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsnubix/react-native-video-controls/HEAD/assets/img/bottom-vignette.png


--------------------------------------------------------------------------------
/assets/img/loader-icon@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsnubix/react-native-video-controls/HEAD/assets/img/loader-icon@2x.png


--------------------------------------------------------------------------------
/assets/img/loader-icon@3x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsnubix/react-native-video-controls/HEAD/assets/img/loader-icon@3x.png


--------------------------------------------------------------------------------
/assets/img/top-vignette@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsnubix/react-native-video-controls/HEAD/assets/img/top-vignette@2x.png


--------------------------------------------------------------------------------
/assets/img/top-vignette@3x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsnubix/react-native-video-controls/HEAD/assets/img/top-vignette@3x.png


--------------------------------------------------------------------------------
/assets/img/bottom-vignette@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsnubix/react-native-video-controls/HEAD/assets/img/bottom-vignette@2x.png


--------------------------------------------------------------------------------
/assets/img/bottom-vignette@3x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itsnubix/react-native-video-controls/HEAD/assets/img/bottom-vignette@3x.png


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # OSX
 2 | .DS_Store
 3 | 
 4 | # node.js
 5 | node_modules/
 6 | npm-debug.log
 7 | 
 8 | *.iml
 9 | .idea/
10 | .vscode/
11 | 


--------------------------------------------------------------------------------
/test/package.json:
--------------------------------------------------------------------------------
1 | {"name":"test","version":"0.0.1","private":true,"scripts":{"start":"node node_modules/react-native/local-cli/cli.js start"}}


--------------------------------------------------------------------------------
/.prettierrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   bracketSpacing: false,
3 |   jsxBracketSameLine: true,
4 |   singleQuote: true,
5 |   trailingComma: "all",
6 | };
7 | 


--------------------------------------------------------------------------------
/.github/workflows/ci.yml:
--------------------------------------------------------------------------------
 1 | name: ci
 2 | on: [push, pull_request]
 3 | jobs:
 4 |   build:
 5 |     runs-on: ubuntu-latest
 6 |     steps:
 7 |       - uses: actions/checkout@v2
 8 |       - uses: actions/setup-node@v1
 9 |       - run: npm ci
10 |       - run: npm run lint
11 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-native-video-controls",
 3 |   "version": "2.8.1",
 4 |   "description": "A set of GUI controls for the react-native-video component",
 5 |   "license": "MIT",
 6 |   "main": "VideoPlayer.js",
 7 |   "types": "VideoPlayer.d.ts",
 8 |   "keywords": [
 9 |     "react-native",
10 |     "react-native-video",
11 |     "react video controls",
12 |     "react video player"
13 |   ],
14 |   "scripts": {
15 |     "lint": "eslint .",
16 |     "test": "echo \"No test specified\" && exit 1"
17 |   },
18 |   "author": "Nubix (https://github.com/itsnubix)",
19 |   "repository": {
20 |     "type": "git",
21 |     "url": "git@github.com:itsnubix/react-native-video-controls.git"
22 |   },
23 |   "dependencies": {
24 |     "lodash": "^4.16.4"
25 |   },
26 |   "peerDependencies": {
27 |     "react-native": ">=0.46.0",
28 |     "react-native-video": ">=2.0.0"
29 |   },
30 |   "devDependencies": {
31 |     "@react-native-community/eslint-config": "^0.0.5",
32 |     "eslint": "^6.5.1"
33 |   }
34 | }
35 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2016 Nubix Inc.
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/VideoPlayer.d.ts:
--------------------------------------------------------------------------------
 1 | import {Component} from 'react';
 2 | import {StyleProp, ViewStyle} from 'react-native';
 3 | import Video, {LoadError, VideoProperties} from 'react-native-video';
 4 | 
 5 | interface DuckNavigator {
 6 |   pop: () => void;
 7 | }
 8 | 
 9 | interface VideoPlayerProperties extends VideoProperties {
10 |   /** If true, clicking the fullscreen button will toggle the <Video /> component between cover/contain, set to false if you want to customize fullscreen behaviour */
11 |   toggleResizeModeOnFullscreen?: boolean;
12 |   /** The amountof time (in milliseconds) to animate the controls in and out. */
13 |   controlAnimationTiming?: number;
14 |   /** Tapping twice within this amount of time in milliseconds is considered a double tap. Single taps will not be actioned until this time has expired. */
15 |   doubleTapTime?: number;
16 |   /** Hide controls after X amount of time in milliseconds */
17 |   controlTimeout?: number;
18 |   /** If > 0, enable live scrubbing when moving the seek bar. The provided value is the minimum time step of the scrubbing in milliseconds. */
19 |   scrubbing?: number;
20 |   /** Show or hide the controls on first render */
21 |   showOnStart?: boolean;
22 |   /** React Native StyleSheet object that is appended to the <Video> component */
23 |   videoStyle?: ViewStyle;
24 |   /** When using the default React Native navigator and do not override the onBack function, you'll need to pass the navigator to the VideoPlayer for it to function */
25 |   navigator?: DuckNavigator;
26 |   /** Fill/handle colour of the seekbar */
27 |   seekColor?: string;
28 |   /** React Native StyleSheet object that is appended to the video's parent */
29 |   style?: StyleProp<ViewStyle>;
30 |   /** If true, single tapping anywhere on the video (other than a control) toggles between playing and paused. */
31 |   tapAnywhereToPause?: boolean;
32 |   /** Fired when the video enters fullscreen after the fullscreen button is pressed */
33 |   onEnterFullscreen?: () => void;
34 |   /** Fired when the video exits fullscreen after the fullscreen button is pressed */
35 |   onExitFullscreen?: () => void;
36 |   /** Fired when the controls disappear */
37 |   onHideControls?: () => void;
38 |   /** Fired when the controls appear */
39 |   onShowControls?: () => void;
40 |   /** Fired when an error is encountered when loading the video */
41 |   onError?: (error: LoadError) => void;
42 |   /** Fired when the video is paused after the play/pause button is pressed */
43 |   onPause?: () => void;
44 |   /** Fired when the video begins playing after the play/pause button is pressed */
45 |   onPlay?: () => void;
46 |   /** Function fired when back button is pressed, override if using custom navigation */
47 |   onBack?: () => void;
48 |   /** Fired when the video is complete */
49 |   onEnd?: () => void;
50 |   /** Hide the fullscreen button */
51 |   disableFullscreen?: boolean;
52 |   /** Hide the play/pause toggle */
53 |   disablePlayPause?: boolean;
54 |   /** Hide the seekbar */
55 |   disableSeekbar?: boolean;
56 |   /** Hide the Volume control */
57 |   disableVolume?: boolean;
58 |   /** Hide the timer */
59 |   disableTimer?: boolean;
60 |   /** Hide the back button */
61 |   disableBack?: boolean;
62 | }
63 | 
64 | export default class VideoPlayer extends Component<VideoPlayerProperties> {
65 |   /**
66 |    * Seek to a time in the video.
67 |    *
68 |    * @param {number} time time to seek to in ms
69 |    */
70 |   seekTo(time?: number): void;
71 |   /**
72 |    * Exposing player object for the ref.
73 |    */
74 |   player: {
75 |     /**
76 |      * The ref of underlying Video coomponent from
77 |      * 'react-native-video'.
78 |      * Can be used for various imperative tasks.
79 |      */
80 |     ref: Video;
81 |   };
82 | }
83 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
  1 | ## 2.5.1 (17-05-2020)
  2 | 
  3 | [#177](https://github.com/itsnubix/react-native-video-controls/pull/177)
  4 | 
  5 | ## 2.5.0 (16-05-2020)
  6 | 
  7 | Linting
  8 | 
  9 | Add show/hide callbacks [#164](https://github.com/itsnubix/react-native-video-controls/issues/164)
 10 | 
 11 | Add ability to set controlAnimationTiming [#172](https://github.com/itsnubix/react-native-video-controls/issues/172)
 12 | 
 13 | Fix for useNativeDriver animations [#178](https://github.com/itsnubix/react-native-video-controls/issues/178)
 14 | 
 15 | ## 2.4.0 (??-??-2020)
 16 | 
 17 | At some point this got bumped to 2.4.0... ¯\\\_(ツ)\_/¯
 18 | 
 19 | ## 2.3.0 (07-11-2019)
 20 | 
 21 | Fix for notched phone [#144](https://github.com/itsnubix/react-native-video-controls/issues/144)
 22 | 
 23 | Fix initialized seekerWidth [#143](https://github.com/itsnubix/react-native-video-controls/pull/143)
 24 | 
 25 | Increase lodash version [#157](https://github.com/itsnubix/react-native-video-controls/pull/157)
 26 | 
 27 | ## 2.2.2 (22-03-2018)
 28 | 
 29 | Update the readme
 30 | 
 31 | ## 2.2.1 (22-03-2018)
 32 | 
 33 | Fix for [#86](https://github.com/itsnubix/react-native-video-controls/issues/86)
 34 | 
 35 | - Added `toggleResizeModeOnFullscreen` prop which defaults to `true`
 36 | 
 37 | ## 2.2.0 (14-03-2018)
 38 | 
 39 | Added in new event hooks for users to take advantage of... These are: onPlay, onPause, onEnterFullscreen and onExitFullscreen. Shout out to **@dashracer** and **@Gregoirevda**.
 40 | 
 41 | ## 2.1.0 (23-02-2018)
 42 | 
 43 | Added in `disablePlayPause` and `showOnStart` props. Shout out to **@afilp** and **@batusai513**.
 44 | 
 45 | ## 2.0.2 (11-01-2018)
 46 | 
 47 | Fix for [#67](https://github.com/itsnubix/react-native-video-controls/issues/67)
 48 | 
 49 | - Changed renderNullControl to return empty `<View/>`
 50 | 
 51 | ## 2.0.1 (12-12-2017)
 52 | 
 53 | Fix for [#58](https://github.com/itsnubix/react-native-video-controls/issues/58)
 54 | 
 55 | ## 2.0.0 (02-11-2017)
 56 | 
 57 | Update peer deps and version up.
 58 | 
 59 | ## 1.5.1 (01-11-2017)
 60 | 
 61 | - [Fixed deprecation of Image tag containing children](https://github.com/itsnubix/react-native-video-controls/issues/55)
 62 | 
 63 | ## 1.5.0 (27-10-2017)
 64 | 
 65 | - [Added ability to remove controls](https://github.com/itsnubix/react-native-video-controls/pull/50)
 66 | - [Added ability to pass props](https://github.com/itsnubix/react-native-video-controls/pull/52)
 67 | 
 68 | ## 1.4.1 (30-08-2017)
 69 | 
 70 | Bug fixes. Updated `react-native-video` to ^2.0.0 in the peer deps and `react-native` to 47.2. Changed default title font size to 14.
 71 | 
 72 | [#42](https://github.com/itsnubix/react-native-video-controls/issues/42)
 73 | 
 74 | - Related to a number of things...hitbox size, zIndex, overflow for whatever reason. Seekbar layout has been rebuilt and tested in both iOS and Android.
 75 | 
 76 | [#46](https://github.com/itsnubix/react-native-video-controls/issues/46)
 77 | 
 78 | - Props were being assigned twice. Removing second assignment has resolved the issue.
 79 | 
 80 | ## 1.4.0 (09-08-2017)
 81 | 
 82 | Distilled down some merge requests and found a simple solution to a seekbar issue reported. Sometimes you just gotta give your elements a little more space. Let this be a lesson not to rush out push requests between meetings...I think this warrants a larger version change...you can now pass any prop to the `<VideoPlayer>` element and it'll pass those to `react-native-video`. API changes quite a lot because of that but shouldn't break.
 83 | 
 84 | ## 1.3.1 (09-08-2017)
 85 | 
 86 | [#35](https://github.com/itsnubix/react-native-video-controls/pull/35)
 87 | 
 88 | - Fix flex issue with Android
 89 | 
 90 | [#38](https://github.com/itsnubix/react-native-video-controls/pull/38)
 91 | 
 92 | - Added additional RN Video params to opts call
 93 | 
 94 | ## 1.3.0 (17-07-2017)
 95 | 
 96 | [#30](https://github.com/itsnubix/react-native-video-controls/issues/30)
 97 | 
 98 | - Add `react-native-video` as a peer-dependency
 99 | 
100 | ## 1.2.1 (29-06-2017)
101 | 
102 | [#26](https://github.com/itsnubix/react-native-video-controls/issues/26)
103 | 
104 | - Floor time values to prevent wrong time being displayed.
105 | 
106 | ## 1.2.0 (20-03-2017)
107 | 
108 | [#14](https://github.com/itsnubix/react-native-video-controls/issues/14)
109 | 
110 | - Remove ability for loading events to be altered
111 | 
112 | [#19](https://github.com/itsnubix/react-native-video-controls/issues/19)
113 | 
114 | - Updated requirements to RN 0.42.x and RN Video 1.0.0
115 | 
116 | ## 1.1.1 (23-12-2016)
117 | 
118 | Restore playInBackground and playWhenInactive
119 | 
120 | ## 1.1.0 (23-12-2016)
121 | 
122 | Updated to work with react-native ^0.39.2.
123 | 
124 | ### Bug fixes
125 | 
126 | [fix loadAnimation infinity loop](https://github.com/itsnubix/react-native-video-controls/pull/13)
127 | 
128 | - added if statement to loadAnimation function to prevent loop
129 | 
130 | [Crashes with New version of react-native-video](https://github.com/itsnubix/react-native-video-controls/issues/12)
131 | 
132 | - using latest github version of `react-native-video` to fix multiple issues with RN 39
133 | 
134 | ## 1.0.1 (29-11-2016)
135 | 
136 | ### Features
137 | 
138 | Add ability to set seeker bar colour
139 | 
140 | ### Bug fixes
141 | 
142 | [When seeking sometimes seek handle hops back to original position](https://github.com/itsnubix/react-native-video-controls/issues/9)
143 | 
144 | ## 1.0.0 (29-11-2016)
145 | 
146 | Bump to 1.0.0 as all major issues are fixed and API has changed slightly.
147 | 
148 | ## 0.9.8 (28-11-2016)
149 | 
150 | ### Bug fixes
151 | 
152 | [Seeking before onLoad triggers onEnd](https://github.com/itsnubix/react-native-video-controls/issues/8)
153 | 
154 | - modified pan handler to also look for if loading state which is set to false on init and changed when onLoad fired.
155 | 
156 | [setState being called when window off screen](https://github.com/itsnubix/react-native-video-controls/issues/7)
157 | 
158 | - added componentWillUnmount function to clear controlTimeout
159 | - Note that if using react router componentWillUnmount will not fire unless you configure it to. See [this ticket](https://github.com/aksonov/react-native-router-flux/issues/131)
160 | 
161 | [If title is too long it runs off the page.](https://github.com/itsnubix/react-native-video-controls/issues/6)
162 | 
163 | - added flex 0.6 to size and restricted number of lines to 1. If it exceeds you'll get tail ellipsis
164 | 
165 | ## 0.9.7 (21-11-2016)
166 | 
167 | ### Changes
168 | 
169 | - Aesthetic changes made with regards to spacing in the bottom control group
170 | - Tightened up space in the upper group as well.
171 | 
172 | ### Features
173 | 
174 | - Changed control timeout to 15s by default. Allow the ability to overwrite. See API.
175 | - Added ability to add container and video styling
176 | 
177 | ## 0.9.6 (15-11-2016)
178 | 
179 | ### Bug fixes
180 | 
181 | [Clean up file Structure](https://github.com/itsnubix/react-native-video-controls/issues/5):
182 | 
183 | - cleaned up deps and files included.
184 | 
185 | ## 0.9.5 (14-11-2016)
186 | 
187 | ### Bug fixes
188 | 
189 | [Tapping controls doesn't reset control hide timeout](https://github.com/itsnubix/react-native-video-controls/issues/1):
190 | 
191 | - add resets to panhandlers for volume/seek areas
192 | - add resets to renderControl function onPress params.
193 | 
194 | [Control backgrounds should be gradients](https://github.com/itsnubix/react-native-video-controls/issues/2)
195 | 
196 | - Changed vignette assets to be more subtle.
197 | - Added stretch to resizeMode
198 | 
199 | [Volume track bar is visible through volume icon](https://github.com/itsnubix/react-native-video-controls/issues/3)
200 | 
201 | - Rebuilt volume area to be four parts. Container (ctrls max width), track (right side of icon), fill (left side of icon) and the handle (icon).
202 | - Added calculation to measure fill bar width and then subtract that from the width and assign to track bar on right side of icon.
203 | - Long story short, the icon now masks the volume bar.
204 | 
205 | [Clean up file structure](https://github.com/itsnubix/react-native-video-controls/issues/5)
206 | 
207 | ### Features
208 | 
209 | - Added loading icon when buffering movie
210 | - Add error handling, ref: [Issue #4](https://github.com/itsnubix/react-native-video-controls/issues/4)
211 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # react-native-video-controls
  2 | 
  3 | [![ci][1]][2]
  4 | 
  5 | Controls for the React Native `<Video>` component at [react-native-video](https://github.com/react-native-community/react-native-video). For support with RN 0.45 or lower use version 1.3.1 or lower.
  6 | 
  7 | ## Features
  8 | 
  9 | This package contains a simple set of GUI controls that work with the [react-native-video](https://github.com/react-native-community/react-native-video) `<Video>` component. This includes a back button, volume bar, fullscreen toggle, play/pause toggle, seekbar, title, error handling and timer toggle that can switch between time remaining and current time when tapped.
 10 | 
 11 | ![How it looks](https://s3-us-west-2.amazonaws.com/nubix.ca/github/example.gif)
 12 | 
 13 | By default the `<VideoPlayer>` accepts a navigator property from React's built-in `<Navigator>` which pops the current scene off the stack when tapped. Alternatively you can provide your own onBack prop to the component to override this functionality. You should also provide your own onEnd prop to the component so it knows what to do when a video ends playback.
 14 | 
 15 | By default, tapping the screen anywhere will show the player controls. After 10s the controls disappear. Double tapping will toggle fullscreen.
 16 | 
 17 | ## Installation
 18 | 
 19 | Run `npm install --save react-native-video react-native-video-controls`
 20 | 
 21 | Then run `react-native link react-native-video`
 22 | 
 23 | If you're using RN < 39 run `npm install --save react-native-video-controls@1.0.1`. Note this version includes `react-native-video` as a normal dependency instead of a peer-dependency.
 24 | 
 25 | ## Usage
 26 | 
 27 | The `<VideoPlayer>` component follows the API of the `<Video>` component at [react-native-video](https://github.com/react-native-community/react-native-video). It also takes a number of additional props which are outlined in the [API](#api) section.
 28 | 
 29 | For basic operation the `<VideoPlayer>` component requires a video source and a navigator property. The default back button functionality in the component relies on using the built-in `<Navigator>` functionality in React Native and pops the current scene off the stack. This can be overridden if desired, see the [API](#api) for more details.
 30 | 
 31 | ```javascript
 32 | // At the top where our imports are...
 33 | import VideoPlayer from 'react-native-video-controls';
 34 | 
 35 | // in the component's render() function
 36 | <VideoPlayer
 37 |   source={{uri: 'https://vjs.zencdn.net/v/oceans.mp4'}}
 38 |   navigator={this.props.navigator}
 39 | />;
 40 | ```
 41 | 
 42 | To play a local file, use require syntax like so:
 43 | 
 44 | ```js
 45 | <VideoPlayer source={require('path/to/file')} />
 46 | ```
 47 | 
 48 | ## API
 49 | 
 50 | The `<VideoPlayer>` component can take a number of inputs to customize it as needed. They are outlined below:
 51 | 
 52 | ### Props
 53 | 
 54 | You can pass any of the props that the `<Video />` component at [react-native-video](https://github.com/react-native-community/react-native-video) takes. Simply add them onto the `<VideoPlayer />` and it will pass them through to the `<Video />` component.
 55 | 
 56 | In addition, the `<VideoPlayer />` also takes these props:
 57 | 
 58 | | Prop                         | Type         | Default | Description                                                                                                                                                      |
 59 | | ---------------------------- | ------------ | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 60 | | toggleResizeModeOnFullscreen | Boolean      | true    | If true, clicking the fullscreen button will toggle the `<Video />` component between cover/contain, set to false if you want to customize fullscreen behaviour  |
 61 | | controlAnimationTiming       | Integer      | 500     | The amountof time (in milliseconds) to animate the controls in and out.                                                                                          |
 62 | | doubleTapTime                | Integer      | 130     | Tapping twice within this amount of time in milliseconds is considered a double tap. Single taps will not be actioned until this time has expired.               |
 63 | | controlTimeout               | Integer      | 15000   | Hide controls after X amount of time in milliseconds                                                                                                             |
 64 | | scrubbing                    | Integer      | 0       | If > 0, enable live scrubbing when moving the seek bar. The provided value is the minimum time step of the scrubbing in milliseconds.                            |
 65 | | showOnStart                  | Boolean      | true    | Show or hide the controls on first render                                                                                                                        |
 66 | | videoStyle                   | StyleSheet   | null    | React Native StyleSheet object that is appended to the `<Video>` component                                                                                       |
 67 | | navigator                    | Navigator    | null    | When using the default React Native navigator and do not override the `onBack` function, you'll need to pass the navigator to the VideoPlayer for it to function |
 68 | | seekColor                    | String(#HEX) | '#FFF'  | Fill/handle colour of the seekbar                                                                                                                                |
 69 | | style                        | StyleSheet   | null    | React Native StyleSheet object that is appended to the video's parent `<View>`                                                                                   |
 70 | | tapAnywhereToPause           | Boolean      | false   | If true, single tapping anywhere on the video (other than a control) toggles between playing and paused.                                                         |
 71 | 
 72 | | showTimeRemaining            | Boolean      | true    | If true, show the time remaing, else show the current time in the Player.
 73 | `<View>`
 74 | 
 75 | | showHours                    | Boolean      | false   | If true, convert time to hours in the Player
 76 | `<View>`
 77 | 
 78 | ### Events
 79 | 
 80 | These are various events that you can hook into and fire functions on in the component:
 81 | 
 82 | | Callback          | Description                                                                     |
 83 | | ----------------- | ------------------------------------------------------------------------------- |
 84 | | onEnterFullscreen | Fired when the video enters fullscreen after the fullscreen button is pressed   |
 85 | | onExitFullscreen  | Fired when the video exits fullscreen after the fullscreen button is pressed    |
 86 | | onHideControls    | Fired when the controls disappear                                               |
 87 | | onShowControls    | Fired when the controls appear                                                  |
 88 | | onError           | Fired when an error is encountered when loading the video                       |
 89 | | onPause           | Fired when the video is paused after the play/pause button is pressed           |
 90 | | onPlay            | Fired when the video begins playing after the play/pause button is pressed      |
 91 | | onBack            | Function fired when back button is pressed, override if using custom navigation |
 92 | | onEnd             | Fired when the video is complete                                                |
 93 | 
 94 | ### Controls
 95 | 
 96 | These are the various controls that you can turn on/off as needed. All of these props default to false, override them to disable any controls
 97 | 
 98 | | Control           | Description                |
 99 | | ----------------- | -------------------------- |
100 | | disableFullscreen | Hide the fullscreen button |
101 | | disablePlayPause  | Hide the play/pause toggle |
102 | | disableSeekbar    | Hide the seekbar           |
103 | | disableVolume     | Hide the Volume control    |
104 | | disableTimer      | Hide the timer             |
105 | | disableBack       | Hide the back button       |
106 | 
107 | [1]: https://github.com/itsnubix/react-native-video-controls/workflows/ci/badge.svg
108 | [2]: https://github.com/itsnubix/react-native-video-controls/actions
109 | 


--------------------------------------------------------------------------------
/VideoPlayer.js:
--------------------------------------------------------------------------------
   1 | import React, {Component} from 'react';
   2 | import Video from 'react-native-video';
   3 | import {
   4 |   TouchableWithoutFeedback,
   5 |   TouchableHighlight,
   6 |   ImageBackground,
   7 |   PanResponder,
   8 |   StyleSheet,
   9 |   Animated,
  10 |   SafeAreaView,
  11 |   Easing,
  12 |   Image,
  13 |   View,
  14 |   Text,
  15 | } from 'react-native';
  16 | import padStart from 'lodash/padStart';
  17 | 
  18 | export default class VideoPlayer extends Component {
  19 |   static defaultProps = {
  20 |     toggleResizeModeOnFullscreen: true,
  21 |     controlAnimationTiming: 500,
  22 |     doubleTapTime: 130,
  23 |     playInBackground: false,
  24 |     playWhenInactive: false,
  25 |     resizeMode: 'contain',
  26 |     isFullscreen: false,
  27 |     showOnStart: true,
  28 |     paused: false,
  29 |     repeat: false,
  30 |     muted: false,
  31 |     volume: 1,
  32 |     title: '',
  33 |     rate: 1,
  34 |     showTimeRemaining: true,
  35 |     showHours: false,
  36 |   };
  37 | 
  38 |   constructor(props) {
  39 |     super(props);
  40 | 
  41 |     /**
  42 |      * All of our values that are updated by the
  43 |      * methods and listeners in this class
  44 |      */
  45 |     this.state = {
  46 |       // Video
  47 |       resizeMode: this.props.resizeMode,
  48 |       paused: this.props.paused,
  49 |       muted: this.props.muted,
  50 |       volume: this.props.volume,
  51 |       rate: this.props.rate,
  52 |       // Controls
  53 | 
  54 |       isFullscreen:
  55 |         this.props.isFullScreen || this.props.resizeMode === 'cover' || false,
  56 |       showTimeRemaining: this.props.showTimeRemaining,
  57 |       showHours: this.props.showHours,
  58 |       volumeTrackWidth: 0,
  59 |       volumeFillWidth: 0,
  60 |       seekerFillWidth: 0,
  61 |       showControls: this.props.showOnStart,
  62 |       volumePosition: 0,
  63 |       seekerPosition: 0,
  64 |       volumeOffset: 0,
  65 |       seekerOffset: 0,
  66 |       seeking: false,
  67 |       originallyPaused: false,
  68 |       scrubbing: false,
  69 |       loading: false,
  70 |       currentTime: 0,
  71 |       error: false,
  72 |       duration: 0,
  73 |     };
  74 | 
  75 |     /**
  76 |      * Any options that can be set at init.
  77 |      */
  78 |     this.opts = {
  79 |       playWhenInactive: this.props.playWhenInactive,
  80 |       playInBackground: this.props.playInBackground,
  81 |       repeat: this.props.repeat,
  82 |       title: this.props.title,
  83 |     };
  84 | 
  85 |     /**
  86 |      * Our app listeners and associated methods
  87 |      */
  88 |     this.events = {
  89 |       onError: this.props.onError || this._onError.bind(this),
  90 |       onBack: this.props.onBack || this._onBack.bind(this),
  91 |       onEnd: this.props.onEnd || this._onEnd.bind(this),
  92 |       onScreenTouch: this._onScreenTouch.bind(this),
  93 |       onEnterFullscreen: this.props.onEnterFullscreen,
  94 |       onExitFullscreen: this.props.onExitFullscreen,
  95 |       onShowControls: this.props.onShowControls,
  96 |       onHideControls: this.props.onHideControls,
  97 |       onLoadStart: this._onLoadStart.bind(this),
  98 |       onProgress: this._onProgress.bind(this),
  99 |       onSeek: this._onSeek.bind(this),
 100 |       onLoad: this._onLoad.bind(this),
 101 |       onPause: this.props.onPause,
 102 |       onPlay: this.props.onPlay,
 103 |     };
 104 | 
 105 |     /**
 106 |      * Functions used throughout the application
 107 |      */
 108 |     this.methods = {
 109 |       toggleFullscreen: this._toggleFullscreen.bind(this),
 110 |       togglePlayPause: this._togglePlayPause.bind(this),
 111 |       toggleControls: this._toggleControls.bind(this),
 112 |       toggleTimer: this._toggleTimer.bind(this),
 113 |     };
 114 | 
 115 |     /**
 116 |      * Player information
 117 |      */
 118 |     this.player = {
 119 |       controlTimeoutDelay: this.props.controlTimeout || 15000,
 120 |       volumePanResponder: PanResponder,
 121 |       seekPanResponder: PanResponder,
 122 |       controlTimeout: null,
 123 |       tapActionTimeout: null,
 124 |       volumeWidth: 150,
 125 |       iconOffset: 0,
 126 |       seekerWidth: 0,
 127 |       ref: Video,
 128 |       scrubbingTimeStep: this.props.scrubbing || 0,
 129 |       tapAnywhereToPause: this.props.tapAnywhereToPause,
 130 |     };
 131 | 
 132 |     /**
 133 |      * Various animations
 134 |      */
 135 |     const initialValue = this.props.showOnStart ? 1 : 0;
 136 | 
 137 |     this.animations = {
 138 |       bottomControl: {
 139 |         marginBottom: new Animated.Value(0),
 140 |         opacity: new Animated.Value(initialValue),
 141 |       },
 142 |       topControl: {
 143 |         marginTop: new Animated.Value(0),
 144 |         opacity: new Animated.Value(initialValue),
 145 |       },
 146 |       video: {
 147 |         opacity: new Animated.Value(1),
 148 |       },
 149 |       loader: {
 150 |         rotate: new Animated.Value(0),
 151 |         MAX_VALUE: 360,
 152 |       },
 153 |     };
 154 | 
 155 |     /**
 156 |      * Various styles that be added...
 157 |      */
 158 |     this.styles = {
 159 |       videoStyle: this.props.videoStyle || {},
 160 |       containerStyle: this.props.style || {},
 161 |     };
 162 |   }
 163 | 
 164 |   componentDidUpdate = prevProps => {
 165 |     const {isFullscreen} = this.props;
 166 | 
 167 |     if (prevProps.isFullscreen !== isFullscreen) {
 168 |       this.setState({
 169 |         isFullscreen,
 170 |       });
 171 |     }
 172 |   };
 173 |   /**
 174 |     | -------------------------------------------------------
 175 |     | Events
 176 |     | -------------------------------------------------------
 177 |     |
 178 |     | These are the events that the <Video> component uses
 179 |     | and can be overridden by assigning it as a prop.
 180 |     | It is suggested that you override onEnd.
 181 |     |
 182 |     */
 183 | 
 184 |   /**
 185 |    * When load starts we display a loading icon
 186 |    * and show the controls.
 187 |    */
 188 |   _onLoadStart() {
 189 |     let state = this.state;
 190 |     state.loading = true;
 191 |     this.loadAnimation();
 192 |     this.setState(state);
 193 | 
 194 |     if (typeof this.props.onLoadStart === 'function') {
 195 |       this.props.onLoadStart(...arguments);
 196 |     }
 197 |   }
 198 | 
 199 |   /**
 200 |    * When load is finished we hide the load icon
 201 |    * and hide the controls. We also set the
 202 |    * video duration.
 203 |    *
 204 |    * @param {object} data The video meta data
 205 |    */
 206 |   _onLoad(data = {}) {
 207 |     let state = this.state;
 208 | 
 209 |     state.duration = data.duration;
 210 |     state.loading = false;
 211 |     this.setState(state);
 212 | 
 213 |     if (state.showControls) {
 214 |       this.setControlTimeout();
 215 |     }
 216 | 
 217 |     if (typeof this.props.onLoad === 'function') {
 218 |       this.props.onLoad(...arguments);
 219 |     }
 220 |   }
 221 | 
 222 |   /**
 223 |    * For onprogress we fire listeners that
 224 |    * update our seekbar and timer.
 225 |    *
 226 |    * @param {object} data The video meta data
 227 |    */
 228 |   _onProgress(data = {}) {
 229 |     let state = this.state;
 230 |     if (!state.scrubbing) {
 231 |       state.currentTime = data.currentTime;
 232 | 
 233 |       if (!state.seeking) {
 234 |         const position = this.calculateSeekerPosition();
 235 |         this.setSeekerPosition(position);
 236 |       }
 237 | 
 238 |       if (typeof this.props.onProgress === 'function') {
 239 |         this.props.onProgress(...arguments);
 240 |       }
 241 | 
 242 |       this.setState(state);
 243 |     }
 244 |   }
 245 | 
 246 |   /**
 247 |    * For onSeek we clear scrubbing if set.
 248 |    *
 249 |    * @param {object} data The video meta data
 250 |    */
 251 |   _onSeek(data = {}) {
 252 |     let state = this.state;
 253 |     if (state.scrubbing) {
 254 |       state.scrubbing = false;
 255 |       state.currentTime = data.currentTime;
 256 | 
 257 |       // Seeking may be false here if the user released the seek bar while the player was still processing
 258 |       // the last seek command. In this case, perform the steps that have been postponed.
 259 |       if (!state.seeking) {
 260 |         this.setControlTimeout();
 261 |         state.paused = state.originallyPaused;
 262 |       }
 263 | 
 264 |       this.setState(state);
 265 |     }
 266 |   }
 267 | 
 268 |   /**
 269 |    * It is suggested that you override this
 270 |    * command so your app knows what to do.
 271 |    * Either close the video or go to a
 272 |    * new page.
 273 |    */
 274 |   _onEnd() {}
 275 | 
 276 |   /**
 277 |    * Set the error state to true which then
 278 |    * changes our renderError function
 279 |    *
 280 |    * @param {object} err  Err obj returned from <Video> component
 281 |    */
 282 |   _onError(err) {
 283 |     let state = this.state;
 284 |     state.error = true;
 285 |     state.loading = false;
 286 | 
 287 |     this.setState(state);
 288 |   }
 289 | 
 290 |   /**
 291 |    * This is a single and double tap listener
 292 |    * when the user taps the screen anywhere.
 293 |    * One tap toggles controls and/or toggles pause,
 294 |    * two toggles fullscreen mode.
 295 |    */
 296 |   _onScreenTouch() {
 297 |     if (this.player.tapActionTimeout) {
 298 |       clearTimeout(this.player.tapActionTimeout);
 299 |       this.player.tapActionTimeout = 0;
 300 |       this.methods.toggleFullscreen();
 301 |       const state = this.state;
 302 |       if (state.showControls) {
 303 |         this.resetControlTimeout();
 304 |       }
 305 |     } else {
 306 |       this.player.tapActionTimeout = setTimeout(() => {
 307 |         const state = this.state;
 308 |         if (this.player.tapAnywhereToPause && state.showControls) {
 309 |           this.methods.togglePlayPause();
 310 |           this.resetControlTimeout();
 311 |         } else {
 312 |           this.methods.toggleControls();
 313 |         }
 314 |         this.player.tapActionTimeout = 0;
 315 |       }, this.props.doubleTapTime);
 316 |     }
 317 |   }
 318 | 
 319 |   /**
 320 |     | -------------------------------------------------------
 321 |     | Methods
 322 |     | -------------------------------------------------------
 323 |     |
 324 |     | These are all of our functions that interact with
 325 |     | various parts of the class. Anything from
 326 |     | calculating time remaining in a video
 327 |     | to handling control operations.
 328 |     |
 329 |     */
 330 | 
 331 |   /**
 332 |    * Set a timeout when the controls are shown
 333 |    * that hides them after a length of time.
 334 |    * Default is 15s
 335 |    */
 336 |   setControlTimeout() {
 337 |     this.player.controlTimeout = setTimeout(() => {
 338 |       this._hideControls();
 339 |     }, this.player.controlTimeoutDelay);
 340 |   }
 341 | 
 342 |   /**
 343 |    * Clear the hide controls timeout.
 344 |    */
 345 |   clearControlTimeout() {
 346 |     clearTimeout(this.player.controlTimeout);
 347 |   }
 348 | 
 349 |   /**
 350 |    * Reset the timer completely
 351 |    */
 352 |   resetControlTimeout() {
 353 |     this.clearControlTimeout();
 354 |     this.setControlTimeout();
 355 |   }
 356 | 
 357 |   /**
 358 |    * Animation to hide controls. We fade the
 359 |    * display to 0 then move them off the
 360 |    * screen so they're not interactable
 361 |    */
 362 |   hideControlAnimation() {
 363 |     Animated.parallel([
 364 |       Animated.timing(this.animations.topControl.opacity, {
 365 |         toValue: 0,
 366 |         duration: this.props.controlAnimationTiming,
 367 |         useNativeDriver: false,
 368 |       }),
 369 |       Animated.timing(this.animations.topControl.marginTop, {
 370 |         toValue: -100,
 371 |         duration: this.props.controlAnimationTiming,
 372 |         useNativeDriver: false,
 373 |       }),
 374 |       Animated.timing(this.animations.bottomControl.opacity, {
 375 |         toValue: 0,
 376 |         duration: this.props.controlAnimationTiming,
 377 |         useNativeDriver: false,
 378 |       }),
 379 |       Animated.timing(this.animations.bottomControl.marginBottom, {
 380 |         toValue: -100,
 381 |         duration: this.props.controlAnimationTiming,
 382 |         useNativeDriver: false,
 383 |       }),
 384 |     ]).start();
 385 |   }
 386 | 
 387 |   /**
 388 |    * Animation to show controls...opposite of
 389 |    * above...move onto the screen and then
 390 |    * fade in.
 391 |    */
 392 |   showControlAnimation() {
 393 |     Animated.parallel([
 394 |       Animated.timing(this.animations.topControl.opacity, {
 395 |         toValue: 1,
 396 |         useNativeDriver: false,
 397 |         duration: this.props.controlAnimationTiming,
 398 |       }),
 399 |       Animated.timing(this.animations.topControl.marginTop, {
 400 |         toValue: 0,
 401 |         useNativeDriver: false,
 402 |         duration: this.props.controlAnimationTiming,
 403 |       }),
 404 |       Animated.timing(this.animations.bottomControl.opacity, {
 405 |         toValue: 1,
 406 |         useNativeDriver: false,
 407 |         duration: this.props.controlAnimationTiming,
 408 |       }),
 409 |       Animated.timing(this.animations.bottomControl.marginBottom, {
 410 |         toValue: 0,
 411 |         useNativeDriver: false,
 412 |         duration: this.props.controlAnimationTiming,
 413 |       }),
 414 |     ]).start();
 415 |   }
 416 | 
 417 |   /**
 418 |    * Loop animation to spin loader icon. If not loading then stop loop.
 419 |    */
 420 |   loadAnimation() {
 421 |     if (this.state.loading) {
 422 |       Animated.sequence([
 423 |         Animated.timing(this.animations.loader.rotate, {
 424 |           toValue: this.animations.loader.MAX_VALUE,
 425 |           duration: 1500,
 426 |           easing: Easing.linear,
 427 |           useNativeDriver: false,
 428 |         }),
 429 |         Animated.timing(this.animations.loader.rotate, {
 430 |           toValue: 0,
 431 |           duration: 0,
 432 |           easing: Easing.linear,
 433 |           useNativeDriver: false,
 434 |         }),
 435 |       ]).start(this.loadAnimation.bind(this));
 436 |     }
 437 |   }
 438 | 
 439 |   /**
 440 |    * Function to hide the controls. Sets our
 441 |    * state then calls the animation.
 442 |    */
 443 |   _hideControls() {
 444 |     if (this.mounted) {
 445 |       let state = this.state;
 446 |       state.showControls = false;
 447 |       this.hideControlAnimation();
 448 |       typeof this.events.onHideControls === 'function' &&
 449 |         this.events.onHideControls();
 450 | 
 451 |       this.setState(state);
 452 |     }
 453 |   }
 454 | 
 455 |   /**
 456 |    * Function to toggle controls based on
 457 |    * current state.
 458 |    */
 459 |   _toggleControls() {
 460 |     let state = this.state;
 461 |     state.showControls = !state.showControls;
 462 | 
 463 |     if (state.showControls) {
 464 |       this.showControlAnimation();
 465 |       this.setControlTimeout();
 466 |       typeof this.events.onShowControls === 'function' &&
 467 |         this.events.onShowControls();
 468 |     } else {
 469 |       this.hideControlAnimation();
 470 |       this.clearControlTimeout();
 471 |       typeof this.events.onHideControls === 'function' &&
 472 |         this.events.onHideControls();
 473 |     }
 474 | 
 475 |     this.setState(state);
 476 |   }
 477 | 
 478 |   /**
 479 |    * Toggle fullscreen changes resizeMode on
 480 |    * the <Video> component then updates the
 481 |    * isFullscreen state.
 482 |    */
 483 |   _toggleFullscreen() {
 484 |     let state = this.state;
 485 | 
 486 |     state.isFullscreen = !state.isFullscreen;
 487 | 
 488 |     if (this.props.toggleResizeModeOnFullscreen) {
 489 |       state.resizeMode = state.isFullscreen === true ? 'cover' : 'contain';
 490 |     }
 491 | 
 492 |     if (state.isFullscreen) {
 493 |       typeof this.events.onEnterFullscreen === 'function' &&
 494 |         this.events.onEnterFullscreen();
 495 |     } else {
 496 |       typeof this.events.onExitFullscreen === 'function' &&
 497 |         this.events.onExitFullscreen();
 498 |     }
 499 | 
 500 |     this.setState(state);
 501 |   }
 502 | 
 503 |   /**
 504 |    * Toggle playing state on <Video> component
 505 |    */
 506 |   _togglePlayPause() {
 507 |     let state = this.state;
 508 |     state.paused = !state.paused;
 509 | 
 510 |     if (state.paused) {
 511 |       typeof this.events.onPause === 'function' && this.events.onPause();
 512 |     } else {
 513 |       typeof this.events.onPlay === 'function' && this.events.onPlay();
 514 |     }
 515 | 
 516 |     this.setState(state);
 517 |   }
 518 | 
 519 |   /**
 520 |    * Toggle between showing time remaining or
 521 |    * video duration in the timer control
 522 |    */
 523 |   _toggleTimer() {
 524 |     let state = this.state;
 525 |     state.showTimeRemaining = !state.showTimeRemaining;
 526 |     this.setState(state);
 527 |   }
 528 | 
 529 |   /**
 530 |    * The default 'onBack' function pops the navigator
 531 |    * and as such the video player requires a
 532 |    * navigator prop by default.
 533 |    */
 534 |   _onBack() {
 535 |     if (this.props.navigator && this.props.navigator.pop) {
 536 |       this.props.navigator.pop();
 537 |     } else {
 538 |       console.warn(
 539 |         'Warning: _onBack requires navigator property to function. Either modify the onBack prop or pass a navigator prop',
 540 |       );
 541 |     }
 542 |   }
 543 | 
 544 |   /**
 545 |    * Calculate the time to show in the timer area
 546 |    * based on if they want to see time remaining
 547 |    * or duration. Formatted to look as 00:00.
 548 |    */
 549 |   calculateTime() {
 550 |     if (this.state.showTimeRemaining) {
 551 |       const time = this.state.duration - this.state.currentTime;
 552 |       return `-${this.formatTime(time)}`;
 553 |     }
 554 | 
 555 |     return this.formatTime(this.state.currentTime);
 556 |   }
 557 | 
 558 |   /**
 559 |    * Format a time string as mm:ss
 560 |    *
 561 |    * @param {int} time time in milliseconds
 562 |    * @return {string} formatted time string in mm:ss format
 563 |    */
 564 |   formatTime(time = 0) {
 565 |     const symbol = this.state.showRemainingTime ? '-' : '';
 566 |     time = Math.min(Math.max(time, 0), this.state.duration);
 567 | 
 568 |     if (!this.state.showHours) {
 569 |       const formattedMinutes = padStart(Math.floor(time / 60).toFixed(0), 2, 0);
 570 |       const formattedSeconds = padStart(Math.floor(time % 60).toFixed(0), 2, 0);
 571 | 
 572 |       return `${symbol}${formattedMinutes}:${formattedSeconds}`;
 573 |     }
 574 | 
 575 |     const formattedHours = padStart(Math.floor(time / 3600).toFixed(0), 2, 0);
 576 |     const formattedMinutes = padStart(
 577 |       (Math.floor(time / 60) % 60).toFixed(0),
 578 |       2,
 579 |       0,
 580 |     );
 581 |     const formattedSeconds = padStart(Math.floor(time % 60).toFixed(0), 2, 0);
 582 | 
 583 |     return `${symbol}${formattedHours}:${formattedMinutes}:${formattedSeconds}`;
 584 |   }
 585 | 
 586 |   /**
 587 |    * Set the position of the seekbar's components
 588 |    * (both fill and handle) according to the
 589 |    * position supplied.
 590 |    *
 591 |    * @param {float} position position in px of seeker handle}
 592 |    */
 593 |   setSeekerPosition(position = 0) {
 594 |     let state = this.state;
 595 |     position = this.constrainToSeekerMinMax(position);
 596 | 
 597 |     state.seekerFillWidth = position;
 598 |     state.seekerPosition = position;
 599 | 
 600 |     if (!state.seeking) {
 601 |       state.seekerOffset = position;
 602 |     }
 603 | 
 604 |     this.setState(state);
 605 |   }
 606 | 
 607 |   /**
 608 |    * Constrain the location of the seeker to the
 609 |    * min/max value based on how big the
 610 |    * seeker is.
 611 |    *
 612 |    * @param {float} val position of seeker handle in px
 613 |    * @return {float} constrained position of seeker handle in px
 614 |    */
 615 |   constrainToSeekerMinMax(val = 0) {
 616 |     if (val <= 0) {
 617 |       return 0;
 618 |     } else if (val >= this.player.seekerWidth) {
 619 |       return this.player.seekerWidth;
 620 |     }
 621 |     return val;
 622 |   }
 623 | 
 624 |   /**
 625 |    * Calculate the position that the seeker should be
 626 |    * at along its track.
 627 |    *
 628 |    * @return {float} position of seeker handle in px based on currentTime
 629 |    */
 630 |   calculateSeekerPosition() {
 631 |     const percent = this.state.currentTime / this.state.duration;
 632 |     return this.player.seekerWidth * percent;
 633 |   }
 634 | 
 635 |   /**
 636 |    * Return the time that the video should be at
 637 |    * based on where the seeker handle is.
 638 |    *
 639 |    * @return {float} time in ms based on seekerPosition.
 640 |    */
 641 |   calculateTimeFromSeekerPosition() {
 642 |     const percent = this.state.seekerPosition / this.player.seekerWidth;
 643 |     return this.state.duration * percent;
 644 |   }
 645 | 
 646 |   /**
 647 |    * Seek to a time in the video.
 648 |    *
 649 |    * @param {float} time time to seek to in ms
 650 |    */
 651 |   seekTo(time = 0) {
 652 |     let state = this.state;
 653 |     state.currentTime = time;
 654 |     this.player.ref.seek(time);
 655 |     this.setState(state);
 656 |   }
 657 | 
 658 |   /**
 659 |    * Set the position of the volume slider
 660 |    *
 661 |    * @param {float} position position of the volume handle in px
 662 |    */
 663 |   setVolumePosition(position = 0) {
 664 |     let state = this.state;
 665 |     position = this.constrainToVolumeMinMax(position);
 666 |     state.volumePosition = position + this.player.iconOffset;
 667 |     state.volumeFillWidth = position;
 668 | 
 669 |     state.volumeTrackWidth = this.player.volumeWidth - state.volumeFillWidth;
 670 | 
 671 |     if (state.volumeFillWidth < 0) {
 672 |       state.volumeFillWidth = 0;
 673 |     }
 674 | 
 675 |     if (state.volumeTrackWidth > 150) {
 676 |       state.volumeTrackWidth = 150;
 677 |     }
 678 | 
 679 |     this.setState(state);
 680 |   }
 681 | 
 682 |   /**
 683 |    * Constrain the volume bar to the min/max of
 684 |    * its track's width.
 685 |    *
 686 |    * @param {float} val position of the volume handle in px
 687 |    * @return {float} contrained position of the volume handle in px
 688 |    */
 689 |   constrainToVolumeMinMax(val = 0) {
 690 |     if (val <= 0) {
 691 |       return 0;
 692 |     } else if (val >= this.player.volumeWidth + 9) {
 693 |       return this.player.volumeWidth + 9;
 694 |     }
 695 |     return val;
 696 |   }
 697 | 
 698 |   /**
 699 |    * Get the volume based on the position of the
 700 |    * volume object.
 701 |    *
 702 |    * @return {float} volume level based on volume handle position
 703 |    */
 704 |   calculateVolumeFromVolumePosition() {
 705 |     return this.state.volumePosition / this.player.volumeWidth;
 706 |   }
 707 | 
 708 |   /**
 709 |    * Get the position of the volume handle based
 710 |    * on the volume
 711 |    *
 712 |    * @return {float} volume handle position in px based on volume
 713 |    */
 714 |   calculateVolumePositionFromVolume() {
 715 |     return this.player.volumeWidth * this.state.volume;
 716 |   }
 717 | 
 718 |   /**
 719 |     | -------------------------------------------------------
 720 |     | React Component functions
 721 |     | -------------------------------------------------------
 722 |     |
 723 |     | Here we're initializing our listeners and getting
 724 |     | the component ready using the built-in React
 725 |     | Component methods
 726 |     |
 727 |     */
 728 | 
 729 |   /**
 730 |    * Before mounting, init our seekbar and volume bar
 731 |    * pan responders.
 732 |    */
 733 |   UNSAFE_componentWillMount() {
 734 |     this.initSeekPanResponder();
 735 |     this.initVolumePanResponder();
 736 |   }
 737 | 
 738 |   /**
 739 |    * To allow basic playback management from the outside
 740 |    * we have to handle possible props changes to state changes
 741 |    */
 742 |   UNSAFE_componentWillReceiveProps(nextProps) {
 743 |     if (this.state.paused !== nextProps.paused) {
 744 |       this.setState({
 745 |         paused: nextProps.paused,
 746 |       });
 747 |     }
 748 | 
 749 |     if (this.styles.videoStyle !== nextProps.videoStyle) {
 750 |       this.styles.videoStyle = nextProps.videoStyle;
 751 |     }
 752 | 
 753 |     if (this.styles.containerStyle !== nextProps.style) {
 754 |       this.styles.containerStyle = nextProps.style;
 755 |     }
 756 |   }
 757 | 
 758 |   /**
 759 |    * Upon mounting, calculate the position of the volume
 760 |    * bar based on the volume property supplied to it.
 761 |    */
 762 |   componentDidMount() {
 763 |     const position = this.calculateVolumePositionFromVolume();
 764 |     let state = this.state;
 765 |     this.setVolumePosition(position);
 766 |     state.volumeOffset = position;
 767 |     this.mounted = true;
 768 | 
 769 |     this.setState(state);
 770 |   }
 771 | 
 772 |   /**
 773 |    * When the component is about to unmount kill the
 774 |    * timeout less it fire in the prev/next scene
 775 |    */
 776 |   componentWillUnmount() {
 777 |     this.mounted = false;
 778 |     this.clearControlTimeout();
 779 |   }
 780 | 
 781 |   /**
 782 |    * Get our seekbar responder going
 783 |    */
 784 |   initSeekPanResponder() {
 785 |     this.player.seekPanResponder = PanResponder.create({
 786 |       // Ask to be the responder.
 787 |       onStartShouldSetPanResponder: (evt, gestureState) => true,
 788 |       onMoveShouldSetPanResponder: (evt, gestureState) => true,
 789 | 
 790 |       /**
 791 |        * When we start the pan tell the machine that we're
 792 |        * seeking. This stops it from updating the seekbar
 793 |        * position in the onProgress listener.
 794 |        */
 795 |       onPanResponderGrant: (evt, gestureState) => {
 796 |         let state = this.state;
 797 |         this.clearControlTimeout();
 798 |         const position = evt.nativeEvent.locationX;
 799 |         this.setSeekerPosition(position);
 800 |         state.seeking = true;
 801 |         state.originallyPaused = state.paused;
 802 |         state.scrubbing = false;
 803 |         if (this.player.scrubbingTimeStep > 0) {
 804 |           state.paused = true;
 805 |         }
 806 |         this.setState(state);
 807 |       },
 808 | 
 809 |       /**
 810 |        * When panning, update the seekbar position, duh.
 811 |        */
 812 |       onPanResponderMove: (evt, gestureState) => {
 813 |         const position = this.state.seekerOffset + gestureState.dx;
 814 |         this.setSeekerPosition(position);
 815 |         let state = this.state;
 816 | 
 817 |         if (
 818 |           this.player.scrubbingTimeStep > 0 &&
 819 |           !state.loading &&
 820 |           !state.scrubbing
 821 |         ) {
 822 |           const time = this.calculateTimeFromSeekerPosition();
 823 |           const timeDifference = Math.abs(state.currentTime - time) * 1000;
 824 | 
 825 |           if (
 826 |             time < state.duration &&
 827 |             timeDifference >= this.player.scrubbingTimeStep
 828 |           ) {
 829 |             state.scrubbing = true;
 830 | 
 831 |             this.setState(state);
 832 |             setTimeout(() => {
 833 |               this.player.ref.seek(time, this.player.scrubbingTimeStep);
 834 |             }, 1);
 835 |           }
 836 |         }
 837 |       },
 838 | 
 839 |       /**
 840 |        * On release we update the time and seek to it in the video.
 841 |        * If you seek to the end of the video we fire the
 842 |        * onEnd callback
 843 |        */
 844 |       onPanResponderRelease: (evt, gestureState) => {
 845 |         const time = this.calculateTimeFromSeekerPosition();
 846 |         let state = this.state;
 847 |         if (time >= state.duration && !state.loading) {
 848 |           state.paused = true;
 849 |           this.events.onEnd();
 850 |         } else if (state.scrubbing) {
 851 |           state.seeking = false;
 852 |         } else {
 853 |           this.seekTo(time);
 854 |           this.setControlTimeout();
 855 |           state.paused = state.originallyPaused;
 856 |           state.seeking = false;
 857 |         }
 858 |         this.setState(state);
 859 |       },
 860 |     });
 861 |   }
 862 | 
 863 |   /**
 864 |    * Initialize the volume pan responder.
 865 |    */
 866 |   initVolumePanResponder() {
 867 |     this.player.volumePanResponder = PanResponder.create({
 868 |       onStartShouldSetPanResponder: (evt, gestureState) => true,
 869 |       onMoveShouldSetPanResponder: (evt, gestureState) => true,
 870 |       onPanResponderGrant: (evt, gestureState) => {
 871 |         this.clearControlTimeout();
 872 |       },
 873 | 
 874 |       /**
 875 |        * Update the volume as we change the position.
 876 |        * If we go to 0 then turn on the mute prop
 877 |        * to avoid that weird static-y sound.
 878 |        */
 879 |       onPanResponderMove: (evt, gestureState) => {
 880 |         let state = this.state;
 881 |         const position = this.state.volumeOffset + gestureState.dx;
 882 | 
 883 |         this.setVolumePosition(position);
 884 |         state.volume = this.calculateVolumeFromVolumePosition();
 885 | 
 886 |         if (state.volume <= 0) {
 887 |           state.muted = true;
 888 |         } else {
 889 |           state.muted = false;
 890 |         }
 891 | 
 892 |         this.setState(state);
 893 |       },
 894 | 
 895 |       /**
 896 |        * Update the offset...
 897 |        */
 898 |       onPanResponderRelease: (evt, gestureState) => {
 899 |         let state = this.state;
 900 |         state.volumeOffset = state.volumePosition;
 901 |         this.setControlTimeout();
 902 |         this.setState(state);
 903 |       },
 904 |     });
 905 |   }
 906 | 
 907 |   /**
 908 |     | -------------------------------------------------------
 909 |     | Rendering
 910 |     | -------------------------------------------------------
 911 |     |
 912 |     | This section contains all of our render methods.
 913 |     | In addition to the typical React render func
 914 |     | we also have all the render methods for
 915 |     | the controls.
 916 |     |
 917 |     */
 918 | 
 919 |   /**
 920 |    * Standard render control function that handles
 921 |    * everything except the sliders. Adds a
 922 |    * consistent <TouchableHighlight>
 923 |    * wrapper and styling.
 924 |    */
 925 |   renderControl(children, callback, style = {}) {
 926 |     return (
 927 |       <TouchableHighlight
 928 |         underlayColor="transparent"
 929 |         activeOpacity={0.3}
 930 |         onPress={() => {
 931 |           this.resetControlTimeout();
 932 |           callback();
 933 |         }}
 934 |         style={[styles.controls.control, style]}>
 935 |         {children}
 936 |       </TouchableHighlight>
 937 |     );
 938 |   }
 939 | 
 940 |   /**
 941 |    * Renders an empty control, used to disable a control without breaking the view layout.
 942 |    */
 943 |   renderNullControl() {
 944 |     return <View style={[styles.controls.control]} />;
 945 |   }
 946 | 
 947 |   /**
 948 |    * Groups the top bar controls together in an animated
 949 |    * view and spaces them out.
 950 |    */
 951 |   renderTopControls() {
 952 |     const backControl = this.props.disableBack
 953 |       ? this.renderNullControl()
 954 |       : this.renderBack();
 955 |     const volumeControl = this.props.disableVolume
 956 |       ? this.renderNullControl()
 957 |       : this.renderVolume();
 958 |     const fullscreenControl = this.props.disableFullscreen
 959 |       ? this.renderNullControl()
 960 |       : this.renderFullscreen();
 961 | 
 962 |     return (
 963 |       <Animated.View
 964 |         style={[
 965 |           styles.controls.top,
 966 |           {
 967 |             opacity: this.animations.topControl.opacity,
 968 |             marginTop: this.animations.topControl.marginTop,
 969 |           },
 970 |         ]}>
 971 |         <ImageBackground
 972 |           source={require('./assets/img/top-vignette.png')}
 973 |           style={[styles.controls.column]}
 974 |           imageStyle={[styles.controls.vignette]}>
 975 |           <SafeAreaView style={styles.controls.topControlGroup}>
 976 |             {backControl}
 977 |             <View style={styles.controls.pullRight}>
 978 |               {volumeControl}
 979 |               {fullscreenControl}
 980 |             </View>
 981 |           </SafeAreaView>
 982 |         </ImageBackground>
 983 |       </Animated.View>
 984 |     );
 985 |   }
 986 | 
 987 |   /**
 988 |    * Back button control
 989 |    */
 990 |   renderBack() {
 991 |     return this.renderControl(
 992 |       <Image
 993 |         source={require('./assets/img/back.png')}
 994 |         style={styles.controls.back}
 995 |       />,
 996 |       this.events.onBack,
 997 |       styles.controls.back,
 998 |     );
 999 |   }
1000 | 
1001 |   /**
1002 |    * Render the volume slider and attach the pan handlers
1003 |    */
1004 |   renderVolume() {
1005 |     return (
1006 |       <View style={styles.volume.container}>
1007 |         <View
1008 |           style={[styles.volume.fill, {width: this.state.volumeFillWidth}]}
1009 |         />
1010 |         <View
1011 |           style={[styles.volume.track, {width: this.state.volumeTrackWidth}]}
1012 |         />
1013 |         <View
1014 |           style={[styles.volume.handle, {left: this.state.volumePosition}]}
1015 |           {...this.player.volumePanResponder.panHandlers}>
1016 |           <Image
1017 |             style={styles.volume.icon}
1018 |             source={require('./assets/img/volume.png')}
1019 |           />
1020 |         </View>
1021 |       </View>
1022 |     );
1023 |   }
1024 | 
1025 |   /**
1026 |    * Render fullscreen toggle and set icon based on the fullscreen state.
1027 |    */
1028 |   renderFullscreen() {
1029 |     let source =
1030 |       this.state.isFullscreen === true
1031 |         ? require('./assets/img/shrink.png')
1032 |         : require('./assets/img/expand.png');
1033 |     return this.renderControl(
1034 |       <Image source={source} />,
1035 |       this.methods.toggleFullscreen,
1036 |       styles.controls.fullscreen,
1037 |     );
1038 |   }
1039 | 
1040 |   /**
1041 |    * Render bottom control group and wrap it in a holder
1042 |    */
1043 |   renderBottomControls() {
1044 |     const timerControl = this.props.disableTimer
1045 |       ? this.renderNullControl()
1046 |       : this.renderTimer();
1047 |     const seekbarControl = this.props.disableSeekbar
1048 |       ? this.renderNullControl()
1049 |       : this.renderSeekbar();
1050 |     const playPauseControl = this.props.disablePlayPause
1051 |       ? this.renderNullControl()
1052 |       : this.renderPlayPause();
1053 | 
1054 |     return (
1055 |       <Animated.View
1056 |         style={[
1057 |           styles.controls.bottom,
1058 |           {
1059 |             opacity: this.animations.bottomControl.opacity,
1060 |             marginBottom: this.animations.bottomControl.marginBottom,
1061 |           },
1062 |         ]}>
1063 |         <ImageBackground
1064 |           source={require('./assets/img/bottom-vignette.png')}
1065 |           style={[styles.controls.column]}
1066 |           imageStyle={[styles.controls.vignette]}>
1067 |           {seekbarControl}
1068 |           <SafeAreaView
1069 |             style={[styles.controls.row, styles.controls.bottomControlGroup]}>
1070 |             {playPauseControl}
1071 |             {this.renderTitle()}
1072 |             {timerControl}
1073 |           </SafeAreaView>
1074 |         </ImageBackground>
1075 |       </Animated.View>
1076 |     );
1077 |   }
1078 | 
1079 |   /**
1080 |    * Render the seekbar and attach its handlers
1081 |    */
1082 |   renderSeekbar() {
1083 |     return (
1084 |       <View
1085 |         style={styles.seekbar.container}
1086 |         collapsable={false}
1087 |         {...this.player.seekPanResponder.panHandlers}>
1088 |         <View
1089 |           style={styles.seekbar.track}
1090 |           onLayout={event =>
1091 |             (this.player.seekerWidth = event.nativeEvent.layout.width)
1092 |           }
1093 |           pointerEvents={'none'}>
1094 |           <View
1095 |             style={[
1096 |               styles.seekbar.fill,
1097 |               {
1098 |                 width: this.state.seekerFillWidth,
1099 |                 backgroundColor: this.props.seekColor || '#FFF',
1100 |               },
1101 |             ]}
1102 |             pointerEvents={'none'}
1103 |           />
1104 |         </View>
1105 |         <View
1106 |           style={[styles.seekbar.handle, {left: this.state.seekerPosition}]}
1107 |           pointerEvents={'none'}>
1108 |           <View
1109 |             style={[
1110 |               styles.seekbar.circle,
1111 |               {backgroundColor: this.props.seekColor || '#FFF'},
1112 |             ]}
1113 |             pointerEvents={'none'}
1114 |           />
1115 |         </View>
1116 |       </View>
1117 |     );
1118 |   }
1119 | 
1120 |   /**
1121 |    * Render the play/pause button and show the respective icon
1122 |    */
1123 |   renderPlayPause() {
1124 |     let source =
1125 |       this.state.paused === true
1126 |         ? require('./assets/img/play.png')
1127 |         : require('./assets/img/pause.png');
1128 |     return this.renderControl(
1129 |       <Image source={source} />,
1130 |       this.methods.togglePlayPause,
1131 |       styles.controls.playPause,
1132 |     );
1133 |   }
1134 | 
1135 |   /**
1136 |    * Render our title...if supplied.
1137 |    */
1138 |   renderTitle() {
1139 |     if (this.opts.title) {
1140 |       return (
1141 |         <View style={[styles.controls.control, styles.controls.title]}>
1142 |           <Text
1143 |             style={[styles.controls.text, styles.controls.titleText]}
1144 |             numberOfLines={1}>
1145 |             {this.opts.title || ''}
1146 |           </Text>
1147 |         </View>
1148 |       );
1149 |     }
1150 | 
1151 |     return null;
1152 |   }
1153 | 
1154 |   /**
1155 |    * Show our timer.
1156 |    */
1157 |   renderTimer() {
1158 |     return this.renderControl(
1159 |       <Text style={styles.controls.timerText}>{this.calculateTime()}</Text>,
1160 |       this.methods.toggleTimer,
1161 |       styles.controls.timer,
1162 |     );
1163 |   }
1164 | 
1165 |   /**
1166 |    * Show loading icon
1167 |    */
1168 |   renderLoader() {
1169 |     if (this.state.loading) {
1170 |       return (
1171 |         <View style={styles.loader.container}>
1172 |           <Animated.Image
1173 |             source={require('./assets/img/loader-icon.png')}
1174 |             style={[
1175 |               styles.loader.icon,
1176 |               {
1177 |                 transform: [
1178 |                   {
1179 |                     rotate: this.animations.loader.rotate.interpolate({
1180 |                       inputRange: [0, 360],
1181 |                       outputRange: ['0deg', '360deg'],
1182 |                     }),
1183 |                   },
1184 |                 ],
1185 |               },
1186 |             ]}
1187 |           />
1188 |         </View>
1189 |       );
1190 |     }
1191 |     return null;
1192 |   }
1193 | 
1194 |   renderError() {
1195 |     if (this.state.error) {
1196 |       return (
1197 |         <View style={styles.error.container}>
1198 |           <Image
1199 |             source={require('./assets/img/error-icon.png')}
1200 |             style={styles.error.icon}
1201 |           />
1202 |           <Text style={styles.error.text}>Video unavailable</Text>
1203 |         </View>
1204 |       );
1205 |     }
1206 |     return null;
1207 |   }
1208 | 
1209 |   /**
1210 |    * Provide all of our options and render the whole component.
1211 |    */
1212 |   render() {
1213 |     return (
1214 |       <TouchableWithoutFeedback
1215 |         onPress={this.events.onScreenTouch}
1216 |         style={[styles.player.container, this.styles.containerStyle]}>
1217 |         <View style={[styles.player.container, this.styles.containerStyle]}>
1218 |           <Video
1219 |             {...this.props}
1220 |             ref={videoPlayer => (this.player.ref = videoPlayer)}
1221 |             resizeMode={this.state.resizeMode}
1222 |             volume={this.state.volume}
1223 |             paused={this.state.paused}
1224 |             muted={this.state.muted}
1225 |             rate={this.state.rate}
1226 |             onLoadStart={this.events.onLoadStart}
1227 |             onProgress={this.events.onProgress}
1228 |             onError={this.events.onError}
1229 |             onLoad={this.events.onLoad}
1230 |             onEnd={this.events.onEnd}
1231 |             onSeek={this.events.onSeek}
1232 |             style={[styles.player.video, this.styles.videoStyle]}
1233 |             source={this.props.source}
1234 |           />
1235 |           {this.renderError()}
1236 |           {this.renderLoader()}
1237 |           {this.renderTopControls()}
1238 |           {this.renderBottomControls()}
1239 |         </View>
1240 |       </TouchableWithoutFeedback>
1241 |     );
1242 |   }
1243 | }
1244 | 
1245 | /**
1246 |  * This object houses our styles. There's player
1247 |  * specific styles and control specific ones.
1248 |  * And then there's volume/seeker styles.
1249 |  */
1250 | const styles = {
1251 |   player: StyleSheet.create({
1252 |     container: {
1253 |       overflow: 'hidden',
1254 |       backgroundColor: '#000',
1255 |       flex: 1,
1256 |       alignSelf: 'stretch',
1257 |       justifyContent: 'space-between',
1258 |     },
1259 |     video: {
1260 |       overflow: 'hidden',
1261 |       position: 'absolute',
1262 |       top: 0,
1263 |       right: 0,
1264 |       bottom: 0,
1265 |       left: 0,
1266 |     },
1267 |   }),
1268 |   error: StyleSheet.create({
1269 |     container: {
1270 |       backgroundColor: 'rgba( 0, 0, 0, 0.5 )',
1271 |       position: 'absolute',
1272 |       top: 0,
1273 |       right: 0,
1274 |       bottom: 0,
1275 |       left: 0,
1276 |       justifyContent: 'center',
1277 |       alignItems: 'center',
1278 |     },
1279 |     icon: {
1280 |       marginBottom: 16,
1281 |     },
1282 |     text: {
1283 |       backgroundColor: 'transparent',
1284 |       color: '#f27474',
1285 |     },
1286 |   }),
1287 |   loader: StyleSheet.create({
1288 |     container: {
1289 |       position: 'absolute',
1290 |       top: 0,
1291 |       right: 0,
1292 |       bottom: 0,
1293 |       left: 0,
1294 |       alignItems: 'center',
1295 |       justifyContent: 'center',
1296 |     },
1297 |   }),
1298 |   controls: StyleSheet.create({
1299 |     row: {
1300 |       flexDirection: 'row',
1301 |       alignItems: 'center',
1302 |       justifyContent: 'space-between',
1303 |       height: null,
1304 |       width: null,
1305 |     },
1306 |     column: {
1307 |       flexDirection: 'column',
1308 |       alignItems: 'center',
1309 |       justifyContent: 'space-between',
1310 |       height: null,
1311 |       width: null,
1312 |     },
1313 |     vignette: {
1314 |       resizeMode: 'stretch',
1315 |     },
1316 |     control: {
1317 |       padding: 16,
1318 |     },
1319 |     text: {
1320 |       backgroundColor: 'transparent',
1321 |       color: '#FFF',
1322 |       fontSize: 14,
1323 |       textAlign: 'center',
1324 |     },
1325 |     pullRight: {
1326 |       flexDirection: 'row',
1327 |       alignItems: 'center',
1328 |       justifyContent: 'center',
1329 |     },
1330 |     top: {
1331 |       flex: 1,
1332 |       alignItems: 'stretch',
1333 |       justifyContent: 'flex-start',
1334 |     },
1335 |     bottom: {
1336 |       alignItems: 'stretch',
1337 |       flex: 2,
1338 |       justifyContent: 'flex-end',
1339 |     },
1340 |     topControlGroup: {
1341 |       alignSelf: 'stretch',
1342 |       alignItems: 'center',
1343 |       justifyContent: 'space-between',
1344 |       flexDirection: 'row',
1345 |       width: null,
1346 |       margin: 12,
1347 |       marginBottom: 18,
1348 |     },
1349 |     bottomControlGroup: {
1350 |       alignSelf: 'stretch',
1351 |       alignItems: 'center',
1352 |       justifyContent: 'space-between',
1353 |       marginLeft: 12,
1354 |       marginRight: 12,
1355 |       marginBottom: 0,
1356 |     },
1357 |     volume: {
1358 |       flexDirection: 'row',
1359 |     },
1360 |     fullscreen: {
1361 |       flexDirection: 'row',
1362 |     },
1363 |     playPause: {
1364 |       position: 'relative',
1365 |       width: 80,
1366 |       zIndex: 0,
1367 |     },
1368 |     title: {
1369 |       alignItems: 'center',
1370 |       flex: 0.6,
1371 |       flexDirection: 'column',
1372 |       padding: 0,
1373 |     },
1374 |     titleText: {
1375 |       textAlign: 'center',
1376 |     },
1377 |     timer: {
1378 |       width: 80,
1379 |     },
1380 |     timerText: {
1381 |       backgroundColor: 'transparent',
1382 |       color: '#FFF',
1383 |       fontSize: 11,
1384 |       textAlign: 'right',
1385 |     },
1386 |   }),
1387 |   volume: StyleSheet.create({
1388 |     container: {
1389 |       alignItems: 'center',
1390 |       justifyContent: 'flex-start',
1391 |       flexDirection: 'row',
1392 |       height: 1,
1393 |       marginLeft: 20,
1394 |       marginRight: 20,
1395 |       width: 150,
1396 |     },
1397 |     track: {
1398 |       backgroundColor: '#333',
1399 |       height: 1,
1400 |       marginLeft: 7,
1401 |     },
1402 |     fill: {
1403 |       backgroundColor: '#FFF',
1404 |       height: 1,
1405 |     },
1406 |     handle: {
1407 |       position: 'absolute',
1408 |       marginTop: -24,
1409 |       marginLeft: -24,
1410 |       padding: 16,
1411 |     },
1412 |     icon: {
1413 |       marginLeft: 7,
1414 |     },
1415 |   }),
1416 |   seekbar: StyleSheet.create({
1417 |     container: {
1418 |       alignSelf: 'stretch',
1419 |       height: 28,
1420 |       marginLeft: 20,
1421 |       marginRight: 20,
1422 |     },
1423 |     track: {
1424 |       backgroundColor: '#333',
1425 |       height: 1,
1426 |       position: 'relative',
1427 |       top: 14,
1428 |       width: '100%',
1429 |     },
1430 |     fill: {
1431 |       backgroundColor: '#FFF',
1432 |       height: 1,
1433 |       width: '100%',
1434 |     },
1435 |     handle: {
1436 |       position: 'absolute',
1437 |       marginLeft: -7,
1438 |       height: 28,
1439 |       width: 28,
1440 |     },
1441 |     circle: {
1442 |       borderRadius: 12,
1443 |       position: 'relative',
1444 |       top: 8,
1445 |       left: 8,
1446 |       height: 12,
1447 |       width: 12,
1448 |     },
1449 |   }),
1450 | };
1451 | 


--------------------------------------------------------------------------------