@xiping/react-components 1.0.40 → 1.0.45
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.
- package/dist/cjs/components/flip-text/FlipText.js +1 -1
- package/dist/cjs/components/gradient-text/index.d.ts +10 -0
- package/dist/cjs/components/gradient-text/index.js +1 -0
- package/dist/cjs/components/hyper-text/index.js +1 -1
- package/dist/cjs/components/image-viewer/ImageViewer.js +1 -1
- package/dist/cjs/components/shimmer-button/ShimmerButton.js +1 -1
- package/dist/cjs/components/shiny-button/ShinyButton.js +1 -1
- package/dist/cjs/components/sparkles-text/SparklesText.js +1 -1
- package/dist/cjs/components/split-text/SplitText.js +1 -1
- package/dist/cjs/components/subtitle-player/SubtitlePlayer.d.ts +30 -0
- package/dist/cjs/components/subtitle-player/SubtitlePlayer.js +3 -0
- package/dist/cjs/components/subtitle-player/index.d.ts +2 -0
- package/dist/cjs/components/txt-editor/TxtEditor.d.ts +5 -4
- package/dist/cjs/components/txt-editor/TxtEditor.js +32 -1
- package/dist/cjs/components/txt-reader/TxtReader.js +1 -1
- package/dist/cjs/components/txt-reader/index.module.css.js +1 -1
- package/dist/cjs/components/typing-animation/index.js +1 -1
- package/dist/cjs/components/variable-proximity/index.d.ts +25 -0
- package/dist/cjs/components/variable-proximity/index.js +1 -0
- package/dist/cjs/components/video-dialog/VideoDialog.js +1 -1
- package/dist/cjs/index.d.ts +3 -0
- package/dist/cjs/index.js +1 -1
- package/dist/cjs/react-components.css +1 -1
- package/dist/cjs/subtitle/lib/src/parser.js +5 -0
- package/dist/es/components/flip-text/FlipText.js +15 -14
- package/dist/es/components/gradient-text/index.d.ts +10 -0
- package/dist/es/components/gradient-text/index.js +22 -0
- package/dist/es/components/hyper-text/index.js +27 -25
- package/dist/es/components/image-viewer/ImageViewer.js +89 -65
- package/dist/es/components/shimmer-button/ShimmerButton.js +29 -62
- package/dist/es/components/shiny-button/ShinyButton.js +15 -17
- package/dist/es/components/sparkles-text/SparklesText.js +30 -29
- package/dist/es/components/split-text/SplitText.js +37 -35
- package/dist/es/components/subtitle-player/SubtitlePlayer.d.ts +30 -0
- package/dist/es/components/subtitle-player/SubtitlePlayer.js +103 -0
- package/dist/es/components/subtitle-player/index.d.ts +2 -0
- package/dist/es/components/txt-editor/TxtEditor.d.ts +5 -4
- package/dist/es/components/txt-editor/TxtEditor.js +102 -43
- package/dist/es/components/txt-reader/TxtReader.js +48 -55
- package/dist/es/components/txt-reader/index.module.css.js +6 -2
- package/dist/es/components/typing-animation/index.js +11 -13
- package/dist/es/components/variable-proximity/index.d.ts +25 -0
- package/dist/es/components/variable-proximity/index.js +212 -0
- package/dist/es/components/video-dialog/VideoDialog.js +35 -48
- package/dist/es/index.d.ts +3 -0
- package/dist/es/index.js +60 -54
- package/dist/es/react-components.css +1 -1
- package/dist/es/subtitle/lib/src/parser.js +56 -0
- package/package.json +16 -12
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),
|
|
1
|
+
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("motion/react"),m=require("../../utils/utils.js"),h=require("react");;/* empty css */const x={hidden:{rotateX:-90,opacity:0},visible:{rotateX:0,opacity:1}};function j({children:n,duration:r=.5,delayMultiple:a=.08,className:s,as:c="span",variants:o,...l}){const d=t.motion.create(c),u=h.Children.toArray(n).join("").split("");return e.jsx("div",{className:"xiping-flip-container",children:e.jsx(t.AnimatePresence,{mode:"wait",children:u.map((p,i)=>e.jsx(d,{initial:"hidden",animate:"visible",exit:"hidden",variants:o||x,transition:{duration:r,delay:i*a},className:m.cn("xiping-flip-char",s),...l,children:p},i))})})}exports.FlipText=j;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
interface GradientTextProps {
|
|
3
|
+
children: ReactNode;
|
|
4
|
+
className?: string;
|
|
5
|
+
colors?: string[];
|
|
6
|
+
animationSpeed?: number;
|
|
7
|
+
showBorder?: boolean;
|
|
8
|
+
}
|
|
9
|
+
export default function GradientText({ children, className, colors, animationSpeed, showBorder, }: GradientTextProps): import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
export { GradientText };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime");;/* empty css */function a({children:i,className:n="",colors:r=["#40ffaa","#4079ff","#40ffaa","#4079ff","#40ffaa"],animationSpeed:s=8,showBorder:d=!1}){const t={backgroundImage:`linear-gradient(to right, ${r.join(", ")})`,animationDuration:`${s}s`};return e.jsxs("div",{className:`animated-gradient-text ${n}`,children:[d&&e.jsx("div",{className:"gradient-overlay",style:t}),e.jsx("div",{className:"text-content",style:t,children:i})]})}exports.GradientText=a;exports.default=a;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("react/jsx-runtime"),d=require("../../utils/utils.js"),f=require("motion/react"),r=require("react");;/* empty css */const H=Object.freeze("ABCDEFGHIJKLMNOPQRSTUVWXYZ".split("")),P=n=>Math.floor(Math.random()*n);function S({children:n,className:M,duration:l=800,delay:o=0,as:R="div",startOnView:g=!1,animateOnHover:q=!0,characterSet:i=H,...y}){const E=f.motion.create(R,{forwardMotionProps:!0}),[I,b]=r.useState(()=>n.split("")),[a,s]=r.useState(!1),c=r.useRef(0),u=r.useRef(null),j=()=>{q&&!a&&(c.current=0,s(!0))};return r.useEffect(()=>{if(!g){const t=setTimeout(()=>{s(!0)},o);return()=>clearTimeout(t)}const e=new IntersectionObserver(([t])=>{t.isIntersecting&&(setTimeout(()=>{s(!0)},o),e.disconnect())},{threshold:.1,rootMargin:"-30% 0px -30% 0px"});return u.current&&e.observe(u.current),()=>e.disconnect()},[o,g]),r.useEffect(()=>{if(!a)return;const e=n.length,t=performance.now();let m;const T=C=>{const F=C-t,x=Math.min(F/l,1);c.current=x*e,b(v=>v.map((A,h)=>A===" "?A:h<=c.current?n[h]:i[P(i.length)])),x<1?m=requestAnimationFrame(T):s(!1)};return m=requestAnimationFrame(T),()=>cancelAnimationFrame(m)},[n,l,a,i]),p.jsx(E,{ref:u,className:d.cn("xiping-hyper-container",M),onMouseEnter:j,...y,children:p.jsx(f.AnimatePresence,{children:I.map((e,t)=>p.jsx(f.motion.span,{className:d.cn("xiping-hyper-char",e===" "?"xiping-hyper-space":""),children:e.toUpperCase()},t))})})}exports.HyperText=S;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),
|
|
1
|
+
"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),x=require("@heroui/react"),T=require("../pinch-content/PinchContent.js"),O=require("./ImageThumbnails.js"),o=require("react"),U=require("clsx"),b=require("lucide-react"),v=require("motion/react"),f=require("../../utils/utils.js");;/* empty css */const C=l=>{l.target.closest(".xiping-main-content")&&l.preventDefault()},z=l=>{const{isOpen:a,onClose:w,imgSrc:m,thumbnailImages:N,canDownload:j=!1,wrapperClassName:y,closeClassName:I,downloadClassName:E,toolWrapperClassName:L,initialIndex:k=0}=l,s=Array.isArray(m)?m:[m],q=N||s,R=Math.max(0,Math.min(k,s.length-1)),[d,g]=o.useState(R),[D,p]=o.useState(!0),u=o.useCallback(()=>{p(!0),w()},[w]),A=async()=>{const i=s[d];try{const r=await(await fetch(i)).blob(),t=window.URL.createObjectURL(r),c=document.createElement("a");c.href=t,c.download=i.split("/").pop()||"image",document.body.appendChild(c),c.click(),window.URL.revokeObjectURL(t),document.body.removeChild(c)}catch(n){console.error("Error downloading image:",n)}},M=()=>{p(!1)},S=()=>{p(!1)};o.useEffect(()=>{if(a)return document.addEventListener("touchmove",C,{passive:!1}),()=>{document.removeEventListener("touchmove",C)}},[a]);const h=o.useCallback(()=>{"vibrate"in navigator&&navigator.vibrate([50,50,50])},[]);return o.useEffect(()=>{if(!a)return;const i=n=>{const r=n.target;if(!(r.tagName==="INPUT"||r.tagName==="TEXTAREA"||r.isContentEditable))switch(n.key){case"ArrowLeft":n.preventDefault(),g(t=>t>0?t-1:(h(),t));break;case"ArrowRight":n.preventDefault(),g(t=>t<s.length-1?t+1:(h(),t));break;case"Escape":n.preventDefault(),u();break}};return document.addEventListener("keydown",i),()=>{document.removeEventListener("keydown",i)}},[a,s.length,u,h]),e.jsx(x.Modal,{isOpen:a,size:"full",onClose:u,classNames:{wrapper:U(y)},className:"xiping-modal-overlay",hideCloseButton:!0,portalContainer:document.body,children:e.jsx(x.ModalContent,{className:"xiping-modal-content",children:e.jsxs("div",{className:"xiping-wrapper",children:[e.jsxs("div",{className:f.cn("xiping-tool-wrapper",L),children:[j&&e.jsx(b.Download,{size:24,className:f.cn("xiping-download-icon",E),onClick:A}),e.jsx(b.X,{size:24,className:f.cn("xiping-close-icon",I),onClick:u})]}),e.jsxs("div",{className:"xiping-main-content",children:[e.jsx(T.default,{canRotate:!1,className:"xiping-pinch-content",children:e.jsx(v.AnimatePresence,{mode:"wait",children:e.jsx(v.motion.img,{draggable:"false",src:s[d],alt:"",className:"xiping-image",onLoad:M,onError:S,initial:{opacity:0,scale:.95},animate:{opacity:1,scale:1},exit:{opacity:0,scale:1.05},transition:{duration:.3,ease:"easeInOut"}},d)})}),D&&e.jsx("div",{className:"xiping-loading",children:e.jsx(x.Spinner,{color:"white",size:"lg"})})]}),e.jsx(O.default,{images:q,currentIndex:d,onImageSelect:g})]})})})};exports.default=z;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),l=require("react"),d=require("../../utils/utils.js");;/* empty css */const i=l.forwardRef(({shimmerColor:s="#ffffff",shimmerSize:r="0.05em",shimmerDuration:t="3s",borderRadius:m="100px",background:n="rgba(0, 0, 0, 1)",className:a,children:u,...o},c)=>e.jsxs("button",{style:{"--spread":"90deg","--shimmer-color":s,"--radius":m,"--speed":t,"--cut":r,"--bg":n},className:d.cn("xiping-shimmer-button",a),ref:c,...o,children:[e.jsx("div",{className:"xiping-shimmer-button-spark-container",children:e.jsx("div",{className:"xiping-shimmer-button-spark",children:e.jsx("div",{className:"xiping-shimmer-button-spark-before"})})}),u,e.jsx("div",{className:"xiping-shimmer-button-highlight"}),e.jsx("div",{className:"xiping-shimmer-button-backdrop"})]}));i.displayName="ShimmerButton";exports.ShimmerButton=i;exports.default=i;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),s=require("../../utils/utils.js"),c=require("motion/react"),l=require("react");;/* empty css */const o={initial:{"--x":"100%",scale:.8},animate:{"--x":"-100%",scale:1},whileTap:{scale:.95},transition:{repeat:1/0,repeatType:"loop",repeatDelay:1,type:"spring",stiffness:20,damping:15,mass:2,scale:{type:"spring",stiffness:200,damping:5,mass:.5}}},e=l.forwardRef(({children:r,className:n,...t},i)=>a.jsxs(c.motion.button,{ref:i,className:s.cn("xiping-shiny-button",n),...o,...t,children:[a.jsx("span",{className:"xiping-shiny-button-text",style:{maskImage:"linear-gradient(-75deg,var(--primary) calc(var(--x) + 20%),transparent calc(var(--x) + 30%),var(--primary) calc(var(--x) + 100%))"},children:r}),a.jsx("span",{style:{mask:"linear-gradient(rgb(0,0,0), rgb(0,0,0)) content-box exclude,linear-gradient(rgb(0,0,0), rgb(0,0,0))",WebkitMask:"linear-gradient(rgb(0,0,0), rgb(0,0,0)) content-box exclude,linear-gradient(rgb(0,0,0), rgb(0,0,0))",backgroundImage:"linear-gradient(-75deg,var(--primary)/10% calc(var(--x)+20%),var(--primary)/50% calc(var(--x)+25%),var(--primary)/10% calc(var(--x)+100%))"},className:"xiping-shiny-button-border"})]}));e.displayName="ShinyButton";exports.ShinyButton=e;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),g=require("motion/react"),d=require("react"),k=require("../../utils/utils.js");;/* empty css */const y=({id:i,x:e,y:o,color:a,delay:c,scale:l})=>n.jsx(g.motion.svg,{className:"xiping-sparkle",initial:{opacity:0,left:e,top:o},animate:{opacity:[0,1,0],scale:[0,l,0],rotate:[75,120,150]},transition:{duration:.8,repeat:1/0,delay:c},width:"21",height:"21",viewBox:"0 0 21 21",children:n.jsx("path",{d:"M9.82531 0.843845C10.0553 0.215178 10.9446 0.215178 11.1746 0.843845L11.8618 2.72026C12.4006 4.19229 12.3916 6.39157 13.5 7.5C14.6084 8.60843 16.8077 8.59935 18.2797 9.13822L20.1561 9.82534C20.7858 10.0553 20.7858 10.9447 20.1561 11.1747L18.2797 11.8618C16.8077 12.4007 14.6084 12.3916 13.5 13.5C12.3916 14.6084 12.4006 16.8077 11.8618 18.2798L11.1746 20.1562C10.9446 20.7858 10.0553 20.7858 9.82531 20.1562L9.13819 18.2798C8.59932 16.8077 8.60843 14.6084 7.5 13.5C6.39157 12.3916 4.19225 12.4007 2.72023 11.8618L0.843814 11.1747C0.215148 10.9447 0.215148 10.0553 0.843814 9.82534L2.72023 9.13822C4.19225 8.59935 6.39157 8.60843 7.5 7.5C8.60843 6.39157 8.59932 4.19229 9.13819 2.72026L9.82531 0.843845Z",fill:a})},i),j=({children:i,colors:e={first:"#9E7AFF",second:"#FE8BBB"},className:o,sparklesCount:a=10,...c})=>{const[l,p]=d.useState([]);return d.useEffect(()=>{const r=()=>{const t=`${Math.random()*100}%`,s=`${Math.random()*100}%`,x=Math.random()>.5?e.first:e.second,h=Math.random()*2,C=Math.random()*1+.3,S=Math.random()*10+5;return{id:`${t}-${s}-${Date.now()}`,x:t,y:s,color:x,delay:h,scale:C,lifespan:S}},u=()=>{const t=Array.from({length:a},r);p(t)},f=()=>{p(t=>t.map(s=>s.lifespan<=0?r():{...s,lifespan:s.lifespan-.1}))};u();const m=setInterval(f,100);return()=>clearInterval(m)},[e.first,e.second,a]),n.jsx("div",{className:k.cn("xiping-sparkles-text",o),...c,style:{"--sparkles-first-color":`${e.first}`,"--sparkles-second-color":`${e.second}`},children:n.jsxs("span",{className:"xiping-sparkles-text-wrapper",children:[l.map(r=>n.jsx(y,{...r},r.id)),n.jsx("strong",{children:i})]})})};exports.SparklesText=j;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const j=require("react/jsx-runtime"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const j=require("react/jsx-runtime"),l=require("react"),o=require("gsap"),D=require("gsap/ScrollTrigger"),$=require("gsap/SplitText"),E=require("clsx");;/* empty css */o.gsap.registerPlugin(D.ScrollTrigger,$.SplitText);const F=({text:c,className:k="",delay:d=100,duration:m=.6,ease:x="power3.out",splitType:n="chars",from:h={opacity:0,y:40},to:a={opacity:1,y:0},threshold:w=.1,rootMargin:T="-100px",textAlign:q="center",onLetterAnimationComplete:S})=>{const u=l.useRef(null),y=l.useRef(!1),s=l.useRef(null);return l.useEffect(()=>{if(typeof window>"u"||!u.current||!c)return;const g=u.current;y.current=!1;const b=n==="lines";b&&(g.style.position="relative");let r;try{r=new $.SplitText(g,{type:n,absolute:b,linesClass:"split-line"})}catch(t){console.error("Failed to create SplitText:",t);return}let e;switch(n){case"lines":e=r.lines;break;case"words":e=r.words;break;case"chars":e=r.chars;break;default:e=r.chars}if(!e||e.length===0){console.warn("No targets found for SplitText animation"),r.revert();return}e.forEach(t=>{t.style.willChange="transform, opacity"});const C=(1-w)*100,i=/^(-?\d+(?:\.\d+)?)(px|em|rem|%)?$/.exec(T),p=i?parseFloat(i[1]):0,R=i&&i[2]||"px",v=p<0?`-=${Math.abs(p)}${R}`:`+=${p}${R}`,P=`top ${C}%${v}`,f=o.gsap.timeline({scrollTrigger:{trigger:g,start:P,toggleActions:"play none none none",once:!0,onToggle:t=>{s.current=t}},smoothChildTiming:!0,onComplete:()=>{y.current=!0,o.gsap.set(e,{...a,clearProps:"willChange",immediateRender:!0}),S?.()}});return f.set(e,{...h,immediateRender:!1,force3D:!0}),f.to(e,{...a,duration:m,ease:x,stagger:d/1e3,force3D:!0}),()=>{f.kill(),s.current&&(s.current.kill(),s.current=null),o.gsap.killTweensOf(e),r&&r.revert()}},[c,d,m,x,n,h,a,w,T,S]),j.jsx("p",{ref:u,className:E("xiping-split-parent",k),style:{textAlign:q,wordWrap:"break-word"},children:c})};exports.SplitText=F;
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
export type SubtitleType = 'srt' | 'vtt';
|
|
3
|
+
export interface SubtitleData {
|
|
4
|
+
/** 字幕类型 */
|
|
5
|
+
type: SubtitleType;
|
|
6
|
+
/** 字幕内容字符串 */
|
|
7
|
+
content: string;
|
|
8
|
+
/** 可选的语言标识,用于多字幕对照时的标签显示 */
|
|
9
|
+
label?: string;
|
|
10
|
+
}
|
|
11
|
+
export type SubtitleDisplayMode = 'current' | 'lyrics';
|
|
12
|
+
export interface SubtitlePlayerProps {
|
|
13
|
+
/** 字幕数据,可以是单个字幕或多个字幕(用于对照) */
|
|
14
|
+
subtitles: SubtitleData | SubtitleData[];
|
|
15
|
+
/** 当前播放进度(秒数) */
|
|
16
|
+
currentTime: number;
|
|
17
|
+
/** 显示模式:'current' 只显示当前字幕,'lyrics' 显示全部字幕并高亮当前 */
|
|
18
|
+
mode?: SubtitleDisplayMode;
|
|
19
|
+
/** 自定义类名 */
|
|
20
|
+
className?: string;
|
|
21
|
+
/** 自定义样式 */
|
|
22
|
+
style?: React.CSSProperties;
|
|
23
|
+
}
|
|
24
|
+
/**
|
|
25
|
+
* 字幕播放组件
|
|
26
|
+
* 支持 SRT 和 WebVTT 格式,可以同时显示多个字幕进行对照
|
|
27
|
+
* 支持两种显示模式:当前模式(只显示当前字幕)和歌词模式(显示全部并高亮当前)
|
|
28
|
+
*/
|
|
29
|
+
export declare const SubtitlePlayer: React.FC<SubtitlePlayerProps>;
|
|
30
|
+
export default SubtitlePlayer;
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react/jsx-runtime"),d=require("react"),j=require("../../subtitle/lib/src/parser.js");;/* empty css */function b(i){const r=i.replace(",",".").split(":");if(r.length!==3)return 0;const c=parseInt(r[0],10)||0,o=parseInt(r[1],10)||0,m=parseFloat(r[2])||0;return c*3600+o*60+m}function q(i,n){for(const r of i){const c=b(r.startTime),o=b(r.endTime);if(n>=c&&n<=o)return r}return null}const S=({subtitles:i,currentTime:n,mode:r="current",className:c="",style:o})=>{const m=Array.isArray(i)?i:[i],y=d.useRef(null),f=d.useRef(null),h=d.useMemo(()=>m.map(t=>{try{return{entries:t.type==="srt"?j.parseSRT(t.content):j.parseVTT(t.content),label:t.label}}catch(e){return console.error("字幕解析失败:",e),{entries:[],label:t.label}}}),[m]),v=d.useMemo(()=>h.map(({entries:t,label:e})=>({entry:q(t,n),label:e,entries:t})),[h,n]);return d.useEffect(()=>{if(r==="lyrics"&&f.current&&y.current){const t=y.current,e=f.current;t.getBoundingClientRect(),e.getBoundingClientRect(),t.scrollTop;const l=e.offsetTop,a=t.clientHeight,u=e.clientHeight,p=l-a/2+u/2;t.scrollTo({top:p,behavior:"smooth"})}},[r,n]),r==="current"?v.some(({entry:e})=>e!==null)?s.jsx("div",{className:`subtitle-player subtitle-player--current ${c}`,style:o,children:v.map(({entry:e,label:l},a)=>e?s.jsxs("div",{className:"subtitle-player-item","data-label":l||void 0,children:[l&&s.jsx("span",{className:"subtitle-player-label",children:l}),s.jsx("div",{className:"subtitle-player-text",children:e.text.split(`
|
|
2
|
+
`).map((u,p)=>s.jsx("div",{className:"subtitle-player-line",children:u},p))})]},a):null)}):null:s.jsx("div",{ref:y,className:`subtitle-player subtitle-player--lyrics ${c}`,style:o,children:h.map(({entries:t,label:e},l)=>s.jsxs("div",{className:"subtitle-player-group",children:[e&&s.jsx("span",{className:"subtitle-player-label",children:e}),t.map((a,u)=>{const p=b(a.startTime),x=b(a.endTime),g=n>=p&&n<=x,T=n>x;return s.jsx("div",{ref:g?f:null,className:`subtitle-player-item ${g?"subtitle-player-item--active":""} ${T?"subtitle-player-item--past":""}`,"data-label":e||void 0,children:s.jsx("div",{className:"subtitle-player-text",children:a.text.split(`
|
|
3
|
+
`).map((N,R)=>s.jsx("div",{className:"subtitle-player-line",children:N},R))})},u)})]},l))})};exports.SubtitlePlayer=S;exports.default=S;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { Editor } from '@tiptap/react';
|
|
2
2
|
export interface TxtEditorProps {
|
|
3
3
|
/**
|
|
4
4
|
* 编辑器高度
|
|
@@ -13,6 +13,7 @@ export interface TxtEditorProps {
|
|
|
13
13
|
/**
|
|
14
14
|
* 编辑器默认语言
|
|
15
15
|
* @default 'plaintext'
|
|
16
|
+
* @deprecated Tiptap 不支持语法高亮,此属性已废弃
|
|
16
17
|
*/
|
|
17
18
|
language?: string;
|
|
18
19
|
/**
|
|
@@ -40,13 +41,13 @@ export interface TxtEditorProps {
|
|
|
40
41
|
/**
|
|
41
42
|
* 编辑器加载完成回调
|
|
42
43
|
*/
|
|
43
|
-
onMount?:
|
|
44
|
+
onMount?: (editor: Editor) => void;
|
|
44
45
|
/**
|
|
45
46
|
* 文本编辑器样式
|
|
46
47
|
*/
|
|
47
48
|
className?: string;
|
|
48
49
|
}
|
|
49
50
|
/**
|
|
50
|
-
*
|
|
51
|
+
* Tiptap 文本编辑器组件
|
|
51
52
|
*/
|
|
52
|
-
export declare const TxtEditor: ({ height, width, language, defaultValue, value, theme, readOnly, onChange, onMount, className, }: TxtEditorProps) => import("react/jsx-runtime").JSX.Element;
|
|
53
|
+
export declare const TxtEditor: ({ height, width, language: _language, defaultValue, value, theme, readOnly, onChange, onMount, className, }: TxtEditorProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1 +1,32 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("react/jsx-runtime"),u=require("@tiptap/react"),M=require("@tiptap/starter-kit"),t=require("react"),E=({height:i="500px",width:n="100%",language:w="plaintext",defaultValue:l,value:o,theme:p="light",readOnly:s=!1,onChange:g,onMount:a,className:x})=>{const c=o!==void 0,b=t.useMemo(()=>l||o||"",[l,o]),e=u.useEditor({extensions:[M.configure({bold:!1,italic:!1,strike:!1,code:!1,heading:!1,blockquote:!1,horizontalRule:!1,hardBreak:!1})],content:b,editable:!s,immediatelyRender:!1,onUpdate:({editor:d})=>{const k=d.getText();g?.(k)}});if(t.useEffect(()=>{if(!e||!c)return;const d=e.getText();o!==d&&e.commands.setContent(o||"",{emitUpdate:!1})},[e,o,c]),t.useEffect(()=>{e&&e.setEditable(!s)},[e,s]),t.useEffect(()=>{e&&a&&a(e)},[e,a]),!e)return null;const m=typeof i=="number"?`${i}px`:i,h=typeof n=="number"?`${n}px`:n,r=p==="vs-dark";return f.jsxs("div",{className:x,style:{width:h,height:m,border:`1px solid ${r?"#3e3e3e":"#d4d4d4"}`,borderRadius:"4px",overflow:"hidden",backgroundColor:r?"#1e1e1e":"#ffffff"},children:[f.jsx(u.EditorContent,{editor:e,style:{height:"100%",overflow:"auto"}}),f.jsx("style",{children:`
|
|
2
|
+
.ProseMirror {
|
|
3
|
+
outline: none;
|
|
4
|
+
padding: 12px;
|
|
5
|
+
min-height: 100%;
|
|
6
|
+
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
|
|
7
|
+
font-size: 14px;
|
|
8
|
+
line-height: 1.5;
|
|
9
|
+
color: ${r?"#d4d4d4":"#333333"};
|
|
10
|
+
white-space: pre-wrap;
|
|
11
|
+
word-wrap: break-word;
|
|
12
|
+
}
|
|
13
|
+
.ProseMirror p {
|
|
14
|
+
margin: 0;
|
|
15
|
+
padding: 0;
|
|
16
|
+
}
|
|
17
|
+
.ProseMirror p + p {
|
|
18
|
+
margin-top: 0;
|
|
19
|
+
}
|
|
20
|
+
.ProseMirror:focus {
|
|
21
|
+
outline: none;
|
|
22
|
+
}
|
|
23
|
+
${r?`
|
|
24
|
+
.ProseMirror {
|
|
25
|
+
background-color: #1e1e1e;
|
|
26
|
+
}
|
|
27
|
+
`:`
|
|
28
|
+
.ProseMirror {
|
|
29
|
+
background-color: #ffffff;
|
|
30
|
+
}
|
|
31
|
+
`}
|
|
32
|
+
`})]})};exports.TxtEditor=E;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),l=require("react"),n=require("clsx"),t=require("motion/react"),r=require("./index.module.css.js"),F=16,h=1.5,v="normal",a=({content:u,lineHeight:d=h,fontSize:x=F,fontWeight:f=v,className:g="",style:m={},onProgressChange:p,initialScrollPosition:S,cacheKey:q,showTopProgress:T=!0,topProgressClassName:_,showBottomProgress:N=!0,bottomProgressClassName:R})=>{const s=l.useRef(null),o=l.useRef(null),{scrollYProgress:i}=t.useScroll({container:s,target:o}),c=t.useTransform(()=>(i.get()*100).toFixed(2).replace(/\.0*$/,"")),j=t.useMotionTemplate`${c}%`;return c.on("change",E=>{p?.(Number(E))}),e.jsxs(e.Fragment,{children:[T&&e.jsx(t.motion.div,{id:"scroll-indicator",className:n(r.default["xiping-top-progress"],_),style:{scaleX:i,originX:0}}),e.jsx("div",{className:n(r.default["xiping-container"],r.default.textContent),ref:s,children:e.jsx("div",{ref:o,className:n(r.default["xiping-content"],g),style:{fontSize:`${x}px`,lineHeight:d,fontWeight:f,...m},children:u})}),N&&e.jsx(t.motion.div,{id:"scroll-present",className:n(r.default["xiping-bottom-progress"],R),children:j})]})};exports.TxtReader=a;exports.default=a;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t="
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t="_textContent_yv2bi_63",e={"xiping-top-progress":"_xiping-top-progress_yv2bi_23","xiping-container":"_xiping-container_yv2bi_33","xiping-content":"_xiping-content_yv2bi_41","xiping-bottom-progress":"_xiping-bottom-progress_yv2bi_48",textContent:t};exports.default=e;exports.textContent=t;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const
|
|
1
|
+
"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const T=require("react/jsx-runtime"),b=require("../../utils/utils.js"),q=require("motion/react"),n=require("react");;/* empty css */function l({children:r,className:f,duration:o=100,delay:s=0,as:m="div",startOnView:u=!1,...d}){const g=q.motion.create(m,{forwardMotionProps:!0}),[p,v]=n.useState(""),[c,a]=n.useState(!1),i=n.useRef(null);return n.useEffect(()=>{if(!u){const t=setTimeout(()=>{a(!0)},s);return()=>clearTimeout(t)}const e=new IntersectionObserver(([t])=>{t.isIntersecting&&(setTimeout(()=>{a(!0)},s),e.disconnect())},{threshold:.1});return i.current&&e.observe(i.current),()=>e.disconnect()},[s,u]),n.useEffect(()=>{if(!c)return;let e=0;const t=setInterval(()=>{e<r.length?(v(r.substring(0,e+1)),e++):clearInterval(t)},o);return()=>{clearInterval(t)}},[r,o,c]),T.jsx(g,{ref:i,className:b.cn("xiping-typing-animation",f),...d,children:p})}exports.TypingAnimation=l;exports.default=l;
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { RefObject, HTMLAttributes } from 'react';
|
|
2
|
+
interface VariableProximityProps extends HTMLAttributes<HTMLSpanElement> {
|
|
3
|
+
label: string;
|
|
4
|
+
fromFontVariationSettings: string;
|
|
5
|
+
toFontVariationSettings: string;
|
|
6
|
+
containerRef: RefObject<HTMLElement>;
|
|
7
|
+
radius?: number;
|
|
8
|
+
falloff?: "linear" | "exponential" | "gaussian";
|
|
9
|
+
className?: string;
|
|
10
|
+
onClick?: () => void;
|
|
11
|
+
style?: React.CSSProperties;
|
|
12
|
+
/**
|
|
13
|
+
* 自定义字体族,如果不提供则使用默认的可变字体
|
|
14
|
+
* 例如: "'Custom Font', 'Roboto Flex', sans-serif"
|
|
15
|
+
*/
|
|
16
|
+
fontFamily?: string;
|
|
17
|
+
/**
|
|
18
|
+
* 是否自动加载默认字体(当 fontFamily 未提供时)
|
|
19
|
+
* @default true
|
|
20
|
+
*/
|
|
21
|
+
autoLoadFonts?: boolean;
|
|
22
|
+
}
|
|
23
|
+
declare const VariableProximity: import('react').ForwardRefExoticComponent<VariableProximityProps & import('react').RefAttributes<HTMLSpanElement>>;
|
|
24
|
+
export { VariableProximity };
|
|
25
|
+
export default VariableProximity;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const w=require("react/jsx-runtime"),f=require("react"),D=require("motion/react");;/* empty css */const l={robotoFlex:!1,notoSansSC:!1,loading:!1};function P(n){if(typeof document>"u")return!1;try{return document.fonts.check(`1em "${n}"`)}catch{return!0}}function O(){if(l.loading||l.robotoFlex&&l.notoSansSC)return;l.loading=!0;const n=P("Roboto Flex"),r=P("Noto Sans SC");if(n&&(l.robotoFlex=!0),r&&(l.notoSansSC=!0),n&&r){l.loading=!1;return}const i=(t,s)=>{if(document.querySelector(`link[href="${t}"]`)){s?.();return}const c=document.createElement("link");c.rel="stylesheet",c.href=t,c.onload=()=>s?.(),document.head.appendChild(c)},d=[{roboto:"https://fonts.loli.net/css2?family=Roboto+Flex:opsz,wght@8..144,100..1000&display=swap",noto:"https://fonts.loli.net/css2?family=Noto+Sans+SC:wght@100..900&display=swap"},{roboto:"https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,100..1000&display=swap",noto:"https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100..900&display=swap"}],m=t=>{if(t>=d.length){l.loading=!1;return}const s=d[t];let p=0;const c=()=>{p++,p===2&&(l.loading=!1)};n?c():i(s.roboto,()=>{l.robotoFlex=!0,c()}),r?c():i(s.noto,()=>{l.notoSansSC=!0,c()}),setTimeout(()=>{(!l.robotoFlex||!l.notoSansSC)&&m(t+1)},3e3)};m(0)}function U(n=!0){f.useEffect(()=>{n&&typeof document<"u"&&O()},[n])}function G(n){f.useEffect(()=>{let r;const i=()=>{n(),r=requestAnimationFrame(i)};return r=requestAnimationFrame(i),()=>cancelAnimationFrame(r)},[n])}function H(n){const r=f.useRef({x:0,y:0});return f.useEffect(()=>{const i=(t,s)=>{if(n?.current){const p=n.current.getBoundingClientRect();r.current={x:t-p.left,y:s-p.top}}else r.current={x:t,y:s}},d=t=>i(t.clientX,t.clientY),m=t=>{const s=t.touches[0];i(s.clientX,s.clientY)};return window.addEventListener("mousemove",d),window.addEventListener("touchmove",m),()=>{window.removeEventListener("mousemove",d),window.removeEventListener("touchmove",m)}},[n]),r}const b=f.forwardRef((n,r)=>{const{label:i,fromFontVariationSettings:d,toFontVariationSettings:m,containerRef:t,radius:s=50,falloff:p="linear",className:c="",onClick:V,style:C,fontFamily:y,autoLoadFonts:k=!0,...q}=n;U(k&&!y);const R=f.useRef([]),v=f.useRef([]),S=H(t),x=f.useRef({x:null,y:null}),N=f.useMemo(()=>{const e=o=>new Map(o.split(",").map(g=>g.trim()).map(g=>{const[h,F]=g.split(" ");return[h.replace(/['"]/g,""),parseFloat(F)]})),a=e(d),u=e(m);return Array.from(a.entries()).map(([o,g])=>({axis:o,fromValue:g,toValue:u.get(o)??g}))},[d,m]),j=(e,a,u,o)=>Math.sqrt((u-e)**2+(o-a)**2),A=e=>{const a=Math.min(Math.max(1-e/s,0),1);switch(p){case"exponential":return a**2;case"gaussian":return Math.exp(-((e/(s/2))**2)/2);case"linear":default:return a}};G(()=>{if(!t?.current)return;const{x:e,y:a}=S.current;if(x.current.x===e&&x.current.y===a)return;x.current={x:e,y:a};const u=t.current.getBoundingClientRect();R.current.forEach((o,g)=>{if(!o)return;const h=o.getBoundingClientRect(),F=h.left+h.width/2-u.left,T=h.top+h.height/2-u.top,M=j(S.current.x,S.current.y,F,T);if(M>=s){o.style.fontVariationSettings=d;return}const X=A(M),L=N.map(({axis:Y,fromValue:E,toValue:z})=>{const _=E+(z-E)*X;return`'${Y}' ${_}`}).join(", ");v.current[g]=L,o.style.fontVariationSettings=L})});const $=/[\u4e00-\u9fa5]/.test(i)?i.split(""):i.split(" ").flatMap((e,a,u)=>{const o=e.split("");return a<u.length-1?[...o," "]:o});let I=0;const B=f.useMemo(()=>{const e={display:"inline",...C};return y&&(e.fontFamily=y),e},[y,C]);return w.jsxs("span",{ref:r,className:`${c} variable-proximity`,onClick:V,style:B,...q,children:[$.map((e,a)=>{const u=I++;return w.jsx(D.motion.span,{ref:o=>{R.current[u]=o},style:{display:e===" "?"inline":"inline-block",fontVariationSettings:v.current[u]},"aria-hidden":"true",children:e},a)}),w.jsx("span",{className:"sr-only",children:i})]})});b.displayName="VariableProximity";exports.VariableProximity=b;exports.default=b;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),p=require("react"),e=require("motion/react"),t=require("lucide-react"),m=require("clsx");;/* empty css */const x={"from-bottom":{initial:{y:"100%",opacity:0},animate:{y:0,opacity:1},exit:{y:"100%",opacity:0}},"from-center":{initial:{scale:.5,opacity:0},animate:{scale:1,opacity:1},exit:{scale:.5,opacity:0}},"from-top":{initial:{y:"-100%",opacity:0},animate:{y:0,opacity:1},exit:{y:"-100%",opacity:0}},"from-left":{initial:{x:"-100%",opacity:0},animate:{x:0,opacity:1},exit:{x:"-100%",opacity:0}},"from-right":{initial:{x:"100%",opacity:0},animate:{x:0,opacity:1},exit:{x:"100%",opacity:0}},fade:{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0}},"top-in-bottom-out":{initial:{y:"-100%",opacity:0},animate:{y:0,opacity:1},exit:{y:"100%",opacity:0}},"left-in-right-out":{initial:{x:"-100%",opacity:0},animate:{x:0,opacity:1},exit:{x:"100%",opacity:0}}};function y({animationStyle:o="from-center",videoSrc:n,thumbnailSrc:c,thumbnailAlt:l="Video thumbnail",className:s}){const[r,a]=p.useState(!1),d=x[o];return i.jsxs("div",{className:m("xiping-video-dialog",s),children:[i.jsxs("div",{className:"xiping-video-dialog-container",onClick:()=>a(!0),children:[i.jsx("img",{src:c,alt:l,width:1920,height:1080,className:"xiping-video-dialog-thumbnail"}),i.jsx("div",{className:"xiping-video-dialog-overlay",children:i.jsx("div",{className:"xiping-video-dialog-play-outer",children:i.jsx("div",{className:"xiping-video-dialog-play-inner",children:i.jsx(t.Play,{className:"xiping-video-dialog-play-icon"})})})})]}),i.jsx(e.AnimatePresence,{children:r&&i.jsx(e.motion.div,{initial:{opacity:0},animate:{opacity:1},onClick:()=>a(!1),exit:{opacity:0},className:"xiping-video-dialog-modal",children:i.jsxs(e.motion.div,{...d,transition:{type:"spring",damping:30,stiffness:300},className:"xiping-video-dialog-modal-content",children:[i.jsx(e.motion.button,{className:"xiping-video-dialog-close-button",children:i.jsx(t.XIcon,{className:"xiping-video-dialog-close-icon"})}),i.jsx("div",{className:"xiping-video-dialog-video-wrapper",children:i.jsx("iframe",{src:n,className:"xiping-video-dialog-iframe",allowFullScreen:!0,allow:"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"})})]})})})]})}exports.VideoDialog=y;
|
package/dist/cjs/index.d.ts
CHANGED
|
@@ -25,4 +25,7 @@ export * from './components/scratch-to-reveal';
|
|
|
25
25
|
export * from './components/split-text';
|
|
26
26
|
export * from './components/dome-gallery';
|
|
27
27
|
export * from './components/text-type';
|
|
28
|
+
export * from './components/gradient-text';
|
|
29
|
+
export * from './components/variable-proximity';
|
|
30
|
+
export * from './components/subtitle-player';
|
|
28
31
|
export * from './hooks/useStayTimeReport';
|
package/dist/cjs/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});;/* empty css */const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});;/* empty css */const r=require("./components/button/Button.js"),o=require("./components/txt-reader/TxtReader.js"),n=require("./components/hyper-text/index.js"),a=require("./components/typing-animation/index.js"),u=require("./components/qr-code/index.js"),t=require("./components/confetti-button/index.js"),c=require("./components/gradient-text/index.js"),s=require("./components/variable-proximity/index.js"),T=require("./hooks/useStayTimeReport.js"),d=require("./components/pinch-content/PinchContent.js"),l=require("./components/image-viewer/ImageViewer.js"),x=require("./components/shimmer-button/ShimmerButton.js"),m=require("./components/image-compare/ImageCompare.js"),q=require("./components/text-type/TextType.js"),p=require("./components/text-animate/TextAnimate.js"),e=require("./components/dock/Duck.js"),S=require("./components/txt-editor/TxtEditor.js"),y=require("./components/message/Message.js"),g=require("react-force-graph-3d"),B=require("canvas-confetti"),h=require("./components/pointer/Pointer.js"),C=require("./components/sparkles-text/SparklesText.js"),f=require("./components/blur-fade/BlurFade.js"),P=require("./components/video-dialog/VideoDialog.js"),R=require("./components/comic-text/ComicText.js"),k=require("./components/flip-text/FlipText.js"),i=require("./components/animated-list/AnimatedList.js"),A=require("./components/shiny-button/ShinyButton.js"),D=require("./components/scratch-to-reveal/ScratchToReveal.js"),V=require("./components/split-text/SplitText.js"),F=require("./components/subtitle-player/SubtitlePlayer.js");exports.Button=r.Button;exports.TxtReader=o.TxtReader;exports.HyperText=n.HyperText;exports.TypingAnimation=a.TypingAnimation;exports.QRCode=u.QRCode;exports.Confetti=t.Confetti;exports.ConfettiButton=t.ConfettiButton;exports.GradientText=c.default;exports.VariableProximity=s.VariableProximity;exports.useStayTimeReport=T.useStayTimeReport;exports.PinchContent=d.default;exports.ImageViewer=l.default;exports.ShimmerButton=x.ShimmerButton;exports.ImageCompare=m.default;exports.TextType=q.default;exports.TextAnimate=p.TextAnimate;exports.Dock=e.Dock;exports.DockIcon=e.DockIcon;exports.dockVariants=e.dockVariants;exports.TxtEditor=S.TxtEditor;exports.Message=y.Message;exports.ForceGraph3D=g;exports.confetti=B;exports.Pointer=h.Pointer;exports.SparklesText=C.SparklesText;exports.BlurFade=f.BlurFade;exports.VideoDialog=P.VideoDialog;exports.ComicText=R.ComicText;exports.FlipText=k.FlipText;exports.AnimatedList=i.AnimatedList;exports.AnimatedListItem=i.AnimatedListItem;exports.ShinyButton=A.ShinyButton;exports.ScratchToReveal=D.ScratchToReveal;exports.SplitText=V.SplitText;exports.SubtitlePlayer=F.SubtitlePlayer;
|