tuikit-atomicx-vue3 0.1.0

package/dist/components/CoGuestPanel/CoGuestPanel.js

@@ -0,0 +1,285 @@
+import { defineComponent, ref, createElementBlock, openBlock, createElementVNode, normalizeClass, toDisplayString, unref, createCommentVNode, Fragment, renderList, createVNode, withCtx, createTextVNode } from "vue";
+import { useUIKit, TUIButton } from "@tencentcloud/uikit-base-component-vue3";
+import { useCoGuestState } from "../../states/CoGuestState.js";
+import { useLoginState } from "../../states/LoginState.js";
+import { useSeatStore } from "../../states/SeatStore.js";
+import Avatar from "../Avatar/Avatar.js";
+import { _ as _export_sfc } from "../../_plugin-vue_export-helper-1tPrXgE0.js";
+const _hoisted_1 = { class: "panel-content" };
+const _hoisted_2 = { class: "panel-header" };
+const _hoisted_3 = { class: "tabs" };
+const _hoisted_4 = { class: "panel-body" };
+const _hoisted_5 = {
+  key: 0,
+  class: "applications-content"
+};
+const _hoisted_6 = {
+  key: 0,
+  class: "user-list-container"
+};
+const _hoisted_7 = { class: "user-list" };
+const _hoisted_8 = { class: "user-item-left" };
+const _hoisted_9 = { class: "user-item-right" };
+const _hoisted_10 = { class: "user-info" };
+const _hoisted_11 = { class: "user-name" };
+const _hoisted_12 = { class: "user-actions" };
+const _hoisted_13 = {
+  key: 1,
+  class: "empty-state"
+};
+const _hoisted_14 = {
+  key: 1,
+  class: "invitations-content"
+};
+const _hoisted_15 = { class: "user-list-container" };
+const _hoisted_16 = { class: "user-list-title" };
+const _hoisted_17 = { class: "user-list-title-text" };
+const _hoisted_18 = { class: "user-list-title-count" };
+const _hoisted_19 = { class: "user-list" };
+const _hoisted_20 = { class: "user-item-left" };
+const _hoisted_21 = { class: "user-item-right" };
+const _hoisted_22 = { class: "user-info" };
+const _hoisted_23 = { class: "user-name" };
+const _hoisted_24 = {
+  key: 0,
+  class: "is-me"
+};
+const _hoisted_25 = {
+  key: 0,
+  class: "user-actions"
+};
+const _hoisted_26 = {
+  key: 0,
+  class: "empty-state"
+};
+const _hoisted_27 = {
+  key: 0,
+  class: "user-list-container"
+};
+const _hoisted_28 = { class: "user-list-title" };
+const _hoisted_29 = { class: "user-list-title-text" };
+const _hoisted_30 = { class: "user-list" };
+const _hoisted_31 = { class: "user-item-left" };
+const _hoisted_32 = { class: "user-item-right" };
+const _hoisted_33 = { class: "user-info" };
+const _hoisted_34 = { class: "user-name" };
+const _hoisted_35 = { class: "user-actions" };
+const _hoisted_36 = { class: "user-list-container" };
+const _hoisted_37 = { class: "user-list-title" };
+const _hoisted_38 = { class: "user-list-title-text" };
+const _hoisted_39 = { class: "user-list" };
+const _hoisted_40 = { class: "user-item-left" };
+const _hoisted_41 = { class: "user-item-right" };
+const _hoisted_42 = { class: "user-info" };
+const _hoisted_43 = { class: "user-name" };
+const _hoisted_44 = { class: "user-actions" };
+const _hoisted_45 = {
+  key: 0,
+  class: "empty-state"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "CoGuestPanel",
+  setup(__props) {
+    const { t } = useUIKit();
+    const { loginUserInfo } = useLoginState();
+    const { seatList } = useSeatStore();
+    const {
+      receivedCoGuestUserList,
+      availableCoGuestUserList,
+      sentCoGuestUserList,
+      userListInCoGuest,
+      sendCoGuestRequest,
+      acceptCoGuestRequest,
+      rejectCoGuestRequest,
+      cancelCoGuestRequest,
+      disconnect
+    } = useCoGuestState();
+    const activeTab = ref("applications");
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("div", _hoisted_2, [
+          createElementVNode("div", _hoisted_3, [
+            createElementVNode("button", {
+              class: normalizeClass(["tab-item", { active: activeTab.value === "applications" }]),
+              onClick: _cache[0] || (_cache[0] = ($event) => activeTab.value = "applications")
+            }, toDisplayString(unref(t)("Application for live")), 3),
+            createElementVNode("button", {
+              class: normalizeClass(["tab-item", { active: activeTab.value === "invitations" }]),
+              onClick: _cache[1] || (_cache[1] = ($event) => activeTab.value = "invitations")
+            }, toDisplayString(unref(t)("Invite for live")), 3)
+          ])
+        ]),
+        createElementVNode("div", _hoisted_4, [
+          activeTab.value === "applications" ? (openBlock(), createElementBlock("div", _hoisted_5, [
+            unref(receivedCoGuestUserList).length > 0 ? (openBlock(), createElementBlock("div", _hoisted_6, [
+              createElementVNode("div", _hoisted_7, [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(unref(receivedCoGuestUserList), (user) => {
+                  return openBlock(), createElementBlock("div", {
+                    key: user.userId,
+                    class: "user-item"
+                  }, [
+                    createElementVNode("div", _hoisted_8, [
+                      createVNode(unref(Avatar), {
+                        src: user.avatarUrl,
+                        size: 40
+                      }, null, 8, ["src"])
+                    ]),
+                    createElementVNode("div", _hoisted_9, [
+                      createElementVNode("div", _hoisted_10, [
+                        createElementVNode("span", _hoisted_11, toDisplayString(user.userName || user.userId), 1)
+                      ]),
+                      createElementVNode("div", _hoisted_12, [
+                        createVNode(unref(TUIButton), {
+                          onClick: ($event) => unref(acceptCoGuestRequest)({ userId: user.userId })
+                        }, {
+                          default: withCtx(() => [
+                            createTextVNode(toDisplayString(unref(t)("Accept")), 1)
+                          ]),
+                          _: 2
+                        }, 1032, ["onClick"]),
+                        createVNode(unref(TUIButton), {
+                          color: "red",
+                          onClick: ($event) => unref(rejectCoGuestRequest)({ userId: user.userId })
+                        }, {
+                          default: withCtx(() => [
+                            createTextVNode(toDisplayString(unref(t)("Reject")), 1)
+                          ]),
+                          _: 2
+                        }, 1032, ["onClick"])
+                      ])
+                    ])
+                  ]);
+                }), 128))
+              ])
+            ])) : (openBlock(), createElementBlock("div", _hoisted_13, [
+              createElementVNode("span", null, toDisplayString(unref(t)("No application for live")), 1)
+            ]))
+          ])) : createCommentVNode("", true),
+          activeTab.value === "invitations" ? (openBlock(), createElementBlock("div", _hoisted_14, [
+            createElementVNode("div", _hoisted_15, [
+              createElementVNode("div", _hoisted_16, [
+                createElementVNode("span", _hoisted_17, toDisplayString(unref(t)("Current seat")), 1),
+                createElementVNode("span", _hoisted_18, toDisplayString(`(${unref(userListInCoGuest).length}/${unref(seatList).length})`), 1)
+              ]),
+              createElementVNode("div", _hoisted_19, [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(unref(userListInCoGuest), (user) => {
+                  var _a, _b;
+                  return openBlock(), createElementBlock("div", {
+                    key: user.userId,
+                    class: "user-item"
+                  }, [
+                    createElementVNode("div", _hoisted_20, [
+                      createVNode(unref(Avatar), {
+                        src: user.avatarUrl,
+                        size: 40
+                      }, null, 8, ["src"])
+                    ]),
+                    createElementVNode("div", _hoisted_21, [
+                      createElementVNode("div", _hoisted_22, [
+                        createElementVNode("span", _hoisted_23, toDisplayString(user.userName || user.userId), 1),
+                        user.userId === ((_a = unref(loginUserInfo)) == null ? void 0 : _a.userId) ? (openBlock(), createElementBlock("span", _hoisted_24, toDisplayString(`(${unref(t)("Me")})`), 1)) : createCommentVNode("", true)
+                      ]),
+                      user.userId !== ((_b = unref(loginUserInfo)) == null ? void 0 : _b.userId) ? (openBlock(), createElementBlock("div", _hoisted_25, [
+                        createVNode(unref(TUIButton), {
+                          color: "gray",
+                          onClick: ($event) => unref(disconnect)(user.userId)
+                        }, {
+                          default: withCtx(() => [
+                            createTextVNode(toDisplayString(unref(t)("Disconnect")), 1)
+                          ]),
+                          _: 2
+                        }, 1032, ["onClick"])
+                      ])) : createCommentVNode("", true)
+                    ])
+                  ]);
+                }), 128))
+              ]),
+              unref(userListInCoGuest).length === 0 ? (openBlock(), createElementBlock("div", _hoisted_26, [
+                createElementVNode("span", null, toDisplayString(unref(t)("Seat is empty")), 1)
+              ])) : createCommentVNode("", true)
+            ]),
+            unref(sentCoGuestUserList).length > 0 ? (openBlock(), createElementBlock("div", _hoisted_27, [
+              createElementVNode("div", _hoisted_28, [
+                createElementVNode("span", _hoisted_29, toDisplayString(unref(t)("Inviting")), 1)
+              ]),
+              createElementVNode("div", _hoisted_30, [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(unref(sentCoGuestUserList), (user) => {
+                  return openBlock(), createElementBlock("div", {
+                    key: user.userId,
+                    class: "user-item"
+                  }, [
+                    createElementVNode("div", _hoisted_31, [
+                      createVNode(unref(Avatar), {
+                        src: user.avatarUrl,
+                        size: 40
+                      }, null, 8, ["src"])
+                    ]),
+                    createElementVNode("div", _hoisted_32, [
+                      createElementVNode("div", _hoisted_33, [
+                        createElementVNode("span", _hoisted_34, toDisplayString(user.userName || user.userId), 1)
+                      ]),
+                      createElementVNode("div", _hoisted_35, [
+                        createVNode(unref(TUIButton), {
+                          color: "gray",
+                          onClick: ($event) => unref(cancelCoGuestRequest)({ userId: user.userId })
+                        }, {
+                          default: withCtx(() => [
+                            createTextVNode(toDisplayString(unref(t)("Cancel")), 1)
+                          ]),
+                          _: 2
+                        }, 1032, ["onClick"])
+                      ])
+                    ])
+                  ]);
+                }), 128))
+              ])
+            ])) : createCommentVNode("", true),
+            createElementVNode("div", _hoisted_36, [
+              createElementVNode("div", _hoisted_37, [
+                createElementVNode("span", _hoisted_38, toDisplayString(unref(t)("Invite more")), 1)
+              ]),
+              createElementVNode("div", _hoisted_39, [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(unref(availableCoGuestUserList), (user) => {
+                  return openBlock(), createElementBlock("div", {
+                    key: user.userId,
+                    class: "user-item"
+                  }, [
+                    createElementVNode("div", _hoisted_40, [
+                      createVNode(unref(Avatar), {
+                        src: user.avatarUrl,
+                        size: 40
+                      }, null, 8, ["src"])
+                    ]),
+                    createElementVNode("div", _hoisted_41, [
+                      createElementVNode("div", _hoisted_42, [
+                        createElementVNode("span", _hoisted_43, toDisplayString(user.userName || user.userId), 1)
+                      ]),
+                      createElementVNode("div", _hoisted_44, [
+                        createVNode(unref(TUIButton), {
+                          color: "gray",
+                          onClick: ($event) => unref(sendCoGuestRequest)({ userId: user.userId })
+                        }, {
+                          default: withCtx(() => [
+                            createTextVNode(toDisplayString(unref(t)("Invite")), 1)
+                          ]),
+                          _: 2
+                        }, 1032, ["onClick"])
+                      ])
+                    ])
+                  ]);
+                }), 128))
+              ]),
+              unref(availableCoGuestUserList).length === 0 ? (openBlock(), createElementBlock("div", _hoisted_45, [
+                createElementVNode("span", null, toDisplayString(unref(t)("No invited users yet")), 1)
+              ])) : createCommentVNode("", true)
+            ])
+          ])) : createCommentVNode("", true)
+        ])
+      ]);
+    };
+  }
+});
+const CoGuestPanel = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-86486aeb"]]);
+export {
+  CoGuestPanel as default
+};

package/dist/components/CoGuestPanel/CoGuestPanel.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/components/CoGuestPanel/i18n/en-US/index.d.ts

@@ -0,0 +1,16 @@
+export declare const resource: {
+    'Application for live': string;
+    'Invite for live': string;
+    'Seat is empty': string;
+    'No invited users yet': string;
+    'Current seat': string;
+    Accept: string;
+    Reject: string;
+    Disconnect: string;
+    Cancel: string;
+    Invite: string;
+    'Invite more': string;
+    Inviting: string;
+    'No application for live': string;
+    Me: string;
+};

package/dist/components/CoGuestPanel/i18n/en-US/index.js

@@ -0,0 +1,19 @@
+const resource = {
+  "Application for live": "Application for live",
+  "Invite for live": "Invite for live",
+  "Seat is empty": "Seat is empty",
+  "No invited users yet": "No invited users yet",
+  "Current seat": "Current seat",
+  Accept: "Accept",
+  Reject: "Reject",
+  Disconnect: "Disconnect",
+  Cancel: "Cancel",
+  Invite: "Invite",
+  "Invite more": "Invite more",
+  Inviting: "Inviting",
+  "No application for live": "No application for live",
+  Me: "Me"
+};
+export {
+  resource
+};

package/dist/components/CoGuestPanel/i18n/index.d.ts

@@ -0,0 +1,4 @@
+import { resource as enResource } from './en-US/index';
+import { resource as zhResource } from './zh-CN/index';
+
+export { enResource, zhResource };

package/dist/components/CoGuestPanel/i18n/index.js

@@ -0,0 +1,6 @@
+import { resource } from "./en-US/index.js";
+import { resource as resource2 } from "./zh-CN/index.js";
+export {
+  resource as enResource,
+  resource2 as zhResource
+};

package/dist/components/CoGuestPanel/i18n/zh-CN/index.d.ts

@@ -0,0 +1,16 @@
+export declare const resource: {
+    'Application for live': string;
+    'Invite for live': string;
+    'Seat is empty': string;
+    'No invited users yet': string;
+    'Current seat': string;
+    Accept: string;
+    Reject: string;
+    Disconnect: string;
+    Cancel: string;
+    Invite: string;
+    'Invite more': string;
+    Inviting: string;
+    'No application for live': string;
+    Me: string;
+};

package/dist/components/CoGuestPanel/i18n/zh-CN/index.js

@@ -0,0 +1,19 @@
+const resource = {
+  "Application for live": "连麦申请",
+  "Invite for live": "邀请连麦",
+  "Seat is empty": "麦位空闲",
+  "No invited users yet": "暂无可邀请用户",
+  "Current seat": "当前麦位",
+  Accept: "接受",
+  Reject: "拒绝",
+  Disconnect: "断开连麦",
+  Cancel: "取消",
+  Invite: "邀请",
+  "Invite more": "邀请更多",
+  Inviting: "邀请中",
+  "No application for live": "暂无连麦申请",
+  Me: "我"
+};
+export {
+  resource
+};

package/dist/components/CoGuestPanel/index.d.ts

@@ -0,0 +1,3 @@
+import { default as CoGuestPanel } from './CoGuestPanel.vue';
+
+export { CoGuestPanel };

package/dist/components/CoGuestPanel/index.js

@@ -0,0 +1,9 @@
+import { default as default2 } from "./CoGuestPanel.js";
+import { addI18n } from "../../i18n/index.js";
+import { resource } from "./i18n/en-US/index.js";
+import { resource as resource$1 } from "./i18n/zh-CN/index.js";
+addI18n("en-US", { translation: resource });
+addI18n("zh-CN", { translation: resource$1 });
+export {
+  default2 as CoGuestPanel
+};

package/dist/components/ConversationList/ConversationList.js

@@ -0,0 +1,36 @@
+import { defineComponent, createElementBlock, openBlock, Fragment, renderList, unref, createElementVNode, toDisplayString } from "vue";
+import { useConversationListState } from "../../states/ConversationListState/ConversationListState.js";
+import { _ as _export_sfc } from "../../_plugin-vue_export-helper-1tPrXgE0.js";
+const _hoisted_1 = { class: "conversation-list" };
+const _hoisted_2 = ["onClick"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ConversationList",
+  setup(__props) {
+    const {
+      conversationList,
+      switchConversation
+    } = useConversationListState();
+    function handleConversationClick(conversationID) {
+      switchConversation(conversationID);
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(unref(conversationList), (conversation) => {
+          return openBlock(), createElementBlock("div", {
+            key: conversation.conversationID,
+            class: "conversationItem"
+          }, [
+            createElementVNode("div", {
+              class: "conversation-item",
+              onClick: ($event) => handleConversationClick(conversation.conversationID)
+            }, toDisplayString(conversation.getShowName()), 9, _hoisted_2)
+          ]);
+        }), 128))
+      ]);
+    };
+  }
+});
+const ConversationList = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-aaffc550"]]);
+export {
+  ConversationList as default
+};

package/dist/components/ConversationList/ConversationList.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/components/ConversationList/index.d.ts

@@ -0,0 +1,3 @@
+import { default as ConversationList } from './ConversationList.vue';
+
+export { ConversationList, };

package/dist/components/ConversationList/index.js

@@ -0,0 +1,4 @@
+import { default as default2 } from "./ConversationList.js";
+export {
+  default2 as ConversationList
+};

package/dist/components/LiveAudienceList/LiveAudienceList.js

@@ -0,0 +1,167 @@
+import { defineComponent, ref, computed, onMounted, onUnmounted, createElementBlock, openBlock, normalizeStyle, createElementVNode, createCommentVNode, createBlock, Fragment, renderList, unref, createVNode, renderSlot, normalizeClass, toDisplayString } from "vue";
+import { useUIKit } from "@tencentcloud/uikit-base-component-vue3";
+import { useLiveAudienceState } from "../../states/LiveAudienceState.js";
+import { useLiveState } from "../../states/LiveState/index.js";
+import { useLoginState } from "../../states/LoginState.js";
+import { LiveStatus } from "../../types/live.js";
+import UserActionMenu from "./UserActionMenu.js";
+import Avatar from "../Avatar/Avatar.js";
+import { _ as _export_sfc } from "../../_plugin-vue_export-helper-1tPrXgE0.js";
+const _hoisted_1 = ["onClick"];
+const _hoisted_2 = { class: "viewer-info" };
+const _hoisted_3 = { class: "viewer-name" };
+const _hoisted_4 = {
+  key: 0,
+  class: "loading-indicator"
+};
+const _hoisted_5 = {
+  key: 1,
+  class: "viewer-bottom-line"
+};
+const _hoisted_6 = {
+  key: 2,
+  class: "empty-state"
+};
+const _hoisted_7 = {
+  key: 0,
+  class: "viewer-item current-user-item"
+};
+const _hoisted_8 = { class: "viewer-info" };
+const _hoisted_9 = { class: "viewer-name" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "LiveAudienceList",
+  props: {
+    height: {},
+    style: {}
+  },
+  setup(__props) {
+    const { t } = useUIKit();
+    const currentViewerTarget = ref(null);
+    const viewersListRef = ref(null);
+    const isLoading = ref(false);
+    const props = __props;
+    const { loginUserInfo } = useLoginState();
+    const { audienceList, audienceCount, fetchAudienceList } = useLiveAudienceState();
+    const { localLiveStatus, currentLive } = useLiveState();
+    const getRankClass = (rank) => {
+      switch (rank) {
+        case 1:
+          return "rank-first";
+        case 2:
+          return "rank-second";
+        case 3:
+          return "rank-third";
+        default:
+          return "rank-default";
+      }
+    };
+    const showActionMenu = ref(false);
+    const selectedViewer = ref(null);
+    const actionMenuStyle = ref({});
+    const isOwner = computed(() => {
+      var _a, _b;
+      return ((_a = loginUserInfo.value) == null ? void 0 : _a.userId) === ((_b = currentLive.value) == null ? void 0 : _b.liveOwner.userId);
+    });
+    const handleViewerClick = (viewer, event) => {
+      if (!isOwner.value) {
+        return;
+      }
+      selectedViewer.value = viewer;
+      showActionMenu.value = true;
+      const target = event.currentTarget;
+      currentViewerTarget.value = target;
+      const rect = target.getBoundingClientRect();
+      actionMenuStyle.value = {
+        position: "fixed",
+        left: `${rect.left}px`,
+        top: `${rect.bottom + 8}px`,
+        zIndex: 1001
+      };
+    };
+    const handleScroll = async () => {
+      if (!viewersListRef.value || isLoading.value) {
+        return;
+      }
+      const { scrollTop, clientHeight, scrollHeight } = viewersListRef.value;
+      if (scrollTop + clientHeight >= scrollHeight - 50) {
+        isLoading.value = true;
+        try {
+          await fetchAudienceList();
+        } finally {
+          isLoading.value = false;
+        }
+      }
+    };
+    onMounted(() => {
+      if (viewersListRef.value) {
+        viewersListRef.value.addEventListener("scroll", handleScroll);
+      }
+    });
+    onUnmounted(() => {
+      if (viewersListRef.value) {
+        viewersListRef.value.removeEventListener("scroll", handleScroll);
+      }
+    });
+    return (_ctx, _cache) => {
+      var _a, _b, _c, _d;
+      return openBlock(), createElementBlock("div", {
+        class: "viewers-panel",
+        style: normalizeStyle({ height: props.height, ...props.style })
+      }, [
+        createElementVNode("div", {
+          ref_key: "viewersListRef",
+          ref: viewersListRef,
+          class: "viewers-list"
+        }, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(unref(audienceList), (viewer, index) => {
+            return openBlock(), createElementBlock("div", {
+              key: viewer.userId,
+              class: "viewer-item",
+              onClick: ($event) => handleViewerClick(viewer, $event)
+            }, [
+              createElementVNode("span", {
+                class: normalizeClass(["rank", getRankClass(index + 1)])
+              }, toDisplayString(index < 10 ? index + 1 : "-"), 3),
+              createVNode(unref(Avatar), {
+                src: viewer.avatarUrl,
+                size: 26
+              }, null, 8, ["src"]),
+              renderSlot(_ctx.$slots, "audience-mark", { audience: viewer }, void 0, true),
+              createElementVNode("div", _hoisted_2, [
+                createElementVNode("span", _hoisted_3, toDisplayString(viewer.userName || viewer.userId), 1)
+              ])
+            ], 8, _hoisted_1);
+          }), 128)),
+          isLoading.value ? (openBlock(), createElementBlock("div", _hoisted_4, toDisplayString(unref(t)("Loading...")), 1)) : createCommentVNode("", true),
+          unref(audienceCount) >= 200 ? (openBlock(), createElementBlock("div", _hoisted_5, toDisplayString(unref(t)("Only show 200 viewers")), 1)) : createCommentVNode("", true),
+          unref(audienceList).length === 0 && !isLoading.value ? (openBlock(), createElementBlock("div", _hoisted_6, [
+            createElementVNode("p", null, toDisplayString(unref(t)("No audience yet")), 1)
+          ])) : createCommentVNode("", true)
+        ], 512),
+        unref(loginUserInfo) && unref(localLiveStatus) === unref(LiveStatus).Live ? (openBlock(), createElementBlock("div", _hoisted_7, [
+          _cache[1] || (_cache[1] = createElementVNode("span", { class: "rank" }, "-", -1)),
+          createVNode(unref(Avatar), {
+            src: unref(loginUserInfo).avatarUrl,
+            size: 26
+          }, null, 8, ["src"]),
+          createElementVNode("div", _hoisted_8, [
+            createElementVNode("span", _hoisted_9, toDisplayString(`${unref(loginUserInfo).userName || unref(loginUserInfo).userId} (${unref(t)("Me")})`), 1)
+          ])
+        ])) : createCommentVNode("", true),
+        showActionMenu.value ? (openBlock(), createBlock(UserActionMenu, {
+          key: 1,
+          "user-id": ((_a = selectedViewer.value) == null ? void 0 : _a.userId) || "",
+          "user-name": ((_b = selectedViewer.value) == null ? void 0 : _b.userName) || ((_c = selectedViewer.value) == null ? void 0 : _c.userId) || "",
+          "avatar-url": (_d = selectedViewer.value) == null ? void 0 : _d.avatarUrl,
+          style: normalizeStyle(actionMenuStyle.value),
+          "click-target": currentViewerTarget.value,
+          onClose: _cache[0] || (_cache[0] = ($event) => showActionMenu.value = false)
+        }, null, 8, ["user-id", "user-name", "avatar-url", "style", "click-target"])) : createCommentVNode("", true)
+      ], 4);
+    };
+  }
+});
+const LiveAudienceListPC = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-62951863"]]);
+export {
+  LiveAudienceListPC as default
+};

package/dist/components/LiveAudienceList/LiveAudienceList.vue.d.ts

@@ -0,0 +1,31 @@
+import { CSSProperties } from 'vue';
+import { AudienceInfo } from '../../types';
+
+declare function __VLS_template(): {
+    "audience-mark"?(_: {
+        audience: AudienceInfo;
+    }): any;
+};
+declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    height?: string;
+    style?: CSSProperties;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    height?: string;
+    style?: CSSProperties;
+}>>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};