@onesy/ui-react 1.0.24 → 1.0.25

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,51 @@ 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
+        };
+        // 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) {
+            blob = blobAudioFix;
+            if (durationAudioFix !== undefined)
+                meta.duration = durationAudioFix;
+        }
+        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,46 @@ 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
+    };
+
+    // 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;
+    }
+    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.25
  *
  * 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,9 @@
+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;
 }
@@ -1253,4 +1258,43 @@ export const currencies = [{
   rounding: 0,
   code: 'ZMK',
   name_plural: 'Zambian kwachas'
-}];
+}];
+export const audioFix = async blob => {
+  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 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
+    };
+  } catch (error) {
+    console.log('audioFix error', error);
+
+    // fallback
+    // return durationFallback(blob);
+
+    return {
+      blob,
+      error
+    };
+  }
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onesy/ui-react",
-  "version": "1.0.24",
+  "version": "1.0.25",
   "description": "UI for React",
   "repository": "https://github.com/onesy-me/onesy.git",
   "author": "Lazar <lazareric2@gmail.com>",
@@ -41,7 +41,9 @@
     "@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",
+    "buffer": "^6.0.3",
+    "ts-ebml": "^3.0.1"
   },
   "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) => Promise<IAudioFix>;

package/utils.js

@@ -1,7 +1,35 @@
 "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.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 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;
 }
@@ -1420,3 +1448,38 @@ exports.currencies = [
         name_plural: 'Zambian kwachas'
     }
 ];
+const audioFix = async (blob) => {
+    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 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 };
+    }
+    catch (error) {
+        console.log('audioFix error', error);
+        // fallback
+        // return durationFallback(blob);
+        return {
+            blob,
+            error
+        };
+    }
+};
+exports.audioFix = audioFix;