@agentscope-ai/chat 1.1.46-beta.1768039019165 → 1.1.46-beta.1768114534636
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,7 +1,8 @@
|
|
|
1
1
|
import { IVideo } from "./types";
|
|
2
2
|
import { useProviderContext } from "..";
|
|
3
3
|
import { useRef, useState, useCallback } from "react";
|
|
4
|
-
import { SparkPlayFill } from "@agentscope-ai/icons";
|
|
4
|
+
import { SparkPauseFill, SparkPlayFill } from "@agentscope-ai/icons";
|
|
5
|
+
import cls from "classnames";
|
|
5
6
|
|
|
6
7
|
export default function Video(props: IVideo) {
|
|
7
8
|
const prefixCls = useProviderContext().getPrefixCls('assets-preview-video');
|
|
@@ -9,6 +10,7 @@ export default function Video(props: IVideo) {
|
|
|
9
10
|
const videoRef = useRef<HTMLVideoElement>(null);
|
|
10
11
|
const [isPlaying, setIsPlaying] = useState(false);
|
|
11
12
|
const [duration, setDuration] = useState(0);
|
|
13
|
+
const [currentTime, setCurrentTime] = useState(0);
|
|
12
14
|
|
|
13
15
|
const formatTime = useCallback((seconds: number) => {
|
|
14
16
|
const mins = Math.floor(seconds / 60);
|
|
@@ -37,6 +39,13 @@ export default function Video(props: IVideo) {
|
|
|
37
39
|
|
|
38
40
|
const handleEnded = useCallback(() => {
|
|
39
41
|
setIsPlaying(false);
|
|
42
|
+
setCurrentTime(0);
|
|
43
|
+
}, []);
|
|
44
|
+
|
|
45
|
+
const handleTimeUpdate = useCallback(() => {
|
|
46
|
+
if (videoRef.current) {
|
|
47
|
+
setCurrentTime(videoRef.current.currentTime);
|
|
48
|
+
}
|
|
40
49
|
}, []);
|
|
41
50
|
|
|
42
51
|
return (
|
|
@@ -53,21 +62,23 @@ export default function Video(props: IVideo) {
|
|
|
53
62
|
poster={poster}
|
|
54
63
|
preload="metadata"
|
|
55
64
|
onLoadedMetadata={handleLoadedMetadata}
|
|
65
|
+
onTimeUpdate={handleTimeUpdate}
|
|
56
66
|
onEnded={handleEnded}
|
|
57
67
|
/>
|
|
58
|
-
{
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
68
|
+
<div className={cls(`${prefixCls}-overlay`, {
|
|
69
|
+
[`${prefixCls}-overlay-playing`]: isPlaying,
|
|
70
|
+
[`${prefixCls}-overlay-paused`]: !isPlaying,
|
|
71
|
+
})} onClick={isPlaying ? handlePlayPause : handlePlayPause}>
|
|
72
|
+
<div className={`${prefixCls}-play-btn`}>
|
|
73
|
+
{
|
|
74
|
+
isPlaying ? <SparkPauseFill /> : <SparkPlayFill />
|
|
75
|
+
}
|
|
76
|
+
</div>
|
|
77
|
+
<div className={`${prefixCls}-duration`}>
|
|
78
|
+
{formatTime(currentTime)}/{formatTime(duration)}
|
|
66
79
|
</div>
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
<div className={`${prefixCls}-playing-overlay`} onClick={handlePlayPause} />
|
|
70
|
-
)}
|
|
80
|
+
</div>
|
|
81
|
+
|
|
71
82
|
</div>
|
|
72
83
|
);
|
|
73
84
|
}
|
|
@@ -28,6 +28,19 @@ export default function () {
|
|
|
28
28
|
{ src: 'https://img.alicdn.com/imgextra/i3/O1CN01dKprif1ar0awCMDwK_!!6000000003382-0-tps-2640-1100.jpg', width: 16, height: 9 },
|
|
29
29
|
]} />
|
|
30
30
|
|
|
31
|
+
<AssetsPreview type="image" data={[
|
|
32
|
+
{ src: 'https://img.alicdn.com/imgextra/i3/O1CN01dKprif1ar0awCMDwK_!!6000000003382-0-tps-2640-1100.jpg', width: 1, height: 1 },
|
|
33
|
+
{ src: 'https://img.alicdn.com/imgextra/i3/O1CN01dKprif1ar0awCMDwK_!!6000000003382-0-tps-2640-1100.jpg', width: 1, height: 1 },
|
|
34
|
+
{ src: 'https://img.alicdn.com/imgextra/i3/O1CN01dKprif1ar0awCMDwK_!!6000000003382-0-tps-2640-1100.jpg', width: 1, height: 1 },
|
|
35
|
+
{ src: 'https://img.alicdn.com/imgextra/i3/O1CN01dKprif1ar0awCMDwK_!!6000000003382-0-tps-2640-1100.jpg', width: 1, height: 1 },
|
|
36
|
+
]} />
|
|
37
|
+
|
|
38
|
+
<AssetsPreview type="image" data={[
|
|
39
|
+
{ src: 'https://img.alicdn.com/imgextra/i3/O1CN01dKprif1ar0awCMDwK_!!6000000003382-0-tps-2640-1100.jpg', width: 9, height: 16 },
|
|
40
|
+
{ src: 'https://img.alicdn.com/imgextra/i3/O1CN01dKprif1ar0awCMDwK_!!6000000003382-0-tps-2640-1100.jpg', width: 9, height: 16 },
|
|
41
|
+
{ src: 'https://img.alicdn.com/imgextra/i3/O1CN01dKprif1ar0awCMDwK_!!6000000003382-0-tps-2640-1100.jpg', width: 9, height: 16 },
|
|
42
|
+
]} />
|
|
43
|
+
|
|
31
44
|
<AssetsPreview type="video" data={[
|
|
32
45
|
{ src: 'https://cloud.video.taobao.com/vod/m9amjbqLTGUvaGo3o61u-Ch2hycUCa3RA3pAw1-Zv_0.mp4', width: 16, height: 9 },
|
|
33
46
|
]} />
|
|
@@ -62,6 +62,10 @@ export default createGlobalStyle`
|
|
|
62
62
|
background-size: cover;
|
|
63
63
|
background-position: center;
|
|
64
64
|
background-repeat: no-repeat;
|
|
65
|
+
|
|
66
|
+
.anticon-eye {
|
|
67
|
+
font-size: 20px;
|
|
68
|
+
}
|
|
65
69
|
}
|
|
66
70
|
|
|
67
71
|
&-video {
|
|
@@ -90,7 +94,18 @@ export default createGlobalStyle`
|
|
|
90
94
|
align-items: center;
|
|
91
95
|
justify-content: center;
|
|
92
96
|
border-radius: 4px;
|
|
93
|
-
|
|
97
|
+
|
|
98
|
+
&-playing {
|
|
99
|
+
opacity: 0;
|
|
100
|
+
&:hover {
|
|
101
|
+
opacity: 1;
|
|
102
|
+
background: linear-gradient(180deg, rgba(111, 111, 111, 0.27) 0%, rgba(38, 36, 76, 0.83) 100%);
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
&-paused {
|
|
107
|
+
background: linear-gradient(180deg, rgba(111, 111, 111, 0.27) 0%, rgba(38, 36, 76, 0.83) 100%);
|
|
108
|
+
}
|
|
94
109
|
}
|
|
95
110
|
|
|
96
111
|
&-play-btn {
|
|
@@ -127,6 +142,7 @@ export default createGlobalStyle`
|
|
|
127
142
|
right: 0;
|
|
128
143
|
bottom: 0;
|
|
129
144
|
}
|
|
145
|
+
|
|
130
146
|
}
|
|
131
147
|
|
|
132
148
|
&-audio {
|
|
@@ -15,7 +15,8 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
|
|
|
15
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; }
|
|
16
16
|
import { useProviderContext } from "..";
|
|
17
17
|
import { useRef, useState, useCallback } from "react";
|
|
18
|
-
import { SparkPlayFill } from "@agentscope-ai/icons";
|
|
18
|
+
import { SparkPauseFill, SparkPlayFill } from "@agentscope-ai/icons";
|
|
19
|
+
import cls from "classnames";
|
|
19
20
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
20
21
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
21
22
|
export default function Video(props) {
|
|
@@ -34,6 +35,10 @@ export default function Video(props) {
|
|
|
34
35
|
_useState4 = _slicedToArray(_useState3, 2),
|
|
35
36
|
duration = _useState4[0],
|
|
36
37
|
setDuration = _useState4[1];
|
|
38
|
+
var _useState5 = useState(0),
|
|
39
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
|
40
|
+
currentTime = _useState6[0],
|
|
41
|
+
setCurrentTime = _useState6[1];
|
|
37
42
|
var formatTime = useCallback(function (seconds) {
|
|
38
43
|
var mins = Math.floor(seconds / 60);
|
|
39
44
|
var secs = Math.floor(seconds % 60);
|
|
@@ -57,6 +62,12 @@ export default function Video(props) {
|
|
|
57
62
|
}, []);
|
|
58
63
|
var handleEnded = useCallback(function () {
|
|
59
64
|
setIsPlaying(false);
|
|
65
|
+
setCurrentTime(0);
|
|
66
|
+
}, []);
|
|
67
|
+
var handleTimeUpdate = useCallback(function () {
|
|
68
|
+
if (videoRef.current) {
|
|
69
|
+
setCurrentTime(videoRef.current.currentTime);
|
|
70
|
+
}
|
|
60
71
|
}, []);
|
|
61
72
|
return /*#__PURE__*/_jsxs("div", {
|
|
62
73
|
className: prefixCls,
|
|
@@ -69,20 +80,18 @@ export default function Video(props) {
|
|
|
69
80
|
poster: poster,
|
|
70
81
|
preload: "metadata",
|
|
71
82
|
onLoadedMetadata: handleLoadedMetadata,
|
|
83
|
+
onTimeUpdate: handleTimeUpdate,
|
|
72
84
|
onEnded: handleEnded
|
|
73
|
-
})),
|
|
74
|
-
className: "".concat(prefixCls, "-overlay"),
|
|
75
|
-
onClick: handlePlayPause,
|
|
85
|
+
})), /*#__PURE__*/_jsxs("div", {
|
|
86
|
+
className: cls("".concat(prefixCls, "-overlay"), _defineProperty(_defineProperty({}, "".concat(prefixCls, "-overlay-playing"), isPlaying), "".concat(prefixCls, "-overlay-paused"), !isPlaying)),
|
|
87
|
+
onClick: isPlaying ? handlePlayPause : handlePlayPause,
|
|
76
88
|
children: [/*#__PURE__*/_jsx("div", {
|
|
77
89
|
className: "".concat(prefixCls, "-play-btn"),
|
|
78
|
-
children: /*#__PURE__*/_jsx(SparkPlayFill, {})
|
|
79
|
-
}), /*#__PURE__*/
|
|
90
|
+
children: isPlaying ? /*#__PURE__*/_jsx(SparkPauseFill, {}) : /*#__PURE__*/_jsx(SparkPlayFill, {})
|
|
91
|
+
}), /*#__PURE__*/_jsxs("div", {
|
|
80
92
|
className: "".concat(prefixCls, "-duration"),
|
|
81
|
-
children: formatTime(duration)
|
|
93
|
+
children: [formatTime(currentTime), "/", formatTime(duration)]
|
|
82
94
|
})]
|
|
83
|
-
}), isPlaying && /*#__PURE__*/_jsx("div", {
|
|
84
|
-
className: "".concat(prefixCls, "-playing-overlay"),
|
|
85
|
-
onClick: handlePlayPause
|
|
86
95
|
})]
|
|
87
96
|
});
|
|
88
97
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
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 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) {
|
|
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 .anticon-eye {\n font-size: 20px;\n }\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\n &-playing {\n opacity: 0;\n &:hover {\n opacity: 1;\n background: linear-gradient(180deg, rgba(111, 111, 111, 0.27) 0%, rgba(38, 36, 76, 0.83) 100%);\n }\n }\n\n &-paused {\n background: linear-gradient(180deg, rgba(111, 111, 111, 0.27) 0%, rgba(38, 36, 76, 0.83) 100%);\n }\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 \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
6
|
}, function (p) {
|
|
7
7
|
return p.theme.colorBgLayout;
|
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.1768114534636",
|
|
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": [
|