nzk-react-components 2.0.0-1 → 2.0.0-2

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

@@ -1 +1 @@
-"use strict";var e=require("react"),r=require("howler"),n=require("./hooks/useTimeout.js");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=t(e);exports.SyncedText=function(t){var o=t.value,l=e.useRef(null),a=e.useRef(),c=e.useRef(null),i=e.useRef(!1),s=e.useRef([]),d=e.useRef([]),f=n.useAudioTimeout({timeoutMs:t.timeoutMs}),v=f[0],p=f[1],m=function(e){return p(),t.onError?t.onError({type:"PLAY_ERROR",error:e}):null},y=function(e){return p(),t.onError?t.onError({type:"LOAD_ERROR",error:e}):null},h=function(){var e;return null===(e=l.current)||void 0===e||e.stop(),t.onError?t.onError({type:"TIMEOUT"}):null},g=function(){var e,r;(null===(e=l.current)||void 0===e?void 0:e.playing())||(v(h),null===(r=l.current)||void 0===r||r.play())};e.useEffect((function(){return o.audio&&(l.current=new r.Howl({src:o.audio,autoplay:t.autoPlay}),t.autoPlay&&v(h),t.setRef&&t.setRef({play:g,getHowl:function(){return l.current},isPlaying:function(){var e;return null===(e=l.current)||void 0===e?void 0:e.playing()},pause:function(){var e;return null===(e=l.current)||void 0===e?void 0:e.pause()},stop:function(){var e;return null===(e=l.current)||void 0===e?void 0:e.stop()}})),function(){var e;p(),null===(e=l.current)||void 0===e||e.stop()}}),[]);var E=function(e){l.current&&c.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))},R=function(){i.current=!0,s.current=d.current;var e=function(){var r;if(null===(r=l.current)||void 0===r?void 0:r.playing()){p();var n=l.current.seek();E(n),a.current=requestAnimationFrame(e)}else a&&cancelAnimationFrame(a.current)};a.current=requestAnimationFrame(e)},A=function(){cancelAnimationFrame(a.current),i.current&&(d.current.forEach((function(e){e.classList.remove("highlighted"),e.classList.remove("has-highlighted")})),t.onComplete&&t.onComplete())};return e.useEffect((function(){var e,r,n,t,u,o;if(null===(e=l.current)||void 0===e||e.on("play",R),null===(r=l.current)||void 0===r||r.on("end",A),null===(n=l.current)||void 0===n||n.on("stop",A),null===(t=l.current)||void 0===t||t.on("playerror",m),null===(u=l.current)||void 0===u||u.on("loaderror",y),d.current){var a=null===(o=c.current)||void 0===o?void 0:o.querySelectorAll("span.synced-test--part");a&&(d.current=Array.from(a),s.current=d.current)}return function(){var e,r,n,t,u;A(),null===(e=l.current)||void 0===e||e.off("play",R),null===(r=l.current)||void 0===r||r.off("end",A),null===(n=l.current)||void 0===n||n.off("stop",A),null===(t=l.current)||void 0===t||t.off("playerror",m),null===(u=l.current)||void 0===u||u.off("loaderror",y)}}),[t.value]),o?u.default.createElement("div",{ref:c,className:"synced-text"},o.sequences.map((function(e,r){return u.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]},u.default.createElement("span",{className:"synced-text--word",dangerouslySetInnerHTML:{__html:""+e.text}}),r<o.sequences.length&&u.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/components/SyncedText/types.d.ts

@@ -16,6 +16,7 @@ export interface ISyncedTextRef {
 }
 export interface ISyncedTextProps {
     value: IAudioSync;
+    showPlayButton?: boolean;
     setRef?: (ref: ISyncedTextRef) => void;
     autoPlay?: boolean;
     onComplete?: () => void;

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

@@ -1 +1 @@
-import r,{useRef as e,useEffect as n}from"react";import{Howl as t}from"howler";import{useAudioTimeout as o}from"./hooks/useTimeout.js";var u=function(u){var l=u.value,c=e(null),a=e(),i=e(null),s=e(!1),d=e([]),v=e([]),f=o({timeoutMs:u.timeoutMs}),p=f[0],m=f[1],h=function(r){return m(),u.onError?u.onError({type:"PLAY_ERROR",error:r}):null},y=function(r){return m(),u.onError?u.onError({type:"LOAD_ERROR",error:r}):null},g=function(){var r;return null===(r=c.current)||void 0===r||r.stop(),u.onError?u.onError({type:"TIMEOUT"}):null},E=function(){var r,e;(null===(r=c.current)||void 0===r?void 0:r.playing())||(p(g),null===(e=c.current)||void 0===e||e.play())};n((function(){return l.audio&&(c.current=new t({src:l.audio,autoplay:u.autoPlay}),u.autoPlay&&p(g),u.setRef&&u.setRef({play:E,getHowl:function(){return c.current},isPlaying:function(){var r;return null===(r=c.current)||void 0===r?void 0:r.playing()},pause:function(){var r;return null===(r=c.current)||void 0===r?void 0:r.pause()},stop:function(){var r;return null===(r=c.current)||void 0===r?void 0:r.stop()}})),function(){var r;m(),null===(r=c.current)||void 0===r||r.stop()}}),[]);var A=function(r){c.current&&i.current&&d.current[0]&&r>parseFloat(d.current[0].getAttribute("data-start")||"0")&&(v.current.forEach((function(r){r.classList.contains("highlighted")&&(r.classList.remove("highlighted"),r.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=v.current;var r=function(){var e;if(null===(e=c.current)||void 0===e?void 0:e.playing()){m();var n=c.current.seek();A(n),a.current=requestAnimationFrame(r)}else a&&cancelAnimationFrame(a.current)};a.current=requestAnimationFrame(r)},R=function(){cancelAnimationFrame(a.current),s.current&&(v.current.forEach((function(r){r.classList.remove("highlighted"),r.classList.remove("has-highlighted")})),u.onComplete&&u.onComplete())};return n((function(){var r,e,n,t,o,u;if(null===(r=c.current)||void 0===r||r.on("play",L),null===(e=c.current)||void 0===e||e.on("end",R),null===(n=c.current)||void 0===n||n.on("stop",R),null===(t=c.current)||void 0===t||t.on("playerror",h),null===(o=c.current)||void 0===o||o.on("loaderror",y),v.current){var l=null===(u=i.current)||void 0===u?void 0:u.querySelectorAll("span.synced-test--part");l&&(v.current=Array.from(l),d.current=v.current)}return function(){var r,e,n,t,o;R(),null===(r=c.current)||void 0===r||r.off("play",L),null===(e=c.current)||void 0===e||e.off("end",R),null===(n=c.current)||void 0===n||n.off("stop",R),null===(t=c.current)||void 0===t||t.off("playerror",h),null===(o=c.current)||void 0===o||o.off("loaderror",y)}}),[u.value]),l?r.createElement("div",{ref:i,className:"synced-text"},l.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:""+e.text}}),n<l.sequences.length&&r.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/package.json

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