@edifice.io/react 2.0.0-develop-rc.8 → 2.0.0-develop-rc.13

package/dist/multimedia/MediaLibrary/innertabs/InternalLink.js

@@ -0,0 +1,35 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import InternalLinker from "../../Linker/InternalLinker.js";
+import { useMediaLibraryContext } from "../MediaLibraryContext.js";
+import useToggle from "../../../hooks/useToggle/useToggle.js";
+import Checkbox from "../../../components/Checkbox/Checkbox.js";
+const InternalLink = ({
+  target,
+  resourceId,
+  appPrefix
+}) => {
+  const {
+    t
+  } = useTranslation(), {
+    setResult,
+    setResultCounter,
+    appCode,
+    multiple
+  } = useMediaLibraryContext(), [isChecked, toggleChecked] = useToggle(target === "_blank"), [resources, setRessources] = useState([]), handleSelect = (resources2) => {
+    setRessources(resources2);
+  };
+  return useEffect(() => {
+    setResult({
+      target: isChecked ? "_blank" : void 0,
+      resources
+    }), resources && resources.length ? setResultCounter(resources.length) : setResultCounter(void 0);
+  }, [isChecked, resources]), /* @__PURE__ */ jsxs("div", { className: "d-flex flex-column flex-fill gap-16 overflow-hidden", children: [
+    /* @__PURE__ */ jsx(InternalLinker, { appCode, defaultAppCode: appPrefix, defaultResourceId: resourceId, onSelect: handleSelect, multiple }),
+    /* @__PURE__ */ jsx(Checkbox, { className: "align-items-center", checked: isChecked, label: t("bbm.linker.open.tab"), onChange: toggleChecked })
+  ] });
+};
+export {
+  InternalLink
+};

package/dist/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/multimedia/MediaLibrary/innertabs/Video.js

@@ -0,0 +1,22 @@
+import { jsx } from "react/jsx-runtime";
+import { useRef } from "react";
+import { useTranslation } from "react-i18next";
+import { useMediaLibraryContext } from "../MediaLibraryContext.js";
+import VideoRecorder from "../../VideoRecorder/VideoRecorder.js";
+const Video = () => {
+  const {
+    appCode,
+    setResult,
+    setPreSuccess
+  } = useMediaLibraryContext(), {
+    t
+  } = useTranslation(), ref = useRef(null), handleRecordUpdated = (recordUrl) => {
+    recordUrl ? (setResult(recordUrl), setPreSuccess(() => ref.current.save)) : setResult();
+  }, handleError = (err) => {
+    console.error(err);
+  };
+  return /* @__PURE__ */ jsx(VideoRecorder, { ref, appCode, caption: t("bbm.video.caption"), onRecordUpdated: handleRecordUpdated, onError: handleError, hideSaveAction: !0 });
+};
+export {
+  Video
+};

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

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

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

@@ -0,0 +1,31 @@
+import { jsx } from "react/jsx-runtime";
+import { useMediaLibraryContext } from "../MediaLibraryContext.js";
+import Component 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(Component, { roles: getDocumentRoleFilter(), onSelect: handleSelect, multiple, className: "border rounded overflow-y-auto", defaultFolder: visibility, showPublicFolder: visibility === "public" });
+};
+export {
+  Workspace
+};

package/dist/multimedia/MediaLibrary/innertabs/index.js

@@ -0,0 +1,21 @@
+import { Audio } from "./Audio.js";
+import { ExternalLink } from "./ExternalLink.js";
+import { Iframe } from "./Iframe.js";
+import { InternalLink } from "./InternalLink.js";
+import { Upload } from "./Upload.js";
+import { Video } from "./Video.js";
+import { VideoEmbedder } from "./VideoEmbedder.js";
+import { Workspace } from "./Workspace.js";
+const InnerTabs = {
+  Audio,
+  Video,
+  Upload,
+  ExternalLink,
+  Workspace,
+  InternalLink,
+  Iframe,
+  VideoEmbedder
+};
+export {
+  InnerTabs
+};

package/dist/{modules/multimedia → multimedia}/UploadFiles/UploadFiles.d.ts

@@ -1,4 +1,4 @@
-import { WorkspaceElement, WorkspaceVisibility } from '@edifice.io/ts-client';
+import { WorkspaceElement, WorkspaceVisibility } from 'edifice-ts-client';
 declare const UploadFiles: {
     ({ onFilesChange, visibility, }: {
         onFilesChange: (uploadedFiles: WorkspaceElement[]) => void;

package/dist/multimedia/UploadFiles/UploadFiles.js

@@ -0,0 +1,56 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useRef, useEffect } from "react";
+import { customSize } from "../../utils/fileSize.js";
+import useUploadFiles from "../../core/useUploadFiles/useUploadFiles.js";
+import { UploadCard } from "../../components/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/multimedia/VideoEmbed/VideoEmbed.js

@@ -0,0 +1,77 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { useState, useId, useEffect } from "react";
+import { Globe, ArrowRight } from "@edifice.io/icons";
+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 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
+}) => {
+  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);
+      } 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("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") }),
+    /* @__PURE__ */ jsxs(Button, { variant: "ghost", color: "primary", onClick: handleSwitchToEmbedderClick, className: "align-items-start mt-16", children: [
+      t("bbm.video.useEmbedCode"),
+      " ",
+      /* @__PURE__ */ jsx(ArrowRight, {})
+    ] })
+  ] }) : /* @__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(ArrowRight, {})
+  ] }) });
+  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(Globe, { 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 → multimedia}/VideoRecorder/VideoRecorder.d.ts

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

package/dist/multimedia/VideoRecorder/VideoRecorder.js

@@ -0,0 +1,259 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { forwardRef, useState, useRef, useImperativeHandle, useEffect, useCallback } from "react";
+import { Record, RecordStop, PlayFilled, Pause, Refresh, Save, RecordVideo } from "@edifice.io/icons";
+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 Toolbar from "../../components/Toolbar/Toolbar.js";
+import FormControl from "../../components/Form/FormControl.js";
+import Label from "../../components/Label/Label.js";
+import { convertMsToMS } from "../../utils/time.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({
+    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 () => {
+    if (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(Record, { 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(RecordStop, {}),
+      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(PlayFilled, {}),
+      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(Pause, {}),
+      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(Refresh, {}),
+      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(Save, {}),
+      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(Record, { width: 12, height: 12, color: "red", className: "me-4" }),
+          /* @__PURE__ */ jsxs("span", { children: [
+            convertMsToMS(recordedTime),
+            "/",
+            convertMsToMS(maxDuration)
+          ] })
+        ] }),
+        recorded && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(RecordVideo, { 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") })
+  ] });
+}), VideoRecorder$1 = VideoRecorder;
+export {
+  VideoRecorder$1 as default
+};

package/dist/{modules/multimedia → multimedia}/Workspace/Workspace.d.ts

@@ -1,4 +1,4 @@
-import { Role, WorkspaceElement, WorkspaceSearchFilter } from '@edifice.io/ts-client';
+import { Role, WorkspaceElement, WorkspaceSearchFilter } from 'edifice-ts-client';
 /**
  * MediaLibrary component properties
  */