nzk-react-components 2.0.0-0 → 2.0.0-2

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

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

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

@@ -0,0 +1 @@
+"use strict";var t=require("react");exports.useAudioTimeout=function(e){var u=t.useRef(0);return[function(t){e.timeoutMs&&(u.current=setTimeout((function(){t()}),e.timeoutMs))},function(){clearTimeout(u.current)}]};

package/dist/components/Button/Button.d.ts

@@ -18,5 +18,7 @@ export declare type BaseProps = {
     theme?: Theme;
 };
 export declare type ButtonProps = {} & BaseProps;
-declare const Button: import("styled-components").StyledComponent<"div", any, BaseProps, never>;
+declare const Button: import("styled-components").StyledComponent<"div", any, {
+    role: "button";
+} & BaseProps, "role">;
 export default Button;

package/dist/components/SyncedText/hooks/useTimeout.d.ts

@@ -0,0 +1,5 @@
+interface IProps {
+    timeoutMs?: number;
+}
+export declare const useAudioTimeout: (props: IProps) => [(cb: () => void) => void, () => void];
+export {};

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

@@ -1,3 +1,4 @@
+import { Howl } from 'howler';
 export interface ISequence {
     text: string;
     time: [number, number];
@@ -11,10 +12,15 @@ export interface ISyncedTextRef {
     pause: () => void;
     stop: () => void;
     isPlaying: () => void;
+    getHowl: () => Howl | null;
 }
 export interface ISyncedTextProps {
     value: IAudioSync;
+    showPlayButton?: boolean;
     setRef?: (ref: ISyncedTextRef) => void;
     autoPlay?: boolean;
     onComplete?: () => void;
+    timeoutMs?: number;
+    onTimeout?: () => void;
+    onError?: (err: any) => void;
 }

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

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

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

@@ -0,0 +1 @@
+import{useRef as t}from"react";var r=function(r){var e=t(0);return[function(t){r.timeoutMs&&(e.current=setTimeout((function(){t()}),r.timeoutMs))},function(){clearTimeout(e.current)}]};export{r as useAudioTimeout};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nzk-react-components",
-  "version": "2.0.0-0",
+  "version": "2.0.0-2",
   "license": "MIT",
   "main": "dist/cjs/index.js",
   "files": [
@@ -27,6 +27,7 @@
     "@svgr/rollup": "^5.5.0",
     "@svgr/webpack": "^5.5.0",
     "@types/canvas-confetti": "^1.4.2",
+    "@types/howler": "^2.2.10",
     "@types/react": "^17.0.15",
     "@types/shortid": "^0.0.29",
     "@types/styled-components": "^5.1.11",