rax-video - npm Package Compare versions

Comparing version 0.3.3 to 0.3.4

dist/video.factory.js

@@ -126,2 +126,5 @@ module.exports = function(require, exports, module) {
 
+var PLAY = 'play';
+var PAUSE = 'pause';
+
 var Video = function (_Component) {
@@ -142,7 +145,6 @@ _inherits(Video, _Component);
       if (_universalEnv.isWeex) {
+        props.playStatus = props.playControl;
         return (0, _rax.createElement)('video', props);
       } else {
-        var nativeProps = _extends({}, props, {
-          controls: true
-        });
+        var nativeProps = _extends({}, props);
 
@@ -152,12 +154,29 @@ delete nativeProps.autoPlay;
 
-        if (props.autoPlay) {
+        if (props.autoPlay || props.playControl === PLAY) {
           nativeProps.autoPlay = props.autoPlay;
         }
-        var src = props.src;
+        // Default controls is true
+        if (props.controls == null || props.controls === true) {
+          nativeProps.controls = true;
+        } else {
+          delete nativeProps.controls;
+        }
 
+        var node = this.refs.video;
+        if (node) {
+          if (props.playControl === PAUSE) {
+            node.pause();
+          } else if (props.playControl === PLAY) {
+            node.play();
+          }
+        }
+
         return (0, _rax.createElement)(
           'video',
-          _extends({}, nativeProps, {
-            'webkit-playsinline': true }),
-          (0, _rax.createElement)('source', { src: src })
+          _extends({
+            ref: 'video'
+          }, nativeProps, {
+            'webkit-playsinline': true,
+            playsinline: true }),
+          (0, _rax.createElement)('source', { src: props.src })
         );
@@ -164,0 +183,0 @@ }

dist/video.js

@@ -148,2 +148,5 @@
 
+var PLAY = 'play';
+var PAUSE = 'pause';
+
 var Video = function (_Component) {
@@ -164,7 +167,6 @@ _inherits(Video, _Component);
       if (_universalEnv.isWeex) {
+        props.playStatus = props.playControl;
         return (0, _rax.createElement)('video', props);
       } else {
-        var nativeProps = _extends({}, props, {
-          controls: true
-        });
+        var nativeProps = _extends({}, props);
 
@@ -174,12 +176,29 @@ delete nativeProps.autoPlay;
 
-        if (props.autoPlay) {
+        if (props.autoPlay || props.playControl === PLAY) {
           nativeProps.autoPlay = props.autoPlay;
         }
-        var src = props.src;
+        // Default controls is true
+        if (props.controls == null || props.controls === true) {
+          nativeProps.controls = true;
+        } else {
+          delete nativeProps.controls;
+        }
 
+        var node = this.refs.video;
+        if (node) {
+          if (props.playControl === PAUSE) {
+            node.pause();
+          } else if (props.playControl === PLAY) {
+            node.play();
+          }
+        }
+
         return (0, _rax.createElement)(
           'video',
-          _extends({}, nativeProps, {
-            'webkit-playsinline': true }),
-          (0, _rax.createElement)('source', { src: src })
+          _extends({
+            ref: 'video'
+          }, nativeProps, {
+            'webkit-playsinline': true,
+            playsinline: true }),
+          (0, _rax.createElement)('source', { src: props.src })
         );
@@ -186,0 +205,0 @@ }

dist/video.min.js

@@ -1,1 +0,1 @@
-!function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define)define("rax-video",function(t,o,n){n.exports=e()});else{var t;t="undefined"!=typeof window?window:"undefined"!=typeof self?self:"undefined"!=typeof global?global:this,t.RaxVideo=e()}}(function(){return function(e){function t(n){if(o[n])return o[n].exports;var r=o[n]={i:n,l:!1,exports:{}};return e[n].call(r.exports,r,r.exports,t),r.l=!0,r.exports}var o={};return t.m=e,t.c=o,t.i=function(e){return e},t.d=function(e,o,n){t.o(e,o)||Object.defineProperty(e,o,{configurable:!1,enumerable:!0,get:n})},t.n=function(e){var o=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(o,"a",o),o},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=2)}([function(e,t,o){"use strict";var n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e};Object.defineProperty(t,"__esModule",{value:!0});var r="function"==typeof Symbol&&"symbol"===n(Symbol.iterator)?function(e){return void 0===e?"undefined":n(e)}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":void 0===e?"undefined":n(e)};t.isWeb="object"===("undefined"==typeof navigator?"undefined":r(navigator))&&("Mozilla"===navigator.appCodeName||"Gecko"===navigator.product),t.isNode="undefined"!=typeof process&&!(!process.versions||!process.versions.node),t.isWeex="function"==typeof callNative,t.isReactNative="undefined"!=typeof __fbBatchedBridgeConfig},function(e,t){e.exports=function(){var e;if(!e)try{e=require("rax")}catch(e){}return e}()},function(e,t,o){"use strict";function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function r(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function i(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var u=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var o=arguments[t];for(var n in o)Object.prototype.hasOwnProperty.call(o,n)&&(e[n]=o[n])}return e},f=function(){function e(e,t){for(var o=0;o<t.length;o++){var n=t[o];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,o,n){return o&&e(t.prototype,o),n&&e(t,n),t}}(),c=o(1),a=o(0),l=function(e){function t(){return n(this,t),r(this,(t.__proto__||Object.getPrototypeOf(t)).apply(this,arguments))}return i(t,e),f(t,[{key:"render",value:function(){var e=this.props;if(a.isWeex)return(0,c.createElement)("video",e);var t=u({},e,{controls:!0});delete t.autoPlay,delete t.src,e.autoPlay&&(t.autoPlay=e.autoPlay);var o=e.src;return(0,c.createElement)("video",u({},t,{"webkit-playsinline":!0}),(0,c.createElement)("source",{src:o}))}}]),t}(c.Component);t.default=l,e.exports=t.default}])});
+!function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define)define("rax-video",function(t,o,n){n.exports=e()});else{var t;t="undefined"!=typeof window?window:"undefined"!=typeof self?self:"undefined"!=typeof global?global:this,t.RaxVideo=e()}}(function(){return function(e){function t(n){if(o[n])return o[n].exports;var r=o[n]={i:n,l:!1,exports:{}};return e[n].call(r.exports,r,r.exports,t),r.l=!0,r.exports}var o={};return t.m=e,t.c=o,t.i=function(e){return e},t.d=function(e,o,n){t.o(e,o)||Object.defineProperty(e,o,{configurable:!1,enumerable:!0,get:n})},t.n=function(e){var o=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(o,"a",o),o},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=2)}([function(e,t,o){"use strict";var n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e};Object.defineProperty(t,"__esModule",{value:!0});var r="function"==typeof Symbol&&"symbol"===n(Symbol.iterator)?function(e){return void 0===e?"undefined":n(e)}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":void 0===e?"undefined":n(e)};t.isWeb="object"===("undefined"==typeof navigator?"undefined":r(navigator))&&("Mozilla"===navigator.appCodeName||"Gecko"===navigator.product),t.isNode="undefined"!=typeof process&&!(!process.versions||!process.versions.node),t.isWeex="function"==typeof callNative,t.isReactNative="undefined"!=typeof __fbBatchedBridgeConfig},function(e,t){e.exports=function(){var e;if(!e)try{e=require("rax")}catch(e){}return e}()},function(e,t,o){"use strict";function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function r(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function i(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var u=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var o=arguments[t];for(var n in o)Object.prototype.hasOwnProperty.call(o,n)&&(e[n]=o[n])}return e},f=function(){function e(e,t){for(var o=0;o<t.length;o++){var n=t[o];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,o,n){return o&&e(t.prototype,o),n&&e(t,n),t}}(),a=o(1),l=o(0),c=function(e){function t(){return n(this,t),r(this,(t.__proto__||Object.getPrototypeOf(t)).apply(this,arguments))}return i(t,e),f(t,[{key:"render",value:function(){var e=this.props;if(l.isWeex)return e.playStatus=e.playControl,(0,a.createElement)("video",e);var t=u({},e);delete t.autoPlay,delete t.src,(e.autoPlay||"play"===e.playControl)&&(t.autoPlay=e.autoPlay),null==e.controls||!0===e.controls?t.controls=!0:delete t.controls;var o=this.refs.video;return o&&("pause"===e.playControl?o.pause():"play"===e.playControl&&o.play()),(0,a.createElement)("video",u({ref:"video"},t,{"webkit-playsinline":!0,playsinline:!0}),(0,a.createElement)("source",{src:e.src}))}}]),t}(a.Component);t.default=c,e.exports=t.default}])});

lib/index.js

@@ -21,2 +21,5 @@ 'use strict';
 
+var PLAY = 'play';
+var PAUSE = 'pause';
+
 var Video = function (_Component) {
@@ -37,7 +40,6 @@ _inherits(Video, _Component);
       if (_universalEnv.isWeex) {
+        props.playStatus = props.playControl;
         return (0, _rax.createElement)('video', props);
       } else {
-        var nativeProps = _extends({}, props, {
-          controls: true
-        });
+        var nativeProps = _extends({}, props);
 
@@ -47,12 +49,29 @@ delete nativeProps.autoPlay;
 
-        if (props.autoPlay) {
+        if (props.autoPlay || props.playControl === PLAY) {
           nativeProps.autoPlay = props.autoPlay;
         }
-        var src = props.src;
+        // Default controls is true
+        if (props.controls == null || props.controls === true) {
+          nativeProps.controls = true;
+        } else {
+          delete nativeProps.controls;
+        }
 
+        var node = this.refs.video;
+        if (node) {
+          if (props.playControl === PAUSE) {
+            node.pause();
+          } else if (props.playControl === PLAY) {
+            node.play();
+          }
+        }
+
         return (0, _rax.createElement)(
           'video',
-          _extends({}, nativeProps, {
-            'webkit-playsinline': true }),
-          (0, _rax.createElement)('source', { src: src })
+          _extends({
+            ref: 'video'
+          }, nativeProps, {
+            'webkit-playsinline': true,
+            playsinline: true }),
+          (0, _rax.createElement)('source', { src: props.src })
         );
@@ -59,0 +78,0 @@ }

package.json

 {
   "name": "rax-video",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "description": "Video component for Rax.",
@@ -24,3 +24,3 @@ "license": "BSD-3-Clause",
   "dependencies": {
-    "universal-env": "^0.3.3"
+    "universal-env": "^0.3.4"
   },
@@ -31,4 +31,4 @@ "peerDependencies": {
   "devDependencies": {
-    "rax-test-renderer": "^0.3.3"
+    "rax-test-renderer": "^0.3.4"
   }
 }

README.md

 # rax-video [![npm](https://img.shields.io/npm/v/rax-video.svg)](https://www.npmjs.com/package/rax-video)
+
+## Install
+
+```bash
+$ npm install --save rax-video
+```
+
+## Props
+
+| property    | type     | default  | description         |
+| :---------- | :------- | :------- | :-------------------|
+| src         | string   | null     | The URL of the video to embed.  |
+| autoPlay    | boolean  | false    | If specified, the video automatically begins to play back as soon as it can do so without stopping to finish loading the data.|
+| muted      | boolean  | false    | A Boolean attribute which indicates the default setting of the audio contained in the video. If set, the audio will be initially silenced. Its default value is false, meaning that the audio will be played when the video is played. |
+| loop       | boolean  | false    | If specified, will upon reaching the end of the video, automatically seek back to the start. |
+| controls   | boolean  | true     | If specified, will offer controls to allow the user to control video playback, including volume, seeking, and pause/resume playback. |
+| poster     | string   | null    | A URL indicating a poster frame to show until the user plays or seeks. If this attribute isn't specified, nothing is displayed until the first frame is available; then the first frame is shown as the poster frame. |
+| playControl | string  | pause    | One of `play` and `pause`, controls the playback. If not set, the value of `autoPlay` determines whether the video plays when the component is loaded. |
+| onEnded | function | null | Option callback evoked when video is done playing. |

src/index.js

 import {Component, createElement} from 'rax';
-import {isWeex} from 'universal-env';
+import {isWeex, isWeb} from 'universal-env';
 
+const PLAY = 'play';
+const PAUSE = 'pause';
+
 class Video extends Component {
@@ -9,7 +12,7 @@ render() {
     if (isWeex) {
+      props.playStatus = props.playControl;
       return <video {...props} />;
     } else {
       let nativeProps = {
-        ...props,
-        controls: true,
+        ...props
       };
@@ -20,11 +23,27 @@
 
-      if (props.autoPlay) {
+      if (props.autoPlay || props.playControl === PLAY) {
         nativeProps.autoPlay = props.autoPlay;
       }
-      let src = props.src;
+      // Default controls is true
+      if (props.controls == null || props.controls === true) {
+        nativeProps.controls = true;
+      } else {
+        delete nativeProps.controls;
+      }
 
+      let node = this.refs.video;
+      if (node) {
+        if (props.playControl === PAUSE) {
+          node.pause();
+        } else if (props.playControl === PLAY) {
+          node.play();
+        }
+      }
+
       return <video
+        ref="video"
         {...nativeProps}
-        webkit-playsinline>
-        <source src={src} />
+        webkit-playsinline
+        playsinline>
+        <source src={props.src} />
       </video>;
@@ -31,0 +50,0 @@ }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

42757

increased by16.54%

Lines of code

491

increased by16.08%

Number of lines in readme file

21

increased by950%

Dependency changes

• Updateduniversal-env@^0.3.4