@onesy/ui-react 1.0.24 → 1.0.26

package/AudioRecorder/AudioRecorder.d.ts

@@ -16,7 +16,9 @@ export interface IAudioRecorder extends ILine {
     IconStart?: IElementReference;
     IconPause?: IElementReference;
     IconStop?: IElementReference;
-    onConfirm?: (value: Blob) => any;
+    onConfirm?: (value: Blob, meta: {
+        duration: number;
+    }) => any;
     onData?: (value: Blob) => any;
     onStart?: (event: React.MouseEvent<any>) => any;
     onPause?: (event: React.MouseEvent<any>) => any;

package/AudioRecorder/AudioRecorder.js

@@ -86,11 +86,14 @@ const AudioRecorder = react_1.default.forwardRef((props_, ref) => {
         root: react_1.default.useRef(null),
         mediaRecorder: react_1.default.useRef(null),
         mediaRecorderBytes: react_1.default.useRef([]),
-        start: react_1.default.useRef(0),
+        startedAt: react_1.default.useRef(0),
         valuePaused: react_1.default.useRef(0),
         value: react_1.default.useRef(null),
         animationFrame: react_1.default.useRef(null),
-        onData: react_1.default.useRef(null)
+        onData: react_1.default.useRef(null),
+        // fallback to duration calculation on desktop
+        // ie. for mobile where we can't easily determine duration
+        duration: react_1.default.useRef(0)
     };
     refs.onData.current = onData;
     const supported = (0, utils_1.isEnvironment)('browser') && ((_a = window.navigator.mediaDevices) === null || _a === void 0 ? void 0 : _a.getUserMedia);
@@ -105,7 +108,7 @@ const AudioRecorder = react_1.default.forwardRef((props_, ref) => {
         };
     }, []);
     const update = () => {
-        setValue(refs.valuePaused.current + (date_1.OnesyDate.milliseconds - refs.start.current));
+        setValue(refs.valuePaused.current + (date_1.OnesyDate.milliseconds - refs.startedAt.current));
         refs.animationFrame.current = requestAnimationFrame(update);
     };
     const onStart = react_1.default.useCallback(async (event) => {
@@ -136,7 +139,10 @@ const AudioRecorder = react_1.default.forwardRef((props_, ref) => {
                 onError(error);
             return;
         }
-        refs.start.current = date_1.OnesyDate.milliseconds;
+        // reset duration
+        refs.duration.current = 0;
+        // started at milliseconds
+        refs.startedAt.current = date_1.OnesyDate.milliseconds;
         // ~60+ fps
         refs.animationFrame.current = requestAnimationFrame(update);
         setStatus('running');
@@ -145,9 +151,10 @@ const AudioRecorder = react_1.default.forwardRef((props_, ref) => {
     }, [onStart_, onError]);
     const onPause = react_1.default.useCallback((event) => {
         // media recorder
-        if (refs.mediaRecorder.current) {
+        if (refs.mediaRecorder.current)
             refs.mediaRecorder.current.pause();
-        }
+        // add so far to duration
+        refs.duration.current += date_1.OnesyDate.milliseconds - refs.startedAt.current;
         clear();
         // Remember previous value
         refs.valuePaused.current = refs.value.current;
@@ -157,43 +164,46 @@ const AudioRecorder = react_1.default.forwardRef((props_, ref) => {
     }, [onPause_]);
     const onStop = react_1.default.useCallback((event) => {
         // media recorder
-        if (refs.mediaRecorder.current) {
+        if (refs.mediaRecorder.current)
             refs.mediaRecorder.current.stop();
-        }
         clear();
         setStatus('initial');
         setValue(0);
-        refs.start.current = 0;
         refs.valuePaused.current = 0;
         refs.value.current = 0;
         if ((0, utils_1.is)('function', onStop_))
             onStop_(event);
     }, [onStop_]);
     const onConfirm = react_1.default.useCallback(async (event) => {
+        var _a;
         // Stop
         onStop(event);
-        setTimeout(() => {
-            var _a;
-            // Get the blob
-            const mimeType = (_a = refs.mediaRecorder.current) === null || _a === void 0 ? void 0 : _a.mimeType;
-            console.log('AudioRecorder onConfirm', mimeType);
-            const blob = new Blob(refs.mediaRecorderBytes.current, { type: mimeType });
-            // clean up
-            refs.mediaRecorderBytes.current = [];
-            console.log('AudioRecorder blob', blob, blob.size);
-            if ((0, utils_1.is)('function', onConfirm_))
-                onConfirm_(blob);
-        }, 14);
+        // add so far to duration
+        refs.duration.current += date_1.OnesyDate.milliseconds - refs.startedAt.current;
+        await (0, utils_1.wait)(40);
+        // Get the blob
+        const mimeType = (_a = refs.mediaRecorder.current) === null || _a === void 0 ? void 0 : _a.mimeType;
+        let blob = new Blob(refs.mediaRecorderBytes.current, { type: mimeType });
+        // clean up
+        refs.mediaRecorderBytes.current = [];
+        const meta = {
+            // duration in seconds
+            duration: refs.duration.current / 1e3
+        };
+        const { blob: blobAudioFix, error } = await (0, utils_2.audioFix)(blob, meta.duration);
+        if (!error)
+            blob = blobAudioFix;
+        if ((0, utils_1.is)('function', onConfirm_))
+            onConfirm_(blob, meta);
     }, [onStop, onConfirm_]);
     const onResume = react_1.default.useCallback((event) => {
         // media recorder
-        if (refs.mediaRecorder.current) {
+        if (refs.mediaRecorder.current)
             refs.mediaRecorder.current.resume();
-        }
+        // record at milliseconds
+        refs.startedAt.current = date_1.OnesyDate.milliseconds;
         // ~60+ fps
         refs.animationFrame.current = requestAnimationFrame(update);
-        // Update start, valuePaused value
-        refs.start.current = date_1.OnesyDate.milliseconds;
         setStatus('running');
         if ((0, utils_1.is)('function', onResume_))
             onResume_(event);

package/esm/AudioRecorder/AudioRecorder.js

@@ -5,7 +5,7 @@ const _excluded = ["size", "pause", "renderMain", "renderTime", "loading", "disa
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React from 'react';
-import { getLeadingZerosNumber, is, isEnvironment } from '@onesy/utils';
+import { getLeadingZerosNumber, is, isEnvironment, wait } from '@onesy/utils';
 import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
 import { OnesyDate, duration } from '@onesy/date';
 import IconMaterialMic from '@onesy/icons-material-rounded-react/IconMaterialMicW100';
@@ -18,7 +18,7 @@ import FadeElement from '../Fade';
 import TypeElement from '../Type';
 import TooltipElement from '../Tooltip';
 import IconButtonElement from '../IconButton';
-import { staticClassName } from '../utils';
+import { audioFix, staticClassName } from '../utils';
 const useStyle = styleMethod(theme => ({
   '@keyframes pulse': {
     '0%': {
@@ -103,11 +103,14 @@ const AudioRecorder = /*#__PURE__*/React.forwardRef((props_, ref) => {
     root: React.useRef(null),
     mediaRecorder: React.useRef(null),
     mediaRecorderBytes: React.useRef([]),
-    start: React.useRef(0),
+    startedAt: React.useRef(0),
     valuePaused: React.useRef(0),
     value: React.useRef(null),
     animationFrame: React.useRef(null),
-    onData: React.useRef(null)
+    onData: React.useRef(null),
+    // fallback to duration calculation on desktop
+    // ie. for mobile where we can't easily determine duration
+    duration: React.useRef(0)
   };
   refs.onData.current = onData;
   const supported = isEnvironment('browser') && window.navigator.mediaDevices?.getUserMedia;
@@ -122,7 +125,7 @@ const AudioRecorder = /*#__PURE__*/React.forwardRef((props_, ref) => {
     };
   }, []);
   const update = () => {
-    setValue(refs.valuePaused.current + (OnesyDate.milliseconds - refs.start.current));
+    setValue(refs.valuePaused.current + (OnesyDate.milliseconds - refs.startedAt.current));
     refs.animationFrame.current = requestAnimationFrame(update);
   };
   const onStart = React.useCallback(async event => {
@@ -157,7 +160,12 @@ const AudioRecorder = /*#__PURE__*/React.forwardRef((props_, ref) => {
       if (is('function', onError)) onError(error);
       return;
     }
-    refs.start.current = OnesyDate.milliseconds;
+
+    // reset duration
+    refs.duration.current = 0;
+
+    // started at milliseconds
+    refs.startedAt.current = OnesyDate.milliseconds;
 
     // ~60+ fps
     refs.animationFrame.current = requestAnimationFrame(update);
@@ -166,9 +174,10 @@ const AudioRecorder = /*#__PURE__*/React.forwardRef((props_, ref) => {
   }, [onStart_, onError]);
   const onPause = React.useCallback(event => {
     // media recorder
-    if (refs.mediaRecorder.current) {
-      refs.mediaRecorder.current.pause();
-    }
+    if (refs.mediaRecorder.current) refs.mediaRecorder.current.pause();
+
+    // add so far to duration
+    refs.duration.current += OnesyDate.milliseconds - refs.startedAt.current;
     clear();
 
     // Remember previous value
@@ -178,13 +187,10 @@ const AudioRecorder = /*#__PURE__*/React.forwardRef((props_, ref) => {
   }, [onPause_]);
   const onStop = React.useCallback(event => {
     // media recorder
-    if (refs.mediaRecorder.current) {
-      refs.mediaRecorder.current.stop();
-    }
+    if (refs.mediaRecorder.current) refs.mediaRecorder.current.stop();
     clear();
     setStatus('initial');
     setValue(0);
-    refs.start.current = 0;
     refs.valuePaused.current = 0;
     refs.value.current = 0;
     if (is('function', onStop_)) onStop_(event);
@@ -192,31 +198,39 @@ const AudioRecorder = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const onConfirm = React.useCallback(async event => {
     // Stop
     onStop(event);
-    setTimeout(() => {
-      // Get the blob
-      const mimeType = refs.mediaRecorder.current?.mimeType;
-      console.log('AudioRecorder onConfirm', mimeType);
-      const blob = new Blob(refs.mediaRecorderBytes.current, {
-        type: mimeType
-      });
 
-      // clean up
-      refs.mediaRecorderBytes.current = [];
-      console.log('AudioRecorder blob', blob, blob.size);
-      if (is('function', onConfirm_)) onConfirm_(blob);
-    }, 14);
+    // add so far to duration
+    refs.duration.current += OnesyDate.milliseconds - refs.startedAt.current;
+    await wait(40);
+
+    // Get the blob
+    const mimeType = refs.mediaRecorder.current?.mimeType;
+    let blob = new Blob(refs.mediaRecorderBytes.current, {
+      type: mimeType
+    });
+
+    // clean up
+    refs.mediaRecorderBytes.current = [];
+    const meta = {
+      // duration in seconds
+      duration: refs.duration.current / 1e3
+    };
+    const {
+      blob: blobAudioFix,
+      error
+    } = await audioFix(blob, meta.duration);
+    if (!error) blob = blobAudioFix;
+    if (is('function', onConfirm_)) onConfirm_(blob, meta);
   }, [onStop, onConfirm_]);
   const onResume = React.useCallback(event => {
     // media recorder
-    if (refs.mediaRecorder.current) {
-      refs.mediaRecorder.current.resume();
-    }
+    if (refs.mediaRecorder.current) refs.mediaRecorder.current.resume();
+
+    // record at milliseconds
+    refs.startedAt.current = OnesyDate.milliseconds;
 
     // ~60+ fps
     refs.animationFrame.current = requestAnimationFrame(update);
-
-    // Update start, valuePaused value
-    refs.start.current = OnesyDate.milliseconds;
     setStatus('running');
     if (is('function', onResume_)) onResume_(event);
   }, [onResume_]);

package/esm/index.js

@@ -1,4 +1,4 @@
-/** @license UiReact v1.0.24
+/** @license UiReact v1.0.26
  *
  * 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,4 +1,7 @@
 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;
 }
@@ -1253,4 +1256,46 @@ export const currencies = [{
   rounding: 0,
   code: 'ZMK',
   name_plural: 'Zambian kwachas'
-}];
+}];
+export const audioFix = async (blob, duration) => {
+  try {
+    const arrayBuffer = await blob.arrayBuffer();
+    const uint8Array = new Uint8Array(arrayBuffer);
+
+    // 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) {
+    return {
+      blob,
+      duration,
+      error
+    };
+  }
+};

package/package.json

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

package/types.d.ts

@@ -38,4 +38,9 @@ export interface IMediaObject {
     urlSmall?: string;
     urlEmbed?: string;
 }
+export interface IAudioFix {
+    blob: Blob;
+    duration?: number;
+    error?: any;
+}
 export {};

package/utils.d.ts

@@ -1,4 +1,4 @@
-import { IPoint } from './types';
+import { IAudioFix, IPoint } from './types';
 export declare function reflow(element: HTMLElement): void;
 export declare const staticClassName: (name: string, theme: any) => any;
 export declare const iconSizeToFontSize: (value: string | number) => any;
@@ -46,3 +46,4 @@ export declare const currencies: {
     code: string;
     name_plural: string;
 }[];
+export declare const audioFix: (blob: Blob, duration: number) => Promise<IAudioFix>;

package/utils.js

@@ -1,7 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-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;
+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 utils_1 = require("@onesy/utils");
+if ((0, utils_1.isEnvironment)('browser')) {
+    window.Buffer = Buffer;
+}
 function reflow(element) {
     element === null || element === void 0 ? void 0 : element.offsetHeight;
 }
@@ -1420,3 +1423,41 @@ exports.currencies = [
         name_plural: 'Zambian kwachas'
     }
 ];
+const audioFix = async (blob, duration) => {
+    try {
+        const arrayBuffer = await blob.arrayBuffer();
+        const uint8Array = new Uint8Array(arrayBuffer);
+        // 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) {
+        return {
+            blob,
+            duration,
+            error
+        };
+    }
+};
+exports.audioFix = audioFix;