nzk-react-components 2.0.0-1 → 2.0.0-3

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("./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,8 @@ export interface ISyncedTextRef {
 }
 export interface ISyncedTextProps {
     value: IAudioSync;
+    Howl?: typeof Howl;
+    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 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-1",
+  "version": "2.0.0-3",
   "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",