nzk-react-components 2.0.0-2 → 2.0.0-4

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

@@ -1 +1 @@
-"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};
+"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:""+e.text}}),r<o.sequences.length&&l.default.createElement("span",{className:"synced-text--space",style:{whiteSpace:"pre-wrap"}}," "))}))):null};

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

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

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

@@ -1 +1 @@
-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};
+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 i=a.value,c=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=c.current)||void 0===r||r.stop(),h(!1),a.onError?a.onError({type:"TIMEOUT"}):null},w=function(){var r,e;(null===(r=c.current)||void 0===r?void 0:r.playing())||(E(R),null===(e=c.current)||void 0===e||e.play())};t((function(){return i.audio&&a.Howl&&(c.current=new a.Howl({src:i.audio,autoplay:a.autoPlay}),a.autoPlay&&E(R),a.setRef&&a.setRef({play:w,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;x(),null===(r=c.current)||void 0===r||r.stop()}}),[]);var T=function(r){c.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=c.current)||void 0===e?void 0:e.playing()){x();var n=c.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=c.current)||void 0===r||r.on("play",_),null===(e=c.current)||void 0===e||e.on("end",k),null===(n=c.current)||void 0===n||n.on("stop",k),null===(t=c.current)||void 0===t||t.on("playerror",A),null===(o=c.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=c.current)||void 0===r||r.off("play",_),null===(e=c.current)||void 0===e||e.off("end",k),null===(n=c.current)||void 0===n||n.off("stop",k),null===(t=c.current)||void 0===t||t.off("playerror",A),null===(o=c.current)||void 0===o||o.off("loaderror",L)}}),[a.value]),i?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)),i.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<i.sequences.length&&r.createElement("span",{className:"synced-text--space",style:{whiteSpace:"pre-wrap"}}," "))}))):null};export{a as SyncedText};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nzk-react-components",
-  "version": "2.0.0-2",
+  "version": "2.0.0-4",
   "license": "MIT",
   "main": "dist/cjs/index.js",
   "files": [
@@ -65,7 +65,6 @@
   "dependencies": {
     "@babel/runtime": "^7.23.2",
     "canvas-confetti": "^1.4.0",
-    "howler": "^2.2.4",
     "lodash.after": "^4.0.4",
     "nanoid": "3.3.5",
     "polished": "^4.1.3",