nzk-react-components 3.0.7 → 3.1.0

package/dist/cjs/components/SyncedText/SyncedText.js

@@ -1 +1 @@
-"use strict";var e=require("react"),r=require("./hooks/useTimeout.js"),t=require("../Button/Button.js");require("../../_virtual/_tslib.js");var n=require("../../icons/TextToSpeech.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=u(e);exports.SyncedText=function(u){var o=u.value,a=e.useRef(null),c=e.useRef(),i=e.useRef(null),s=e.useRef(!1),d=e.useRef([]),f=e.useRef([]),v=e.useState(!1),p=v[0],m=v[1],y=r.useAudioTimeout({timeoutMs:u.timeoutMs}),h=y[0],g=y[1],E=function(e){return g(),m(!1),u.onError?u.onError({type:"PLAY_ERROR",error:e}):null},R=function(e){return g(),m(!1),u.onError?u.onError({type:"LOAD_ERROR",error:e}):null},q=function(){var e;return null===(e=a.current)||void 0===e||e.stop(),m(!1),u.onError?u.onError({type:"TIMEOUT"}):null},x=function(){var e,r;(null===(e=a.current)||void 0===e?void 0:e.playing())||(h(q),null===(r=a.current)||void 0===r||r.play())};e.useEffect((function(){return o.audio&&u.Howl&&(a.current=new u.Howl({src:o.audio,autoplay:u.autoPlay}),u.autoPlay&&h(q),u.setRef&&u.setRef({play:x,getHowl:function(){return a.current},isPlaying:function(){var e;return null===(e=a.current)||void 0===e?void 0:e.playing()},pause:function(){var e;return null===(e=a.current)||void 0===e?void 0:e.pause()},stop:function(){var e;return null===(e=a.current)||void 0===e?void 0:e.stop()}})),function(){var e;g(),null===(e=a.current)||void 0===e||e.stop()}}),[]);var A=function(e){a.current&&i.current&&d.current[0]&&e>parseFloat(d.current[0].getAttribute("data-start")||"0")&&(f.current.forEach((function(e){e.classList.contains("highlighted")&&(e.classList.remove("highlighted"),e.classList.add("has-highlighted"))})),d.current[0].classList.add("highlighted"),d.current=d.current.slice(1,d.current.length))},L=function(){s.current=!0,d.current=f.current,m(!0);var e=function(){var r;if(null===(r=a.current)||void 0===r?void 0:r.playing()){g();var t=a.current.seek();A(t),c.current=requestAnimationFrame(e)}else c&&cancelAnimationFrame(c.current)};c.current=requestAnimationFrame(e)},w=function(){cancelAnimationFrame(c.current),m(!1),s.current&&(f.current.forEach((function(e){e.classList.remove("highlighted"),e.classList.remove("has-highlighted")})),u.onComplete&&u.onComplete())};return e.useEffect((function(){var e,r,t,n,u,l;if(null===(e=a.current)||void 0===e||e.on("play",L),null===(r=a.current)||void 0===r||r.on("end",w),null===(t=a.current)||void 0===t||t.on("stop",w),null===(n=a.current)||void 0===n||n.on("playerror",E),null===(u=a.current)||void 0===u||u.on("loaderror",R),f.current){var o=null===(l=i.current)||void 0===l?void 0:l.querySelectorAll("span.synced-test--part");o&&(f.current=Array.from(o),d.current=f.current)}return function(){var e,r,t,n,u;w(),null===(e=a.current)||void 0===e||e.off("play",L),null===(r=a.current)||void 0===r||r.off("end",w),null===(t=a.current)||void 0===t||t.off("stop",w),null===(n=a.current)||void 0===n||n.off("playerror",E),null===(u=a.current)||void 0===u||u.off("loaderror",R)}}),[u.value]),o?l.default.createElement("div",{ref:i,className:"synced-text"},u.showPlayButton&&l.default.createElement(t,{theme:p?"purple":"primary",style:{marginRight:"10px"},onClick:x,className:"synced-text--play",size:"x-small",round:!0},l.default.createElement(n,null)),o.sequences.map((function(e,r){return l.default.createElement("span",{className:"synced-test--part",style:{display:"inline-block"},"data-start":e.time[0],"data-end":e.time[1],key:e.time[0]},l.default.createElement("span",{className:"synced-text--word",dangerouslySetInnerHTML:{__html:"".concat(e.text)}}),r<o.sequences.length&&l.default.createElement("span",{className:"synced-text--space",style:{whiteSpace:"pre-wrap"}}," "))}))):null};
+"use strict";var e=require("../../_virtual/_tslib.js"),r=require("react"),t=require("./hooks/useTimeout.js"),n=require("../Button/Button.js"),u=require("../../icons/Megaphone.js"),l=require("../../icons/PurpleMegaphone.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=o(r);exports.SyncedText=function(o){var i=o.value,c=r.useRef(null),s=r.useRef(),d=r.useRef(null),f=r.useRef(!1),v=r.useRef([]),p=r.useRef([]),m=r.useState(!1),y=m[0],h=m[1],g=t.useAudioTimeout({timeoutMs:o.timeoutMs}),E=g[0],R=g[1],q=function(e){return R(),h(!1),o.onError?o.onError({type:"PLAY_ERROR",error:e}):null},A=function(e){return R(),h(!1),o.onError?o.onError({type:"LOAD_ERROR",error:e}):null},_=function(){var e;return null===(e=c.current)||void 0===e||e.stop(),h(!1),o.onError?o.onError({type:"TIMEOUT"}):null},w=function(){var e,r;(null===(e=c.current)||void 0===e?void 0:e.playing())||(E(_),null===(r=c.current)||void 0===r||r.play())};r.useEffect((function(){return i.audio&&o.Howl&&(c.current=new o.Howl({src:i.audio,autoplay:o.autoPlay}),o.autoPlay&&E(_),o.setRef&&o.setRef({play:w,getHowl:function(){return c.current},isPlaying:function(){var e;return null===(e=c.current)||void 0===e?void 0:e.playing()},pause:function(){var e;return null===(e=c.current)||void 0===e?void 0:e.pause()},stop:function(){var e;return null===(e=c.current)||void 0===e?void 0:e.stop()}})),function(){var e;R(),null===(e=c.current)||void 0===e||e.stop()}}),[]);var x=function(e){c.current&&d.current&&v.current[0]&&e>parseFloat(v.current[0].getAttribute("data-start")||"0")&&(p.current.forEach((function(e){e.classList.contains("highlighted")&&(e.classList.remove("highlighted"),e.classList.add("has-highlighted"))})),v.current[0].classList.add("highlighted"),v.current=v.current.slice(1,v.current.length))},L=function(){f.current=!0,v.current=p.current,h(!0);var e=function(){var r;if(null===(r=c.current)||void 0===r?void 0:r.playing()){R();var t=c.current.seek();x(t),s.current=requestAnimationFrame(e)}else s&&cancelAnimationFrame(s.current)};s.current=requestAnimationFrame(e)},M=function(){cancelAnimationFrame(s.current),h(!1),f.current&&(p.current.forEach((function(e){e.classList.remove("highlighted"),e.classList.remove("has-highlighted")})),o.onComplete&&o.onComplete())};r.useEffect((function(){var e,r,t,n,u,l;if(null===(e=c.current)||void 0===e||e.on("play",L),null===(r=c.current)||void 0===r||r.on("end",M),null===(t=c.current)||void 0===t||t.on("stop",M),null===(n=c.current)||void 0===n||n.on("playerror",q),null===(u=c.current)||void 0===u||u.on("loaderror",A),p.current){var o=null===(l=d.current)||void 0===l?void 0:l.querySelectorAll("span.synced-test--part");o&&(p.current=Array.from(o),v.current=p.current)}return function(){var e,r,t,n,u;M(),null===(e=c.current)||void 0===e||e.off("play",L),null===(r=c.current)||void 0===r||r.off("end",M),null===(t=c.current)||void 0===t||t.off("stop",M),null===(n=c.current)||void 0===n||n.off("playerror",q),null===(u=c.current)||void 0===u||u.off("loaderror",A)}}),[o.value]);var P=r.useMemo((function(){if(!o.showPlayButton)return null;var r={className:"synced-text--play",onClick:w,style:{marginRight:"10px"}};return o.playButton?a.default.createElement("div",e.__assign({},r,{"data-playing":y}),o.playButton):a.default.createElement(n,e.__assign({theme:y?"purple":"primary"},r,{size:"x-small",round:!0}),y?a.default.createElement(u,null):a.default.createElement(l,null))}),[o.showPlayButton,y]);return i?a.default.createElement("div",{ref:d,className:"synced-text"},P,i.sequences.map((function(e,r){return a.default.createElement("span",{className:"synced-test--part",style:{display:"inline-block"},"data-start":e.time[0],"data-end":e.time[1],key:e.time[0]},a.default.createElement("span",{className:"synced-text--word",dangerouslySetInnerHTML:{__html:"".concat(e.text)}}),r<i.sequences.length&&a.default.createElement("span",{className:"synced-text--space",style:{whiteSpace:"pre-wrap"}}," "))}))):null};

package/dist/components/SyncedText/types.d.ts

@@ -1,4 +1,5 @@
 import type { Howl } from 'howler';
+import type { ReactElement } from 'react';
 export interface ISequence {
     text: string;
     time: [number, number];
@@ -18,6 +19,7 @@ export interface ISyncedTextProps {
     value: IAudioSync;
     Howl: typeof Howl;
     showPlayButton?: boolean;
+    playButton?: ReactElement;
     setRef?: (ref: ISyncedTextRef) => void;
     autoPlay?: boolean;
     onComplete?: () => void;

package/dist/esm/components/SyncedText/SyncedText.js

@@ -1 +1 @@
-import r,{useRef as e,useState as n,useEffect as t}from"react";import{useAudioTimeout as o}from"./hooks/useTimeout.js";import u from"../Button/Button.js";import"../../_virtual/_tslib.js";import l from"../../icons/TextToSpeech.js";var a=function(a){var c=a.value,i=e(null),s=e(),d=e(null),p=e(!1),v=e([]),m=e([]),f=n(!1),y=f[0],h=f[1],g=o({timeoutMs:a.timeoutMs}),E=g[0],x=g[1],A=function(r){return x(),h(!1),a.onError?a.onError({type:"PLAY_ERROR",error:r}):null},L=function(r){return x(),h(!1),a.onError?a.onError({type:"LOAD_ERROR",error:r}):null},R=function(){var r;return null===(r=i.current)||void 0===r||r.stop(),h(!1),a.onError?a.onError({type:"TIMEOUT"}):null},w=function(){var r,e;(null===(r=i.current)||void 0===r?void 0:r.playing())||(E(R),null===(e=i.current)||void 0===e||e.play())};t((function(){return c.audio&&a.Howl&&(i.current=new a.Howl({src:c.audio,autoplay:a.autoPlay}),a.autoPlay&&E(R),a.setRef&&a.setRef({play:w,getHowl:function(){return i.current},isPlaying:function(){var r;return null===(r=i.current)||void 0===r?void 0:r.playing()},pause:function(){var r;return null===(r=i.current)||void 0===r?void 0:r.pause()},stop:function(){var r;return null===(r=i.current)||void 0===r?void 0:r.stop()}})),function(){var r;x(),null===(r=i.current)||void 0===r||r.stop()}}),[]);var T=function(r){i.current&&d.current&&v.current[0]&&r>parseFloat(v.current[0].getAttribute("data-start")||"0")&&(m.current.forEach((function(r){r.classList.contains("highlighted")&&(r.classList.remove("highlighted"),r.classList.add("has-highlighted"))})),v.current[0].classList.add("highlighted"),v.current=v.current.slice(1,v.current.length))},_=function(){p.current=!0,v.current=m.current,h(!0);var r=function(){var e;if(null===(e=i.current)||void 0===e?void 0:e.playing()){x();var n=i.current.seek();T(n),s.current=requestAnimationFrame(r)}else s&&cancelAnimationFrame(s.current)};s.current=requestAnimationFrame(r)},k=function(){cancelAnimationFrame(s.current),h(!1),p.current&&(m.current.forEach((function(r){r.classList.remove("highlighted"),r.classList.remove("has-highlighted")})),a.onComplete&&a.onComplete())};return t((function(){var r,e,n,t,o,u;if(null===(r=i.current)||void 0===r||r.on("play",_),null===(e=i.current)||void 0===e||e.on("end",k),null===(n=i.current)||void 0===n||n.on("stop",k),null===(t=i.current)||void 0===t||t.on("playerror",A),null===(o=i.current)||void 0===o||o.on("loaderror",L),m.current){var l=null===(u=d.current)||void 0===u?void 0:u.querySelectorAll("span.synced-test--part");l&&(m.current=Array.from(l),v.current=m.current)}return function(){var r,e,n,t,o;k(),null===(r=i.current)||void 0===r||r.off("play",_),null===(e=i.current)||void 0===e||e.off("end",k),null===(n=i.current)||void 0===n||n.off("stop",k),null===(t=i.current)||void 0===t||t.off("playerror",A),null===(o=i.current)||void 0===o||o.off("loaderror",L)}}),[a.value]),c?r.createElement("div",{ref:d,className:"synced-text"},a.showPlayButton&&r.createElement(u,{theme:y?"purple":"primary",style:{marginRight:"10px"},onClick:w,className:"synced-text--play",size:"x-small",round:!0},r.createElement(l,null)),c.sequences.map((function(e,n){return r.createElement("span",{className:"synced-test--part",style:{display:"inline-block"},"data-start":e.time[0],"data-end":e.time[1],key:e.time[0]},r.createElement("span",{className:"synced-text--word",dangerouslySetInnerHTML:{__html:"".concat(e.text)}}),n<c.sequences.length&&r.createElement("span",{className:"synced-text--space",style:{whiteSpace:"pre-wrap"}}," "))}))):null};export{a as SyncedText};
+import{__assign as r}from"../../_virtual/_tslib.js";import e,{useRef as n,useState as t,useEffect as o,useMemo as u}from"react";import{useAudioTimeout as l}from"./hooks/useTimeout.js";import a from"../Button/Button.js";import i from"../../icons/Megaphone.js";import c from"../../icons/PurpleMegaphone.js";var s=function(s){var d=s.value,p=n(null),m=n(),v=n(null),f=n(!1),y=n([]),h=n([]),g=t(!1),E=g[0],w=g[1],A=l({timeoutMs:s.timeoutMs}),L=A[0],R=A[1],x=function(r){return R(),w(!1),s.onError?s.onError({type:"PLAY_ERROR",error:r}):null},P=function(r){return R(),w(!1),s.onError?s.onError({type:"LOAD_ERROR",error:r}):null},B=function(){var r;return null===(r=p.current)||void 0===r||r.stop(),w(!1),s.onError?s.onError({type:"TIMEOUT"}):null},M=function(){var r,e;(null===(r=p.current)||void 0===r?void 0:r.playing())||(L(B),null===(e=p.current)||void 0===e||e.play())};o((function(){return d.audio&&s.Howl&&(p.current=new s.Howl({src:d.audio,autoplay:s.autoPlay}),s.autoPlay&&L(B),s.setRef&&s.setRef({play:M,getHowl:function(){return p.current},isPlaying:function(){var r;return null===(r=p.current)||void 0===r?void 0:r.playing()},pause:function(){var r;return null===(r=p.current)||void 0===r?void 0:r.pause()},stop:function(){var r;return null===(r=p.current)||void 0===r?void 0:r.stop()}})),function(){var r;R(),null===(r=p.current)||void 0===r||r.stop()}}),[]);var _=function(r){p.current&&v.current&&y.current[0]&&r>parseFloat(y.current[0].getAttribute("data-start")||"0")&&(h.current.forEach((function(r){r.classList.contains("highlighted")&&(r.classList.remove("highlighted"),r.classList.add("has-highlighted"))})),y.current[0].classList.add("highlighted"),y.current=y.current.slice(1,y.current.length))},j=function(){f.current=!0,y.current=h.current,w(!0);var r=function(){var e;if(null===(e=p.current)||void 0===e?void 0:e.playing()){R();var n=p.current.seek();_(n),m.current=requestAnimationFrame(r)}else m&&cancelAnimationFrame(m.current)};m.current=requestAnimationFrame(r)},k=function(){cancelAnimationFrame(m.current),w(!1),f.current&&(h.current.forEach((function(r){r.classList.remove("highlighted"),r.classList.remove("has-highlighted")})),s.onComplete&&s.onComplete())};o((function(){var r,e,n,t,o,u;if(null===(r=p.current)||void 0===r||r.on("play",j),null===(e=p.current)||void 0===e||e.on("end",k),null===(n=p.current)||void 0===n||n.on("stop",k),null===(t=p.current)||void 0===t||t.on("playerror",x),null===(o=p.current)||void 0===o||o.on("loaderror",P),h.current){var l=null===(u=v.current)||void 0===u?void 0:u.querySelectorAll("span.synced-test--part");l&&(h.current=Array.from(l),y.current=h.current)}return function(){var r,e,n,t,o;k(),null===(r=p.current)||void 0===r||r.off("play",j),null===(e=p.current)||void 0===e||e.off("end",k),null===(n=p.current)||void 0===n||n.off("stop",k),null===(t=p.current)||void 0===t||t.off("playerror",x),null===(o=p.current)||void 0===o||o.off("loaderror",P)}}),[s.value]);var q=u((function(){if(!s.showPlayButton)return null;var n={className:"synced-text--play",onClick:M,style:{marginRight:"10px"}};return s.playButton?e.createElement("div",r({},n,{"data-playing":E}),s.playButton):e.createElement(a,r({theme:E?"purple":"primary"},n,{size:"x-small",round:!0}),E?e.createElement(i,null):e.createElement(c,null))}),[s.showPlayButton,E]);return d?e.createElement("div",{ref:v,className:"synced-text"},q,d.sequences.map((function(r,n){return e.createElement("span",{className:"synced-test--part",style:{display:"inline-block"},"data-start":r.time[0],"data-end":r.time[1],key:r.time[0]},e.createElement("span",{className:"synced-text--word",dangerouslySetInnerHTML:{__html:"".concat(r.text)}}),n<d.sequences.length&&e.createElement("span",{className:"synced-text--space",style:{whiteSpace:"pre-wrap"}}," "))}))):null};export{s as SyncedText};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nzk-react-components",
-  "version": "3.0.7",
+  "version": "3.1.0",
   "license": "MIT",
   "main": "dist/cjs/index.js",
   "files": [