@afiniti/video-player-lite
Version:
React component for playing videos
2 lines (1 loc) • 37.4 kB
JavaScript
;var e=require("react"),o=require("gsap"),t=require("react-dom"),n=require("prop-types"),i=require("react-slick");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function l(e){if(e&&e.__esModule)return e;var o=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(o,t,n.get?n:{enumerable:!0,get:function(){return e[t]}})}})),o.default=e,Object.freeze(o)}var r,d,u,s=l(e),c=a(e),p=a(o),m=a(t),_=a(n),f=a(i);function y(e,o){for(var t=0;t<o.length;t++){var n=o[t];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}function h(e,o,t){return o in e?Object.defineProperty(e,o,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[o]=t,e}function v(e){return(v=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function g(e,o){return(g=Object.setPrototypeOf||function(e,o){return e.__proto__=o,e})(e,o)}function x(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function b(e,o){return!o||"object"!=typeof o&&"function"!=typeof o?x(e):o}function C(e){var o=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var t,n=v(e);if(o){var i=v(this).constructor;t=Reflect.construct(n,arguments,i)}else t=n.apply(this,arguments);return b(this,t)}}function w(e,o){return function(e){if(Array.isArray(e))return e}(e)||function(e,o){var t=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null==t)return;var n,i,a=[],l=!0,r=!1;try{for(t=t.call(e);!(l=(n=t.next()).done)&&(a.push(n.value),!o||a.length!==o);l=!0);}catch(e){r=!0,i=e}finally{try{l||null==t.return||t.return()}finally{if(r)throw i}}return a}(e,o)||function(e,o){if(!e)return;if("string"==typeof e)return P(e,o);var t=Object.prototype.toString.call(e).slice(8,-1);"Object"===t&&e.constructor&&(t=e.constructor.name);if("Map"===t||"Set"===t)return Array.from(e);if("Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t))return P(e,o)}(e,o)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function P(e,o){(null==o||o>e.length)&&(o=e.length);for(var t=0,n=new Array(o);t<o;t++)n[t]=e[t];return n}function E(){return(E=Object.assign||function(e){for(var o=1;o<arguments.length;o++){var t=arguments[o];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e}).apply(this,arguments)}function k(e){return s.createElement("svg",E({xmlns:"http://www.w3.org/2000/svg",width:50,height:60,viewBox:"0 0 63.38 63.38",fill:"#0d1220"},e),r||(r=s.createElement("g",{fill:"inherit"},s.createElement("path",{"data-name":"Path 102",d:"M47.14 32.48l-23.8 12.45a.89.89 0 01-1.2-.37.87.87 0 01-.1-.42v-24.9a.88.88 0 01.88-.89.9.9 0 01.42.1l23.8 12.45a.88.88 0 01.38 1.2.87.87 0 01-.38.38z"}),s.createElement("path",{"data-name":"Path 103",d:"M31.69 63.38a31.69 31.69 0 1131.69-31.69 31.69 31.69 0 01-31.69 31.69zm0-60.87a29.18 29.18 0 1029.18 29.18A29.21 29.21 0 0031.69 2.51z"}))))}function I(){return(I=Object.assign||function(e){for(var o=1;o<arguments.length;o++){var t=arguments[o];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e}).apply(this,arguments)}function V(e){return s.createElement("svg",I({width:25,height:25,viewBox:"0 0 27.46 27.46",fill:"#0d1220"},e),d||(d=s.createElement("path",{d:"M26.46 27.46a1 1 0 01-.71-.3L.29 1.71A1 1 0 011.71.29l25.45 25.46a1 1 0 010 1.41 1 1 0 01-.7.3z",fill:"inherit"})),u||(u=s.createElement("path",{d:"M1 27.46a1 1 0 01-.71-1.71L25.75.29a1 1 0 011.41 0 1 1 0 010 1.42L1.71 27.16a1 1 0 01-.71.3z",fill:"inherit"})))}function M(e,o){void 0===o&&(o={});var t=o.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===t&&n.firstChild?n.insertBefore(i,n.firstChild):n.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(document.createTextNode(e))}}var N,T,W,S,z;function j(){return(j=Object.assign||function(e){for(var o=1;o<arguments.length;o++){var t=arguments[o];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e}).apply(this,arguments)}function H(e){return s.createElement("svg",j({xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 32 32"},e),N||(N=s.createElement("path",{d:"M27 22.757c0 1.24-.988 2.243-2.19 2.243H7.19C5.98 25 5 23.994 5 22.757V13.67c0-.556.39-.773.855-.496l8.78 5.238c.782.467 1.95.467 2.73 0l8.78-5.238c.472-.28.855-.063.855.495v9.087z"})),T||(T=s.createElement("path",{d:"M27 9.243C27 8.006 26.02 7 24.81 7H7.19C5.988 7 5 8.004 5 9.243v.465c0 .554.385 1.232.857 1.514l9.61 5.733c.267.16.8.16 1.067 0l9.61-5.733c.473-.283.856-.96.856-1.514v-.465z"})))}function F(){return(F=Object.assign||function(e){for(var o=1;o<arguments.length;o++){var t=arguments[o];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e}).apply(this,arguments)}function O(e){return s.createElement("svg",F({xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 32 32"},e),W||(W=s.createElement("path",{d:"M22 5.16c-.406-.054-1.806-.16-3.43-.16-3.4 0-5.733 1.825-5.733 5.17v2.882H9v3.913h3.837V27h4.604V16.965h3.823l.587-3.913h-4.41v-2.5c0-1.123.347-1.903 2.198-1.903H22V5.16z"})))}function A(){return(A=Object.assign||function(e){for(var o=1;o<arguments.length;o++){var t=arguments[o];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e}).apply(this,arguments)}function L(e){return s.createElement("svg",A({xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 32 32"},e),S||(S=s.createElement("path",{d:"M27.996 10.116c-.81.36-1.68.602-2.592.71a4.526 4.526 0 001.984-2.496 9.037 9.037 0 01-2.866 1.095 4.513 4.513 0 00-7.69 4.116 12.81 12.81 0 01-9.3-4.715 4.49 4.49 0 00-.612 2.27 4.51 4.51 0 002.008 3.755 4.495 4.495 0 01-2.044-.564v.057a4.515 4.515 0 003.62 4.425 4.52 4.52 0 01-2.04.077 4.517 4.517 0 004.217 3.134 9.055 9.055 0 01-5.604 1.93A9.18 9.18 0 016 23.85a12.773 12.773 0 006.918 2.027c8.3 0 12.84-6.876 12.84-12.84 0-.195-.005-.39-.014-.583a9.172 9.172 0 002.252-2.336"})))}function B(){return(B=Object.assign||function(e){for(var o=1;o<arguments.length;o++){var t=arguments[o];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e}).apply(this,arguments)}function R(e){return s.createElement("svg",B({xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 32 32"},e),z||(z=s.createElement("path",{d:"M26 25.963h-4.185v-6.55c0-1.56-.027-3.57-2.175-3.57-2.18 0-2.51 1.7-2.51 3.46v6.66h-4.182V12.495h4.012v1.84h.058c.558-1.058 1.924-2.174 3.96-2.174 4.24 0 5.022 2.79 5.022 6.417v7.386zM8.23 10.655a2.426 2.426 0 010-4.855 2.427 2.427 0 010 4.855zm-2.098 1.84h4.19v13.468h-4.19V12.495z"})))}M(".resp-sharing-button--small svg{margin:0;vertical-align:middle}.resp-sharing-button__link{display:inline-block;margin:.3em}.resp-sharing-button__icon--solid,.resp-sharing-button__icon--solidcircle{fill:#fff;stroke:none}.resp-sharing-button{transition:transform .2s linear}.resp-sharing-button:hover{transform:translateY(-5px)}.socialShare .resp-sharing-button__icon--solid-videos{stroke:none;width:30px;height:30px;opacity:.8;padding:0;display:flex;fill:#fff;border-radius:50%;align-items:center;justify-content:center;border:1px solid #fff;transition:opacity .2s linear}.socialShare .resp-sharing-button__icon--solid-videos:hover{opacity:1;background:#ed3453;border:1px solid #ed3453}.resp-sharing-button__icon-videos svg{width:1em;height:1em}");var X=function(e){var o=e.href,t=e.type;return c.default.createElement("a",{className:"resp-sharing-button__link",href:o,target:"_blank",rel:"noopener noreferrer",id:"social-icons"},c.default.createElement("div",{className:"resp-sharing-button-videos resp-sharing-button--".concat(t,"-videos resp-sharing-button--small")},c.default.createElement("div",{"aria-hidden":"true",className:"resp-sharing-button__icon-videos resp-sharing-button__icon--solid-videos"},"email"===t&&c.default.createElement(H,null),"facebook"===t&&c.default.createElement(O,null),"twitter"===t&&c.default.createElement(L,null),"linkedin"===t&&c.default.createElement(R,null))))},q=function(e){var o=e.title,t=e.url,n=e.email,i=e.facebook,a=e.twitter,l=e.linkedin;return c.default.createElement("span",{className:"socialShare"},n&&c.default.createElement(X,{href:"mailto:?subject=".concat(o,".&body=").concat(t),type:"email"}),i&&c.default.createElement(X,{href:"https://facebook.com/sharer/sharer.php?u=".concat(t),type:"facebook"}),a&&c.default.createElement(X,{href:"https://twitter.com/intent/tweet/?text=".concat(o,"&url=").concat(t),type:"twitter"}),l&&c.default.createElement(X,{href:"https://www.linkedin.com/shareArticle?mini=true&url=".concat(t,"&title=").concat(o,".&source=").concat(t),type:"linkedin"}))};q.propTypes={title:_.default.string.isRequired,url:_.default.string.isRequired,email:_.default.bool,facebook:_.default.bool,twitter:_.default.bool,linkedin:_.default.bool},q.defaultProps={email:!0,facebook:!0,twitter:!0,linkedin:!0};var G="index-module_relatedVideosContainer__1sy07",Z="index-module_slidesContainer__3ZRzC",J="index-module_continueText__2V4am",Q="index-module_itemWrapper__9IGkg",Y="index-module_imageContainer__ANW4l",U="index-module_posterImage__1TYTT",D="index-module_imageContent__w-hnE",K="index-module_posterTitle__14txS",$="index-module_svgFill__1GGx0",ee="index-module_autoPlayContainer__3v2gX",oe="index-module_autoPlayBlock__2XQFm",te="index-module_autoPlayImg__22u9J",ne="index-module_autoPlayContent__3kHYx",ie="index-module_upNext__1bNAe",ae="index-module_autoPlayTitle__F-ETd",le="index-module_nextSpinner__9cdGo",re="index-module_nextPlay__3fOxt",de="index-module_playerWrapper__3dQpc",ue="index-module_crossIcon__1zoHT";M(".index-module_relatedVideosContainer__1sy07{top:0;left:0;flex:1;right:0;bottom:0;z-index:5;width:100%;height:100%;display:flex;margin:0 auto;position:fixed;flex-direction:column;justify-content:center;background:rgba(2,10,32,.8)}.index-module_relatedVideosContainer__1sy07 .index-module_slidesContainer__3ZRzC{padding:0 15%}@media (max-width:1024px){.index-module_relatedVideosContainer__1sy07 .index-module_slidesContainer__3ZRzC{padding:0 5%}}@media (max-width:640px){.index-module_relatedVideosContainer__1sy07 .index-module_slidesContainer__3ZRzC{padding:0 10%}}.index-module_relatedVideosContainer__1sy07 .index-module_slidesContainer__3ZRzC .index-module_continueText__2V4am{color:#faf9f8;margin:20px 0;transform:none;font-size:24px;font-weight:300;font-family:Josefin Sans,sans-serif}.index-module_relatedVideosContainer__1sy07 .index-module_slidesContainer__3ZRzC .index-module_continueText__2V4am:before{content:none}.index-module_relatedVideosContainer__1sy07 .index-module_slidesContainer__3ZRzC .index-module_itemWrapper__9IGkg{width:30vw;height:240px;position:relative}@media (max-width:640px){.index-module_relatedVideosContainer__1sy07 .index-module_slidesContainer__3ZRzC .index-module_itemWrapper__9IGkg{width:60vw;height:160px}}@media (max-width:360px){.index-module_relatedVideosContainer__1sy07 .index-module_slidesContainer__3ZRzC .index-module_itemWrapper__9IGkg{height:140px}}.index-module_relatedVideosContainer__1sy07 .index-module_slidesContainer__3ZRzC .index-module_itemWrapper__9IGkg .index-module_imageContainer__ANW4l{width:100%;height:100%;position:relative}.index-module_relatedVideosContainer__1sy07 .index-module_slidesContainer__3ZRzC .index-module_itemWrapper__9IGkg .index-module_imageContainer__ANW4l .index-module_posterImage__1TYTT{width:100%;height:100%;object-fit:cover;max-width:none;object-position:50% 25%}.index-module_relatedVideosContainer__1sy07 .index-module_slidesContainer__3ZRzC .index-module_itemWrapper__9IGkg .index-module_imageContainer__ANW4l .index-module_imageContent__w-hnE{bottom:0;width:100%;display:flex;position:absolute;justify-content:space-between}.index-module_relatedVideosContainer__1sy07 .index-module_slidesContainer__3ZRzC .index-module_itemWrapper__9IGkg .index-module_imageContainer__ANW4l .index-module_imageContent__w-hnE .index-module_posterTitle__14txS{color:#faf9f8;margin:12px 0;transform:none;font-size:12px;padding-left:15px;text-transform:uppercase;font-family:Josefin Sans,sans-serif}.index-module_relatedVideosContainer__1sy07 .index-module_slidesContainer__3ZRzC .index-module_itemWrapper__9IGkg .index-module_imageContainer__ANW4l .index-module_imageContent__w-hnE .index-module_posterTitle__14txS:before{content:none}.index-module_relatedVideosContainer__1sy07 .index-module_slidesContainer__3ZRzC .index-module_itemWrapper__9IGkg .index-module_imageContainer__ANW4l .index-module_imageContent__w-hnE .index-module_svgFill__1GGx0{right:0;bottom:10px;height:20px;fill:#fff;position:absolute}.index-module_relatedVideosContainer__1sy07 .index-module_slidesContainer__3ZRzC .slick-slide{margin:0 10px}.index-module_relatedVideosContainer__1sy07 .index-module_slidesContainer__3ZRzC .slick-list{margin:0 -10px}.index-module_relatedVideosContainer__1sy07 .index-module_autoPlayContainer__3v2gX{width:100%;display:flex;margin:0 auto}.index-module_relatedVideosContainer__1sy07 .index-module_autoPlayContainer__3v2gX .index-module_autoPlayBlock__2XQFm{width:450px;height:270px;margin:0 auto;position:relative}@media (max-width:640px){.index-module_relatedVideosContainer__1sy07 .index-module_autoPlayContainer__3v2gX .index-module_autoPlayBlock__2XQFm{width:270px;height:160px}}@media (max-width:360px){.index-module_relatedVideosContainer__1sy07 .index-module_autoPlayContainer__3v2gX .index-module_autoPlayBlock__2XQFm{width:230px;height:140px}}.index-module_relatedVideosContainer__1sy07 .index-module_autoPlayContainer__3v2gX .index-module_autoPlayBlock__2XQFm .index-module_autoPlayImg__22u9J{width:100%;height:100%;object-fit:cover;max-width:none;object-position:50% 25%}.index-module_relatedVideosContainer__1sy07 .index-module_autoPlayContainer__3v2gX .index-module_autoPlayBlock__2XQFm .index-module_autoPlayContent__3kHYx{top:0;left:0;right:0;bottom:0;display:flex;position:absolute;align-items:center;flex-direction:column;justify-content:center}.index-module_relatedVideosContainer__1sy07 .index-module_autoPlayContainer__3v2gX .index-module_autoPlayBlock__2XQFm .index-module_autoPlayContent__3kHYx .index-module_upNext__1bNAe{color:#faf9f8;margin:18px 0;font-size:18px;transform:none;font-weight:300;font-family:Josefin Sans,sans-serif}@media (max-width:640px){.index-module_relatedVideosContainer__1sy07 .index-module_autoPlayContainer__3v2gX .index-module_autoPlayBlock__2XQFm .index-module_autoPlayContent__3kHYx .index-module_upNext__1bNAe{font-size:14px}}.index-module_relatedVideosContainer__1sy07 .index-module_autoPlayContainer__3v2gX .index-module_autoPlayBlock__2XQFm .index-module_autoPlayContent__3kHYx .index-module_upNext__1bNAe:before{content:none}.index-module_relatedVideosContainer__1sy07 .index-module_autoPlayContainer__3v2gX .index-module_autoPlayBlock__2XQFm .index-module_autoPlayContent__3kHYx .index-module_autoPlayTitle__F-ETd{color:#faf9f8;font-size:17px;transform:none;text-transform:uppercase;font-family:Josefin Sans,sans-serif}@media (max-width:640px){.index-module_relatedVideosContainer__1sy07 .index-module_autoPlayContainer__3v2gX .index-module_autoPlayBlock__2XQFm .index-module_autoPlayContent__3kHYx .index-module_autoPlayTitle__F-ETd{font-size:14px}}.index-module_relatedVideosContainer__1sy07 .index-module_autoPlayContainer__3v2gX .index-module_autoPlayBlock__2XQFm .index-module_autoPlayContent__3kHYx .index-module_autoPlayTitle__F-ETd:before{content:none}.index-module_relatedVideosContainer__1sy07 .index-module_autoPlayContainer__3v2gX .index-module_autoPlayBlock__2XQFm .index-module_autoPlayContent__3kHYx .index-module_nextSpinner__9cdGo{fill:none;width:50px;color:#faf9f8;stroke-width:8;cursor:pointer;vertical-align:top;stroke:currentColor;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:263.467529296875;stroke-dashoffset:263.467529296875}.index-module_relatedVideosContainer__1sy07 .index-module_autoPlayContainer__3v2gX .index-module_autoPlayBlock__2XQFm .index-module_autoPlayContent__3kHYx .index-module_nextSpinner__9cdGo svg{fill:#faf9f8}.index-module_relatedVideosContainer__1sy07 .index-module_autoPlayContainer__3v2gX .index-module_autoPlayBlock__2XQFm .index-module_autoPlayContent__3kHYx .index-module_nextPlay__3fOxt{opacity:0;width:45px;fill:#faf9f8;cursor:pointer;visibility:hidden}.index-module_relatedVideosContainer__1sy07 .index-module_playerWrapper__3dQpc{top:0;left:0;right:0;bottom:0;opacity:0;position:absolute}.index-module_relatedVideosContainer__1sy07 .index-module_crossIcon__1zoHT{top:45px;right:5%;fill:#fff;position:absolute}");var se={speed:500,dots:!1,arrows:!1,infinite:!1,swipeable:!0,draggable:!0,slidesToScroll:1,variableWidth:!0},ce=null,pe=!1,me=null,_e=null,fe=function(o){var t=o.data,n=w(e.useState(!1),2),i=n[0],a=n[1];e.useEffect((function(){me&&_e===t[0].slug+"-spinner"||!document.querySelector("#".concat(t[0].slug+"-spinner"))||(_e=t[0].slug+"-spinner",me=p.default.to("#".concat(t[0].slug+"-spinner"),{duration:15,strokeDashoffset:0,onComplete:function(){ce&&ce()}}))}),[t]);return(null==t?void 0:t.length)>0?c.default.createElement("div",{className:"".concat(G," relatedVideoContainer")},c.default.createElement("div",{className:ee},c.default.createElement("div",{className:oe},c.default.createElement("div",{className:de},c.default.createElement(Ie,{videoSlug:t[0].slug,vimeoId:t[0].vimeoId,isFloating:!1,playFullScreen:!1,videoTitle:t[0].title,openInModal:!0,poster:"http://media.graphcms.com/"+t[0].hero[0].handle,apiUrl:"https://api-us-east-1.graphcms.com/v2/ckui8cam7108201xpc9tg32du/master",setClick:function(e){return ce=e},openRelatedVideos:!0})),null!==t[0].hero&&t[0].hero.length>0&&t[0].hero[0].handle&&c.default.createElement("div",{className:te},c.default.createElement("img",{alt:t[0].title||"posterImage",src:"http://media.graphcms.com/"+t[0].hero[0].handle,className:te}),c.default.createElement("div",{className:ne},c.default.createElement("h3",{className:ie},"Up Next"),c.default.createElement("h3",{className:ae},t[0].title),c.default.createElement("svg",{id:t[0].slug+"-spinner",className:le,viewBox:"0 0 96 96",xmlns:"http://www.w3.org/2000/svg",onClick:function(e){me.kill(),p.default.to("#".concat(t[0].slug+"-spinner"),{duration:.1,autoAlpha:0,onComplete:function(){p.default.set("#".concat(t[0].slug+"-spinner"),{display:"none"}),p.default.to(".".concat(re),{duration:.1,autoAlpha:1})}}),e.cancelBubble=!0,e.stopPropagation()},onKeyDown:function(){}},c.default.createElement("circle",{cx:"48",cy:"48",r:"42"}),c.default.createElement(V,{x:"36",y:"36"})),c.default.createElement(k,{className:re,onClick:function(){ce()}}))))),c.default.createElement("div",{className:Z},c.default.createElement("h2",{className:J},"Continue Watching"),(null==t?void 0:t.length)>1?c.default.createElement(f.default,se,t.filter((function(e,o){return 0!==o})).map((function(e){return c.default.createElement("div",{className:Q,key:e.title,onMouseDown:function(){pe=!0},onMouseMove:function(){pe&&a(!0)},onMouseUp:function(){pe=!1,setTimeout((function(){a(!1)}),100)},onClickCapture:function(e){i&&(e.preventDefault(),e.stopPropagation())}},null!==e.hero&&e.hero.length>0&&e.hero[0].handle&&c.default.createElement("div",{className:Y},c.default.createElement("img",{alt:e.title||"posterImage",src:"http://media.graphcms.com/"+e.hero[0].handle,className:U}),c.default.createElement("div",{className:D},c.default.createElement("h3",{className:K},e.title),c.default.createElement(k,{className:$}))),c.default.createElement("div",{className:de},c.default.createElement(Ie,{videoSlug:e.slug,vimeoId:e.vimeoId,isFloating:!1,playFullScreen:!1,videoTitle:e.title,openInModal:!0,poster:e.hero[0].handle?"http://media.graphcms.com/"+e.hero[0].handle:"",apiUrl:"https://api-us-east-1.graphcms.com/v2/ckui8cam7108201xpc9tg32du/master",openRelatedVideos:!0,playCallback:function(){me.kill()}})))}))):c.default.createElement("div",null)),c.default.createElement(V,{className:ue,onClick:function(){me.kill(),p.default.to(".".concat(G),{autoAlpha:0})}})):null},ye=null,he="index-module_playerComponent__3IaWE",ve="index-module_videoTitle__20JlI",ge="index-module_posterWrapper__2WJGZ",xe="index-module_posterImage__2yxur",be="index-module_playIcon__1lopG",Ce="index-module_playerWrapper__2oYHn",we="index-module_closeIcon__xBP76",Pe="index-module_svgFill__1TosM";M(".index-module_playerComponent__3IaWE{width:100%;height:100%;position:relative}.index-module_playerComponent__3IaWE .index-module_videoTitle__20JlI{left:10%;z-index:1;bottom:120px;font-size:30px;margin-bottom:0;color:#fff;font-weight:400;position:absolute;font-family:Josefin Sans,sans-serif}@media (max-width:640px){.index-module_playerComponent__3IaWE .index-module_videoTitle__20JlI{bottom:70px;font-size:18px}}.index-module_playerComponent__3IaWE .index-module_posterWrapper__2WJGZ{top:0;left:0;right:0;bottom:0;z-index:1;margin:auto;cursor:pointer;position:absolute}.index-module_playerComponent__3IaWE .index-module_posterWrapper__2WJGZ .index-module_posterImage__2yxur{width:100%;height:100%;object-fit:cover;max-width:none;object-position:50% 25%}.index-module_playerComponent__3IaWE .index-module_posterWrapper__2WJGZ .index-module_playIcon__1lopG{border:0;top:50%;left:50%;z-index:1;padding:0;outline:none;cursor:pointer;text-align:left;background:none;appearance:none;position:absolute;transform:translate(-50%,-50%)}.index-module_playerComponent__3IaWE .index-module_posterWrapper__2WJGZ .index-module_playIcon__1lopG svg{width:60px;fill:#fff;filter:invert(.1);transition:fill .2s linear,filter .2s linear}.index-module_playerComponent__3IaWE .index-module_posterWrapper__2WJGZ .index-module_playIcon__1lopG:hover svg{filter:invert(0);fill:#e62649}.index-module_playerComponent__3IaWE .index-module_playerWrapper__2oYHn{width:100%;height:100%;display:flex;cursor:pointer;position:relative;align-items:center;justify-content:center;background-color:#020a20}.index-module_playerComponent__3IaWE .index-module_playerWrapper__2oYHn .index-module_closeIcon__xBP76{top:33px;right:5%;border:0;padding:0;position:absolute}.index-module_playerComponent__3IaWE .index-module_svgFill__1TosM{fill:#fff}.index-module_playerComponent__3IaWE{--plyr-color-main:#fff;--plyr-tooltip-color:#fff;--plyr-video-background:#000;--plyr-tooltip-background:#000;--plyr-video-control-background-hover:none;--plyr-video-controls-background:rgba(0,0,0,0.6)}.index-module_playerComponent__3IaWE .plyr--video{width:100%;height:100%;justify-content:center;animation:fadeIn .25s linear .8s 1 normal forwards}.index-module_playerComponent__3IaWE .plyr__controls{padding:25px 5%}.index-module_playerComponent__3IaWE .plyr__video-wrapper.plyr__video-embed{padding-bottom:56.25%}.floatingPlayer{right:3%;opacity:0;bottom:5%;width:350px;height:180px;padding-top:0;position:fixed;visibility:hidden;--plyr-color-main:#fff;--plyr-tooltip-color:#fff;--plyr-video-background:#000;--plyr-tooltip-background:#000;--plyr-video-control-background-hover:none;--plyr-video-controls-background:rgba(0,0,0,0.6)}@media (max-width:640px){.floatingPlayer{width:250px;height:142px}}.floatingPlayer .closeIcon{top:13px;right:5%;z-index:1;position:absolute}.floatingPlayer .closeIcon svg{fill:#fff}.floatingPlayer .plyr--video{width:100%;height:100%;animation:fadeIn .25s linear .8s 1 normal forwards}.floatingPlayer .plyr__controls{padding:10px 5%}.displayNone{display:none}#root #VideoModalLite{top:0;left:0;opacity:0;z-index:5;width:100%;height:100%;position:fixed;visibility:hidden;transform:scale(.75);background-color:#020a20}#root #VideoModalLite .playerWrapper{width:100%;height:100%;display:flex;cursor:pointer;position:relative;align-items:center;justify-content:center;background-color:#020a20;--plyr-color-main:#fff;--plyr-tooltip-color:#fff;--plyr-video-background:#000;--plyr-tooltip-background:#000;--plyr-video-control-background-hover:none;--plyr-video-controls-background:rgba(0,0,0,0.6)}#root #VideoModalLite .playerWrapper .plyr--video{width:100%;height:100%;animation:fadeIn .25s linear .8s 1 normal forwards}#root #VideoModalLite .playerWrapper .plyr__controls{padding:25px 5%}#root #VideoModalLite .plyr--video.plyr--hide-controls .plyr__controls{transition-delay:0s!important}#root #VideoModalLite .videoHeader{left:0;right:0;top:0;z-index:5;padding:25px 5%;display:flex;flex-wrap:wrap;color:#fff;position:absolute;justify-content:space-between;background:rgba(0,0,0,.6)}#root #VideoModalLite .videoHeader .modalTitle{left:50%;margin:auto;font-size:28px;font-weight:300;line-height:1.82;position:absolute;text-align:center;text-transform:uppercase;transform:translateX(-50%);font-family:Josefin Sans,sans-serif}@media (max-width:768px){#root #VideoModalLite .videoHeader .modalTitle{width:50%;font-size:23px}}@media (max-width:640px){#root #VideoModalLite .videoHeader .modalTitle{order:3;width:100%;top:80px}}#root #VideoModalLite .videoHeader .closeIcon svg{fill:#fff}@media (max-width:1024px){#root #VideoModalLite .videoHeader{background:none}}button{border:0;padding:0;outline:none;cursor:pointer;text-align:left;background:none;appearance:none}");var Ee=require("plyr"),ke={controls:["play","progress","current-time","mute","volume","pip","airplay","fullscreen"]},Ie=function(o){!function(e,o){if("function"!=typeof o&&null!==o)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(o&&o.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),o&&g(e,o)}(l,e.Component);var t,n,i,a=C(l);function l(e){var o,t;return function(e,o){if(!(e instanceof o))throw new TypeError("Cannot call a class as a function")}(this,l),h(x(o=a.call(this,e)),"playVideo",(function(){o.player.play()})),h(x(o),"onPlayIconClick",(function(){o.props.openInModal||p.default.to(".posterWrapper-".concat(o.props.vimeoId),{autoAlpha:0,duration:.5}),o.props.openInModal?o.openInVideoModal():o.player.play(),o.props.playCallback()})),h(x(o),"onCloseIconClick",(function(){p.default.to(".posterWrapper-".concat(o.props.vimeoId),{autoAlpha:1,duration:.5}),o.player.pause(),o.props.closeCallback()})),h(x(o),"handleIntersection",(function(e){if(e&&o.props.isFloating){new IntersectionObserver((function(e,t){e.forEach((function(e){var t;e.isIntersecting?(o.hasIntersected=!0,null!==(t=o.floatingPlayer)&&void 0!==t&&t.playing&&o.playStationaryVideo()):o.hasIntersected&&o.player.playing&&(o.floatingPlayer||o.addFloatingPlayer(),o.playFloatingVideo())}))}),{rootMargin:"200px",threshold:.6}).observe(e)}})),h(x(o),"playFloatingVideo",(function(){p.default.to("#root .floatingPlayer",{autoAlpha:1}),o.player.pause(),o.floatingPlayer.play(),o.floatingPlayer.on("play",(function(){window.volume&&(o.floatingPlayer.volume=window.volume)})),o.floatingPlayer.on("playing",(function(){o.floatingPlayer.currentTime=o.player.currentTime})),o.floatingPlayer.on("volumechange",(function(){o.floatingPlayer.muted?window.volume=0:window.volume=o.floatingPlayer.volume}))})),h(x(o),"playStationaryVideo",(function(){p.default.to("#root .floatingPlayer",{autoAlpha:0}),o.floatingPlayer.pause(),o.player.play(),o.player.currentTime=o.floatingPlayer.currentTime})),h(x(o),"hideOtherFloatingPlayers",(function(){var e=document.querySelectorAll("#root .floatingPlayer .plyr");o.player.playing&&e.forEach((function(e){var t;null!==(t=e.querySelector("iframe"))&&void 0!==t&&t.src.includes(o.props.vimeoId)?e.classList.remove("displayNone"):e.classList.add("displayNone")}))})),h(x(o),"addFloatingPlayer",(function(){var e;null===(e=document.querySelector("#root .floatingPlayer"))||void 0===e||e.append(o.playerDivClone),o.floatingPlayer=new Ee(".floatingPlayer #player-".concat(o.props.vimeoId),ke)})),h(x(o),"onFloatingPlayerClose",(function(){var e,t,n,i;(p.default.to(".floatingPlayer",{autoAlpha:0}),null===(e=o.player)||void 0===e||e.pause(),null===(t=o.floatingPlayer)||void 0===t||t.pause(),(null===(n=o.floatingPlayer)||void 0===n?void 0:n.currentTime)>o.player.currentTime)&&(o.player.currentTime=null===(i=o.floatingPlayer)||void 0===i?void 0:i.currentTime)})),h(x(o),"appendFloatingPlayer",(function(){if(!document.querySelector("#root .floatingPlayer")&&o.props.isFloating){var e=document.createElement("div");e.className="floatingPlayer";var t=document.createElement("button");t.className="closeIcon",t.innerHTML='<svg width="25" height="25" viewBox="0 0 27.46 27.46" fill="#0d1220"><path d="M26.46 27.46a1 1 0 01-.71-.3L.29 1.71A1 1 0 011.71.29l25.45 25.46a1 1 0 010 1.41 1 1 0 01-.7.3z" fill="inherit"/><path d="M1 27.46a1 1 0 01-.71-1.71L25.75.29a1 1 0 011.41 0 1 1 0 010 1.42L1.71 27.16a1 1 0 01-.71.3z" fill="inherit"/></svg>',e.append(t),document.getElementById("root").append(e)}})),h(x(o),"onVideoModalClose",(function(){o.closeVideoModal()})),h(x(o),"closeVideoModal",(function(){p.default.to("body",{clearProps:"overflow"}),p.default.to("#root #VideoModalLite",{autoAlpha:0,scale:.75,duration:.4});var e=document.getElementById("VideoModalLite");e&&m.default.unmountComponentAtNode(e),document.removeEventListener("keydown",o.onEscKeyPress)})),h(x(o),"showVideoHeader",(function(){o.headerHidden&&document.querySelector("#root #VideoModalLite .videoHeader")&&(p.default.to("#root #VideoModalLite .videoHeader",{opacity:1,yPercent:"initial"}),o.headerHidden=!1)})),h(x(o),"hideVideoHeader",(function(){var e;o.headerHidden||null!==(e=o.videoModalPlayer)&&void 0!==e&&e.paused||!document.querySelector("#root #VideoModalLite .videoHeader")||(p.default.to("#root #VideoModalLite .videoHeader",{opacity:0,yPercent:-200}),o.headerHidden=!0)})),h(x(o),"mouseMoveHandle",(function(){o.showVideoHeader(),clearTimeout(o.timeoutid),o.timeoutid=setTimeout((function(){o.hideVideoHeader()}),2e3)})),h(x(o),"onEscKeyPress",(function(e){"Escape"===e.code&&o.closeVideoModal()})),h(x(o),"openInVideoModal",(function(){var e,t=null===(e=document.querySelector("#root #VideoModalLite iframe"))||void 0===e?void 0:e.src.includes(o.props.vimeoId);if(!document.querySelector("#root #VideoModalLite")){var n=document.createElement("div");n.id="VideoModalLite",document.getElementById("root").append(n),m.default.unmountComponentAtNode(n)}if(null!==o.videoModalPlayer&&t)o.videoModalPlayer.play(),o.mouseMoveHandle(),p.default.to("body",{overflow:"hidden"}),p.default.to("#root #VideoModalLite",{autoAlpha:1,scale:1,duration:.4}),document.addEventListener("keydown",o.onEscKeyPress);else{var i=document.getElementById("VideoModalLite");i&&m.default.unmountComponentAtNode(i),m.default.render(c.default.createElement("div",{className:"playerWrapper",onMouseMove:function(){o.mouseMoveHandle()}},c.default.createElement("div",{id:"player-".concat(o.props.vimeoId),"data-plyr-provider":"vimeo","data-plyr-embed-id":o.props.vimeoId}),c.default.createElement("div",{className:"videoHeader"},o.props.videoSlug&&c.default.createElement(q,{title:o.props.videoTitle,url:"https://www.afiniti.com/video/".concat(o.props.videoSlug)}),o.props.videoTitle&&c.default.createElement("h1",{className:"modalTitle"},o.props.videoTitle),c.default.createElement("button",{className:"closeIcon",onClick:function(){o.onVideoModalClose()}},c.default.createElement(V,{className:Pe}))),c.default.createElement("div",{id:"relatedVideoLite"})),i,(function(){o.videoModalPlayer=new Ee("#root #VideoModalLite .playerWrapper #player-".concat(o.props.vimeoId),ke),o.mouseMoveHandle(),p.default.to("#root #VideoModalLite",{autoAlpha:1,scale:1,duration:.4}),p.default.to("body",{overflow:"hidden"}),document.addEventListener("keydown",o.onEscKeyPress),o.videoModalPlayer.play()}))}o.videoModalPlayer.on("play",(function(){window.volume&&(o.videoModalPlayer.volume=window.volume),o.hideVideoHeader()})),o.videoModalPlayer.on("pause",(function(){o.showVideoHeader()})),o.videoModalPlayer.on("volumechange",(function(){o.videoModalPlayer.muted?window.volume=0:window.volume=o.videoModalPlayer.volume})),o.props.apiUrl&&o.props.openRelatedVideos&&o.videoModalPlayer.on("ended",(function(){o.fetchRelatedVideos(),document.querySelector(".relatedVideoContainer")&&p.default.set(".relatedVideoContainer",{clearProps:!0})}))})),h(x(o),"fetchRelatedVideos",(function(){var e,t;(t=o.props.videoSlug,e='{\n video(\n where: {\n slug: "'.concat(t,'"\n }) {\n videoCategory {\n id\n slug\n videos{\n slug\n title\n vimeoId\n youtubeId\n vimeoPrivateKey\n description\n hero: cover(where: {mimeType_starts_with: "image/"}, first:1) {\n handle\n }\n }\n } \n }\n}'),fetch(ye,{method:"POST",headers:{"gcms-locales":"EN","Content-Type":"application/json"},body:JSON.stringify({query:e})}).then((function(e){return e.json()})).then((function(e){return{data:e.data}})).catch((function(){}))).then((function(e){var t,n;if((null==e||null===(t=e.data)||void 0===t||null===(n=t.video)||void 0===n?void 0:n.videoCategory.length)>0){var i=e.data.video.videoCategory[0].videos;if(i&&i.length>0){for(var a=i.findIndex((function(e){return e.slug===o.props.videoSlug})),l=[],r=a+1;r<=a+4;r++)l.push(i[r%i.length]);o.setState({relatedVideos:l},(function(){var e=document.getElementById("relatedVideoLite");e&&m.default.render(c.default.createElement(fe,{data:o.state.relatedVideos}),e)}))}}}))})),h(x(o),"shouldComponentUpdate",(function(e,t){return o.props.vimeoId!==e.vimeoId||(o.props.poster!==e.poster||o.state.relatedVideos!==t.relatedVideos)})),o.player=null,o.hasIntersected=!1,o.playerDivClone=null,o.floatingPlayer=null,o.videoModalPlayer=null,o.timeoutId=0,o.headerHidden=!1,o.state={relatedVideos:null},o.props.apiUrl&&(t=o.props.apiUrl,ye=t),o}return t=l,(n=[{key:"componentDidMount",value:function(){var e,o=this;this.playerDivClone=document.querySelector("#player-".concat(this.props.vimeoId)).cloneNode(),this.appendFloatingPlayer(),this.player=new Ee("#player-".concat(this.props.vimeoId),ke),this.player.on("playing",(function(){p.default.to(".floatingPlayer, #video-".concat(o.props.vimeoId," .").concat(ve),{autoAlpha:0}),o.hideOtherFloatingPlayers()})),this.player.on("play",(function(){window.volume&&(o.player.volume=window.volume),!o.player.fullscreen.active&&o.props.playFullScreen&&o.player.fullscreen.enter()})),this.player.on("pause",(function(){p.default.to("#video-".concat(o.props.vimeoId," .").concat(ve),{autoAlpha:1,clearProps:!0})})),this.player.on("volumechange",(function(){o.player.muted?window.volume=0:window.volume=o.player.volume})),null===(e=document.querySelector(".floatingPlayer .closeIcon"))||void 0===e||e.addEventListener("click",this.onFloatingPlayerClose),this.props.setClick&&this.props.setClick(this.playVideo)}},{key:"componentWillUnmount",value:function(){var e,o,t,n,i=this;document.querySelectorAll("#root .floatingPlayer .plyr").forEach((function(e){var o;null!==(o=e.querySelector("iframe"))&&void 0!==o&&o.src.includes(i.props.vimeoId)&&document.querySelector("#root .floatingPlayer").removeChild(e)})),document.querySelector(".floatingPlayer")&&p.default.to(".floatingPlayer",{autoAlpha:0}),null===(e=this.player)||void 0===e||e.destroy(),null===(o=this.floatingPlayer)||void 0===o||o.destroy(),null===(t=this.videoModalPlayer)||void 0===t||t.destroy(),null===(n=document.querySelector(".floatingPlayer .closeIcon"))||void 0===n||n.removeEventListener("click",this.onFloatingPlayerClose);var a=document.querySelector("#root #VideoModalLite");null==a||a.remove()}},{key:"render",value:function(){var e=this;return c.default.createElement("div",{className:"".concat(he," playerComponent"),id:"video-".concat(this.props.vimeoId),ref:function(o){return e.handleIntersection(o)}},this.props.videoTitle&&c.default.createElement("p",{className:"".concat(ve," videoTitle")},this.props.videoTitle),this.props.poster&&c.default.createElement("div",{className:"".concat(ge," posterWrapper-").concat(this.props.vimeoId," posterWrapper"),onClick:function(){e.onPlayIconClick()}},c.default.createElement("img",{alt:this.props.videoTitle||"posterImage",src:this.props.poster,className:xe}),c.default.createElement("button",{className:be},c.default.createElement(k,{className:Pe}))),c.default.createElement("div",{className:"".concat(Ce," playerWrapper")},c.default.createElement("div",{id:"player-".concat(this.props.vimeoId),"data-plyr-provider":"vimeo","data-plyr-embed-id":this.props.vimeoId}),this.props.poster&&c.default.createElement("button",{className:"".concat(we," closeIcon"),onClick:function(){e.onCloseIconClick()}},c.default.createElement(V,{className:Pe}))))}}])&&y(t.prototype,n),i&&y(t,i),l}();Ie.propTypes={poster:_.default.string,apiUrl:_.default.string,isFloating:_.default.bool,openInModal:_.default.bool,videoTitle:_.default.string,playCallback:_.default.func,closeCallback:_.default.func,playFullScreen:_.default.bool,openRelatedVideos:_.default.bool,vimeoId:_.default.string.isRequired,videoSlug:_.default.string.isRequired},Ie.defaultProps={apiUrl:"",poster:"",vimeoId:"",videoSlug:"",isFloating:!0,openInModal:!1,playFullScreen:!1,openRelatedVideos:!1,playCallback:function(){},closeCallback:function(){}},module.exports=Ie;