@afiniti/video-player-lite
Version:
React component for playing videos
2 lines (1 loc) • 36.2 kB
JavaScript
import*as e from"react";import o,{useState as t,useEffect as n,Component as i}from"react";import a from"gsap";import l from"react-dom";import r from"prop-types";import d from"react-slick";function s(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 u(e,o,t){return o in e?Object.defineProperty(e,o,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[o]=t,e}function c(e){return(c=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function p(e,o){return(p=Object.setPrototypeOf||function(e,o){return e.__proto__=o,e})(e,o)}function m(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function _(e,o){return!o||"object"!=typeof o&&"function"!=typeof o?m(e):o}function f(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=c(e);if(o){var i=c(this).constructor;t=Reflect.construct(n,arguments,i)}else t=n.apply(this,arguments);return _(this,t)}}function y(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 h(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 h(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 h(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}var v,g,x;function C(){return(C=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 b(o){return e.createElement("svg",C({xmlns:"http://www.w3.org/2000/svg",width:50,height:60,viewBox:"0 0 63.38 63.38",fill:"#0d1220"},o),v||(v=e.createElement("g",{fill:"inherit"},e.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"}),e.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 w(){return(w=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 P(o){return e.createElement("svg",w({width:25,height:25,viewBox:"0 0 27.46 27.46",fill:"#0d1220"},o),g||(g=e.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"})),x||(x=e.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 E(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 k,I,V,M,N;function T(){return(T=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 W(o){return e.createElement("svg",T({xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 32 32"},o),k||(k=e.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"})),I||(I=e.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 S(){return(S=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 z(o){return e.createElement("svg",S({xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 32 32"},o),V||(V=e.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 H(){return(H=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 F(o){return e.createElement("svg",H({xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 32 32"},o),M||(M=e.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 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 j(o){return e.createElement("svg",A({xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 32 32"},o),N||(N=e.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"})))}E(".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 L=function(e){var t=e.href,n=e.type;return o.createElement("a",{className:"resp-sharing-button__link",href:t,target:"_blank",rel:"noopener noreferrer",id:"social-icons"},o.createElement("div",{className:"resp-sharing-button-videos resp-sharing-button--".concat(n,"-videos resp-sharing-button--small")},o.createElement("div",{"aria-hidden":"true",className:"resp-sharing-button__icon-videos resp-sharing-button__icon--solid-videos"},"email"===n&&o.createElement(W,null),"facebook"===n&&o.createElement(z,null),"twitter"===n&&o.createElement(F,null),"linkedin"===n&&o.createElement(j,null))))},O=function(e){var t=e.title,n=e.url,i=e.email,a=e.facebook,l=e.twitter,r=e.linkedin;return o.createElement("span",{className:"socialShare"},i&&o.createElement(L,{href:"mailto:?subject=".concat(t,".&body=").concat(n),type:"email"}),a&&o.createElement(L,{href:"https://facebook.com/sharer/sharer.php?u=".concat(n),type:"facebook"}),l&&o.createElement(L,{href:"https://twitter.com/intent/tweet/?text=".concat(t,"&url=").concat(n),type:"twitter"}),r&&o.createElement(L,{href:"https://www.linkedin.com/shareArticle?mini=true&url=".concat(n,"&title=").concat(t,".&source=").concat(n),type:"linkedin"}))};O.propTypes={title:r.string.isRequired,url:r.string.isRequired,email:r.bool,facebook:r.bool,twitter:r.bool,linkedin:r.bool},O.defaultProps={email:!0,facebook:!0,twitter:!0,linkedin:!0};var B="index-module_relatedVideosContainer__1sy07",R="index-module_slidesContainer__3ZRzC",X="index-module_continueText__2V4am",G="index-module_itemWrapper__9IGkg",q="index-module_imageContainer__ANW4l",Z="index-module_posterImage__1TYTT",J="index-module_imageContent__w-hnE",Q="index-module_posterTitle__14txS",Y="index-module_svgFill__1GGx0",U="index-module_autoPlayContainer__3v2gX",D="index-module_autoPlayBlock__2XQFm",K="index-module_autoPlayImg__22u9J",$="index-module_autoPlayContent__3kHYx",ee="index-module_upNext__1bNAe",oe="index-module_autoPlayTitle__F-ETd",te="index-module_nextSpinner__9cdGo",ne="index-module_nextPlay__3fOxt",ie="index-module_playerWrapper__3dQpc",ae="index-module_crossIcon__1zoHT";E(".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 le={speed:500,dots:!1,arrows:!1,infinite:!1,swipeable:!0,draggable:!0,slidesToScroll:1,variableWidth:!0},re=null,de=!1,se=null,ue=null,ce=function(e){var i=e.data,l=y(t(!1),2),r=l[0],s=l[1];n((function(){se&&ue===i[0].slug+"-spinner"||!document.querySelector("#".concat(i[0].slug+"-spinner"))||(ue=i[0].slug+"-spinner",se=a.to("#".concat(i[0].slug+"-spinner"),{duration:15,strokeDashoffset:0,onComplete:function(){re&&re()}}))}),[i]);return(null==i?void 0:i.length)>0?o.createElement("div",{className:"".concat(B," relatedVideoContainer")},o.createElement("div",{className:U},o.createElement("div",{className:D},o.createElement("div",{className:ie},o.createElement(we,{videoSlug:i[0].slug,vimeoId:i[0].vimeoId,isFloating:!1,playFullScreen:!1,videoTitle:i[0].title,openInModal:!0,poster:"http://media.graphcms.com/"+i[0].hero[0].handle,apiUrl:"https://api-us-east-1.graphcms.com/v2/ckui8cam7108201xpc9tg32du/master",setClick:function(e){return re=e},openRelatedVideos:!0})),null!==i[0].hero&&i[0].hero.length>0&&i[0].hero[0].handle&&o.createElement("div",{className:K},o.createElement("img",{alt:i[0].title||"posterImage",src:"http://media.graphcms.com/"+i[0].hero[0].handle,className:K}),o.createElement("div",{className:$},o.createElement("h3",{className:ee},"Up Next"),o.createElement("h3",{className:oe},i[0].title),o.createElement("svg",{id:i[0].slug+"-spinner",className:te,viewBox:"0 0 96 96",xmlns:"http://www.w3.org/2000/svg",onClick:function(e){se.kill(),a.to("#".concat(i[0].slug+"-spinner"),{duration:.1,autoAlpha:0,onComplete:function(){a.set("#".concat(i[0].slug+"-spinner"),{display:"none"}),a.to(".".concat(ne),{duration:.1,autoAlpha:1})}}),e.cancelBubble=!0,e.stopPropagation()},onKeyDown:function(){}},o.createElement("circle",{cx:"48",cy:"48",r:"42"}),o.createElement(P,{x:"36",y:"36"})),o.createElement(b,{className:ne,onClick:function(){re()}}))))),o.createElement("div",{className:R},o.createElement("h2",{className:X},"Continue Watching"),(null==i?void 0:i.length)>1?o.createElement(d,le,i.filter((function(e,o){return 0!==o})).map((function(e){return o.createElement("div",{className:G,key:e.title,onMouseDown:function(){de=!0},onMouseMove:function(){de&&s(!0)},onMouseUp:function(){de=!1,setTimeout((function(){s(!1)}),100)},onClickCapture:function(e){r&&(e.preventDefault(),e.stopPropagation())}},null!==e.hero&&e.hero.length>0&&e.hero[0].handle&&o.createElement("div",{className:q},o.createElement("img",{alt:e.title||"posterImage",src:"http://media.graphcms.com/"+e.hero[0].handle,className:Z}),o.createElement("div",{className:J},o.createElement("h3",{className:Q},e.title),o.createElement(b,{className:Y}))),o.createElement("div",{className:ie},o.createElement(we,{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(){se.kill()}})))}))):o.createElement("div",null)),o.createElement(P,{className:ae,onClick:function(){se.kill(),a.to(".".concat(B),{autoAlpha:0})}})):null},pe=null,me="index-module_playerComponent__3IaWE",_e="index-module_videoTitle__20JlI",fe="index-module_posterWrapper__2WJGZ",ye="index-module_posterImage__2yxur",he="index-module_playIcon__1lopG",ve="index-module_playerWrapper__2oYHn",ge="index-module_closeIcon__xBP76",xe="index-module_svgFill__1TosM";E(".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 Ce=require("plyr"),be={controls:["play","progress","current-time","mute","volume","pip","airplay","fullscreen"]},we=function(e){!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&&p(e,o)}(c,i);var t,n,r,d=f(c);function c(e){var t,n;return function(e,o){if(!(e instanceof o))throw new TypeError("Cannot call a class as a function")}(this,c),u(m(t=d.call(this,e)),"playVideo",(function(){t.player.play()})),u(m(t),"onPlayIconClick",(function(){t.props.openInModal||a.to(".posterWrapper-".concat(t.props.vimeoId),{autoAlpha:0,duration:.5}),t.props.openInModal?t.openInVideoModal():t.player.play(),t.props.playCallback()})),u(m(t),"onCloseIconClick",(function(){a.to(".posterWrapper-".concat(t.props.vimeoId),{autoAlpha:1,duration:.5}),t.player.pause(),t.props.closeCallback()})),u(m(t),"handleIntersection",(function(e){if(e&&t.props.isFloating){new IntersectionObserver((function(e,o){e.forEach((function(e){var o;e.isIntersecting?(t.hasIntersected=!0,null!==(o=t.floatingPlayer)&&void 0!==o&&o.playing&&t.playStationaryVideo()):t.hasIntersected&&t.player.playing&&(t.floatingPlayer||t.addFloatingPlayer(),t.playFloatingVideo())}))}),{rootMargin:"200px",threshold:.6}).observe(e)}})),u(m(t),"playFloatingVideo",(function(){a.to("#root .floatingPlayer",{autoAlpha:1}),t.player.pause(),t.floatingPlayer.play(),t.floatingPlayer.on("play",(function(){window.volume&&(t.floatingPlayer.volume=window.volume)})),t.floatingPlayer.on("playing",(function(){t.floatingPlayer.currentTime=t.player.currentTime})),t.floatingPlayer.on("volumechange",(function(){t.floatingPlayer.muted?window.volume=0:window.volume=t.floatingPlayer.volume}))})),u(m(t),"playStationaryVideo",(function(){a.to("#root .floatingPlayer",{autoAlpha:0}),t.floatingPlayer.pause(),t.player.play(),t.player.currentTime=t.floatingPlayer.currentTime})),u(m(t),"hideOtherFloatingPlayers",(function(){var e=document.querySelectorAll("#root .floatingPlayer .plyr");t.player.playing&&e.forEach((function(e){var o;null!==(o=e.querySelector("iframe"))&&void 0!==o&&o.src.includes(t.props.vimeoId)?e.classList.remove("displayNone"):e.classList.add("displayNone")}))})),u(m(t),"addFloatingPlayer",(function(){var e;null===(e=document.querySelector("#root .floatingPlayer"))||void 0===e||e.append(t.playerDivClone),t.floatingPlayer=new Ce(".floatingPlayer #player-".concat(t.props.vimeoId),be)})),u(m(t),"onFloatingPlayerClose",(function(){var e,o,n,i;(a.to(".floatingPlayer",{autoAlpha:0}),null===(e=t.player)||void 0===e||e.pause(),null===(o=t.floatingPlayer)||void 0===o||o.pause(),(null===(n=t.floatingPlayer)||void 0===n?void 0:n.currentTime)>t.player.currentTime)&&(t.player.currentTime=null===(i=t.floatingPlayer)||void 0===i?void 0:i.currentTime)})),u(m(t),"appendFloatingPlayer",(function(){if(!document.querySelector("#root .floatingPlayer")&&t.props.isFloating){var e=document.createElement("div");e.className="floatingPlayer";var o=document.createElement("button");o.className="closeIcon",o.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(o),document.getElementById("root").append(e)}})),u(m(t),"onVideoModalClose",(function(){t.closeVideoModal()})),u(m(t),"closeVideoModal",(function(){a.to("body",{clearProps:"overflow"}),a.to("#root #VideoModalLite",{autoAlpha:0,scale:.75,duration:.4});var e=document.getElementById("VideoModalLite");e&&l.unmountComponentAtNode(e),document.removeEventListener("keydown",t.onEscKeyPress)})),u(m(t),"showVideoHeader",(function(){t.headerHidden&&document.querySelector("#root #VideoModalLite .videoHeader")&&(a.to("#root #VideoModalLite .videoHeader",{opacity:1,yPercent:"initial"}),t.headerHidden=!1)})),u(m(t),"hideVideoHeader",(function(){var e;t.headerHidden||null!==(e=t.videoModalPlayer)&&void 0!==e&&e.paused||!document.querySelector("#root #VideoModalLite .videoHeader")||(a.to("#root #VideoModalLite .videoHeader",{opacity:0,yPercent:-200}),t.headerHidden=!0)})),u(m(t),"mouseMoveHandle",(function(){t.showVideoHeader(),clearTimeout(t.timeoutid),t.timeoutid=setTimeout((function(){t.hideVideoHeader()}),2e3)})),u(m(t),"onEscKeyPress",(function(e){"Escape"===e.code&&t.closeVideoModal()})),u(m(t),"openInVideoModal",(function(){var e,n=null===(e=document.querySelector("#root #VideoModalLite iframe"))||void 0===e?void 0:e.src.includes(t.props.vimeoId);if(!document.querySelector("#root #VideoModalLite")){var i=document.createElement("div");i.id="VideoModalLite",document.getElementById("root").append(i),l.unmountComponentAtNode(i)}if(null!==t.videoModalPlayer&&n)t.videoModalPlayer.play(),t.mouseMoveHandle(),a.to("body",{overflow:"hidden"}),a.to("#root #VideoModalLite",{autoAlpha:1,scale:1,duration:.4}),document.addEventListener("keydown",t.onEscKeyPress);else{var r=document.getElementById("VideoModalLite");r&&l.unmountComponentAtNode(r),l.render(o.createElement("div",{className:"playerWrapper",onMouseMove:function(){t.mouseMoveHandle()}},o.createElement("div",{id:"player-".concat(t.props.vimeoId),"data-plyr-provider":"vimeo","data-plyr-embed-id":t.props.vimeoId}),o.createElement("div",{className:"videoHeader"},t.props.videoSlug&&o.createElement(O,{title:t.props.videoTitle,url:"https://www.afiniti.com/video/".concat(t.props.videoSlug)}),t.props.videoTitle&&o.createElement("h1",{className:"modalTitle"},t.props.videoTitle),o.createElement("button",{className:"closeIcon",onClick:function(){t.onVideoModalClose()}},o.createElement(P,{className:xe}))),o.createElement("div",{id:"relatedVideoLite"})),r,(function(){t.videoModalPlayer=new Ce("#root #VideoModalLite .playerWrapper #player-".concat(t.props.vimeoId),be),t.mouseMoveHandle(),a.to("#root #VideoModalLite",{autoAlpha:1,scale:1,duration:.4}),a.to("body",{overflow:"hidden"}),document.addEventListener("keydown",t.onEscKeyPress),t.videoModalPlayer.play()}))}t.videoModalPlayer.on("play",(function(){window.volume&&(t.videoModalPlayer.volume=window.volume),t.hideVideoHeader()})),t.videoModalPlayer.on("pause",(function(){t.showVideoHeader()})),t.videoModalPlayer.on("volumechange",(function(){t.videoModalPlayer.muted?window.volume=0:window.volume=t.videoModalPlayer.volume})),t.props.apiUrl&&t.props.openRelatedVideos&&t.videoModalPlayer.on("ended",(function(){t.fetchRelatedVideos(),document.querySelector(".relatedVideoContainer")&&a.set(".relatedVideoContainer",{clearProps:!0})}))})),u(m(t),"fetchRelatedVideos",(function(){var e,n;(n=t.props.videoSlug,e='{\n video(\n where: {\n slug: "'.concat(n,'"\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(pe,{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 n,i;if((null==e||null===(n=e.data)||void 0===n||null===(i=n.video)||void 0===i?void 0:i.videoCategory.length)>0){var a=e.data.video.videoCategory[0].videos;if(a&&a.length>0){for(var r=a.findIndex((function(e){return e.slug===t.props.videoSlug})),d=[],s=r+1;s<=r+4;s++)d.push(a[s%a.length]);t.setState({relatedVideos:d},(function(){var e=document.getElementById("relatedVideoLite");e&&l.render(o.createElement(ce,{data:t.state.relatedVideos}),e)}))}}}))})),u(m(t),"shouldComponentUpdate",(function(e,o){return t.props.vimeoId!==e.vimeoId||(t.props.poster!==e.poster||t.state.relatedVideos!==o.relatedVideos)})),t.player=null,t.hasIntersected=!1,t.playerDivClone=null,t.floatingPlayer=null,t.videoModalPlayer=null,t.timeoutId=0,t.headerHidden=!1,t.state={relatedVideos:null},t.props.apiUrl&&(n=t.props.apiUrl,pe=n),t}return t=c,(n=[{key:"componentDidMount",value:function(){var e,o=this;this.playerDivClone=document.querySelector("#player-".concat(this.props.vimeoId)).cloneNode(),this.appendFloatingPlayer(),this.player=new Ce("#player-".concat(this.props.vimeoId),be),this.player.on("playing",(function(){a.to(".floatingPlayer, #video-".concat(o.props.vimeoId," .").concat(_e),{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(){a.to("#video-".concat(o.props.vimeoId," .").concat(_e),{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")&&a.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 l=document.querySelector("#root #VideoModalLite");null==l||l.remove()}},{key:"render",value:function(){var e=this;return o.createElement("div",{className:"".concat(me," playerComponent"),id:"video-".concat(this.props.vimeoId),ref:function(o){return e.handleIntersection(o)}},this.props.videoTitle&&o.createElement("p",{className:"".concat(_e," videoTitle")},this.props.videoTitle),this.props.poster&&o.createElement("div",{className:"".concat(fe," posterWrapper-").concat(this.props.vimeoId," posterWrapper"),onClick:function(){e.onPlayIconClick()}},o.createElement("img",{alt:this.props.videoTitle||"posterImage",src:this.props.poster,className:ye}),o.createElement("button",{className:he},o.createElement(b,{className:xe}))),o.createElement("div",{className:"".concat(ve," playerWrapper")},o.createElement("div",{id:"player-".concat(this.props.vimeoId),"data-plyr-provider":"vimeo","data-plyr-embed-id":this.props.vimeoId}),this.props.poster&&o.createElement("button",{className:"".concat(ge," closeIcon"),onClick:function(){e.onCloseIconClick()}},o.createElement(P,{className:xe}))))}}])&&s(t.prototype,n),r&&s(t,r),c}();we.propTypes={poster:r.string,apiUrl:r.string,isFloating:r.bool,openInModal:r.bool,videoTitle:r.string,playCallback:r.func,closeCallback:r.func,playFullScreen:r.bool,openRelatedVideos:r.bool,vimeoId:r.string.isRequired,videoSlug:r.string.isRequired},we.defaultProps={apiUrl:"",poster:"",vimeoId:"",videoSlug:"",isFloating:!0,openInModal:!1,playFullScreen:!1,openRelatedVideos:!1,playCallback:function(){},closeCallback:function(){}};export default we;