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


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


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # OSX
2 | .DS_Store
3 | 
4 | # node.js
5 | node_modules/
6 | npm-debug.log
7 | 


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


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


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
  1 | ## 1.2.0 (20-03-2017)
  2 | 
  3 | [#14](https://github.com/itsnubix/react-native-video-controls/issues/14)
  4 |   - Remove ability for loading events to be altered
  5 | 
  6 | [#19](https://github.com/itsnubix/react-native-video-controls/issues/19)
  7 |   - Updated requirements to RN 0.42.x and RN Video 1.0.0
  8 | 
  9 | 
 10 | 
 11 | 
 12 | 
 13 | 
 14 | ## 1.1.1 (23-12-2016)
 15 | 
 16 | Restore playInBackground and playWhenInactive
 17 | 
 18 | ## 1.1.0 (23-12-2016)
 19 | 
 20 | Updated to work with react-native ^0.39.2.
 21 | 
 22 | ### Bug fixes
 23 | 
 24 | [fix loadAnimation infinity loop](https://github.com/itsnubix/react-native-video-controls/pull/13)
 25 |   - added if statement to loadAnimation function to prevent loop
 26 | 
 27 | [Crashes with New version of react-native-video](https://github.com/itsnubix/react-native-video-controls/issues/12)
 28 |   - using latest github version of `react-native-video` to fix multiple issues with RN 39
 29 | 
 30 | ## 1.0.1 (29-11-2016)
 31 | 
 32 | ### Features
 33 | 
 34 | Add ability to set seeker bar colour
 35 | 
 36 | ### Bug fixes
 37 | 
 38 | [When seeking sometimes seek handle hops back to original position](https://github.com/itsnubix/react-native-video-controls/issues/9)
 39 | 
 40 | ## 1.0.0 (29-11-2016)
 41 | 
 42 | Bump to 1.0.0 as all major issues are fixed and API has changed slightly.
 43 | 
 44 | ## 0.9.8 (28-11-2016)
 45 | 
 46 | ### Bug fixes
 47 | 
 48 | [Seeking before onLoad triggers onEnd](https://github.com/itsnubix/react-native-video-controls/issues/8)
 49 |   - modified pan handler to also look for if loading state which is set to false on init and changed when onLoad fired.
 50 | 
 51 | [setState being called when window off screen](https://github.com/itsnubix/react-native-video-controls/issues/7)
 52 |   - added componentWillUnmount function to clear controlTimeout
 53 |   - 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)
 54 | 
 55 | [If title is too long it runs off the page.](https://github.com/itsnubix/react-native-video-controls/issues/6)
 56 |   - added flex 0.6 to size and restricted number of lines to 1. If it exceeds you'll get tail ellipsis
 57 | 
 58 | ## 0.9.7 (21-11-2016)
 59 | 
 60 | ### Changes
 61 | 
 62 |   - Aesthetic changes made with regards to spacing in the bottom control group
 63 |   - Tightened up space in the upper group as well.
 64 | 
 65 | ### Features
 66 | 
 67 |   - Changed control timeout to 15s by default. Allow the ability to overwrite. See API.
 68 |   - Added ability to add container and video styling
 69 | 
 70 | ## 0.9.6 (15-11-2016)
 71 | 
 72 | ### Bug fixes
 73 | 
 74 | [Clean up file Structure](https://github.com/itsnubix/react-native-video-controls/issues/5):
 75 | 
 76 |   - cleaned up deps and files included.
 77 | 
 78 | ## 0.9.5 (14-11-2016)
 79 | 
 80 | ### Bug fixes
 81 | [Tapping controls doesn't reset control hide timeout](https://github.com/itsnubix/react-native-video-controls/issues/1):
 82 | 
 83 |   - add resets to panhandlers for volume/seek areas
 84 |   - add resets to renderControl function onPress params.
 85 | 
 86 | [Control backgrounds should be gradients](https://github.com/itsnubix/react-native-video-controls/issues/2)
 87 | 
 88 |   - Changed vignette assets to be more subtle.
 89 |   - Added stretch to resizeMode
 90 | 
 91 | [Volume track bar is visible through volume icon](https://github.com/itsnubix/react-native-video-controls/issues/3)
 92 | 
 93 |   - 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).
 94 |   - Added calculation to measure fill bar width and then subtract that from the width and assign to track bar on right side of icon.
 95 |   - Long story short, the icon now masks the volume bar.
 96 | 
 97 | [Clean up file structure](https://github.com/itsnubix/react-native-video-controls/issues/5)
 98 | 
 99 | ### Features
100 | 
101 | - Added loading icon when buffering movie
102 | - Add error handling, ref: [Issue #4](https://github.com/itsnubix/react-native-video-controls/issues/4)
103 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # react-native-video-controls
 2 | 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.38.x or lower use version 1.0.x.
 3 | 
 4 | ## Features
 5 | 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.
 6 | 
 7 | ![How it looks](https://s3-us-west-2.amazonaws.com/nubix.ca/github/example.gif)
 8 | 
 9 | 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.
10 | 
11 | By default, tapping the screen anywhere will show the player controls. After 10s the controls disappear. Double tapping will toggle fullscreen.
12 | 
13 | ## Installation
14 | Run `npm install --save react-native-video-controls`
15 | 
16 | Then run `react-native link react-native-video`
17 | 
18 | If you're using RN < 39 run `npm install --save react-native-video-controls@1.0.1`
19 | 
20 | ## Usage
21 | 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.
22 | 
23 | 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.
24 | 
25 | ```javascript
26 | // At the top where our imports are...
27 | import VideoPlayer from 'react-native-video-controls';
28 | 
29 | 
30 | // in the component's render() function
31 | <VideoPlayer
32 |     source={{ uri: 'https://vjs.zencdn.net/v/oceans.mp4' }}
33 |     navigator={ this.props.navigator }
34 | />
35 | 
36 | ```
37 | 
38 | ## API
39 | The `<VideoPlayer>` component can take a number of inputs to customize it as needed. They are outlined below:
40 | 
41 | ```javascript
42 | <VideoPlayer
43 | 
44 |     // react-native-video options
45 |     playInBackground={ false }   // play audio when entering background
46 |     playWhenInactive={ false }   // [iOS] continuing playing when notification centre active
47 |     resizeMode={ 'contain' }     // 'contain' or 'cover' should be used.
48 |     paused={ false }             // stop playback entirely
49 |     repeat={ false }             // Repeats at end of duration
50 |     muted={ false }              // Mutes the audio entirely.
51 |     title={ '' }                 // Video title, if null title area is hidden
52 |     volume={ 1 }                 // 0 is muted, 1 is normal.
53 |     rate={ 1 }                   // 0 is paused, 1 is normal.
54 | 
55 |     // settings
56 |     controlTimeout={ 15000 }     // hide controls after ms of inactivity.
57 |     navigator={ navigator }      // prop from React Native <Navigator> component
58 |     seekColor={ '#FFF' }         // fill/handle colour of the seekbar
59 |     videoStyle={ {} }            // Style appended to <Video> component
60 |     style={ {} }                 // Style appended to <View> container
61 | 
62 |     // event callbacks
63 |     onError={ () => {} }         // Fired when an error is encountered on load
64 |     onBack={ () => {} }          // Function fired when back button is pressed.
65 |     onEnd={ () => {} }           // Fired when the video is complete.
66 | 
67 | />
68 | ```
69 | 


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-native-video-controls",
 3 |   "version": "1.2.0",
 4 |   "description": "A set of GUI controls for the react-native-video component",
 5 |   "license": "MIT",
 6 |   "main": "VideoPlayer.js",
 7 |   "keywords": [
 8 |     "react-native",
 9 |     "react-native-video",
10 |     "react video controls",
11 |     "react video player"
12 |   ],
13 |   "scripts": {
14 |     "test": "echo \"No test specified\" && exit 1"
15 |   },
16 |   "author": "Nubix (https://github.com/itsnubix)",
17 |   "repository": {
18 |     "type": "git",
19 |     "url": "git@github.com:itsnubix/react-native-video-controls.git"
20 |   },
21 |   "dependencies": {
22 |     "lodash": "^4.16.4",
23 |     "react-native-video": "^1.0.0"
24 |   },
25 |   "peerDependencies": {
26 |     "react-native": "^0.42.0"
27 |   }
28 | }
29 | 


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