storie-component
Version:
A component for ReactJS to display stories
381 lines (380 loc) • 19 kB
JavaScript
(function() { try { if (typeof document != "undefined") { var elementStyle = document.createElement("style"); elementStyle.appendChild(document.createTextNode("._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}")); document.head.appendChild(elementStyle); } } catch (e) { console.error("vite-plugin-css-injected-by-js", e); }})();
(function(global, factory) {
typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react"), require("react/jsx-runtime")) : typeof define === "function" && define.amd ? define([
"exports",
"react",
"react/jsx-runtime"
], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global["storie-component"] = {}, global.React, global.react_jsx_runtime));
})(this, function(exports, react, react_jsx_runtime) {
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__);
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
//#region \0rolldown/runtime.js
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
key = keys[i];
if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
get: ((k) => from[k]).bind(null, key),
enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
});
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
value: mod,
enumerable: true
}) : target, mod));
//#endregion
react = __toESM(react, 1);
//#region src/hook/useRandomColor.tsx
var useRandomColor = () => {
const [gradient, setGradient] = (0, react.useState)("red");
(0, react.useEffect)(() => {
const randomColor = () => {
const gradient = `linear-gradient(to right, ${`#${Math.floor(Math.random() * 16777215).toString(16)}`}, ${`#${Math.floor(Math.random() * 16777215).toString(16)}`})`;
setGradient(gradient);
};
randomColor();
}, []);
return gradient;
};
//#endregion
//#region src/assets/spinner.svg
var spinner_default = "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";
var Spinner_module_default = {
spinnercontainer: "_spinnercontainer_p32o6_1",
spinnerloading: "_spinnerloading_p32o6_9"
};
//#endregion
//#region src/components/Spinner.tsx
var Spinner = () => {
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
className: Spinner_module_default.spinnercontainer,
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
className: Spinner_module_default.spinnerloading,
src: spinner_default
})
});
};
//#endregion
//#region src/components/ContentTypes/ImageComponent.tsx
var ImageComponent = ({ content, fullscreen = true }) => {
const [bg, setBg] = (0, react.useState)("");
const [imgSrc, setImgSrc] = (0, react.useState)("");
const background = useRandomColor();
(0, react.useEffect)(() => {
if (!fullscreen) setBg(background);
}, [content]);
const onLoad = (0, react.useCallback)(() => {
setImgSrc(content);
}, [content]);
(0, react.useEffect)(() => {
const img = new Image();
img.src = content;
img.addEventListener("load", onLoad);
return () => {
img.removeEventListener("load", onLoad);
};
}, [content]);
if (imgSrc !== "") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
src: imgSrc,
alt: "image",
style: {
objectFit: fullscreen ? "cover" : "contain",
background: bg
}
});
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Spinner, {});
};
//#endregion
//#region src/components/ContentTypes/VideoComponent.tsx
var VideoComponent = ({ content, fullscreen = true, isPlay = true, muted = false }) => {
const randomBackground = useRandomColor();
const background = !fullscreen ? randomBackground : "";
const video = (0, react.useRef)(null);
(0, react.useEffect)(() => {
if (video.current) if (!isPlay) video.current.pause();
else video.current.play();
}, [isPlay]);
(0, react.useEffect)(() => {
if (video.current) video.current.style.background = background;
}, [
content,
video,
background
]);
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("video", {
ref: video,
className: "video",
autoPlay: true,
loop: true,
muted,
style: { objectFit: fullscreen ? "cover" : "contain" },
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("source", { src: content })
}, content);
};
var ProgressBar_module_default = {
progressbar: "_progressbar_g57o9_1",
bgprogress: "_bgprogress_g57o9_11"
};
//#endregion
//#region src/components/ProgressBar.tsx
var ProgressBar = ({ active, tope = 15, valor = 15 }) => {
const [pertcente, setPertcente] = (0, react.useState)("0%");
(0, react.useEffect)(() => {
if (active === 1) setPertcente(`${valor / tope * 100}%`);
else if (active === 2) setPertcente(`100%`);
else setPertcente(`0%`);
}, [
valor,
tope,
active
]);
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
className: ProgressBar_module_default.progressbar,
role: "progressbar",
"aria-valuemax": tope,
"aria-valuenow": valor,
children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
width: "100%",
height: "3",
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
height: "10",
width: "100%",
className: ProgressBar_module_default.bgprogress
}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
height: "10",
width: "100%",
fill: "#efefef",
className: "relleno",
style: { transform: `scaleX(${pertcente})` }
})]
})
}) });
};
//#endregion
//#region src/hook/useCount.tsx
/**
* hook contador
*/
var useCount = (tope, autoStart = true) => {
const delay = 100;
const [count, setCount] = (0, react.useState)(0);
const [isRunning, setIsRunning] = (0, react.useState)(autoStart);
(0, react.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
};
};
var StoriesComponent_module_default = {
stories: "_stories_15h3q_1",
storiesaction: "_storiesaction_15h3q_8",
storiesactionbutton: "_storiesactionbutton_15h3q_14",
countprogressstories: "_countprogressstories_15h3q_20",
hiddenprogressstories: "_hiddenprogressstories_15h3q_29",
storiescontent: "_storiescontent_15h3q_34",
jsx: "_jsx_15h3q_52",
mutedPosition: "_mutedPosition_15h3q_68",
fadeOutAnimation: "_fadeOutAnimation_15h3q_1"
};
//#endregion
//#region src/components/ContentTypes/InnerComponent.tsx
var InnerComponent = ({ storie, isPlay }) => {
const InnerComponent = storie.content;
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
style: storie.styles,
className: StoriesComponent_module_default.jsx,
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InnerComponent, { isPlay })
});
};
//#endregion
//#region src/components/MutedComponent.tsx
var MutedComponent = ({ muted, hadleMuted }) => {
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
onClick: hadleMuted,
className: "muted",
children: !muted ? /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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"
})
})
}) });
};
//#endregion
//#region src/components/StoriesComponent.tsx
var typeComponents = {
image: (storie) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ImageComponent, {
content: storie.url,
fullscreen: storie.fullscreen
}),
youtube: (storie) => /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(VideoComponent, {
content: storie.url,
fullscreen: storie.fullscreen,
isPlay,
muted
}),
jsx: (storie, isPlay) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InnerComponent, {
storie,
isPlay
})
};
var StoriesComponent = ({ content, seconds, progress = true }) => {
let second = seconds * 10;
const { count, start, stop, reset, isPlay } = useCount(second);
const [currentIndex, setCurrentIndex] = (0, react.useState)(0);
const [storie, setstorie] = (0, react.useState)(content[currentIndex]);
const [isMuted, setisMuted] = (0, react.useState)(true);
const mouse = (0, react.useRef)(null);
(0, react.useEffect)(() => {
if (count > second) {
setCurrentIndex(currentIndex + 1);
start();
if (currentIndex === content.length - 1) setCurrentIndex(0);
reset();
}
}, [count, start]);
(0, react.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__ */ (0, react_jsx_runtime.jsxs)("div", {
className: StoriesComponent_module_default.stories,
style: {
width: "360px",
height: "640px"
},
children: [
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
className: `${StoriesComponent_module_default.countprogressstories} ${!isPlay && progress ? StoriesComponent_module_default.hiddenprogressstories : ""}`,
children: content.map((e, index) => {
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ProgressBar, {
tope: second,
valor: count,
active: index === currentIndex ? 1 : index < currentIndex ? 2 : 0
}, index);
})
}),
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
className: StoriesComponent_module_default.storiescontent,
children: typeComponents[storie.type](storie, isPlay, isMuted)
}),
/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
className: StoriesComponent_module_default.storiesaction,
children: [
storie.type === "video" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
className: StoriesComponent_module_default.mutedPosition,
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MutedComponent, {
muted: isMuted,
hadleMuted
})
}),
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
className: StoriesComponent_module_default.storiesactionbutton,
onTouchStart: pause,
onTouchEnd: resume("left"),
onMouseDown: pause,
onMouseUp: resume("left"),
onMouseLeave: !isPlay ? resume("") : () => {}
}),
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
className: StoriesComponent_module_default.storiesactionbutton,
onTouchStart: pause,
onTouchEnd: resume("right"),
onMouseDown: pause,
onMouseUp: resume("right"),
onMouseLeave: !isPlay ? resume("") : () => {}
})
]
})
]
});
};
//#endregion
exports.StoriesComponent = StoriesComponent;
});
//# sourceMappingURL=storie-component.umd.cjs.map