storie-component
Version:
A component for ReactJS to display stories
348 lines (347 loc) • 13.7 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); }})();
import { useCallback, useEffect, useRef, useState } from "react";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
//#region src/hook/useRandomColor.tsx
var useRandomColor = () => {
const [gradient, setGradient] = useState("red");
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__ */ jsx("div", {
className: Spinner_module_default.spinnercontainer,
children: /* @__PURE__ */ 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] = useState("");
const [imgSrc, setImgSrc] = useState("");
const background = useRandomColor();
useEffect(() => {
if (!fullscreen) setBg(background);
}, [content]);
const onLoad = useCallback(() => {
setImgSrc(content);
}, [content]);
useEffect(() => {
const img = new Image();
img.src = content;
img.addEventListener("load", onLoad);
return () => {
img.removeEventListener("load", onLoad);
};
}, [content]);
if (imgSrc !== "") return /* @__PURE__ */ jsx("img", {
src: imgSrc,
alt: "image",
style: {
objectFit: fullscreen ? "cover" : "contain",
background: bg
}
});
return /* @__PURE__ */ 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 = useRef(null);
useEffect(() => {
if (video.current) if (!isPlay) video.current.pause();
else video.current.play();
}, [isPlay]);
useEffect(() => {
if (video.current) video.current.style.background = background;
}, [
content,
video,
background
]);
return /* @__PURE__ */ jsx("video", {
ref: video,
className: "video",
autoPlay: true,
loop: true,
muted,
style: { objectFit: fullscreen ? "cover" : "contain" },
children: /* @__PURE__ */ 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] = useState("0%");
useEffect(() => {
if (active === 1) setPertcente(`${valor / tope * 100}%`);
else if (active === 2) setPertcente(`100%`);
else setPertcente(`0%`);
}, [
valor,
tope,
active
]);
return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("span", {
className: ProgressBar_module_default.progressbar,
role: "progressbar",
"aria-valuemax": tope,
"aria-valuenow": valor,
children: /* @__PURE__ */ jsxs("svg", {
width: "100%",
height: "3",
children: [/* @__PURE__ */ jsx("rect", {
height: "10",
width: "100%",
className: ProgressBar_module_default.bgprogress
}), /* @__PURE__ */ 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] = useState(0);
const [isRunning, setIsRunning] = useState(autoStart);
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__ */ jsx("div", {
style: storie.styles,
className: StoriesComponent_module_default.jsx,
children: /* @__PURE__ */ jsx(InnerComponent, { isPlay })
});
};
//#endregion
//#region src/components/MutedComponent.tsx
var MutedComponent = ({ muted, hadleMuted }) => {
return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("div", {
onClick: hadleMuted,
className: "muted",
children: !muted ? /* @__PURE__ */ 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__ */ 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__ */ 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__ */ 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__ */ jsx(ImageComponent, {
content: storie.url,
fullscreen: storie.fullscreen
}),
youtube: (storie) => /* @__PURE__ */ 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__ */ jsx(VideoComponent, {
content: storie.url,
fullscreen: storie.fullscreen,
isPlay,
muted
}),
jsx: (storie, isPlay) => /* @__PURE__ */ 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] = useState(0);
const [storie, setstorie] = useState(content[currentIndex]);
const [isMuted, setisMuted] = useState(true);
const mouse = useRef(null);
useEffect(() => {
if (count > second) {
setCurrentIndex(currentIndex + 1);
start();
if (currentIndex === content.length - 1) setCurrentIndex(0);
reset();
}
}, [count, start]);
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__ */ jsxs("div", {
className: StoriesComponent_module_default.stories,
style: {
width: "360px",
height: "640px"
},
children: [
/* @__PURE__ */ jsx("div", {
className: `${StoriesComponent_module_default.countprogressstories} ${!isPlay && progress ? StoriesComponent_module_default.hiddenprogressstories : ""}`,
children: content.map((e, index) => {
return /* @__PURE__ */ jsx(ProgressBar, {
tope: second,
valor: count,
active: index === currentIndex ? 1 : index < currentIndex ? 2 : 0
}, index);
})
}),
/* @__PURE__ */ jsx("div", {
className: StoriesComponent_module_default.storiescontent,
children: typeComponents[storie.type](storie, isPlay, isMuted)
}),
/* @__PURE__ */ jsxs("div", {
className: StoriesComponent_module_default.storiesaction,
children: [
storie.type === "video" && /* @__PURE__ */ jsx("div", {
className: StoriesComponent_module_default.mutedPosition,
children: /* @__PURE__ */ jsx(MutedComponent, {
muted: isMuted,
hadleMuted
})
}),
/* @__PURE__ */ jsx("div", {
className: StoriesComponent_module_default.storiesactionbutton,
onTouchStart: pause,
onTouchEnd: resume("left"),
onMouseDown: pause,
onMouseUp: resume("left"),
onMouseLeave: !isPlay ? resume("") : () => {}
}),
/* @__PURE__ */ jsx("div", {
className: StoriesComponent_module_default.storiesactionbutton,
onTouchStart: pause,
onTouchEnd: resume("right"),
onMouseDown: pause,
onMouseUp: resume("right"),
onMouseLeave: !isPlay ? resume("") : () => {}
})
]
})
]
});
};
//#endregion
export { StoriesComponent };
//# sourceMappingURL=storie-component.es.js.map