@edifice.io/react 2.0.0-develop-rc.14 → 2.0.0-develop-rc.16

package/dist/modules/multimedia/MediaLibrary/innertabs/Upload.js

@@ -0,0 +1,34 @@
+import { jsx } from "react/jsx-runtime";
+import { useMediaLibraryContext } from "../MediaLibraryContext.js";
+import Dropzone from "../../../../components/Dropzone/Dropzone.js";
+import UploadFiles from "../../UploadFiles/UploadFiles.js";
+const acceptedTypes = (type) => {
+  const acceptedTypes2 = [];
+  switch (type) {
+    case "audio":
+      acceptedTypes2.push("audio/*");
+      break;
+    case "video":
+      acceptedTypes2.push("video/*");
+      break;
+    case "image":
+      acceptedTypes2.push("image/png"), acceptedTypes2.push("image/jpeg"), acceptedTypes2.push("image/webp"), acceptedTypes2.push("image/gif"), acceptedTypes2.push("image/avif");
+      break;
+  }
+  return acceptedTypes2;
+}, Upload = () => {
+  const {
+    type,
+    visibility,
+    multiple,
+    setResult,
+    setResultCounter,
+    setCancellable
+  } = useMediaLibraryContext(), handleOnFilesChange = (uploadedFiles) => {
+    uploadedFiles.length ? (setCancellable(uploadedFiles), setResultCounter(uploadedFiles.length), setResult(uploadedFiles)) : (setCancellable([]), setResultCounter(void 0), setResult(void 0));
+  };
+  return /* @__PURE__ */ jsx("div", { className: "py-8 flex-grow-1", children: /* @__PURE__ */ jsx(Dropzone, { multiple, accept: acceptedTypes(type ?? "embedder"), children: /* @__PURE__ */ jsx(UploadFiles, { onFilesChange: handleOnFilesChange, visibility }) }) });
+};
+export {
+  Upload
+};

package/dist/modules/multimedia/MediaLibrary/innertabs/VideoEmbedder.js

@@ -0,0 +1,15 @@
+import { jsx } from "react/jsx-runtime";
+import VideoEmbed from "../../VideoEmbed/VideoEmbed.js";
+import { useMediaLibraryContext } from "../MediaLibraryContext.js";
+const VideoEmbedder = () => {
+  const {
+    switchType,
+    setResult
+  } = useMediaLibraryContext();
+  return /* @__PURE__ */ jsx(VideoEmbed, { switchType, onSuccess: (ressource) => {
+    setResult(ressource);
+  } });
+};
+export {
+  VideoEmbedder
+};

package/dist/modules/multimedia/MediaLibrary/innertabs/Workspace.js

@@ -0,0 +1,31 @@
+import { jsx } from "react/jsx-runtime";
+import { useMediaLibraryContext } from "../MediaLibraryContext.js";
+import Workspace$1 from "../../Workspace/Workspace.js";
+const Workspace = () => {
+  const {
+    type,
+    setResultCounter,
+    setResult,
+    multiple,
+    visibility
+  } = useMediaLibraryContext();
+  function getDocumentRoleFilter() {
+    switch (type) {
+      case "image":
+        return "img";
+      case "audio":
+        return "audio";
+      case "video":
+        return "video";
+      default:
+        return null;
+    }
+  }
+  function handleSelect(result) {
+    setResultCounter(result.length), result.length ? setResult(result) : setResult();
+  }
+  return /* @__PURE__ */ jsx(Workspace$1, { roles: getDocumentRoleFilter(), onSelect: handleSelect, multiple, className: "border rounded overflow-y-auto", defaultFolder: visibility, showPublicFolder: visibility === "public" });
+};
+export {
+  Workspace
+};

package/dist/modules/multimedia/UploadCard/UploadCard._.d.ts

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { default as UploadCard } from './UploadCard';
+declare const meta: Meta<typeof UploadCard>;
+export default meta;
+type Story = StoryObj<typeof UploadCard>;
+export declare const Base: Story;
+export declare const IsLoading: Story;
+export declare const IsSuccess: Story;
+export declare const IsError: Story;

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

@@ -0,0 +1,43 @@
+import { CardProps } from '../../../components';
+import { Status } from '../../../types';
+export interface UploadItemProps {
+    /**
+     * File's image
+     * */
+    src: string;
+    /**
+     * File's name
+     * */
+    name: string;
+    /**
+     * File's info
+     * */
+    info?: {
+        type: string;
+        weight: string;
+    };
+}
+export interface UploadCardProps extends CardProps {
+    /**
+     * UploadItemProps
+     * */
+    item: UploadItemProps;
+    /**
+     * idle, loading, success, warning, error
+     * */
+    status?: Status;
+    /**
+     * Delete callback
+     * */
+    onDelete?: () => void;
+    /**
+     * Edit callback
+     * */
+    onEdit?: () => void;
+    /**
+     * Retry callback
+     * */
+    onRetry?: () => void;
+}
+declare const UploadCard: ({ item, status, isClickable, isSelectable, onDelete, onEdit, onRetry, }: UploadCardProps) => import("react/jsx-runtime").JSX.Element;
+export default UploadCard;

package/dist/modules/multimedia/UploadCard/UploadCard.js

@@ -0,0 +1,75 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import SvgIconClose from "../../icons/components/IconClose.js";
+import SvgIconReset from "../../icons/components/IconReset.js";
+import SvgIconSuccessOutline from "../../icons/components/IconSuccessOutline.js";
+import SvgIconWand from "../../icons/components/IconWand.js";
+import Button from "../../../components/Button/Button.js";
+import Image from "../../../components/Image/Image.js";
+import Tooltip from "../../../components/Tooltip/Tooltip.js";
+import Loading from "../../../components/Loading/Loading.js";
+import Card from "../../../components/Card/Card.js";
+import IconButton from "../../../components/Button/IconButton.js";
+import usePaths from "../../../hooks/usePaths/usePaths.js";
+const UploadCard = ({
+  item,
+  status = "idle",
+  isClickable = !1,
+  isSelectable = !1,
+  onDelete,
+  onEdit,
+  onRetry
+}) => {
+  const [imagePath] = usePaths(), {
+    t
+  } = useTranslation(), {
+    src,
+    name,
+    info
+  } = item, isIdle = status === "idle", isLoading = status === "loading", isSuccess = status === "success", isTypeImage = info == null ? void 0 : info.type.startsWith("image"), imgPlaceholder = `${imagePath}/common/image-placeholder.png`, defaultMapping = {
+    text: "",
+    context: null,
+    image: /* @__PURE__ */ jsx("img", { src: imgPlaceholder, alt: "", width: "48", height: "48" })
+  }, mapping = {
+    error: {
+      text: /* @__PURE__ */ jsx("strong", { children: /* @__PURE__ */ jsx("small", { className: "text-danger caption", children: t("tiptap.upload.error") }) }),
+      context: /* @__PURE__ */ jsx(Button, { leftIcon: /* @__PURE__ */ jsx(SvgIconReset, {}), variant: "ghost", color: "tertiary", onClick: onRetry, children: t("tiptap.upload.retry") }),
+      image: /* @__PURE__ */ jsx(Image, { alt: "", src: `${imagePath}/common/image-status-error.svg`, objectFit: "cover" })
+    },
+    idle: defaultMapping,
+    loading: {
+      text: "",
+      context: /* @__PURE__ */ jsx(Tooltip, { message: t("tiptap.tooltip.upload.loading"), placement: "top", children: /* @__PURE__ */ jsx(Loading, { isLoading: !0, loadingPosition: "left", className: "text-secondary" }) }),
+      image: defaultMapping.image
+    },
+    warning: defaultMapping,
+    success: {
+      text: /* @__PURE__ */ jsxs("em", { children: [
+        info == null ? void 0 : info.type,
+        " ",
+        (info == null ? void 0 : info.weight) && `- ${info.weight}`
+      ] }),
+      context: /* @__PURE__ */ jsx(Tooltip, { message: t("tiptap.tooltip.upload.loaded"), placement: "top", children: /* @__PURE__ */ jsx(SvgIconSuccessOutline, { className: "text-success" }) }),
+      image: /* @__PURE__ */ jsx(Image, { alt: "", src: src ?? "", width: "48", objectFit: "cover", className: "rounded", style: {
+        aspectRatio: 1 / 1
+      } })
+    },
+    unknown: defaultMapping
+  }, canEditItem = () => isTypeImage && /* @__PURE__ */ jsx(Tooltip, { message: t("tiptap.tooltip.upload.edit"), placement: "top", children: /* @__PURE__ */ jsx(IconButton, { icon: /* @__PURE__ */ jsx(SvgIconWand, {}), variant: "ghost", "aria-label": t("tiptap.tooltip.upload.loading"), disabled: isLoading || !isSuccess, onClick: onEdit, color: "secondary" }) });
+  return /* @__PURE__ */ jsx(Card, { isClickable, isSelectable, className: "card-upload", children: /* @__PURE__ */ jsxs(Card.Body, { children: [
+    /* @__PURE__ */ jsx("div", { className: "card-image", children: mapping[status].image }),
+    /* @__PURE__ */ jsxs("div", { className: "text-truncate", children: [
+      /* @__PURE__ */ jsx(Card.Text, { children: name }),
+      /* @__PURE__ */ jsx(Card.Text, { className: "caption", children: mapping[status].text })
+    ] }),
+    !isIdle && /* @__PURE__ */ jsx("div", { className: "ms-auto", children: /* @__PURE__ */ jsxs("div", { className: "d-flex align-items-center gap-12", children: [
+      mapping[status].context,
+      !isIdle && /* @__PURE__ */ jsx("div", { className: "vr" }),
+      canEditItem(),
+      /* @__PURE__ */ jsx(Tooltip, { message: t("tiptap.tooltip.upload.delete"), placement: "top", children: /* @__PURE__ */ jsx(IconButton, { icon: /* @__PURE__ */ jsx(SvgIconClose, {}), variant: "ghost", "aria-label": t("tiptap.tooltip.upload.delete"), color: "tertiary", onClick: onDelete }) })
+    ] }) })
+  ] }) });
+};
+export {
+  UploadCard as default
+};

package/dist/modules/multimedia/UploadCard/index.d.ts

@@ -0,0 +1,2 @@
+export { default as UploadCard } from './UploadCard';
+export * from './UploadCard';

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

@@ -0,0 +1,9 @@
+import { WorkspaceElement, WorkspaceVisibility } from '@edifice.io/ts-client';
+declare const UploadFiles: {
+    ({ onFilesChange, visibility, }: {
+        onFilesChange: (uploadedFiles: WorkspaceElement[]) => void;
+        visibility?: WorkspaceVisibility;
+    }): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default UploadFiles;

package/dist/modules/multimedia/UploadFiles/UploadFiles.js

@@ -0,0 +1,56 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { customSize } from "@edifice.io/utilities";
+import { useRef, useEffect } from "react";
+import useUploadFiles from "../../../hooks/useUploadFiles/useUploadFiles.js";
+import UploadCard from "../UploadCard/UploadCard.js";
+import ImageEditor from "../ImageEditor/components/ImageEditor.js";
+const UploadFiles = ({
+  onFilesChange,
+  visibility = "protected"
+}) => {
+  const {
+    files,
+    uploadedFiles,
+    getUploadStatus,
+    uploadFile,
+    removeFile,
+    updateImage,
+    editingImage,
+    setEditingImage,
+    getUrl
+  } = useUploadFiles({
+    handleOnChange: onFilesChange,
+    application: "media-library",
+    visibility
+  }), fileBlobs = useRef(/* @__PURE__ */ new Map());
+  useEffect(() => {
+    const blobs = fileBlobs.current;
+    return () => {
+      blobs.forEach((url) => URL.revokeObjectURL(url)), blobs.clear();
+    };
+  }, []);
+  const renderItem = (file) => {
+    const src = file.type.startsWith("image") ? fileBlobs.current.get(file.name) : "";
+    return fileBlobs.current.has(file.name) || fileBlobs.current.set(file.name, URL.createObjectURL(file)), {
+      name: file.name,
+      info: {
+        type: file.type,
+        weight: customSize(file.size || 0, 1)
+      },
+      src
+    };
+  }, handleRemoveFile = (file) => {
+    const blobUrl = fileBlobs.current.get(file.name);
+    blobUrl && (URL.revokeObjectURL(blobUrl), fileBlobs.current.delete(file.name)), removeFile(file);
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    files.map((file) => {
+      const resource = uploadedFiles.find((uploadedFile) => uploadedFile.name === file.name);
+      return /* @__PURE__ */ jsx(UploadCard, { status: getUploadStatus(file), item: renderItem(file), onEdit: () => setEditingImage(resource), onRetry: () => uploadFile(file), onDelete: () => handleRemoveFile(file) }, file.name);
+    }),
+    editingImage && /* @__PURE__ */ jsx(ImageEditor, { altText: editingImage.alt, legend: editingImage.title, image: getUrl(editingImage, !0), isOpen: !!editingImage, onCancel: () => setEditingImage(void 0), onSave: updateImage, onError: console.error })
+  ] });
+};
+export {
+  UploadFiles as default
+};

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

@@ -0,0 +1,6 @@
+export interface VideoEmbedProps {
+    switchType?: (type: "embedder") => void;
+    onSuccess: (resource?: string) => void;
+}
+declare const VideoEmbed: ({ switchType, onSuccess }: VideoEmbedProps) => import("react/jsx-runtime").JSX.Element;
+export default VideoEmbed;

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

@@ -0,0 +1,76 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { useState, useId, useEffect } from "react";
+import { odeServices } from "@edifice.io/ts-client";
+import { useDebounce } from "@uidotdev/usehooks";
+import { useTranslation } from "react-i18next";
+import SvgIconArrowRight from "../../icons/components/IconArrowRight.js";
+import SvgIconGlobe from "../../icons/components/IconGlobe.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";
+import usePaths from "../../../hooks/usePaths/usePaths.js";
+const VideoEmbed = ({
+  switchType,
+  onSuccess
+}) => {
+  const {
+    t
+  } = useTranslation(), [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);
+      } else
+        setEmbedder(void 0), onSuccess();
+    }
+  }, [debounceChangeUrl, whiteListProvider]);
+  const initWhiteListProvider = async () => {
+    const whiteListProviderResponse = await Promise.all([odeServices.embedder().getDefault(), odeServices.embedder().getCustom()]).then((results) => results.flat());
+    setWhiteListProvider(whiteListProviderResponse);
+  };
+  function handleUrlChange(event) {
+    const url2 = event.currentTarget.value;
+    setUrl(url2), onSuccess(url2 != null && url2.length ? url2 : void 0);
+  }
+  function handleSwitchToEmbedderClick() {
+    switchType == null || switchType("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
+    ] }),
+    embedVideo && /* @__PURE__ */ jsx("div", { className: "video-embed-preview mt-12", dangerouslySetInnerHTML: {
+      __html: embedVideo
+    } })
+  ] }) : /* @__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") }),
+    switchType && /* @__PURE__ */ jsxs(Button, { variant: "ghost", color: "primary", onClick: handleSwitchToEmbedderClick, className: "align-items-start mt-16", children: [
+      t("bbm.video.useEmbedCode"),
+      " ",
+      /* @__PURE__ */ jsx(SvgIconArrowRight, {})
+    ] })
+  ] }) : switchType && /* @__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__ */ jsx(SvgIconArrowRight, {})
+  ] }) });
+  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(SvgIconGlobe, { className: "me-8" }),
+      t("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 }) }),
+    /* @__PURE__ */ jsx(Fragment, { children: renderContent() })
+  ] });
+};
+export {
+  VideoEmbed as default
+};

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

@@ -0,0 +1,14 @@
+import { WorkspaceElement } from '@edifice.io/ts-client';
+export interface VideoRecorderProps {
+    appCode: string;
+    caption?: string;
+    onSuccess?: (res: WorkspaceElement[]) => void;
+    onError: (error: string) => void;
+    onRecordUpdated?: (recordURL?: string) => void;
+    hideSaveAction?: boolean;
+}
+export interface VideoRecorderRef {
+    save: () => Promise<WorkspaceElement | undefined>;
+}
+declare const VideoRecorder: import('react').ForwardRefExoticComponent<VideoRecorderProps & import('react').RefAttributes<unknown>>;
+export default VideoRecorder;

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

@@ -0,0 +1,265 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { forwardRef, useState, useRef, useImperativeHandle, useEffect, useCallback } from "react";
+import { odeServices } from "@edifice.io/ts-client";
+import { getBestSupportedMimeType, convertMsToMS } from "@edifice.io/utilities";
+import { useTranslation } from "react-i18next";
+import SvgIconPause from "../../icons/components/IconPause.js";
+import SvgIconPlayFilled from "../../icons/components/IconPlayFilled.js";
+import SvgIconRecordStop from "../../icons/components/IconRecordStop.js";
+import SvgIconRecordVideo from "../../icons/components/IconRecordVideo.js";
+import SvgIconRecord from "../../icons/components/IconRecord.js";
+import SvgIconRefresh from "../../icons/components/IconRefresh.js";
+import SvgIconSave from "../../icons/components/IconSave.js";
+import useUpload from "../../../hooks/useUpload/useUpload.js";
+import useBrowserInfo from "../../../hooks/useBrowserInfo/useBrowserInfo.js";
+import FormControl from "../../../components/Form/FormControl.js";
+import Label from "../../../components/Label/Label.js";
+import Select from "../../../components/Select/Select.js";
+import LoadingScreen from "../../../components/LoadingScreen/LoadingScreen.js";
+import { Toolbar } from "../../../components/Toolbar/Toolbar.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({
+    audio: !0,
+    video: {
+      facingMode: "environment",
+      aspectRatio: VIDEO_WIDTH / VIDEO_HEIGHT
+    }
+  }), [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
+  }));
+  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
+      });
+      if (setRecordedVideo(finalVideo), onRecordUpdated) {
+        const videoUrl = window.URL.createObjectURL(finalVideo);
+        onRecordUpdated(videoUrl);
+      }
+      videoRef.current.autoplay = !1, videoRef.current.srcObject = null, videoRef.current.src = window.URL.createObjectURL(finalVideo);
+    }
+  }, [recording, recordedChunks]), useEffect(() => {
+    if (recording) {
+      const startedAt = Date.now(), timer = window.setInterval(
+        // Compute exact elapsed time by diffing the start time.
+        () => setRecordedTime(Date.now() - startedAt),
+        500
+      );
+      return () => {
+        window.clearInterval(timer);
+      };
+    }
+  }, [recording]), useEffect(() => {
+    if (playing) {
+      const timer = window.setInterval(() => setPlayedTime((prev) => prev + 500), 500);
+      return () => {
+        window.clearInterval(timer);
+      };
+    }
+  }, [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) {
+      case "mobile":
+      case "tablet": {
+        const backCamera = {
+          deviceId: "environment",
+          label: t("video.back.camera"),
+          groupId: "",
+          kind: "videoinput"
+        }, frontCamera = {
+          deviceId: "user",
+          label: t("video.front.camera"),
+          groupId: "",
+          kind: "videoinput"
+        };
+        (videoDevices == null ? void 0 : videoDevices.length) > 1 ? setInputDevices([backCamera, frontCamera]) : setInputDevices([backCamera]);
+        break;
+      }
+      default:
+        setInputDevices(videoDevices);
+        break;
+    }
+  }, enableStream = async (mediaStreamConstraints2) => {
+    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);
+    }
+  }, 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
+    }) => {
+      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 () => {
+    var _a;
+    if ((_a = videoRef == null ? void 0 : videoRef.current) == null || _a.pause(), setSaving(!0), !recordedVideo) {
+      console.error("Error while saving video: recorded video is undefined.");
+      return;
+    }
+    const resVideo = await uploadBlob(recordedVideo, {
+      duration: recordedTime
+    });
+    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 = {
+      audio: !0,
+      video: {
+        aspectRatio: VIDEO_WIDTH / VIDEO_HEIGHT,
+        facingMode: selectedDevice == null ? void 0 : selectedDevice.deviceId
+      }
+    } : mediaStreamConstraints2 = {
+      audio: !0,
+      video: {
+        aspectRatio: VIDEO_WIDTH / VIDEO_HEIGHT,
+        deviceId: selectedDevice.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");
+  };
+  useEffect(() => {
+    recordedTime >= maxDuration && handleStop();
+  }, [recordedTime, handleStop]);
+  const toolbarItems = [{
+    type: "icon",
+    name: "record",
+    props: {
+      icon: /* @__PURE__ */ jsx(SvgIconRecord, { color: recording || recorded ? "" : "red" }),
+      color: "danger",
+      disabled: recording || recorded || saving,
+      onClick: handleRecord,
+      "aria-label": t("bbm.video.record.start")
+    },
+    tooltip: t("bbm.video.record.start")
+  }, {
+    type: "icon",
+    name: "stop",
+    props: {
+      icon: /* @__PURE__ */ jsx(SvgIconRecordStop, {}),
+      disabled: !recording || recorded || saving,
+      onClick: handleStop,
+      "aria-label": t("bbm.video.record.stop")
+    },
+    tooltip: t("bbm.video.record.stop")
+  }, {
+    type: "icon",
+    name: "play",
+    visibility: playing ? "hide" : "show",
+    props: {
+      icon: /* @__PURE__ */ jsx(SvgIconPlayFilled, {}),
+      disabled: !recorded || saving,
+      onClick: handlePlayPause,
+      "aria-label": t("bbm.video.play.start")
+    },
+    tooltip: t("bbm.video.play.start")
+  }, {
+    type: "icon",
+    name: "pause",
+    visibility: playing ? "show" : "hide",
+    props: {
+      icon: /* @__PURE__ */ jsx(SvgIconPause, {}),
+      disabled: !recorded || saving,
+      onClick: handlePlayPause,
+      "aria-label": t("bbm.video.play.pause")
+    },
+    tooltip: t("bbm.video.play.pause")
+  }, {
+    type: "divider"
+  }, {
+    type: "icon",
+    name: "reset",
+    props: {
+      icon: /* @__PURE__ */ jsx(SvgIconRefresh, {}),
+      disabled: !recorded || saving,
+      onClick: handleReset,
+      "aria-label": t("bbm.video.record.reset")
+    },
+    tooltip: t("bbm.video.record.reset")
+  }, {
+    type: "icon",
+    name: "save",
+    visibility: hideSaveAction ? "hide" : "show",
+    props: {
+      icon: /* @__PURE__ */ jsx(SvgIconSave, {}),
+      disabled: !recorded || saving || saved,
+      onClick: handleSave,
+      "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 })
+    ] }) }),
+    /* @__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(SvgIconRecord, { width: 12, height: 12, color: "red", className: "me-4" }),
+          /* @__PURE__ */ jsxs("span", { children: [
+            convertMsToMS(recordedTime),
+            "/",
+            convertMsToMS(maxDuration)
+          ] })
+        ] }),
+        recorded && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(SvgIconRecordVideo, { width: 14, height: 14, className: "me-4" }),
+          /* @__PURE__ */ jsxs("span", { children: [
+            convertMsToMS(playedTime),
+            "/",
+            convertMsToMS(recordedTime)
+          ] })
+        ] })
+      ] }),
+      stream && /* @__PURE__ */ jsx(Toolbar, { items: toolbarItems, className: "position-absolute bottom-0 start-50 bg-white" })
+    ] }),
+    saving && /* @__PURE__ */ jsx(LoadingScreen, { position: !1, caption: t("bbm.video.save.loader.caption") })
+  ] });
+});
+export {
+  VideoRecorder as default
+};