@anker-in/headless-ui 0.0.27-alpha.145 → 0.0.27-alpha.146
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var
|
|
1
|
+
"use strict";"use client";var j=Object.create;var f=Object.defineProperty;var q=Object.getOwnPropertyDescriptor;var O=Object.getOwnPropertyNames;var A=Object.getPrototypeOf,G=Object.prototype.hasOwnProperty;var J=(n,o)=>{for(var e in o)f(n,e,{get:o[e],enumerable:!0})},L=(n,o,e,i)=>{if(o&&typeof o=="object"||typeof o=="function")for(let s of O(o))!G.call(n,s)&&s!==e&&f(n,s,{get:()=>o[s],enumerable:!(i=q(o,s))||i.enumerable});return n};var K=(n,o,e)=>(e=n!=null?j(A(n)):{},L(o||!n||!n.__esModule?f(e,"default",{value:n,enumerable:!0}):e,n)),Q=n=>L(f({},"__esModule",{value:!0}),n);var X={};J(X,{default:()=>W});module.exports=Q(X);var t=require("react/jsx-runtime"),r=require("react"),T=require("lodash"),d=require("../../helpers/utils.js"),N=require("../../shared/Styles.js"),oe=require("../../components/picture.js"),P=K(require("../../components/button.js")),h=require("@payloadcms/richtext-lexical/html"),E=require("react-intersection-observer");const M=({defaultConverters:n})=>({...n,text:o=>{const{node:e}=o;return e.$&&e.$.color?`<span class="lexical-${e.$.color}">${e.text}</span>`:e.text}}),U=(0,r.forwardRef)(({className:n="",onBtnClick:o,data:{title:e,videoTitle:i,btnText:s,img:Z,video:R,theme:z,shape:B,...$}},I)=>{const{sticky:c}=$,[p,m]=(0,r.useState)(!1),[y,_]=(0,r.useState)(0),[C,S]=(0,r.useState)(0),a=(0,r.useRef)(null),V=(0,r.useRef)(null),l=(0,r.useRef)(null),{ref:D,inView:w}=(0,E.useInView)();(0,r.useImperativeHandle)(I,()=>l.current);const H=typeof e=="string"?e:e&&(0,h.convertLexicalToHTML)({data:e,converters:M}),b=typeof i=="string"?i:i&&(0,h.convertLexicalToHTML)({data:i,converters:M});(0,r.useEffect)(()=>{w&&!s?(a.current?.play(),m(!0)):(a.current?.pause(),m(!1))},[w]);const g=(0,T.debounce)(()=>{if(l.current){const x=l.current.getBoundingClientRect(),u=window.innerHeight,F=window.scrollY||window.pageYOffset,Y=x.bottom+F,k=document.documentElement.scrollHeight-Y;_(k>u?u:k)}if(l.current){const x=l.current.clientHeight,u=window.innerHeight;S(x+u)}},600);(0,r.useEffect)(()=>(g(),window.addEventListener("resize",g),()=>{window.removeEventListener("resize",g)}),[]);const v="lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1024] desktop:aspect-h-[520] laptop:aspect-w-[1024] laptop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]";return(0,t.jsxs)(t.Fragment,{children:[c&&(0,t.jsx)("div",{ref:l,className:(0,d.cn)("relative z-10 ",v),children:(0,t.jsx)("div",{children:(0,t.jsxs)("div",{ref:D,className:"media-content absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4",children:[H&&!p&&(0,t.jsx)("div",{className:"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:H}}),b&&p&&(0,t.jsx)("div",{className:"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:b}}),!p&&s&&(0,t.jsx)(P.default,{variant:"link",className:(0,d.cn)("member-equity-button-secondary text-btn-primary-foreground"),onClick:()=>{p?(a.current&&a.current.pause(),m(!1)):(a.current&&a.current.play(),m(!0)),o&&o?.()},children:s})]})})}),(0,t.jsxs)("div",{style:c?{marginBottom:`-${y}px`,marginTop:`-${C}px`}:{},className:"relative",children:[(0,t.jsx)("div",{className:"sticky top-0 ",children:(0,t.jsx)("div",{className:(0,d.cn)("relative overflow-hidden",c?"h-screen w-screen":v,n,{"aiui-dark":z==="dark","rounded-box":B==="rounded"}),children:(0,t.jsx)("div",{children:(0,t.jsxs)("div",{ref:V,className:"media-cover left-0 top-0 h-screen w-screen",children:[(0,t.jsx)("video",{ref:a,className:"size-full object-cover",src:R?.url,muted:!0,loop:!0,playsInline:!0,"webkit-playsinline":!0,"x5-playsinline":!0}),(0,t.jsx)("div",{className:"absolute left-0 top-0 z-10 size-full"})]})})})}),(0,t.jsx)("div",{className:(0,d.cn)(c&&"relative box-content block",v),style:c?{height:`${y}px`}:{}})]})]})});var W=(0,N.withStyles)(U);
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/MediaPlayerBase/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useState, useRef, useEffect, forwardRef, useImperativeHandle } from 'react'\nimport { debounce } from 'lodash'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerBaseProps } from './types.js'\n// import { Right } from './right.js'\nimport { useInView } from 'react-intersection-observer'\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n ...defaultConverters,\n text: args => {\n const { node } = args\n\n // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n if (node.$ && node.$.color) {\n return `<span class=\"lexical-${node.$.color}\">${node.text}</span>`\n }\n return node.text\n },\n})\n\nconst MediaPlayerBase = forwardRef<HTMLDivElement, MediaPlayerBaseProps>(\n ({ className = '', onBtnClick, data: { title, videoTitle, btnText, img, video, theme, shape, ...rest } }, ref) => {\n const { sticky } = rest\n const [isPlaying, setIsPlaying] = useState(false)\n const [btb, setbtb] = useState(0)\n const [titleHeight, setTitleHeight] = useState(0)\n\n const videoRef = useRef<HTMLVideoElement>(null)\n const
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,
|
|
6
|
-
"names": ["MediaPlayerBase_exports", "__export", "MediaPlayerBase_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_lodash", "import_utils", "import_Styles", "import_picture", "import_button", "import_html", "import_react_intersection_observer", "htmlConverters", "defaultConverters", "args", "node", "MediaPlayerBase", "className", "onBtnClick", "title", "videoTitle", "btnText", "img", "video", "theme", "shape", "rest", "ref", "sticky", "isPlaying", "setIsPlaying", "btb", "setbtb", "titleHeight", "setTitleHeight", "videoRef", "
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useState, useRef, useEffect, forwardRef, useImperativeHandle } from 'react'\nimport { debounce } from 'lodash'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerBaseProps } from './types.js'\n// import { Right } from './right.js'\nimport { useInView } from 'react-intersection-observer'\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n ...defaultConverters,\n text: args => {\n const { node } = args\n\n // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n if (node.$ && node.$.color) {\n return `<span class=\"lexical-${node.$.color}\">${node.text}</span>`\n }\n return node.text\n },\n})\n\nconst MediaPlayerBase = forwardRef<HTMLDivElement, MediaPlayerBaseProps>(\n ({ className = '', onBtnClick, data: { title, videoTitle, btnText, img, video, theme, shape, ...rest } }, ref) => {\n const { sticky } = rest\n const [isPlaying, setIsPlaying] = useState(false)\n const [btb, setbtb] = useState(0)\n const [titleHeight, setTitleHeight] = useState(0)\n\n const videoRef = useRef<HTMLVideoElement>(null)\n const bgRef = useRef<HTMLImageElement>(null)\n const titleRef = useRef<HTMLDivElement>(null)\n\n const { ref: inViewRef, inView } = useInView()\n\n useImperativeHandle(ref, () => titleRef.current as HTMLDivElement)\n\n const title_html =\n typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title, converters: htmlConverters })\n const videoTitle_html =\n typeof videoTitle === 'string'\n ? videoTitle\n : videoTitle && convertLexicalToHTML({ data: videoTitle, converters: htmlConverters })\n\n useEffect(() => {\n if (inView && !btnText) {\n videoRef.current?.play()\n setIsPlaying(true)\n } else {\n videoRef.current?.pause()\n setIsPlaying(false)\n }\n }, [inView])\n\n const debouncedHandleResize = debounce(() => {\n if (titleRef.current) {\n const rect = titleRef.current.getBoundingClientRect()\n const screenHeight = window.innerHeight\n const scrollTop = window.scrollY || window.pageYOffset\n const elementBottomToPageTop = rect.bottom + scrollTop\n const pageHeight = document.documentElement.scrollHeight\n const distanceToPageBottom = pageHeight - elementBottomToPageTop\n setbtb(distanceToPageBottom > screenHeight ? screenHeight : distanceToPageBottom)\n }\n if (titleRef.current) {\n const titleHeight = titleRef.current.clientHeight\n const screenHeight = window.innerHeight\n setTitleHeight(titleHeight + screenHeight)\n }\n }, 600)\n\n useEffect(() => {\n debouncedHandleResize()\n window.addEventListener('resize', debouncedHandleResize)\n return () => {\n window.removeEventListener('resize', debouncedHandleResize)\n }\n }, [])\n\n const aspect =\n 'lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1024] desktop:aspect-h-[520] laptop:aspect-w-[1024] laptop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]'\n return (\n <>\n {sticky && (\n <div ref={titleRef} className={cn('relative z-10 ', aspect)}>\n <div>\n <div\n ref={inViewRef}\n className=\"media-content absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4\"\n >\n {title_html && !isPlaying && (\n <div\n className=\"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: title_html }}\n />\n )}\n {videoTitle_html && isPlaying && (\n <div\n className=\"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: videoTitle_html }}\n />\n )}\n {!isPlaying && btnText && (\n <Button\n variant=\"link\"\n className={cn('member-equity-button-secondary text-btn-primary-foreground')}\n onClick={() => {\n if (isPlaying) {\n if (videoRef.current) {\n videoRef.current.pause()\n }\n setIsPlaying(false)\n } else {\n if (videoRef.current) {\n videoRef.current.play()\n }\n setIsPlaying(true)\n }\n onBtnClick && onBtnClick?.()\n }}\n >\n {btnText}\n {/* <Right /> */}\n </Button>\n )}\n </div>\n </div>\n </div>\n )}\n <div style={sticky ? { marginBottom: `-${btb}px`, marginTop: `-${titleHeight}px` } : {}} className=\"relative\">\n <div className=\"sticky top-0 \">\n <div\n className={cn('relative overflow-hidden', sticky ? 'h-screen w-screen' : aspect, className, {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n })}\n >\n <div>\n <div ref={bgRef} className=\"media-cover left-0 top-0 h-screen w-screen\">\n <video\n ref={videoRef}\n className=\"size-full object-cover\"\n src={video?.url}\n muted\n loop\n playsInline\n webkit-playsinline\n x5-playsinline\n />\n <div className=\"absolute left-0 top-0 z-10 size-full\" />\n </div>\n </div>\n </div>\n </div>\n <div\n className={cn(sticky && 'relative box-content block', aspect)}\n style={sticky ? { height: `${btb}px` } : {}}\n />\n </div>\n </>\n )\n }\n)\n\nexport default withStyles(MediaPlayerBase)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["MediaPlayerBase_exports", "__export", "MediaPlayerBase_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_lodash", "import_utils", "import_Styles", "import_picture", "import_button", "import_html", "import_react_intersection_observer", "htmlConverters", "defaultConverters", "args", "node", "MediaPlayerBase", "className", "onBtnClick", "title", "videoTitle", "btnText", "img", "video", "theme", "shape", "rest", "ref", "sticky", "isPlaying", "setIsPlaying", "btb", "setbtb", "titleHeight", "setTitleHeight", "videoRef", "bgRef", "titleRef", "inViewRef", "inView", "title_html", "videoTitle_html", "debouncedHandleResize", "rect", "screenHeight", "scrollTop", "elementBottomToPageTop", "distanceToPageBottom", "aspect", "Button"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{Fragment as
|
|
1
|
+
"use client";import{Fragment as G,jsx as e,jsxs as p}from"react/jsx-runtime";import{useState as x,useRef as h,useEffect as L,forwardRef as D,useImperativeHandle as F}from"react";import{debounce as Y}from"lodash";import{cn as d}from"../../helpers/utils.js";import{withStyles as j}from"../../shared/Styles.js";import"../../components/picture.js";import q from"../../components/button.js";import{convertLexicalToHTML as M}from"@payloadcms/richtext-lexical/html";import{useInView as O}from"react-intersection-observer";const T=({defaultConverters:m})=>({...m,text:s=>{const{node:t}=s;return t.$&&t.$.color?`<span class="lexical-${t.$.color}">${t.text}</span>`:t.text}}),A=D(({className:m="",onBtnClick:s,data:{title:t,videoTitle:i,btnText:u,img:J,video:N,theme:P,shape:E,...R}},z)=>{const{sticky:r}=R,[a,l]=x(!1),[y,B]=x(0),[$,I]=x(0),n=h(null),_=h(null),o=h(null),{ref:C,inView:w}=O();F(z,()=>o.current);const H=typeof t=="string"?t:t&&M({data:t,converters:T}),b=typeof i=="string"?i:i&&M({data:i,converters:T});L(()=>{w&&!u?(n.current?.play(),l(!0)):(n.current?.pause(),l(!1))},[w]);const f=Y(()=>{if(o.current){const v=o.current.getBoundingClientRect(),c=window.innerHeight,S=window.scrollY||window.pageYOffset,V=v.bottom+S,k=document.documentElement.scrollHeight-V;B(k>c?c:k)}if(o.current){const v=o.current.clientHeight,c=window.innerHeight;I(v+c)}},600);L(()=>(f(),window.addEventListener("resize",f),()=>{window.removeEventListener("resize",f)}),[]);const g="lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1024] desktop:aspect-h-[520] laptop:aspect-w-[1024] laptop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]";return p(G,{children:[r&&e("div",{ref:o,className:d("relative z-10 ",g),children:e("div",{children:p("div",{ref:C,className:"media-content absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4",children:[H&&!a&&e("div",{className:"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:H}}),b&&a&&e("div",{className:"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:b}}),!a&&u&&e(q,{variant:"link",className:d("member-equity-button-secondary text-btn-primary-foreground"),onClick:()=>{a?(n.current&&n.current.pause(),l(!1)):(n.current&&n.current.play(),l(!0)),s&&s?.()},children:u})]})})}),p("div",{style:r?{marginBottom:`-${y}px`,marginTop:`-${$}px`}:{},className:"relative",children:[e("div",{className:"sticky top-0 ",children:e("div",{className:d("relative overflow-hidden",r?"h-screen w-screen":g,m,{"aiui-dark":P==="dark","rounded-box":E==="rounded"}),children:e("div",{children:p("div",{ref:_,className:"media-cover left-0 top-0 h-screen w-screen",children:[e("video",{ref:n,className:"size-full object-cover",src:N?.url,muted:!0,loop:!0,playsInline:!0,"webkit-playsinline":!0,"x5-playsinline":!0}),e("div",{className:"absolute left-0 top-0 z-10 size-full"})]})})})}),e("div",{className:d(r&&"relative box-content block",g),style:r?{height:`${y}px`}:{}})]})]})});var se=j(A);export{se as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/MediaPlayerBase/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useState, useRef, useEffect, forwardRef, useImperativeHandle } from 'react'\nimport { debounce } from 'lodash'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerBaseProps } from './types.js'\n// import { Right } from './right.js'\nimport { useInView } from 'react-intersection-observer'\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n ...defaultConverters,\n text: args => {\n const { node } = args\n\n // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n if (node.$ && node.$.color) {\n return `<span class=\"lexical-${node.$.color}\">${node.text}</span>`\n }\n return node.text\n },\n})\n\nconst MediaPlayerBase = forwardRef<HTMLDivElement, MediaPlayerBaseProps>(\n ({ className = '', onBtnClick, data: { title, videoTitle, btnText, img, video, theme, shape, ...rest } }, ref) => {\n const { sticky } = rest\n const [isPlaying, setIsPlaying] = useState(false)\n const [btb, setbtb] = useState(0)\n const [titleHeight, setTitleHeight] = useState(0)\n\n const videoRef = useRef<HTMLVideoElement>(null)\n const
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["Fragment", "jsx", "jsxs", "useState", "useRef", "useEffect", "forwardRef", "useImperativeHandle", "debounce", "cn", "withStyles", "Button", "convertLexicalToHTML", "useInView", "htmlConverters", "defaultConverters", "args", "node", "MediaPlayerBase", "className", "onBtnClick", "title", "videoTitle", "btnText", "img", "video", "theme", "shape", "rest", "ref", "sticky", "isPlaying", "setIsPlaying", "btb", "setbtb", "titleHeight", "setTitleHeight", "videoRef", "
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useState, useRef, useEffect, forwardRef, useImperativeHandle } from 'react'\nimport { debounce } from 'lodash'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerBaseProps } from './types.js'\n// import { Right } from './right.js'\nimport { useInView } from 'react-intersection-observer'\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n ...defaultConverters,\n text: args => {\n const { node } = args\n\n // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n if (node.$ && node.$.color) {\n return `<span class=\"lexical-${node.$.color}\">${node.text}</span>`\n }\n return node.text\n },\n})\n\nconst MediaPlayerBase = forwardRef<HTMLDivElement, MediaPlayerBaseProps>(\n ({ className = '', onBtnClick, data: { title, videoTitle, btnText, img, video, theme, shape, ...rest } }, ref) => {\n const { sticky } = rest\n const [isPlaying, setIsPlaying] = useState(false)\n const [btb, setbtb] = useState(0)\n const [titleHeight, setTitleHeight] = useState(0)\n\n const videoRef = useRef<HTMLVideoElement>(null)\n const bgRef = useRef<HTMLImageElement>(null)\n const titleRef = useRef<HTMLDivElement>(null)\n\n const { ref: inViewRef, inView } = useInView()\n\n useImperativeHandle(ref, () => titleRef.current as HTMLDivElement)\n\n const title_html =\n typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title, converters: htmlConverters })\n const videoTitle_html =\n typeof videoTitle === 'string'\n ? videoTitle\n : videoTitle && convertLexicalToHTML({ data: videoTitle, converters: htmlConverters })\n\n useEffect(() => {\n if (inView && !btnText) {\n videoRef.current?.play()\n setIsPlaying(true)\n } else {\n videoRef.current?.pause()\n setIsPlaying(false)\n }\n }, [inView])\n\n const debouncedHandleResize = debounce(() => {\n if (titleRef.current) {\n const rect = titleRef.current.getBoundingClientRect()\n const screenHeight = window.innerHeight\n const scrollTop = window.scrollY || window.pageYOffset\n const elementBottomToPageTop = rect.bottom + scrollTop\n const pageHeight = document.documentElement.scrollHeight\n const distanceToPageBottom = pageHeight - elementBottomToPageTop\n setbtb(distanceToPageBottom > screenHeight ? screenHeight : distanceToPageBottom)\n }\n if (titleRef.current) {\n const titleHeight = titleRef.current.clientHeight\n const screenHeight = window.innerHeight\n setTitleHeight(titleHeight + screenHeight)\n }\n }, 600)\n\n useEffect(() => {\n debouncedHandleResize()\n window.addEventListener('resize', debouncedHandleResize)\n return () => {\n window.removeEventListener('resize', debouncedHandleResize)\n }\n }, [])\n\n const aspect =\n 'lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1024] desktop:aspect-h-[520] laptop:aspect-w-[1024] laptop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]'\n return (\n <>\n {sticky && (\n <div ref={titleRef} className={cn('relative z-10 ', aspect)}>\n <div>\n <div\n ref={inViewRef}\n className=\"media-content absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4\"\n >\n {title_html && !isPlaying && (\n <div\n className=\"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: title_html }}\n />\n )}\n {videoTitle_html && isPlaying && (\n <div\n className=\"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: videoTitle_html }}\n />\n )}\n {!isPlaying && btnText && (\n <Button\n variant=\"link\"\n className={cn('member-equity-button-secondary text-btn-primary-foreground')}\n onClick={() => {\n if (isPlaying) {\n if (videoRef.current) {\n videoRef.current.pause()\n }\n setIsPlaying(false)\n } else {\n if (videoRef.current) {\n videoRef.current.play()\n }\n setIsPlaying(true)\n }\n onBtnClick && onBtnClick?.()\n }}\n >\n {btnText}\n {/* <Right /> */}\n </Button>\n )}\n </div>\n </div>\n </div>\n )}\n <div style={sticky ? { marginBottom: `-${btb}px`, marginTop: `-${titleHeight}px` } : {}} className=\"relative\">\n <div className=\"sticky top-0 \">\n <div\n className={cn('relative overflow-hidden', sticky ? 'h-screen w-screen' : aspect, className, {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n })}\n >\n <div>\n <div ref={bgRef} className=\"media-cover left-0 top-0 h-screen w-screen\">\n <video\n ref={videoRef}\n className=\"size-full object-cover\"\n src={video?.url}\n muted\n loop\n playsInline\n webkit-playsinline\n x5-playsinline\n />\n <div className=\"absolute left-0 top-0 z-10 size-full\" />\n </div>\n </div>\n </div>\n </div>\n <div\n className={cn(sticky && 'relative box-content block', aspect)}\n style={sticky ? { height: `${btb}px` } : {}}\n />\n </div>\n </>\n )\n }\n)\n\nexport default withStyles(MediaPlayerBase)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["Fragment", "jsx", "jsxs", "useState", "useRef", "useEffect", "forwardRef", "useImperativeHandle", "debounce", "cn", "withStyles", "Button", "convertLexicalToHTML", "useInView", "htmlConverters", "defaultConverters", "args", "node", "MediaPlayerBase", "className", "onBtnClick", "title", "videoTitle", "btnText", "img", "video", "theme", "shape", "rest", "ref", "sticky", "isPlaying", "setIsPlaying", "btb", "setbtb", "titleHeight", "setTitleHeight", "videoRef", "bgRef", "titleRef", "inViewRef", "inView", "title_html", "videoTitle_html", "debouncedHandleResize", "rect", "screenHeight", "scrollTop", "elementBottomToPageTop", "distanceToPageBottom", "aspect", "MediaPlayerBase_default"]
|
|
7
7
|
}
|