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

package/dist/ui/src/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/ui/src/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/ui/src/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/ui/src/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/ui/src/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/ui/src/multimedia/VideoEmbed/VideoEmbed.js

@@ -0,0 +1,77 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { useState, useId, useEffect } from "react";
+import { odeServices } from "edifice-ts-client";
+import { useTranslation } from "react-i18next";
+import { Globe as SvgGlobe$1, ArrowRight as SvgArrowRight$1 } from "../../../../icons/dist/index.js";
+import { useMediaLibraryContext } from "../MediaLibrary/MediaLibraryContext.js";
+import useDebounce from "../../hooks/useDebounce/useDebounce.js";
+import FormControl from "../../components/Form/FormControl.js";
+import Input from "../../components/Input/Input.js";
+import Button from "../../components/Button/Button.js";
+import usePaths from "../../core/usePaths/usePaths.js";
+import Image from "../../components/Image/Image.js";
+import EmptyScreen from "../../components/EmptyScreen/EmptyScreen.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(SvgArrowRight$1, {})
+    ] })
+  ] }) : /* @__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(SvgArrowRight$1, {})
+  ] }) });
+  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(SvgGlobe$1, { 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/ui/src/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 { odeServices } from "edifice-ts-client";
+import { useTranslation } from "react-i18next";
+import { Record as SvgRecord$1, RecordStop as SvgRecordStop$1, PlayFilled as SvgPlayFilled$1, Pause as SvgPause$1, Refresh as SvgRefresh$1, Save as SvgSave$1, RecordVideo as SvgRecordVideo$1 } from "../../../../icons/dist/index.js";
+import useBrowserInfo from "../../hooks/useBrowserInfo/useBrowserInfo.js";
+import useUpload from "../../core/useUpload/useUpload.js";
+import { getBestSupportedMimeType } from "../../utils/video.js";
+import FormControl from "../../components/Form/FormControl.js";
+import Label from "../../components/Label/Label.js";
+import Select from "../../components/Select/Select.js";
+import Toolbar from "../../components/Toolbar/Toolbar.js";
+import LoadingScreen from "../../components/LoadingScreen/LoadingScreen.js";
+import { convertMsToMS } from "../../utils/time.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(SvgRecord$1, { 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(SvgRecordStop$1, {}),
+      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(SvgPlayFilled$1, {}),
+      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(SvgPause$1, {}),
+      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(SvgRefresh$1, {}),
+      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(SvgSave$1, {}),
+      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(SvgRecord$1, { width: 12, height: 12, color: "red", className: "me-4" }),
+          /* @__PURE__ */ jsxs("span", { children: [
+            convertMsToMS(recordedTime),
+            "/",
+            convertMsToMS(maxDuration)
+          ] })
+        ] }),
+        recorded && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(SvgRecordVideo$1, { 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/ui/src/multimedia/Workspace/Workspace.js

@@ -0,0 +1,169 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useRef, useState, useCallback, useEffect } from "react";
+import clsx from "clsx";
+import { useTranslation } from "react-i18next";
+import { SortTime as SvgSortTime$1, SortAscendingLetters as SvgSortAscendingLetters$1, SortDescendingLetters as SvgSortDescendingLetters$1 } from "../../../../icons/dist/index.js";
+import useWorkspaceSearch from "../../core/useWorkspaceSearch/useWorkspaceSearch.js";
+import { Grid } from "../../components/Grid/Grid.js";
+import TreeView from "../../components/TreeView/TreeView.js";
+import SearchBar from "../../components/SearchBar/SearchBar.js";
+import LoadingScreen from "../../components/LoadingScreen/LoadingScreen.js";
+import FileCard from "../../components/FileCard/FileCard.js";
+import Dropdown from "../../components/Dropdown/Dropdown.js";
+import EmptyScreen from "../../components/EmptyScreen/EmptyScreen.js";
+import { findTreeNode } from "../../utils/findTreeNode.js";
+const Workspace = ({
+  roles,
+  onSelect,
+  multiple = !0,
+  className,
+  defaultFolder,
+  showPublicFolder
+}) => {
+  const {
+    t
+  } = useTranslation(), {
+    root: ownerRoot,
+    loadContent: loadOwnerDocs
+  } = useWorkspaceSearch("root", t("workspace.tree.owner"), "owner", roles), {
+    root: sharedRoot,
+    loadContent: loadSharedDocs
+  } = useWorkspaceSearch("root", t("workspace.tree.shared"), "shared", roles), {
+    root: protectRoot,
+    loadContent: loadProtectedDocs
+  } = useWorkspaceSearch("root", t("workspace.tree.protected"), "protected", roles), {
+    root: publicRoot,
+    loadContent: loadPublicDocs
+  } = useWorkspaceSearch("root", t("workspace.tree.public"), "public", roles), ownerRef = useRef(null), sharedRef = useRef(null), protectRef = useRef(null), publicRef = useRef(null), [currentFilter, setCurrentFilter] = useState(() => defaultFolder === "public" ? showPublicFolder ? defaultFolder : "protected" : defaultFolder === "protected" || defaultFolder === "shared" ? defaultFolder : "owner"), [currentNode, setCurrentNode] = useState(() => defaultFolder === "public" ? showPublicFolder ? publicRoot : protectRoot : defaultFolder === "protected" ? protectRoot : defaultFolder === "shared" ? sharedRoot : ownerRoot), [documents, setDocuments] = useState(), [searchTerm, setSearchTerm] = useState(null), [sortOrder, setSortOrder] = useState(["modified", "desc"]), [selectedDocuments, setSelectedDocuments] = useState([]), rootNodeFor = useCallback((filter) => {
+    switch (filter) {
+      case "owner":
+        return {
+          root: ownerRoot,
+          othersRef: [sharedRef, protectRef, publicRef]
+        };
+      case "shared":
+        return {
+          root: sharedRoot,
+          othersRef: [ownerRef, protectRef, publicRef]
+        };
+      case "protected":
+        return {
+          root: protectRoot,
+          othersRef: [ownerRef, sharedRef, publicRef]
+        };
+      case "public":
+        return {
+          root: publicRoot,
+          othersRef: [ownerRef, sharedRef, protectRef]
+        };
+      default:
+        throw "no.root.node";
+    }
+  }, [ownerRoot, sharedRoot, protectRoot, publicRoot]), loadContent = useCallback(() => {
+    switch (currentFilter) {
+      case "owner":
+        loadOwnerDocs(currentNode.id);
+        break;
+      case "shared":
+        loadSharedDocs(currentNode.id);
+        break;
+      case "protected":
+        loadProtectedDocs(currentNode.id);
+        break;
+      case "public":
+        loadPublicDocs(currentNode.id);
+        break;
+      default:
+        throw "no.way";
+    }
+  }, [currentFilter, currentNode.id, loadOwnerDocs, loadProtectedDocs, loadPublicDocs, loadSharedDocs]);
+  function selectAndLoadContent(filter, nodeId) {
+    setCurrentFilter(filter);
+    const {
+      root,
+      othersRef
+    } = rootNodeFor(filter), targetNode = findTreeNode(root, (node) => node.id === nodeId);
+    targetNode && (setCurrentNode(targetNode), othersRef.forEach((otherRef) => {
+      var _a;
+      return (_a = otherRef.current) == null ? void 0 : _a.unselectAll();
+    }));
+  }
+  useEffect(() => {
+    var _a;
+    let ref;
+    switch (currentFilter) {
+      case "owner":
+        ref = ownerRef;
+        break;
+      case "shared":
+        ref = sharedRef;
+        break;
+      case "protected":
+        ref = protectRef;
+        break;
+      case "public":
+        ref = publicRef;
+        break;
+      default:
+        return;
+    }
+    (_a = ref == null ? void 0 : ref.current) == null || _a.select("root");
+  }, [currentFilter]), useEffect(loadContent, [loadContent]), useEffect(() => {
+    if (currentNode.files) {
+      let list = [].concat(currentNode.files);
+      searchTerm && (list = list.filter((f) => f.name.indexOf(searchTerm) >= 0));
+      const sortFunction = sortOrder[0] === "name" ? sortOrder[1] === "asc" ? (a, b) => compare(a.name, b.name) : (a, b) => compare(b.name, a.name) : (a, b) => compare(b.modified, a.modified);
+      setDocuments(() => list.sort(sortFunction));
+    } else
+      setDocuments(void 0);
+  }, [currentNode, ownerRoot, protectRoot, sharedRoot, publicRoot, searchTerm, sortOrder]);
+  const handleSearchChange = useCallback((e) => {
+    setSearchTerm(e.target.value);
+  }, [setSearchTerm]);
+  function compare(a, b) {
+    return a ? b ? a.localeCompare(b) : 1 : -1;
+  }
+  function getSortOrderLabel() {
+    return sortOrder[0] === "name" ? sortOrder[1] === "asc" ? t("sort.order.alpha.asc") : t("sort.order.alpha.desc") : t("sort.order.modify.desc");
+  }
+  function handleSelectDoc(doc) {
+    let currentDocuments = [...selectedDocuments];
+    multiple ? currentDocuments.includes(doc) ? currentDocuments = currentDocuments.filter((selectedDocument) => selectedDocument._id !== doc._id) : currentDocuments = [...currentDocuments, doc] : currentDocuments = [doc], setSelectedDocuments(currentDocuments), onSelect(currentDocuments);
+  }
+  const workspace = clsx("workspace flex-grow-1 gap-0", className);
+  return /* @__PURE__ */ jsxs(Grid, { className: workspace, children: [
+    /* @__PURE__ */ jsx(Grid.Col, { sm: "12", md: "3", xl: "4", className: "workspace-folders p-12 pt-0 gap-12", children: /* @__PURE__ */ jsxs("div", { style: {
+      position: "sticky",
+      top: 0,
+      paddingTop: "1.2rem"
+    }, children: [
+      /* @__PURE__ */ jsx(TreeView, { ref: ownerRef, data: ownerRoot, onTreeItemSelect: (nodeId) => selectAndLoadContent("owner", nodeId), onTreeItemUnfold: (nodeId) => selectAndLoadContent("owner", nodeId) }),
+      /* @__PURE__ */ jsx(TreeView, { ref: sharedRef, data: sharedRoot, onTreeItemSelect: (nodeId) => selectAndLoadContent("shared", nodeId), onTreeItemUnfold: (nodeId) => selectAndLoadContent("shared", nodeId) }),
+      /* @__PURE__ */ jsx(TreeView, { ref: protectRef, data: protectRoot, onTreeItemSelect: (nodeId) => selectAndLoadContent("protected", nodeId), onTreeItemUnfold: (nodeId) => selectAndLoadContent("protected", nodeId) }),
+      showPublicFolder && /* @__PURE__ */ jsx(TreeView, { ref: publicRef, data: publicRoot, onTreeItemSelect: (nodeId) => selectAndLoadContent("public", nodeId), onTreeItemUnfold: (nodeId) => selectAndLoadContent("public", nodeId) })
+    ] }) }),
+    /* @__PURE__ */ jsx(Grid.Col, { sm: "12", md: "5", xl: "8", children: /* @__PURE__ */ jsxs(Grid, { className: "flex-grow-1 gap-0", children: [
+      /* @__PURE__ */ jsxs(Grid.Col, { sm: "4", md: "8", xl: "12", children: [
+        /* @__PURE__ */ jsx("div", { className: "workspace-search px-16 py-8 ", children: /* @__PURE__ */ jsx(SearchBar, { isVariant: !0, className: "gap-16", onChange: handleSearchChange }) }),
+        /* @__PURE__ */ jsxs("div", { className: "d-flex align-items-center justify-content-end px-8 py-4", children: [
+          /* @__PURE__ */ jsx("small", { className: "text-muted", children: t("workspace.search.order") }),
+          /* @__PURE__ */ jsxs(Dropdown, { children: [
+            /* @__PURE__ */ jsx(Dropdown.Trigger, { size: "sm", label: getSortOrderLabel(), variant: "ghost" }),
+            /* @__PURE__ */ jsxs(Dropdown.Menu, { children: [
+              /* @__PURE__ */ jsx(Dropdown.Item, { icon: /* @__PURE__ */ jsx(SvgSortTime$1, {}), onClick: () => setSortOrder(["modified", "desc"]), children: t("sort.order.modify.desc") }),
+              /* @__PURE__ */ jsx(Dropdown.Item, { icon: /* @__PURE__ */ jsx(SvgSortAscendingLetters$1, {}), onClick: () => setSortOrder(["name", "asc"]), children: t("sort.order.alpha.asc") }),
+              /* @__PURE__ */ jsx(Dropdown.Item, { icon: /* @__PURE__ */ jsx(SvgSortDescendingLetters$1, {}), onClick: () => setSortOrder(["name", "desc"]), children: t("sort.order.alpha.desc") })
+            ] })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(Grid.Col, { sm: "4", md: "8", xl: "12", className: "p-8 gap-8", children: documents ? documents.length !== 0 ? /* @__PURE__ */ jsx("div", { className: "grid grid-workspace", children: documents.map((doc) => {
+        const isSelected = selectedDocuments.includes(doc);
+        return /* @__PURE__ */ jsx(FileCard, { doc, isSelected, onClick: () => handleSelectDoc(doc) }, doc._id);
+      }) }) : /* @__PURE__ */ jsx(EmptyScreen, { imageSrc: "/assets/themes/edifice-bootstrap/images/emptyscreen/illu-trash.svg", text: t("workspace.empty.docSpace"), title: t("explorer.emptyScreen.trash.title") }) : /* @__PURE__ */ jsx(LoadingScreen, {}) })
+    ] }) })
+  ] });
+}, Component = Workspace;
+export {
+  Component as default
+};

package/dist/ui/src/portal/Header/Badge.js

@@ -0,0 +1,9 @@
+import { jsx } from "react/jsx-runtime";
+function Badge({
+  children
+}) {
+  return /* @__PURE__ */ jsx("span", { className: "position-absolute badge rounded-pill bg-warning", children });
+}
+export {
+  Badge
+};