nzk-react-components 2.0.0-0 → 2.0.0-1

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"),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};

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,14 @@ export interface ISyncedTextRef {
     pause: () => void;
     stop: () => void;
     isPlaying: () => void;
+    getHowl: () => Howl | null;
 }
 export interface ISyncedTextProps {
     value: IAudioSync;
     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,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};

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-1",
   "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",