oolib 2.69.5 → 2.70.1

package/dist/components/AudioInput/comps/AudioAction.d.ts

@@ -0,0 +1,6 @@
+export function AudioAction({ inputRef, parentOnChange, isInRTE }: {
+    inputRef: any;
+    parentOnChange: any;
+    isInRTE: any;
+}): React.JSX.Element;
+import React from "react";

package/dist/components/AudioInput/comps/AudioAction.js

@@ -0,0 +1,37 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AudioAction = void 0;
+var react_1 = __importDefault(require("react"));
+var ActionMenu_1 = require("../../ActionMenu");
+var AudioAction = function (_a) {
+    var inputRef = _a.inputRef, parentOnChange = _a.parentOnChange, isInRTE = _a.isInRTE;
+    return (react_1.default.createElement("div", { style: __assign({}, (isInRTE ? { display: "none" } : {})) },
+        react_1.default.createElement(ActionMenu_1.ActionMenu, { popOutOfOverflowHiddenParent: true, ButtonComp: "ButtonGhost", M: true, actions: [
+                {
+                    id: "reuploadAudio",
+                    display: "Replace Audio",
+                    onClick: function () {
+                        inputRef.current.click();
+                    },
+                },
+                {
+                    display: "Delete",
+                    onClick: function () { return parentOnChange(undefined); },
+                },
+            ] })));
+};
+exports.AudioAction = AudioAction;

package/dist/components/AudioInput/comps/AudioPlayer.d.ts

@@ -0,0 +1,4 @@
+export function AudioPlayer({ audioData }: {
+    audioData: any;
+}): React.JSX.Element;
+import React from "react";

package/dist/components/AudioInput/comps/AudioPlayer.js

@@ -0,0 +1,34 @@
+"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.AudioPlayer = void 0;
+var react_1 = __importStar(require("react"));
+var styled_1 = require("../styled");
+var AudioPlayer = function (_a) {
+    var audioData = _a.audioData;
+    return (react_1.default.createElement(react_1.Fragment, null, audioData.map(function (i, d) { return (react_1.default.createElement(styled_1.StyledAudioElement, { key: "".concat(i - d), controls: true, src: d.publicUrl, controlsList: "nodownload noplaybackrate" // to hide controls
+     })); })));
+};
+exports.AudioPlayer = AudioPlayer;

package/dist/components/AudioInput/index.d.ts

@@ -0,0 +1,12 @@
+export default AudioInput;
+declare function AudioInput({ id, value, onChange: parentOnChange, readOnly, invert, isInRTE, files, ...props }: {
+    [x: string]: any;
+    id: any;
+    value: any;
+    onChange: any;
+    readOnly: any;
+    invert: any;
+    isInRTE: any;
+    files: any;
+}): React.JSX.Element;
+import React from "react";

package/dist/components/AudioInput/index.js

@@ -0,0 +1,111 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var Buttons_1 = require("../Buttons");
+var BlockLabel_1 = require("../BlockLabel");
+var getBlockLabelProps_1 = require("../../utils/getBlockLabelProps");
+var bannerContext_1 = require("../Banners/bannerContext");
+var styled_1 = require("../VideoInput/styled");
+var ProgressBar_1 = require("../LoadersAndProgress/ProgressBar");
+var styled_components_1 = require("styled-components");
+var useFakeUploadImpression_1 = require("../../utilsOolib/useFakeUploadImpression");
+var AudioAction_1 = require("./comps/AudioAction");
+var AudioPlayer_1 = require("./comps/AudioPlayer");
+var styled_js_1 = require("./styled.js");
+function AudioInput(_a) {
+    var id = _a.id, value = _a.value, parentOnChange = _a.onChange, readOnly = _a.readOnly, invert = _a.invert, isInRTE = _a.isInRTE, files = _a.files, props = __rest(_a, ["id", "value", "onChange", "readOnly", "invert", "isInRTE", "files"]);
+    var audioData = value || [];
+    var theme = (0, styled_components_1.useTheme)();
+    var _b = (0, react_1.useState)(null), uploadProgress = _b[0], setUploadProgress = _b[1];
+    var SET_ALERT_BANNER = (0, bannerContext_1.useBannerContext)().SET_ALERT_BANNER;
+    var handleUploadProgess = function (progress) { return setUploadProgress(progress); };
+    var inputRef = (0, react_1.useRef)();
+    var _c = (theme === null || theme === void 0 ? void 0 : theme.useUploadMedia({
+        mediaConfigs: {
+            type: "files",
+            folderName: "audios",
+            mediaType: "audio",
+        },
+        handleUploadProgess: handleUploadProgess,
+    })) || (0, useFakeUploadImpression_1.useFakeUploadImpression)({ handleUploadProgess: handleUploadProgess, fileType: "audio" }), upload = _c.mutate, isLoading = _c.isLoading;
+    var handleUpload = function (files) {
+        if (!files)
+            return;
+        if (!upload)
+            return;
+        upload(files, {
+            onSuccess: function (data) {
+                parentOnChange(id, [data[0].fileData]);
+            },
+            onError: function (err) {
+                var _a;
+                SET_ALERT_BANNER(((_a = err.response) === null || _a === void 0 ? void 0 : _a.data.errors[0].msg) || err.message, "red", 3500);
+            },
+        });
+    };
+    (0, react_1.useEffect)(function () {
+        if (files) {
+            handleUpload(files);
+        }
+    }, []);
+    return (react_1.default.createElement(react_1.Fragment, null,
+        react_1.default.createElement(BlockLabel_1.BlockLabel, __assign({}, (0, getBlockLabelProps_1.getBlockLabelProps)(props))),
+        readOnly ? (react_1.default.createElement(AudioPlayer_1.AudioPlayer, { audioData: audioData })) : (audioData === null || audioData === void 0 ? void 0 : audioData.length) === 0 && !isLoading ? (react_1.default.createElement(styled_1.StyledUploadEmbedBlock, { invert: invert },
+            react_1.default.createElement(styled_1.StyledInnerWrapper, null,
+                react_1.default.createElement(Buttons_1.ButtonSecondary, { onClick: function () { return inputRef.current.click(); }, icon: "UploadSimple", value: "Upload Audio", accept: "audio/*", invert: invert })))) : isLoading ? (react_1.default.createElement(styled_1.StyledUploadEmbedBlock, { invert: invert },
+            react_1.default.createElement(styled_1.StyledInnerWrapper, null,
+                react_1.default.createElement(ProgressBar_1.ProgressBar, { progress: uploadProgress, text: uploadProgress && uploadProgress !== 100
+                        ? uploadProgress + "%"
+                        : "Almost Done..." })))) : (audioData && (react_1.default.createElement(styled_js_1.StyledAudioPlayerWrapper, null,
+            react_1.default.createElement(AudioPlayer_1.AudioPlayer, { audioData: audioData }),
+            react_1.default.createElement(AudioAction_1.AudioAction, __assign({}, __assign(__assign({}, isInRTE), { inputRef: inputRef, parentOnChange: parentOnChange })))))),
+        react_1.default.createElement("input", { type: "file" // When user clicks on upload new video from action menu inputRef.current.click() this does not work for upload button. this approch deals with that issue.
+            , accept: "audio/*", ref: inputRef, style: { display: "none" }, id: "AudioField", onChange: function (v) { return handleUpload(v.target.files); } })));
+}
+;
+exports.default = AudioInput;

package/dist/components/AudioInput/styled.d.ts

@@ -0,0 +1,4 @@
+export const StyledAudioEmbedPreview: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledAudioEmbedPlayed: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledAudioElement: import("styled-components").StyledComponent<"audio", any, {}, never>;
+export const StyledAudioPlayerWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/components/AudioInput/styled.js

@@ -0,0 +1,17 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledAudioPlayerWrapper = exports.StyledAudioElement = exports.StyledAudioEmbedPlayed = exports.StyledAudioEmbedPreview = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+var themes_1 = require("../../themes");
+exports.StyledAudioEmbedPreview = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    padding-top: 2rem;\n"], ["\n    padding-top: 2rem;\n"])));
+exports.StyledAudioEmbedPlayed = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    padding-top: 56.25%;\n    position: relative;\n"], ["\n    padding-top: 56.25%;\n    position: relative;\n"])));
+exports.StyledAudioElement = styled_components_1.default.audio(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    width: 300px;\n    height: 40px;\n    background-color: ", ";\n    &::-webkit-media-controls-enclosure {\n        border-radius: 0;\n    }\n\n    &::-webkit-media-controls-panel {\n        background-color: ", ";\n    }\n    /* -webkit-appearance: none; */\n    \n    /* Reset webkit border-radius to 0 */\n    /* -webkit-border-radius: 0; */\n"], ["\n    width: 300px;\n    height: 40px;\n    background-color: ", ";\n    &::-webkit-media-controls-enclosure {\n        border-radius: 0;\n    }\n\n    &::-webkit-media-controls-panel {\n        background-color: ", ";\n    }\n    /* -webkit-appearance: none; */\n    \n    /* Reset webkit border-radius to 0 */\n    /* -webkit-border-radius: 0; */\n"])), themes_1.colors.greyColor10, themes_1.colors.greyColor10);
+exports.StyledAudioPlayerWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    width: inherit;\n    margin: 2rem 0rem;\n"], ["\n    display: flex;\n    align-items: center;\n    width: inherit;\n    margin: 2rem 0rem;\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/components/Dropdowns/comps/OptionsShell/comps/OptionsAnimateWrapper/index.d.ts

@@ -0,0 +1,12 @@
+export function OptionsAnimateWrapper({ options, optionsRef, relativeToRef, showOptions, invert, yOrientation, fixPos, optionsAnchor, children, }: {
+    options: any;
+    optionsRef: any;
+    relativeToRef: any;
+    showOptions: any;
+    invert: any;
+    yOrientation: any;
+    fixPos: any;
+    optionsAnchor: any;
+    children: any;
+}): React.JSX.Element;
+import React from "react";

package/dist/components/Dropdowns/comps/OptionsShell/comps/OptionsAnimateWrapper/index.js

@@ -0,0 +1,67 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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.OptionsAnimateWrapper = void 0;
+var react_1 = __importStar(require("react"));
+var styled_1 = require("./styled");
+var OptionsAnimateWrapper = function (_a) {
+    var _b;
+    var _c;
+    var options = _a.options, optionsRef = _a.optionsRef, relativeToRef = _a.relativeToRef, showOptions = _a.showOptions, invert = _a.invert, yOrientation = _a.yOrientation, fixPos = _a.fixPos, optionsAnchor = _a.optionsAnchor, children = _a.children;
+    var selectCompRect = (_c = relativeToRef === null || relativeToRef === void 0 ? void 0 : relativeToRef.current) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect();
+    //we need to recalc when ops length change because, in tag comps, when loading a fixed set of 'loading' options are shown
+    //before the actual number of options are loaded
+    //useMemo wont work cuz it runs before render, and before render ref doesnt exist.
+    var _d = (0, react_1.useState)({
+        width: undefined,
+        openHeight: undefined,
+    }), _e = _d[0], width = _e.width, openHeight = _e.openHeight, setWidthAndOpenHeight = _d[1];
+    (0, react_1.useEffect)(function () {
+        var _a, _b, _c, _d;
+        setWidthAndOpenHeight({
+            width: (_b = (_a = optionsRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) === null || _b === void 0 ? void 0 : _b.width,
+            openHeight: (_d = (_c = optionsRef.current) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect()) === null || _d === void 0 ? void 0 : _d.height,
+        });
+    }, [options.length]);
+    return (react_1.default.createElement(styled_1.StyledOptionsAnimateWrapper, { invert: invert, isOpen: showOptions, width: width, openHeight: openHeight, style: __assign({ zIndex: 100000 }, (fixPos
+            ? __assign({ position: "fixed", top: "".concat(fixPos.y -
+                    (yOrientation === "top" ? (selectCompRect === null || selectCompRect === void 0 ? void 0 : selectCompRect.height) || 0 : 0), "px"), left: "".concat(fixPos.x, "px") }, (yOrientation === "top"
+                ? { transform: "translateY(-100%)" }
+                : {})) : __assign(__assign({ position: "absolute" }, (optionsAnchor ? (_b = {}, _b[optionsAnchor] = 0, _b) : { left: 0 })), (yOrientation === "bottom"
+            ? { bottom: 0, transform: "translateY(100%)" }
+            : { top: 0, transform: "translateY(-100%)" })))) }, children));
+};
+exports.OptionsAnimateWrapper = OptionsAnimateWrapper;

package/dist/components/Dropdowns/comps/OptionsShell/comps/OptionsAnimateWrapper/styled.d.ts

@@ -0,0 +1,2 @@
+/** for lightbox shell */
+export const StyledOptionsAnimateWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/components/Dropdowns/comps/OptionsShell/comps/OptionsAnimateWrapper/styled.js

@@ -0,0 +1,25 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledOptionsAnimateWrapper = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+var globalVariables_1 = require("../../../../../../globalStyles/globalVariables");
+var mixins_1 = require("../../../../../../themes/mixins");
+/** for lightbox shell */
+exports.StyledOptionsAnimateWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: ", ";\n  /**\n    'else 100%' is very important. \n    what this does is, on first render, it allows the optionsWrapper within to take whatever width \n    its supposed to i.e max-content / 100% width of select / 36rem.\n    Then on the next render (after the ref has already been attached to optionsWrapper), the proper width\n    gets calculated and passed to this component.\n\n    Without this 100%, this will not work > scenarios where there is enough space for the dropdown to \n    stretch to the width of the select OR 36rem. Instead it will always stick to its min-width which is \n    max-content\n  */\n  width: ", ";\n  overflow: hidden;\n  ", ";\n  ", ";\n  border-width: ", "; //hack, otherwsie this shit line shows when options are closed\n"], ["\n  height: ", ";\n  /**\n    'else 100%' is very important. \n    what this does is, on first render, it allows the optionsWrapper within to take whatever width \n    its supposed to i.e max-content / 100% width of select / 36rem.\n    Then on the next render (after the ref has already been attached to optionsWrapper), the proper width\n    gets calculated and passed to this component.\n\n    Without this 100%, this will not work > scenarios where there is enough space for the dropdown to \n    stretch to the width of the select OR 36rem. Instead it will always stick to its min-width which is \n    max-content\n  */\n  width: ", ";\n  overflow: hidden;\n  ", ";\n  ", ";\n  border-width: ", "; //hack, otherwsie this shit line shows when options are closed\n"])), function (_a) {
+    var isOpen = _a.isOpen, openHeight = _a.openHeight;
+    return isOpen ? (openHeight ? openHeight + 'px' : 'auto') : 0;
+}, function (_a) {
+    var width = _a.width;
+    return width ? width + 'px' : '100%';
+}, (0, mixins_1.transition)('height', 'border-width'), globalVariables_1.globalLightboxStyle, function (_a) {
+    var isOpen = _a.isOpen;
+    return isOpen ? '1px' : 0;
+});
+var templateObject_1;

package/dist/components/Dropdowns/comps/OptionsShell/index.js

@@ -44,13 +44,12 @@ var usePopOutOfOverflowHiddenParent_1 = require("../../../../utils/usePopOutOfOv
 var Buttons_1 = require("../../../Buttons");
 var ModalLarge_1 = require("../../../Modals/ModalLarge");
 var styled_1 = require("./styled");
+var OptionsAnimateWrapper_1 = require("./comps/OptionsAnimateWrapper");
 exports.OptionsShell = react_1.default.forwardRef(function (_a, ref) {
-    var _b;
-    var _c, _d, _e, _f, _g;
-    var yOrientation = _a.yOrientation, lightboxHeight = _a.lightboxHeight, lightboxStyle = _a.lightboxStyle, options = _a.options, optionsAnchor = _a.optionsAnchor, showOptions = _a.showOptions, handleHideOptions = _a.handleHideOptions, children = _a.children, SelectComp = _a.SelectComp, label = _a.label, optionsModalLabel = _a.optionsModalLabel, invert = _a.invert, showDoneButton = _a.showDoneButton, _h = _a.popOutOfOverflowHiddenParent, popOutOfOverflowHiddenParent = _h === void 0 ? false : _h, relativeToRef = _a.relativeToRef, S = _a.S;
+    var yOrientation = _a.yOrientation, lightboxHeight = _a.lightboxHeight, lightboxStyle = _a.lightboxStyle, options = _a.options, optionsAnchor = _a.optionsAnchor, showOptions = _a.showOptions, handleHideOptions = _a.handleHideOptions, children = _a.children, SelectComp = _a.SelectComp, label = _a.label, optionsModalLabel = _a.optionsModalLabel, invert = _a.invert, showDoneButton = _a.showDoneButton, _b = _a.popOutOfOverflowHiddenParent, popOutOfOverflowHiddenParent = _b === void 0 ? false : _b, relativeToRef = _a.relativeToRef, S = _a.S;
     var screenWidth = (0, useScreenWidth_1.useScreenWidth)();
     var isDesktop = screenWidth >= (0, mixins_1.getBreakPoint)("sm");
-    var _j = (0, usePopOutOfOverflowHiddenParent_1.usePopOutOfOverflowHiddenParent)(popOutOfOverflowHiddenParent), fixPos = _j.fixPos, applyFixedPos = _j.applyFixedPos, removeFixedPos = _j.removeFixedPos, trackerRef = _j.trackerRef;
+    var _c = (0, usePopOutOfOverflowHiddenParent_1.usePopOutOfOverflowHiddenParent)(popOutOfOverflowHiddenParent), fixPos = _c.fixPos, applyFixedPos = _c.applyFixedPos, removeFixedPos = _c.removeFixedPos, trackerRef = _c.trackerRef;
     (0, react_1.useEffect)(function () {
         if (popOutOfOverflowHiddenParent) {
             if (showOptions)
@@ -59,16 +58,19 @@ exports.OptionsShell = react_1.default.forwardRef(function (_a, ref) {
                 removeFixedPos();
         }
     }, [showOptions]);
-    var selectCompRect = (_c = relativeToRef === null || relativeToRef === void 0 ? void 0 : relativeToRef.current) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect();
     return isDesktop ? (react_1.default.createElement(react_1.Fragment, null,
         popOutOfOverflowHiddenParent && react_1.default.createElement("div", { ref: trackerRef }),
-        react_1.default.createElement(styled_1.StyledOptionsAnimateWrapper, { invert: invert, isOpen: showOptions, width: (_e = (_d = ref.current) === null || _d === void 0 ? void 0 : _d.getBoundingClientRect()) === null || _e === void 0 ? void 0 : _e.width, openHeight: (_g = (_f = ref.current) === null || _f === void 0 ? void 0 : _f.getBoundingClientRect()) === null || _g === void 0 ? void 0 : _g.height, style: __assign({ zIndex: 100000 }, (fixPos
-                ? __assign({ position: "fixed", top: "".concat(fixPos.y -
-                        (yOrientation === "top" ? (selectCompRect === null || selectCompRect === void 0 ? void 0 : selectCompRect.height) || 0 : 0), "px"), left: "".concat(fixPos.x, "px") }, (yOrientation === "top"
-                    ? { transform: "translateY(-100%)" }
-                    : {})) : __assign(__assign({ position: "absolute" }, (optionsAnchor ? (_b = {}, _b[optionsAnchor] = 0, _b) : { left: 0 })), (yOrientation === "bottom"
-                ? { bottom: 0, transform: "translateY(100%)" }
-                : { top: 0, transform: "translateY(-100%)" })))) },
+        react_1.default.createElement(OptionsAnimateWrapper_1.OptionsAnimateWrapper, __assign({}, {
+            options: options,
+            optionsRef: ref,
+            relativeToRef: relativeToRef,
+            showOptions: showOptions,
+            invert: invert,
+            yOrientation: yOrientation,
+            fixPos: fixPos,
+            optionsAnchor: optionsAnchor,
+            children: children,
+        }),
             react_1.default.createElement(styled_1.StyledOptionsWrapper, { id: "StyledOptionsWrapper", ref: ref, invert: invert, lightboxHeight: lightboxHeight, 
                 // className={className}
                 style: __assign(__assign({}, (lightboxStyle || {})), { position: "absolute", bottom: yOrientation === "top" ? undefined : 0, top: yOrientation === "top" ? 0 : undefined }) }, children)))) : (react_1.default.createElement(framer_motion_1.AnimatePresence, null, showOptions ? (react_1.default.createElement(ModalLarge_1.ModalLarge, { fitToContentHeight: true, title: optionsModalLabel || label, onClose: handleHideOptions, invert: invert, S: S },

package/dist/components/VideoInput/comps/EmbedLinkModal.js

@@ -29,7 +29,7 @@ var ModalSmall_1 = require("../../Modals/ModalSmall");
 var TextInputs_1 = require("../../TextInputs");
 var Paddings_1 = require("../../Paddings");
 var Buttons_1 = require("../../Buttons");
-var styled_index_1 = require("../styled.index");
+var styled_1 = require("../styled");
 var EmbedLinkModal = function (_a) {
     var _b;
     var id = _a.id, setShowEmbedLinkModal = _a.setShowEmbedLinkModal, value = _a.value, createVideoPreview = _a.createVideoPreview, canPlay = _a.canPlay, onChange = _a.onChange, invert = _a.invert;
@@ -42,7 +42,7 @@ var EmbedLinkModal = function (_a) {
         react_1.default.createElement(TextInputs_1.TextInput, { icon: "LinkSimple", onChange: function (k, v) { return setLocalValue(v ? [{ publicUrl: v }] : undefined); }, value: localValue && ((_b = localValue[0]) === null || _b === void 0 ? void 0 : _b.publicUrl), placeholder: "Paste a url here", clearBtn: { icon: 'X' } }),
         localValue && react_1.default.createElement(Paddings_1.PaddingBottom20, null),
         createVideoPreview({ value: localValue }),
-        react_1.default.createElement(styled_index_1.StyledModalActionButtons, null,
+        react_1.default.createElement(styled_1.StyledModalActionButtons, null,
             react_1.default.createElement(Buttons_1.ButtonPrimary, { value: "Embed", disabled: !canPlay(localValue) || !localValue, 
                 // invert={invert}
                 onClick: function () {

package/dist/components/VideoInput/comps/VideoActionMenu.d.ts

@@ -0,0 +1,10 @@
+export function VideoActionMenu({ isInRTE, value, inputRef, setShowEmbedLinkModal, onChange, isUploadedVideo, invert }: {
+    isInRTE: any;
+    value: any;
+    inputRef: any;
+    setShowEmbedLinkModal: any;
+    onChange: any;
+    isUploadedVideo: any;
+    invert: any;
+}): React.JSX.Element;
+import React from "react";

package/dist/components/VideoInput/comps/VideoActionMenu.js

@@ -0,0 +1,47 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VideoActionMenu = void 0;
+var react_1 = __importDefault(require("react"));
+var styled_1 = require("../styled");
+var ActionMenu_1 = require("../../ActionMenu");
+var VideoActionMenu = function (_a) {
+    var isInRTE = _a.isInRTE, value = _a.value, inputRef = _a.inputRef, setShowEmbedLinkModal = _a.setShowEmbedLinkModal, onChange = _a.onChange, isUploadedVideo = _a.isUploadedVideo, invert = _a.invert;
+    return (react_1.default.createElement(styled_1.StyledActionButtonWrapper, null,
+        react_1.default.createElement("div", { style: __assign({}, (isInRTE ? { display: "none" } : {})) },
+            react_1.default.createElement(ActionMenu_1.ActionMenu, { popOutOfOverflowHiddenParent: true, ButtonComp: "ButtonPrimary", iconSize: "M", invert: invert, actions: [
+                    isUploadedVideo(value) // Only allow user to replace URL when embed method is URL
+                        ? {
+                            id: "uploadNewVideo",
+                            display: "Upload New Video",
+                            onClick: function () {
+                                inputRef.current.click(); // Trigger file explorer popup
+                            },
+                        }
+                        : {
+                            id: "replaceUrl",
+                            display: "Replace URL",
+                            onClick: function (e) {
+                                setShowEmbedLinkModal(true);
+                            },
+                        },
+                    {
+                        display: "Delete",
+                        onClick: function () { return onChange(undefined); },
+                    },
+                ] }))));
+};
+exports.VideoActionMenu = VideoActionMenu;

package/dist/components/VideoInput/index.js

@@ -41,16 +41,16 @@ var react_1 = __importStar(require("react"));
 var styled_components_1 = require("styled-components");
 var react_player_1 = __importDefault(require("react-player"));
 var BlockLabel_1 = require("../BlockLabel");
-var styled_index_1 = require("./styled.index");
+var styled_1 = require("./styled");
 var LoadersAndProgress_1 = require("../LoadersAndProgress");
 var Buttons_1 = require("../Buttons");
 var Typo_1 = require("../Typo");
 var EmbedLinkModal_1 = require("./comps/EmbedLinkModal");
-var ActionMenu_1 = require("../ActionMenu");
 var themes_1 = require("../../themes");
-var useFakeUploadMedia_1 = require("../../utilsOolib/useFakeUploadMedia");
+var useFakeUploadImpression_1 = require("../../utilsOolib/useFakeUploadImpression");
 var bannerContext_1 = require("../Banners/bannerContext");
-var VideoInput = function (_a) {
+var VideoActionMenu_1 = require("./comps/VideoActionMenu");
+function VideoInput(_a) {
     var id = _a.id, label = _a.label, sublabel = _a.sublabel, isRequired = _a.isRequired, _value = _a.value, onChange = _a.onChange, readOnly = _a.readOnly, lightPlayer = _a.light, _b = _a.enableVideoUpload, enableVideoUpload = _b === void 0 ? false : _b, isInRTE = _a.isInRTE, invert = _a.invert, files = _a.files, // //used by RTEVideoInput
     width = _a.width, height = _a.height;
     //backwards compatibility
@@ -65,27 +65,15 @@ var VideoInput = function (_a) {
     var inputRef = (0, react_1.useRef)();
     var handleUploadProgess = function (progress) { return setUploadProgress(progress); };
     var isUploadedVideo = function (value) { return value && Object.keys(value === null || value === void 0 ? void 0 : value[0]).length > 1; };
-    var upload;
-    var isLoading;
-    if (theme && theme.useUploadMedia) {
-        var uploadMediaContext = theme.useUploadMedia({
-            mediaConfigs: {
-                type: "files",
-                folderName: "videos",
-                mediaType: "video",
-            },
-            handleUploadProgess: handleUploadProgess,
-        });
-        if (uploadMediaContext) {
-            upload = uploadMediaContext.mutate;
-            isLoading = uploadMediaContext.isLoading;
-        }
-    }
-    else {
-        var fakeUploadMedia = (0, useFakeUploadMedia_1.useFakeUploadMedia)({ handleUploadProgess: handleUploadProgess });
-        upload = fakeUploadMedia.mutate;
-        isLoading = fakeUploadMedia.isLoading;
-    }
+    var _e = (theme === null || theme === void 0 ? void 0 : theme.useUploadMedia({
+        mediaConfigs: {
+            type: "files",
+            folderName: "videos",
+            mediaType: "video",
+        },
+        handleUploadProgess: handleUploadProgess,
+    })) ||
+        (0, useFakeUploadImpression_1.useFakeUploadImpression)({ handleUploadProgess: handleUploadProgess, fileType: "video" }), upload = _e.mutate, isLoading = _e.isLoading;
     var handleUpload = function (files) {
         // onChange(id, undefined) //so that the prev video is cleared and loader shows up
         if (!files)
@@ -107,29 +95,6 @@ var VideoInput = function (_a) {
             handleUpload(files);
         }
     }, []);
-    var genVideoActionMenu = function () { return (react_1.default.createElement(styled_index_1.StyledActionButtonWrapper, null,
-        react_1.default.createElement("div", { style: __assign({}, (isInRTE ? { display: "none" } : {})) },
-            react_1.default.createElement(ActionMenu_1.ActionMenu, { popOutOfOverflowHiddenParent: true, ButtonComp: "ButtonPrimary", iconSize: "M", invert: invert, actions: [
-                    isUploadedVideo(value) // Only allow user to replace URL when embed method is URL
-                        ? {
-                            id: "uploadNewVideo",
-                            display: "Upload New Video",
-                            onClick: function () {
-                                inputRef.current.click(); // Trigger file explorer popup
-                            },
-                        }
-                        : {
-                            id: "replaceUrl",
-                            display: "Replace URL",
-                            onClick: function (e) {
-                                setShowEmbedLinkModal(true);
-                            },
-                        },
-                    {
-                        display: "Delete",
-                        onClick: function () { return onChange(undefined); },
-                    },
-                ] })))); };
     var createVideoPreview = function (_a) {
         var _b;
         var value = _a.value, _c = _a.actionMenuButton, actionMenuButton = _c === void 0 ? false : _c;
@@ -149,20 +114,20 @@ var VideoInput = function (_a) {
                         "https://www.youtube.com/watch?v=" +
                             url.split("&list=")[0].match(regex)[1];
                 }
-                return (react_1.default.createElement(styled_index_1.StyledVideoEmbedPreviewSection, { style: { height: height } },
-                    actionMenuButton && genVideoActionMenu(),
+                return (react_1.default.createElement(styled_1.StyledVideoEmbedPreviewSection, { style: { height: height } },
+                    actionMenuButton && react_1.default.createElement(VideoActionMenu_1.VideoActionMenu, __assign({}, __assign(__assign({}, isInRTE), { value: value, inputRef: inputRef, setShowEmbedLinkModal: setShowEmbedLinkModal, onChange: onChange, isUploadedVideo: isUploadedVideo, invert: invert }))),
                     react_1.default.createElement(react_player_1.default, { id: "outVideo", url: url, controls: true, width: width || "100%", height: height, light: lightPlayer, style: { overflow: "hidden" } })));
         }
     };
     return (react_1.default.createElement(react_1.Fragment, null,
         react_1.default.createElement(BlockLabel_1.BlockLabel, { label: label, sublabel: sublabel, isRequired: isRequired, readOnly: readOnly, invert: invert }),
         readOnly ? (createVideoPreview({ value: value })) : (react_1.default.createElement(react_1.default.Fragment, null,
-            false ? (react_1.default.createElement(styled_index_1.StyledUploadEmbedBlock, { invert: invert },
-                react_1.default.createElement(styled_index_1.StyledInnerWrapper, null,
+            isLoading ? (react_1.default.createElement(styled_1.StyledUploadEmbedBlock, { invert: invert },
+                react_1.default.createElement(styled_1.StyledInnerWrapper, null,
                     react_1.default.createElement(LoadersAndProgress_1.ProgressBar, { progress: uploadProgress, text: uploadProgress && uploadProgress !== 100
                             ? uploadProgress + "%"
-                            : "Almost Done..." })))) : value ? (createVideoPreview({ value: value, actionMenuButton: true })) : (react_1.default.createElement(styled_index_1.StyledUploadEmbedBlock, { invert: invert },
-                react_1.default.createElement(styled_index_1.StyledInnerWrapper, null,
+                            : "Almost Done..." })))) : value ? (createVideoPreview({ value: value, actionMenuButton: true })) : (react_1.default.createElement(styled_1.StyledUploadEmbedBlock, { invert: invert },
+                react_1.default.createElement(styled_1.StyledInnerWrapper, null,
                     react_1.default.createElement(Buttons_1.ButtonSecondary, { value: "Add Video link", icon: "Plus", onClick: function () { return setShowEmbedLinkModal(true); }, invert: invert }),
                     enableVideoUpload && (react_1.default.createElement(react_1.default.Fragment, null,
                         react_1.default.createElement(Typo_1.SANS_2, { semibold: true, color: invert ? themes_1.colors.white_opacity60 : themes_1.colors.greyColor80 }, "OR"),
@@ -178,27 +143,5 @@ var VideoInput = function (_a) {
             }))))),
         react_1.default.createElement("input", { type: "file" // When user clicks on upload new video from action menu inputRef.current.click() this does not work for upload button. this approch deals with that issue.
             , accept: "video/*", ref: inputRef, style: { display: "none" }, id: "videoField", onChange: function (v) { return handleUpload(v.target.files); } })));
-};
-exports.default = VideoInput;
-function uploadVideoToLocalStorage(videoFile) {
-    console.log({ videoFile: videoFile });
-    // if (!videoFile) return
-    // // Check if the selected file is a Blob
-    // if (!(videoFile[0] instanceof Blob)) {
-    //   console.error('Invalid file type. Please select a video file.');
-    //   return;
-    // }
-    // // Create a new FileReader instance
-    // const reader = new FileReader();
-    // // When the FileReader finishes loading the video file
-    // reader.onloadend = () => {
-    //   // Retrieve the base64-encoded video data
-    //   const base64Data = reader.result;
-    //   // Save the video data to local storage
-    //   localStorage.setItem('uploadedVideo', base64Data);
-    //   // Display a success message or perform any desired actions
-    //   console.log('Video uploaded to local storage successfully.');
-    // };
-    // // Read the video file as a data URL
-    // reader.readAsDataURL(videoFile);
 }
+exports.default = VideoInput;

package/dist/index.d.ts

@@ -56,6 +56,7 @@ export { default as MetaBlock } from "./components/MetaBlock";
 export { ImageInput } from "./components/ImageInput";
 export { ProfileImageInput } from "./components/ImageInput/derivedComps/ProfileImageInput";
 export { default as VideoInput } from "./components/VideoInput";
+export { default as AudioInput } from "./components/AudioInput";
 export { SimpleTable } from "./components/SimpleTable";
 export { LoaderCircle, ProgressBar, LoaderCircle as Loader, LoaderOverlay } from "./components/LoadersAndProgress";
 export { BannerAlert, BannerInfo } from "./components/Banners";

package/dist/index.js

@@ -17,8 +17,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useBannerContext = exports.BannerContext = exports.BannerInfo = exports.BannerAlert = exports.VideoInput = exports.ProfileImageInput = exports.ImageInput = exports.MetaBlock = exports.HintsProvider = exports.genTagComp = exports.generateOptions = exports.OptionsSingle = exports.DropdownMulti = exports.DropdownSingle = exports.parseCardConfig = exports.ListProfile = exports.CardProfile = exports.CardEmbed = exports.ListContent = exports.CardContent = exports.DateTimeRangePicker = exports.DateTimePicker = exports.TimeRangePicker = exports.TimePicker = exports.DateRangePicker = exports.DatePicker = exports.TextLoader = exports.BarChart = exports.PageScrollIndicator = exports.HomeCover = exports.EmptyStates = exports.ModalSmall = exports.ModalLarge = exports.ModalConfirm = exports.SkeletonLoader = exports.Divider = exports.PercentCompletedPie = exports.Accordion = exports.ActionMenu = exports.Tooltip = exports.OKELink = exports.UserRoleBadge = exports.Section = exports.LoaderOverlay = exports.Loader = exports.ProgressBar = exports.LoaderCircle = exports.icons = exports.colors = exports.GlobalStyles = void 0;
-exports.SimpleTable = exports.BannerProvider = void 0;
+exports.BannerContext = exports.BannerInfo = exports.BannerAlert = exports.AudioInput = exports.VideoInput = exports.ProfileImageInput = exports.ImageInput = exports.MetaBlock = exports.HintsProvider = exports.genTagComp = exports.generateOptions = exports.OptionsSingle = exports.DropdownMulti = exports.DropdownSingle = exports.parseCardConfig = exports.ListProfile = exports.CardProfile = exports.CardEmbed = exports.ListContent = exports.CardContent = exports.DateTimeRangePicker = exports.DateTimePicker = exports.TimeRangePicker = exports.TimePicker = exports.DateRangePicker = exports.DatePicker = exports.TextLoader = exports.BarChart = exports.PageScrollIndicator = exports.HomeCover = exports.EmptyStates = exports.ModalSmall = exports.ModalLarge = exports.ModalConfirm = exports.SkeletonLoader = exports.Divider = exports.PercentCompletedPie = exports.Accordion = exports.ActionMenu = exports.Tooltip = exports.OKELink = exports.UserRoleBadge = exports.Section = exports.LoaderOverlay = exports.Loader = exports.ProgressBar = exports.LoaderCircle = exports.icons = exports.colors = exports.GlobalStyles = void 0;
+exports.SimpleTable = exports.BannerProvider = exports.useBannerContext = void 0;
 //css and styling related ( styled-components )
 var globalStyles_1 = require("./globalStyles");
 Object.defineProperty(exports, "GlobalStyles", { enumerable: true, get: function () { return globalStyles_1.GlobalStyles; } });
@@ -140,6 +140,8 @@ var ProfileImageInput_1 = require("./components/ImageInput/derivedComps/ProfileI
 Object.defineProperty(exports, "ProfileImageInput", { enumerable: true, get: function () { return ProfileImageInput_1.ProfileImageInput; } });
 var VideoInput_1 = require("./components/VideoInput");
 Object.defineProperty(exports, "VideoInput", { enumerable: true, get: function () { return __importDefault(VideoInput_1).default; } });
+var AudioInput_1 = require("./components/AudioInput");
+Object.defineProperty(exports, "AudioInput", { enumerable: true, get: function () { return __importDefault(AudioInput_1).default; } });
 //banners
 var Banners_1 = require("./components/Banners");
 Object.defineProperty(exports, "BannerAlert", { enumerable: true, get: function () { return Banners_1.BannerAlert; } });

package/dist/utilsOolib/useFakeUploadImpression.d.ts

@@ -0,0 +1,4 @@
+export function useFakeUploadImpression(options?: {}): {
+    mutate: (files: any, callbacks?: {}) => void;
+    isLoading: boolean;
+};

package/dist/utilsOolib/useFakeUploadImpression.js

@@ -0,0 +1,94 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFakeUploadImpression = void 0;
+var react_1 = require("react");
+var data = {
+    audio: [{
+            fileData: {
+                "kind": "storage#object",
+                "id": "cata_dev__media/audios/sampleaudio3_d9022d06-c304-4fbb-ade6-7d0784704768.wav/1694442705602562",
+                "selfLink": "https://www.googleapis.com/storage/v1/b/cata_dev__media/o/audios%2Fsampleaudio3_d9022d06-c304-4fbb-ade6-7d0784704768.wav",
+                "mediaLink": "https://storage.googleapis.com/download/storage/v1/b/cata_dev__media/o/audios%2Fsampleaudio3_d9022d06-c304-4fbb-ade6-7d0784704768.wav?generation=1694442705602562&alt=media",
+                "name": "audios/sampleaudio3_d9022d06-c304-4fbb-ade6-7d0784704768.wav",
+                "bucket": "cata_dev__media",
+                "generation": "1694442705602562",
+                "metageneration": "1",
+                "contentType": "audio/wav",
+                "storageClass": "STANDARD",
+                "size": 10544134,
+                "md5Hash": "G4cmpod1v6ysmkrndou8kQ==",
+                "crc32c": "SAkgWg==",
+                "etag": "CIKQvfziooEDEAE=",
+                "timeCreated": "2023-09-11T14:31:45.605Z",
+                "updated": "2023-09-11T14:31:45.605Z",
+                "timeStorageClassUpdated": "2023-09-11T14:31:45.605Z",
+                "originalFilename": "sampleaudio3.wav",
+                "mediaHost": "gcs",
+                "publicUrl": "https://storage.googleapis.com/cata_dev__media/audios/sampleaudio3_d9022d06-c304-4fbb-ade6-7d0784704768.wav"
+            },
+            "status": "success"
+        }],
+    video: [{
+            fileData: {
+                "kind": "storage#object",
+                "id": "cata_dev__media/videos/file_example_mp4_1920_18mg_1dded13e-9090-4477-b00e-78591823fd41.mp4/1694442756300353",
+                "selfLink": "https://www.googleapis.com/storage/v1/b/cata_dev__media/o/videos%2Ffile_example_mp4_1920_18mg_1dded13e-9090-4477-b00e-78591823fd41.mp4",
+                "mediaLink": "https://storage.googleapis.com/download/storage/v1/b/cata_dev__media/o/videos%2Ffile_example_mp4_1920_18mg_1dded13e-9090-4477-b00e-78591823fd41.mp4?generation=1694442756300353&alt=media",
+                "name": "videos/file_example_mp4_1920_18mg_1dded13e-9090-4477-b00e-78591823fd41.mp4",
+                "bucket": "cata_dev__media",
+                "generation": "1694442756300353",
+                "metageneration": "1",
+                "contentType": "video/mp4",
+                "storageClass": "STANDARD",
+                "size": 17839845,
+                "md5Hash": "16PezbYoDrDvOgWaw16g7g==",
+                "crc32c": "xo062A==",
+                "etag": "CMG805TjooEDEAE=",
+                "timeCreated": "2023-09-11T14:32:36.302Z",
+                "updated": "2023-09-11T14:32:36.302Z",
+                "timeStorageClassUpdated": "2023-09-11T14:32:36.302Z",
+                "originalFilename": "file_example_MP4_1920_18MG.mp4",
+                "mediaHost": "gcs",
+                "publicUrl": "https://storage.googleapis.com/cata_dev__media/videos/file_example_mp4_1920_18mg_1dded13e-9090-4477-b00e-78591823fd41.mp4"
+            }
+        }]
+};
+var useFakeUploadImpression = function (options) {
+    if (options === void 0) { options = {}; }
+    var handleUploadProgess = options.handleUploadProgess, fileType = options.fileType;
+    var _a = (0, react_1.useState)(false), isLoading = _a[0], setIsLoading = _a[1];
+    var simulateUploadProgress = function () {
+        var progress = 0;
+        var interval = setInterval(function () {
+            if (progress < 100) {
+                var increment = Math.floor(Math.random() * (101 - progress)); // Randomly increment up to remaining progress
+                progress = Math.min(progress + increment, 100);
+                handleUploadProgess && handleUploadProgess(progress);
+            }
+            else {
+                clearInterval(interval);
+                setIsLoading(false);
+            }
+        }, 500); //interval duration as needed
+        return interval;
+    };
+    var mutate = function (files, callbacks) {
+        if (callbacks === void 0) { callbacks = {}; }
+        var fileTypeData = data[fileType] && data[fileType][0];
+        if (fileTypeData) {
+            files = [{ fileData: fileTypeData.fileData, status: "success" }];
+        }
+        var onSuccess = callbacks.onSuccess;
+        setIsLoading(true);
+        // Simulate upload progress with setInterval
+        var uploadInterval = simulateUploadProgress();
+        // Simulate a successful upload after a delay (you can modify this as needed)
+        setTimeout(function () {
+            clearInterval(uploadInterval);
+            setIsLoading(false);
+            onSuccess(files);
+        }, 3000); // Adjust the delay duration as needed
+    };
+    return { mutate: mutate, isLoading: isLoading };
+};
+exports.useFakeUploadImpression = useFakeUploadImpression;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oolib",
-  "version": "2.69.5",
+  "version": "2.70.1",
   "description": " OKE Component Library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",