@story-telling-reporter/react-embed-code-generator/dist/react-scroll-to-audio.js

## Installation `yarn install`

"use strict";(self.webpackChunk_story_telling_reporter_react_embed_code_generator=self.webpackChunk_story_telling_reporter_react_embed_code_generator||[]).push([[557],{7469:(t,e,o)=>{function n(t,e){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){var o=null==t?null:"undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(null!=o){var n,r,c,i,l=[],a=!0,u=!1;try{if(c=(o=o.call(t)).next,0===e){if(Object(o)!==o)return;a=!1}else for(;!(a=(n=c.call(o)).done)&&(l.push(n.value),l.length!==e);a=!0);}catch(t){u=!0,r=t}finally{try{if(!a&&null!=o.return&&(i=o.return(),Object(i)!==i))return}finally{if(u)throw r}}return l}}(t,e)||function(t,e){if(t){if("string"==typeof t)return r(t,e);var o={}.toString.call(t).slice(8,-1);return"Object"===o&&t.constructor&&(o=t.constructor.name),"Map"===o||"Set"===o?Array.from(t):"Arguments"===o||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(o)?r(t,e):void 0}}(t,e)||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 r(t,e){(null==e||e>t.length)&&(e=t.length);for(var o=0,n=Array(e);o<e;o++)n[o]=t[o];return n}function c(t){return c="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},c(t)}Object.defineProperty(e,"__esModule",{value:!0}),e.ScrollToAudio=function(t){var e=t.id,o=void 0===e?"scroll-to-audio-id":e,r=t.audioUrls,c=t.className,a=t.preload,s=void 0===a?"auto":a,p=t.hintOnly,g=void 0!==p&&p,_=t.hintId,j=(0,i.useRef)(null),M=n(d.hooks.useMuted(!0,j),2),L=M[0],I=M[1],S=(0,i.useRef)(null),k=(0,i.useRef)(null),E=n((0,i.useState)(!0),2),B=E[0],O=E[1],N=n((0,i.useState)(!1),2),R=N[0],A=N[1],V=n((0,i.useState)(!0),2),P=V[0],H=V[1];(0,i.useEffect)((function(){A(!0)}),[]),(0,i.useEffect)((function(){if(!g){var t=y.debounce((function(){var e=S.current,n=k.current;if(!e||0==e.getBoundingClientRect().width||0==e.getBoundingClientRect().height)return console.log("[react-scroll-to-audio][".concat(o,"] `topEntryElement` is not available. Remove scroll event listener.")),void window.removeEventListener("scroll",t);var r=window.innerHeight,c=Math.ceil(.25*r),i=e.getBoundingClientRect().y;if(i>r-c)return H(!0),void O(!0);var l;(l=n?n.getBoundingClientRect().y:i+r)<0+c&&(H(!0),O(!0)),i<r-c&&l>0+c&&(H(!1),L||O(!1))}),50);return console.log("[react-scroll-to-audio][".concat(o,"] add scroll event listener. `muted` state is ").concat(L)),window.addEventListener("scroll",t),function(){console.log("[react-scroll-to-audio][".concat(o,"] useEffect cleanup function. Remove scroll event listener.")),window.removeEventListener("scroll",t)}}}),[L,g]),(0,i.useEffect)((function(){var t=j.current;t&&(t.muted=L)}),[L]),(0,i.useEffect)((function(){var t=j.current;if(t)if(B)t.pause(),console.log("[react-scroll-to-audio][".concat(o,"] audio paused."));else{var e=t.play();void 0!==e&&e.then((function(){console.log("[react-scroll-to-audio][".concat(o,"] audio plays successfully.")),t.setAttribute("data-played","true")})).catch((function(t){console.log("[react-scroll-to-audio][".concat(o,"] unable to play audio")),console.log("[react-scroll-to-audio][".concat(o,"] error: "),t),O(!0),I(!0)}))}}),[B]);var Z=function(){var t=!L;I(t),O(t)},$=o+"-bottom-entry-point",T=null,W=null;if(R){W=document.getElementById($);var Y=(0,f.jsx)(w,{children:(0,f.jsx)(C,{className:"scroll-to-audio-muted-button",$hide:P,onClick:Z,children:L?(0,f.jsx)(u.MuteIcon,{}):(0,f.jsx)(u.SoundIcon,{})})}),F=(0,f.jsx)(b,{children:(0,f.jsx)(x,{className:"scroll-to-audio-muted-button",$hide:P,onClick:Z,children:L?(0,f.jsx)(u.MuteIcon,{}):(0,f.jsx)(u.SoundIcon,{})})});T=(0,f.jsxs)(f.Fragment,{children:[Y,F]})}if(g)return(0,f.jsx)(m,{id:_});var D=(0,f.jsx)("audio",{ref:j,preload:s,"data-played":!1,"data-paused":B,"data-twreporter-story-telling":!0,"data-muted":L,style:{display:"none"},playsInline:!0,loop:!0,children:r.map((function(t,e){return(0,f.jsx)("source",{src:t},"audio_source_".concat(e))}))});return(0,f.jsxs)(f.Fragment,{children:[(0,f.jsx)(h,{"data-twreporter-story-telling":!0,"data-react-scroll-to-audio":!0,"data-id":"".concat(o,"-top-entry-point"),"data-top-entry":!0,className:c,ref:S,children:D}),W&&(0,l.createPortal)((0,f.jsx)(v,{"data-twreporter-story-telling":!0,"data-react-scroll-to-audio":!0,"data-id":$,"data-bottom-entry":!0,ref:k}),W),T]})},e.buildBottomEntryPointStaticMarkup=function(t){var e=t.id;return'<div id="'.concat((void 0===e?"scroll-to-audio-id":e)+"-bottom-entry-point",'"></div>')};var i=function(t){if("function"==typeof WeakMap){var e=new WeakMap;new WeakMap}return function(t){if(t&&t.__esModule)return t;var o,n,r={__proto__:null,default:t};if(null===t||"object"!=c(t)&&"function"!=typeof t)return r;if(o=e){if(o.has(t))return o.get(t);o.set(t,r)}for(var i in t)"default"!==i&&{}.hasOwnProperty.call(t,i)&&((n=(o=Object.defineProperty)&&Object.getOwnPropertyDescriptor(t,i))&&(n.get||n.set)?o(r,i,n):r[i]=t[i]);return r}(t)}(o(4041)),l=o(3144),a=p(o(9716)),u=o(9063),s=p(o(2784)),d=o(3596),f=o(1085);function p(t){return t&&t.__esModule?t:{default:t}}var m=d.twreporter.Hint,y={debounce:s.default},h=a.default.div.withConfig({displayName:"src__TopEntryContainer",componentId:"sc-1rtlo6l-0"})(["min-height:10px;"]),v=a.default.div.withConfig({displayName:"src__BottomEntryContainer",componentId:"sc-1rtlo6l-1"})(["min-height:10px;"]),g=a.default.div.withConfig({displayName:"src__MuteButton",componentId:"sc-1rtlo6l-2"})(["height:40px;width:40px;border-radius:100%;background-color:#00000040;display:flex;cursor:pointer;> svg{width:20px;height:20px;margin:auto;fill:white;}&:hover{background-color:#00000080;}"]),C=(0,a.default)(g).withConfig({displayName:"src__MuteButtonWithMobileToolBar",componentId:"sc-1rtlo6l-3"})(["position:fixed;bottom:calc(40px + 48px);left:calc(50vw + 50% - 40px - 16px);"," transition:transform 300ms ease-in-out;"],(function(t){return null!=t&&t.$hide?"transform: translateY(150px);":"transform: translateY(0);"})),x=(0,a.default)(g).withConfig({displayName:"src__FixedMuteButton",componentId:"sc-1rtlo6l-4"})(["position:fixed;bottom:16px;right:16px;z-index:800;"," transition:transform 300ms ease-in-out;"],(function(t){return null!=t&&t.$hide?"transform: translateY(calc((40px + 16px) * 2));":"transform: translateY(0);"})),w=a.default.div.withConfig({displayName:"src__MobileOnly",componentId:"sc-1rtlo6l-5"})(["display:none;@media (max-width:1023px){display:block;}"]),b=a.default.div.withConfig({displayName:"src__DesktopOnly",componentId:"sc-1rtlo6l-6"})(["display:none;@media (min-width:1024px){display:block;}"])},9063:(t,e,o)=>{Object.defineProperty(e,"__esModule",{value:!0}),e.MuteIcon=function(){return(0,r.jsxs)("svg",{viewBox:"0 0 24 24",fill:"#808080",xmlns:"http://www.w3.org/2000/svg",children:[(0,r.jsx)("path",{d:"M12 9.48366V5.00194C12 4.14669 10.9961 3.6861 10.3478 4.24392L5.41641 8.48708H3C2.44772 8.48708 2 8.93479 2 9.48707V14.6098C2 15.1621 2.44772 15.6098 3 15.6098H5.58884L10.3478 19.7046C10.9961 20.2625 12 19.8019 12 18.9466V14.6133L12 14.6098V9.48708L12 9.48366Z"}),(0,r.jsx)("path",{d:"M20.9385 10.0037C21.2314 9.71083 21.2314 9.23595 20.9385 8.94306C20.6456 8.65017 20.1708 8.65017 19.8779 8.94306L17.51 11.3109L15.1421 8.94306C14.8493 8.65017 14.3744 8.65017 14.0815 8.94306C13.7886 9.23595 13.7886 9.71083 14.0815 10.0037L16.4494 12.3716L14.0815 14.7394C13.7886 15.0323 13.7886 15.5072 14.0815 15.8001C14.3744 16.093 14.8493 16.093 15.1422 15.8001L17.51 13.4322L19.8779 15.8001C20.1707 16.093 20.6456 16.093 20.9385 15.8001C21.2314 15.5072 21.2314 15.0323 20.9385 14.7394L18.5707 12.3716L20.9385 10.0037Z"})]})},e.SeparationLine=function(){return(0,r.jsx)("svg",{viewBox:"0 0 270 11",xmlns:"http://www.w3.org/2000/svg",children:(0,r.jsx)("path",{d:"M270,11c-6.285,0 -9.463,-2.629 -12.537,-5.172c-3.097,-2.562 -6.023,-4.982 -12.013,-4.982c-5.99,0 -8.915,2.42 -12.013,4.982c-3.074,2.543 -6.252,5.172 -12.537,5.172c-6.284,0 -9.462,-2.629 -12.535,-5.172c-3.097,-2.562 -6.022,-4.982 -12.011,-4.982c-5.99,0 -8.916,2.42 -12.012,4.983c-3.074,2.542 -6.252,5.171 -12.536,5.171c-6.284,0 -9.462,-2.629 -12.535,-5.172c-3.097,-2.562 -6.022,-4.982 -12.011,-4.982c-5.989,0 -8.915,2.42 -12.012,4.983c-3.073,2.542 -6.251,5.171 -12.534,5.171c-6.284,0 -9.461,-2.629 -12.534,-5.172c-3.097,-2.562 -6.021,-4.982 -12.01,-4.982c-5.988,0 -8.912,2.42 -12.008,4.982c-3.073,2.543 -6.251,5.172 -12.534,5.172c-6.283,0 -9.459,-2.629 -12.532,-5.172c-3.096,-2.562 -6.02,-4.982 -12.008,-4.982c-5.989,0 -8.914,2.42 -12.01,4.982c-3.073,2.543 -6.251,5.172 -12.535,5.172c-6.283,0 -9.46,-2.629 -12.533,-5.172c-3.097,-2.562 -6.022,-4.982 -12.01,-4.982l0,-0.846c6.283,0 9.461,2.629 12.534,5.172c3.096,2.562 6.021,4.982 12.009,4.982c5.989,0 8.914,-2.42 12.011,-4.982c3.073,-2.543 6.251,-5.172 12.534,-5.172c6.283,0 9.46,2.629 12.533,5.172c3.095,2.562 6.019,4.982 12.007,4.982c5.988,0 8.913,-2.42 12.009,-4.982c3.073,-2.543 6.25,-5.172 12.533,-5.172c6.283,0 9.461,2.629 12.534,5.172c3.096,2.562 6.022,4.982 12.01,4.982c5.989,0 8.913,-2.42 12.01,-4.982c3.073,-2.543 6.251,-5.172 12.536,-5.172c6.284,0 9.461,2.629 12.535,5.172c3.096,2.562 6.022,4.982 12.011,4.982c5.989,0 8.915,-2.42 12.012,-4.982c3.073,-2.543 6.251,-5.172 12.536,-5.172c6.284,0 9.462,2.629 12.535,5.172c3.097,2.562 6.022,4.982 12.011,4.982c5.99,0 8.916,-2.42 12.013,-4.982c3.074,-2.543 6.252,-5.172 12.537,-5.172c6.286,0 9.463,2.629 12.537,5.172c3.098,2.562 6.023,4.982 12.013,4.982l0,0.846Z",fill:"rgb(192, 150, 98)"})})},e.SoundIcon=function(){return(0,r.jsxs)("svg",{viewBox:"0 0 24 24",fill:"#C09662",xmlns:"http://www.w3.org/2000/svg",children:[(0,r.jsx)("path",{d:"M12 9.48366V5.00194C12 4.14669 10.9961 3.6861 10.3478 4.24392L5.41641 8.48708H3C2.44772 8.48708 2 8.93479 2 9.48707V14.6098C2 15.1621 2.44772 15.6098 3 15.6098H5.58884L10.3478 19.7046C10.9961 20.2625 12 19.8019 12 18.9466V14.6133L12 14.6098V9.48708L12 9.48366Z"}),(0,r.jsx)("path",{d:"M16.2974 4.2819C15.9009 4.1623 15.4824 4.38682 15.3628 4.78339C15.2432 5.17996 15.4677 5.5984 15.8643 5.71801C16.529 5.91849 17.1496 6.22502 17.7068 6.61889C19.3811 7.80241 20.4779 9.76964 20.4779 12C20.4779 14.9738 18.5274 17.4787 15.8643 18.2819C15.4677 18.4015 15.2432 18.82 15.3628 19.2165C15.4824 19.6131 15.9009 19.8376 16.2974 19.718C19.5874 18.7258 21.9779 15.6422 21.9779 12C21.9779 9.26726 20.6319 6.84967 18.5726 5.394C17.8863 4.90885 17.1201 4.53001 16.2974 4.2819ZM14.2527 8.28629C13.8585 8.15892 13.4358 8.37519 13.3084 8.76934C13.181 9.16348 13.3973 9.58625 13.7914 9.71362C14.0058 9.78288 14.2085 9.88959 14.3928 10.0292C14.9482 10.4499 15.3309 11.1661 15.3309 12C15.3309 13.1176 14.649 14.0092 13.7914 14.2863C13.3973 14.4137 13.181 14.8364 13.3084 15.2306C13.4358 15.6247 13.8585 15.841 14.2527 15.7136C15.7763 15.2213 16.8309 13.7177 16.8309 12C16.8309 10.7068 16.2364 9.54382 15.2984 8.83343C14.9853 8.5963 14.6333 8.40929 14.2527 8.28629Z"})]})},(n=o(4041))&&n.__esModule;var n,r=o(1085)}}]);