react-modal-video - npm Package Compare versions

Comparing version 1.1.1 to 1.1.2

lib/index.js

@@ -142,5 +142,4 @@ 'use strict';
         {
-          transitionName: this.props.classNames.modalVideoEffect,
-          transitionEnterTimeout: this.props.animationSpeed,
-          transitionLeaveTimeout: this.props.animationSpeed
+          classNames: this.props.classNames.modalVideoEffect,
+          timeout: this.props.animationSpeed
         },
@@ -147,0 +146,0 @@ function () {

package.json

 {
   "name": "react-modal-video",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "main": "lib/index.js",
@@ -28,2 +28,3 @@ "description": "Modal Video Viewer",
     "babelify": "^7.3.0",
+    "browser-sync": "^2.23.6",
     "browserify": "^13.1.1",
@@ -30,0 +31,0 @@ "eslint": "^3.13.0",

src/index.jsx

 import React from 'react'
-import ReactCSSTransitionGroup from 'react-transition-group/CSSTransition';
+import CSSTransition from 'react-transition-group/CSSTransition';
 
 export default class ModalVideo extends React.Component {
 
-  constructor (props) {
+  constructor(props) {
     super(props)
@@ -15,8 +15,8 @@ this.state = {
 
-  openModal () {
-    this.setState({isOpen: true})
+  openModal() {
+    this.setState({ isOpen: true })
   }
 
-  closeModal () {
-    this.setState({isOpen: false})
+  closeModal() {
+    this.setState({ isOpen: false })
     if (typeof this.props.onClose === 'function') {
@@ -27,7 +27,7 @@ this.props.onClose();
 
-  componentWillReceiveProps (nextProps) {
-    this.setState({isOpen: nextProps.isOpen})
+  componentWillReceiveProps(nextProps) {
+    this.setState({ isOpen: nextProps.isOpen })
   }
 
-  componentDidUpdate () {
+  componentDidUpdate() {
     if (this.state.isOpen && this.modal) {
@@ -38,3 +38,3 @@ this.modal.focus();
 
-  updateFocus (e) {
+  updateFocus(e) {
     if (e.keyCode === 9) {
@@ -51,3 +51,3 @@ e.preventDefault()
 
-  getQueryString (obj) {
+  getQueryString(obj) {
     let url = ''
@@ -64,3 +64,3 @@ for (var key in obj) {
 
-  getYoutubeUrl (youtube, videoId) {
+  getYoutubeUrl(youtube, videoId) {
     const query = this.getQueryString(youtube)
@@ -70,3 +70,3 @@ return '//www.youtube.com/embed/' + videoId + '?' + query
 
-  getVimeoUrl (vimeo, videoId) {
+  getVimeoUrl(vimeo, videoId) {
     const query = this.getQueryString(vimeo)
@@ -76,3 +76,3 @@ return '//player.vimeo.com/video/' + videoId + '?' + query
 
-    getYoukuUrl (youku, videoId) {
+  getYoukuUrl(youku, videoId) {
     const query = this.getQueryString(youku)
@@ -82,3 +82,3 @@ return '//player.youku.com/embed/' + videoId + '?' + query
 
-  getVideoUrl (opt, videoId) {
+  getVideoUrl(opt, videoId) {
     if (opt.channel === 'youtube') {
@@ -93,3 +93,3 @@ return this.getYoutubeUrl(opt.youtube, videoId)
 
-  getPadding (ratio) {
+  getPadding(ratio) {
     const arr = ratio.split(':')
@@ -102,3 +102,3 @@ const width = Number(arr[0])
 
-  render () {
+  render() {
     const style = {
@@ -109,7 +109,6 @@ paddingBottom: this.getPadding(this.props.ratio)
     return (
-      <ReactCSSTransitionGroup
-        transitionName={this.props.classNames.modalVideoEffect}
-        transitionEnterTimeout={this.props.animationSpeed}
-        transitionLeaveTimeout={this.props.animationSpeed}
-       >
+      <CSSTransition
+        classNames={this.props.classNames.modalVideoEffect}
+        timeout={this.props.animationSpeed}
+      >
         {() => {
@@ -122,7 +121,7 @@ if (!this.state.isOpen) {
             <div className={this.props.classNames.modalVideo} tabIndex='-1' role='dialog'
-              aria-label={this.props.aria.openMessage} onClick={this.closeModal} ref={node => {this.modal = node;}} onKeyDown={this.updateFocus}>
+              aria-label={this.props.aria.openMessage} onClick={this.closeModal} ref={node => { this.modal = node; }} onKeyDown={this.updateFocus}>
               <div className={this.props.classNames.modalVideoBody}>
                 <div className={this.props.classNames.modalVideoInner}>
                   <div className={this.props.classNames.modalVideoIframeWrap} style={style}>
-                    <button className={this.props.classNames.modalVideoCloseBtn} aria-label={this.props.aria.dismissBtnMessage} ref={node => {this.modalbtn = node;}} onKeyDown={this.updateFocus} />
+                    <button className={this.props.classNames.modalVideoCloseBtn} aria-label={this.props.aria.dismissBtnMessage} ref={node => { this.modalbtn = node; }} onKeyDown={this.updateFocus} />
                     <iframe width='460' height='230' src={this.getVideoUrl(this.props, this.props.videoId)} frameBorder='0' allowFullScreen={this.props.allowFullScreen} tabIndex='-1' />
@@ -134,3 +133,3 @@ </div>
         }}
-      </ReactCSSTransitionGroup>
+      </CSSTransition>
     )
@@ -186,4 +185,4 @@ }
   youku: {
-      autoplay: 1,
-      show_related: 0
+    autoplay: 1,
+    show_related: 0
   },
@@ -190,0 +189,0 @@ allowFullScreen: true,

No alert changes

Worsened metrics

Total package byte prevSize

869848

decreased by-0.03%

Dev dependency count

22

increased by4.76%

Lines of code

18530

decreased by-0.02%

No dependency changes