microboard-temp 0.3.1 → 0.4.0

package/dist/esm/index.js

@@ -6556,6 +6556,11 @@ var conf = {
   getDOMParser: undefined,
   measureCtx: undefined,
   i18n: instance,
+  hooks: {
+    beforeMediaUpload: async (...args) => false,
+    beforeMediaRemove: async (...args) => false,
+    onUploadMediaError: async (...args) => false
+  },
   openModal: () => {},
   notify: () => "",
   disMissNotification: () => {},
@@ -39013,7 +39018,7 @@ class VideoItem extends BaseItem {
   onRemove() {
     const storageId = this.getStorageId();
     if (storageId) {
-      deleteMedia([storageId], this.board.getBoardId());
+      conf.hooks.beforeMediaRemove([storageId], this.board.getBoardId());
     }
     super.onRemove();
   }
@@ -39074,158 +39079,6 @@ async function fileTosha256(file) {
 }
 
 // src/Items/Image/ImageHelpers.ts
-var catchErrorResponse = async (response, mediaType) => {
-  if (response.status === 403) {
-    const data = await response.json();
-    let errorBody = conf.i18n.t("toolsPanel.addMedia.limitReached.bodyWithoutLimit");
-    if (!data.isOwnerRequest) {
-      errorBody = conf.i18n.t("toolsPanel.addMedia.limitReached.bodyOwner");
-    } else if (data.currentUsage && data.storageLimit) {
-      errorBody = conf.i18n.t(`toolsPanel.addMedia.limitReached.body.${parseInt(data.storageLimit) < 1e5 ? "basic" : "plus"}`);
-    }
-    conf.notify({
-      variant: "warning",
-      header: conf.i18n.t("toolsPanel.addMedia.limitReached.header"),
-      body: errorBody,
-      button: data.isOwnerRequest && data.storageLimit <= 100 ? {
-        text: conf.i18n.t("toolsPanel.addMedia.upgradeToPlus"),
-        onClick: () => conf.openModal("USER_PLAN_MODAL_ID")
-      } : undefined,
-      duration: 8000
-    });
-  } else if (response.status === 413) {
-    const data = await response.json();
-    let errorBody = conf.i18n.t("toolsPanel.addMedia.tooLarge.bodyWithoutLimit");
-    let isBasicPlan = false;
-    if (data.fileSizeLimit && data.fileSize) {
-      if (mediaType === "image") {
-        isBasicPlan = parseInt(data.fileSizeLimit) < 20;
-        errorBody = conf.i18n.t(`toolsPanel.addMedia.tooLarge.imageBody.${isBasicPlan ? "basic" : "plus"}`);
-      } else {
-        isBasicPlan = parseInt(data.fileSizeLimit) < 1000;
-        errorBody = conf.i18n.t(`toolsPanel.addMedia.tooLarge.audioOrVideoBody.${isBasicPlan ? "basic" : "plus"}`);
-      }
-    }
-    conf.notify({
-      variant: "warning",
-      header: conf.i18n.t("toolsPanel.addMedia.tooLarge.header"),
-      body: errorBody,
-      button: isBasicPlan ? {
-        text: conf.i18n.t("toolsPanel.addMedia.upgradeToPlus"),
-        onClick: () => conf.openModal("USER_PLAN_MODAL_ID")
-      } : undefined,
-      duration: 4000
-    });
-  } else if (response.status === 401) {
-    conf.openModal("MEDIA_UNAVAILABLE_MODAL_ID");
-  } else if (response.status === 415) {
-    conf.notify({
-      variant: "warning",
-      header: conf.i18n.t("toolsPanel.addMedia.unsupportedFormat.header"),
-      body: conf.i18n.t("toolsPanel.addMedia.unsupportedFormat.body"),
-      duration: 4000
-    });
-  } else {
-    conf.notify({
-      variant: "error",
-      header: conf.i18n.t("toolsPanel.addMedia.unhandled.header"),
-      body: conf.i18n.t("toolsPanel.addMedia.unhandled.body"),
-      duration: 4000
-    });
-  }
-  throw new Error(`HTTP status: ${response.status}`);
-};
-var catchDuplicateErrorResponse = async (response) => {
-  if (response.status === 403) {
-    conf.notify({
-      variant: "warning",
-      header: conf.i18n.t("toolsPanel.addMedia.limitReached.header"),
-      body: conf.i18n.t("toolsPanel.addMedia.limitReached.duplicateBody"),
-      duration: 4000
-    });
-  } else {
-    conf.notify({
-      variant: "error",
-      header: conf.i18n.t("toolsPanel.addMedia.unhandled.header"),
-      body: conf.i18n.t("toolsPanel.addMedia.unhandled.body"),
-      duration: 4000
-    });
-  }
-  throw new Error(`HTTP status: ${response.status}`);
-};
-var validateMediaFile = (file, account2) => {
-  const fileExtension = file.name.split(".").pop()?.toLowerCase() || "";
-  if (!file.type.startsWith("image") && !conf.AUDIO_FORMATS.includes(fileExtension) && !conf.VIDEO_FORMATS.includes(fileExtension)) {
-    conf.notify({
-      variant: "warning",
-      header: conf.i18n.t("toolsPanel.addMedia.unsupportedFormat.header"),
-      body: conf.i18n.t("toolsPanel.addMedia.unsupportedFormat.body"),
-      duration: 4000
-    });
-    return false;
-  }
-  const isBasicPlan = account2.billingInfo?.plan.name === "basic";
-  let errorBody = conf.i18n.t(`toolsPanel.addMedia.tooLarge.imageBody.${isBasicPlan ? "basic" : "plus"}`);
-  if (conf.AUDIO_FORMATS.includes(fileExtension) || conf.VIDEO_FORMATS.includes(fileExtension)) {
-    errorBody = conf.i18n.t(`toolsPanel.addMedia.tooLarge.audioOrVideoBody.${isBasicPlan ? "basic" : "plus"}`);
-    if (file.size / 1024 ** 2 > (account2.billingInfo?.storage.maxMediaSize || Infinity)) {
-      conf.notify({
-        variant: "warning",
-        header: conf.i18n.t("toolsPanel.addMedia.tooLarge.header"),
-        body: errorBody,
-        button: isBasicPlan ? {
-          text: conf.i18n.t("toolsPanel.addMedia.upgradeToPlus"),
-          onClick: () => conf.openModal("USER_PLAN_MODAL_ID")
-        } : undefined,
-        duration: 4000
-      });
-      return false;
-    }
-  } else if (file.size / 1024 ** 2 > (account2.billingInfo?.storage.maxImageSize || Infinity)) {
-    conf.notify({
-      variant: "warning",
-      header: conf.i18n.t("toolsPanel.addMedia.tooLarge.header"),
-      body: errorBody,
-      button: isBasicPlan ? {
-        text: conf.i18n.t("toolsPanel.addMedia.upgradeToPlus"),
-        onClick: () => conf.openModal("USER_PLAN_MODAL_ID")
-      } : undefined,
-      duration: 4000
-    });
-    return false;
-  }
-  return true;
-};
-var deleteMedia = async (mediaIds, boardId) => {
-  fetch(`${window?.location.origin}/api/v1/media/usage/${boardId}`, {
-    method: "POST",
-    headers: {
-      "content-type": "application/json"
-    },
-    body: JSON.stringify({ mediaIds, shouldIncrease: false })
-  }).catch((error) => {
-    console.error("Media storage error:", error);
-  });
-};
-var updateMediaUsage = async (mediaIds, boardId) => {
-  try {
-    const response = await fetch(`${window?.location.origin}/api/v1/media/usage/${boardId}`, {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json"
-      },
-      body: JSON.stringify({ mediaIds, shouldIncrease: true })
-    });
-    if (response.status !== 200) {
-      await catchDuplicateErrorResponse(response);
-      return false;
-    }
-    return true;
-  } catch (error) {
-    console.error("Media storage error:", error);
-    return false;
-  }
-};
 var uploadToTheStorage = async (hash, dataURL, accessToken, boardId) => {
   return new Promise((resolve2, reject) => {
     const base64String = dataURL.split(",")[1];
@@ -39243,7 +39096,7 @@ var uploadToTheStorage = async (hash, dataURL, accessToken, boardId) => {
       body: blob
     }).then(async (response) => {
       if (response.status !== 200) {
-        return catchErrorResponse(response, "image");
+        return conf.hooks.onUploadMediaError(response, "image");
       }
       return response.json();
     }).then((data) => {
@@ -39343,7 +39196,7 @@ var uploadVideoToStorage = async (hash, videoBlob, accessToken, boardId) => {
       body: videoBlob
     }).then(async (response) => {
       if (response.status !== 200) {
-        return catchErrorResponse(response, "video");
+        return conf.hooks.onUploadMediaError(response, "video");
       }
       return response.json();
     }).then((data) => {
@@ -39447,6 +39300,326 @@ var captureFrame = (frameTime, video) => {
     return null;
   }
 };
+// src/Items/Audio/Audio.ts
+class AudioItem extends BaseItem {
+  events;
+  extension;
+  itemType = "Audio";
+  parent = "Board";
+  transformation;
+  linkTo;
+  subject = new Subject;
+  loadCallbacks = [];
+  beforeLoadCallbacks = [];
+  transformationRenderBlock = undefined;
+  url = "";
+  isPlaying = false;
+  currentTime = 0;
+  isStorageUrl = true;
+  constructor(board, isStorageUrl, url, events, id = "", extension2) {
+    super(board, id);
+    this.events = events;
+    this.extension = extension2;
+    this.linkTo = new LinkTo(this.id, events);
+    this.board = board;
+    this.isStorageUrl = isStorageUrl;
+    if (url) {
+      this.applyUrl(url);
+    }
+    this.transformation = new Transformation(id, events);
+    this.linkTo.subject.subscribe(() => {
+      this.updateMbr();
+      this.subject.publish(this);
+    });
+    this.transformation.subject.subscribe(this.onTransform);
+    this.right = this.left + conf.AUDIO_DIMENSIONS.width;
+    this.bottom = this.top + conf.AUDIO_DIMENSIONS.height;
+    this.shouldUseCustomRender = true;
+  }
+  setCurrentTime(time) {
+    this.currentTime = time;
+  }
+  getCurrentTime() {
+    return this.currentTime;
+  }
+  getIsStorageUrl() {
+    return this.isStorageUrl;
+  }
+  onTransform = () => {
+    this.updateMbr();
+    this.subject.publish(this);
+  };
+  doOnceBeforeOnLoad = (callback) => {
+    this.loadCallbacks.push(callback);
+  };
+  doOnceOnLoad = (callback) => {
+    this.loadCallbacks.push(callback);
+  };
+  setIsPlaying(isPlaying) {
+    this.isPlaying = isPlaying;
+    this.shouldRenderOutsideViewRect = isPlaying;
+    this.subject.publish(this);
+  }
+  getIsPlaying() {
+    return this.isPlaying;
+  }
+  applyUrl(url) {
+    if (this.isStorageUrl) {
+      try {
+        const newUrl = new URL(url);
+        this.url = `${window.location.origin}${newUrl.pathname}`;
+      } catch (_) {}
+    } else {
+      this.url = url;
+    }
+  }
+  setUrl(url) {
+    this.emit({
+      class: "Audio",
+      method: "setUrl",
+      item: [this.getId()],
+      url
+    });
+  }
+  getStorageId() {
+    if (!this.isStorageUrl) {
+      return;
+    }
+    return this.url.split("/").pop();
+  }
+  getUrl() {
+    return this.url;
+  }
+  onLoad = async () => {
+    this.shootBeforeLoadCallbacks();
+    this.updateMbr();
+    this.subject.publish(this);
+    this.shootLoadCallbacks();
+  };
+  onError = (_error) => {
+    this.updateMbr();
+    this.subject.publish(this);
+    this.shootLoadCallbacks();
+  };
+  updateMbr() {
+    const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
+    this.left = translateX;
+    this.top = translateY;
+    this.right = this.left + conf.AUDIO_DIMENSIONS.width * scaleX;
+    this.bottom = this.top + conf.AUDIO_DIMENSIONS.height * scaleY;
+  }
+  render(context) {
+    if (this.transformationRenderBlock) {
+      return;
+    }
+    const ctx = context.ctx;
+    const radius = 12 * this.transformation.getScale().x;
+    ctx.save();
+    ctx.globalCompositeOperation = "destination-out";
+    ctx.beginPath();
+    ctx.moveTo(this.left + radius, this.top);
+    ctx.lineTo(this.left + this.getWidth() - radius, this.top);
+    ctx.quadraticCurveTo(this.left + this.getWidth(), this.top, this.left + this.getWidth(), this.top + radius);
+    ctx.lineTo(this.left + this.getWidth(), this.top + this.getHeight() - radius);
+    ctx.quadraticCurveTo(this.left + this.getWidth(), this.top + this.getHeight(), this.left + this.getWidth() - radius, this.top + this.getHeight());
+    ctx.lineTo(this.left + radius, this.top + this.getHeight());
+    ctx.quadraticCurveTo(this.left, this.top + this.getHeight(), this.left, this.top + this.getHeight() - radius);
+    ctx.lineTo(this.left, this.top + radius);
+    ctx.quadraticCurveTo(this.left, this.top, this.left + radius, this.top);
+    ctx.closePath();
+    ctx.fill();
+    ctx.restore();
+  }
+  renderHTML(documentFactory) {
+    const div = documentFactory.createElement("audio-item");
+    const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
+    const transform = `translate(${translateX}px, ${translateY}px) scale(${scaleX}, ${scaleY})`;
+    div.id = this.getId();
+    div.style.width = `${conf.AUDIO_DIMENSIONS.width}px`;
+    div.style.height = `${conf.AUDIO_DIMENSIONS.height}px`;
+    div.style.transformOrigin = "top left";
+    div.style.transform = transform;
+    div.style.position = "absolute";
+    div.setAttribute("audio-url", this.getUrl());
+    if (this.extension) {
+      div.setAttribute("extension", this.extension);
+    }
+    if (this.isStorageUrl) {
+      div.setAttribute("is-storage-url", "true");
+    }
+    div.setAttribute("data-link-to", "");
+    return div;
+  }
+  serialize() {
+    return {
+      itemType: "Audio",
+      url: this.url,
+      transformation: this.transformation.serialize(),
+      isStorageUrl: this.isStorageUrl,
+      extension: this.extension
+    };
+  }
+  deserialize(data) {
+    if (data.isStorageUrl) {
+      this.isStorageUrl = data.isStorageUrl;
+    }
+    if (data.transformation) {
+      this.transformation.deserialize(data.transformation);
+    }
+    if (data.url) {
+      this.setUrl(data.url);
+    }
+    if (data.extension) {
+      this.extension = data.extension;
+    }
+    return this;
+  }
+  apply(op) {
+    switch (op.class) {
+      case "Transformation":
+        this.transformation.apply(op);
+        break;
+      case "LinkTo":
+        this.linkTo.apply(op);
+        break;
+      case "Audio":
+        if (op.method === "setUrl") {
+          this.applyUrl(op.url);
+        }
+        this.subject.publish(this);
+        break;
+    }
+  }
+  emit(operation) {
+    if (this.events) {
+      const command = new AudioCommand([this], operation);
+      command.apply();
+      this.events.emit(operation, command);
+    } else {
+      this.apply(operation);
+    }
+  }
+  setId(id) {
+    this.id = id;
+    this.transformation.setId(id);
+    return this;
+  }
+  getId() {
+    return this.id;
+  }
+  shootLoadCallbacks() {
+    while (this.loadCallbacks.length > 0) {
+      this.loadCallbacks.shift()(this);
+    }
+  }
+  shootBeforeLoadCallbacks() {
+    while (this.beforeLoadCallbacks.length > 0) {
+      this.beforeLoadCallbacks.shift()(this);
+    }
+  }
+  getPath() {
+    const { left, top, right, bottom } = this.getMbr();
+    const leftTop = new Point(left, top);
+    const rightTop = new Point(right, top);
+    const rightBottom = new Point(right, bottom);
+    const leftBottom = new Point(left, bottom);
+    return new Path([
+      new Line(leftTop, rightTop),
+      new Line(rightTop, rightBottom),
+      new Line(rightBottom, leftBottom),
+      new Line(leftBottom, leftTop)
+    ], true);
+  }
+  getSnapAnchorPoints() {
+    const mbr = this.getMbr();
+    const width2 = mbr.getWidth();
+    const height2 = mbr.getHeight();
+    return [
+      new Point(mbr.left + width2 / 2, mbr.top),
+      new Point(mbr.left + width2 / 2, mbr.bottom),
+      new Point(mbr.left, mbr.top + height2 / 2),
+      new Point(mbr.right, mbr.top + height2 / 2)
+    ];
+  }
+  isClosed() {
+    return true;
+  }
+  getRichText() {
+    return null;
+  }
+  getLinkTo() {
+    return;
+  }
+  getExtension() {
+    return this.extension;
+  }
+  download() {
+    if (this.extension) {
+      const linkElem = conf.documentFactory.createElement("a");
+      linkElem.href = this.url;
+      linkElem.setAttribute("download", `${this.board.getBoardId()}.${this.extension}`);
+      linkElem.click();
+    }
+  }
+  onRemove() {
+    const storageId = this.getStorageId();
+    if (storageId) {
+      conf.hooks.beforeMediaRemove([storageId], this.board.getBoardId());
+    }
+    super.onRemove();
+  }
+}
+// src/Items/Audio/AudioHelpers.ts
+var uploadAudioToStorage = async (hash, audioBlob, accessToken, boardId) => {
+  return new Promise((resolve2, reject) => {
+    fetch(`${window.location.origin}/api/v1/media/audio/${boardId}`, {
+      method: "POST",
+      headers: {
+        "Content-Type": audioBlob.type,
+        "x-audio-id": hash,
+        Authorization: `Bearer ${accessToken}`
+      },
+      body: audioBlob
+    }).then(async (response) => {
+      if (response.status !== 200) {
+        return conf.hooks.onUploadMediaError(response, "audio");
+      }
+      return response.json();
+    }).then((data) => {
+      console.log(data);
+      resolve2(data.src);
+    }).catch((error) => {
+      console.error("Media storage error:", error);
+      reject(error);
+    });
+  });
+};
+var prepareAudio = (file, accessToken, boardId) => {
+  return new Promise((resolve2, reject) => {
+    const audio = document.createElement("audio");
+    audio.src = URL.createObjectURL(file);
+    audio.onloadedmetadata = () => {
+      fileTosha256(file).then((hash) => {
+        uploadAudioToStorage(hash, file, accessToken, boardId).then((url) => {
+          resolve2(url);
+        }).catch(reject);
+      }).catch(() => {
+        reject(new Error("Failed to generate hash"));
+      });
+    };
+    audio.onerror = () => {
+      reject(new Error("Failed to load audio"));
+    };
+  });
+};
+var calculateAudioPosition = (board, audioItem) => {
+  const cameraMbr = board.camera.getMbr();
+  const cameraWidth = cameraMbr.getWidth();
+  const translateX = cameraMbr.left + cameraWidth * 0.34;
+  const translateY = cameraMbr.getCenter().y - audioItem.getHeight() / 2;
+  const scale = cameraWidth * 0.32 / audioItem.getWidth();
+  return new Matrix2(translateX, translateY, scale, scale);
+};
 // src/Items/Placeholder/Placeholder.ts
 var PlaceholderImg = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M5 11.1L7 9.1L12.5 14.6L16 11.1L19 14.1V5H5V11.1ZM4 3H20C20.2652 3 20.5196 3.10536 20.7071 3.29289C20.8946 3.48043 21 3.73478 21 4V20C21 20.2652 20.8946 20.5196 20.7071 20.7071C20.5196 20.8946 20.2652 21 20 21H4C3.73478 21 3.48043 20.8946 3.29289 20.7071C3.10536 20.5196 3 20.2652 3 20V4C3 3.73478 3.10536 3.48043 3.29289 3.29289C3.48043 3.10536 3.73478 3 4 3ZM15.5 10C15.1022 10 14.7206 9.84196 14.4393 9.56066C14.158 9.27936 14 8.89782 14 8.5C14 8.10218 14.158 7.72064 14.4393 7.43934C14.7206 7.15804 15.1022 7 15.5 7C15.8978 7 16.2794 7.15804 16.5607 7.43934C16.842 7.72064 17 8.10218 17 8.5C17 8.89782 16.842 9.27936 16.5607 9.56066C16.2794 9.84196 15.8978 10 15.5 10Z" fill="white" fill-opacity="0.6"/>
@@ -39995,331 +40168,11 @@ class ImageItem extends BaseItem {
   onRemove() {
     const storageId = this.getStorageId();
     if (storageId) {
-      deleteMedia([storageId], this.board.getBoardId());
-    }
-    super.onRemove();
-  }
-}
-// src/Items/Audio/Audio.ts
-class AudioItem extends BaseItem {
-  events;
-  extension;
-  itemType = "Audio";
-  parent = "Board";
-  transformation;
-  linkTo;
-  subject = new Subject;
-  loadCallbacks = [];
-  beforeLoadCallbacks = [];
-  transformationRenderBlock = undefined;
-  url = "";
-  isPlaying = false;
-  currentTime = 0;
-  isStorageUrl = true;
-  constructor(board, isStorageUrl, url, events, id = "", extension2) {
-    super(board, id);
-    this.events = events;
-    this.extension = extension2;
-    this.linkTo = new LinkTo(this.id, events);
-    this.board = board;
-    this.isStorageUrl = isStorageUrl;
-    if (url) {
-      this.applyUrl(url);
-    }
-    this.transformation = new Transformation(id, events);
-    this.linkTo.subject.subscribe(() => {
-      this.updateMbr();
-      this.subject.publish(this);
-    });
-    this.transformation.subject.subscribe(this.onTransform);
-    this.right = this.left + conf.AUDIO_DIMENSIONS.width;
-    this.bottom = this.top + conf.AUDIO_DIMENSIONS.height;
-    this.shouldUseCustomRender = true;
-  }
-  setCurrentTime(time) {
-    this.currentTime = time;
-  }
-  getCurrentTime() {
-    return this.currentTime;
-  }
-  getIsStorageUrl() {
-    return this.isStorageUrl;
-  }
-  onTransform = () => {
-    this.updateMbr();
-    this.subject.publish(this);
-  };
-  doOnceBeforeOnLoad = (callback) => {
-    this.loadCallbacks.push(callback);
-  };
-  doOnceOnLoad = (callback) => {
-    this.loadCallbacks.push(callback);
-  };
-  setIsPlaying(isPlaying) {
-    this.isPlaying = isPlaying;
-    this.shouldRenderOutsideViewRect = isPlaying;
-    this.subject.publish(this);
-  }
-  getIsPlaying() {
-    return this.isPlaying;
-  }
-  applyUrl(url) {
-    if (this.isStorageUrl) {
-      try {
-        const newUrl = new URL(url);
-        this.url = `${window.location.origin}${newUrl.pathname}`;
-      } catch (_) {}
-    } else {
-      this.url = url;
-    }
-  }
-  setUrl(url) {
-    this.emit({
-      class: "Audio",
-      method: "setUrl",
-      item: [this.getId()],
-      url
-    });
-  }
-  getStorageId() {
-    if (!this.isStorageUrl) {
-      return;
-    }
-    return this.url.split("/").pop();
-  }
-  getUrl() {
-    return this.url;
-  }
-  onLoad = async () => {
-    this.shootBeforeLoadCallbacks();
-    this.updateMbr();
-    this.subject.publish(this);
-    this.shootLoadCallbacks();
-  };
-  onError = (_error) => {
-    this.updateMbr();
-    this.subject.publish(this);
-    this.shootLoadCallbacks();
-  };
-  updateMbr() {
-    const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
-    this.left = translateX;
-    this.top = translateY;
-    this.right = this.left + conf.AUDIO_DIMENSIONS.width * scaleX;
-    this.bottom = this.top + conf.AUDIO_DIMENSIONS.height * scaleY;
-  }
-  render(context) {
-    if (this.transformationRenderBlock) {
-      return;
-    }
-    const ctx = context.ctx;
-    const radius = 12 * this.transformation.getScale().x;
-    ctx.save();
-    ctx.globalCompositeOperation = "destination-out";
-    ctx.beginPath();
-    ctx.moveTo(this.left + radius, this.top);
-    ctx.lineTo(this.left + this.getWidth() - radius, this.top);
-    ctx.quadraticCurveTo(this.left + this.getWidth(), this.top, this.left + this.getWidth(), this.top + radius);
-    ctx.lineTo(this.left + this.getWidth(), this.top + this.getHeight() - radius);
-    ctx.quadraticCurveTo(this.left + this.getWidth(), this.top + this.getHeight(), this.left + this.getWidth() - radius, this.top + this.getHeight());
-    ctx.lineTo(this.left + radius, this.top + this.getHeight());
-    ctx.quadraticCurveTo(this.left, this.top + this.getHeight(), this.left, this.top + this.getHeight() - radius);
-    ctx.lineTo(this.left, this.top + radius);
-    ctx.quadraticCurveTo(this.left, this.top, this.left + radius, this.top);
-    ctx.closePath();
-    ctx.fill();
-    ctx.restore();
-  }
-  renderHTML(documentFactory) {
-    const div = documentFactory.createElement("audio-item");
-    const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
-    const transform = `translate(${translateX}px, ${translateY}px) scale(${scaleX}, ${scaleY})`;
-    div.id = this.getId();
-    div.style.width = `${conf.AUDIO_DIMENSIONS.width}px`;
-    div.style.height = `${conf.AUDIO_DIMENSIONS.height}px`;
-    div.style.transformOrigin = "top left";
-    div.style.transform = transform;
-    div.style.position = "absolute";
-    div.setAttribute("audio-url", this.getUrl());
-    if (this.extension) {
-      div.setAttribute("extension", this.extension);
-    }
-    if (this.isStorageUrl) {
-      div.setAttribute("is-storage-url", "true");
-    }
-    div.setAttribute("data-link-to", "");
-    return div;
-  }
-  serialize() {
-    return {
-      itemType: "Audio",
-      url: this.url,
-      transformation: this.transformation.serialize(),
-      isStorageUrl: this.isStorageUrl,
-      extension: this.extension
-    };
-  }
-  deserialize(data) {
-    if (data.isStorageUrl) {
-      this.isStorageUrl = data.isStorageUrl;
-    }
-    if (data.transformation) {
-      this.transformation.deserialize(data.transformation);
-    }
-    if (data.url) {
-      this.setUrl(data.url);
-    }
-    if (data.extension) {
-      this.extension = data.extension;
-    }
-    return this;
-  }
-  apply(op) {
-    switch (op.class) {
-      case "Transformation":
-        this.transformation.apply(op);
-        break;
-      case "LinkTo":
-        this.linkTo.apply(op);
-        break;
-      case "Audio":
-        if (op.method === "setUrl") {
-          this.applyUrl(op.url);
-        }
-        this.subject.publish(this);
-        break;
-    }
-  }
-  emit(operation) {
-    if (this.events) {
-      const command = new AudioCommand([this], operation);
-      command.apply();
-      this.events.emit(operation, command);
-    } else {
-      this.apply(operation);
-    }
-  }
-  setId(id) {
-    this.id = id;
-    this.transformation.setId(id);
-    return this;
-  }
-  getId() {
-    return this.id;
-  }
-  shootLoadCallbacks() {
-    while (this.loadCallbacks.length > 0) {
-      this.loadCallbacks.shift()(this);
-    }
-  }
-  shootBeforeLoadCallbacks() {
-    while (this.beforeLoadCallbacks.length > 0) {
-      this.beforeLoadCallbacks.shift()(this);
-    }
-  }
-  getPath() {
-    const { left, top, right, bottom } = this.getMbr();
-    const leftTop = new Point(left, top);
-    const rightTop = new Point(right, top);
-    const rightBottom = new Point(right, bottom);
-    const leftBottom = new Point(left, bottom);
-    return new Path([
-      new Line(leftTop, rightTop),
-      new Line(rightTop, rightBottom),
-      new Line(rightBottom, leftBottom),
-      new Line(leftBottom, leftTop)
-    ], true);
-  }
-  getSnapAnchorPoints() {
-    const mbr = this.getMbr();
-    const width2 = mbr.getWidth();
-    const height2 = mbr.getHeight();
-    return [
-      new Point(mbr.left + width2 / 2, mbr.top),
-      new Point(mbr.left + width2 / 2, mbr.bottom),
-      new Point(mbr.left, mbr.top + height2 / 2),
-      new Point(mbr.right, mbr.top + height2 / 2)
-    ];
-  }
-  isClosed() {
-    return true;
-  }
-  getRichText() {
-    return null;
-  }
-  getLinkTo() {
-    return;
-  }
-  getExtension() {
-    return this.extension;
-  }
-  download() {
-    if (this.extension) {
-      const linkElem = conf.documentFactory.createElement("a");
-      linkElem.href = this.url;
-      linkElem.setAttribute("download", `${this.board.getBoardId()}.${this.extension}`);
-      linkElem.click();
-    }
-  }
-  onRemove() {
-    const storageId = this.getStorageId();
-    if (storageId) {
-      deleteMedia([storageId], this.board.getBoardId());
+      conf.hooks.beforeMediaRemove([storageId], this.board.getBoardId());
     }
     super.onRemove();
   }
 }
-// src/Items/Audio/AudioHelpers.ts
-var uploadAudioToStorage = async (hash, audioBlob, accessToken, boardId) => {
-  return new Promise((resolve2, reject) => {
-    fetch(`${window.location.origin}/api/v1/media/audio/${boardId}`, {
-      method: "POST",
-      headers: {
-        "Content-Type": audioBlob.type,
-        "x-audio-id": hash,
-        Authorization: `Bearer ${accessToken}`
-      },
-      body: audioBlob
-    }).then(async (response) => {
-      if (response.status !== 200) {
-        return catchErrorResponse(response, "audio");
-      }
-      return response.json();
-    }).then((data) => {
-      console.log(data);
-      resolve2(data.src);
-    }).catch((error) => {
-      console.error("Media storage error:", error);
-      reject(error);
-    });
-  });
-};
-var prepareAudio = (file, accessToken, boardId) => {
-  return new Promise((resolve2, reject) => {
-    const audio = document.createElement("audio");
-    audio.src = URL.createObjectURL(file);
-    audio.onloadedmetadata = () => {
-      fileTosha256(file).then((hash) => {
-        uploadAudioToStorage(hash, file, accessToken, boardId).then((url) => {
-          resolve2(url);
-        }).catch(reject);
-      }).catch(() => {
-        reject(new Error("Failed to generate hash"));
-      });
-    };
-    audio.onerror = () => {
-      reject(new Error("Failed to load audio"));
-    };
-  });
-};
-var calculateAudioPosition = (board, audioItem) => {
-  const cameraMbr = board.camera.getMbr();
-  const cameraWidth = cameraMbr.getWidth();
-  const translateX = cameraMbr.left + cameraWidth * 0.34;
-  const translateY = cameraMbr.getCenter().y - audioItem.getHeight() / 2;
-  const scale = cameraWidth * 0.32 / audioItem.getWidth();
-  return new Matrix2(translateX, translateY, scale, scale);
-};
 // src/isSafari.ts
 function isSafari() {
   if (typeof navigator === "undefined") {
@@ -51734,7 +51587,7 @@ class BoardSelection {
     const connectors = itemIds.flatMap((id) => {
       return this.board.items.getLinkedConnectorsById(id);
     }).map((connector) => connector.getId());
-    deleteMedia(this.getMediaStorageIds(), this.board.getBoardId());
+    conf.hooks.beforeMediaRemove(this.getMediaStorageIds(), this.board.getBoardId());
     this.emit({
       class: "Board",
       method: "remove",
@@ -51772,7 +51625,7 @@ class BoardSelection {
   }
   async duplicate() {
     const mediaIds = this.getMediaStorageIds();
-    const canDuplicate = mediaIds.length ? await updateMediaUsage(mediaIds, this.board.getBoardId()) : true;
+    const canDuplicate = mediaIds.length ? await conf.hooks.beforeMediaUpload(mediaIds, this.board.getBoardId()) : true;
     if (!canDuplicate) {
       return;
     }
@@ -52653,7 +52506,7 @@ class Board {
       newMap[newItemId] = itemData;
     }
     if (shouldUpdateMediaUsage) {
-      const canDuplicate = mediaStorageIds.length ? await updateMediaUsage(mediaStorageIds, this.getBoardId()) : true;
+      const canDuplicate = mediaStorageIds.length ? await conf.hooks.beforeMediaUpload(mediaStorageIds, this.getBoardId()) : true;
       if (!canDuplicate) {
         return;
       }
@@ -54966,7 +54819,7 @@ function handleAudioGenerate(response, board) {
 }
 function handleImageGenerate(response, board) {
   if (response.status === "completed" && response.base64) {
-    prepareImage(response.base64, account?.accessToken || null, board.getBoardId()).then((imageData) => {
+    prepareImage(response.base64, null, board.getBoardId()).then((imageData) => {
       const placeholderId = board.aiImagePlaceholder?.getId();
       if (placeholderId) {
         const placeholderNode = board.items.getById(placeholderId);
@@ -55296,12 +55149,10 @@ function initI18N(i18nInstance) {
 }
 export {
   validateRichTextData,
-  validateMediaFile,
   validateItemsMap,
   uploadVideoToStorage,
   uploadToTheStorage,
   updateRects,
-  updateMediaUsage,
   translateElementBy,
   transformHtmlOrTextToMarkdown,
   toRelativePoint,
@@ -55350,7 +55201,6 @@ export {
   forceNumberIntoInterval,
   fileTosha256,
   exportBoardSnapshot,
-  deleteMedia,
   decodeHtml,
   defaultCursors as cursors,
   createVideoItem,
@@ -55358,8 +55208,6 @@ export {
   conf,
   checkHotkeys,
   catmullRomInterpolate,
-  catchErrorResponse,
-  catchDuplicateErrorResponse,
   captureFrame,
   calculatePosition,
   calculateAudioPosition,