tuikit-atomicx-vue3 3.3.1 → 3.3.2
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/components/ChatSetting/GroupChatSetting/GroupActions/GroupActions.js +1 -4
- package/dist/components/ChatSetting/GroupChatSetting/GroupChatSetting.js +1 -2
- package/dist/components/ChatSetting/GroupChatSetting/GroupManagement/GroupManagement.js +1 -2
- package/dist/components/CoGuestPanel/CoGuestPanel.js +6 -6
- package/dist/components/ContactList/ContactInfo/GroupInfo/GroupInfo.js +1 -2
- package/dist/components/ConversationList/ConversationCreate/ConversationCreate.js +1 -2
- package/dist/components/ConversationList/ConversationSearch/ConversationSearch.js +0 -1
- package/dist/components/LiveCoreView/PlayerControl/AudioControl.js +252 -0
- package/dist/components/LiveCoreView/PlayerControl/AudioControl.vue.d.ts +38 -0
- package/dist/components/LiveCoreView/PlayerControl/PlayerControl.js +279 -0
- package/dist/components/LiveCoreView/PlayerControl/PlayerControl.vue.d.ts +15 -0
- package/dist/components/LiveCoreView/PlayerControl/PlayerControlState.d.ts +29 -0
- package/dist/components/LiveCoreView/PlayerControl/PlayerControlState.js +412 -0
- package/dist/components/LiveCoreView/PlayerControl/index.d.ts +3 -0
- package/dist/components/LiveCoreView/PlayerControl/index.js +8 -0
- package/dist/components/LiveCoreView/PlayerControl/utils/deviceDetection.d.ts +85 -0
- package/dist/components/LiveCoreView/PlayerControl/utils/deviceDetection.js +129 -0
- package/dist/components/LiveCoreView/PlayerControl/utils/domHelpers.d.ts +75 -0
- package/dist/components/LiveCoreView/PlayerControl/utils/domHelpers.js +120 -0
- package/dist/components/LiveCoreView/PlayerControl/utils/fullscreenManager.d.ts +120 -0
- package/dist/components/LiveCoreView/PlayerControl/utils/fullscreenManager.js +311 -0
- package/dist/components/LiveCoreView/i18n/en-US/index.d.ts +9 -0
- package/dist/components/LiveCoreView/i18n/en-US/index.js +10 -1
- package/dist/components/LiveCoreView/i18n/zh-CN/index.d.ts +9 -0
- package/dist/components/LiveCoreView/i18n/zh-CN/index.js +10 -1
- package/dist/components/LiveCoreView/index.js +30 -4
- package/dist/components/StreamView/Layout/CustomLayout.js +2 -2
- package/dist/components/StreamView/Layout/GridLayout.js +2 -2
- package/dist/components/StreamView/common/StreamList/index.js +2 -2
- package/dist/styles/index.css +336 -31
- package/package.json +3 -3
- package/src/components/ChatSetting/GroupChatSetting/GroupActions/GroupActions.vue +0 -3
- package/src/components/ChatSetting/GroupChatSetting/GroupChatSetting.vue +0 -1
- package/src/components/ChatSetting/GroupChatSetting/GroupManagement/GroupManagement.vue +0 -1
- package/src/components/ContactList/ContactInfo/GroupInfo/GroupInfo.vue +0 -1
- package/src/components/ConversationList/ConversationCreate/ConversationCreate.vue +0 -1
- package/src/components/ConversationList/ConversationSearch/ConversationSearch.vue +0 -1
- package/src/components/LiveCoreView/PlayerControl/AudioControl.vue +434 -0
- package/src/components/LiveCoreView/PlayerControl/PlayerControl.module.scss +52 -0
- package/src/components/LiveCoreView/PlayerControl/PlayerControl.vue +484 -0
- package/src/components/LiveCoreView/PlayerControl/PlayerControlState.ts +602 -0
- package/src/components/LiveCoreView/PlayerControl/index.ts +3 -0
- package/src/components/LiveCoreView/PlayerControl/utils/deviceDetection.ts +234 -0
- package/src/components/LiveCoreView/PlayerControl/utils/domHelpers.ts +145 -0
- package/src/components/LiveCoreView/PlayerControl/utils/fullscreenManager.ts +417 -0
- package/src/components/LiveCoreView/i18n/en-US/index.ts +9 -0
- package/src/components/LiveCoreView/i18n/zh-CN/index.ts +9 -0
- package/src/components/LiveCoreView/index.vue +14 -3
|
@@ -128,7 +128,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
128
128
|
_: 1
|
|
129
129
|
})) : createCommentVNode("", true),
|
|
130
130
|
createVNode(unref(TUIDialog), {
|
|
131
|
-
appendTo: "body",
|
|
132
131
|
visible: isShowTransferDialog.value,
|
|
133
132
|
title: unref(t)("ChatSetting.transfer_group_owner"),
|
|
134
133
|
"custom-classes": ["user-picker-dialog"],
|
|
@@ -154,7 +153,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
154
153
|
_: 1
|
|
155
154
|
}, 8, ["visible", "title"]),
|
|
156
155
|
createVNode(unref(TUIDialog), {
|
|
157
|
-
appendTo: "body",
|
|
158
156
|
visible: isShowDismissDialog.value,
|
|
159
157
|
title: unref(t)("ChatSetting.dismiss_group"),
|
|
160
158
|
onClose: _cache[5] || (_cache[5] = () => isShowDismissDialog.value = false),
|
|
@@ -162,7 +160,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
162
160
|
onConfirm: handleDismissGroup
|
|
163
161
|
}, null, 8, ["visible", "title"]),
|
|
164
162
|
createVNode(unref(TUIDialog), {
|
|
165
|
-
appendTo: "body",
|
|
166
163
|
visible: isShowQuitDialog.value,
|
|
167
164
|
title: unref(t)("ChatSetting.quit_group"),
|
|
168
165
|
onClose: _cache[7] || (_cache[7] = () => isShowQuitDialog.value = false),
|
|
@@ -178,7 +175,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
178
175
|
};
|
|
179
176
|
}
|
|
180
177
|
});
|
|
181
|
-
const GroupActions = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-
|
|
178
|
+
const GroupActions = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-a8fcc66e"]]);
|
|
182
179
|
export {
|
|
183
180
|
GroupActions as default
|
|
184
181
|
};
|
|
@@ -227,7 +227,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
227
227
|
createVNode(unref(PersonalSettings)),
|
|
228
228
|
createVNode(unref(GroupActions)),
|
|
229
229
|
createVNode(unref(TUIDialog), {
|
|
230
|
-
appendTo: "body",
|
|
231
230
|
visible: isShowUserPickerDialog.value,
|
|
232
231
|
title: userPickerDialogTitle.value,
|
|
233
232
|
"custom-classes": ["user-picker-dialog"],
|
|
@@ -256,7 +255,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
256
255
|
};
|
|
257
256
|
}
|
|
258
257
|
});
|
|
259
|
-
const GroupChatSetting = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-
|
|
258
|
+
const GroupChatSetting = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-7374cfa4"]]);
|
|
260
259
|
export {
|
|
261
260
|
GroupChatSetting as default
|
|
262
261
|
};
|
|
@@ -253,7 +253,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
253
253
|
_: 1
|
|
254
254
|
})) : createCommentVNode("", true),
|
|
255
255
|
createVNode(unref(TUIDialog), {
|
|
256
|
-
appendTo: "body",
|
|
257
256
|
"custom-classes": ["user-picker-dialog"],
|
|
258
257
|
visible: isShowUserPickerDialog.value,
|
|
259
258
|
title: userPickerTitle.value,
|
|
@@ -279,7 +278,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
279
278
|
};
|
|
280
279
|
}
|
|
281
280
|
});
|
|
282
|
-
const GroupManagement = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-
|
|
281
|
+
const GroupManagement = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-a5ebaab5"]]);
|
|
283
282
|
export {
|
|
284
283
|
GroupManagement as default
|
|
285
284
|
};
|
|
@@ -135,8 +135,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
135
135
|
default: withCtx(() => [
|
|
136
136
|
createTextVNode(toDisplayString(unref(t)("Accept")), 1)
|
|
137
137
|
]),
|
|
138
|
-
_:
|
|
139
|
-
},
|
|
138
|
+
_: 1
|
|
139
|
+
}, 8, ["onClick"]),
|
|
140
140
|
createVNode(unref(TUIButton), {
|
|
141
141
|
color: "red",
|
|
142
142
|
onClick: ($event) => handleRejectCoGuestRequest(user.userId)
|
|
@@ -144,8 +144,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
144
144
|
default: withCtx(() => [
|
|
145
145
|
createTextVNode(toDisplayString(unref(t)("Reject")), 1)
|
|
146
146
|
]),
|
|
147
|
-
_:
|
|
148
|
-
},
|
|
147
|
+
_: 1
|
|
148
|
+
}, 8, ["onClick"])
|
|
149
149
|
])
|
|
150
150
|
])
|
|
151
151
|
]);
|
|
@@ -187,8 +187,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
187
187
|
default: withCtx(() => [
|
|
188
188
|
createTextVNode(toDisplayString(unref(t)("Disconnect")), 1)
|
|
189
189
|
]),
|
|
190
|
-
_:
|
|
191
|
-
},
|
|
190
|
+
_: 1
|
|
191
|
+
}, 8, ["onClick"])
|
|
192
192
|
])) : createCommentVNode("", true)
|
|
193
193
|
])
|
|
194
194
|
]);
|
|
@@ -131,7 +131,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
131
131
|
_: 1
|
|
132
132
|
}),
|
|
133
133
|
createVNode(unref(TUIDialog), {
|
|
134
|
-
appendTo: "body",
|
|
135
134
|
visible: visible.value,
|
|
136
135
|
title: canDismissGroup.value ? unref(t)("TUIContact.Confirm dismiss group") : unref(t)("TUIContact.Confirm quit group"),
|
|
137
136
|
"confirm-text": unref(t)("TUIContact.Submit"),
|
|
@@ -149,7 +148,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
149
148
|
};
|
|
150
149
|
}
|
|
151
150
|
});
|
|
152
|
-
const GroupInfo = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-
|
|
151
|
+
const GroupInfo = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-8f45a224"]]);
|
|
153
152
|
export {
|
|
154
153
|
GroupInfo as default
|
|
155
154
|
};
|
|
@@ -180,7 +180,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
180
180
|
}, [
|
|
181
181
|
createVNode(ConversationCreateButton, { onClick: openCreateConversation }),
|
|
182
182
|
createVNode(unref(TUIDialog), {
|
|
183
|
-
appendTo: "body",
|
|
184
183
|
visible: showCreateConversation.value,
|
|
185
184
|
title: dialogTitles.value,
|
|
186
185
|
"confirm-text": dialogConfirmText.value,
|
|
@@ -212,7 +211,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
212
211
|
};
|
|
213
212
|
}
|
|
214
213
|
});
|
|
215
|
-
const ConversationCreateComponent = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-
|
|
214
|
+
const ConversationCreateComponent = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-bdcdab3b"]]);
|
|
216
215
|
export {
|
|
217
216
|
ConversationCreateComponent as default
|
|
218
217
|
};
|
|
@@ -139,7 +139,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
139
139
|
}, null, 40, ["class", "variant", "SearchBar", "SearchResultsPresearch", "SearchResultsLoading", "SearchResultsEmpty", "SearchResultItem", "onSearchComplete", "onError"]))
|
|
140
140
|
], 2)) : createCommentVNode("", true),
|
|
141
141
|
createVNode(unref(TUIDialog), {
|
|
142
|
-
appendTo: "body",
|
|
143
142
|
customClasses: [_ctx.$style.conversationSearch__advanced],
|
|
144
143
|
visible: isShowStandard.value,
|
|
145
144
|
"show-close": false,
|
|
@@ -0,0 +1,252 @@
|
|
|
1
|
+
import { defineComponent, ref, computed, onUnmounted, createElementBlock, openBlock, normalizeStyle, createElementVNode, withDirectives, unref, createBlock, normalizeClass, toDisplayString, vShow, toRaw } from "vue";
|
|
2
|
+
import { useUIKit, IconSpeakerOff, IconSpeakerOn } from "@tencentcloud/uikit-base-component-vue3";
|
|
3
|
+
import { isMobile } from "../../../utils/env.js";
|
|
4
|
+
import { _ as _export_sfc } from "../../../_plugin-vue_export-helper-1tPrXgE0.js";
|
|
5
|
+
const _hoisted_1 = ["title"];
|
|
6
|
+
const _hoisted_2 = { class: "volume-slider-container" };
|
|
7
|
+
const _hoisted_3 = { class: "volume-slider-wrapper-inner" };
|
|
8
|
+
const _hoisted_4 = { class: "slider-track" };
|
|
9
|
+
const _hoisted_5 = { class: "volume-value" };
|
|
10
|
+
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
11
|
+
__name: "AudioControl",
|
|
12
|
+
props: {
|
|
13
|
+
iconSize: { default: 20 },
|
|
14
|
+
enableVolumeControl: { type: Boolean, default: true }
|
|
15
|
+
},
|
|
16
|
+
emits: ["volume-change", "muted-change"],
|
|
17
|
+
setup(__props, { emit: __emit }) {
|
|
18
|
+
const props = __props;
|
|
19
|
+
const emit = __emit;
|
|
20
|
+
const { t } = useUIKit();
|
|
21
|
+
const volumeState = ref({
|
|
22
|
+
current: 1,
|
|
23
|
+
previous: 1
|
|
24
|
+
});
|
|
25
|
+
const isMuted = ref(false);
|
|
26
|
+
const isVolumeSliderVisible = ref(false);
|
|
27
|
+
const isDragging = ref(false);
|
|
28
|
+
const volumeSliderElement = ref();
|
|
29
|
+
const volumeSliderAutoHideTimer = ref(null);
|
|
30
|
+
const AUTO_HIDE_DELAY = {
|
|
31
|
+
PC: 500,
|
|
32
|
+
// 0.5 seconds for PC
|
|
33
|
+
MOBILE: 3e3
|
|
34
|
+
// 3 seconds for mobile
|
|
35
|
+
};
|
|
36
|
+
const volumePercentage = computed(() => {
|
|
37
|
+
if (props.enableVolumeControl === false) {
|
|
38
|
+
return isMuted.value ? 0 : 100;
|
|
39
|
+
}
|
|
40
|
+
return Math.round(volumeState.value.current * 100);
|
|
41
|
+
});
|
|
42
|
+
const iconSizeStyle = computed(() => ({
|
|
43
|
+
width: `${props.iconSize || 20}px`,
|
|
44
|
+
height: `${props.iconSize || 20}px`
|
|
45
|
+
}));
|
|
46
|
+
const updateVolume = (newVolume) => {
|
|
47
|
+
volumeState.value.previous = toRaw(volumeState.value.current);
|
|
48
|
+
volumeState.value.current = newVolume;
|
|
49
|
+
isMuted.value = newVolume === 0;
|
|
50
|
+
emit("volume-change", newVolume);
|
|
51
|
+
};
|
|
52
|
+
const toggleMute = () => {
|
|
53
|
+
if (isMuted.value) {
|
|
54
|
+
isMuted.value = false;
|
|
55
|
+
volumeState.value.current = volumeState.value.previous || 0.2;
|
|
56
|
+
emit("muted-change", false);
|
|
57
|
+
emit("volume-change", volumeState.value.current);
|
|
58
|
+
} else {
|
|
59
|
+
isMuted.value = true;
|
|
60
|
+
volumeState.value.previous = volumeState.value.current;
|
|
61
|
+
volumeState.value.current = 0;
|
|
62
|
+
emit("muted-change", true);
|
|
63
|
+
emit("volume-change", volumeState.value.current);
|
|
64
|
+
}
|
|
65
|
+
};
|
|
66
|
+
const handleVolumeIconClick = () => {
|
|
67
|
+
if (props.enableVolumeControl === false) {
|
|
68
|
+
toggleMute();
|
|
69
|
+
} else {
|
|
70
|
+
if (isMobile) {
|
|
71
|
+
isVolumeSliderVisible.value = !isVolumeSliderVisible.value;
|
|
72
|
+
if (isVolumeSliderVisible.value) {
|
|
73
|
+
startVolumeSliderAutoHideTimer();
|
|
74
|
+
} else {
|
|
75
|
+
stopVolumeSliderAutoHideTimer();
|
|
76
|
+
}
|
|
77
|
+
} else {
|
|
78
|
+
toggleMute();
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
};
|
|
82
|
+
const startVolumeSliderAutoHideTimer = () => {
|
|
83
|
+
stopVolumeSliderAutoHideTimer();
|
|
84
|
+
const delay = isMobile ? AUTO_HIDE_DELAY.MOBILE : AUTO_HIDE_DELAY.PC;
|
|
85
|
+
volumeSliderAutoHideTimer.value = window.setTimeout(() => {
|
|
86
|
+
if (props.enableVolumeControl) {
|
|
87
|
+
isVolumeSliderVisible.value = false;
|
|
88
|
+
}
|
|
89
|
+
}, delay);
|
|
90
|
+
};
|
|
91
|
+
const stopVolumeSliderAutoHideTimer = () => {
|
|
92
|
+
if (volumeSliderAutoHideTimer.value) {
|
|
93
|
+
clearTimeout(volumeSliderAutoHideTimer.value);
|
|
94
|
+
volumeSliderAutoHideTimer.value = null;
|
|
95
|
+
}
|
|
96
|
+
};
|
|
97
|
+
const handleMouseEnter = () => {
|
|
98
|
+
if (props.enableVolumeControl === false) return;
|
|
99
|
+
if (isMobile) return;
|
|
100
|
+
isVolumeSliderVisible.value = true;
|
|
101
|
+
startVolumeSliderAutoHideTimer();
|
|
102
|
+
};
|
|
103
|
+
const handleMouseLeave = () => {
|
|
104
|
+
if (props.enableVolumeControl === false) return;
|
|
105
|
+
if (isMobile) return;
|
|
106
|
+
if (!isDragging.value) {
|
|
107
|
+
startVolumeSliderAutoHideTimer();
|
|
108
|
+
}
|
|
109
|
+
};
|
|
110
|
+
const calculateVolumeFromPosition = (clientY, target) => {
|
|
111
|
+
const rect = target.getBoundingClientRect();
|
|
112
|
+
const clickY = clientY - rect.top;
|
|
113
|
+
const height = rect.height;
|
|
114
|
+
return Math.max(0, Math.min(1, 1 - clickY / height));
|
|
115
|
+
};
|
|
116
|
+
const addGlobalEventListeners = () => {
|
|
117
|
+
document.addEventListener("mousemove", handleSliderMove);
|
|
118
|
+
document.addEventListener("mouseup", handleSliderEnd);
|
|
119
|
+
document.addEventListener("touchmove", handleSliderMove);
|
|
120
|
+
document.addEventListener("touchend", handleSliderEnd);
|
|
121
|
+
};
|
|
122
|
+
const removeGlobalEventListeners = () => {
|
|
123
|
+
document.removeEventListener("mousemove", handleSliderMove);
|
|
124
|
+
document.removeEventListener("mouseup", handleSliderEnd);
|
|
125
|
+
document.removeEventListener("touchmove", handleSliderMove);
|
|
126
|
+
document.removeEventListener("touchend", handleSliderEnd);
|
|
127
|
+
};
|
|
128
|
+
const startDragging = () => {
|
|
129
|
+
isDragging.value = true;
|
|
130
|
+
if (props.enableVolumeControl) {
|
|
131
|
+
stopVolumeSliderAutoHideTimer();
|
|
132
|
+
}
|
|
133
|
+
addGlobalEventListeners();
|
|
134
|
+
};
|
|
135
|
+
const handleSliderMove = (event) => {
|
|
136
|
+
if (!isDragging.value) return;
|
|
137
|
+
event.preventDefault();
|
|
138
|
+
let clientY;
|
|
139
|
+
if (event instanceof MouseEvent) {
|
|
140
|
+
clientY = event.clientY;
|
|
141
|
+
} else {
|
|
142
|
+
clientY = event.touches[0].clientY;
|
|
143
|
+
}
|
|
144
|
+
const volumeValue = calculateVolumeFromPosition(clientY, volumeSliderElement.value);
|
|
145
|
+
updateVolume(volumeValue);
|
|
146
|
+
};
|
|
147
|
+
const handleSliderEnd = () => {
|
|
148
|
+
isDragging.value = false;
|
|
149
|
+
if (props.enableVolumeControl && isVolumeSliderVisible.value) {
|
|
150
|
+
startVolumeSliderAutoHideTimer();
|
|
151
|
+
}
|
|
152
|
+
removeGlobalEventListeners();
|
|
153
|
+
};
|
|
154
|
+
const handleSliderMouseDown = (event) => {
|
|
155
|
+
if (props.enableVolumeControl === false) return;
|
|
156
|
+
startDragging();
|
|
157
|
+
event.preventDefault();
|
|
158
|
+
};
|
|
159
|
+
const handleSliderTouchStart = (event) => {
|
|
160
|
+
if (props.enableVolumeControl === false) return;
|
|
161
|
+
startDragging();
|
|
162
|
+
event.preventDefault();
|
|
163
|
+
};
|
|
164
|
+
const handleVolumeSliderAreaClick = () => {
|
|
165
|
+
if (props.enableVolumeControl === false) return;
|
|
166
|
+
if (isMobile) {
|
|
167
|
+
isVolumeSliderVisible.value = !isVolumeSliderVisible.value;
|
|
168
|
+
if (isVolumeSliderVisible.value) {
|
|
169
|
+
startVolumeSliderAutoHideTimer();
|
|
170
|
+
} else {
|
|
171
|
+
stopVolumeSliderAutoHideTimer();
|
|
172
|
+
}
|
|
173
|
+
}
|
|
174
|
+
};
|
|
175
|
+
const handleVolumeSliderMouseEnter = () => {
|
|
176
|
+
if (props.enableVolumeControl === false) return;
|
|
177
|
+
if (isMobile) return;
|
|
178
|
+
stopVolumeSliderAutoHideTimer();
|
|
179
|
+
};
|
|
180
|
+
const handleVolumeSliderMouseLeave = () => {
|
|
181
|
+
if (props.enableVolumeControl === false) return;
|
|
182
|
+
if (isMobile) return;
|
|
183
|
+
if (!isDragging.value) {
|
|
184
|
+
startVolumeSliderAutoHideTimer();
|
|
185
|
+
}
|
|
186
|
+
};
|
|
187
|
+
onUnmounted(() => {
|
|
188
|
+
removeGlobalEventListeners();
|
|
189
|
+
if (volumeSliderAutoHideTimer.value) {
|
|
190
|
+
clearTimeout(volumeSliderAutoHideTimer.value);
|
|
191
|
+
}
|
|
192
|
+
});
|
|
193
|
+
return (_ctx, _cache) => {
|
|
194
|
+
return openBlock(), createElementBlock("div", {
|
|
195
|
+
class: "audio-control",
|
|
196
|
+
style: normalizeStyle(iconSizeStyle.value),
|
|
197
|
+
onMouseenter: handleMouseEnter,
|
|
198
|
+
onMouseleave: handleMouseLeave
|
|
199
|
+
}, [
|
|
200
|
+
createElementVNode("span", {
|
|
201
|
+
class: "control-btn volume-btn",
|
|
202
|
+
title: isMuted.value ? unref(t)("Unmute") : unref(t)("Mute"),
|
|
203
|
+
onClick: handleVolumeIconClick
|
|
204
|
+
}, [
|
|
205
|
+
isMuted.value ? (openBlock(), createBlock(unref(IconSpeakerOff), {
|
|
206
|
+
key: 0,
|
|
207
|
+
size: "20"
|
|
208
|
+
})) : (openBlock(), createBlock(unref(IconSpeakerOn), {
|
|
209
|
+
key: 1,
|
|
210
|
+
size: "20"
|
|
211
|
+
}))
|
|
212
|
+
], 8, _hoisted_1),
|
|
213
|
+
withDirectives(createElementVNode("div", _hoisted_2, [
|
|
214
|
+
createElementVNode("div", {
|
|
215
|
+
class: "volume-slider-wrapper",
|
|
216
|
+
onMouseenter: handleVolumeSliderMouseEnter,
|
|
217
|
+
onMouseleave: handleVolumeSliderMouseLeave
|
|
218
|
+
}, [
|
|
219
|
+
createElementVNode("div", _hoisted_3, [
|
|
220
|
+
createElementVNode("div", {
|
|
221
|
+
ref_key: "volumeSliderElement",
|
|
222
|
+
ref: volumeSliderElement,
|
|
223
|
+
class: "custom-volume-slider",
|
|
224
|
+
onMousedown: handleSliderMouseDown,
|
|
225
|
+
onTouchstart: handleSliderTouchStart,
|
|
226
|
+
onClick: handleVolumeSliderAreaClick
|
|
227
|
+
}, [
|
|
228
|
+
createElementVNode("div", _hoisted_4, [
|
|
229
|
+
createElementVNode("div", {
|
|
230
|
+
class: "slider-progress",
|
|
231
|
+
style: normalizeStyle({ height: `${volumePercentage.value}%` })
|
|
232
|
+
}, null, 4),
|
|
233
|
+
createElementVNode("div", {
|
|
234
|
+
class: normalizeClass(["slider-thumb", { "no-transition": isDragging.value }]),
|
|
235
|
+
style: normalizeStyle({ bottom: `${volumePercentage.value}%` })
|
|
236
|
+
}, null, 6)
|
|
237
|
+
])
|
|
238
|
+
], 544)
|
|
239
|
+
]),
|
|
240
|
+
createElementVNode("div", _hoisted_5, toDisplayString(volumePercentage.value), 1)
|
|
241
|
+
], 32)
|
|
242
|
+
], 512), [
|
|
243
|
+
[vShow, isVolumeSliderVisible.value]
|
|
244
|
+
])
|
|
245
|
+
], 36);
|
|
246
|
+
};
|
|
247
|
+
}
|
|
248
|
+
});
|
|
249
|
+
const AudioControl = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-22bb0b88"]]);
|
|
250
|
+
export {
|
|
251
|
+
AudioControl as default
|
|
252
|
+
};
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
interface AudioControlProps {
|
|
2
|
+
iconSize?: number;
|
|
3
|
+
enableVolumeControl?: boolean;
|
|
4
|
+
}
|
|
5
|
+
declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<AudioControlProps>, {
|
|
6
|
+
iconSize: number;
|
|
7
|
+
enableVolumeControl: boolean;
|
|
8
|
+
}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
|
|
9
|
+
"volume-change": (value: number) => void;
|
|
10
|
+
"muted-change": (value: boolean) => void;
|
|
11
|
+
}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<AudioControlProps>, {
|
|
12
|
+
iconSize: number;
|
|
13
|
+
enableVolumeControl: boolean;
|
|
14
|
+
}>>> & Readonly<{
|
|
15
|
+
"onVolume-change"?: ((value: number) => any) | undefined;
|
|
16
|
+
"onMuted-change"?: ((value: boolean) => any) | undefined;
|
|
17
|
+
}>, {
|
|
18
|
+
iconSize: number;
|
|
19
|
+
enableVolumeControl: boolean;
|
|
20
|
+
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
|
|
21
|
+
export default _default;
|
|
22
|
+
type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
|
|
23
|
+
type __VLS_TypePropsToRuntimeProps<T> = {
|
|
24
|
+
[K in keyof T]-?: {} extends Pick<T, K> ? {
|
|
25
|
+
type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
|
|
26
|
+
} : {
|
|
27
|
+
type: import('vue').PropType<T[K]>;
|
|
28
|
+
required: true;
|
|
29
|
+
};
|
|
30
|
+
};
|
|
31
|
+
type __VLS_WithDefaults<P, D> = {
|
|
32
|
+
[K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
|
|
33
|
+
default: D[K];
|
|
34
|
+
}> : P[K];
|
|
35
|
+
};
|
|
36
|
+
type __VLS_Prettify<T> = {
|
|
37
|
+
[K in keyof T]: T[K];
|
|
38
|
+
} & {};
|