@edifice.io/react 2.0.0-develop-rc.4 → 2.0.0-develop-rc.10

package/dist/modules/multimedia/AudioRecorder/AudioRecorder.js

@@ -1,49 +1,50 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { forwardRef, useImperativeHandle, useState } from "react";
-import clsx from "clsx";
-import { useTranslation } from "react-i18next";
-import AudioRecorderTimer from "./AudioRecorderTimer.js";
-import useAudioRecorder from "./useAudioRecorder.js";
-import { Toolbar } from "../../../components/Toolbar/Toolbar.js";
-import { FormControl } from "../../../components/Form/FormControl.js";
-import { Input } from "../../../components/Input/Input.js";
-import { Icon } from "../../../components/Icon/Icon.js";
-const AudioRecorder = /* @__PURE__ */ forwardRef(({
-  onSaveSuccess,
-  onRecordUpdated,
-  hideSaveAction = !1,
-  visibility = "protected"
-}, ref) => {
+import { jsxs as A, jsx as e } from "react/jsx-runtime";
+import { forwardRef as I, useImperativeHandle as S, useState as v } from "react";
+import y from "clsx";
+import { useTranslation as D } from "react-i18next";
+import g from "./AudioRecorderTimer.js";
+import E from "./useAudioRecorder.js";
+import { Toolbar as C } from "../../../components/Toolbar/Toolbar.js";
+import { FormControl as G } from "../../../components/Form/FormControl.js";
+import { Input as L } from "../../../components/Input/Input.js";
+import { Icon as V } from "../../../components/Icon/Icon.js";
+const Y = /* @__PURE__ */ I(({
+  onSaveSuccess: t,
+  onRecordUpdated: d,
+  hideSaveAction: i = !1,
+  visibility: m = "protected"
+}, s) => {
   const {
-    recordState,
-    playState,
-    recordTime,
-    audioRef,
-    audioNameRef,
-    toolbarItems,
-    maxDuration,
-    handlePlayEnded,
-    handleSave
-  } = useAudioRecorder(onSaveSuccess, onRecordUpdated, hideSaveAction, visibility, "media-library"), {
-    t
-  } = useTranslation();
-  useImperativeHandle(ref, () => ({
-    save: handleSave
+    recordState: r,
+    playState: o,
+    recordTime: c,
+    audioRef: n,
+    audioNameRef: l,
+    toolbarItems: u,
+    maxDuration: f,
+    handlePlayEnded: p,
+    handleSave: x
+  } = E(t, d, i, m, "media-library"), {
+    t: a
+  } = D();
+  S(s, () => ({
+    save: x
   }));
-  const [audioTime, setAudioTime] = useState(0), classColor = clsx({
-    "text-danger": recordState === "RECORDING",
-    "text-success": playState === "PLAYING"
-  }), handleTimeUpdate = (event) => {
-    setAudioTime(event.target.currentTime);
+  const [N, R] = v(0), T = y({
+    "text-danger": r === "RECORDING",
+    "text-success": o === "PLAYING"
+  }), b = (h) => {
+    R(h.target.currentTime);
   };
-  return /* @__PURE__ */ jsxs("div", { className: "audio-recorder m-auto d-flex flex-column", children: [
-    /* @__PURE__ */ jsx(FormControl, { id: "recordName", className: "mb-32", isRequired: !0, isReadOnly: recordState === "SAVED" || recordState === "SAVING", children: /* @__PURE__ */ jsx(Input, { type: "text", size: "sm", placeholder: t("bbm.audio.recorder.name"), ref: audioNameRef, defaultValue: t("bbm.audio.recorder.defaultName") + (/* @__PURE__ */ new Date()).toLocaleDateString() }) }),
-    /* @__PURE__ */ jsx("div", { className: "audio-recorder-icon mx-auto", children: /* @__PURE__ */ jsx(Icon, { name: "mic", size: "64", className: classColor }) }),
-    /* @__PURE__ */ jsx(AudioRecorderTimer, { recordState, playState, recordTime, audioTime, maxDuration }),
-    /* @__PURE__ */ jsx("audio", { ref: audioRef, onEnded: handlePlayEnded, onTimeUpdate: handleTimeUpdate, children: /* @__PURE__ */ jsx("track", { default: !0, kind: "captions", srcLang: "fr", src: "" }) }),
-    /* @__PURE__ */ jsx(Toolbar, { items: toolbarItems })
+  return /* @__PURE__ */ A("div", { className: "audio-recorder m-auto d-flex flex-column", children: [
+    /* @__PURE__ */ e(G, { id: "recordName", className: "mb-32", isRequired: !0, isReadOnly: r === "SAVED" || r === "SAVING", children: /* @__PURE__ */ e(L, { type: "text", size: "sm", placeholder: a("bbm.audio.recorder.name"), ref: l, defaultValue: a("bbm.audio.recorder.defaultName") + (/* @__PURE__ */ new Date()).toLocaleDateString() }) }),
+    /* @__PURE__ */ e("div", { className: "audio-recorder-icon mx-auto", children: /* @__PURE__ */ e(V, { name: "mic", size: "64", className: T }) }),
+    /* @__PURE__ */ e(g, { recordState: r, playState: o, recordTime: c, audioTime: N, maxDuration: f }),
+    /* @__PURE__ */ e("audio", { ref: n, onEnded: p, onTimeUpdate: b, children: /* @__PURE__ */ e("track", { default: !0, kind: "captions", srcLang: "fr", src: "" }) }),
+    /* @__PURE__ */ e(C, { items: u })
   ] });
-}), AudioRecorder$1 = AudioRecorder;
+});
 export {
-  AudioRecorder$1 as default
+  Y as default
 };
+//# sourceMappingURL=AudioRecorder.js.map

package/dist/modules/multimedia/AudioRecorder/AudioRecorder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AudioRecorder.js","sources":["../../../../src/modules/multimedia/AudioRecorder/AudioRecorder.tsx"],"sourcesContent":["import { forwardRef, useImperativeHandle, useState } from 'react';\n\nimport { WorkspaceElement, WorkspaceVisibility } from '@edifice.io/ts-client';\nimport clsx from 'clsx';\nimport { useTranslation } from 'react-i18next';\n\nimport { FormControl, Icon, Input, Toolbar } from '../../../components';\nimport AudioRecorderTimer from './AudioRecorderTimer';\nimport useAudioRecorder from './useAudioRecorder';\n\nexport interface AudioRecorderProps {\n  onSaveSuccess?: (resource: WorkspaceElement) => void;\n  onRecordUpdated?: (recordURL?: string) => void;\n  hideSaveAction?: boolean;\n  visibility?: WorkspaceVisibility;\n}\n\nexport interface AudioRecorderRef {\n  save: () => Promise<WorkspaceElement | undefined>;\n}\n\nconst AudioRecorder = forwardRef(\n  (\n    {\n      onSaveSuccess,\n      onRecordUpdated,\n      hideSaveAction = false,\n      visibility = 'protected',\n    }: AudioRecorderProps,\n    ref,\n  ) => {\n    const {\n      recordState,\n      playState,\n      recordTime,\n      audioRef,\n      audioNameRef,\n      toolbarItems,\n      maxDuration,\n      handlePlayEnded,\n      handleSave,\n    } = useAudioRecorder(\n      onSaveSuccess,\n      onRecordUpdated,\n      hideSaveAction,\n      visibility,\n      'media-library',\n    );\n    const { t } = useTranslation();\n\n    // We add one methods to handle save action from parent component\n    useImperativeHandle(ref, () => ({\n      save: handleSave,\n    }));\n\n    const [audioTime, setAudioTime] = useState<number>(0);\n\n    const classColor = clsx({\n      'text-danger': recordState === 'RECORDING',\n      'text-success': playState === 'PLAYING',\n    });\n\n    const handleTimeUpdate = (event: any) => {\n      setAudioTime(event.target.currentTime);\n    };\n\n    return (\n      <div className=\"audio-recorder m-auto d-flex flex-column\">\n        <FormControl\n          id=\"recordName\"\n          className=\"mb-32\"\n          isRequired\n          isReadOnly={recordState === 'SAVED' || recordState === 'SAVING'}\n        >\n          <Input\n            type=\"text\"\n            size={'sm'}\n            placeholder={t('bbm.audio.recorder.name')}\n            ref={audioNameRef}\n            defaultValue={\n              t('bbm.audio.recorder.defaultName') +\n              new Date().toLocaleDateString()\n            }\n          />\n        </FormControl>\n        <div className=\"audio-recorder-icon mx-auto\">\n          <Icon name=\"mic\" size=\"64\" className={classColor} />\n        </div>\n        <AudioRecorderTimer\n          recordState={recordState}\n          playState={playState}\n          recordTime={recordTime}\n          audioTime={audioTime}\n          maxDuration={maxDuration}\n        ></AudioRecorderTimer>\n        <audio\n          ref={audioRef}\n          onEnded={handlePlayEnded}\n          onTimeUpdate={handleTimeUpdate}\n        >\n          <track default kind=\"captions\" srcLang=\"fr\" src=\"\"></track>\n        </audio>\n        <Toolbar items={toolbarItems} />\n      </div>\n    );\n  },\n);\n\nexport default AudioRecorder;\n"],"names":["AudioRecorder","onSaveSuccess","onRecordUpdated","hideSaveAction","visibility","ref","recordState","playState","recordTime","audioRef","audioNameRef","toolbarItems","maxDuration","handlePlayEnded","handleSave","useAudioRecorder","t","useTranslation","useImperativeHandle","save","audioTime","setAudioTime","useState","classColor","clsx","handleTimeUpdate","event","target","currentTime","jsxs","jsx","FormControl","Input","Date","toLocaleDateString","Icon","AudioRecorderTimer","Toolbar"],"mappings":";;;;;;;;;;AAqBMA,MAAAA,sBACJ,CACE;AAAA,EACEC,eAAAA;AAAAA,EACAC,iBAAAA;AAAAA,EACAC,gBAAAA,IAAiB;AAAA,EACjBC,YAAAA,IAAa;AACK,GACpBC,MACG;AACG,QAAA;AAAA,IACJC,aAAAA;AAAAA,IACAC,WAAAA;AAAAA,IACAC,YAAAA;AAAAA,IACAC,UAAAA;AAAAA,IACAC,cAAAA;AAAAA,IACAC,cAAAA;AAAAA,IACAC,aAAAA;AAAAA,IACAC,iBAAAA;AAAAA,IACAC,YAAAA;AAAAA,EAAAA,IACEC,EACFd,GACAC,GACAC,GACAC,GACA,eACF,GACM;AAAA,IAAEY,GAAAA;AAAAA,MAAMC,EAAe;AAG7BC,EAAAA,EAAoBb,GAAK,OAAO;AAAA,IAC9Bc,MAAML;AAAAA,EACN,EAAA;AAEF,QAAM,CAACM,GAAWC,CAAY,IAAIC,EAAiB,CAAC,GAE9CC,IAAaC,EAAK;AAAA,IACtB,eAAelB,MAAgB;AAAA,IAC/B,gBAAgBC,MAAc;AAAA,EAAA,CAC/B,GAEKkB,IAAmBA,CAACC,MAAe;AAC1BA,IAAAA,EAAAA,EAAMC,OAAOC,WAAW;AAAA,EAAA;AAIrC,SAAA,gBAAAC,EAAC,OAAI,EAAA,WAAU,4CACb,UAAA;AAAA,IAAA,gBAAAC,EAACC,GACC,EAAA,IAAG,cACH,WAAU,SACV,YAAU,IACV,YAAYzB,MAAgB,WAAWA,MAAgB,UAEvD,UAAA,gBAAAwB,EAACE,KACC,MAAK,QACL,MAAM,MACN,aAAahB,EAAE,yBAAyB,GACxC,KAAKN,GACL,cACEM,EAAE,gCAAgC,KAC9BiB,oBAAAA,KAAAA,GAAOC,mBAAAA,EACZ,CAAA,GAEL;AAAA,IACC,gBAAAJ,EAAA,OAAA,EAAI,WAAU,+BACb,UAAC,gBAAAA,EAAAK,GAAA,EAAK,MAAK,OAAM,MAAK,MAAK,WAAWZ,EAAW,CAAA,GACnD;AAAA,sBACCa,GACC,EAAA,aAAA9B,GACA,WAAAC,GACA,YAAAC,GACA,WAAAY,GACA,aAAAR,GACD;AAAA,sBACA,SACC,EAAA,KAAKH,GACL,SAASI,GACT,cAAcY,GAEd,UAAA,gBAAAK,EAAC,SAAM,EAAA,SAAO,IAAC,MAAK,YAAW,SAAQ,MAAK,KAAI,GAAG,CAAA,GACrD;AAAA,IACA,gBAAAA,EAACO,GAAQ,EAAA,OAAO1B,EAAa,CAAA;AAAA,EAC/B,EAAA,CAAA;AAEJ,CACF;"}

package/dist/modules/multimedia/AudioRecorder/AudioRecorderTimer.js

@@ -1,24 +1,25 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { convertMsToMS } from "../../../utils/time.js";
-import { Icon } from "../../../components/Icon/Icon.js";
-const AudioRecorderTimer = ({
-  recordState,
-  playState,
-  recordTime,
-  audioTime,
-  maxDuration
-}) => /* @__PURE__ */ jsxs("div", { className: "audio-recorder-time my-16 mx-auto", children: [
-  playState === "IDLE" && /* @__PURE__ */ jsxs("div", { className: "d-flex align-items-center", children: [
-    recordState === "PAUSED" ? /* @__PURE__ */ jsx(Icon, { name: "pause", size: "12", className: "me-8 text-danger" }) : /* @__PURE__ */ jsx(Icon, { name: "record", size: "12", className: "me-8 text-danger" }),
-    convertMsToMS(recordState !== "IDLE" ? recordTime : 0) + " / " + convertMsToMS(maxDuration)
+import { jsxs as m, jsx as s } from "react/jsx-runtime";
+import { convertMsToMS as e } from "../../../utils/time.js";
+import { Icon as a } from "../../../components/Icon/Icon.js";
+const x = ({
+  recordState: r,
+  playState: i,
+  recordTime: c,
+  audioTime: n,
+  maxDuration: o
+}) => /* @__PURE__ */ m("div", { className: "audio-recorder-time my-16 mx-auto", children: [
+  i === "IDLE" && /* @__PURE__ */ m("div", { className: "d-flex align-items-center", children: [
+    r === "PAUSED" ? /* @__PURE__ */ s(a, { name: "pause", size: "12", className: "me-8 text-danger" }) : /* @__PURE__ */ s(a, { name: "record", size: "12", className: "me-8 text-danger" }),
+    e(r !== "IDLE" ? c : 0) + " / " + e(o)
   ] }),
-  playState !== "IDLE" && /* @__PURE__ */ jsxs("div", { className: "d-flex align-items-center mx-auto", children: [
-    /* @__PURE__ */ jsx(Icon, { name: "mic", size: "12", className: "me-8" }),
-    convertMsToMS(audioTime * 1e3),
+  i !== "IDLE" && /* @__PURE__ */ m("div", { className: "d-flex align-items-center mx-auto", children: [
+    /* @__PURE__ */ s(a, { name: "mic", size: "12", className: "me-8" }),
+    e(n * 1e3),
     " /",
-    convertMsToMS(recordTime)
+    e(c)
   ] })
 ] });
 export {
-  AudioRecorderTimer as default
+  x as default
 };
+//# sourceMappingURL=AudioRecorderTimer.js.map

package/dist/modules/multimedia/AudioRecorder/AudioRecorderTimer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AudioRecorderTimer.js","sources":["../../../../src/modules/multimedia/AudioRecorder/AudioRecorderTimer.tsx"],"sourcesContent":["import { Icon } from '../../..';\nimport { convertMsToMS } from '../../../utils';\nimport { PlayState, RecordState } from './useAudioRecorder';\n\nexport interface AudioRecorderTimerProps {\n  recordState: RecordState;\n  playState: PlayState;\n  recordTime: number | undefined;\n  audioTime: number;\n  maxDuration: number;\n}\n\nconst AudioRecorderTimer = ({\n  recordState,\n  playState,\n  recordTime,\n  audioTime,\n  maxDuration,\n}: AudioRecorderTimerProps) => {\n  return (\n    <div className=\"audio-recorder-time my-16 mx-auto\">\n      {playState === 'IDLE' && (\n        <div className=\"d-flex align-items-center\">\n          {recordState === 'PAUSED' ? (\n            <Icon name=\"pause\" size=\"12\" className=\"me-8 text-danger\" />\n          ) : (\n            <Icon name=\"record\" size=\"12\" className=\"me-8 text-danger\" />\n          )}\n          {convertMsToMS(recordState !== 'IDLE' ? recordTime! : 0) +\n            ' / ' +\n            convertMsToMS(maxDuration)}\n        </div>\n      )}\n      {playState !== 'IDLE' && (\n        <div className=\"d-flex align-items-center mx-auto\">\n          <Icon name=\"mic\" size=\"12\" className=\"me-8\" />\n          {convertMsToMS(audioTime * 1000)} /{convertMsToMS(recordTime!)}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default AudioRecorderTimer;\n"],"names":["AudioRecorderTimer","recordState","playState","recordTime","audioTime","maxDuration","jsxs","jsx","Icon","convertMsToMS"],"mappings":";;;AAYA,MAAMA,IAAqBA,CAAC;AAAA,EAC1BC,aAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,YAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,aAAAA;AACuB,MAErB,gBAAAC,EAAC,OAAI,EAAA,WAAU,qCACZJ,UAAAA;AAAAA,EAAAA,MAAc,UACb,gBAAAI,EAAC,OAAI,EAAA,WAAU,6BACZL,UAAAA;AAAAA,IAAAA,MAAgB,WACd,gBAAAM,EAAAC,GAAA,EAAK,MAAK,SAAQ,MAAK,MAAK,WAAU,0CAEtCA,GAAK,EAAA,MAAK,UAAS,MAAK,MAAK,WAAU,oBACzC;AAAA,IACAC,EAAcR,MAAgB,SAASE,IAAc,CAAC,IACrD,QACAM,EAAcJ,CAAW;AAAA,EAAA,GAC7B;AAAA,EAEDH,MAAc,UACZ,gBAAAI,EAAA,OAAA,EAAI,WAAU,qCACb,UAAA;AAAA,IAAA,gBAAAC,EAACC,KAAK,MAAK,OAAM,MAAK,MAAK,WAAU,QAAM;AAAA,IAC1CC,EAAcL,IAAY,GAAI;AAAA,IAAE;AAAA,IAAGK,EAAcN,CAAW;AAAA,EAAA,GAC/D;AAEJ,EAAA,CAAA;"}

package/dist/modules/multimedia/AudioRecorder/useAudioRecorder.d.ts

@@ -1,4 +1,4 @@
-import { WorkspaceElement, WorkspaceVisibility } from 'edifice-ts-client';
+import { WorkspaceElement, WorkspaceVisibility } from '@edifice.io/ts-client';
 import { ToolbarItem } from '../../../components';
 export type RecordState = 'IDLE' | 'RECORDING' | 'PAUSED' | 'RECORDED' | 'SAVING' | 'SAVED';
 export type PlayState = 'IDLE' | 'PLAYING' | 'PAUSED';