@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 r=require("../../../emotion-react-jsx-runtime.browser.esm-CgJouFLh.cjs"),J=require("../../../emotion-styled-base.browser.esm-D0rcP917.cjs"),e=require("react");function P(){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 Y=J.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:P}),K=e.forwardRef(function({style:_={},className:I="",autoFill:n=!1,play:l=!0,pauseOnHover:p=!1,pauseOnClick:y=!1,direction:a="left",speed:f=50,delay:E=0,loop:w=0,gradient:z=!1,gradientColor:x=[255,255,255],gradientWidth:v=200,onFinish:A,onCycleComplete:O,onMount:b,children:u},W){const[R,X]=e.useState(0),[q,B]=e.useState(0),[g,k]=e.useState(1),[S,D]=e.useState(!1),T=e.useRef(null),i=W||T,m=e.useRef(null),d=e.useRef(null),h=e.useCallback(()=>{if(m.current&&i.current){const t=i.current.getBoundingClientRect(),c=m.current.getBoundingClientRect();let o=t.width,s=c.width;(a==="up"||a==="down")&&(o=t.height,s=c.height),k(n&&o&&s&&s<o?Math.ceil(o/s):1),X(o),B(s)}},[n,i,a]);e.useEffect(()=>{S&&(h(),m.current&&i.current&&(d.current=new ResizeObserver(()=>h()),d.current.observe(i.current),d.current.observe(m.current)))},[h,i,S]),e.useEffect(()=>{h()},[h,u]),e.useEffect(()=>(D(!0),()=>{d.current&&d.current.disconnect()}),[]),e.useEffect(()=>{typeof b=="function"&&b()},[b]);const $=e.useMemo(()=>n?q*g/f:q<R?R/f:q/f,[n,R,q,g,f]),M=`rgba(${x[0]}, ${x[1]}, ${x[2]}`,G=e.useMemo(()=>({..._,"--ha-marquee-pause-on-hover":!l||p?"paused":"running","--ha-marquee-pause-on-click":!l||p&&!y||y?"paused":"running","--ha-marquee-width":a==="up"||a==="down"?"100vh":"100%","--ha-marquee-transform":a==="up"?"rotate(-90deg)":a==="down"?"rotate(90deg)":"none"}),[_,l,p,y,a]),V=e.useMemo(()=>({"--ha-marquee-gradient-color":`${M}, 1), ${M}, 0)`,"--ha-marquee-gradient-width":typeof v=="number"?`${v}px`:v}),[M,v]),j=e.useMemo(()=>({"--ha-marquee-play":l?"running":"paused","--ha-marquee-direction":a==="left"?"normal":"reverse","--ha-marquee-duration":`${$}s`,"--ha-marquee-delay":`${E}s`,"--ha-marquee-iteration-count":w>0?`${w}`:"infinite","--ha-marquee-min-width":n?"auto":"100%","--ha-marquee-padding-right":n?"4rem":"0"}),[l,a,$,E,w,n]),N=e.useMemo(()=>({"--ha-marquee-transform":a==="up"?"rotate(90deg)":a==="down"?"rotate(-90deg)":"none"}),[a]),C=e.useCallback(t=>[...Array(Number.isFinite(t)&&t>=0?t:0)].map((c,o)=>r.jsx(e.Fragment,{children:e.Children.map(u,(s,Z)=>r.jsx("div",{style:N,className:`child ${Z===e.Children.toArray(u).length-1?"last-child":""}`,children:s}))},o)),[N,u]);return S?r.jsxs(Y,{ref:i,style:G,className:"marquee-container "+I,children:[z&&r.jsx("div",{style:V,className:"overlay"}),r.jsxs("div",{className:"marquee",style:j,onAnimationIteration:O,onAnimationEnd:A,children:[r.jsx("div",{className:"initial-child-container",ref:m,children:e.Children.map(u,(t,c)=>r.jsx("div",{style:N,className:`child ${c===e.Children.toArray(u).length-1?"last-child":""}`,children:t}))}),C(g-1)]}),r.jsx("div",{className:"marquee",style:j,children:C(g)})]}):null});exports.Marquee=K;
//# sourceMappingURL=Marquee.js.map