react-modal-video - npm Package Compare versions

Comparing version 1.2.7 to 1.2.8

lib/index.js

@@ -34,6 +34,9 @@ 'use strict';
     _this.state = {
-      isOpen: false
+      isOpen: false,
+      modalVideoWidth: _this.getWidthFulfillAspectRatio(_this.props.ratio, window.innerHeight, window.innerWidth)
     };
     _this.closeModal = _this.closeModal.bind(_this);
     _this.updateFocus = _this.updateFocus.bind(_this);
+
+    _this.timeout; // used for resizing video.
     return _this;
@@ -66,2 +69,3 @@ }
       document.addEventListener('keydown', this.keydownHandler.bind(this));
+      window.addEventListener('resize', this.resizeModalVideoWhenHeightGreaterThanWindowHeight.bind(this));
     }
@@ -72,2 +76,3 @@ }, {
       document.removeEventListener('keydown', this.keydownHandler.bind(this));
+      window.removeEventListener('resize', this.resizeModalVideoWhenHeightGreaterThanWindowHeight.bind(this));
     }
@@ -94,3 +99,24 @@ }, {
     }
+
+    /**
+     * Resize modal-video-iframe-wrap when window size changed when the height of the video is greater than the height of the window.
+     */
+
   }, {
+    key: 'resizeModalVideoWhenHeightGreaterThanWindowHeight',
+    value: function resizeModalVideoWhenHeightGreaterThanWindowHeight() {
+      var _this2 = this;
+
+      clearTimeout(this.timeout);
+
+      this.timeout = setTimeout(function () {
+        var width = _this2.getWidthFulfillAspectRatio(_this2.props.ratio, window.innerHeight, window.innerWidth);
+        if (_this2.state.modalVideoWidth != width) {
+          _this2.setState({
+            modalVideoWidth: width
+          });
+        }
+      }, 10);
+    }
+  }, {
     key: 'getQueryString',
@@ -148,8 +174,46 @@ value: function getQueryString(obj) {
     }
+
+    /**
+     * Calculate the width of the video fulfill aspect ratio.
+     * When the height of the video is greater than the height of the window,
+     * this function return the width that fulfill the aspect ratio for the height of the window.
+     * In other cases, this function return '100%'(the height relative to the width is determined by css).
+     * 
+     * @param string ratio
+     * @param number maxWidth
+     * @returns number | '100%'
+     */
+
   }, {
+    key: 'getWidthFulfillAspectRatio',
+    value: function getWidthFulfillAspectRatio(ratio, maxHeight, maxWidth) {
+      var arr = ratio.split(':');
+      var width = Number(arr[0]);
+      var height = Number(arr[1]);
+
+      // Height that fulfill the aspect ratio for maxWidth.
+      var videoHeight = maxWidth * (height / width);
+
+      if (maxHeight < videoHeight) {
+        // when the height of the video is greater than the height of the window.
+        // calculate the width that fulfill the aspect ratio for the height of the window.
+
+        // ex: 16:9 aspect ratio
+        // 16:9 = width : height
+        // → width = 16 / 9 * height
+        return Math.floor(width / height * maxHeight);
+      }
+
+      return '100%';
+    }
+  }, {
     key: 'render',
     value: function render() {
-      var _this2 = this;
+      var _this3 = this;
 
-      var style = {
+      var modalVideoInnerStyle = {
+        width: this.state.modalVideoWidth
+      };
+
+      var modalVideoIframeWrapStyle = {
         paddingBottom: this.getPadding(this.props.ratio)
@@ -165,3 +229,3 @@ };
         function () {
-          if (!_this2.state.isOpen) {
+          if (!_this3.state.isOpen) {
             return null;
@@ -172,19 +236,19 @@ }
             'div',
-            { className: _this2.props.classNames.modalVideo, tabIndex: '-1', role: 'dialog',
-              'aria-label': _this2.props.aria.openMessage, onClick: _this2.closeModal, ref: function ref(node) {
-                _this2.modal = node;
-              }, onKeyDown: _this2.updateFocus },
+            { className: _this3.props.classNames.modalVideo, tabIndex: '-1', role: 'dialog',
+              'aria-label': _this3.props.aria.openMessage, onClick: _this3.closeModal, ref: function ref(node) {
+                _this3.modal = node;
+              }, onKeyDown: _this3.updateFocus },
             _react2.default.createElement(
               'div',
-              { className: _this2.props.classNames.modalVideoBody },
+              { className: _this3.props.classNames.modalVideoBody },
               _react2.default.createElement(
                 'div',
-                { className: _this2.props.classNames.modalVideoInner },
+                { className: _this3.props.classNames.modalVideoInner, style: modalVideoInnerStyle },
                 _react2.default.createElement(
                   'div',
-                  { className: _this2.props.classNames.modalVideoIframeWrap, style: style },
-                  _react2.default.createElement('button', { className: _this2.props.classNames.modalVideoCloseBtn, 'aria-label': _this2.props.aria.dismissBtnMessage, ref: function ref(node) {
-                      _this2.modalbtn = node;
-                    }, onKeyDown: _this2.updateFocus }),
-                  _this2.props.children || _react2.default.createElement('iframe', { width: '460', height: '230', src: _this2.getVideoUrl(_this2.props, _this2.props.videoId), frameBorder: '0', allow: 'accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture', allowFullScreen: _this2.props.allowFullScreen, tabIndex: '-1' })
+                  { className: _this3.props.classNames.modalVideoIframeWrap, style: modalVideoIframeWrapStyle },
+                  _react2.default.createElement('button', { className: _this3.props.classNames.modalVideoCloseBtn, 'aria-label': _this3.props.aria.dismissBtnMessage, ref: function ref(node) {
+                      _this3.modalbtn = node;
+                    }, onKeyDown: _this3.updateFocus }),
+                  _this3.props.children || _react2.default.createElement('iframe', { width: '460', height: '230', src: _this3.getVideoUrl(_this3.props, _this3.props.videoId), frameBorder: '0', allow: 'accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture', allowFullScreen: _this3.props.allowFullScreen, tabIndex: '-1' })
                 )
@@ -272,5 +336,5 @@ )
   aria: {
-    openMessage: 'You just openned the modal video',
+    openMessage: 'You just opened the modal video',
     dismissBtnMessage: 'Close the modal by clicking here'
   }
 };

package.json

 {
   "name": "react-modal-video",
-  "version": "1.2.7",
+  "version": "1.2.8",
   "main": "lib/index.js",
@@ -52,5 +52,5 @@ "description": "Modal Video Viewer",
   "peerDependencies": {
-    "react": "^16.2.0",
-    "react-dom": "^16.2.0"
+    "react": "^16.2.0 || ^17.0.0",
+    "react-dom": "^16.2.0 || ^17.0.0"
   }
 }

readme.md

@@ -314,3 +314,3 @@ # react-modal-video
 		<td>openMessage</td>
-		<td>'You just openned the modal video'</td>
+		<td>'You just opened the modal video'</td>
 	</tr>
@@ -317,0 +317,0 @@ <tr>

src/index.jsx

@@ -9,6 +9,9 @@ import React from 'react'
     this.state = {
-      isOpen: false
+      isOpen: false,
+      modalVideoWidth: this.getWidthFulfillAspectRatio(this.props.ratio, window.innerHeight, window.innerWidth)
     }
     this.closeModal = this.closeModal.bind(this)
     this.updateFocus = this.updateFocus.bind(this)
+
+    this.timeout; // used for resizing video.
   }
@@ -35,2 +38,3 @@
     document.addEventListener('keydown', this.keydownHandler.bind(this));
+    window.addEventListener('resize', this.resizeModalVideoWhenHeightGreaterThanWindowHeight.bind(this));
   }
@@ -40,2 +44,3 @@
     document.removeEventListener('keydown', this.keydownHandler.bind(this));
+    window.removeEventListener('resize', this.resizeModalVideoWhenHeightGreaterThanWindowHeight.bind(this));
   }
@@ -65,2 +70,18 @@
 
+  /**
+   * Resize modal-video-iframe-wrap when window size changed when the height of the video is greater than the height of the window.
+   */
+  resizeModalVideoWhenHeightGreaterThanWindowHeight() {
+    clearTimeout(this.timeout);
+
+    this.timeout = setTimeout(() => {
+      const width = this.getWidthFulfillAspectRatio(this.props.ratio, window.innerHeight, window.innerWidth);
+        if (this.state.modalVideoWidth != width) {
+          this.setState({
+            modalVideoWidth: width
+          });
+        }
+    }, 10);
+  }
+
   getQueryString (obj) {
@@ -113,4 +134,39 @@ let url = ''
 
+  /**
+   * Calculate the width of the video fulfill aspect ratio.
+   * When the height of the video is greater than the height of the window,
+   * this function return the width that fulfill the aspect ratio for the height of the window.
+   * In other cases, this function return '100%'(the height relative to the width is determined by css).
+   * 
+   * @param string ratio
+   * @param number maxWidth
+   * @returns number | '100%'
+   */
+  getWidthFulfillAspectRatio(ratio, maxHeight, maxWidth) {
+    const arr = ratio.split(':');
+    const width = Number(arr[0]);
+    const height = Number(arr[1]);
+
+    // Height that fulfill the aspect ratio for maxWidth.
+    const videoHeight = maxWidth * (height / width);
+
+    if (maxHeight < videoHeight) {
+      // when the height of the video is greater than the height of the window.
+      // calculate the width that fulfill the aspect ratio for the height of the window.
+
+      // ex: 16:9 aspect ratio
+      // 16:9 = width : height
+      // → width = 16 / 9 * height
+      return Math.floor(width / height * maxHeight);
+    }
+
+    return '100%';
+  }
+
   render() {
-    const style = {
+    const modalVideoInnerStyle = {
+      width: this.state.modalVideoWidth
+    }
+
+    const modalVideoIframeWrapStyle = {
       paddingBottom: this.getPadding(this.props.ratio)
@@ -133,4 +189,4 @@ }
               <div className={this.props.classNames.modalVideoBody}>
-                <div className={this.props.classNames.modalVideoInner}>
-                  <div className={this.props.classNames.modalVideoIframeWrap} style={style}>
+                <div className={this.props.classNames.modalVideoInner} style={modalVideoInnerStyle}>
+                  <div className={this.props.classNames.modalVideoIframeWrap} style={modalVideoIframeWrapStyle}>
                     <button className={this.props.classNames.modalVideoCloseBtn} aria-label={this.props.aria.dismissBtnMessage} ref={node => { this.modalbtn = node; }} onKeyDown={this.updateFocus} />
@@ -213,5 +269,5 @@ {
   aria: {
-    openMessage: 'You just openned the modal video',
+    openMessage: 'You just opened the modal video',
     dismissBtnMessage: 'Close the modal by clicking here'
   }
 }

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

1268716

increased by0.61%

Lines of code

27072

increased by0.62%

No dependency changes