storie-component/dist/storie-component.umd.cjs.map

A component for ReactJS to display stories

{"version":3,"file":"storie-component.umd.cjs","names":[],"sources":["../src/hook/useRandomColor.tsx","../src/assets/spinner.svg","../src/components/Spinner.module.css","../src/components/Spinner.tsx","../src/components/ContentTypes/ImageComponent.tsx","../src/components/ContentTypes/VideoComponent.tsx","../src/components/ProgressBar.module.css","../src/components/ProgressBar.tsx","../src/hook/useCount.tsx","../src/components/StoriesComponent.module.css","../src/components/ContentTypes/InnerComponent.tsx","../src/components/MutedComponent.tsx","../src/components/StoriesComponent.tsx"],"sourcesContent":["import { useEffect, useState } from \"react\"\n\n\n\nexport const useRandomColor = () => {\n    const [gradient, setGradient] = useState('red')\n\n    useEffect(() => {\n        const randomColor = () => {\n            const color = `#${Math.floor(Math.random() * 16777215).toString(16)}`\n            const seconcolor = `#${Math.floor(Math.random() * 16777215).toString(16)}`\n            const gradient = `linear-gradient(to right, ${color}, ${seconcolor})`\n            setGradient(gradient)\n        }\n        randomColor()\n    }, [])\n\n    return gradient\n}\n","export 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\"",".spinnercontainer{\n    display: flex;\n    justify-content: center;\n    width: 100%;\n    height: 100%;\n    background-color: gray;\n    border-radius: 20px;\n}\n.spinnercontainer .spinnerloading {\n    width: 60px;\n    height: 100%;\n}","import spinner from '../assets/spinner.svg'\nimport styles from './Spinner.module.css'\nexport const Spinner = () => {\n    return (\n        <div className={styles.spinnercontainer}>\n            <img className={styles.spinnerloading} src={spinner} />\n        </div>\n    )\n}\n","\nimport { useCallback, useEffect, useState } from 'react'\nimport { useRandomColor } from '../../hook/useRandomColor';\nimport { Spinner } from '../Spinner';\nexport const ImageComponent = ({ content, fullscreen = true }: { content: string, fullscreen?: boolean }) => {\n    const [bg, setBg] = useState('')\n    const [imgSrc, setImgSrc] = useState('')\n\n    const background = useRandomColor()\n\n    useEffect(() => {\n        if (!fullscreen)\n            setBg(background)\n    }, [content])\n\n\n    const onLoad = useCallback(() => {\n        setImgSrc(content);\n    }, [content]);\n\n    useEffect(() => {\n        const img = new Image()\n        img.src = content\n        img.addEventListener('load', onLoad)\n\n        return () => {\n            img.removeEventListener('load', onLoad)\n        }\n    }, [content])\n\n    if (imgSrc !== '') return (<img src={imgSrc} alt=\"image\" style={{\n        objectFit: fullscreen ? 'cover' : 'contain',\n        background: bg,\n    }} />)\n\n    return (<Spinner />)\n}\n","import { useEffect, useRef } from 'react'\nimport { useRandomColor } from '../../hook/useRandomColor'\n\nexport const VideoComponent = ({ content, fullscreen = true, isPlay = true, muted=false }: { content: string, fullscreen?: boolean, isPlay?: boolean, muted?: boolean }) => {\n    const randomBackground = useRandomColor();\n    const background = !fullscreen ? randomBackground : \"\";\n    const video = useRef<HTMLVideoElement>(null)\n\n    useEffect(() => {\n        if (video.current) {\n            if(!isPlay) {\n                video.current.pause()\n            }else{\n                video.current.play()\n            }\n        }\n    }, [isPlay])\n\n    useEffect(() => {\n      if (video.current) {\n        video.current.style.background = background;\n      }\n    }, [content, video, background]);\n\n\n    return (\n        <video key={content} ref={video} className='video' autoPlay loop muted={muted} style={{\n            objectFit: fullscreen ? 'cover' : 'contain',\n        }} ><source src={content} /></video>\n    )\n\n\n}\n",".progressbar{\n    width: 100%;\n    height: 10px;\n    border-radius: 5px;\n    margin-bottom: 10px;\n    padding: 0 3px;\n}\n.progressbar svg {\n    border-radius: 5px;\n}\n.bgprogress{\n    fill: #6767675c;\n    box-shadow:  0 0 0 1px #6767675c;\n}\n","import { useEffect, useState } from 'react'\nimport styles from './ProgressBar.module.css'\nexport const ProgressBar = ({active, tope = 15, valor = 15 }: { tope: number, valor: number, active: number }) => {\n  const [pertcente, setPertcente] = useState(\"0%\")\n  useEffect(() => {\n    if (active === 1) {\n      setPertcente(`${(valor / tope) * 100}%`)\n    } else if (active === 2) {\n      setPertcente(`100%`)\n    } else {\n      setPertcente(`0%`)\n    }\n  }, [valor, tope, active])\n\n  return (\n    <>\n      <span className={styles.progressbar} role=\"progressbar\"\n        aria-valuemax={tope}\n        aria-valuenow={valor}\n      >\n        <svg width=\"100%\" height=\"3\">\n          <rect height=\"10\" width=\"100%\" className={styles.bgprogress} />\n          <rect height=\"10\" width=\"100%\" fill=\"#efefef\" className='relleno' style={{\n            transform: `scaleX(${pertcente})`,\n          }} />\n        </svg>\n      </span>\n    </>\n\n  )\n}\n","import { useEffect, useState } from \"react\"\n\n\n/**\n * hook contador\n */\nexport const useCount = (tope: number, autoStart: boolean = true) => {\n    const delay = 100;\n\n    const [count, setCount] = useState(0)\n    const [isRunning, setIsRunning] = useState(autoStart)\n\n    useEffect(() => {\n        if (isRunning) {\n            const interval = setInterval(() => {\n                setCount(count + 1)\n            }, isRunning ? delay : 0)\n\n            if (count > tope) {\n                setIsRunning(false)\n                setCount(1)\n            }\n\n            return () => clearInterval(interval)\n        }\n    }, [isRunning, count])\n\n    const start = () => {\n        setIsRunning(true)\n    }\n\n    const stop = () => {\n        setIsRunning(false)\n    }\n\n    const reset = () => {\n        setCount(1)\n        if(!isRunning)\n            setIsRunning(true)\n    }\n\n    return {\n        count,\n        start,\n        stop,\n        reset,\n        isPlay: isRunning\n    }\n}\n",".stories {\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 {\n  display: flex;\n  position: absolute;\n  height: inherit;\n  width: inherit;\n}\n.storiesactionbutton {\n  width: 50%;\n  height: 100%;\n  cursor: pointer;\n  z-index: 1;\n}\n.countprogressstories {\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 {\n  visibility: hidden;\n  opacity: 0;\n  transition: visibility 0s 0.2s, opacity 0.2s ease-in-out;\n}\n.storiescontent {\n  height: 100%;\n}\n.storiescontent img {\n  border-radius: 20px;\n  width: 100%;\n  height: 100%;\n}\n.storiescontent video {\n  border-radius: 20px;\n  width: 100%;\n  height: 100%;\n}\n.storiescontent iframe {\n  border-radius: 20px;\n  width: 100%;\n  height: 100%;\n}\n.storiescontent .jsx {\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:first-child {\n  margin-top: 1000px;\n}\n.mutedPosition{\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 {\n  0% {\n    opacity: 1;\n  }\n  100% {\n    opacity: 0;\n  }\n}\n","import { TContent } from \"../../types\"\nimport styles from '../StoriesComponent.module.css'\n\nexport const InnerComponent = ({ storie, isPlay }: { storie: TContent, isPlay: boolean }) => {\n    const InnerComponent = storie.content!\n    return (<div style={storie.styles!} className={styles.jsx}>\n        <InnerComponent isPlay={isPlay} />\n    </div>)\n}\n","export const MutedComponent = ({muted ,hadleMuted}:{muted:boolean, hadleMuted: () => void}) => {\n\n  return (\n    <>\n        <div onClick={hadleMuted} className=\"muted\">\n            {\n            !muted \n            ? \n            <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\">\n                <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\" />\n            </svg>\n            : \n            <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\">\n                <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\" />\n            </svg>\n            }\n        </div>\n    </>\n  )\n}\n","\nimport React, { useEffect, useRef, useState } from 'react'\nimport { TContent, TTypesContent } from '../types'\nimport { ImageComponent } from './ContentTypes/ImageComponent'\nimport { VideoComponent } from './ContentTypes/VideoComponent'\nimport { ProgressBar } from './ProgressBar'\nimport { useCount } from '../hook/useCount'\nimport { InnerComponent } from './ContentTypes/InnerComponent'\nimport TStoriesComponent from '../types/TStoriesComponent'\nimport styles from './StoriesComponent.module.css'\nimport { MutedComponent } from './MutedComponent'\n\nexport const typeComponents: TTypesContent = {\n    image: (storie: TContent) => <ImageComponent content={storie.url!} fullscreen={storie.fullscreen} />,\n    youtube: (storie: TContent) => <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\"></iframe>,\n    video: (storie: TContent, isPlay?: boolean, muted?: boolean) => <VideoComponent content={storie.url!} fullscreen={storie.fullscreen} isPlay={isPlay} muted={muted} />,\n    jsx: (storie: TContent, isPlay?: boolean) => <InnerComponent storie={storie} isPlay={isPlay!} />,\n}\n\nexport const StoriesComponent = ({ content, seconds, progress = true }: TStoriesComponent) => {\n    let second = seconds * 10\n\n    const { count, start, stop, reset, isPlay } = useCount(second)\n\n    const [currentIndex, setCurrentIndex] = useState(0)\n\n    const [storie, setstorie] = useState(content[currentIndex])\n\n    const [isMuted, setisMuted] = useState(true)\n\n    const mouse = useRef<any>(null)\n\n    useEffect(() => {\n        if (count > second) {\n            setCurrentIndex(currentIndex + 1)\n            start()\n            if (currentIndex === content.length - 1)\n                setCurrentIndex(0)\n            reset();\n        }\n    }, [count, start]);\n\n    useEffect(() => {\n        setstorie(content[currentIndex])\n    }, [currentIndex]);\n    const hadleClickLeft = (e: any) => {\n        e.preventDefault()\n        setCurrentIndex(currentIndex - 1)\n        reset()\n        if (currentIndex === 0)\n            setCurrentIndex(0)\n    }\n\n    const hadleClickRight = (e: any) => {\n        e.preventDefault()\n        setCurrentIndex(currentIndex + 1)\n        reset()\n        if (currentIndex === content.length - 1)\n            setCurrentIndex(0)\n    }\n\n    const hadleMuted = () => {\n        if (storie.type === 'video') {\n            setisMuted(!isMuted)\n        }\n    };\n\n    const pause = (e: React.MouseEvent | React.TouchEvent) => {\n        e.preventDefault()\n        mouse.current = setTimeout(() => {\n            stop()\n        }, 500)\n    }\n\n    const resume = (type: string) => (e: React.MouseEvent | React.TouchEvent) => {\n        e.preventDefault()\n        mouse.current && clearTimeout(mouse.current)\n        if (!isPlay) {\n            start()\n        } else {\n            type === 'left' ? hadleClickLeft(e) : hadleClickRight(e)\n        }\n    }\n    return (\n        <div className={styles.stories} style={{\n            width: '360px',\n            height: '640px',\n        }}>\n            <div className={`${styles.countprogressstories} ${!isPlay && progress ? styles.hiddenprogressstories : ''}`}>\n                {\n                    content.map((e, index: number) => {\n                        return <ProgressBar key={index} tope={second} valor={\n                            count\n                        } active={\n                            index === currentIndex ? 1 : (index < currentIndex ? 2 : 0)\n                        } />\n                    })\n                }\n            </div>\n            <div className={styles.storiescontent}>\n                {\n                    typeComponents[storie.type](storie, isPlay, isMuted)\n                }\n            </div>\n            <div className={styles.storiesaction}>\n                {\n                storie.type === 'video' \n                && \n                <div className={styles.mutedPosition}>\n                    <MutedComponent muted={isMuted} hadleMuted={hadleMuted} />\n                </div>      \n                }\n                <div className={styles.storiesactionbutton}\n                    onTouchStart={pause}\n                    onTouchEnd={resume('left')}\n                    onMouseDown={pause}\n                    onMouseUp={resume('left')}\n                    onMouseLeave={!isPlay ? resume('') : () => { }}\n                ></div>\n                <div className={styles.storiesactionbutton}\n                    onTouchStart={pause}\n                    onTouchEnd={resume('right')}\n                    onMouseDown={pause}\n                    onMouseUp={resume('right')}\n                    onMouseLeave={!isPlay ? resume('') : () => { }}\n                ></div>\n            </div>\n        </div>\n    )\n}"],"mappings":"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"}