@story-telling-reporter/react-embed-code-generator/dist/596.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([[596],{1100:(e,t,n)=>{function r(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=Array(t);n<t;n++)r[n]=e[n];return r}Object.defineProperty(t,"__esModule",{value:!0}),t.useIOSCornerCaseFix=t.default=void 0,t.useMuted=a;var o=n(4041),i=function(e){(0,o.useEffect)((function(){var t=function(){var n=null==e?void 0:e.current;if(n){n.muted=!0;var r=n.play();void 0!==r&&r.then((function(){console.log("[react-ui-toolkit] media element plays successfully."),n.setAttribute("data-played","true"),n.pause()})).catch((function(e){console.log("[react-ui-toolkit] unable to play media element"),console.log("[react-ui-toolkit] error: ",e)}))}window.removeEventListener("touchstart",t)};return window.addEventListener("touchstart",t),function(){window.removeEventListener("touchstart",t)}}),[e])};function a(){var e,t,n=!(arguments.length>0&&void 0!==arguments[0])||arguments[0],i=arguments.length>1?arguments[1]:void 0,a=(e=(0,o.useState)(n),t=2,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 r,o,i,a,l=[],c=!0,u=!1;try{if(i=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;c=!1}else for(;!(c=(r=i.call(n)).done)&&(l.push(r.value),l.length!==t);c=!0);}catch(e){u=!0,o=e}finally{try{if(!c&&null!=n.return&&(a=n.return(),Object(a)!==a))return}finally{if(u)throw o}}return l}}(e,t)||function(e,t){if(e){if("string"==typeof e)return r(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)?r(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.")}()),l=a[0],c=a[1],u=function(e){window.__twreporter_story_telling_ui_toolkit={muted:e},c(e);var t='[data-twreporter-story-telling][data-muted="'.concat(!e,'"]');document.querySelectorAll("audio".concat(t,",video").concat(t)).forEach((function(t){t.muted=e}))};return(0,o.useEffect)((function(){var e,t=null===(e=window)||void 0===e||null===(e=e.__twreporter_story_telling_ui_toolkit)||void 0===e?void 0:e.muted;"boolean"==typeof t&&c(t)}),[]),(0,o.useEffect)((function(){var e=function(){"hidden"===document.visibilityState&&u(!0)};return document.addEventListener("visibilitychange",e),function(){document.removeEventListener("visibilitychange",e)}}),[]),(0,o.useEffect)((function(){var e;(null===(e=window)||void 0===e||null===(e=e.__twreporter_story_telling_ui_toolkit)||void 0===e?void 0:e.muted)===l&&document.querySelectorAll('[data-twreporter-story-telling][data-muted="'.concat(!l,'"]')).forEach((function(e){console.log('[react-ui-toolkit] set attribute data-muted="'.concat(l,'" on media element:'),e),e.setAttribute("data-muted","".concat(l))}))}),[l]),(0,o.useEffect)((function(){var e=null==i?void 0:i.current;if(e){var t=new MutationObserver((function(t){t.forEach((function(t){if("attributes"===t.type&&"data-muted"===(null==t?void 0:t.attributeName)){var n=null==e?void 0:e.getAttribute("data-muted");c("true"===n)}}))}));return t.observe(e,{attributes:!0}),function(){t.disconnect()}}}),[i]),[l,u]}t.useIOSCornerCaseFix=i,t.default={useIOSCornerCaseFix:i,useMuted:a}},3479:(e,t,n)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.MuteIcon=function(){return(0,o.jsxs)("svg",{viewBox:"0 0 24 24",fill:"#808080",xmlns:"http://www.w3.org/2000/svg",children:[(0,o.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,o.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"})]})},t.SeparationLine=function(){return(0,o.jsx)("svg",{viewBox:"0 0 270 11",xmlns:"http://www.w3.org/2000/svg",children:(0,o.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)"})})},t.SoundIcon=function(){return(0,o.jsxs)("svg",{viewBox:"0 0 24 24",fill:"#C09662",xmlns:"http://www.w3.org/2000/svg",children:[(0,o.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,o.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"})]})},(r=n(4041))&&r.__esModule;var r,o=n(1085)},3596:(e,t,n)=>{Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"hooks",{enumerable:!0,get:function(){return o.default}}),t.twreporter=t.kids=void 0;var r,o=(r=n(1100))&&r.__esModule?r:{default:r},i=n(5037),a=n(6808);t.twreporter={Hint:i.Hint},t.kids={Hint:a.Hint}},4030:(e,t)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.mediaQuery=t.breakpoints=void 0;var n=t.breakpoints={mobile:375,tablet:768,desktop:1024,hd:1440};t.mediaQuery={mobileOnly:"@media (max-width: ".concat(n.tablet-1,"px)"),tabletOnly:"@media (min-width: ".concat(n.tablet,"px) and (max-width: ").concat(n.desktop-1,"px)"),tabletAbove:"@media (min-width: ".concat(n.tablet,"px)"),desktopBelow:"@media (max-width: ".concat(n.desktop-1,"px)"),desktopOnly:"@media (min-width: ".concat(n.desktop,"px) and (max-width: ").concat(n.hd-1,"px)"),desktopAbove:"@media (min-width: ".concat(n.desktop,"px)"),hdBelow:"@media (max-width: ".concat(n.hd-1,"px)"),hdOnly:"@media (min-width: ".concat(n.hd,"px)")}},4200:(e,t,n)=>{function r(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=Array(t);n<t;n++)r[n]=e[n];return r}function o(e){return o="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},o(e)}Object.defineProperty(t,"__esModule",{value:!0}),t.Hint=function(e){var t=e.className,n=e.id,o=(0,a.useRef)(null),i=function(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 r,o,i,a,l=[],c=!0,u=!1;try{if(i=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;c=!1}else for(;!(c=(r=i.call(n)).done)&&(l.push(r.value),l.length!==t);c=!0);}catch(e){u=!0,o=e}finally{try{if(!c&&null!=n.return&&(a=n.return(),Object(a)!==a))return}finally{if(u)throw o}}return l}}(e,t)||function(e,t){if(e){if("string"==typeof e)return r(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)?r(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.")}()}((0,d.useMuted)(!0,o),2),l=i[0],u=i[1];return(0,s.jsxs)(f,{id:n,className:t,"data-twreporter-story-telling":!0,"data-react-ui-toolkit":!0,"data-muted-hint":!0,"data-muted":l,ref:o,children:[(0,s.jsx)(m,{children:l?"本文含聲音敘事，開啟聲音以獲得完整閱讀體驗":"已開啟本篇文章的聲音"}),(0,s.jsxs)(p,{className:l?"dark":"light",onClick:function(){u(!l)},children:[l?(0,s.jsx)("span",{children:"開啟聲音"}):(0,s.jsx)("span",{children:"關閉聲音"}),l?(0,s.jsx)(c.SoundIcon,{}):(0,s.jsx)(c.MuteIcon,{})]}),(0,s.jsx)(y,{children:(0,s.jsx)(c.SeparationLine,{})})]})};var i,a=function(e){if("function"==typeof WeakMap){var t=new WeakMap;new WeakMap}return function(e){if(e&&e.__esModule)return e;var n,r,i={__proto__:null,default:e};if(null===e||"object"!=o(e)&&"function"!=typeof e)return i;if(n=t){if(n.has(e))return n.get(e);n.set(e,i)}for(var a in e)"default"!==a&&{}.hasOwnProperty.call(e,a)&&((r=(n=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,a))&&(r.get||r.set)?n(i,a,r):i[a]=e[a]);return i}(e)}(n(4041)),l=(i=n(9716))&&i.__esModule?i:{default:i},c=n(3479),u=n(4030),d=n(1100),s=n(1085),f=l.default.div.withConfig({displayName:"hint__Container",componentId:"sc-jrdnfq-0"})(["display:flex;flex-direction:column;align-items:center;gap:16px;margin-left:auto;margin-right:auto;width:calc(100vw - 68px);","{padding-left:24px;padding-right:24px;}","{width:453px;}","{width:480px;}","{width:580px;}"],u.mediaQuery.tabletAbove,u.mediaQuery.tabletOnly,u.mediaQuery.desktopOnly,u.mediaQuery.hdOnly),p=l.default.div.withConfig({displayName:"hint__Button",componentId:"sc-jrdnfq-1"})(["display:flex;justify-content:center;align-items:center;gap:4px;padding:4px 12px;border-radius:40px;cursor:pointer;> span{font-size:14px;font-family:Noto Sans TC,Sans-Serif,serif;font-weight:500;line-height:21px;}> svg{width:18px;height:18px;}&.dark{background-color:#404040;color:#fff;svg{fill:#fff;}}&.light{background-color:#fff;color:#404040;svg{fill:#404040;}}@media (hover:hover){&.dark:hover{background-color:#000;}&.light:hover{background-color:#e2e2e2;}}"]),m=l.default.p.withConfig({displayName:"hint__HintText",componentId:"sc-jrdnfq-2"})(["margin:0;text-align:center;font-family:Noto Sans TC,Sans-Serif,serif;font-weight:400;font-size:14px;line-height:21px;letter-spacing:0em;color:#808080;"]),y=l.default.div.withConfig({displayName:"hint__SeparationLineContainer",componentId:"sc-jrdnfq-3"})(["width:192px;margin-top:24px;","{width:272px;}"],u.mediaQuery.hdOnly)},5037:(e,t,n)=>{Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"Hint",{enumerable:!0,get:function(){return r.Hint}});var r=n(4200)},5247:(e,t,n)=>{function r(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=Array(t);n<t;n++)r[n]=e[n];return r}function o(e){return o="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},o(e)}Object.defineProperty(t,"__esModule",{value:!0}),t.Hint=function(e){var t=e.className,n=e.text,o=e.id,i=(0,a.useRef)(null),l=function(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 r,o,i,a,l=[],c=!0,u=!1;try{if(i=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;c=!1}else for(;!(c=(r=i.call(n)).done)&&(l.push(r.value),l.length!==t);c=!0);}catch(e){u=!0,o=e}finally{try{if(!c&&null!=n.return&&(a=n.return(),Object(a)!==a))return}finally{if(u)throw o}}return l}}(e,t)||function(e,t){if(e){if("string"==typeof e)return r(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)?r(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.")}()}((0,d.useMuted)(!0,i),2),u=l[0],h=l[1];return(0,s.jsxs)(f,{id:o,className:t,"data-twreporter-story-telling":!0,"data-react-ui-toolkit":!0,"data-muted-hint":!0,"data-muted":u,ref:i,children:[(0,s.jsx)(y,{children:n}),(0,s.jsxs)(m,{onClick:function(){h(!u)},children:[(0,s.jsx)(p,{children:u?(0,s.jsx)(c.MuteIcon,{}):(0,s.jsx)(c.SoundIcon,{})}),(0,s.jsx)("span",{children:u?"點擊開啟聲音":"點擊關閉聲音"})]})]})};var i,a=function(e){if("function"==typeof WeakMap){var t=new WeakMap;new WeakMap}return function(e){if(e&&e.__esModule)return e;var n,r,i={__proto__:null,default:e};if(null===e||"object"!=o(e)&&"function"!=typeof e)return i;if(n=t){if(n.has(e))return n.get(e);n.set(e,i)}for(var a in e)"default"!==a&&{}.hasOwnProperty.call(e,a)&&((r=(n=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,a))&&(r.get||r.set)?n(i,a,r):i[a]=e[a]);return i}(e)}(n(4041)),l=(i=n(9716))&&i.__esModule?i:{default:i},c=n(5874),u=n(8003),d=n(1100),s=n(1085),f=l.default.div.withConfig({displayName:"hint__Container",componentId:"sc-157hlkw-0"})(["display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:60px;"]),p=l.default.div.withConfig({displayName:"hint__Icon",componentId:"sc-157hlkw-1"})(["width:36px;height:36px;cursor:pointer;"]),m=l.default.div.withConfig({displayName:"hint__Button",componentId:"sc-157hlkw-2"})(["display:flex;justify-content:center;align-items:center;gap:10px;> span{font-family:source-han-sans-traditional,Noto Sans TC,PingFang TC,Apple LiGothic Medium,Roboto,Microsoft JhengHei,Lucida Grande,Lucida Sans Unicode,sans-serif;font-size:12px;font-weight:500;color:#666;}"]),y=l.default.p.withConfig({displayName:"hint__HintText",componentId:"sc-157hlkw-3"})(["text-align:center;font-family:Swei Marker Sans CJK TC,Noto Sans TC,Sans-Serif,serif;font-weight:400;font-size:16px;line-height:1.5;color:#666;white-space:nowrap;","{white-space:pre-wrap;}"],u.mediaQuery.smallOnly)},5874:(e,t,n)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.MuteIcon=function(e){var t=e.className;return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)("link",{rel:"preload",href:"".concat(i,"/mute.svg"),as:"image"}),(0,o.jsx)("img",{className:t,src:"".concat(i,"/mute.svg"),width:"100%"})]})},t.SoundIcon=function(e){var t=e.className;return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)("link",{rel:"preload",href:"".concat(i,"/sound.svg"),as:"image"}),(0,o.jsx)("img",{className:t,src:"".concat(i,"/sound.svg"),width:"100%"})]})},(r=n(4041))&&r.__esModule;var r,o=n(1085),i="https://storytelling-storage.twreporter.org/npm/@story-telling-reporter/react-ui-toolkit/public/icons/kids"},6808:(e,t,n)=>{Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"Hint",{enumerable:!0,get:function(){return r.Hint}});var r=n(5247)},8003:(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},r=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:r}}}]);