From 17bb297981ad3c653ab9f652aa3519b05709a179 Mon Sep 17 00:00:00 2001 From: cycjimmy Date: Mon, 14 Oct 2019 20:36:02 +0800 Subject: [PATCH] Support auto positioned; Support auto set aspectRatio; --- .babelrc | 5 +- .browserslistrc | 13 + .editorconfig | 15 + .npmignore | 9 +- .travis.yml | 2 +- README.md | 7 +- build/H5VideoPlayer.js | 1019 ++- build/H5VideoPlayer.min.js | 4 +- dist/H5VideoPlayer.js | 1100 ++-- dist/H5VideoPlayer.js.map | 2 +- gulpfile.js | 2 +- package.json | 49 +- postcss.config.js | 14 +- src/index.js | 173 +- src/{style.scss => style/index.scss} | 29 +- static/view/index.pug | 15 +- test/ui.spec.js | 4 +- webpack.config.js | 91 +- yarn.lock | 8580 ++++++++++++++------------ 19 files changed, 5843 insertions(+), 5290 deletions(-) create mode 100644 .browserslistrc create mode 100644 .editorconfig rename src/{style.scss => style/index.scss} (73%) diff --git a/.babelrc b/.babelrc index e56c486..12d59e7 100644 --- a/.babelrc +++ b/.babelrc @@ -19,8 +19,5 @@ }, "plugins": [ "@babel/plugin-syntax-dynamic-import" - ], - "ignore": [ - "node_modules" ] -} \ No newline at end of file +} diff --git a/.browserslistrc b/.browserslistrc new file mode 100644 index 0000000..1b15ac9 --- /dev/null +++ b/.browserslistrc @@ -0,0 +1,13 @@ +[production staging] +last 4 versions +ie >= 10 +ie_mob >= 10 +ff >= 30 +chrome >= 40 +safari >= 8 +opera >= 23 +ios >= 8 +android >= 4.4 + +[development] +last 2 versions diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..7d10095 --- /dev/null +++ b/.editorconfig @@ -0,0 +1,15 @@ +# EditorConfig is awesome: http://EditorConfig.org + +# top-most EditorConfig file +root = true + +[*] +charset = utf-8 +indent_style = space +indent_size = 2 +end_of_line = lf +insert_final_newline = true +trim_trailing_whitespace = true + +[*.md] +trim_trailing_whitespace = false diff --git a/.npmignore b/.npmignore index 41d1f42..1d17121 100644 --- a/.npmignore +++ b/.npmignore @@ -1,5 +1,9 @@ # IDE .idea +.editorconfig + +# doc +.github # test test @@ -11,7 +15,8 @@ yarn-error.log # project src -static dist -temp +static +*.config.js +gulpfile.js diff --git a/.travis.yml b/.travis.yml index 349c3f8..32d1aa9 100644 --- a/.travis.yml +++ b/.travis.yml @@ -25,5 +25,5 @@ cache: script: - yarn --version - - npm run prepare + - npm run build - jest diff --git a/README.md b/README.md index a4ec25e..51dd45d 100644 --- a/README.md +++ b/README.md @@ -35,11 +35,11 @@ $ yarn add h5-video-player ```javascript import H5VideoPlayer from 'h5-video-player'; # OR - let H5VideoPlayer = require('h5-video-player'); + const H5VideoPlayer = require('h5-video-player'); ``` ```javascript - let videoPlayer = new H5VideoPlayer(source, [, options]); + const videoPlayer = new H5VideoPlayer(source, [, options]); videoPlayer.load(); ``` @@ -49,13 +49,12 @@ $ yarn add h5-video-player * [Array]: E.g: `[{url: 'video.mp4', type:'mp4'},{},...]` * options * `context`: [Element|String] Context Wrapper Element. Default `'body'`. - * `positioned`: [Boolean] Whether the context element has been positioned. Default `false`. * `control`: [Boolean] Whether the user can control. Default `false`. * `autoPlay`: [Boolean] Whether to play immediately after loading. Default `false`. * `autoClose`: [Boolean] Whether to close immediately when the video played off. Default `true`. * `preload`: [Boolean] Whether to preload the video. Default `true`. * `orientation`: [String] landscape / portrait. Default `'portrait'`. - * `aspectRatio`: [Number] Video aspect ratio. Default `9 / 16`. + * `aspectRatio`: [Number] Set video aspect ratio. Default `9 / 16`(when orientation is portrait) or `16 / 9`(when orientation is landscape). * `disableRotation`: [Boolean] Whether to prohibit automatic rotation. Default `false`. * `picMode`: [Boolean] picture mode (no playButton). Default `false`. * `fixAndroidWechatContinue`: [Boolean] Whether compatible with Wechat(Android) play after Forced to pause. Default `false`. diff --git a/build/H5VideoPlayer.js b/build/H5VideoPlayer.js index dbab703..739c56c 100644 --- a/build/H5VideoPlayer.js +++ b/build/H5VideoPlayer.js @@ -1,5 +1,5 @@ /*! - * h5-video-player v1.1.2 + * h5-video-player v1.2.0 * Homepage: https://github.com/cycdpo/h5-video-player#readme * Released under the MIT License. */ @@ -110,9 +110,11 @@ __webpack_require__.r(__webpack_exports__); /* harmony import */ var _playButton_pug__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_playButton_pug__WEBPACK_IMPORTED_MODULE_0__); /* harmony import */ var _wrapper_pug__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(4); /* harmony import */ var _wrapper_pug__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wrapper_pug__WEBPACK_IMPORTED_MODULE_1__); -/* harmony import */ var _style_scss__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(5); -/* harmony import */ var _style_scss__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_style_scss__WEBPACK_IMPORTED_MODULE_2__); -/* harmony import */ var awesome_js_funcs_judgeBasic_isString__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(10); +/* harmony import */ var _style_index_scss__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(5); +/* harmony import */ var _style_index_scss__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_style_index_scss__WEBPACK_IMPORTED_MODULE_2__); +/* harmony import */ var _cycjimmy_awesome_js_funcs_judgeBasic_isString__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(9); +/* harmony import */ var _cycjimmy_awesome_js_funcs_dom_addStyles__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(10); +/* harmony import */ var _cycjimmy_awesome_js_funcs_media_isVideoPlaying__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(11); // template // style @@ -121,13 +123,14 @@ __webpack_require__.r(__webpack_exports__); + + var H5VideoPlayer = /*#__PURE__*/ function () { /** * @param source * @param context - * @param positioned * @param control * @param autoPlay * @param autoClose @@ -146,8 +149,6 @@ function () { context = _ref$context === void 0 ? 'body' : _ref$context, _ref$control = _ref.control, control = _ref$control === void 0 ? false : _ref$control, - _ref$positioned = _ref.positioned, - positioned = _ref$positioned === void 0 ? false : _ref$positioned, _ref$autoPlay = _ref.autoPlay, autoPlay = _ref$autoPlay === void 0 ? false : _ref$autoPlay, _ref$autoClose = _ref.autoClose, @@ -157,7 +158,7 @@ function () { _ref$orientation = _ref.orientation, orientation = _ref$orientation === void 0 ? 'portrait' : _ref$orientation, _ref$aspectRatio = _ref.aspectRatio, - aspectRatio = _ref$aspectRatio === void 0 ? 9 / 16 : _ref$aspectRatio, + aspectRatio = _ref$aspectRatio === void 0 ? 0 : _ref$aspectRatio, _ref$disableRotation = _ref.disableRotation, disableRotation = _ref$disableRotation === void 0 ? false : _ref$disableRotation, _ref$picMode = _ref.picMode, @@ -170,7 +171,7 @@ function () { hookInPause = _ref$hookInPause === void 0 ? function () {} : _ref$hookInPause, _ref$hookInStop = _ref.hookInStop, hookInStop = _ref$hookInStop === void 0 ? function () {} : _ref$hookInStop; - this.context = Object(awesome_js_funcs_judgeBasic_isString__WEBPACK_IMPORTED_MODULE_3__["default"])(context) ? document.querySelector(context) : context; + this.context = Object(_cycjimmy_awesome_js_funcs_judgeBasic_isString__WEBPACK_IMPORTED_MODULE_3__["default"])(context) ? document.querySelector(context) : context; this.options = { source: source, control: control, @@ -178,7 +179,9 @@ function () { autoClose: autoClose, preload: preload, orientation: orientation, - aspectRatio: aspectRatio, + aspectRatio: aspectRatio || function () { + return orientation === 'landscape' ? 16 / 9 : 9 / 16; + }(), disableRotation: disableRotation, picMode: picMode, fixAndroidWechatContinue: fixAndroidWechatContinue, @@ -187,15 +190,18 @@ function () { hookInStop: hookInStop }; // set context position - if (!positioned) { + if (_getElementStyle(this.context, 'position') === 'static') { this.context.style.position = 'relative'; } - this.container = null; - this.wrapper = null; - this.video = null; - this.mask = null; - this.playButton = null; + this.els = { + container: null, + wrapper: null, + video: null, + videoWrapperForConstraintRatio: null, + mask: null, + playButton: null + }; this.initContainer(); this.initWrapper(); @@ -208,52 +214,52 @@ function () { _proto.initContainer = function initContainer() { // container - this.container = document.createElement('div'); - this.container.classList.add(_style_scss__WEBPACK_IMPORTED_MODULE_2___default.a.container); + this.els.container = document.createElement('div'); + this.els.container.classList.add(_style_index_scss__WEBPACK_IMPORTED_MODULE_2___default.a.container); }; _proto.initWrapper = function initWrapper() { // wrapper - this.wrapper = document.createElement('div'); - this.wrapper.classList.add(_style_scss__WEBPACK_IMPORTED_MODULE_2___default.a.wrapper); - this.wrapper.innerHTML = _wrapper_pug__WEBPACK_IMPORTED_MODULE_1___default()({ + this.els.wrapper = document.createElement('div'); + this.els.wrapper.classList.add(_style_index_scss__WEBPACK_IMPORTED_MODULE_2___default.a.wrapper); + this.els.wrapper.innerHTML = _wrapper_pug__WEBPACK_IMPORTED_MODULE_1___default()({ source: this.options.source, orientation: this.options.orientation, - _style: _style_scss__WEBPACK_IMPORTED_MODULE_2___default.a + _style: _style_index_scss__WEBPACK_IMPORTED_MODULE_2___default.a }); - this.container.appendChild(this.wrapper); // video + this.els.container.appendChild(this.els.wrapper); // video - this.videoWrapperForConstraintRatio = this.wrapper.querySelector('.' + _style_scss__WEBPACK_IMPORTED_MODULE_2___default.a.videoWrapperForConstraintRatio); - this.video = this.wrapper.querySelector('.' + _style_scss__WEBPACK_IMPORTED_MODULE_2___default.a.video); // mask: used to control video + this.els.videoWrapperForConstraintRatio = this.els.wrapper.querySelector('.' + _style_index_scss__WEBPACK_IMPORTED_MODULE_2___default.a.videoWrapperForConstraintRatio); + this.els.video = this.els.wrapper.querySelector('.' + _style_index_scss__WEBPACK_IMPORTED_MODULE_2___default.a.video); // mask: used to control video - this.mask = document.createElement('div'); - this.mask.classList.add(_style_scss__WEBPACK_IMPORTED_MODULE_2___default.a.mask); - this.container.appendChild(this.mask); // playButton + this.els.mask = document.createElement('div'); + this.els.mask.classList.add(_style_index_scss__WEBPACK_IMPORTED_MODULE_2___default.a.mask); + this.els.container.appendChild(this.els.mask); // playButton if (this.options.control) { - this.playButton = document.createElement('div'); - this.playButton.classList.add(_style_scss__WEBPACK_IMPORTED_MODULE_2___default.a.playButtonWrapper); // picMode + this.els.playButton = document.createElement('div'); + this.els.playButton.classList.add(_style_index_scss__WEBPACK_IMPORTED_MODULE_2___default.a.playButtonWrapper); // picMode if (!this.options.picMode) { - this.playButton.innerHTML = _playButton_pug__WEBPACK_IMPORTED_MODULE_0___default()({ - _style: _style_scss__WEBPACK_IMPORTED_MODULE_2___default.a + this.els.playButton.innerHTML = _playButton_pug__WEBPACK_IMPORTED_MODULE_0___default()({ + _style: _style_index_scss__WEBPACK_IMPORTED_MODULE_2___default.a }); } - this.container.appendChild(this.playButton); + this.els.container.appendChild(this.els.playButton); } }; _proto.init = function init() { - this.context.appendChild(this.container); + this.context.appendChild(this.els.container); }; _proto.load = function load() { - if (!this.context.contains(this.container)) { + if (!this.context.contains(this.els.container)) { this.init(); } - this.container.classList.add(_style_scss__WEBPACK_IMPORTED_MODULE_2___default.a.show); + this.els.container.classList.add(_style_index_scss__WEBPACK_IMPORTED_MODULE_2___default.a.show); this._assignWrapperStyle(); @@ -270,25 +276,25 @@ function () { var _this = this; if (this.options.control) { - this.mask.addEventListener('click', function () { + this.els.mask.addEventListener('click', function () { if (_this._isPlaying()) { _this.pause(); } else { _this.play(); } }); - this.playButton.addEventListener('click', function () { + this.els.playButton.addEventListener('click', function () { _this.play(); }); } else if (this.options.fixAndroidWechatContinue) { - this.video.addEventListener('click', function () { + this.els.video.addEventListener('click', function () { if (!_this._isPlaying()) { _this.play(); } }); } - this.video.addEventListener('ended', function () { + this.els.video.addEventListener('ended', function () { console.log('ended'); _this._showPlayBtn(); @@ -302,7 +308,7 @@ function () { }; _proto.play = function play() { - this.video.play(); + this.els.video.play(); this._hiddenPlayBtn(); @@ -310,7 +316,7 @@ function () { }; _proto.pause = function pause() { - this.video.pause(); + this.els.video.pause(); this._showPlayBtn(); @@ -318,44 +324,44 @@ function () { }; _proto._showPlayBtn = function _showPlayBtn() { - if (this.playButton) { - this.playButton.style.display = 'block'; + if (this.els.playButton) { + this.els.playButton.style.display = 'block'; } }; _proto._hiddenPlayBtn = function _hiddenPlayBtn() { - if (this.playButton) { - this.playButton.style.display = 'none'; + if (this.els.playButton) { + this.els.playButton.style.display = 'none'; } }; _proto._isPlaying = function _isPlaying() { - return this.video.currentTime > 0 && !this.video.paused && !this.video.ended && this.video.readyState > 2; + return Object(_cycjimmy_awesome_js_funcs_media_isVideoPlaying__WEBPACK_IMPORTED_MODULE_5__["default"])(this.els.video); }; _proto._remove = function _remove() { - this.context.removeChild(this.container); + this.context.removeChild(this.els.container); }; _proto._assignWrapperStyle = function _assignWrapperStyle() { var _this2 = this; var containerRect = function containerRect() { - return _this2.container.getBoundingClientRect(); + return _this2.els.container.getBoundingClientRect(); }, _changeStyle = function _changeStyle() { var containerRectWidth = containerRect().width, containerRectHeight = containerRect().height; if (_judgePhoneOrientation() === _this2.options.orientation) { - _addStyles(_this2.wrapper, { + Object(_cycjimmy_awesome_js_funcs_dom_addStyles__WEBPACK_IMPORTED_MODULE_4__["default"])(_this2.els.wrapper, { width: containerRectWidth + 'px', height: containerRectHeight + 'px', transform: '' }); } else { // Adjust the video orientation - _addStyles(_this2.wrapper, { + Object(_cycjimmy_awesome_js_funcs_dom_addStyles__WEBPACK_IMPORTED_MODULE_4__["default"])(_this2.els.wrapper, { width: containerRectHeight + 'px', height: containerRectWidth + 'px', transform: 'rotate(-90deg)' @@ -364,20 +370,19 @@ function () { setTimeout(function () { - var wrapperWidth = Number.parseInt(_this2.wrapper.style.width), - wrapperHeight = Number.parseInt(_this2.wrapper.style.height), + var wrapperWidth = Number.parseInt(_this2.els.wrapper.style.width), + wrapperHeight = Number.parseInt(_this2.els.wrapper.style.height), preComputedHeight = wrapperWidth / _this2.options.aspectRatio; - console.log(wrapperWidth); if (preComputedHeight >= wrapperHeight) { // based on wrapperWidth - _addStyles(_this2.videoWrapperForConstraintRatio, { + Object(_cycjimmy_awesome_js_funcs_dom_addStyles__WEBPACK_IMPORTED_MODULE_4__["default"])(_this2.els.videoWrapperForConstraintRatio, { width: wrapperWidth + 'px', height: preComputedHeight + 'px' }); } else { // based on wrapperHeight - _addStyles(_this2.videoWrapperForConstraintRatio, { + Object(_cycjimmy_awesome_js_funcs_dom_addStyles__WEBPACK_IMPORTED_MODULE_4__["default"])(_this2.els.videoWrapperForConstraintRatio, { width: wrapperHeight * _this2.options.aspectRatio + 'px', height: wrapperHeight + 'px' }); @@ -398,7 +403,7 @@ function () { window.addEventListener(_orientationchangeEvt, _changeOrientation, false); } else { - _addStyles(this.wrapper, { + Object(_cycjimmy_awesome_js_funcs_dom_addStyles__WEBPACK_IMPORTED_MODULE_4__["default"])(this.els.wrapper, { width: containerRect().width + 'px', height: containerRect().height + 'px' }); @@ -411,25 +416,14 @@ function () { -var _addStyles = function _addStyles(element, styles) { - for (var name in styles) { - element.style[name] = styles[name]; - } -}, - _orientationchangeEvt = "onorientationchange" in window ? "orientationchange" : "resize", +var _orientationchangeEvt = "onorientationchange" in window ? "orientationchange" : "resize", _judgePhoneOrientation = function _judgePhoneOrientation() { var clientWidth = document.documentElement.clientWidth, - clientHeight = document.documentElement.clientHeight, - result = ''; - - if (clientWidth > clientHeight) { - result = 'landscape'; - } else { - result = 'portrait'; - } - - console.log('_judgePhoneOrientation: ' + result); - return result; + clientHeight = document.documentElement.clientHeight; + return clientWidth > clientHeight ? 'landscape' : 'portrait'; +}, + _getElementStyle = function _getElementStyle(el, styleName) { + return window.getComputedStyle(el, null).getPropertyValue(styleName); }; /***/ }), @@ -580,7 +574,8 @@ function pug_attr(key, val, escaped, terse) { if (val === true) { return ' ' + (terse ? key : key + '="' + key + '"'); } - if (typeof val.toJSON === 'function') { + var type = typeof val; + if ((type === 'object' || type === 'function') && typeof val.toJSON === 'function') { val = val.toJSON(); } if (typeof val !== 'string') { @@ -713,7 +708,7 @@ function pug_rethrow(err, filename, lineno, str){ var pug = __webpack_require__(2); -function template(locals) {var pug_html = "", pug_mixins = {}, pug_interp;;var locals_for_with = (locals || {});(function (Array, Object, String, _style, orientation, source) {pug_html = pug_html + "\u003Cdiv" + (pug.attr("class", pug.classes([_style.videoWrapperForConstraintRatio], [true]), false, true)) + "\u003E\u003Cvideo" + (pug.attr("class", pug.classes([_style.video], [true]), false, true)+" width=\"100%\" preload=\"auto\" x-webkit-airplay=\"allow\" webkit-playsinline=\"true\" playsinline x5-video-player-type=\"h5\" x5-video-player-fullscreen=\"true\""+pug.attr("x5-video-orientation", orientation, true, true)) + "\u003E"; +function template(locals) {var pug_html = "", pug_mixins = {}, pug_interp;;var locals_for_with = (locals || {});(function (Array, Object, String, _style, orientation, source) {pug_html = pug_html + "\u003Cdiv" + (pug.attr("class", pug.classes([_style.videoWrapperForConstraintRatio], [true]), false, true)) + "\u003E\u003Cvideo" + (pug.attr("class", pug.classes([_style.video], [true]), false, true)+" width=\"100%\" preload=\"auto\" x-webkit-airplay=\"allow\" webkit-playsinline=\"true\""+pug.attr("playsinline", true, true, true)+" x5-video-player-type=\"h5\" x5-video-player-fullscreen=\"true\""+pug.attr("x5-video-orientation", orientation, true, true)) + "\u003E"; if (source instanceof Array) { // iterate source ;(function(){ @@ -749,643 +744,475 @@ module.exports = template; /* 5 */ /***/ (function(module, exports, __webpack_require__) { - var content = __webpack_require__(6); -if(typeof content === 'string') content = [[module.i, content, '']]; - -var transform; -var insertInto; - - +if (typeof content === 'string') { + content = [[module.i, content, '']]; +} -var options = {"hmr":true} +var options = {} -options.transform = transform -options.insertInto = undefined; +options.insert = "head"; +options.singleton = false; var update = __webpack_require__(8)(content, options); -if(content.locals) module.exports = content.locals; +if (content.locals) { + module.exports = content.locals; +} -if(false) {} /***/ }), /* 6 */ /***/ (function(module, exports, __webpack_require__) { exports = module.exports = __webpack_require__(7)(false); -// imports - - -// module -exports.push([module.i, ".src-style__container, .src-style__video, .src-style__mask, .src-style__playButtonWrapper, .src-style__wrapper, .src-style__videoWrapperForConstraintRatio, .src-style__playButton {\n position: absolute;\n}\n\n.src-style__container, .src-style__video, .src-style__mask, .src-style__playButtonWrapper {\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n}\n\n.src-style__wrapper, .src-style__videoWrapperForConstraintRatio, .src-style__playButton {\n left: -100%;\n top: -100%;\n right: -100%;\n bottom: -100%;\n margin: auto;\n}\n\n.src-style__container {\n z-index: 9999;\n display: none;\n background-color: black;\n overflow: hidden;\n}\n\n.src-style__container.src-style__show {\n display: block;\n}\n\n.src-style__wrapper {\n z-index: 1;\n overflow: hidden;\n background-color: black;\n transform-origin: 50% 50%;\n}\n\n.src-style__videoWrapperForConstraintRatio {\n z-index: 1;\n overflow: hidden;\n}\n\n.src-style__video {\n z-index: -1;\n object-fit: fill;\n object-position: 50% 50%;\n}\n\n.src-style__mask {\n z-index: 10;\n}\n\n.src-style__playButtonWrapper {\n z-index: 100;\n background-color: rgba(0, 0, 0, 0.1);\n}\n\n.src-style__playButton {\n max-width: 60px;\n max-height: 60px;\n cursor: pointer;\n opacity: .6;\n}\n\n.src-style__playButtonSvg {\n max-width: 60px;\n max-height: 60px;\n fill: #fff;\n}\n", ""]); - -// exports +// Module +exports.push([module.i, "/**\n * strip units\n */\n/**\n * calc vw\n * $designDrawingLength\n * $designDrawingWidth\n *\n * Usage:\n * @function calcVW($designDrawingLength:0) {\n * @return call(get_function(\"designPx2VW\"), $designDrawingLength, $designDrawingWidth);\n * }\n */\n/**\n * Fix Align Center\n * $offset\n * $overwrite\n * $top\n * $right\n * $bottom\n * $left\n */\n/**\n * flex container inner elements alignment\n * $mainAxis\n * $crossAxis\n * options: false, center, flex-end, ...\n */\n/**\n * square container\n */\n/**\n * bg-image-full\n */\n.src-style-index__container, .src-style-index__video, .src-style-index__mask, .src-style-index__playButtonWrapper {\n position: absolute;\n z-index: 1;\n}\n\n/**\n * Fix Align Center\n * $offset\n * $overwrite\n * $top\n * $right\n * $bottom\n * $left\n */\n/**\n * flex container inner elements alignment\n * $mainAxis\n * $crossAxis\n * options: false, center, flex-end, ...\n */\n/**\n * square container\n */\n/**\n * bg-image-full\n */\n.src-style-index__container, .src-style-index__video, .src-style-index__mask, .src-style-index__playButtonWrapper {\n position: absolute;\n z-index: 1;\n}\n\n.src-style-index__container, .src-style-index__video, .src-style-index__mask, .src-style-index__playButtonWrapper {\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n}\n\n.src-style-index__wrapper, .src-style-index__videoWrapperForConstraintRatio, .src-style-index__playButton {\n position: absolute;\n margin: auto;\n left: -100%;\n top: -100%;\n right: -100%;\n bottom: -100%;\n}\n\n.src-style-index__container {\n z-index: 9999;\n display: none;\n background-color: black;\n overflow: hidden;\n}\n\n.src-style-index__container.src-style-index__show {\n display: block;\n}\n\n.src-style-index__wrapper {\n z-index: 1;\n overflow: hidden;\n background-color: black;\n -webkit-transform-origin: 50% 50%;\n transform-origin: 50% 50%;\n}\n\n.src-style-index__videoWrapperForConstraintRatio {\n z-index: 1;\n overflow: hidden;\n}\n\n.src-style-index__video {\n z-index: -1;\n -o-object-fit: fill;\n object-fit: fill;\n -o-object-position: 50% 50%;\n object-position: 50% 50%;\n}\n\n.src-style-index__mask {\n z-index: 10;\n}\n\n.src-style-index__playButtonWrapper {\n z-index: 100;\n background-color: rgba(0, 0, 0, 0.1);\n}\n\n.src-style-index__playButton {\n max-width: 60px;\n max-height: 60px;\n cursor: pointer;\n opacity: .6;\n}\n\n.src-style-index__playButtonSvg {\n max-width: 60px;\n max-height: 60px;\n fill: #fff;\n}\n", ""]); +// Exports exports.locals = { - "container": "src-style__container", - "video": "src-style__video", - "mask": "src-style__mask", - "playButtonWrapper": "src-style__playButtonWrapper", - "wrapper": "src-style__wrapper", - "videoWrapperForConstraintRatio": "src-style__videoWrapperForConstraintRatio", - "playButton": "src-style__playButton", - "show": "src-style__show", - "playButtonSvg": "src-style__playButtonSvg" + "container": "src-style-index__container", + "video": "src-style-index__video", + "mask": "src-style-index__mask", + "playButtonWrapper": "src-style-index__playButtonWrapper", + "wrapper": "src-style-index__wrapper", + "videoWrapperForConstraintRatio": "src-style-index__videoWrapperForConstraintRatio", + "playButton": "src-style-index__playButton", + "show": "src-style-index__show", + "playButtonSvg": "src-style-index__playButtonSvg" }; /***/ }), /* 7 */ -/***/ (function(module, exports) { +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; /* - MIT License http://www.opensource.org/licenses/mit-license.php - Author Tobias Koppers @sokra + MIT License http://www.opensource.org/licenses/mit-license.php + Author Tobias Koppers @sokra */ // css base code, injected by the css-loader -module.exports = function(useSourceMap) { - var list = []; - - // return the list of modules as css string - list.toString = function toString() { - return this.map(function (item) { - var content = cssWithMappingToString(item, useSourceMap); - if(item[2]) { - return "@media " + item[2] + "{" + content + "}"; - } else { - return content; - } - }).join(""); - }; - - // import a list of modules into the list - list.i = function(modules, mediaQuery) { - if(typeof modules === "string") - modules = [[null, modules, ""]]; - var alreadyImportedModules = {}; - for(var i = 0; i < this.length; i++) { - var id = this[i][0]; - if(typeof id === "number") - alreadyImportedModules[id] = true; - } - for(i = 0; i < modules.length; i++) { - var item = modules[i]; - // skip already imported module - // this implementation is not 100% perfect for weird media query combinations - // when a module is imported multiple times with different media queries. - // I hope this will never occur (Hey this way we have smaller bundles) - if(typeof item[0] !== "number" || !alreadyImportedModules[item[0]]) { - if(mediaQuery && !item[2]) { - item[2] = mediaQuery; - } else if(mediaQuery) { - item[2] = "(" + item[2] + ") and (" + mediaQuery + ")"; - } - list.push(item); - } - } - }; - return list; -}; +// eslint-disable-next-line func-names -function cssWithMappingToString(item, useSourceMap) { - var content = item[1] || ''; - var cssMapping = item[3]; - if (!cssMapping) { - return content; - } - - if (useSourceMap && typeof btoa === 'function') { - var sourceMapping = toComment(cssMapping); - var sourceURLs = cssMapping.sources.map(function (source) { - return '/*# sourceURL=' + cssMapping.sourceRoot + source + ' */' - }); - - return [content].concat(sourceURLs).concat([sourceMapping]).join('\n'); - } - - return [content].join('\n'); -} +module.exports = function (useSourceMap) { + var list = []; // return the list of modules as css string -// Adapted from convert-source-map (MIT) -function toComment(sourceMap) { - // eslint-disable-next-line no-undef - var base64 = btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))); - var data = 'sourceMappingURL=data:application/json;charset=utf-8;base64,' + base64; + list.toString = function toString() { + return this.map(function (item) { + var content = cssWithMappingToString(item, useSourceMap); - return '/*# ' + data + ' */'; -} + if (item[2]) { + return "@media ".concat(item[2], "{").concat(content, "}"); + } + return content; + }).join(''); + }; // import a list of modules into the list + // eslint-disable-next-line func-names -/***/ }), -/* 8 */ -/***/ (function(module, exports, __webpack_require__) { -/* - MIT License http://www.opensource.org/licenses/mit-license.php - Author Tobias Koppers @sokra -*/ + list.i = function (modules, mediaQuery) { + if (typeof modules === 'string') { + // eslint-disable-next-line no-param-reassign + modules = [[null, modules, '']]; + } -var stylesInDom = {}; + var alreadyImportedModules = {}; -var memoize = function (fn) { - var memo; + for (var i = 0; i < this.length; i++) { + // eslint-disable-next-line prefer-destructuring + var id = this[i][0]; - return function () { - if (typeof memo === "undefined") memo = fn.apply(this, arguments); - return memo; - }; -}; + if (id != null) { + alreadyImportedModules[id] = true; + } + } -var isOldIE = memoize(function () { - // Test for IE <= 9 as proposed by Browserhacks - // @see http://browserhacks.com/#hack-e71d8692f65334173fee715c222cb805 - // Tests for existence of standard globals is to allow style-loader - // to operate correctly into non-standard environments - // @see https://github.com/webpack-contrib/style-loader/issues/177 - return window && document && document.all && !window.atob; -}); + for (var _i = 0; _i < modules.length; _i++) { + var item = modules[_i]; // skip already imported module + // this implementation is not 100% perfect for weird media query combinations + // when a module is imported multiple times with different media queries. + // I hope this will never occur (Hey this way we have smaller bundles) + + if (item[0] == null || !alreadyImportedModules[item[0]]) { + if (mediaQuery && !item[2]) { + item[2] = mediaQuery; + } else if (mediaQuery) { + item[2] = "(".concat(item[2], ") and (").concat(mediaQuery, ")"); + } -var getTarget = function (target, parent) { - if (parent){ - return parent.querySelector(target); - } - return document.querySelector(target); -}; + list.push(item); + } + } + }; -var getElement = (function (fn) { - var memo = {}; - - return function(target, parent) { - // If passing function in options, then use it for resolve "head" element. - // Useful for Shadow Root style i.e - // { - // insertInto: function () { return document.querySelector("#foo").shadowRoot } - // } - if (typeof target === 'function') { - return target(); - } - if (typeof memo[target] === "undefined") { - var styleTarget = getTarget.call(this, target, parent); - // Special case to return head of iframe instead of iframe itself - if (window.HTMLIFrameElement && styleTarget instanceof window.HTMLIFrameElement) { - try { - // This will throw an exception if access to iframe is blocked - // due to cross-origin restrictions - styleTarget = styleTarget.contentDocument.head; - } catch(e) { - styleTarget = null; - } - } - memo[target] = styleTarget; - } - return memo[target] - }; -})(); + return list; +}; -var singleton = null; -var singletonCounter = 0; -var stylesInsertedAtTop = []; +function cssWithMappingToString(item, useSourceMap) { + var content = item[1] || ''; // eslint-disable-next-line prefer-destructuring -var fixUrls = __webpack_require__(9); + var cssMapping = item[3]; -module.exports = function(list, options) { - if (typeof DEBUG !== "undefined" && DEBUG) { - if (typeof document !== "object") throw new Error("The style-loader cannot be used in a non-browser environment"); - } + if (!cssMapping) { + return content; + } - options = options || {}; + if (useSourceMap && typeof btoa === 'function') { + var sourceMapping = toComment(cssMapping); + var sourceURLs = cssMapping.sources.map(function (source) { + return "/*# sourceURL=".concat(cssMapping.sourceRoot).concat(source, " */"); + }); + return [content].concat(sourceURLs).concat([sourceMapping]).join('\n'); + } - options.attrs = typeof options.attrs === "object" ? options.attrs : {}; + return [content].join('\n'); +} // Adapted from convert-source-map (MIT) - // Force single-tag solution on IE6-9, which has a hard limit on the # of