@agentscope-ai/chat 1.1.46-beta.1767871771878 → 1.1.46-beta.1768039019165
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/components/AssetsPreview/Audio.tsx +91 -3
- package/components/AssetsPreview/Video.tsx +66 -6
- package/components/AssetsPreview/demo/index.tsx +11 -10
- package/components/AssetsPreview/index.tsx +14 -30
- package/components/AssetsPreview/style.ts +90 -4
- package/lib/AssetsPreview/Audio.js +119 -5
- package/lib/AssetsPreview/Video.js +67 -5
- package/lib/AssetsPreview/index.js +17 -25
- package/lib/AssetsPreview/style.js +15 -1
- package/package.json +1 -1
|
@@ -1,9 +1,97 @@
|
|
|
1
1
|
import { IAudio } from "./types";
|
|
2
2
|
import { useProviderContext } from "..";
|
|
3
|
-
|
|
3
|
+
import { SparkMuteLine, SparkPauseFill, SparkPlayFill, SparkVolumeLine } from "@agentscope-ai/icons";
|
|
4
|
+
import { useCallback, useRef, useState, useEffect } from "react";
|
|
5
|
+
import { IconButton } from "@agentscope-ai/design";
|
|
4
6
|
|
|
5
7
|
export default function Audio(props: IAudio) {
|
|
6
|
-
const prefixCls = useProviderContext().getPrefixCls(
|
|
8
|
+
const prefixCls = useProviderContext().getPrefixCls("assets-preview-audio");
|
|
9
|
+
const audioRef = useRef<HTMLAudioElement>(null);
|
|
10
|
+
const [isPlaying, setIsPlaying] = useState(false);
|
|
11
|
+
const [isMuted, setIsMuted] = useState(false);
|
|
12
|
+
const [currentTime, setCurrentTime] = useState(0);
|
|
13
|
+
const [duration, setDuration] = useState(0);
|
|
14
|
+
|
|
15
|
+
const formatTime = useCallback((time: number) => {
|
|
16
|
+
if (isNaN(time)) return "00:00";
|
|
17
|
+
const minutes = Math.floor(time / 60);
|
|
18
|
+
const seconds = Math.floor(time % 60);
|
|
19
|
+
return `${minutes.toString().padStart(2, "0")}:${seconds
|
|
20
|
+
.toString()
|
|
21
|
+
.padStart(2, "0")}`;
|
|
22
|
+
}, []);
|
|
23
|
+
|
|
24
|
+
const togglePlay = useCallback(() => {
|
|
25
|
+
if (audioRef.current) {
|
|
26
|
+
if (isPlaying) {
|
|
27
|
+
audioRef.current.pause();
|
|
28
|
+
} else {
|
|
29
|
+
audioRef.current.play();
|
|
30
|
+
}
|
|
31
|
+
setIsPlaying(!isPlaying);
|
|
32
|
+
}
|
|
33
|
+
}, [isPlaying]);
|
|
34
|
+
|
|
35
|
+
const toggleMuted = useCallback(() => {
|
|
36
|
+
setIsMuted(!isMuted);
|
|
37
|
+
if (audioRef.current) {
|
|
38
|
+
audioRef.current.muted = isMuted;
|
|
39
|
+
}
|
|
40
|
+
}, [isMuted]);
|
|
41
|
+
|
|
42
|
+
const handleProgressClick = useCallback(
|
|
43
|
+
(e: React.MouseEvent<HTMLDivElement>) => {
|
|
44
|
+
if (audioRef.current && duration) {
|
|
45
|
+
const rect = e.currentTarget.getBoundingClientRect();
|
|
46
|
+
const x = e.clientX - rect.left;
|
|
47
|
+
const percentage = x / rect.width;
|
|
48
|
+
const newTime = percentage * duration;
|
|
49
|
+
audioRef.current.currentTime = newTime;
|
|
50
|
+
setCurrentTime(newTime);
|
|
51
|
+
}
|
|
52
|
+
},
|
|
53
|
+
[duration]
|
|
54
|
+
);
|
|
55
|
+
|
|
56
|
+
useEffect(() => {
|
|
57
|
+
const audio = audioRef.current;
|
|
58
|
+
if (!audio) return;
|
|
59
|
+
|
|
60
|
+
const handleTimeUpdate = () => setCurrentTime(audio.currentTime);
|
|
61
|
+
const handleLoadedMetadata = () => setDuration(audio.duration);
|
|
62
|
+
const handleEnded = () => setIsPlaying(false);
|
|
63
|
+
|
|
64
|
+
audio.addEventListener("timeupdate", handleTimeUpdate);
|
|
65
|
+
audio.addEventListener("loadedmetadata", handleLoadedMetadata);
|
|
66
|
+
audio.addEventListener("ended", handleEnded);
|
|
67
|
+
|
|
68
|
+
return () => {
|
|
69
|
+
audio.removeEventListener("timeupdate", handleTimeUpdate);
|
|
70
|
+
audio.removeEventListener("loadedmetadata", handleLoadedMetadata);
|
|
71
|
+
audio.removeEventListener("ended", handleEnded);
|
|
72
|
+
};
|
|
73
|
+
}, []);
|
|
74
|
+
|
|
75
|
+
const progress = duration ? (currentTime / duration) * 100 : 0;
|
|
7
76
|
|
|
8
|
-
return
|
|
77
|
+
return (
|
|
78
|
+
<>
|
|
79
|
+
<audio ref={audioRef} src={props.src} muted={isMuted} />
|
|
80
|
+
<div className={prefixCls}>
|
|
81
|
+
<IconButton shape="circle" size="small" type="text" onClick={togglePlay} icon={isPlaying ? <SparkPauseFill /> : <SparkPlayFill />} />
|
|
82
|
+
<IconButton shape="circle" size="small" type="text" onClick={toggleMuted} icon={isMuted ? <SparkMuteLine /> : <SparkVolumeLine />} />
|
|
83
|
+
<div className={`${prefixCls}-time`}>{formatTime(currentTime)}</div>
|
|
84
|
+
<div
|
|
85
|
+
className={`${prefixCls}-progress`}
|
|
86
|
+
onClick={handleProgressClick}
|
|
87
|
+
>
|
|
88
|
+
<div
|
|
89
|
+
className={`${prefixCls}-progress-bar`}
|
|
90
|
+
style={{ width: `${progress}%` }}
|
|
91
|
+
/>
|
|
92
|
+
</div>
|
|
93
|
+
<div className={`${prefixCls}-time`}>{formatTime(duration)}</div>
|
|
94
|
+
</div>
|
|
95
|
+
</>
|
|
96
|
+
);
|
|
9
97
|
}
|
|
@@ -1,13 +1,73 @@
|
|
|
1
1
|
import { IVideo } from "./types";
|
|
2
2
|
import { useProviderContext } from "..";
|
|
3
|
+
import { useRef, useState, useCallback } from "react";
|
|
4
|
+
import { SparkPlayFill } from "@agentscope-ai/icons";
|
|
3
5
|
|
|
4
6
|
export default function Video(props: IVideo) {
|
|
5
7
|
const prefixCls = useProviderContext().getPrefixCls('assets-preview-video');
|
|
6
|
-
const { width, height, ...rest } = props;
|
|
8
|
+
const { width, height, poster, src, ...rest } = props;
|
|
9
|
+
const videoRef = useRef<HTMLVideoElement>(null);
|
|
10
|
+
const [isPlaying, setIsPlaying] = useState(false);
|
|
11
|
+
const [duration, setDuration] = useState(0);
|
|
7
12
|
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
+
const formatTime = useCallback((seconds: number) => {
|
|
14
|
+
const mins = Math.floor(seconds / 60);
|
|
15
|
+
const secs = Math.floor(seconds % 60);
|
|
16
|
+
return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
|
|
17
|
+
}, []);
|
|
18
|
+
|
|
19
|
+
const handlePlayPause = useCallback(() => {
|
|
20
|
+
const video = videoRef.current;
|
|
21
|
+
if (!video) return;
|
|
22
|
+
|
|
23
|
+
if (video.paused) {
|
|
24
|
+
video.play();
|
|
25
|
+
setIsPlaying(true);
|
|
26
|
+
} else {
|
|
27
|
+
video.pause();
|
|
28
|
+
setIsPlaying(false);
|
|
29
|
+
}
|
|
30
|
+
}, []);
|
|
31
|
+
|
|
32
|
+
const handleLoadedMetadata = useCallback(() => {
|
|
33
|
+
if (videoRef.current) {
|
|
34
|
+
setDuration(videoRef.current.duration);
|
|
35
|
+
}
|
|
36
|
+
}, []);
|
|
37
|
+
|
|
38
|
+
const handleEnded = useCallback(() => {
|
|
39
|
+
setIsPlaying(false);
|
|
40
|
+
}, []);
|
|
41
|
+
|
|
42
|
+
return (
|
|
43
|
+
<div
|
|
44
|
+
className={prefixCls}
|
|
45
|
+
style={{
|
|
46
|
+
aspectRatio: `${width}/${height}`,
|
|
47
|
+
}}
|
|
48
|
+
>
|
|
49
|
+
<video
|
|
50
|
+
{...rest}
|
|
51
|
+
ref={videoRef}
|
|
52
|
+
src={src}
|
|
53
|
+
poster={poster}
|
|
54
|
+
preload="metadata"
|
|
55
|
+
onLoadedMetadata={handleLoadedMetadata}
|
|
56
|
+
onEnded={handleEnded}
|
|
57
|
+
/>
|
|
58
|
+
{!isPlaying && (
|
|
59
|
+
<div className={`${prefixCls}-overlay`} onClick={handlePlayPause}>
|
|
60
|
+
<div className={`${prefixCls}-play-btn`}>
|
|
61
|
+
<SparkPlayFill />
|
|
62
|
+
</div>
|
|
63
|
+
<div className={`${prefixCls}-duration`}>
|
|
64
|
+
{formatTime(duration)}
|
|
65
|
+
</div>
|
|
66
|
+
</div>
|
|
67
|
+
)}
|
|
68
|
+
{isPlaying && (
|
|
69
|
+
<div className={`${prefixCls}-playing-overlay`} onClick={handlePlayPause} />
|
|
70
|
+
)}
|
|
71
|
+
</div>
|
|
72
|
+
);
|
|
13
73
|
}
|
|
@@ -4,6 +4,14 @@ import React from 'react';
|
|
|
4
4
|
|
|
5
5
|
export default function () {
|
|
6
6
|
return <Flex vertical gap={32}>
|
|
7
|
+
<AssetsPreview type="audio" data={[
|
|
8
|
+
{ src: 'https://cloud.video.taobao.com/vod/m9amjbqLTGUvaGo3o61u-Ch2hycUCa3RA3pAw1-Zv_0.mp4', },
|
|
9
|
+
{ src: 'https://cloud.video.taobao.com/vod/m9amjbqLTGUvaGo3o61u-Ch2hycUCa3RA3pAw1-Zv_0.mp4', },
|
|
10
|
+
{ src: 'https://cloud.video.taobao.com/vod/m9amjbqLTGUvaGo3o61u-Ch2hycUCa3RA3pAw1-Zv_0.mp4', },
|
|
11
|
+
|
|
12
|
+
]} />
|
|
13
|
+
|
|
14
|
+
|
|
7
15
|
<AssetsPreview type="image" data={[
|
|
8
16
|
{ src: 'https://img.alicdn.com/imgextra/i3/O1CN01dKprif1ar0awCMDwK_!!6000000003382-0-tps-2640-1100.jpg', width: 16, height: 9 },
|
|
9
17
|
]} />
|
|
@@ -20,30 +28,23 @@ export default function () {
|
|
|
20
28
|
{ src: 'https://img.alicdn.com/imgextra/i3/O1CN01dKprif1ar0awCMDwK_!!6000000003382-0-tps-2640-1100.jpg', width: 16, height: 9 },
|
|
21
29
|
]} />
|
|
22
30
|
|
|
23
|
-
|
|
24
31
|
<AssetsPreview type="video" data={[
|
|
25
32
|
{ src: 'https://cloud.video.taobao.com/vod/m9amjbqLTGUvaGo3o61u-Ch2hycUCa3RA3pAw1-Zv_0.mp4', width: 16, height: 9 },
|
|
26
|
-
|
|
27
33
|
]} />
|
|
28
34
|
|
|
29
|
-
|
|
30
35
|
<AssetsPreview type="video" data={[
|
|
31
36
|
{ src: 'https://cloud.video.taobao.com/vod/m9amjbqLTGUvaGo3o61u-Ch2hycUCa3RA3pAw1-Zv_0.mp4', width: 16, height: 9 },
|
|
32
37
|
{ src: 'https://cloud.video.taobao.com/vod/m9amjbqLTGUvaGo3o61u-Ch2hycUCa3RA3pAw1-Zv_0.mp4', width: 16, height: 9 },
|
|
33
38
|
{ src: 'https://cloud.video.taobao.com/vod/m9amjbqLTGUvaGo3o61u-Ch2hycUCa3RA3pAw1-Zv_0.mp4', width: 16, height: 9 },
|
|
34
|
-
|
|
39
|
+
{ src: 'https://cloud.video.taobao.com/vod/m9amjbqLTGUvaGo3o61u-Ch2hycUCa3RA3pAw1-Zv_0.mp4', width: 16, height: 9 },
|
|
40
|
+
{ src: 'https://cloud.video.taobao.com/vod/m9amjbqLTGUvaGo3o61u-Ch2hycUCa3RA3pAw1-Zv_0.mp4', width: 16, height: 9 },
|
|
41
|
+
{ src: 'https://cloud.video.taobao.com/vod/m9amjbqLTGUvaGo3o61u-Ch2hycUCa3RA3pAw1-Zv_0.mp4', width: 16, height: 9 },
|
|
35
42
|
]} />
|
|
36
43
|
|
|
37
44
|
<AssetsPreview type="audio" data={[
|
|
38
45
|
{ src: 'https://cloud.video.taobao.com/vod/m9amjbqLTGUvaGo3o61u-Ch2hycUCa3RA3pAw1-Zv_0.mp4', },
|
|
39
|
-
|
|
40
46
|
]} />
|
|
41
47
|
|
|
42
|
-
<AssetsPreview type="audio" data={[
|
|
43
|
-
{ src: 'https://cloud.video.taobao.com/vod/m9amjbqLTGUvaGo3o61u-Ch2hycUCa3RA3pAw1-Zv_0.mp4', },
|
|
44
|
-
{ src: 'https://cloud.video.taobao.com/vod/m9amjbqLTGUvaGo3o61u-Ch2hycUCa3RA3pAw1-Zv_0.mp4', },
|
|
45
|
-
{ src: 'https://cloud.video.taobao.com/vod/m9amjbqLTGUvaGo3o61u-Ch2hycUCa3RA3pAw1-Zv_0.mp4', },
|
|
46
48
|
|
|
47
|
-
]} />
|
|
48
49
|
</Flex>
|
|
49
50
|
}
|
|
@@ -5,7 +5,7 @@ import { IImage, IVideo, IAudio } from './types';
|
|
|
5
5
|
import Image from './Image';
|
|
6
6
|
import Video from './Video';
|
|
7
7
|
import Audio from './Audio';
|
|
8
|
-
import { useCallback, useEffect, useRef, useState } from 'react';
|
|
8
|
+
import { useCallback, useDeferredValue, useEffect, useRef, useState } from 'react';
|
|
9
9
|
import { SparkLeftLine, SparkRightLine } from '@agentscope-ai/icons';
|
|
10
10
|
import { IconButton } from '@agentscope-ai/design';
|
|
11
11
|
|
|
@@ -21,53 +21,38 @@ export interface IAssetsPreviewProps {
|
|
|
21
21
|
|
|
22
22
|
function AssetsPreview(props: IAssetsPreviewProps) {
|
|
23
23
|
const prefixCls = useProviderContext().getPrefixCls('assets-preview');
|
|
24
|
-
const Component = {
|
|
25
|
-
image: Image,
|
|
26
|
-
video: Video,
|
|
27
|
-
audio: Audio,
|
|
28
|
-
}[props.type];
|
|
29
24
|
const ref = useRef<HTMLDivElement>(null);
|
|
30
|
-
|
|
31
|
-
useEffect(() => { }, [props.data.length])
|
|
32
25
|
const { height = 144 } = props;
|
|
33
26
|
const [arrowTop, setArrowTop] = useState<number>(0);
|
|
34
|
-
const [arrowShow, setArrowShow] = useState<'left' | 'right' | ''>('');
|
|
35
27
|
const maxWidth = useRef<number>(0);
|
|
36
|
-
|
|
28
|
+
const [scrollLeft, setScrollLeft] = useState<number>(0);
|
|
29
|
+
const deferScrollLeft = useDeferredValue(scrollLeft);
|
|
37
30
|
|
|
38
31
|
const onScroll = useCallback((e) => {
|
|
39
|
-
|
|
40
|
-
if (e.target.scrollLeft > 0) {
|
|
41
|
-
setArrowShow('right');
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
if (e.target.scrollLeft >= maxWidth.current) {
|
|
45
|
-
setArrowShow('left')
|
|
46
|
-
}
|
|
32
|
+
setScrollLeft(e.target.scrollLeft);
|
|
47
33
|
}, [])
|
|
48
34
|
|
|
49
|
-
|
|
50
35
|
useEffect(() => {
|
|
51
|
-
setArrowTop(height / 2 - 12
|
|
36
|
+
setArrowTop(height / 2 - 12);
|
|
52
37
|
}, [height])
|
|
53
38
|
|
|
54
|
-
|
|
55
39
|
useEffect(() => {
|
|
56
40
|
if (ref.current && props.type !== 'audio') {
|
|
57
41
|
maxWidth.current = ref.current.scrollWidth - ref.current.clientWidth;
|
|
58
|
-
if (maxWidth.current > 0) {
|
|
59
|
-
setArrowShow('right');
|
|
60
|
-
} else {
|
|
61
|
-
}
|
|
62
42
|
}
|
|
63
43
|
}, [])
|
|
64
44
|
|
|
65
45
|
|
|
66
46
|
const toArrow = useCallback((direct: 'left' | 'right') => {
|
|
67
|
-
const width =
|
|
47
|
+
const width = 100;
|
|
68
48
|
ref.current.scrollLeft = ref.current.scrollLeft + width * (direct === 'left' ? -1 : 1)
|
|
69
|
-
}, [
|
|
49
|
+
}, [])
|
|
70
50
|
|
|
51
|
+
const Component = {
|
|
52
|
+
image: Image,
|
|
53
|
+
video: Video,
|
|
54
|
+
audio: Audio,
|
|
55
|
+
}[props.type];
|
|
71
56
|
|
|
72
57
|
return <>
|
|
73
58
|
<Style />
|
|
@@ -82,18 +67,17 @@ function AssetsPreview(props: IAssetsPreviewProps) {
|
|
|
82
67
|
}
|
|
83
68
|
</div>
|
|
84
69
|
|
|
85
|
-
|
|
86
70
|
{
|
|
87
71
|
arrowTop && props.type !== 'audio' ? <>
|
|
88
72
|
{
|
|
89
|
-
|
|
73
|
+
deferScrollLeft > 50 && <>
|
|
90
74
|
<div className={cls(`${prefixCls}-left-edge`)} />
|
|
91
75
|
<IconButton onClick={() => toArrow('left')} style={{ top: arrowTop }} className={cls(`${prefixCls}-left-arrow`, `${prefixCls}-arrow`)} size="small" shape='circle' icon={<SparkLeftLine />}></IconButton>
|
|
92
76
|
</>
|
|
93
77
|
}
|
|
94
78
|
|
|
95
79
|
{
|
|
96
|
-
|
|
80
|
+
deferScrollLeft < maxWidth.current - 50 && <>
|
|
97
81
|
<div className={cls(`${prefixCls}-right-edge`)} />
|
|
98
82
|
<IconButton onClick={() => toArrow('right')} style={{ top: arrowTop }} className={cls(`${prefixCls}-right-arrow`, `${prefixCls}-arrow`)} size="small" shape='circle' icon={<SparkRightLine />}></IconButton>
|
|
99
83
|
</>
|
|
@@ -15,10 +15,14 @@ export default createGlobalStyle`
|
|
|
15
15
|
|
|
16
16
|
&-left-edge {
|
|
17
17
|
left: 0;
|
|
18
|
+
background: linear-gradient(to right, ${(p) =>
|
|
19
|
+
p.theme.colorBgLayout}, rgba(0, 0, 0, 0));
|
|
18
20
|
}
|
|
19
21
|
|
|
20
22
|
&-right-edge {
|
|
21
23
|
right: 0;
|
|
24
|
+
background: linear-gradient(to left, ${(p) =>
|
|
25
|
+
p.theme.colorBgLayout}, rgba(0, 0, 0, 0));
|
|
22
26
|
}
|
|
23
27
|
|
|
24
28
|
&-arrow {
|
|
@@ -41,6 +45,11 @@ export default createGlobalStyle`
|
|
|
41
45
|
overflow-x: auto;
|
|
42
46
|
justify-content: safe center;
|
|
43
47
|
background-color: ${(p) => p.theme.colorFillTertiary};
|
|
48
|
+
scrollbar-width: none; /* Firefox */
|
|
49
|
+
-ms-overflow-style: none; /* IE/Edge */
|
|
50
|
+
&::-webkit-scrollbar {
|
|
51
|
+
display: none; /* Chrome/Safari/Opera */
|
|
52
|
+
}
|
|
44
53
|
}
|
|
45
54
|
|
|
46
55
|
|
|
@@ -61,6 +70,8 @@ export default createGlobalStyle`
|
|
|
61
70
|
flex-shrink: 0;
|
|
62
71
|
border-radius: 8px;
|
|
63
72
|
overflow: hidden;
|
|
73
|
+
position: relative;
|
|
74
|
+
cursor: pointer;
|
|
64
75
|
|
|
65
76
|
video {
|
|
66
77
|
width: 100%;
|
|
@@ -68,13 +79,88 @@ export default createGlobalStyle`
|
|
|
68
79
|
object-fit: cover;
|
|
69
80
|
}
|
|
70
81
|
|
|
82
|
+
&-overlay {
|
|
83
|
+
position: absolute;
|
|
84
|
+
top: 0;
|
|
85
|
+
left: 0;
|
|
86
|
+
right: 0;
|
|
87
|
+
bottom: 0;
|
|
88
|
+
display: flex;
|
|
89
|
+
flex-direction: column;
|
|
90
|
+
align-items: center;
|
|
91
|
+
justify-content: center;
|
|
92
|
+
border-radius: 4px;
|
|
93
|
+
background: linear-gradient(180deg, rgba(111, 111, 111, 0.27) 0%, rgba(38, 36, 76, 0.83) 100%);
|
|
94
|
+
}
|
|
71
95
|
|
|
72
|
-
|
|
96
|
+
&-play-btn {
|
|
97
|
+
width: 40px;
|
|
98
|
+
height: 40px;
|
|
99
|
+
display: flex;
|
|
100
|
+
align-items: center;
|
|
101
|
+
justify-content: center;
|
|
102
|
+
color: #fff;
|
|
103
|
+
transition: transform 0.2s ease;
|
|
104
|
+
font-size: 40px;
|
|
105
|
+
|
|
106
|
+
|
|
107
|
+
&:hover {
|
|
108
|
+
transform: scale(1.1);
|
|
109
|
+
}
|
|
110
|
+
}
|
|
73
111
|
|
|
74
|
-
|
|
112
|
+
&-duration {
|
|
113
|
+
position: absolute;
|
|
114
|
+
bottom: 8px;
|
|
115
|
+
left: 50%;
|
|
116
|
+
transform: translateX(-50%);
|
|
117
|
+
font-size: 14px;
|
|
118
|
+
font-weight: 500;
|
|
119
|
+
color: #fff;
|
|
120
|
+
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
&-playing-overlay {
|
|
124
|
+
position: absolute;
|
|
125
|
+
top: 0;
|
|
126
|
+
left: 0;
|
|
127
|
+
right: 0;
|
|
128
|
+
bottom: 0;
|
|
129
|
+
}
|
|
130
|
+
}
|
|
131
|
+
|
|
75
132
|
&-audio {
|
|
76
|
-
display:
|
|
77
|
-
|
|
133
|
+
display: flex;
|
|
134
|
+
align-items: center;
|
|
135
|
+
gap: 8px;
|
|
136
|
+
background-color: ${(p) => p.theme.colorBgBase};
|
|
137
|
+
border-radius: 8px;
|
|
138
|
+
border: 1px solid ${(p) => p.theme.colorBorderSecondary};
|
|
139
|
+
height: 40px;
|
|
140
|
+
padding: 0 8px;
|
|
141
|
+
|
|
142
|
+
&-time {
|
|
143
|
+
font-size: 12px;
|
|
144
|
+
color: ${(p) => p.theme.colorText};
|
|
145
|
+
line-height: 1;
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
&-progress {
|
|
149
|
+
flex: 1;
|
|
150
|
+
height: 8px;
|
|
151
|
+
background-color: ${(p) => p.theme.colorBorderSecondary};
|
|
152
|
+
border-radius: 4px;
|
|
153
|
+
cursor: pointer;
|
|
154
|
+
position: relative;
|
|
155
|
+
overflow: hidden;
|
|
156
|
+
|
|
157
|
+
&-bar {
|
|
158
|
+
height: 100%;
|
|
159
|
+
background-color: ${(p) => p.theme.colorPrimary};
|
|
160
|
+
border-radius: 4px;
|
|
161
|
+
transition: width 0.1s linear;
|
|
162
|
+
}
|
|
163
|
+
}
|
|
78
164
|
}
|
|
79
165
|
}
|
|
80
166
|
`;
|
|
@@ -1,10 +1,124 @@
|
|
|
1
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
2
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
3
|
+
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
4
|
+
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
5
|
+
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
6
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
1
7
|
import { useProviderContext } from "..";
|
|
8
|
+
import { SparkMuteLine, SparkPauseFill, SparkPlayFill, SparkVolumeLine } from "@agentscope-ai/icons";
|
|
9
|
+
import { useCallback, useRef, useState, useEffect } from "react";
|
|
10
|
+
import { IconButton } from "@agentscope-ai/design";
|
|
2
11
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
12
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
|
+
import { Fragment as _Fragment } from "react/jsx-runtime";
|
|
3
14
|
export default function Audio(props) {
|
|
4
|
-
var prefixCls = useProviderContext().getPrefixCls(
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
15
|
+
var prefixCls = useProviderContext().getPrefixCls("assets-preview-audio");
|
|
16
|
+
var audioRef = useRef(null);
|
|
17
|
+
var _useState = useState(false),
|
|
18
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
19
|
+
isPlaying = _useState2[0],
|
|
20
|
+
setIsPlaying = _useState2[1];
|
|
21
|
+
var _useState3 = useState(false),
|
|
22
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
23
|
+
isMuted = _useState4[0],
|
|
24
|
+
setIsMuted = _useState4[1];
|
|
25
|
+
var _useState5 = useState(0),
|
|
26
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
|
27
|
+
currentTime = _useState6[0],
|
|
28
|
+
setCurrentTime = _useState6[1];
|
|
29
|
+
var _useState7 = useState(0),
|
|
30
|
+
_useState8 = _slicedToArray(_useState7, 2),
|
|
31
|
+
duration = _useState8[0],
|
|
32
|
+
setDuration = _useState8[1];
|
|
33
|
+
var formatTime = useCallback(function (time) {
|
|
34
|
+
if (isNaN(time)) return "00:00";
|
|
35
|
+
var minutes = Math.floor(time / 60);
|
|
36
|
+
var seconds = Math.floor(time % 60);
|
|
37
|
+
return "".concat(minutes.toString().padStart(2, "0"), ":").concat(seconds.toString().padStart(2, "0"));
|
|
38
|
+
}, []);
|
|
39
|
+
var togglePlay = useCallback(function () {
|
|
40
|
+
if (audioRef.current) {
|
|
41
|
+
if (isPlaying) {
|
|
42
|
+
audioRef.current.pause();
|
|
43
|
+
} else {
|
|
44
|
+
audioRef.current.play();
|
|
45
|
+
}
|
|
46
|
+
setIsPlaying(!isPlaying);
|
|
47
|
+
}
|
|
48
|
+
}, [isPlaying]);
|
|
49
|
+
var toggleMuted = useCallback(function () {
|
|
50
|
+
setIsMuted(!isMuted);
|
|
51
|
+
if (audioRef.current) {
|
|
52
|
+
audioRef.current.muted = isMuted;
|
|
53
|
+
}
|
|
54
|
+
}, [isMuted]);
|
|
55
|
+
var handleProgressClick = useCallback(function (e) {
|
|
56
|
+
if (audioRef.current && duration) {
|
|
57
|
+
var rect = e.currentTarget.getBoundingClientRect();
|
|
58
|
+
var x = e.clientX - rect.left;
|
|
59
|
+
var percentage = x / rect.width;
|
|
60
|
+
var newTime = percentage * duration;
|
|
61
|
+
audioRef.current.currentTime = newTime;
|
|
62
|
+
setCurrentTime(newTime);
|
|
63
|
+
}
|
|
64
|
+
}, [duration]);
|
|
65
|
+
useEffect(function () {
|
|
66
|
+
var audio = audioRef.current;
|
|
67
|
+
if (!audio) return;
|
|
68
|
+
var handleTimeUpdate = function handleTimeUpdate() {
|
|
69
|
+
return setCurrentTime(audio.currentTime);
|
|
70
|
+
};
|
|
71
|
+
var handleLoadedMetadata = function handleLoadedMetadata() {
|
|
72
|
+
return setDuration(audio.duration);
|
|
73
|
+
};
|
|
74
|
+
var handleEnded = function handleEnded() {
|
|
75
|
+
return setIsPlaying(false);
|
|
76
|
+
};
|
|
77
|
+
audio.addEventListener("timeupdate", handleTimeUpdate);
|
|
78
|
+
audio.addEventListener("loadedmetadata", handleLoadedMetadata);
|
|
79
|
+
audio.addEventListener("ended", handleEnded);
|
|
80
|
+
return function () {
|
|
81
|
+
audio.removeEventListener("timeupdate", handleTimeUpdate);
|
|
82
|
+
audio.removeEventListener("loadedmetadata", handleLoadedMetadata);
|
|
83
|
+
audio.removeEventListener("ended", handleEnded);
|
|
84
|
+
};
|
|
85
|
+
}, []);
|
|
86
|
+
var progress = duration ? currentTime / duration * 100 : 0;
|
|
87
|
+
return /*#__PURE__*/_jsxs(_Fragment, {
|
|
88
|
+
children: [/*#__PURE__*/_jsx("audio", {
|
|
89
|
+
ref: audioRef,
|
|
90
|
+
src: props.src,
|
|
91
|
+
muted: isMuted
|
|
92
|
+
}), /*#__PURE__*/_jsxs("div", {
|
|
93
|
+
className: prefixCls,
|
|
94
|
+
children: [/*#__PURE__*/_jsx(IconButton, {
|
|
95
|
+
shape: "circle",
|
|
96
|
+
size: "small",
|
|
97
|
+
type: "text",
|
|
98
|
+
onClick: togglePlay,
|
|
99
|
+
icon: isPlaying ? /*#__PURE__*/_jsx(SparkPauseFill, {}) : /*#__PURE__*/_jsx(SparkPlayFill, {})
|
|
100
|
+
}), /*#__PURE__*/_jsx(IconButton, {
|
|
101
|
+
shape: "circle",
|
|
102
|
+
size: "small",
|
|
103
|
+
type: "text",
|
|
104
|
+
onClick: toggleMuted,
|
|
105
|
+
icon: isMuted ? /*#__PURE__*/_jsx(SparkMuteLine, {}) : /*#__PURE__*/_jsx(SparkVolumeLine, {})
|
|
106
|
+
}), /*#__PURE__*/_jsx("div", {
|
|
107
|
+
className: "".concat(prefixCls, "-time"),
|
|
108
|
+
children: formatTime(currentTime)
|
|
109
|
+
}), /*#__PURE__*/_jsx("div", {
|
|
110
|
+
className: "".concat(prefixCls, "-progress"),
|
|
111
|
+
onClick: handleProgressClick,
|
|
112
|
+
children: /*#__PURE__*/_jsx("div", {
|
|
113
|
+
className: "".concat(prefixCls, "-progress-bar"),
|
|
114
|
+
style: {
|
|
115
|
+
width: "".concat(progress, "%")
|
|
116
|
+
}
|
|
117
|
+
})
|
|
118
|
+
}), /*#__PURE__*/_jsx("div", {
|
|
119
|
+
className: "".concat(prefixCls, "-time"),
|
|
120
|
+
children: formatTime(duration)
|
|
121
|
+
})]
|
|
122
|
+
})]
|
|
9
123
|
});
|
|
10
124
|
}
|
|
@@ -1,26 +1,88 @@
|
|
|
1
1
|
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
2
|
-
var _excluded = ["width", "height"];
|
|
2
|
+
var _excluded = ["width", "height", "poster", "src"];
|
|
3
3
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
4
4
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
5
5
|
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
6
6
|
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
|
7
7
|
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
8
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
9
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
10
|
+
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
11
|
+
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
12
|
+
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
13
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
8
14
|
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
9
15
|
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
10
16
|
import { useProviderContext } from "..";
|
|
17
|
+
import { useRef, useState, useCallback } from "react";
|
|
18
|
+
import { SparkPlayFill } from "@agentscope-ai/icons";
|
|
11
19
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
20
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
12
21
|
export default function Video(props) {
|
|
13
22
|
var prefixCls = useProviderContext().getPrefixCls('assets-preview-video');
|
|
14
23
|
var width = props.width,
|
|
15
24
|
height = props.height,
|
|
25
|
+
poster = props.poster,
|
|
26
|
+
src = props.src,
|
|
16
27
|
rest = _objectWithoutProperties(props, _excluded);
|
|
17
|
-
|
|
28
|
+
var videoRef = useRef(null);
|
|
29
|
+
var _useState = useState(false),
|
|
30
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
31
|
+
isPlaying = _useState2[0],
|
|
32
|
+
setIsPlaying = _useState2[1];
|
|
33
|
+
var _useState3 = useState(0),
|
|
34
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
35
|
+
duration = _useState4[0],
|
|
36
|
+
setDuration = _useState4[1];
|
|
37
|
+
var formatTime = useCallback(function (seconds) {
|
|
38
|
+
var mins = Math.floor(seconds / 60);
|
|
39
|
+
var secs = Math.floor(seconds % 60);
|
|
40
|
+
return "".concat(mins.toString().padStart(2, '0'), ":").concat(secs.toString().padStart(2, '0'));
|
|
41
|
+
}, []);
|
|
42
|
+
var handlePlayPause = useCallback(function () {
|
|
43
|
+
var video = videoRef.current;
|
|
44
|
+
if (!video) return;
|
|
45
|
+
if (video.paused) {
|
|
46
|
+
video.play();
|
|
47
|
+
setIsPlaying(true);
|
|
48
|
+
} else {
|
|
49
|
+
video.pause();
|
|
50
|
+
setIsPlaying(false);
|
|
51
|
+
}
|
|
52
|
+
}, []);
|
|
53
|
+
var handleLoadedMetadata = useCallback(function () {
|
|
54
|
+
if (videoRef.current) {
|
|
55
|
+
setDuration(videoRef.current.duration);
|
|
56
|
+
}
|
|
57
|
+
}, []);
|
|
58
|
+
var handleEnded = useCallback(function () {
|
|
59
|
+
setIsPlaying(false);
|
|
60
|
+
}, []);
|
|
61
|
+
return /*#__PURE__*/_jsxs("div", {
|
|
18
62
|
className: prefixCls,
|
|
19
63
|
style: {
|
|
20
64
|
aspectRatio: "".concat(width, "/").concat(height)
|
|
21
65
|
},
|
|
22
|
-
children: /*#__PURE__*/_jsx("video", _objectSpread(_objectSpread({}, rest), {}, {
|
|
23
|
-
|
|
24
|
-
|
|
66
|
+
children: [/*#__PURE__*/_jsx("video", _objectSpread(_objectSpread({}, rest), {}, {
|
|
67
|
+
ref: videoRef,
|
|
68
|
+
src: src,
|
|
69
|
+
poster: poster,
|
|
70
|
+
preload: "metadata",
|
|
71
|
+
onLoadedMetadata: handleLoadedMetadata,
|
|
72
|
+
onEnded: handleEnded
|
|
73
|
+
})), !isPlaying && /*#__PURE__*/_jsxs("div", {
|
|
74
|
+
className: "".concat(prefixCls, "-overlay"),
|
|
75
|
+
onClick: handlePlayPause,
|
|
76
|
+
children: [/*#__PURE__*/_jsx("div", {
|
|
77
|
+
className: "".concat(prefixCls, "-play-btn"),
|
|
78
|
+
children: /*#__PURE__*/_jsx(SparkPlayFill, {})
|
|
79
|
+
}), /*#__PURE__*/_jsx("div", {
|
|
80
|
+
className: "".concat(prefixCls, "-duration"),
|
|
81
|
+
children: formatTime(duration)
|
|
82
|
+
})]
|
|
83
|
+
}), isPlaying && /*#__PURE__*/_jsx("div", {
|
|
84
|
+
className: "".concat(prefixCls, "-playing-overlay"),
|
|
85
|
+
onClick: handlePlayPause
|
|
86
|
+
})]
|
|
25
87
|
});
|
|
26
88
|
}
|
|
@@ -16,7 +16,7 @@ import cls from 'classnames';
|
|
|
16
16
|
import Image from "./Image";
|
|
17
17
|
import Video from "./Video";
|
|
18
18
|
import Audio from "./Audio";
|
|
19
|
-
import { useCallback, useEffect, useRef, useState } from 'react';
|
|
19
|
+
import { useCallback, useDeferredValue, useEffect, useRef, useState } from 'react';
|
|
20
20
|
import { SparkLeftLine, SparkRightLine } from '@agentscope-ai/icons';
|
|
21
21
|
import { IconButton } from '@agentscope-ai/design';
|
|
22
22
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
@@ -24,47 +24,39 @@ import { Fragment as _Fragment } from "react/jsx-runtime";
|
|
|
24
24
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
25
25
|
function AssetsPreview(props) {
|
|
26
26
|
var prefixCls = useProviderContext().getPrefixCls('assets-preview');
|
|
27
|
-
var Component = {
|
|
28
|
-
image: Image,
|
|
29
|
-
video: Video,
|
|
30
|
-
audio: Audio
|
|
31
|
-
}[props.type];
|
|
32
27
|
var ref = useRef(null);
|
|
33
|
-
useEffect(function () {}, [props.data.length]);
|
|
34
28
|
var _props$height = props.height,
|
|
35
29
|
height = _props$height === void 0 ? 144 : _props$height;
|
|
36
30
|
var _useState = useState(0),
|
|
37
31
|
_useState2 = _slicedToArray(_useState, 2),
|
|
38
32
|
arrowTop = _useState2[0],
|
|
39
33
|
setArrowTop = _useState2[1];
|
|
40
|
-
var _useState3 = useState(''),
|
|
41
|
-
_useState4 = _slicedToArray(_useState3, 2),
|
|
42
|
-
arrowShow = _useState4[0],
|
|
43
|
-
setArrowShow = _useState4[1];
|
|
44
34
|
var maxWidth = useRef(0);
|
|
35
|
+
var _useState3 = useState(0),
|
|
36
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
37
|
+
scrollLeft = _useState4[0],
|
|
38
|
+
setScrollLeft = _useState4[1];
|
|
39
|
+
var deferScrollLeft = useDeferredValue(scrollLeft);
|
|
45
40
|
var onScroll = useCallback(function (e) {
|
|
46
|
-
|
|
47
|
-
setArrowShow('right');
|
|
48
|
-
}
|
|
49
|
-
if (e.target.scrollLeft >= maxWidth.current) {
|
|
50
|
-
setArrowShow('left');
|
|
51
|
-
}
|
|
41
|
+
setScrollLeft(e.target.scrollLeft);
|
|
52
42
|
}, []);
|
|
53
43
|
useEffect(function () {
|
|
54
|
-
setArrowTop(height / 2 - 12
|
|
44
|
+
setArrowTop(height / 2 - 12);
|
|
55
45
|
}, [height]);
|
|
56
46
|
useEffect(function () {
|
|
57
47
|
if (ref.current && props.type !== 'audio') {
|
|
58
48
|
maxWidth.current = ref.current.scrollWidth - ref.current.clientWidth;
|
|
59
|
-
if (maxWidth.current > 0) {
|
|
60
|
-
setArrowShow('right');
|
|
61
|
-
} else {}
|
|
62
49
|
}
|
|
63
50
|
}, []);
|
|
64
51
|
var toArrow = useCallback(function (direct) {
|
|
65
|
-
var width =
|
|
52
|
+
var width = 100;
|
|
66
53
|
ref.current.scrollLeft = ref.current.scrollLeft + width * (direct === 'left' ? -1 : 1);
|
|
67
|
-
}, [
|
|
54
|
+
}, []);
|
|
55
|
+
var Component = {
|
|
56
|
+
image: Image,
|
|
57
|
+
video: Video,
|
|
58
|
+
audio: Audio
|
|
59
|
+
}[props.type];
|
|
68
60
|
return /*#__PURE__*/_jsxs(_Fragment, {
|
|
69
61
|
children: [/*#__PURE__*/_jsx(Style, {}), /*#__PURE__*/_jsxs("div", {
|
|
70
62
|
className: cls("".concat(prefixCls), props.className),
|
|
@@ -81,7 +73,7 @@ function AssetsPreview(props) {
|
|
|
81
73
|
return /*#__PURE__*/_jsx(Component, _objectSpread({}, item), index);
|
|
82
74
|
})
|
|
83
75
|
}), arrowTop && props.type !== 'audio' ? /*#__PURE__*/_jsxs(_Fragment, {
|
|
84
|
-
children: [
|
|
76
|
+
children: [deferScrollLeft > 50 && /*#__PURE__*/_jsxs(_Fragment, {
|
|
85
77
|
children: [/*#__PURE__*/_jsx("div", {
|
|
86
78
|
className: cls("".concat(prefixCls, "-left-edge"))
|
|
87
79
|
}), /*#__PURE__*/_jsx(IconButton, {
|
|
@@ -96,7 +88,7 @@ function AssetsPreview(props) {
|
|
|
96
88
|
shape: "circle",
|
|
97
89
|
icon: /*#__PURE__*/_jsx(SparkLeftLine, {})
|
|
98
90
|
})]
|
|
99
|
-
}),
|
|
91
|
+
}), deferScrollLeft < maxWidth.current - 50 && /*#__PURE__*/_jsxs(_Fragment, {
|
|
100
92
|
children: [/*#__PURE__*/_jsx("div", {
|
|
101
93
|
className: cls("".concat(prefixCls, "-right-edge"))
|
|
102
94
|
}), /*#__PURE__*/_jsx(IconButton, {
|
|
@@ -1,8 +1,22 @@
|
|
|
1
1
|
var _templateObject;
|
|
2
2
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
3
3
|
import { createGlobalStyle } from 'antd-style';
|
|
4
|
-
export default createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.", "-assets-preview {\n position: relative;\n\n &-left-edge,\n &-right-edge {\n position: absolute;\n top: 0;\n bottom: 0;\n width: 128px;\n pointer-events: none;\n }\n\n &-left-edge {\n left: 0;\n }\n\n &-right-edge {\n right: 0;\n }\n\n &-arrow {\n position: absolute;\n bottom: 0;\n }\n\n &-left-arrow {\n left: 10px;\n }\n\n &-right-arrow {\n right: 10px;\n }\n\n &-container {\n display: flex;\n padding: 8px;\n gap: 8px;\n overflow-x: auto;\n justify-content: safe center;\n background-color: ", ";\n }\n\n\n &-image {\n height: 100%;\n flex-basis: auto;\n flex-shrink: 0;\n border-radius: 8px;\n overflow: hidden;\n background-size: cover;\n background-position: center;\n background-repeat: no-repeat;\n }\n\n &-video {\n height: 100%;\n flex-basis: auto;\n flex-shrink: 0;\n border-radius: 8px;\n overflow: hidden;\n\n video {\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n\n\n
|
|
4
|
+
export default createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.", "-assets-preview {\n position: relative;\n\n &-left-edge,\n &-right-edge {\n position: absolute;\n top: 0;\n bottom: 0;\n width: 128px;\n pointer-events: none;\n }\n\n &-left-edge {\n left: 0;\n background: linear-gradient(to right, ", ", rgba(0, 0, 0, 0));\n }\n\n &-right-edge {\n right: 0;\n background: linear-gradient(to left, ", ", rgba(0, 0, 0, 0));\n }\n\n &-arrow {\n position: absolute;\n bottom: 0;\n }\n\n &-left-arrow {\n left: 10px;\n }\n\n &-right-arrow {\n right: 10px;\n }\n\n &-container {\n display: flex;\n padding: 8px;\n gap: 8px;\n overflow-x: auto;\n justify-content: safe center;\n background-color: ", ";\n scrollbar-width: none; /* Firefox */\n -ms-overflow-style: none; /* IE/Edge */\n &::-webkit-scrollbar {\n display: none; /* Chrome/Safari/Opera */\n }\n }\n\n\n &-image {\n height: 100%;\n flex-basis: auto;\n flex-shrink: 0;\n border-radius: 8px;\n overflow: hidden;\n background-size: cover;\n background-position: center;\n background-repeat: no-repeat;\n }\n\n &-video {\n height: 100%;\n flex-basis: auto;\n flex-shrink: 0;\n border-radius: 8px;\n overflow: hidden;\n position: relative;\n cursor: pointer;\n\n video {\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n\n &-overlay {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n border-radius: 4px;\n background: linear-gradient(180deg, rgba(111, 111, 111, 0.27) 0%, rgba(38, 36, 76, 0.83) 100%);\n }\n\n &-play-btn {\n width: 40px;\n height: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: #fff;\n transition: transform 0.2s ease;\n font-size: 40px;\n \n\n &:hover {\n transform: scale(1.1);\n }\n }\n\n &-duration {\n position: absolute;\n bottom: 8px;\n left: 50%;\n transform: translateX(-50%);\n font-size: 14px;\n font-weight: 500;\n color: #fff;\n text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);\n }\n\n &-playing-overlay {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n }\n }\n \n &-audio {\n display: flex;\n align-items: center;\n gap: 8px;\n background-color: ", ";\n border-radius: 8px;\n border: 1px solid ", ";\n height: 40px;\n padding: 0 8px;\n\n &-time {\n font-size: 12px;\n color: ", ";\n line-height: 1;\n }\n\n &-progress {\n flex: 1;\n height: 8px;\n background-color: ", ";\n border-radius: 4px;\n cursor: pointer;\n position: relative;\n overflow: hidden;\n\n &-bar {\n height: 100%;\n background-color: ", ";\n border-radius: 4px;\n transition: width 0.1s linear;\n }\n }\n }\n}\n"])), function (p) {
|
|
5
5
|
return p.theme.prefixCls;
|
|
6
|
+
}, function (p) {
|
|
7
|
+
return p.theme.colorBgLayout;
|
|
8
|
+
}, function (p) {
|
|
9
|
+
return p.theme.colorBgLayout;
|
|
6
10
|
}, function (p) {
|
|
7
11
|
return p.theme.colorFillTertiary;
|
|
12
|
+
}, function (p) {
|
|
13
|
+
return p.theme.colorBgBase;
|
|
14
|
+
}, function (p) {
|
|
15
|
+
return p.theme.colorBorderSecondary;
|
|
16
|
+
}, function (p) {
|
|
17
|
+
return p.theme.colorText;
|
|
18
|
+
}, function (p) {
|
|
19
|
+
return p.theme.colorBorderSecondary;
|
|
20
|
+
}, function (p) {
|
|
21
|
+
return p.theme.colorPrimary;
|
|
8
22
|
});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@agentscope-ai/chat",
|
|
3
|
-
"version": "1.1.46-beta.
|
|
3
|
+
"version": "1.1.46-beta.1768039019165",
|
|
4
4
|
"description": "a free and open-source chat framework for building excellent LLM-powered chat experiences",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"sideEffects": [
|