tuikit-atomicx-vue3 0.1.0 → 3.3.0-beta.3

package/dist/TextEditor.vue_vue_type_script_setup_true_lang-yXW1iVZ1.js

@@ -1,98 +0,0 @@
-import { defineComponent, ref, computed, onMounted, onUnmounted, watch, createElementBlock, openBlock, normalizeClass, unref, createElementVNode, renderSlot } from "vue";
-import { useUIKit } from "@tencentcloud/uikit-base-component-vue3";
-import { useConversationListState } from "./states/ConversationListState/ConversationListState.js";
-import { useMessageInputState } from "./states/MessageInputState/MessageInputState.js";
-import { createEditor } from "./components/MessageInput/TextEditor/EditorCore.js";
-const disabled = "_disabled_d6wpx_11";
-const editor = "_editor_d6wpx_21";
-const styles = {
-  "input-wrapper": "_input-wrapper_d6wpx_1",
-  disabled,
-  "input-prefix": "_input-prefix_d6wpx_15",
-  "input-suffix": "_input-suffix_d6wpx_16",
-  editor
-};
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "TextEditor",
-  props: {
-    autoFocus: { type: Boolean, default: true },
-    disabled: { type: Boolean, default: false },
-    placeholder: { default: "" }
-  },
-  setup(__props) {
-    const props = __props;
-    const { t } = useUIKit();
-    const { currentConversationID } = useConversationListState();
-    const { updateRawValue, sendMessage, setEditorInstance, setContent } = useMessageInputState();
-    const editorRef = ref(null);
-    const isFocused = ref(props.autoFocus);
-    const placeholderText = computed(() => props.disabled ? "" : props.placeholder || t("TUIChat.Enter a message"));
-    let editorInstance = null;
-    onMounted(() => {
-      const element = editorRef.value;
-      if (!element) {
-        return;
-      }
-      if (!element.dataset.editorCreated) {
-        editorInstance = createEditor({
-          element,
-          placeholder: placeholderText.value,
-          autoFocus: props.autoFocus,
-          disabled: props.disabled,
-          onUpdate: (content) => {
-            updateRawValue(content);
-          },
-          onEnter: () => {
-            sendMessage();
-            setContent("");
-          },
-          onFocus: () => {
-            isFocused.value = true;
-          },
-          onBlur: () => {
-            isFocused.value = false;
-          }
-        });
-        element.dataset.editorCreated = "true";
-        setEditorInstance(editorInstance);
-      }
-    });
-    onUnmounted(() => {
-      const element = editorRef.value;
-      if (editorInstance && element) {
-        editorInstance.destroy();
-        element.removeAttribute("data-editor-created");
-        setEditorInstance(null);
-      }
-    });
-    watch(currentConversationID, (newID, oldID) => {
-      if (newID !== oldID) {
-        setContent("");
-      }
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        class: normalizeClass([unref(styles)["input-wrapper"], props.disabled && unref(styles).disabled])
-      }, [
-        createElementVNode("div", {
-          class: normalizeClass(unref(styles)["input-prefix"])
-        }, [
-          renderSlot(_ctx.$slots, "prefix")
-        ], 2),
-        createElementVNode("div", {
-          ref_key: "editorRef",
-          ref: editorRef,
-          class: normalizeClass(unref(styles)["editor"])
-        }, null, 2),
-        createElementVNode("div", {
-          class: normalizeClass(unref(styles)["input-suffix"])
-        }, [
-          renderSlot(_ctx.$slots, "suffix")
-        ], 2)
-      ], 2);
-    };
-  }
-});
-export {
-  _sfc_main as _
-};

package/dist/components/LiveStreamView/DefaultStreamViewUI.js

@@ -1,90 +0,0 @@
-import { defineComponent, computed, createElementBlock, openBlock, createCommentVNode, Fragment, createElementVNode, createVNode, unref, toDisplayString } from "vue";
-import { DeviceStatus } from "../../types/device.js";
-import { CoGuestStatus } from "../../types/coGuest.js";
-import { useCoGuestState } from "../../states/CoGuestState.js";
-import Avatar from "../Avatar/Avatar.js";
-import AudioIcon from "../../baseComp/AudioIcon.js";
-import { useLiveSeatState } from "../../states/LiveSeatState/index.js";
-import { useUIKit } from "@tencentcloud/uikit-base-component-vue3";
-import { _ as _export_sfc } from "../../_plugin-vue_export-helper-1tPrXgE0.js";
-const _hoisted_1 = { class: "stream-cover" };
-const _hoisted_2 = {
-  key: 0,
-  class: "no-video-container"
-};
-const _hoisted_3 = { class: "user-details" };
-const _hoisted_4 = { class: "username" };
-const _hoisted_5 = {
-  key: 1,
-  class: "empty-position"
-};
-const _hoisted_6 = {
-  key: 0,
-  class: "text"
-};
-const _hoisted_7 = {
-  key: 1,
-  class: "text"
-};
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "DefaultStreamViewUI",
-  props: {
-    userInfo: { default: void 0 },
-    containerStyle: { default: void 0 }
-  },
-  setup(__props) {
-    const { t } = useUIKit();
-    const props = __props;
-    const { localCoGuestStatus } = useCoGuestState();
-    const { speakingUsers } = useLiveSeatState();
-    const avatarSize = computed(() => {
-      var _a, _b;
-      const radio = 4.9;
-      if (parseInt(((_a = props.containerStyle) == null ? void 0 : _a.width) || "0") / radio > 80) {
-        return Math.ceil(parseInt(((_b = props.containerStyle) == null ? void 0 : _b.width) || "0") / radio);
-      }
-      return 80;
-    });
-    const displayName = computed(() => {
-      var _a, _b;
-      return ((_a = props.userInfo) == null ? void 0 : _a.userName) || ((_b = props.userInfo) == null ? void 0 : _b.userId);
-    });
-    const isAudioAvailable = computed(() => {
-      var _a;
-      return ((_a = props.userInfo) == null ? void 0 : _a.microphoneStatus) === DeviceStatus.On;
-    });
-    const isVideoAvailable = computed(() => {
-      var _a;
-      return ((_a = props.userInfo) == null ? void 0 : _a.cameraStatus) === DeviceStatus.On;
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1, [
-        _ctx.userInfo.userId ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-          !isVideoAvailable.value ? (openBlock(), createElementBlock("div", _hoisted_2, [
-            createVNode(unref(Avatar), {
-              class: "avatar",
-              size: avatarSize.value,
-              src: _ctx.userInfo.avatarUrl,
-              alt: displayName.value
-            }, null, 8, ["size", "src", "alt"])
-          ])) : createCommentVNode("", true),
-          createElementVNode("div", _hoisted_3, [
-            createVNode(AudioIcon, {
-              isMuted: !isAudioAvailable.value,
-              audioVolume: unref(speakingUsers).get(_ctx.userInfo.userId) || 0,
-              size: "small"
-            }, null, 8, ["isMuted", "audioVolume"]),
-            createElementVNode("div", _hoisted_4, toDisplayString(displayName.value), 1)
-          ])
-        ], 64)) : createCommentVNode("", true),
-        !_ctx.userInfo.userId ? (openBlock(), createElementBlock("div", _hoisted_5, [
-          unref(localCoGuestStatus) === unref(CoGuestStatus).Connected ? (openBlock(), createElementBlock("div", _hoisted_6, toDisplayString(unref(t)("Waiting for connection")), 1)) : (openBlock(), createElementBlock("div", _hoisted_7, toDisplayString(unref(t)("Waiting for connection")), 1))
-        ])) : createCommentVNode("", true)
-      ]);
-    };
-  }
-});
-const DefaultStreamViewUI = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-4b3410c3"]]);
-export {
-  DefaultStreamViewUI as default
-};

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

@@ -1,4 +0,0 @@
-import { default as LiveStreamView } from './index.vue';
-import { default as DefaultStreamViewUI } from './DefaultStreamViewUI.vue';
-
-export { LiveStreamView, DefaultStreamViewUI };

package/dist/index-BlyS4ObG.js

@@ -1,50 +0,0 @@
-import { defineComponent, createElementBlock, openBlock, normalizeClass, unref, createBlock, createCommentVNode } from "vue";
-import { IconCameraOn, IconCameraOff, IconUnSupport } from "@tencentcloud/uikit-base-component-vue3";
-import { useDeviceState } from "./states/DeviceState.js";
-import { DeviceStatus, DeviceError } from "./types/device.js";
-import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.js";
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "index",
-  setup(__props) {
-    const {
-      cameraStatus,
-      hasPublishVideoPermission,
-      cameraLastError,
-      closeLocalCamera,
-      openLocalCamera
-    } = useDeviceState();
-    async function handleClick() {
-      if (!hasPublishVideoPermission.value) {
-        return;
-      }
-      if (cameraStatus.value === DeviceStatus.On) {
-        await closeLocalCamera();
-      } else {
-        await openLocalCamera();
-      }
-    }
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        class: normalizeClass(["camera-button", { "disabled": !unref(hasPublishVideoPermission) }]),
-        onClick: handleClick
-      }, [
-        unref(cameraStatus) === unref(DeviceStatus).On ? (openBlock(), createBlock(unref(IconCameraOn), {
-          key: 0,
-          size: "24"
-        })) : (openBlock(), createBlock(unref(IconCameraOff), {
-          key: 1,
-          size: "24"
-        })),
-        unref(cameraLastError) !== unref(DeviceError).NoError ? (openBlock(), createBlock(unref(IconUnSupport), {
-          key: 2,
-          class: "unsupport-icon",
-          size: "14"
-        })) : createCommentVNode("", true)
-      ], 2);
-    };
-  }
-});
-const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-cc8bbaca"]]);
-export {
-  index as i
-};

package/dist/index-NFANFVi5.js

@@ -1,58 +0,0 @@
-import { defineComponent, computed, createElementBlock, openBlock, createElementVNode, normalizeClass, unref, createVNode, createBlock, createCommentVNode } from "vue";
-import { IconUnSupport } from "@tencentcloud/uikit-base-component-vue3";
-import { useDeviceState } from "./states/DeviceState.js";
-import { DeviceStatus, DeviceError } from "./types/device.js";
-import AudioIcon from "./components/MicButton/AudioIcon.js";
-import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.js";
-const _hoisted_1 = { class: "mic-button-container" };
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "index",
-  setup(__props) {
-    const {
-      audioVolume,
-      hasPublishAudioPermission,
-      microphoneStatus,
-      microphoneLastError,
-      muteLocalAudio,
-      openLocalMicrophone,
-      unmuteLocalAudio
-    } = useDeviceState();
-    const isMuted = computed(() => {
-      return microphoneStatus.value !== DeviceStatus.On;
-    });
-    async function handleClick() {
-      if (!hasPublishAudioPermission.value) {
-        return;
-      }
-      if (microphoneStatus.value === DeviceStatus.On) {
-        await muteLocalAudio();
-      } else {
-        await openLocalMicrophone();
-        await unmuteLocalAudio();
-      }
-    }
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1, [
-        createElementVNode("div", {
-          class: normalizeClass(["mic-button", { "disabled": !unref(hasPublishAudioPermission) }]),
-          onClick: handleClick
-        }, [
-          createVNode(AudioIcon, {
-            "audio-volume": unref(audioVolume),
-            "is-muted": isMuted.value,
-            "is-disabled": !unref(hasPublishAudioPermission)
-          }, null, 8, ["audio-volume", "is-muted", "is-disabled"]),
-          unref(microphoneLastError) !== unref(DeviceError).NoError ? (openBlock(), createBlock(unref(IconUnSupport), {
-            key: 0,
-            class: "unsupport-icon",
-            size: "14"
-          })) : createCommentVNode("", true)
-        ], 2)
-      ]);
-    };
-  }
-});
-const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-672ec588"]]);
-export {
-  index as i
-};

package/src/components/LiveStreamView/DefaultStreamViewUI.vue

@@ -1,145 +0,0 @@
-<template>
-  <div class="stream-cover">
-    <template v-if="userInfo.userId">
-      <div class="no-video-container" v-if="!isVideoAvailable">
-        <Avatar class="avatar" :size="avatarSize" :src="userInfo.avatarUrl" :alt="displayName" />
-      </div>
-      <div class="user-details">
-        <AudioIcon
-          :isMuted="!isAudioAvailable"
-          :audioVolume="speakingUsers.get(userInfo.userId) || 0"
-          size="small"
-        />
-        <div class="username">{{ displayName }}</div>
-      </div>
-    </template>
-    <div v-if="!userInfo.userId" class="empty-position">
-      <div class="text" v-if="localCoGuestStatus === CoGuestStatus.Connected">{{ t('Waiting for connection') }}</div>
-      <div class="text" v-else>{{ t('Waiting for connection') }}</div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue';
-import { DeviceStatus, SeatUserInfo, CoGuestStatus } from '../../types';
-import { useCoGuestState } from '../../states/CoGuestState';
-import { Avatar } from '../Avatar';
-import AudioIcon from '../../baseComp/AudioIcon.vue';
-import { useLiveSeatState } from '../../states/LiveSeatState';
-import { useUIKit } from '@tencentcloud/uikit-base-component-vue3';
-
-const { t } = useUIKit();
-const props = withDefaults(
-  defineProps<{
-    userInfo?: SeatUserInfo;
-    containerStyle?: {
-      width: string;
-      height: string;
-      top: string;
-      left: string;
-    };
-  }>(),
-  {
-    containerStyle: undefined,
-    userInfo: undefined,
-  }
-);
-
-const { localCoGuestStatus } = useCoGuestState();
-const { speakingUsers } = useLiveSeatState();
-
-const avatarSize = computed(() => {
-  // The avatar size for background mixing is region.width / 5
-  const radio = 4.9;
-  if (parseInt(props.containerStyle?.width || '0') / radio > 80) {
-    return Math.ceil(parseInt(props.containerStyle?.width || '0') / radio);
-  }
-  return 80;
-});
-
-const displayName = computed(() => {
-  return props.userInfo?.userName || props.userInfo?.userId;
-});
-
-const isAudioAvailable = computed(() => {
-  return props.userInfo?.microphoneStatus === DeviceStatus.On;
-});
-
-const isVideoAvailable = computed(() => {
-  return props.userInfo?.cameraStatus === DeviceStatus.On;
-});
-</script>
-
-<style lang="scss" scoped>
-.stream-cover {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: #fff;
-  position: absolute;
-  top: 0;
-  left: 0;
-  pointer-events: none;
-  border: 1px solid var(--uikit-color-black-6);
-
-  .no-video-container {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 100%;
-
-    .avatar {
-      border: 2px solid rgba(255, 255, 255, 0.6);
-    }
-  }
-
-  .user-details {
-    text-align: center;
-    position: absolute;
-    bottom: 6px;
-    left: 6px;
-    display: flex;
-    background-color: rgba(34, 38, 46, 0.40);
-    padding: 2px 6px;
-    border-radius: 20px;
-    max-width: 80%;
-    box-sizing: border-box;
-
-    .username {
-      font-size: 16px;
-      font-weight: 500;
-      margin-left: 4px;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-  }
-
-  .empty-position {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 100%;
-    background: var(--uikit-color-gray-2);
-    color: #fff;
-    font-weight: bold;
-    pointer-events: auto;
-
-    .number {
-      font-size: 18px;
-      margin-bottom: 10px;
-    }
-
-    .text {
-      font-size: 14px;
-    }
-  }
-}
-</style>