@onesy/ui-react 1.0.25 → 1.0.27

package/AudioRecorder/AudioRecorder.js

@@ -190,14 +190,9 @@ const AudioRecorder = react_1.default.forwardRef((props_, ref) => {
             // duration in seconds
             duration: refs.duration.current / 1e3
         };
-        // works well on desktop
-        // mobile has issues with fixing web audio
-        const { blob: blobAudioFix, duration: durationAudioFix, error } = await (0, utils_2.audioFix)(blob);
-        if (!error) {
+        const { blob: blobAudioFix, error } = await (0, utils_2.audioFix)(blob, meta.duration);
+        if (!error)
             blob = blobAudioFix;
-            if (durationAudioFix !== undefined)
-                meta.duration = durationAudioFix;
-        }
         if ((0, utils_1.is)('function', onConfirm_))
             onConfirm_(blob, meta);
     }, [onStop, onConfirm_]);

package/esm/AudioRecorder/AudioRecorder.js

@@ -215,18 +215,11 @@ const AudioRecorder = /*#__PURE__*/React.forwardRef((props_, ref) => {
       // duration in seconds
       duration: refs.duration.current / 1e3
     };
-
-    // works well on desktop
-    // mobile has issues with fixing web audio
     const {
       blob: blobAudioFix,
-      duration: durationAudioFix,
       error
-    } = await audioFix(blob);
-    if (!error) {
-      blob = blobAudioFix;
-      if (durationAudioFix !== undefined) meta.duration = durationAudioFix;
-    }
+    } = await audioFix(blob, meta.duration);
+    if (!error) blob = blobAudioFix;
     if (is('function', onConfirm_)) onConfirm_(blob, meta);
   }, [onStop, onConfirm_]);
   const onResume = React.useCallback(event => {

package/esm/index.js

@@ -1,4 +1,4 @@
-/** @license UiReact v1.0.25
+/** @license UiReact v1.0.27
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/esm/utils.js

@@ -1,9 +1,4 @@
-import * as ebml from 'ts-ebml';
-import { Buffer } from 'buffer';
 import { is, canvasFilterBrightness, canvasFilterContrast, canvasFilterSaturation, canvasFilterFade, canvasFilterInvert, canvasFilterOldPhoto, download, clamp, isEnvironment } from '@onesy/utils';
-if (isEnvironment('browser')) {
-  window.Buffer = Buffer;
-}
 export function reflow(element) {
   element?.offsetHeight;
 }
@@ -1259,41 +1254,44 @@ export const currencies = [{
   code: 'ZMK',
   name_plural: 'Zambian kwachas'
 }];
-export const audioFix = async blob => {
+export const audioFix = async (blob, duration) => {
   try {
-    const readAsArrayBuffer = () => {
-      return new Promise((resolve, reject) => {
-        const fileReader = new FileReader();
-        fileReader.readAsArrayBuffer(blob);
-        fileReader.onloadend = () => resolve(fileReader.result);
-        fileReader.onerror = event => reject(event.error);
-      });
-    };
-    const arrayBuffer = await readAsArrayBuffer();
-    const decoder = new ebml.Decoder();
-    const reader = new ebml.Reader();
-    reader.logging = false;
-    reader.drop_default_duration = false;
+    const arrayBuffer = await blob.arrayBuffer();
     const uint8Array = new Uint8Array(arrayBuffer);
-    const elements = decoder.decode(uint8Array);
-    elements.forEach(element => reader.read(element));
-    reader.stop();
-    const refinedMetadataBuf = ebml.tools.makeMetadataSeekable(reader.metadatas, reader.duration, reader.cues);
-    const body = arrayBuffer.slice(reader.metadataSize);
-    const result = new Blob([refinedMetadataBuf, body], {
-      type: blob.type
+
+    // Function to find an EBML element by its ID
+    function findElement(idHex) {
+      const idBytes = new Uint8Array(idHex.match(/.{1,2}/g).map(byte => parseInt(byte, 16)));
+      for (let i = 0; i < uint8Array.length - idBytes.length; i++) {
+        if (uint8Array.slice(i, i + idBytes.length).toString() === idBytes.toString()) return i + idBytes.length; // Return position after the ID
+      }
+      return -1;
+    }
+
+    // WebM duration EBML ID: 0x4489 (Segment Information -> Duration)
+    const durationPos = findElement("4489");
+    if (durationPos === -1) {
+      throw new Error("Duration element not found in the WebM file.");
+    }
+
+    // Encode new duration in IEEE 754 Float64 (Big Endian, 8 bytes)
+    const durationBytes = new Uint8Array(new Float64Array([duration]).buffer).reverse();
+
+    // Overwrite duration bytes in the WebM file
+    uint8Array.set(durationBytes, durationPos);
+
+    // Convert back to Blob
+    const blobUpdated = new Blob([uint8Array], {
+      type: "video/webm"
     });
     return {
-      blob: result
+      blob: blobUpdated,
+      duration
     };
   } catch (error) {
-    console.log('audioFix error', error);
-
-    // fallback
-    // return durationFallback(blob);
-
     return {
       blob,
+      duration,
       error
     };
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onesy/ui-react",
-  "version": "1.0.25",
+  "version": "1.0.27",
   "description": "UI for React",
   "repository": "https://github.com/onesy-me/onesy.git",
   "author": "Lazar <lazareric2@gmail.com>",
@@ -41,9 +41,7 @@
     "@onesy/icons-material-rounded-react": "^1.0.2",
     "@onesy/log": "^1.0.0",
     "@onesy/subscription": "^1.0.0",
-    "@onesy/utils": "^1.0.2",
-    "buffer": "^6.0.3",
-    "ts-ebml": "^3.0.1"
+    "@onesy/utils": "^1.0.2"
   },
   "publishConfig": {
     "access": "public",

package/utils.d.ts

@@ -46,4 +46,4 @@ export declare const currencies: {
     code: string;
     name_plural: string;
 }[];
-export declare const audioFix: (blob: Blob) => Promise<IAudioFix>;
+export declare const audioFix: (blob: Blob, duration: number) => Promise<IAudioFix>;

package/utils.js

@@ -1,35 +1,7 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.audioFix = exports.currencies = exports.iconFontSize = exports.formats = exports.toNumber = exports.caret = exports.keyboardStyleCommands = exports.keyboardStandardCommands = exports.getOverflowParent = exports.importIframeStyles = exports.replace = exports.sanitize = exports.minMaxBetweenNumbers = exports.controlPoint = exports.line = exports.angleToCoordinates = exports.matches = exports.save = exports.print = exports.canvasOldPhoto = exports.canvasInvert = exports.canvasFade = exports.canvasSaturation = exports.canvasContrast = exports.canvasBrightness = exports.image = exports.valueBreakpoints = exports.iconSizeToFontSize = exports.staticClassName = exports.reflow = void 0;
-const ebml = __importStar(require("ts-ebml"));
-const buffer_1 = require("buffer");
 const utils_1 = require("@onesy/utils");
-if ((0, utils_1.isEnvironment)('browser')) {
-    window.Buffer = buffer_1.Buffer;
-}
 function reflow(element) {
     element === null || element === void 0 ? void 0 : element.offsetHeight;
 }
@@ -1448,36 +1420,39 @@ exports.currencies = [
         name_plural: 'Zambian kwachas'
     }
 ];
-const audioFix = async (blob) => {
+const audioFix = async (blob, duration) => {
     try {
-        const readAsArrayBuffer = () => {
-            return new Promise((resolve, reject) => {
-                const fileReader = new FileReader();
-                fileReader.readAsArrayBuffer(blob);
-                fileReader.onloadend = () => resolve(fileReader.result);
-                fileReader.onerror = (event) => reject(event.error);
-            });
-        };
-        const arrayBuffer = await readAsArrayBuffer();
-        const decoder = new ebml.Decoder();
-        const reader = new ebml.Reader();
-        reader.logging = false;
-        reader.drop_default_duration = false;
+        const arrayBuffer = await blob.arrayBuffer();
         const uint8Array = new Uint8Array(arrayBuffer);
-        const elements = decoder.decode(uint8Array);
-        elements.forEach((element) => reader.read(element));
-        reader.stop();
-        const refinedMetadataBuf = ebml.tools.makeMetadataSeekable(reader.metadatas, reader.duration, reader.cues);
-        const body = arrayBuffer.slice(reader.metadataSize);
-        const result = new Blob([refinedMetadataBuf, body], { type: blob.type });
-        return { blob: result };
+        // Function to find an EBML element by its ID
+        function findElement(idHex) {
+            const idBytes = new Uint8Array(idHex.match(/.{1,2}/g).map(byte => parseInt(byte, 16)));
+            for (let i = 0; i < uint8Array.length - idBytes.length; i++) {
+                if (uint8Array.slice(i, i + idBytes.length).toString() === idBytes.toString())
+                    return i + idBytes.length; // Return position after the ID
+            }
+            return -1;
+        }
+        // WebM duration EBML ID: 0x4489 (Segment Information -> Duration)
+        const durationPos = findElement("4489");
+        if (durationPos === -1) {
+            throw new Error("Duration element not found in the WebM file.");
+        }
+        // Encode new duration in IEEE 754 Float64 (Big Endian, 8 bytes)
+        const durationBytes = new Uint8Array(new Float64Array([duration]).buffer).reverse();
+        // Overwrite duration bytes in the WebM file
+        uint8Array.set(durationBytes, durationPos);
+        // Convert back to Blob
+        const blobUpdated = new Blob([uint8Array], { type: "video/webm" });
+        return {
+            blob: blobUpdated,
+            duration
+        };
     }
     catch (error) {
-        console.log('audioFix error', error);
-        // fallback
-        // return durationFallback(blob);
         return {
             blob,
+            duration,
             error
         };
     }