@story-telling-reporter/react-embed-code-generator/dist/react-subtitled-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([[146],{2315:(e,t)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.mediaQuery=t.default=t.breakpoints=void 0;var n=t.breakpoints={small:320,medium:760,large:1440},i=t.mediaQuery={smallOnly:"@media (max-width: ".concat(n.medium-1,"px)"),mediumOnly:"@media (min-width: ".concat(n.medium,"px) and (max-width: ").concat(n.large-1,"px)"),mediumAbove:"@media (min-width: ".concat(n.medium,"px)"),largeBelow:"@media (max-width: ".concat(n.large-1,"px)"),largeOnly:"@media (min-width: ".concat(n.large,"px)")};t.default={breakpoints:n,mediaQuery:i}},5018:(e,t,n)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.LogoIcon=function(e){var t=e.className;return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)("link",{rel:"preload",href:"".concat(r,"/subtitled-audio-logo.svg"),as:"image"}),(0,o.jsx)("img",{className:t,src:"".concat(r,"/subtitled-audio-logo.svg"),width:"100%"})]})},t.MuteIcon=function(e){var t=e.className,n=e.onClick,i=e.styles;return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)("link",{rel:"preload",href:"".concat(r,"/mute.svg"),as:"image"}),(0,o.jsx)("img",{className:t,src:"".concat(r,"/mute.svg"),styles:i,width:"100%",onClick:n})]})},t.PauseIcon=function(e){var t=e.className,n=e.onClick,i=e.styles;return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)("link",{rel:"preload",href:"".concat(r,"/stop.svg"),as:"image"}),(0,o.jsx)("img",{className:t,src:"".concat(r,"/stop.svg"),styles:i,width:"100%",onClick:n})]})},t.PlayIcon=function(e){var t=e.className,n=e.onClick,i=e.styles;return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)("link",{rel:"preload",href:"".concat(r,"/play.svg"),as:"image"}),(0,o.jsx)("img",{className:t,src:"".concat(r,"/play.svg"),styles:i,width:"100%",onClick:n})]})},t.SoundIcon=function(e){var t=e.className,n=e.onClick,i=e.style;return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)("link",{rel:"preload",href:"".concat(r,"/sound.svg"),as:"image"}),(0,o.jsx)("img",{className:t,src:"".concat(r,"/sound.svg"),style:i,width:"100%",onClick:n})]})},(i=n(4041))&&i.__esModule;var i,o=n(1085),r="https://storytelling-storage.twreporter.org/npm/@story-telling-reporter/react-subtitled-audio/public/icons/kids"},5328:(e,t,n)=>{function i(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var i,o,r,a,s=[],l=!0,u=!1;try{if(r=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;l=!1}else for(;!(l=(i=r.call(n)).done)&&(s.push(i.value),s.length!==t);l=!0);}catch(e){u=!0,o=e}finally{try{if(!l&&null!=n.return&&(a=n.return(),Object(a)!==a))return}finally{if(u)throw o}}return s}}(e,t)||function(e,t){if(e){if("string"==typeof e)return o(e,t);var n={}.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?o(e,t):void 0}}(e,t)||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 o(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,i=Array(t);n<t;n++)i[n]=e[n];return i}function r(e){return r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},r(e)}Object.defineProperty(t,"__esModule",{value:!0}),t.SubtitledAudio=function(e){var t=e.audioUrls,n=e.webVtt,o=e.className,r=e.preload,a=void 0===r?"auto":r,l=e.hintText,c=void 0===l?"":l,I=e.hintId,N=e.hintOnly,O=void 0!==N&&N,M=(0,s.useRef)(""),L=(0,s.useRef)(!1),A=(0,s.useRef)(null),P=(0,s.useRef)(null),E=i(p.hooks.useMuted(!0,A),2),Q=E[0],R=E[1],T=i((0,f.useInView)({rootMargin:c?"-25% 0% -50% 0%":"-25% 0% -25% 0%",threshold:0}),2),B=T[0],F=T[1],U=i((0,s.useState)(0),2),G=U[0],W=U[1],z=i((0,s.useState)(!1),2),D=z[0],H=z[1],K=i((0,s.useState)(0),2),V=K[0],q=K[1],J=i((0,s.useState)([]),2),$=J[0],X=J[1],Y=i((0,s.useState)(null),2),Z=Y[0],ee=Y[1];(0,s.useEffect)((function(){var e=new Blob([n],{type:"text/plain"});ee(URL.createObjectURL(e))}),[]),(0,s.useEffect)((function(){var e=A.current,t=function(){console.log("[react-subtitled-audio] `onLoadedMetadata` event invoked. audio duration:",e.duration),W(e.duration)};if(e){if(e.readyState>0)return console.log("[react-subtitled-audio] set duration without `onLoadedMetadata` event triggered. duration: ",e.duration),void W(e.duration);e.addEventListener("loadedmetadata",t)}return function(){e&&e.removeEventListener("loadedmetadata",t)}}),[]),(0,s.useEffect)((function(){var e=P.current,t=function(e){var t,n=null===(t=e.target)||void 0===t||null===(t=t.track)||void 0===t||null===(t=t.activeCues)||void 0===t||null===(t=t[0])||void 0===t?void 0:t.text;console.log("[react-subtitled-audio] subtitle changed. subtitle: ",n),"string"==typeof n?(M.current||(M.current=n),X([]),setTimeout((function(){X([{text:n,id:Date.now(),nodeRef:(0,s.createRef)(null)}])}),200)):X([])};return e&&e.addEventListener("cuechange",t),function(){e&&e.removeEventListener("cuechange",t)}}),[$]),(0,s.useEffect)((function(){if(0!==G){var e=A.current,t=function(){H(!0),e.currentTime=0,q(0)},n=function(){var t=e.currentTime,n=Math.floor(t/G*100);n-V>.5&&q(n)};return e&&(e.addEventListener("timeupdate",n),e.addEventListener("ended",t)),function(){e&&(e.removeEventListener("timeupdate",n),e.removeEventListener("ended",t))}}}),[G,V]),(0,s.useEffect)((function(){var e=A.current;e&&(e.muted=Q)}),[Q]),(0,s.useEffect)((function(){var e=A.current;if(e)if(F){if(!L.current){var t=e.play();return H(!1),void t.then((function(){console.log("[react-subtitled-audio] audio plays successfully.")})).catch((function(e){console.log("[react-subtitled-audio] unable to play audio"),console.log("[react-subtitled-audio] error: ",e)}))}}else F||(e.pause(),H(!0))}),[F]);var te=(0,m.jsx)(k,{onClick:function(){var e=A.current;e&&(Q?(e.muted=!1,R(!1)):(e.muted=!0,R(!0)))},children:Q?(0,m.jsx)(u.MuteIcon,{}):(0,m.jsx)(u.SoundIcon,{})}),ne=(0,m.jsx)(k,{onClick:function(){var e=A.current;e&&(D?(e.play(),H(!1),L.current=!1):(e.pause(),H(!0),L.current=!0),e.setAttribute("data-played",!0))},children:D?(0,m.jsx)(u.PlayIcon,{}):(0,m.jsx)(u.PauseIcon,{})});if(O)return(0,m.jsx)(g,{text:c,id:I});var ie=(0,m.jsxs)("video",{ref:A,preload:a,"data-twreporter-story-telling":!0,"data-react-subtitled-audio":!0,"data-muted":Q,"data-played":!1,style:{display:"none"},playsInline:!0,children:[(0,m.jsx)("track",{ref:P,default:!0,kind:"metadata",src:Z}),t.map((function(e,t){return(0,m.jsx)("source",{src:e},"audio_source_".concat(t))}))]});return(0,m.jsxs)(y,{className:o,children:[c&&(0,m.jsx)(g,{text:c,id:I}),(0,m.jsx)(x,{}),(0,m.jsxs)(h,{ref:B,children:[(0,m.jsx)(v,{}),ie,(0,m.jsxs)(b,{children:[(0,m.jsx)(w,{children:(0,m.jsx)(d.TransitionGroup,{children:$.map((function(e){var t=e.id,n=e.text,i=e.nodeRef;return(0,m.jsx)(d.CSSTransition,{nodeRef:i,timeout:200,classNames:"subtitle",children:(0,m.jsx)("span",{ref:i,children:n})},t)}))})}),(0,m.jsxs)(S,{children:[(0,m.jsx)(_,{children:(0,m.jsx)(j,{style:{width:V+"%"}})}),(0,m.jsxs)(C,{children:[ne,te]})]})]})]})]})};var a,s=function(e){if("function"==typeof WeakMap){var t=new WeakMap;new WeakMap}return function(e){if(e&&e.__esModule)return e;var n,i,o={__proto__:null,default:e};if(null===e||"object"!=r(e)&&"function"!=typeof e)return o;if(n=t){if(n.has(e))return n.get(e);n.set(e,o)}for(var a in e)"default"!==a&&{}.hasOwnProperty.call(e,a)&&((i=(n=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,a))&&(i.get||i.set)?n(o,a,i):o[a]=e[a]);return o}(e)}(n(4041)),l=(a=n(9716))&&a.__esModule?a:{default:a},u=n(5018),d=n(579),c=n(2315),f=n(5900),p=n(3596),m=n(1085),g=p.kids.Hint,y=l.default.div.withConfig({displayName:"kids__Container",componentId:"sc-1ctuguo-0"})(["margin-top:60px;margin-bottom:60px;"]),h=l.default.div.withConfig({displayName:"kids__Body",componentId:"sc-1ctuguo-1"})(["margin:0;box-sizing:border-box;position:relative;width:100%;background-color:#f4f4f4;border-radius:20px;padding:60px 40px 30px 40px;","{min-width:700px;}","{padding:60px 20px 30px 20px;}"],c.mediaQuery.mediumAbove,c.mediaQuery.smallOnly),x=l.default.div.withConfig({displayName:"kids__PaddingTop",componentId:"sc-1ctuguo-2"})(["padding-top:54px;width:100%;max-width:700px;"]),v=(0,l.default)(u.LogoIcon).withConfig({displayName:"kids__Logo",componentId:"sc-1ctuguo-3"})(["position:absolute;left:50%;top:0;transform:translate(-50%,-50%);width:100px;"]),b=l.default.div.withConfig({displayName:"kids__SubtitleAndControls",componentId:"sc-1ctuguo-4"})(["width:420px;margin-left:auto;margin-right:auto;","{width:calc(283 / 329 * 100%);}"],c.mediaQuery.smallOnly),w=l.default.blockquote.withConfig({displayName:"kids__Subtitle",componentId:"sc-1ctuguo-5"})(["font-family:source-han-sans-traditional,Noto Sans TC,PingFang TC,Apple LiGothic Medium,Roboto,Microsoft JhengHei,Lucida Grande,Lucida Sans Unicode,sans-serif;letter-spacing:1.5px;font-size:16px;font-weight:700;line-height:1.5;height:50px;margin-left:auto;margin-right:auto;margin-top:0;margin-bottom:0;position:relative;> span{position:absolute;}.subtitle-enter{opacity:0;}.subtitle-enter-active{opacity:1;transition:opacity 200ms;}.subtitle-exit{opacity:1;}.subtitle-exit-active{opacity:0;transition:opacity 200ms;}","{height:100px;}"],c.mediaQuery.smallOnly),_=l.default.div.withConfig({displayName:"kids__Progress",componentId:"sc-1ctuguo-6"})(["width:400px;height:5px;background-color:rgba(205,205,205,0.2);border-radius:10px;","{width:calc(150 / 283 * 100%);flex-shrink:0;}"],c.mediaQuery.smallOnly),j=l.default.div.withConfig({displayName:"kids__ProgressBar",componentId:"sc-1ctuguo-7"})(["background-color:rgba(102,102,102,0.2);height:100%;border-radius:10px;"]),k=l.default.div.withConfig({displayName:"kids__Button",componentId:"sc-1ctuguo-8"})(["cursor:pointer;width:36px;height:36px;","{width:45px;height:45px;}"],c.mediaQuery.smallOnly),C=l.default.div.withConfig({displayName:"kids__Buttons",componentId:"sc-1ctuguo-9"})(["display:flex;justify-content:space-between;width:92px;","{width:110px;}"],c.mediaQuery.smallOnly),S=l.default.div.withConfig({displayName:"kids__Controls",componentId:"sc-1ctuguo-10"})(["display:flex;gap:20px;align-items:center;flex-wrap:nowrap;justify-content:flex-start;margin-top:30px;","{flex-shrink:0;}","{flex-shrink:0;}","{margin-top:20px;}"],C,_,c.mediaQuery.smallOnly)},7700:(e,t,n)=>{Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"KidsSubtitledAudio",{enumerable:!0,get:function(){return i.SubtitledAudio}}),t.default=void 0;var i=n(5328);t.default={KidsSubtitledAudio:i.SubtitledAudio}}}]);