@agentscope-ai/chat 1.1.46-beta.1768184877196 → 1.1.46-beta.1768191317759
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,8 +1,9 @@
|
|
|
1
1
|
import { IVideo } from "./types";
|
|
2
2
|
import { useProviderContext } from "..";
|
|
3
3
|
import { useRef, useState, useCallback } from "react";
|
|
4
|
-
import { SparkPauseFill, SparkPlayFill } from "@agentscope-ai/icons";
|
|
4
|
+
import { SparkEnlargeLine, SparkPauseFill, SparkPlayFill } from "@agentscope-ai/icons";
|
|
5
5
|
import cls from "classnames";
|
|
6
|
+
import { IconButton } from "@agentscope-ai/design";
|
|
6
7
|
|
|
7
8
|
export default function Video(props: IVideo) {
|
|
8
9
|
const prefixCls = useProviderContext().getPrefixCls('assets-preview-video');
|
|
@@ -48,6 +49,22 @@ export default function Video(props: IVideo) {
|
|
|
48
49
|
}
|
|
49
50
|
}, []);
|
|
50
51
|
|
|
52
|
+
const handleEnlarge = useCallback((event: React.MouseEvent<HTMLDivElement>) => {
|
|
53
|
+
event.stopPropagation();
|
|
54
|
+
const video = videoRef.current;
|
|
55
|
+
if (!video) return;
|
|
56
|
+
|
|
57
|
+
if (video.requestFullscreen) {
|
|
58
|
+
video.requestFullscreen();
|
|
59
|
+
} else if ((video as any).webkitRequestFullscreen) {
|
|
60
|
+
// Safari 兼容
|
|
61
|
+
(video as any).webkitRequestFullscreen();
|
|
62
|
+
} else if ((video as any).msRequestFullscreen) {
|
|
63
|
+
// IE11 兼容
|
|
64
|
+
(video as any).msRequestFullscreen();
|
|
65
|
+
}
|
|
66
|
+
}, []);
|
|
67
|
+
|
|
51
68
|
return (
|
|
52
69
|
<div
|
|
53
70
|
className={prefixCls}
|
|
@@ -66,19 +83,23 @@ export default function Video(props: IVideo) {
|
|
|
66
83
|
onEnded={handleEnded}
|
|
67
84
|
/>
|
|
68
85
|
<div className={cls(`${prefixCls}-overlay`, {
|
|
69
|
-
[`${prefixCls}-overlay-playing`]:
|
|
70
|
-
[`${prefixCls}-overlay-paused`]:
|
|
86
|
+
[`${prefixCls}-overlay-playing`]: 1,
|
|
87
|
+
// [`${prefixCls}-overlay-paused`]: 1,
|
|
71
88
|
})} onClick={isPlaying ? handlePlayPause : handlePlayPause}>
|
|
72
89
|
<div className={`${prefixCls}-play-btn`}>
|
|
73
90
|
{
|
|
74
91
|
isPlaying ? <SparkPauseFill /> : <SparkPlayFill />
|
|
75
92
|
}
|
|
76
93
|
</div>
|
|
77
|
-
|
|
78
|
-
|
|
94
|
+
|
|
95
|
+
|
|
96
|
+
<div className={`${prefixCls}-enlarge`} onClick={handleEnlarge}>
|
|
97
|
+
<IconButton bordered={false} size="small" icon={<SparkEnlargeLine />} />
|
|
79
98
|
</div>
|
|
80
99
|
</div>
|
|
81
|
-
|
|
100
|
+
<div className={`${prefixCls}-duration`}>
|
|
101
|
+
{formatTime(duration - currentTime)}
|
|
102
|
+
</div>
|
|
82
103
|
</div>
|
|
83
104
|
);
|
|
84
105
|
}
|
|
@@ -78,6 +78,20 @@ export default createGlobalStyle`
|
|
|
78
78
|
position: relative;
|
|
79
79
|
cursor: pointer;
|
|
80
80
|
|
|
81
|
+
&-enlarge {
|
|
82
|
+
display: none;
|
|
83
|
+
position: absolute;
|
|
84
|
+
top: 6px;
|
|
85
|
+
right: 6px;
|
|
86
|
+
z-index: 1;
|
|
87
|
+
border-radius: 4px;
|
|
88
|
+
background-color: ${(p) => p.theme.colorBgBase};
|
|
89
|
+
|
|
90
|
+
button {
|
|
91
|
+
display: flex;
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
|
|
81
95
|
video {
|
|
82
96
|
width: 100%;
|
|
83
97
|
height: 100%;
|
|
@@ -94,7 +108,13 @@ export default createGlobalStyle`
|
|
|
94
108
|
flex-direction: column;
|
|
95
109
|
align-items: center;
|
|
96
110
|
justify-content: center;
|
|
97
|
-
border-radius:
|
|
111
|
+
border-radius: 8px;
|
|
112
|
+
|
|
113
|
+
&:hover {
|
|
114
|
+
.${(p) => p.theme.prefixCls}-assets-preview-video-enlarge {
|
|
115
|
+
display: block;
|
|
116
|
+
}
|
|
117
|
+
}
|
|
98
118
|
|
|
99
119
|
&-playing {
|
|
100
120
|
opacity: 0;
|
|
@@ -127,13 +147,27 @@ export default createGlobalStyle`
|
|
|
127
147
|
|
|
128
148
|
&-duration {
|
|
129
149
|
position: absolute;
|
|
150
|
+
display: flex;
|
|
151
|
+
align-items: center;
|
|
152
|
+
justify-content: center;
|
|
130
153
|
bottom: 8px;
|
|
131
|
-
left:
|
|
132
|
-
|
|
154
|
+
left: 0px;
|
|
155
|
+
height: 28px;
|
|
156
|
+
bottom: 0;
|
|
157
|
+
right: 0;
|
|
133
158
|
font-size: 14px;
|
|
134
159
|
font-weight: 500;
|
|
135
160
|
color: #fff;
|
|
136
161
|
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
|
|
162
|
+
background: linear-gradient(180deg, rgba(111, 111, 111, 0.27) 0%, rgba(38, 36, 76, 0.83) 100%);
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
&-overlay {
|
|
166
|
+
&:hover {
|
|
167
|
+
~ .${(p) => p.theme.prefixCls}-assets-preview-video-duration {
|
|
168
|
+
background: transparent;
|
|
169
|
+
}
|
|
170
|
+
}
|
|
137
171
|
}
|
|
138
172
|
|
|
139
173
|
&-playing-overlay {
|
|
@@ -143,7 +177,6 @@ export default createGlobalStyle`
|
|
|
143
177
|
right: 0;
|
|
144
178
|
bottom: 0;
|
|
145
179
|
}
|
|
146
|
-
|
|
147
180
|
}
|
|
148
181
|
|
|
149
182
|
&-audio {
|
|
@@ -15,8 +15,9 @@ 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 { SparkPauseFill, SparkPlayFill } from "@agentscope-ai/icons";
|
|
18
|
+
import { SparkEnlargeLine, SparkPauseFill, SparkPlayFill } from "@agentscope-ai/icons";
|
|
19
19
|
import cls from "classnames";
|
|
20
|
+
import { IconButton } from "@agentscope-ai/design";
|
|
20
21
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
21
22
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
22
23
|
export default function Video(props) {
|
|
@@ -69,6 +70,20 @@ export default function Video(props) {
|
|
|
69
70
|
setCurrentTime(videoRef.current.currentTime);
|
|
70
71
|
}
|
|
71
72
|
}, []);
|
|
73
|
+
var handleEnlarge = useCallback(function (event) {
|
|
74
|
+
event.stopPropagation();
|
|
75
|
+
var video = videoRef.current;
|
|
76
|
+
if (!video) return;
|
|
77
|
+
if (video.requestFullscreen) {
|
|
78
|
+
video.requestFullscreen();
|
|
79
|
+
} else if (video.webkitRequestFullscreen) {
|
|
80
|
+
// Safari 兼容
|
|
81
|
+
video.webkitRequestFullscreen();
|
|
82
|
+
} else if (video.msRequestFullscreen) {
|
|
83
|
+
// IE11 兼容
|
|
84
|
+
video.msRequestFullscreen();
|
|
85
|
+
}
|
|
86
|
+
}, []);
|
|
72
87
|
return /*#__PURE__*/_jsxs("div", {
|
|
73
88
|
className: prefixCls,
|
|
74
89
|
style: {
|
|
@@ -83,15 +98,23 @@ export default function Video(props) {
|
|
|
83
98
|
onTimeUpdate: handleTimeUpdate,
|
|
84
99
|
onEnded: handleEnded
|
|
85
100
|
})), /*#__PURE__*/_jsxs("div", {
|
|
86
|
-
className: cls("".concat(prefixCls, "-overlay"), _defineProperty(
|
|
101
|
+
className: cls("".concat(prefixCls, "-overlay"), _defineProperty({}, "".concat(prefixCls, "-overlay-playing"), 1)),
|
|
87
102
|
onClick: isPlaying ? handlePlayPause : handlePlayPause,
|
|
88
103
|
children: [/*#__PURE__*/_jsx("div", {
|
|
89
104
|
className: "".concat(prefixCls, "-play-btn"),
|
|
90
105
|
children: isPlaying ? /*#__PURE__*/_jsx(SparkPauseFill, {}) : /*#__PURE__*/_jsx(SparkPlayFill, {})
|
|
91
|
-
}), /*#__PURE__*/
|
|
92
|
-
className: "".concat(prefixCls, "-
|
|
93
|
-
|
|
106
|
+
}), /*#__PURE__*/_jsx("div", {
|
|
107
|
+
className: "".concat(prefixCls, "-enlarge"),
|
|
108
|
+
onClick: handleEnlarge,
|
|
109
|
+
children: /*#__PURE__*/_jsx(IconButton, {
|
|
110
|
+
bordered: false,
|
|
111
|
+
size: "small",
|
|
112
|
+
icon: /*#__PURE__*/_jsx(SparkEnlargeLine, {})
|
|
113
|
+
})
|
|
94
114
|
})]
|
|
115
|
+
}), /*#__PURE__*/_jsx("div", {
|
|
116
|
+
className: "".concat(prefixCls, "-duration"),
|
|
117
|
+
children: formatTime(duration - currentTime)
|
|
95
118
|
})]
|
|
96
119
|
});
|
|
97
120
|
}
|
|
@@ -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 .anticon-eye {\n font-size: 20px;\n margin: 0 !important;\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:
|
|
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 margin: 0 !important;\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 &-enlarge {\n display: none;\n position: absolute;\n top: 6px;\n right: 6px;\n z-index: 1;\n border-radius: 4px;\n background-color: ", ";\n\n button {\n display: flex;\n }\n }\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: 8px;\n\n &:hover {\n .", "-assets-preview-video-enlarge {\n display: block;\n }\n }\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 display: flex;\n align-items: center;\n justify-content: center;\n bottom: 8px;\n left: 0px;\n height: 28px;\n bottom: 0;\n right: 0;\n font-size: 14px;\n font-weight: 500;\n color: #fff;\n text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);\n background: linear-gradient(180deg, rgba(111, 111, 111, 0.27) 0%, rgba(38, 36, 76, 0.83) 100%);\n }\n\n &-overlay {\n &:hover {\n ~ .", "-assets-preview-video-duration {\n background: transparent;\n }\n }\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
6
|
}, function (p) {
|
|
7
7
|
return p.theme.colorBgLayout;
|
|
@@ -11,6 +11,12 @@ export default createGlobalStyle(_templateObject || (_templateObject = _taggedTe
|
|
|
11
11
|
return p.theme.colorFillTertiary;
|
|
12
12
|
}, function (p) {
|
|
13
13
|
return p.theme.colorBgBase;
|
|
14
|
+
}, function (p) {
|
|
15
|
+
return p.theme.prefixCls;
|
|
16
|
+
}, function (p) {
|
|
17
|
+
return p.theme.prefixCls;
|
|
18
|
+
}, function (p) {
|
|
19
|
+
return p.theme.colorBgBase;
|
|
14
20
|
}, function (p) {
|
|
15
21
|
return p.theme.colorBorderSecondary;
|
|
16
22
|
}, function (p) {
|
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.1768191317759",
|
|
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": [
|