@lynx-js/web-elements 0.12.4 → 0.12.5
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/CHANGELOG.md
CHANGED
|
@@ -31,6 +31,17 @@ let XAudioTT = (() => {
|
|
|
31
31
|
#setAudioSrc = bindToAttribute(this.#getAudioElement, 'src');
|
|
32
32
|
[xAudioSrc];
|
|
33
33
|
[xAudioBlob];
|
|
34
|
+
#dispatchError(code, from) {
|
|
35
|
+
this.dispatchEvent(new CustomEvent('error', {
|
|
36
|
+
...commonComponentEventSetting,
|
|
37
|
+
detail: {
|
|
38
|
+
code,
|
|
39
|
+
msg: '',
|
|
40
|
+
from,
|
|
41
|
+
currentSrcID: this[xAudioSrc]?.id,
|
|
42
|
+
},
|
|
43
|
+
}));
|
|
44
|
+
}
|
|
34
45
|
#fetchAudio = () => {
|
|
35
46
|
const parsedSrc = this[xAudioSrc];
|
|
36
47
|
if (!parsedSrc || !parsedSrc.id || !parsedSrc.play_url) {
|
|
@@ -58,16 +69,9 @@ let XAudioTT = (() => {
|
|
|
58
69
|
headers: parsedHeaders,
|
|
59
70
|
});
|
|
60
71
|
if (!response.ok) {
|
|
61
|
-
this.
|
|
62
|
-
...commonComponentEventSetting,
|
|
63
|
-
detail: {
|
|
64
|
-
code: XAudioErrorCode.DownloadError,
|
|
65
|
-
msg: '',
|
|
66
|
-
from: 'res loader',
|
|
67
|
-
currentSrcID: parsedSrc.id,
|
|
68
|
-
},
|
|
69
|
-
}));
|
|
72
|
+
this.#dispatchError(XAudioErrorCode.DownloadError, 'res loader');
|
|
70
73
|
reject();
|
|
74
|
+
return;
|
|
71
75
|
}
|
|
72
76
|
this.dispatchEvent(new CustomEvent('srcloadingstatechanged', {
|
|
73
77
|
...commonComponentEventSetting,
|
|
@@ -77,11 +81,17 @@ let XAudioTT = (() => {
|
|
|
77
81
|
currentSrcID: parsedSrc.id,
|
|
78
82
|
},
|
|
79
83
|
}));
|
|
84
|
+
if (response.headers.get('content-type')?.toLowerCase().startsWith('text/html')) {
|
|
85
|
+
this.#dispatchError(XAudioErrorCode.PlayerPlaybackError, 'player');
|
|
86
|
+
reject();
|
|
87
|
+
return;
|
|
88
|
+
}
|
|
80
89
|
const blob = await response.blob();
|
|
81
90
|
const blobUrl = URL.createObjectURL(blob);
|
|
82
91
|
this.#setAudioSrc(blobUrl);
|
|
83
92
|
resolve();
|
|
84
93
|
});
|
|
94
|
+
void this[xAudioBlob].catch(() => { });
|
|
85
95
|
};
|
|
86
96
|
play() {
|
|
87
97
|
// If prepare method is not called, needs to fetch first
|
|
@@ -91,8 +101,15 @@ let XAudioTT = (() => {
|
|
|
91
101
|
this[xAudioBlob]?.then(() => {
|
|
92
102
|
const audio = this.#getAudio();
|
|
93
103
|
audio.currentTime = 0;
|
|
94
|
-
|
|
95
|
-
|
|
104
|
+
try {
|
|
105
|
+
void audio.play().catch(() => {
|
|
106
|
+
this.#dispatchError(XAudioErrorCode.PlayerPlaybackError, 'player');
|
|
107
|
+
});
|
|
108
|
+
}
|
|
109
|
+
catch {
|
|
110
|
+
this.#dispatchError(XAudioErrorCode.PlayerPlaybackError, 'player');
|
|
111
|
+
}
|
|
112
|
+
}, () => { });
|
|
96
113
|
return {
|
|
97
114
|
currentSrcID: this[xAudioSrc]?.id,
|
|
98
115
|
loadingSrcID: '',
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export declare const templateScrollView = "<style>\n .placeholder-dom {\n display: none;\n flex: 0 0 0;\n align-self: stretch;\n min-height: 0;\n min-width: 0;\n }\n .mask {\n z-index: 1;\n position: sticky;\n }\n .observer-container {\n flex-direction: inherit;\n overflow: visible;\n }\n .observer {\n display: flex;\n }\n ::-webkit-scrollbar {\n display: none;\n }\n
|
|
1
|
+
export declare const templateScrollView = "<style>\n .placeholder-dom {\n display: none;\n flex: 0 0 0;\n align-self: stretch;\n min-height: 0;\n min-width: 0;\n }\n .mask {\n z-index: 1;\n position: sticky;\n }\n .observer-container {\n flex-direction: inherit;\n overflow: visible;\n }\n .observer {\n display: flex;\n }\n ::-webkit-scrollbar {\n display: none;\n }\n</style>\n <div\n class=\"mask placeholder-dom\"\n id=\"top-fade-mask\"\n part=\"top-fade-mask\"\n ></div>\n <div\n class=\"observer-container placeholder-dom\"\n part=\"upper-threshold-observer\"\n >\n <div\n class=\"observer placeholder-dom\"\n id=\"upper-threshold-observer\"\n ></div>\n </div>\n <slot></slot>\n <div\n class=\"observer-container placeholder-dom\"\n part=\"lower-threshold-observer\"\n >\n <div\n class=\"observer placeholder-dom\"\n id=\"lower-threshold-observer\"\n ></div>\n </div>\n <div\n class=\"mask placeholder-dom\"\n id=\"bot-fade-mask\"\n part=\"bot-fade-mask\"\n ></div>";
|
|
2
2
|
export declare const templateXAudioTT = "<audio id=\"audio\"></audio>";
|
|
3
3
|
export declare const templateXImage: (attributes: {
|
|
4
4
|
src?: string;
|
|
@@ -29,37 +29,6 @@ export const templateScrollView = `<style>
|
|
|
29
29
|
::-webkit-scrollbar {
|
|
30
30
|
display: none;
|
|
31
31
|
}
|
|
32
|
-
|
|
33
|
-
@keyframes topFading {
|
|
34
|
-
0% {
|
|
35
|
-
box-shadow: transparent 0px 0px 0px 0px;
|
|
36
|
-
}
|
|
37
|
-
5% {
|
|
38
|
-
box-shadow: var(--scroll-view-bg-color) 0px 0px
|
|
39
|
-
var(--scroll-view-fading-edge-length)
|
|
40
|
-
var(--scroll-view-fading-edge-length);
|
|
41
|
-
}
|
|
42
|
-
100% {
|
|
43
|
-
box-shadow: var(--scroll-view-bg-color) 0px 0px
|
|
44
|
-
var(--scroll-view-fading-edge-length)
|
|
45
|
-
var(--scroll-view-fading-edge-length);
|
|
46
|
-
}
|
|
47
|
-
}
|
|
48
|
-
@keyframes botFading {
|
|
49
|
-
0% {
|
|
50
|
-
box-shadow: var(--scroll-view-bg-color) 0px 0px
|
|
51
|
-
var(--scroll-view-fading-edge-length)
|
|
52
|
-
var(--scroll-view-fading-edge-length);
|
|
53
|
-
}
|
|
54
|
-
95% {
|
|
55
|
-
box-shadow: var(--scroll-view-bg-color) 0px 0px
|
|
56
|
-
var(--scroll-view-fading-edge-length)
|
|
57
|
-
var(--scroll-view-fading-edge-length);
|
|
58
|
-
}
|
|
59
|
-
100% {
|
|
60
|
-
box-shadow: transparent 0px 0px 0px 0px;
|
|
61
|
-
}
|
|
62
|
-
}
|
|
63
32
|
</style>
|
|
64
33
|
<div
|
|
65
34
|
class="mask placeholder-dom"
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@lynx-js/web-elements",
|
|
3
|
-
"version": "0.12.
|
|
3
|
+
"version": "0.12.5",
|
|
4
4
|
"private": false,
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -138,7 +138,7 @@
|
|
|
138
138
|
"markdown-it": "^14.1.0"
|
|
139
139
|
},
|
|
140
140
|
"devDependencies": {
|
|
141
|
-
"@playwright/test": "^1.
|
|
141
|
+
"@playwright/test": "^1.61.1",
|
|
142
142
|
"@rsbuild/core": "2.0.11",
|
|
143
143
|
"@rsbuild/plugin-source-build": "1.0.5",
|
|
144
144
|
"@types/markdown-it": "^14.1.1",
|
|
@@ -86,13 +86,43 @@ scroll-view[scroll-orientation="horizontal"][enable-scroll="false"] {
|
|
|
86
86
|
https://chromestatus.com/feature/6752840701706240 It notes that this feature is actively implementing in webkit and gecko.
|
|
87
87
|
chrome 115, firefox no, safari no
|
|
88
88
|
*/
|
|
89
|
+
@keyframes scrollViewTopFading {
|
|
90
|
+
0% {
|
|
91
|
+
box-shadow: transparent 0px 0px 0px 0px;
|
|
92
|
+
}
|
|
93
|
+
5% {
|
|
94
|
+
box-shadow: var(--scroll-view-bg-color) 0px 0px
|
|
95
|
+
var(--scroll-view-fading-edge-length)
|
|
96
|
+
var(--scroll-view-fading-edge-length);
|
|
97
|
+
}
|
|
98
|
+
100% {
|
|
99
|
+
box-shadow: var(--scroll-view-bg-color) 0px 0px
|
|
100
|
+
var(--scroll-view-fading-edge-length)
|
|
101
|
+
var(--scroll-view-fading-edge-length);
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
@keyframes scrollViewBotFading {
|
|
105
|
+
0% {
|
|
106
|
+
box-shadow: var(--scroll-view-bg-color) 0px 0px
|
|
107
|
+
var(--scroll-view-fading-edge-length)
|
|
108
|
+
var(--scroll-view-fading-edge-length);
|
|
109
|
+
}
|
|
110
|
+
95% {
|
|
111
|
+
box-shadow: var(--scroll-view-bg-color) 0px 0px
|
|
112
|
+
var(--scroll-view-fading-edge-length)
|
|
113
|
+
var(--scroll-view-fading-edge-length);
|
|
114
|
+
}
|
|
115
|
+
100% {
|
|
116
|
+
box-shadow: transparent 0px 0px 0px 0px;
|
|
117
|
+
}
|
|
118
|
+
}
|
|
89
119
|
scroll-view[fading-edge-length]::part(top-fade-mask) {
|
|
90
120
|
top: 0;
|
|
91
|
-
animation-name:
|
|
121
|
+
animation-name: scrollViewTopFading;
|
|
92
122
|
}
|
|
93
123
|
scroll-view[fading-edge-length]::part(bot-fade-mask) {
|
|
94
124
|
bottom: 0;
|
|
95
|
-
animation-name:
|
|
125
|
+
animation-name: scrollViewBotFading;
|
|
96
126
|
}
|
|
97
127
|
scroll-view[fading-edge-length]::part(top-fade-mask),
|
|
98
128
|
scroll-view[fading-edge-length]::part(bot-fade-mask) {
|