@edifice.io/react 2.0.0-develop-rc.7 → 2.0.0-develop-rc.11

package/dist/modules/multimedia/VideoEmbed/VideoEmbed.js

@@ -1,77 +1,78 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { useState, useId, useEffect } from "react";
-import { odeServices } from "edifice-ts-client";
-import { useTranslation } from "react-i18next";
-import { useMediaLibraryContext } from "../MediaLibrary/MediaLibraryContext.js";
-import useDebounce from "../../../hooks/useDebounce/useDebounce.js";
-import usePaths from "../../../core/usePaths/usePaths.js";
-import { Icon } from "../../../components/Icon/Icon.js";
-import { FormControl } from "../../../components/Form/FormControl.js";
-import { Input } from "../../../components/Input/Input.js";
-import { Image } from "../../../components/Image/Image.js";
-import { EmptyScreen } from "../../../components/EmptyScreen/EmptyScreen.js";
-import { Button } from "../../../components/Button/Button.js";
-const VideoEmbed = ({
-  onSuccess
+import { jsxs as o, jsx as r } from "react/jsx-runtime";
+import { useState as s, useId as I, useEffect as h } from "react";
+import { odeServices as l } from "@edifice.io/ts-client";
+import { useTranslation as T } from "react-i18next";
+import { useMediaLibraryContext as F } from "../MediaLibrary/MediaLibraryContext.js";
+import S from "../../../hooks/useDebounce/useDebounce.js";
+import U from "../../../core/usePaths/usePaths.js";
+import { Icon as c } from "../../../components/Icon/Icon.js";
+import { FormControl as V } from "../../../components/Form/FormControl.js";
+import { Input as k } from "../../../components/Input/Input.js";
+import { Image as j } from "../../../components/Image/Image.js";
+import { EmptyScreen as D } from "../../../components/EmptyScreen/EmptyScreen.js";
+import { Button as p } from "../../../components/Button/Button.js";
+const O = ({
+  onSuccess: n
 }) => {
   const {
-    t
-  } = useTranslation(), {
-    switchType
-  } = useMediaLibraryContext(), [url, setUrl] = useState(), [embedVideo, setEmbedVideo] = useState(), [embedder, setEmbedder] = useState(void 0), [whiteListProvider, setWhiteListProvider] = useState(), debounceChangeUrl = useDebounce(url || "", 300), formControlId = useId(), [imagePath] = usePaths();
-  useEffect(() => {
-    initWhiteListProvider();
-  }, []), useEffect(() => {
-    if (whiteListProvider && debounceChangeUrl) {
-      const embedderFound = odeServices.embedder().getProviderFromUrl(whiteListProvider, debounceChangeUrl);
-      if (embedderFound) {
-        setEmbedder(embedderFound);
-        const embedVideo2 = odeServices.embedder().getEmbedCodeForProvider(embedderFound, debounceChangeUrl);
-        setEmbedVideo(embedVideo2), onSuccess(embedVideo2);
+    t: i
+  } = T(), {
+    switchType: u
+  } = F(), [g, x] = s(), [b, C] = s(), [d, v] = s(void 0), [a, N] = s(), m = S(g || "", 300), y = I(), [E] = U();
+  h(() => {
+    w();
+  }, []), h(() => {
+    if (a && m) {
+      const t = l.embedder().getProviderFromUrl(a, m);
+      if (t) {
+        v(t);
+        const e = l.embedder().getEmbedCodeForProvider(t, m);
+        C(e), n(e);
       } else
-        setEmbedder(void 0), onSuccess();
+        v(void 0), n();
     }
-  }, [debounceChangeUrl, whiteListProvider]);
-  const initWhiteListProvider = async () => {
-    const whiteListProviderResponse = await Promise.all([odeServices.embedder().getDefault(), odeServices.embedder().getCustom()]).then((results) => results.flat());
-    setWhiteListProvider(whiteListProviderResponse);
+  }, [m, a]);
+  const w = async () => {
+    const t = await Promise.all([l.embedder().getDefault(), l.embedder().getCustom()]).then((e) => e.flat());
+    N(t);
   };
-  function handleUrlChange(event) {
-    const url2 = event.currentTarget.value;
-    setUrl(url2), onSuccess(url2 != null && url2.length ? url2 : void 0);
+  function P(t) {
+    const e = t.currentTarget.value;
+    x(e), n(e != null && e.length ? e : void 0);
   }
-  function handleSwitchToEmbedderClick() {
-    switchType("embedder");
+  function f() {
+    u("embedder");
   }
-  const renderContent = () => debounceChangeUrl ? embedder ? /* @__PURE__ */ jsxs("div", { className: "mx-auto mt-16", children: [
-    /* @__PURE__ */ jsxs("div", { className: "video-embed-provider d-flex align-items-center", children: [
-      /* @__PURE__ */ jsx(Image, { src: embedder.logo, alt: "Logo " + embedder.displayName, className: "video-embed-provider-logo" }),
-      embedder.displayName
+  const L = () => m ? d ? /* @__PURE__ */ o("div", { className: "mx-auto mt-16", children: [
+    /* @__PURE__ */ o("div", { className: "video-embed-provider d-flex align-items-center", children: [
+      /* @__PURE__ */ r(j, { src: d.logo, alt: "Logo " + d.displayName, className: "video-embed-provider-logo" }),
+      d.displayName
     ] }),
-    embedVideo && /* @__PURE__ */ jsx("div", { className: "video-embed-preview mt-12", dangerouslySetInnerHTML: {
-      __html: embedVideo
+    b && /* @__PURE__ */ r("div", { className: "video-embed-preview mt-12", dangerouslySetInnerHTML: {
+      __html: b
     } })
-  ] }) : /* @__PURE__ */ jsxs("div", { className: "d-flex flex-column align-items-center m-16", children: [
-    /* @__PURE__ */ jsx(EmptyScreen, { imageSrc: `${imagePath}/emptyscreen/illu-error.svg`, title: t("bbm.video.previewError.title"), text: t("bbm.video.previewError.text") }),
-    /* @__PURE__ */ jsxs(Button, { variant: "ghost", color: "primary", onClick: handleSwitchToEmbedderClick, className: "align-items-start mt-16", children: [
-      t("bbm.video.useEmbedCode"),
+  ] }) : /* @__PURE__ */ o("div", { className: "d-flex flex-column align-items-center m-16", children: [
+    /* @__PURE__ */ r(D, { imageSrc: `${E}/emptyscreen/illu-error.svg`, title: i("bbm.video.previewError.title"), text: i("bbm.video.previewError.text") }),
+    /* @__PURE__ */ o(p, { variant: "ghost", color: "primary", onClick: f, className: "align-items-start mt-16", children: [
+      i("bbm.video.useEmbedCode"),
       " ",
-      /* @__PURE__ */ jsx(Icon, { name: "arrow-right" })
+      /* @__PURE__ */ r(c, { name: "arrow-right" })
     ] })
-  ] }) : /* @__PURE__ */ jsx("div", { className: "d-flex my-16 align-items-start", children: /* @__PURE__ */ jsxs(Button, { variant: "ghost", color: "primary", onClick: handleSwitchToEmbedderClick, className: "align-items-start", children: [
-    t("bbm.video.useEmbedCode"),
+  ] }) : /* @__PURE__ */ r("div", { className: "d-flex my-16 align-items-start", children: /* @__PURE__ */ o(p, { variant: "ghost", color: "primary", onClick: f, className: "align-items-start", children: [
+    i("bbm.video.useEmbedCode"),
     " ",
-    /* @__PURE__ */ jsx(Icon, { name: "arrow-right" })
+    /* @__PURE__ */ r(c, { name: "arrow-right" })
   ] }) });
-  return /* @__PURE__ */ jsxs("div", { className: "d-flex flex-column flex-fill video-embed", children: [
-    /* @__PURE__ */ jsxs("div", { className: "mb-8 d-flex", children: [
-      /* @__PURE__ */ jsx(Icon, { name: "globe", className: "me-8" }),
-      t("bbm.video.url.title")
+  return /* @__PURE__ */ o("div", { className: "d-flex flex-column flex-fill video-embed", children: [
+    /* @__PURE__ */ o("div", { className: "mb-8 d-flex", children: [
+      /* @__PURE__ */ r(c, { name: "globe", className: "me-8" }),
+      i("bbm.video.url.title")
     ] }),
-    /* @__PURE__ */ jsx(FormControl, { id: formControlId, children: /* @__PURE__ */ jsx(Input, { size: "md", type: "text", placeholder: t("bbm.video.url.placeholder"), onChange: handleUrlChange }) }),
-    renderContent()
+    /* @__PURE__ */ r(V, { id: y, children: /* @__PURE__ */ r(k, { size: "md", type: "text", placeholder: i("bbm.video.url.placeholder"), onChange: P }) }),
+    L()
   ] });
 };
 export {
-  VideoEmbed as default
+  O as default
 };
+//# sourceMappingURL=VideoEmbed.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VideoEmbed.js","sources":["../../../../src/modules/multimedia/VideoEmbed/VideoEmbed.tsx"],"sourcesContent":["import { useEffect, useId, useState } from 'react';\n\nimport { Embedder, odeServices } from '@edifice.io/ts-client';\nimport { useTranslation } from 'react-i18next';\n\nimport {\n  Button,\n  EmptyScreen,\n  FormControl,\n  Icon,\n  Image,\n  Input,\n} from '../../../components';\nimport { usePaths } from '../../../core';\nimport { useDebounce } from '../../../hooks';\nimport { useMediaLibraryContext } from '../MediaLibrary/MediaLibraryContext';\n\nexport interface VideoEmbedProps {\n  onSuccess: (resource?: string) => void;\n}\n\nconst VideoEmbed = ({ onSuccess }: VideoEmbedProps) => {\n  const { t } = useTranslation();\n  const { switchType } = useMediaLibraryContext();\n\n  const [url, setUrl] = useState<string>();\n  const [embedVideo, setEmbedVideo] = useState<string>();\n  const [embedder, setEmbedder] = useState<Embedder | undefined>(undefined);\n  const [whiteListProvider, setWhiteListProvider] = useState<Embedder[]>();\n  const debounceChangeUrl = useDebounce<string>(url || '', 300);\n  const formControlId = useId();\n\n  const [imagePath] = usePaths();\n\n  useEffect(() => {\n    initWhiteListProvider();\n  }, []);\n\n  useEffect(() => {\n    if (whiteListProvider && debounceChangeUrl) {\n      const embedderFound = odeServices\n        .embedder()\n        .getProviderFromUrl(whiteListProvider, debounceChangeUrl);\n      if (embedderFound) {\n        setEmbedder(embedderFound);\n        const embedVideo = odeServices\n          .embedder()\n          .getEmbedCodeForProvider(embedderFound, debounceChangeUrl);\n        setEmbedVideo(embedVideo);\n        onSuccess(embedVideo);\n      } else {\n        setEmbedder(undefined);\n        onSuccess();\n      }\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [debounceChangeUrl, whiteListProvider]);\n\n  const initWhiteListProvider = async () => {\n    const whiteListProviderResponse = await Promise.all([\n      odeServices.embedder().getDefault(),\n      odeServices.embedder().getCustom(),\n    ]).then((results) => results.flat());\n    setWhiteListProvider(whiteListProviderResponse);\n  };\n\n  function handleUrlChange(event: React.ChangeEvent<HTMLInputElement>) {\n    const url: string = event.currentTarget.value;\n    setUrl(url);\n    onSuccess(url?.length ? url : undefined);\n  }\n\n  function handleSwitchToEmbedderClick() {\n    switchType('embedder');\n  }\n\n  const renderContent = () => {\n    if (debounceChangeUrl) {\n      if (embedder) {\n        return (\n          <div className=\"mx-auto mt-16\">\n            <div className=\"video-embed-provider d-flex align-items-center\">\n              <Image\n                src={embedder.logo}\n                alt={'Logo ' + embedder.displayName}\n                className=\"video-embed-provider-logo\"\n              ></Image>\n              {embedder.displayName}\n            </div>\n            {embedVideo && (\n              <div\n                className=\"video-embed-preview mt-12\"\n                dangerouslySetInnerHTML={{\n                  __html: embedVideo,\n                }}\n              ></div>\n            )}\n          </div>\n        );\n      } else {\n        return (\n          <div className=\"d-flex flex-column align-items-center m-16\">\n            <EmptyScreen\n              imageSrc={`${imagePath}/emptyscreen/illu-error.svg`}\n              title={t('bbm.video.previewError.title')}\n              text={t('bbm.video.previewError.text')}\n            />\n            <Button\n              variant=\"ghost\"\n              color=\"primary\"\n              onClick={handleSwitchToEmbedderClick}\n              className=\"align-items-start mt-16\"\n            >\n              {t('bbm.video.useEmbedCode')} <Icon name=\"arrow-right\" />\n            </Button>\n          </div>\n        );\n      }\n    } else {\n      return (\n        <div className=\"d-flex my-16 align-items-start\">\n          <Button\n            variant=\"ghost\"\n            color=\"primary\"\n            onClick={handleSwitchToEmbedderClick}\n            className=\"align-items-start\"\n          >\n            {t('bbm.video.useEmbedCode')} <Icon name=\"arrow-right\" />\n          </Button>\n        </div>\n      );\n    }\n  };\n\n  return (\n    <div className=\"d-flex flex-column flex-fill video-embed\">\n      <div className=\"mb-8 d-flex\">\n        <Icon name=\"globe\" className=\"me-8\" />\n        {t('bbm.video.url.title')}\n      </div>\n      <FormControl id={formControlId}>\n        <Input\n          size=\"md\"\n          type=\"text\"\n          placeholder={t('bbm.video.url.placeholder')}\n          onChange={handleUrlChange}\n        />\n      </FormControl>\n      {renderContent()}\n    </div>\n  );\n};\n\nexport default VideoEmbed;\n"],"names":["VideoEmbed","onSuccess","t","useTranslation","switchType","useMediaLibraryContext","url","setUrl","useState","embedVideo","setEmbedVideo","embedder","setEmbedder","undefined","whiteListProvider","setWhiteListProvider","debounceChangeUrl","useDebounce","formControlId","useId","imagePath","usePaths","useEffect","initWhiteListProvider","embedderFound","odeServices","getProviderFromUrl","getEmbedCodeForProvider","whiteListProviderResponse","Promise","all","getDefault","getCustom","then","results","flat","handleUrlChange","event","currentTarget","value","length","handleSwitchToEmbedderClick","renderContent","jsxs","jsx","Image","logo","displayName","__html","EmptyScreen","Button","Icon","FormControl","Input"],"mappings":"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"}

package/dist/modules/multimedia/VideoRecorder/VideoRecorder.d.ts

@@ -1,4 +1,4 @@
-import { WorkspaceElement } from 'edifice-ts-client';
+import { WorkspaceElement } from '@edifice.io/ts-client';
 export interface VideoRecorderProps {
     appCode: string;
     caption?: string;

package/dist/modules/multimedia/VideoRecorder/VideoRecorder.js

@@ -1,169 +1,169 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { forwardRef, useState, useRef, useImperativeHandle, useEffect, useCallback } from "react";
-import { odeServices } from "edifice-ts-client";
-import { useTranslation } from "react-i18next";
-import useBrowserInfo from "../../../hooks/useBrowserInfo/useBrowserInfo.js";
-import useUpload from "../../../core/useUpload/useUpload.js";
-import { getBestSupportedMimeType } from "../../../utils/video.js";
-import { Select } from "../../../components/Select/Select.js";
-import { Icon } from "../../../components/Icon/Icon.js";
-import { FormControl } from "../../../components/Form/FormControl.js";
-import { Label } from "../../../components/Label/Label.js";
-import { convertMsToMS } from "../../../utils/time.js";
-import { Toolbar } from "../../../components/Toolbar/Toolbar.js";
-import { LoadingScreen } from "../../../components/LoadingScreen/LoadingScreen.js";
-const VIDEO_HEIGHT = 9, VIDEO_WIDTH = 16, VideoRecorder = /* @__PURE__ */ forwardRef(({
-  appCode,
-  caption,
-  onSuccess,
-  onError,
-  onRecordUpdated,
-  hideSaveAction = !1
-}, ref) => {
-  const [maxDuration, setMaxDuration] = useState(18e4), [inputDevices, setInputDevices] = useState([]), [recording, setRecording] = useState(!1), [recorded, setRecorded] = useState(!1), [playing, setPlaying] = useState(!1), [saving, setSaving] = useState(!1), [saved, setSaved] = useState(!1), [mediaStreamConstraints, setMediaStreamConstraints] = useState({
+import { jsx as i, jsxs as m, Fragment as G } from "react/jsx-runtime";
+import { forwardRef as pe, useState as n, useRef as W, useImperativeHandle as ve, useEffect as f, useCallback as N } from "react";
+import { odeServices as fe } from "@edifice.io/ts-client";
+import { useTranslation as be } from "react-i18next";
+import he from "../../../hooks/useBrowserInfo/useBrowserInfo.js";
+import ye from "../../../core/useUpload/useUpload.js";
+import { getBestSupportedMimeType as ge } from "../../../utils/video.js";
+import { Select as we } from "../../../components/Select/Select.js";
+import { Icon as u } from "../../../components/Icon/Icon.js";
+import { FormControl as Ie } from "../../../components/Form/FormControl.js";
+import { Label as ke } from "../../../components/Label/Label.js";
+import { convertMsToMS as w } from "../../../utils/time.js";
+import { Toolbar as Ce } from "../../../components/Toolbar/Toolbar.js";
+import { LoadingScreen as Te } from "../../../components/LoadingScreen/LoadingScreen.js";
+const L = 9, V = 16, He = /* @__PURE__ */ pe(({
+  appCode: J,
+  caption: K,
+  onSuccess: I,
+  onError: Q,
+  onRecordUpdated: h,
+  hideSaveAction: X = !1
+}, Y) => {
+  const [O, Z] = n(18e4), [k, C] = n([]), [d, T] = n(!1), [l, j] = n(!1), [v, y] = n(!1), [p, R] = n(!1), [$, S] = n(!1), [U, ee] = n({
     audio: !0,
     video: {
       facingMode: "environment",
-      aspectRatio: VIDEO_WIDTH / VIDEO_HEIGHT
+      aspectRatio: V / L
     }
-  }), [stream, setStream] = useState(), [mimeType, setMimeType] = useState(""), [recordedChunks, setRecordedChunks] = useState([]), [recordedVideo, setRecordedVideo] = useState(), [recordedTime, setRecordedTime] = useState(0), [playedTime, setPlayedTime] = useState(0), videoRef = useRef(null), recorderRef = useRef(null), {
-    uploadBlob
-  } = useUpload(void 0, appCode), {
-    device
-  } = useBrowserInfo(navigator.userAgent);
-  useImperativeHandle(ref, () => ({
-    save: handleSave
+  }), [c, P] = n(), [re, oe] = n(""), [x, B] = n([]), [H, z] = n(), [b, q] = n(0), [te, A] = n(0), o = W(null), a = W(null), {
+    uploadBlob: ie
+  } = ye(void 0, J), {
+    device: ne
+  } = he(navigator.userAgent);
+  ve(Y, () => ({
+    save: _
   }));
   const {
     t
-  } = useTranslation();
-  useEffect(() => {
-    initMaxDuration(), initInputDevices();
-  }, []), useEffect(() => (stream || enableStream(mediaStreamConstraints), () => {
-    stream && stream.getTracks().forEach((track) => track.stop());
-  }), [stream]), useEffect(() => {
-    if (recordedChunks.length && !recording && videoRef.current) {
-      const finalVideo = new Blob(recordedChunks, {
-        type: mimeType
+  } = be();
+  f(() => {
+    ae(), se();
+  }, []), f(() => (c || D(U), () => {
+    c && c.getTracks().forEach((r) => r.stop());
+  }), [c]), f(() => {
+    if (x.length && !d && o.current) {
+      const r = new Blob(x, {
+        type: re
       });
-      if (setRecordedVideo(finalVideo), onRecordUpdated) {
-        const videoUrl = window.URL.createObjectURL(finalVideo);
-        onRecordUpdated(videoUrl);
+      if (z(r), h) {
+        const e = window.URL.createObjectURL(r);
+        h(e);
       }
-      videoRef.current.autoplay = !1, videoRef.current.srcObject = null, videoRef.current.src = window.URL.createObjectURL(finalVideo);
+      o.current.autoplay = !1, o.current.srcObject = null, o.current.src = window.URL.createObjectURL(r);
     }
-  }, [recording, recordedChunks]), useEffect(() => {
-    if (recording) {
-      const startedAt = Date.now(), timer = window.setInterval(
+  }, [d, x]), f(() => {
+    if (d) {
+      const r = Date.now(), e = window.setInterval(
         // Compute exact elapsed time by diffing the start time.
-        () => setRecordedTime(Date.now() - startedAt),
+        () => q(Date.now() - r),
         500
       );
       return () => {
-        window.clearInterval(timer);
+        window.clearInterval(e);
       };
     }
-  }, [recording]), useEffect(() => {
-    if (playing) {
-      const timer = window.setInterval(() => setPlayedTime((prev) => prev + 500), 500);
+  }, [d]), f(() => {
+    if (v) {
+      const r = window.setInterval(() => A((e) => e + 500), 500);
       return () => {
-        window.clearInterval(timer);
+        window.clearInterval(r);
       };
     }
-  }, [playing]);
-  const initMaxDuration = async () => {
-    const videoConfResponse = await odeServices.video().getVideoConf();
-    setMaxDuration((videoConfResponse.maxDuration ?? 3) * 60 * 1e3);
-  }, initInputDevices = async () => {
-    const videoDevices = (await navigator.mediaDevices.enumerateDevices()).filter((device2) => device2.kind === "videoinput");
-    switch (device.type) {
+  }, [v]);
+  const ae = async () => {
+    const r = await fe.video().getVideoConf();
+    Z((r.maxDuration ?? 3) * 60 * 1e3);
+  }, se = async () => {
+    const e = (await navigator.mediaDevices.enumerateDevices()).filter((s) => s.kind === "videoinput");
+    switch (ne.type) {
       case "mobile":
       case "tablet": {
-        const backCamera = {
+        const s = {
           deviceId: "environment",
           label: t("video.back.camera"),
           groupId: "",
           kind: "videoinput"
-        }, frontCamera = {
+        }, g = {
           deviceId: "user",
           label: t("video.front.camera"),
           groupId: "",
           kind: "videoinput"
         };
-        (videoDevices == null ? void 0 : videoDevices.length) > 1 ? setInputDevices([backCamera, frontCamera]) : setInputDevices([backCamera]);
+        (e == null ? void 0 : e.length) > 1 ? C([s, g]) : C([s]);
         break;
       }
       default:
-        setInputDevices(videoDevices);
+        C(e);
         break;
     }
-  }, enableStream = async (mediaStreamConstraints2) => {
+  }, D = async (r) => {
     try {
-      const mediaStream = await navigator.mediaDevices.getUserMedia(mediaStreamConstraints2);
-      setStream(mediaStream), videoRef.current && (videoRef.current.src && (window.URL.revokeObjectURL(videoRef.current.src), videoRef.current.src = ""), videoRef.current.srcObject = mediaStream, videoRef.current.autoplay = !0, videoRef.current.volume = 1, videoRef.current.muted = !0);
-    } catch (err) {
-      console.error(err);
+      const e = await navigator.mediaDevices.getUserMedia(r);
+      P(e), o.current && (o.current.src && (window.URL.revokeObjectURL(o.current.src), o.current.src = ""), o.current.srcObject = e, o.current.autoplay = !0, o.current.volume = 1, o.current.muted = !0);
+    } catch (e) {
+      console.error(e);
     }
-  }, handleRecord = useCallback(() => {
-    setRecording(!0), videoRef && videoRef.current && (videoRef.current.muted = !0);
-    const mimeType2 = getBestSupportedMimeType();
-    setMimeType(mimeType2), stream && (recorderRef.current = new MediaRecorder(stream, {
-      mimeType: mimeType2
-    }), recorderRef.current.ondataavailable = ({
-      data
+  }, ce = N(() => {
+    T(!0), o && o.current && (o.current.muted = !0);
+    const r = ge();
+    oe(r), c && (a.current = new MediaRecorder(c, {
+      mimeType: r
+    }), a.current.ondataavailable = ({
+      data: e
     }) => {
-      data.size > 0 && setRecordedChunks((prev) => [...prev, data]);
-    }, recorderRef.current.onerror = (event) => console.error(event), recorderRef.current.start(1e3));
-  }, [stream]), handleStop = useCallback(() => {
-    var _a;
-    setRecording(!1), setRecorded(!0), ((_a = recorderRef.current) == null ? void 0 : _a.state) === "recording" && (recorderRef.current.requestData(), recorderRef.current.stop());
-  }, [recorderRef]), handlePlayPause = useCallback(() => {
-    var _a, _b;
-    videoRef && videoRef.current && (videoRef.current.muted = !1), playing ? ((_b = videoRef == null ? void 0 : videoRef.current) == null || _b.pause(), setPlaying(!1)) : ((_a = videoRef == null ? void 0 : videoRef.current) == null || _a.play(), setPlaying(!0));
-  }, [playing]), handleReset = () => {
-    setRecorded(!1), setRecording(!1), setPlaying(!1), setSaved(!1), setRecordedTime(0), setRecordedChunks([]), setRecordedVideo(void 0), enableStream(mediaStreamConstraints), onRecordUpdated && onRecordUpdated();
-  }, handleSave = async () => {
-    if (setSaving(!0), !recordedVideo) {
+      e.size > 0 && B((s) => [...s, e]);
+    }, a.current.onerror = (e) => console.error(e), a.current.start(1e3));
+  }, [c]), M = N(() => {
+    var r;
+    T(!1), j(!0), ((r = a.current) == null ? void 0 : r.state) === "recording" && (a.current.requestData(), a.current.stop());
+  }, [a]), F = N(() => {
+    var r, e;
+    o && o.current && (o.current.muted = !1), v ? ((e = o == null ? void 0 : o.current) == null || e.pause(), y(!1)) : ((r = o == null ? void 0 : o.current) == null || r.play(), y(!0));
+  }, [v]), de = () => {
+    j(!1), T(!1), y(!1), S(!1), q(0), B([]), z(void 0), D(U), h && h();
+  }, _ = async () => {
+    if (R(!0), !H) {
       console.error("Error while saving video: recorded video is undefined.");
       return;
     }
-    const resVideo = await uploadBlob(recordedVideo, {
-      duration: recordedTime
+    const r = await ie(H, {
+      duration: b
     });
-    if (resVideo != null)
-      return onSuccess == null || onSuccess([resVideo]), setSaving(!1), setSaved(!0), [resVideo];
-    onError("Error while uploading video"), setSaving(!1), setSaved(!0);
-  }, handleEnded = () => {
-    setPlaying(!1), setPlayedTime(0), videoRef.current && (videoRef.current.currentTime = 0);
-  }, handleInputDeviceChange = (option) => {
-    var _a;
-    const selectedDevice = inputDevices.find((inputDevice) => inputDevice.label === option);
-    let mediaStreamConstraints2 = {};
-    selectedDevice != null && selectedDevice.deviceId ? ((selectedDevice == null ? void 0 : selectedDevice.deviceId) === "environment" || (selectedDevice == null ? void 0 : selectedDevice.deviceId) === "user" ? mediaStreamConstraints2 = {
+    if (r != null)
+      return I == null || I([r]), R(!1), S(!0), [r];
+    Q("Error while uploading video"), R(!1), S(!0);
+  }, le = () => {
+    y(!1), A(0), o.current && (o.current.currentTime = 0);
+  }, me = (r) => {
+    var g;
+    const e = k.find((E) => E.label === r);
+    let s = {};
+    e != null && e.deviceId ? ((e == null ? void 0 : e.deviceId) === "environment" || (e == null ? void 0 : e.deviceId) === "user" ? s = {
       audio: !0,
       video: {
-        aspectRatio: VIDEO_WIDTH / VIDEO_HEIGHT,
-        facingMode: selectedDevice == null ? void 0 : selectedDevice.deviceId
+        aspectRatio: V / L,
+        facingMode: e == null ? void 0 : e.deviceId
       }
-    } : mediaStreamConstraints2 = {
+    } : s = {
       audio: !0,
       video: {
-        aspectRatio: VIDEO_WIDTH / VIDEO_HEIGHT,
-        deviceId: selectedDevice.deviceId
+        aspectRatio: V / L,
+        deviceId: e.deviceId
       }
-    }, setMediaStreamConstraints(mediaStreamConstraints2), stream && (((_a = recorderRef.current) == null ? void 0 : _a.state) === "recording" && (recorderRef.current.requestData(), recorderRef.current.stop()), stream.getTracks().forEach((track) => track.stop()), setStream(void 0)), enableStream(mediaStreamConstraints2)) : console.error("Selected input device id is null");
+    }, ee(s), c && (((g = a.current) == null ? void 0 : g.state) === "recording" && (a.current.requestData(), a.current.stop()), c.getTracks().forEach((E) => E.stop()), P(void 0)), D(s)) : console.error("Selected input device id is null");
   };
-  useEffect(() => {
-    recordedTime >= maxDuration && handleStop();
-  }, [recordedTime, handleStop]);
-  const toolbarItems = [{
+  f(() => {
+    b >= O && M();
+  }, [b, M]);
+  const ue = [{
     type: "icon",
     name: "record",
     props: {
-      icon: /* @__PURE__ */ jsx(Icon, { name: "record", color: recording || recorded ? "" : "red" }),
+      icon: /* @__PURE__ */ i(u, { name: "record", color: d || l ? "" : "red" }),
       color: "danger",
-      disabled: recording || recorded || saving,
-      onClick: handleRecord,
+      disabled: d || l || p,
+      onClick: ce,
       "aria-label": t("bbm.video.record.start")
     },
     tooltip: t("bbm.video.record.start")
@@ -171,31 +171,31 @@ const VIDEO_HEIGHT = 9, VIDEO_WIDTH = 16, VideoRecorder = /* @__PURE__ */ forwar
     type: "icon",
     name: "stop",
     props: {
-      icon: /* @__PURE__ */ jsx(Icon, { name: "record-stop" }),
-      disabled: !recording || recorded || saving,
-      onClick: handleStop,
+      icon: /* @__PURE__ */ i(u, { name: "record-stop" }),
+      disabled: !d || l || p,
+      onClick: M,
       "aria-label": t("bbm.video.record.stop")
     },
     tooltip: t("bbm.video.record.stop")
   }, {
     type: "icon",
     name: "play",
-    visibility: playing ? "hide" : "show",
+    visibility: v ? "hide" : "show",
     props: {
-      icon: /* @__PURE__ */ jsx(Icon, { name: "play-filled" }),
-      disabled: !recorded || saving,
-      onClick: handlePlayPause,
+      icon: /* @__PURE__ */ i(u, { name: "play-filled" }),
+      disabled: !l || p,
+      onClick: F,
       "aria-label": t("bbm.video.play.start")
     },
     tooltip: t("bbm.video.play.start")
   }, {
     type: "icon",
     name: "pause",
-    visibility: playing ? "show" : "hide",
+    visibility: v ? "show" : "hide",
     props: {
-      icon: /* @__PURE__ */ jsx(Icon, { name: "pause" }),
-      disabled: !recorded || saving,
-      onClick: handlePlayPause,
+      icon: /* @__PURE__ */ i(u, { name: "pause" }),
+      disabled: !l || p,
+      onClick: F,
       "aria-label": t("bbm.video.play.pause")
     },
     tooltip: t("bbm.video.play.pause")
@@ -205,55 +205,56 @@ const VIDEO_HEIGHT = 9, VIDEO_WIDTH = 16, VideoRecorder = /* @__PURE__ */ forwar
     type: "icon",
     name: "reset",
     props: {
-      icon: /* @__PURE__ */ jsx(Icon, { name: "refresh" }),
-      disabled: !recorded || saving,
-      onClick: handleReset,
+      icon: /* @__PURE__ */ i(u, { name: "refresh" }),
+      disabled: !l || p,
+      onClick: de,
       "aria-label": t("bbm.video.record.reset")
     },
     tooltip: t("bbm.video.record.reset")
   }, {
     type: "icon",
     name: "save",
-    visibility: hideSaveAction ? "hide" : "show",
+    visibility: X ? "hide" : "show",
     props: {
-      icon: /* @__PURE__ */ jsx(Icon, { name: "save" }),
-      disabled: !recorded || saving || saved,
-      onClick: handleSave,
+      icon: /* @__PURE__ */ i(u, { name: "save" }),
+      disabled: !l || p || $,
+      onClick: _,
       "aria-label": t("bbm.video.record.save")
     },
     tooltip: t("bbm.video.record.save")
   }];
-  return /* @__PURE__ */ jsxs("div", { className: "video-recorder d-flex flex-fill flex-column align-items-center pb-8", children: [
-    /* @__PURE__ */ jsx("div", { className: "video-recorder-caption d-none d-md-block", children: caption }),
-    inputDevices.length > 1 && /* @__PURE__ */ jsx("div", { className: "video-recorder-devices mb-12", children: /* @__PURE__ */ jsxs(FormControl, { id: "selectInputDevice", children: [
-      /* @__PURE__ */ jsx(Label, { className: "d-none d-md-block", children: t("bbm.video.record.select.devices.label") }),
-      /* @__PURE__ */ jsx(Select, { placeholderOption: t("bbm.video.record.select.devices.placeholder"), options: inputDevices.map((videoInputDevice) => videoInputDevice.label), onValueChange: handleInputDeviceChange })
+  return /* @__PURE__ */ m("div", { className: "video-recorder d-flex flex-fill flex-column align-items-center pb-8", children: [
+    /* @__PURE__ */ i("div", { className: "video-recorder-caption d-none d-md-block", children: K }),
+    k.length > 1 && /* @__PURE__ */ i("div", { className: "video-recorder-devices mb-12", children: /* @__PURE__ */ m(Ie, { id: "selectInputDevice", children: [
+      /* @__PURE__ */ i(ke, { className: "d-none d-md-block", children: t("bbm.video.record.select.devices.label") }),
+      /* @__PURE__ */ i(we, { placeholderOption: t("bbm.video.record.select.devices.placeholder"), options: k.map((r) => r.label), onValueChange: me })
     ] }) }),
-    /* @__PURE__ */ jsxs("div", { className: "video-recorder-video-container position-relative align-self-stretch", children: [
-      /* @__PURE__ */ jsx("video", { ref: videoRef, playsInline: !0, autoPlay: !0, controls: !1, muted: !0, onEnded: handleEnded, className: "rounded", children: /* @__PURE__ */ jsx("track", { default: !0, kind: "captions", srcLang: "fr", src: "" }) }),
-      (recording || recorded) && /* @__PURE__ */ jsxs("div", { className: "video-recorder-time d-flex align-items-center font-monospace fs-6 text-bg-dark rounded", children: [
-        recording && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(Icon, { name: "record", size: "12", color: "red", className: "me-4" }),
-          /* @__PURE__ */ jsxs("span", { children: [
-            convertMsToMS(recordedTime),
+    /* @__PURE__ */ m("div", { className: "video-recorder-video-container position-relative align-self-stretch", children: [
+      /* @__PURE__ */ i("video", { ref: o, playsInline: !0, autoPlay: !0, controls: !1, muted: !0, onEnded: le, className: "rounded", children: /* @__PURE__ */ i("track", { default: !0, kind: "captions", srcLang: "fr", src: "" }) }),
+      (d || l) && /* @__PURE__ */ m("div", { className: "video-recorder-time d-flex align-items-center font-monospace fs-6 text-bg-dark rounded", children: [
+        d && /* @__PURE__ */ m(G, { children: [
+          /* @__PURE__ */ i(u, { name: "record", size: "12", color: "red", className: "me-4" }),
+          /* @__PURE__ */ m("span", { children: [
+            w(b),
             "/",
-            convertMsToMS(maxDuration)
+            w(O)
           ] })
         ] }),
-        recorded && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(Icon, { name: "record-video", size: "14", className: "me-4" }),
-          /* @__PURE__ */ jsxs("span", { children: [
-            convertMsToMS(playedTime),
+        l && /* @__PURE__ */ m(G, { children: [
+          /* @__PURE__ */ i(u, { name: "record-video", size: "14", className: "me-4" }),
+          /* @__PURE__ */ m("span", { children: [
+            w(te),
             "/",
-            convertMsToMS(recordedTime)
+            w(b)
           ] })
         ] })
       ] }),
-      stream && /* @__PURE__ */ jsx(Toolbar, { items: toolbarItems, className: "position-absolute bottom-0 start-50 bg-white" })
+      c && /* @__PURE__ */ i(Ce, { items: ue, className: "position-absolute bottom-0 start-50 bg-white" })
     ] }),
-    saving && /* @__PURE__ */ jsx(LoadingScreen, { position: !1, caption: t("bbm.video.save.loader.caption") })
+    p && /* @__PURE__ */ i(Te, { position: !1, caption: t("bbm.video.save.loader.caption") })
   ] });
 });
 export {
-  VideoRecorder as default
+  He as default
 };
+//# sourceMappingURL=VideoRecorder.js.map