@hakit/components/dist/cjs/Cards/MediaPlayerCard/Marquee.js

A series of components to work with @hakit/core

"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../../../emotion-react-jsx-runtime.browser.esm-D6BfYa4f.cjs"),P=require("../../../emotion-styled-base.browser.esm-BenTvX6I.cjs"),e=require("react");function Y(){return"You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."}const K=P.createStyled("div",process.env.NODE_ENV==="production"?{target:"erk7x4w0"}:{target:"erk7x4w0",label:"StyledMarquee"})(process.env.NODE_ENV==="production"?{name:"10ku7y1",styles:'overflow-x:hidden!important;display:flex!important;flex-direction:row!important;position:relative;width:var(--ha-marquee-width);transform:var(--ha-marquee-transform);&:hover div{animation-play-state:var(--ha-marquee-pause-on-hover);}&:active div{animation-play-state:var(--ha-marquee-pause-on-click);}.overlay{position:absolute;width:100%;height:100%;&::before,&::after{background:linear-gradient(to right, var(--ha-marquee-gradient-color));content:"";height:100%;position:absolute;width:var(--ha-marquee-gradient-width);z-index:2;}&::after{right:0;top:0;transform:rotateZ(180deg);}&::before{left:0;top:0;}}.marquee{flex:0 0 auto;min-width:var(--ha-marquee-min-width);z-index:1;display:flex;flex-direction:row;align-items:center;animation:scroll var(--ha-marquee-duration) linear var(--ha-marquee-delay) var(--ha-marquee-iteration-count);animation-play-state:var(--ha-marquee-play);animation-delay:var(--ha-marquee-delay);animation-direction:var(--ha-marquee-direction);@keyframes scroll{0%{transform:translateX(0%);}100%{transform:translateX(-100%);}}}.initial-child-container{flex:0 0 auto;display:flex;min-width:auto;flex-direction:row;}.child{transform:var(--ha-marquee-transform);&.last-child{padding-right:var(--ha-marquee-padding-right);}}'}:{name:"10ku7y1",styles:'overflow-x:hidden!important;display:flex!important;flex-direction:row!important;position:relative;width:var(--ha-marquee-width);transform:var(--ha-marquee-transform);&:hover div{animation-play-state:var(--ha-marquee-pause-on-hover);}&:active div{animation-play-state:var(--ha-marquee-pause-on-click);}.overlay{position:absolute;width:100%;height:100%;&::before,&::after{background:linear-gradient(to right, var(--ha-marquee-gradient-color));content:"";height:100%;position:absolute;width:var(--ha-marquee-gradient-width);z-index:2;}&::after{right:0;top:0;transform:rotateZ(180deg);}&::before{left:0;top:0;}}.marquee{flex:0 0 auto;min-width:var(--ha-marquee-min-width);z-index:1;display:flex;flex-direction:row;align-items:center;animation:scroll var(--ha-marquee-duration) linear var(--ha-marquee-delay) var(--ha-marquee-iteration-count);animation-play-state:var(--ha-marquee-play);animation-delay:var(--ha-marquee-delay);animation-direction:var(--ha-marquee-direction);@keyframes scroll{0%{transform:translateX(0%);}100%{transform:translateX(-100%);}}}.initial-child-container{flex:0 0 auto;display:flex;min-width:auto;flex-direction:row;}.child{transform:var(--ha-marquee-transform);&.last-child{padding-right:var(--ha-marquee-padding-right);}}',toString:Y}),L=e.forwardRef(function({style:N={},className:z="",autoFill:n=!1,play:l=!0,pauseOnHover:g=!1,pauseOnClick:p=!1,direction:a="left",speed:h=50,delay:_=0,loop:y=0,gradient:A=!1,gradientColor:w=[255,255,255],gradientWidth:f=200,onFinish:W,onCycleComplete:O,onMount:x,children:m},X){const[b,B]=e.useState(0),[v,D]=e.useState(0),[q,E]=e.useState(1),[R,T]=e.useState(!1),G=e.useRef(null),i=X||G,c=e.useRef(null),o=e.useRef(null),k=e.useRef(()=>{}),$=e.useCallback(()=>{if(c.current&&i.current){const r=i.current.getBoundingClientRect(),d=c.current.getBoundingClientRect();let s=r.width,u=d.width;(a==="up"||a==="down")&&(s=r.height,u=d.height),E(n&&s&&u&&u<s?Math.ceil(s/u):1),B(s),D(u)}},[n,i,a]);e.useEffect(()=>{k.current=$},[$]),e.useEffect(()=>{if(R)return o.current||(o.current=new ResizeObserver(()=>{k.current()})),c.current&&i.current&&(o.current.observe(i.current),o.current.observe(c.current)),()=>{o.current?.disconnect()}},[R,i]),e.useEffect(()=>(T(!0),()=>{o.current&&o.current.disconnect()}),[]),e.useEffect(()=>{typeof x=="function"&&x()},[x]);const j=e.useMemo(()=>n?v*q/h:v<b?b/h:v/h,[n,b,v,q,h]),S=`rgba(${w[0]}, ${w[1]}, ${w[2]}`,V=e.useMemo(()=>({...N,"--ha-marquee-pause-on-hover":!l||g?"paused":"running","--ha-marquee-pause-on-click":!l||g&&!p||p?"paused":"running","--ha-marquee-width":a==="up"||a==="down"?"100vh":"100%","--ha-marquee-transform":a==="up"?"rotate(-90deg)":a==="down"?"rotate(90deg)":"none"}),[N,l,g,p,a]),Z=e.useMemo(()=>({"--ha-marquee-gradient-color":`${S}, 1), ${S}, 0)`,"--ha-marquee-gradient-width":typeof f=="number"?`${f}px`:f}),[S,f]),C=e.useMemo(()=>({"--ha-marquee-play":l?"running":"paused","--ha-marquee-direction":a==="left"?"normal":"reverse","--ha-marquee-duration":`${j}s`,"--ha-marquee-delay":`${_}s`,"--ha-marquee-iteration-count":y>0?`${y}`:"infinite","--ha-marquee-min-width":n?"auto":"100%","--ha-marquee-padding-right":n?"4rem":"0"}),[l,a,j,_,y,n]),M=e.useMemo(()=>({"--ha-marquee-transform":a==="up"?"rotate(90deg)":a==="down"?"rotate(-90deg)":"none"}),[a]),I=e.useCallback(r=>[...Array(Number.isFinite(r)&&r>=0?r:0)].map((d,s)=>t.jsx(e.Fragment,{children:e.Children.map(m,(u,J)=>t.jsx("div",{style:M,className:`child ${J===e.Children.toArray(m).length-1?"last-child":""}`,children:u}))},s)),[M,m]);return R?t.jsxs(K,{ref:i,style:V,className:"marquee-container "+z,children:[A&&t.jsx("div",{style:Z,className:"overlay"}),t.jsxs("div",{className:"marquee",style:C,onAnimationIteration:O,onAnimationEnd:W,children:[t.jsx("div",{className:"initial-child-container",ref:c,children:e.Children.map(m,(r,d)=>t.jsx("div",{style:M,className:`child ${d===e.Children.toArray(m).length-1?"last-child":""}`,children:r}))}),I(q-1)]}),t.jsx("div",{className:"marquee",style:C,children:I(q)})]}):null});exports.Marquee=L;
//# sourceMappingURL=Marquee.js.map