storie-component
Version:
A component for ReactJS to display stories
773 lines (772 loc) • 40.1 kB
JavaScript
(function(global, factory) {
typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react")) : typeof define === "function" && define.amd ? define(["exports", "react"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global["storie-component"] = {}, global.require$$0));
})(this, function(exports2, require$$0) {
"use strict";
var __vite_style__ = document.createElement("style");
__vite_style__.textContent = "._spinnercontainer_p32o6_1{\n display: flex;\n justify-content: center;\n width: 100%;\n height: 100%;\n background-color: gray;\n border-radius: 20px;\n}\n._spinnercontainer_p32o6_1 ._spinnerloading_p32o6_9 {\n width: 60px;\n height: 100%;\n}._progressbar_g57o9_1{\n width: 100%;\n height: 10px;\n border-radius: 5px;\n margin-bottom: 10px;\n padding: 0 3px;\n}\n._progressbar_g57o9_1 svg {\n border-radius: 5px;\n}\n._bgprogress_g57o9_11{\n fill: #6767675c;\n box-shadow: 0 0 0 1px #6767675c;\n}\n._stories_15h3q_1 {\n border-radius: 20px;\n box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 43%);\n position: relative;\n display: flex;\n flex-direction: column;\n}\n._storiesaction_15h3q_8 {\n display: flex;\n position: absolute;\n height: inherit;\n width: inherit;\n}\n._storiesactionbutton_15h3q_14 {\n width: 50%;\n height: 100%;\n cursor: pointer;\n z-index: 1;\n}\n._countprogressstories_15h3q_20 {\n padding-top: 3px;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n position: absolute;\n width: 100%;\n}\n._hiddenprogressstories_15h3q_29 {\n visibility: hidden;\n opacity: 0;\n transition: visibility 0s 0.2s, opacity 0.2s ease-in-out;\n}\n._storiescontent_15h3q_34 {\n height: 100%;\n}\n._storiescontent_15h3q_34 img {\n border-radius: 20px;\n width: 100%;\n height: 100%;\n}\n._storiescontent_15h3q_34 video {\n border-radius: 20px;\n width: 100%;\n height: 100%;\n}\n._storiescontent_15h3q_34 iframe {\n border-radius: 20px;\n width: 100%;\n height: 100%;\n}\n._storiescontent_15h3q_34 ._jsx_15h3q_52 {\n border-radius: 20px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n height: 100%;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',\n 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',\n sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n._storiescontent_15h3q_34:first-child {\n margin-top: 1000px;\n}\n._mutedPosition_15h3q_68{\n position: absolute;\n top: 25px;\n right: 15px;\n filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.5));\n z-index: 2;\n}\n@keyframes _fadeOutAnimation_15h3q_1 {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n }\n}\n/*$vite$:1*/";
document.head.appendChild(__vite_style__);
var jsxRuntime = { exports: {} };
var reactJsxRuntime_production = {};
/**
* @license React
* react-jsx-runtime.production.js
*
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var hasRequiredReactJsxRuntime_production;
function requireReactJsxRuntime_production() {
if (hasRequiredReactJsxRuntime_production) return reactJsxRuntime_production;
hasRequiredReactJsxRuntime_production = 1;
var REACT_ELEMENT_TYPE = Symbol.for("react.transitional.element"), REACT_FRAGMENT_TYPE = Symbol.for("react.fragment");
function jsxProd(type, config, maybeKey) {
var key = null;
void 0 !== maybeKey && (key = "" + maybeKey);
void 0 !== config.key && (key = "" + config.key);
if ("key" in config) {
maybeKey = {};
for (var propName in config)
"key" !== propName && (maybeKey[propName] = config[propName]);
} else maybeKey = config;
config = maybeKey.ref;
return {
$$typeof: REACT_ELEMENT_TYPE,
type,
key,
ref: void 0 !== config ? config : null,
props: maybeKey
};
}
reactJsxRuntime_production.Fragment = REACT_FRAGMENT_TYPE;
reactJsxRuntime_production.jsx = jsxProd;
reactJsxRuntime_production.jsxs = jsxProd;
return reactJsxRuntime_production;
}
var reactJsxRuntime_development = {};
/**
* @license React
* react-jsx-runtime.development.js
*
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var hasRequiredReactJsxRuntime_development;
function requireReactJsxRuntime_development() {
if (hasRequiredReactJsxRuntime_development) return reactJsxRuntime_development;
hasRequiredReactJsxRuntime_development = 1;
"production" !== process.env.NODE_ENV && function() {
function getComponentNameFromType(type) {
if (null == type) return null;
if ("function" === typeof type)
return type.$$typeof === REACT_CLIENT_REFERENCE$2 ? null : type.displayName || type.name || null;
if ("string" === typeof type) return type;
switch (type) {
case REACT_FRAGMENT_TYPE:
return "Fragment";
case REACT_PORTAL_TYPE:
return "Portal";
case REACT_PROFILER_TYPE:
return "Profiler";
case REACT_STRICT_MODE_TYPE:
return "StrictMode";
case REACT_SUSPENSE_TYPE:
return "Suspense";
case REACT_SUSPENSE_LIST_TYPE:
return "SuspenseList";
}
if ("object" === typeof type)
switch ("number" === typeof type.tag && console.error(
"Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
), type.$$typeof) {
case REACT_CONTEXT_TYPE:
return (type.displayName || "Context") + ".Provider";
case REACT_CONSUMER_TYPE:
return (type._context.displayName || "Context") + ".Consumer";
case REACT_FORWARD_REF_TYPE:
var innerType = type.render;
type = type.displayName;
type || (type = innerType.displayName || innerType.name || "", type = "" !== type ? "ForwardRef(" + type + ")" : "ForwardRef");
return type;
case REACT_MEMO_TYPE:
return innerType = type.displayName || null, null !== innerType ? innerType : getComponentNameFromType(type.type) || "Memo";
case REACT_LAZY_TYPE:
innerType = type._payload;
type = type._init;
try {
return getComponentNameFromType(type(innerType));
} catch (x) {
}
}
return null;
}
function testStringCoercion(value) {
return "" + value;
}
function checkKeyStringCoercion(value) {
try {
testStringCoercion(value);
var JSCompiler_inline_result = false;
} catch (e) {
JSCompiler_inline_result = true;
}
if (JSCompiler_inline_result) {
JSCompiler_inline_result = console;
var JSCompiler_temp_const = JSCompiler_inline_result.error;
var JSCompiler_inline_result$jscomp$0 = "function" === typeof Symbol && Symbol.toStringTag && value[Symbol.toStringTag] || value.constructor.name || "Object";
JSCompiler_temp_const.call(
JSCompiler_inline_result,
"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
JSCompiler_inline_result$jscomp$0
);
return testStringCoercion(value);
}
}
function disabledLog() {
}
function disableLogs() {
if (0 === disabledDepth) {
prevLog = console.log;
prevInfo = console.info;
prevWarn = console.warn;
prevError = console.error;
prevGroup = console.group;
prevGroupCollapsed = console.groupCollapsed;
prevGroupEnd = console.groupEnd;
var props = {
configurable: true,
enumerable: true,
value: disabledLog,
writable: true
};
Object.defineProperties(console, {
info: props,
log: props,
warn: props,
error: props,
group: props,
groupCollapsed: props,
groupEnd: props
});
}
disabledDepth++;
}
function reenableLogs() {
disabledDepth--;
if (0 === disabledDepth) {
var props = { configurable: true, enumerable: true, writable: true };
Object.defineProperties(console, {
log: assign({}, props, { value: prevLog }),
info: assign({}, props, { value: prevInfo }),
warn: assign({}, props, { value: prevWarn }),
error: assign({}, props, { value: prevError }),
group: assign({}, props, { value: prevGroup }),
groupCollapsed: assign({}, props, { value: prevGroupCollapsed }),
groupEnd: assign({}, props, { value: prevGroupEnd })
});
}
0 > disabledDepth && console.error(
"disabledDepth fell below zero. This is a bug in React. Please file an issue."
);
}
function describeBuiltInComponentFrame(name) {
if (void 0 === prefix)
try {
throw Error();
} catch (x) {
var match = x.stack.trim().match(/\n( *(at )?)/);
prefix = match && match[1] || "";
suffix = -1 < x.stack.indexOf("\n at") ? " (<anonymous>)" : -1 < x.stack.indexOf("@") ? "@unknown:0:0" : "";
}
return "\n" + prefix + name + suffix;
}
function describeNativeComponentFrame(fn, construct) {
if (!fn || reentry) return "";
var frame = componentFrameCache.get(fn);
if (void 0 !== frame) return frame;
reentry = true;
frame = Error.prepareStackTrace;
Error.prepareStackTrace = void 0;
var previousDispatcher = null;
previousDispatcher = ReactSharedInternals.H;
ReactSharedInternals.H = null;
disableLogs();
try {
var RunInRootFrame = {
DetermineComponentFrameRoot: function() {
try {
if (construct) {
var Fake = function() {
throw Error();
};
Object.defineProperty(Fake.prototype, "props", {
set: function() {
throw Error();
}
});
if ("object" === typeof Reflect && Reflect.construct) {
try {
Reflect.construct(Fake, []);
} catch (x) {
var control = x;
}
Reflect.construct(fn, [], Fake);
} else {
try {
Fake.call();
} catch (x$0) {
control = x$0;
}
fn.call(Fake.prototype);
}
} else {
try {
throw Error();
} catch (x$1) {
control = x$1;
}
(Fake = fn()) && "function" === typeof Fake.catch && Fake.catch(function() {
});
}
} catch (sample) {
if (sample && control && "string" === typeof sample.stack)
return [sample.stack, control.stack];
}
return [null, null];
}
};
RunInRootFrame.DetermineComponentFrameRoot.displayName = "DetermineComponentFrameRoot";
var namePropDescriptor = Object.getOwnPropertyDescriptor(
RunInRootFrame.DetermineComponentFrameRoot,
"name"
);
namePropDescriptor && namePropDescriptor.configurable && Object.defineProperty(
RunInRootFrame.DetermineComponentFrameRoot,
"name",
{ value: "DetermineComponentFrameRoot" }
);
var _RunInRootFrame$Deter = RunInRootFrame.DetermineComponentFrameRoot(), sampleStack = _RunInRootFrame$Deter[0], controlStack = _RunInRootFrame$Deter[1];
if (sampleStack && controlStack) {
var sampleLines = sampleStack.split("\n"), controlLines = controlStack.split("\n");
for (_RunInRootFrame$Deter = namePropDescriptor = 0; namePropDescriptor < sampleLines.length && !sampleLines[namePropDescriptor].includes(
"DetermineComponentFrameRoot"
); )
namePropDescriptor++;
for (; _RunInRootFrame$Deter < controlLines.length && !controlLines[_RunInRootFrame$Deter].includes(
"DetermineComponentFrameRoot"
); )
_RunInRootFrame$Deter++;
if (namePropDescriptor === sampleLines.length || _RunInRootFrame$Deter === controlLines.length)
for (namePropDescriptor = sampleLines.length - 1, _RunInRootFrame$Deter = controlLines.length - 1; 1 <= namePropDescriptor && 0 <= _RunInRootFrame$Deter && sampleLines[namePropDescriptor] !== controlLines[_RunInRootFrame$Deter]; )
_RunInRootFrame$Deter--;
for (; 1 <= namePropDescriptor && 0 <= _RunInRootFrame$Deter; namePropDescriptor--, _RunInRootFrame$Deter--)
if (sampleLines[namePropDescriptor] !== controlLines[_RunInRootFrame$Deter]) {
if (1 !== namePropDescriptor || 1 !== _RunInRootFrame$Deter) {
do
if (namePropDescriptor--, _RunInRootFrame$Deter--, 0 > _RunInRootFrame$Deter || sampleLines[namePropDescriptor] !== controlLines[_RunInRootFrame$Deter]) {
var _frame = "\n" + sampleLines[namePropDescriptor].replace(
" at new ",
" at "
);
fn.displayName && _frame.includes("<anonymous>") && (_frame = _frame.replace("<anonymous>", fn.displayName));
"function" === typeof fn && componentFrameCache.set(fn, _frame);
return _frame;
}
while (1 <= namePropDescriptor && 0 <= _RunInRootFrame$Deter);
}
break;
}
}
} finally {
reentry = false, ReactSharedInternals.H = previousDispatcher, reenableLogs(), Error.prepareStackTrace = frame;
}
sampleLines = (sampleLines = fn ? fn.displayName || fn.name : "") ? describeBuiltInComponentFrame(sampleLines) : "";
"function" === typeof fn && componentFrameCache.set(fn, sampleLines);
return sampleLines;
}
function describeUnknownElementTypeFrameInDEV(type) {
if (null == type) return "";
if ("function" === typeof type) {
var prototype = type.prototype;
return describeNativeComponentFrame(
type,
!(!prototype || !prototype.isReactComponent)
);
}
if ("string" === typeof type) return describeBuiltInComponentFrame(type);
switch (type) {
case REACT_SUSPENSE_TYPE:
return describeBuiltInComponentFrame("Suspense");
case REACT_SUSPENSE_LIST_TYPE:
return describeBuiltInComponentFrame("SuspenseList");
}
if ("object" === typeof type)
switch (type.$$typeof) {
case REACT_FORWARD_REF_TYPE:
return type = describeNativeComponentFrame(type.render, false), type;
case REACT_MEMO_TYPE:
return describeUnknownElementTypeFrameInDEV(type.type);
case REACT_LAZY_TYPE:
prototype = type._payload;
type = type._init;
try {
return describeUnknownElementTypeFrameInDEV(type(prototype));
} catch (x) {
}
}
return "";
}
function getOwner() {
var dispatcher = ReactSharedInternals.A;
return null === dispatcher ? null : dispatcher.getOwner();
}
function hasValidKey(config) {
if (hasOwnProperty.call(config, "key")) {
var getter = Object.getOwnPropertyDescriptor(config, "key").get;
if (getter && getter.isReactWarning) return false;
}
return void 0 !== config.key;
}
function defineKeyPropWarningGetter(props, displayName) {
function warnAboutAccessingKey() {
specialPropKeyWarningShown || (specialPropKeyWarningShown = true, console.error(
"%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
displayName
));
}
warnAboutAccessingKey.isReactWarning = true;
Object.defineProperty(props, "key", {
get: warnAboutAccessingKey,
configurable: true
});
}
function elementRefGetterWithDeprecationWarning() {
var componentName = getComponentNameFromType(this.type);
didWarnAboutElementRef[componentName] || (didWarnAboutElementRef[componentName] = true, console.error(
"Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
));
componentName = this.props.ref;
return void 0 !== componentName ? componentName : null;
}
function ReactElement(type, key, self2, source, owner, props) {
self2 = props.ref;
type = {
$$typeof: REACT_ELEMENT_TYPE,
type,
key,
props,
_owner: owner
};
null !== (void 0 !== self2 ? self2 : null) ? Object.defineProperty(type, "ref", {
enumerable: false,
get: elementRefGetterWithDeprecationWarning
}) : Object.defineProperty(type, "ref", { enumerable: false, value: null });
type._store = {};
Object.defineProperty(type._store, "validated", {
configurable: false,
enumerable: false,
writable: true,
value: 0
});
Object.defineProperty(type, "_debugInfo", {
configurable: false,
enumerable: false,
writable: true,
value: null
});
Object.freeze && (Object.freeze(type.props), Object.freeze(type));
return type;
}
function jsxDEVImpl(type, config, maybeKey, isStaticChildren, source, self2) {
if ("string" === typeof type || "function" === typeof type || type === REACT_FRAGMENT_TYPE || type === REACT_PROFILER_TYPE || type === REACT_STRICT_MODE_TYPE || type === REACT_SUSPENSE_TYPE || type === REACT_SUSPENSE_LIST_TYPE || type === REACT_OFFSCREEN_TYPE || "object" === typeof type && null !== type && (type.$$typeof === REACT_LAZY_TYPE || type.$$typeof === REACT_MEMO_TYPE || type.$$typeof === REACT_CONTEXT_TYPE || type.$$typeof === REACT_CONSUMER_TYPE || type.$$typeof === REACT_FORWARD_REF_TYPE || type.$$typeof === REACT_CLIENT_REFERENCE$1 || void 0 !== type.getModuleId)) {
var children = config.children;
if (void 0 !== children)
if (isStaticChildren)
if (isArrayImpl(children)) {
for (isStaticChildren = 0; isStaticChildren < children.length; isStaticChildren++)
validateChildKeys(children[isStaticChildren], type);
Object.freeze && Object.freeze(children);
} else
console.error(
"React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
);
else validateChildKeys(children, type);
} else {
children = "";
if (void 0 === type || "object" === typeof type && null !== type && 0 === Object.keys(type).length)
children += " You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.";
null === type ? isStaticChildren = "null" : isArrayImpl(type) ? isStaticChildren = "array" : void 0 !== type && type.$$typeof === REACT_ELEMENT_TYPE ? (isStaticChildren = "<" + (getComponentNameFromType(type.type) || "Unknown") + " />", children = " Did you accidentally export a JSX literal instead of a component?") : isStaticChildren = typeof type;
console.error(
"React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s",
isStaticChildren,
children
);
}
if (hasOwnProperty.call(config, "key")) {
children = getComponentNameFromType(type);
var keys = Object.keys(config).filter(function(k) {
return "key" !== k;
});
isStaticChildren = 0 < keys.length ? "{key: someKey, " + keys.join(": ..., ") + ": ...}" : "{key: someKey}";
didWarnAboutKeySpread[children + isStaticChildren] || (keys = 0 < keys.length ? "{" + keys.join(": ..., ") + ": ...}" : "{}", console.error(
'A props object containing a "key" prop is being spread into JSX:\n let props = %s;\n <%s {...props} />\nReact keys must be passed directly to JSX without using spread:\n let props = %s;\n <%s key={someKey} {...props} />',
isStaticChildren,
children,
keys,
children
), didWarnAboutKeySpread[children + isStaticChildren] = true);
}
children = null;
void 0 !== maybeKey && (checkKeyStringCoercion(maybeKey), children = "" + maybeKey);
hasValidKey(config) && (checkKeyStringCoercion(config.key), children = "" + config.key);
if ("key" in config) {
maybeKey = {};
for (var propName in config)
"key" !== propName && (maybeKey[propName] = config[propName]);
} else maybeKey = config;
children && defineKeyPropWarningGetter(
maybeKey,
"function" === typeof type ? type.displayName || type.name || "Unknown" : type
);
return ReactElement(type, children, self2, source, getOwner(), maybeKey);
}
function validateChildKeys(node, parentType) {
if ("object" === typeof node && node && node.$$typeof !== REACT_CLIENT_REFERENCE) {
if (isArrayImpl(node))
for (var i = 0; i < node.length; i++) {
var child = node[i];
isValidElement(child) && validateExplicitKey(child, parentType);
}
else if (isValidElement(node))
node._store && (node._store.validated = 1);
else if (null === node || "object" !== typeof node ? i = null : (i = MAYBE_ITERATOR_SYMBOL && node[MAYBE_ITERATOR_SYMBOL] || node["@@iterator"], i = "function" === typeof i ? i : null), "function" === typeof i && i !== node.entries && (i = i.call(node), i !== node))
for (; !(node = i.next()).done; )
isValidElement(node.value) && validateExplicitKey(node.value, parentType);
}
}
function isValidElement(object) {
return "object" === typeof object && null !== object && object.$$typeof === REACT_ELEMENT_TYPE;
}
function validateExplicitKey(element, parentType) {
if (element._store && !element._store.validated && null == element.key && (element._store.validated = 1, parentType = getCurrentComponentErrorInfo(parentType), !ownerHasKeyUseWarning[parentType])) {
ownerHasKeyUseWarning[parentType] = true;
var childOwner = "";
element && null != element._owner && element._owner !== getOwner() && (childOwner = null, "number" === typeof element._owner.tag ? childOwner = getComponentNameFromType(element._owner.type) : "string" === typeof element._owner.name && (childOwner = element._owner.name), childOwner = " It was passed a child from " + childOwner + ".");
var prevGetCurrentStack = ReactSharedInternals.getCurrentStack;
ReactSharedInternals.getCurrentStack = function() {
var stack = describeUnknownElementTypeFrameInDEV(element.type);
prevGetCurrentStack && (stack += prevGetCurrentStack() || "");
return stack;
};
console.error(
'Each child in a list should have a unique "key" prop.%s%s See https://react.dev/link/warning-keys for more information.',
parentType,
childOwner
);
ReactSharedInternals.getCurrentStack = prevGetCurrentStack;
}
}
function getCurrentComponentErrorInfo(parentType) {
var info = "", owner = getOwner();
owner && (owner = getComponentNameFromType(owner.type)) && (info = "\n\nCheck the render method of `" + owner + "`.");
info || (parentType = getComponentNameFromType(parentType)) && (info = "\n\nCheck the top-level render call using <" + parentType + ">.");
return info;
}
var React = require$$0, REACT_ELEMENT_TYPE = Symbol.for("react.transitional.element"), REACT_PORTAL_TYPE = Symbol.for("react.portal"), REACT_FRAGMENT_TYPE = Symbol.for("react.fragment"), REACT_STRICT_MODE_TYPE = Symbol.for("react.strict_mode"), REACT_PROFILER_TYPE = Symbol.for("react.profiler");
var REACT_CONSUMER_TYPE = Symbol.for("react.consumer"), REACT_CONTEXT_TYPE = Symbol.for("react.context"), REACT_FORWARD_REF_TYPE = Symbol.for("react.forward_ref"), REACT_SUSPENSE_TYPE = Symbol.for("react.suspense"), REACT_SUSPENSE_LIST_TYPE = Symbol.for("react.suspense_list"), REACT_MEMO_TYPE = Symbol.for("react.memo"), REACT_LAZY_TYPE = Symbol.for("react.lazy"), REACT_OFFSCREEN_TYPE = Symbol.for("react.offscreen"), MAYBE_ITERATOR_SYMBOL = Symbol.iterator, REACT_CLIENT_REFERENCE$2 = Symbol.for("react.client.reference"), ReactSharedInternals = React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, hasOwnProperty = Object.prototype.hasOwnProperty, assign = Object.assign, REACT_CLIENT_REFERENCE$1 = Symbol.for("react.client.reference"), isArrayImpl = Array.isArray, disabledDepth = 0, prevLog, prevInfo, prevWarn, prevError, prevGroup, prevGroupCollapsed, prevGroupEnd;
disabledLog.__reactDisabledLog = true;
var prefix, suffix, reentry = false;
var componentFrameCache = new ("function" === typeof WeakMap ? WeakMap : Map)();
var REACT_CLIENT_REFERENCE = Symbol.for("react.client.reference"), specialPropKeyWarningShown;
var didWarnAboutElementRef = {};
var didWarnAboutKeySpread = {}, ownerHasKeyUseWarning = {};
reactJsxRuntime_development.Fragment = REACT_FRAGMENT_TYPE;
reactJsxRuntime_development.jsx = function(type, config, maybeKey, source, self2) {
return jsxDEVImpl(type, config, maybeKey, false, source, self2);
};
reactJsxRuntime_development.jsxs = function(type, config, maybeKey, source, self2) {
return jsxDEVImpl(type, config, maybeKey, true, source, self2);
};
}();
return reactJsxRuntime_development;
}
var hasRequiredJsxRuntime;
function requireJsxRuntime() {
if (hasRequiredJsxRuntime) return jsxRuntime.exports;
hasRequiredJsxRuntime = 1;
if (process.env.NODE_ENV === "production") {
jsxRuntime.exports = requireReactJsxRuntime_production();
} else {
jsxRuntime.exports = requireReactJsxRuntime_development();
}
return jsxRuntime.exports;
}
var jsxRuntimeExports = requireJsxRuntime();
const useRandomColor = () => {
const [gradient, setGradient] = require$$0.useState("red");
require$$0.useEffect(() => {
const randomColor = () => {
const color = `#${Math.floor(Math.random() * 16777215).toString(16)}`;
const seconcolor = `#${Math.floor(Math.random() * 16777215).toString(16)}`;
const gradient2 = `linear-gradient(to right, ${color}, ${seconcolor})`;
setGradient(gradient2);
};
randomColor();
}, []);
return gradient;
};
const spinner = "data:image/svg+xml,%3csvg%20width='38'%20height='38'%20viewBox='0%200%2038%2038'%20xmlns='http://www.w3.org/2000/svg'%20stroke='%23fff'%3e%3cg%20fill='none'%20fill-rule='evenodd'%3e%3cg%20transform='translate(1%201)'%20stroke-width='2'%3e%3ccircle%20stroke-opacity='.5'%20cx='18'%20cy='18'%20r='18'/%3e%3cpath%20d='M36%2018c0-9.94-8.06-18-18-18'%3e%3canimateTransform%20attributeName='transform'%20type='rotate'%20from='0%2018%2018'%20to='360%2018%2018'%20dur='1s'%20repeatCount='indefinite'/%3e%3c/path%3e%3c/g%3e%3c/g%3e%3c/svg%3e";
const spinnercontainer = "_spinnercontainer_p32o6_1";
const spinnerloading = "_spinnerloading_p32o6_9";
const styles$2 = {
spinnercontainer,
spinnerloading
};
const Spinner = () => {
return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$2.spinnercontainer, children: /* @__PURE__ */ jsxRuntimeExports.jsx("img", { className: styles$2.spinnerloading, src: spinner }) });
};
const ImageComponent = ({ content, fullscreen = true }) => {
const [bg, setBg] = require$$0.useState("");
const [imgSrc, setImgSrc] = require$$0.useState("");
const background = useRandomColor();
require$$0.useEffect(() => {
if (!fullscreen)
setBg(background);
}, [content]);
const onLoad = require$$0.useCallback(() => {
setImgSrc(content);
}, [content]);
require$$0.useEffect(() => {
const img = new Image();
img.src = content;
img.addEventListener("load", onLoad);
return () => {
img.removeEventListener("load", onLoad);
};
}, [content]);
if (imgSrc !== "") return /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: imgSrc, alt: "image", style: {
objectFit: fullscreen ? "cover" : "contain",
background: bg
} });
return /* @__PURE__ */ jsxRuntimeExports.jsx(Spinner, {});
};
const VideoComponent = ({ content, fullscreen = true, isPlay = true, muted = false }) => {
const randomBackground = useRandomColor();
const background = !fullscreen ? randomBackground : "";
const video = require$$0.useRef(null);
require$$0.useEffect(() => {
if (video.current) {
if (!isPlay) {
video.current.pause();
} else {
video.current.play();
}
}
}, [isPlay]);
require$$0.useEffect(() => {
if (video.current) {
video.current.style.background = background;
}
}, [content, video, background]);
return /* @__PURE__ */ jsxRuntimeExports.jsx("video", { ref: video, className: "video", autoPlay: true, loop: true, muted, style: {
objectFit: fullscreen ? "cover" : "contain"
}, children: /* @__PURE__ */ jsxRuntimeExports.jsx("source", { src: content }) }, content);
};
const progressbar = "_progressbar_g57o9_1";
const bgprogress = "_bgprogress_g57o9_11";
const styles$1 = {
progressbar,
bgprogress
};
const ProgressBar = ({ active, tope = 15, valor = 15 }) => {
const [pertcente, setPertcente] = require$$0.useState("0%");
require$$0.useEffect(() => {
if (active === 1) {
setPertcente(`${valor / tope * 100}%`);
} else if (active === 2) {
setPertcente(`100%`);
} else {
setPertcente(`0%`);
}
}, [valor, tope, active]);
return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
"span",
{
className: styles$1.progressbar,
role: "progressbar",
"aria-valuemax": tope,
"aria-valuenow": valor,
children: /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { width: "100%", height: "3", children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("rect", { height: "10", width: "100%", className: styles$1.bgprogress }),
/* @__PURE__ */ jsxRuntimeExports.jsx("rect", { height: "10", width: "100%", fill: "#efefef", className: "relleno", style: {
transform: `scaleX(${pertcente})`
} })
] })
}
) });
};
const useCount = (tope, autoStart = true) => {
const delay = 100;
const [count, setCount] = require$$0.useState(0);
const [isRunning, setIsRunning] = require$$0.useState(autoStart);
require$$0.useEffect(() => {
if (isRunning) {
const interval = setInterval(() => {
setCount(count + 1);
}, isRunning ? delay : 0);
if (count > tope) {
setIsRunning(false);
setCount(1);
}
return () => clearInterval(interval);
}
}, [isRunning, count]);
const start = () => {
setIsRunning(true);
};
const stop = () => {
setIsRunning(false);
};
const reset = () => {
setCount(1);
if (!isRunning)
setIsRunning(true);
};
return {
count,
start,
stop,
reset,
isPlay: isRunning
};
};
const stories = "_stories_15h3q_1";
const storiesaction = "_storiesaction_15h3q_8";
const storiesactionbutton = "_storiesactionbutton_15h3q_14";
const countprogressstories = "_countprogressstories_15h3q_20";
const hiddenprogressstories = "_hiddenprogressstories_15h3q_29";
const storiescontent = "_storiescontent_15h3q_34";
const jsx = "_jsx_15h3q_52";
const mutedPosition = "_mutedPosition_15h3q_68";
const fadeOutAnimation = "_fadeOutAnimation_15h3q_1";
const styles = {
stories,
storiesaction,
storiesactionbutton,
countprogressstories,
hiddenprogressstories,
storiescontent,
jsx,
mutedPosition,
fadeOutAnimation
};
const InnerComponent = ({ storie, isPlay }) => {
const InnerComponent2 = storie.content;
return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: storie.styles, className: styles.jsx, children: /* @__PURE__ */ jsxRuntimeExports.jsx(InnerComponent2, { isPlay }) });
};
const MutedComponent = ({ muted, hadleMuted }) => {
return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { onClick: hadleMuted, className: "muted", children: !muted ? /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: "1.5", stroke: "#fff", width: "25px", className: "size-6", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19.114 5.636a9 9 0 0 1 0 12.728M16.463 8.288a5.25 5.25 0 0 1 0 7.424M6.75 8.25l4.72-4.72a.75.75 0 0 1 1.28.53v15.88a.75.75 0 0 1-1.28.53l-4.72-4.72H4.51c-.88 0-1.704-.507-1.938-1.354A9.009 9.009 0 0 1 2.25 12c0-.83.112-1.633.322-2.396C2.806 8.756 3.63 8.25 4.51 8.25H6.75Z" }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: "1.5", stroke: "#fff", width: "25px", className: "size-6", children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M17.25 9.75 19.5 12m0 0 2.25 2.25M19.5 12l2.25-2.25M19.5 12l-2.25 2.25m-10.5-6 4.72-4.72a.75.75 0 0 1 1.28.53v15.88a.75.75 0 0 1-1.28.53l-4.72-4.72H4.51c-.88 0-1.704-.507-1.938-1.354A9.009 9.009 0 0 1 2.25 12c0-.83.112-1.633.322-2.396C2.806 8.756 3.63 8.25 4.51 8.25H6.75Z" }) }) }) });
};
const typeComponents = {
image: (storie) => /* @__PURE__ */ jsxRuntimeExports.jsx(ImageComponent, { content: storie.url, fullscreen: storie.fullscreen }),
youtube: (storie) => /* @__PURE__ */ jsxRuntimeExports.jsx("iframe", { src: `${storie.url}?autoplay=1&loop=1&autopause=0&muted=1&controls=0`, title: "YouTube video player", allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" }),
video: (storie, isPlay, muted) => /* @__PURE__ */ jsxRuntimeExports.jsx(VideoComponent, { content: storie.url, fullscreen: storie.fullscreen, isPlay, muted }),
jsx: (storie, isPlay) => /* @__PURE__ */ jsxRuntimeExports.jsx(InnerComponent, { storie, isPlay })
};
const StoriesComponent = ({ content, seconds, progress = true }) => {
let second = seconds * 10;
const { count, start, stop, reset, isPlay } = useCount(second);
const [currentIndex, setCurrentIndex] = require$$0.useState(0);
const [storie, setstorie] = require$$0.useState(content[currentIndex]);
const [isMuted, setisMuted] = require$$0.useState(true);
const mouse = require$$0.useRef(null);
require$$0.useEffect(() => {
if (count > second) {
setCurrentIndex(currentIndex + 1);
start();
if (currentIndex === content.length - 1)
setCurrentIndex(0);
reset();
}
}, [count, start]);
require$$0.useEffect(() => {
setstorie(content[currentIndex]);
}, [currentIndex]);
const hadleClickLeft = (e) => {
e.preventDefault();
setCurrentIndex(currentIndex - 1);
reset();
if (currentIndex === 0)
setCurrentIndex(0);
};
const hadleClickRight = (e) => {
e.preventDefault();
setCurrentIndex(currentIndex + 1);
reset();
if (currentIndex === content.length - 1)
setCurrentIndex(0);
};
const hadleMuted = () => {
if (storie.type === "video") {
setisMuted(!isMuted);
}
};
const pause = (e) => {
e.preventDefault();
mouse.current = setTimeout(() => {
stop();
}, 500);
};
const resume = (type) => (e) => {
e.preventDefault();
mouse.current && clearTimeout(mouse.current);
if (!isPlay) {
start();
} else {
type === "left" ? hadleClickLeft(e) : hadleClickRight(e);
}
};
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles.stories, style: {
width: "360px",
height: "640px"
}, children: [
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `${styles.countprogressstories} ${!isPlay && progress ? styles.hiddenprogressstories : ""}`, children: content.map((e, index) => {
return /* @__PURE__ */ jsxRuntimeExports.jsx(ProgressBar, { tope: second, valor: count, active: index === currentIndex ? 1 : index < currentIndex ? 2 : 0 }, index);
}) }),
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles.storiescontent, children: typeComponents[storie.type](storie, isPlay, isMuted) }),
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles.storiesaction, children: [
storie.type === "video" && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles.mutedPosition, children: /* @__PURE__ */ jsxRuntimeExports.jsx(MutedComponent, { muted: isMuted, hadleMuted }) }),
/* @__PURE__ */ jsxRuntimeExports.jsx(
"div",
{
className: styles.storiesactionbutton,
onTouchStart: pause,
onTouchEnd: resume("left"),
onMouseDown: pause,
onMouseUp: resume("left"),
onMouseLeave: !isPlay ? resume("") : () => {
}
}
),
/* @__PURE__ */ jsxRuntimeExports.jsx(
"div",
{
className: styles.storiesactionbutton,
onTouchStart: pause,
onTouchEnd: resume("right"),
onMouseDown: pause,
onMouseUp: resume("right"),
onMouseLeave: !isPlay ? resume("") : () => {
}
}
)
] })
] });
};
exports2.StoriesComponent = StoriesComponent;
Object.defineProperty(exports2, Symbol.toStringTag, { value: "Module" });
});
//# sourceMappingURL=storie-component.umd.js.map