tuikit-atomicx-vue3 0.1.0

package/src/components/VideoSettingPanel/VideoPreview.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="video-preview-container">
+    <div id="video-preview" class="video-preview"></div>
+    <div class="attention-info">
+      <span
+        v-if="!isCameraTesting && !isCameraTestLoading"
+        class="off-camera-info"
+        >{{ t('Off Camera') }}
+      </span>
+      <IconLoading size="36" v-if="isCameraTestLoading" class="loading" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, onUnmounted } from 'vue';
+import { IconLoading } from '@tencentcloud/uikit-base-component-vue3';
+import { useI18n } from '../../locales';
+import TUIRoomEngine from '@tencentcloud/tuiroom-engine-js';
+import useDeviceState from '../../states/DeviceState';
+
+const { t } = useI18n();
+const { isCameraTesting, isCameraTestLoading, startCameraDeviceTest, stopCameraDeviceTest } = useDeviceState();
+
+onMounted(async () => {
+  TUIRoomEngine.once('ready', () => {
+    startCameraDeviceTest({ view: 'video-preview' });
+  });
+});
+
+onUnmounted(async () => {
+  await stopCameraDeviceTest();
+});
+</script>
+
+<style lang="scss" scoped>
+.video-preview-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background-color: var(--base-color-black-1);
+  border-radius: 8px;
+
+  .video-preview {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  .attention-info {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+
+    .off-camera-info {
+      font-size: 22px;
+      font-weight: 400;
+      line-height: 34px;
+      color: var(--base-color-gray-7);
+    }
+
+    .loading {
+      animation: loading-rotate 2s linear infinite;
+    }
+  }
+}
+
+@keyframes loading-rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+</style>
+../../states/DeviceState

package/src/components/VideoSettingPanel/VideoProfile.vue

@@ -0,0 +1,54 @@
+<template>
+  <TUISelect
+    v-model="localVideoQuality"
+    placeholder="placeholder"
+    class="select"
+    :teleported="false"
+    :popper-append-to-body="false"
+  >
+    <TUIOption
+      v-for="(item, index) in videoQualityList"
+      :key="index"
+      :label="item.label"
+      :value="item.value"
+    />
+  </TUISelect>
+</template>
+
+<script setup lang="ts">
+import { watch, computed, ComputedRef } from 'vue';
+import { TUISelect, TUIOption } from '@tencentcloud/uikit-base-component-vue3';
+import { useI18n } from '../../locales';
+import { TUIVideoQuality } from '@tencentcloud/tuiroom-engine-js';
+import useDeviceState from '../../states/DeviceState';
+
+const { t } = useI18n();
+
+const videoQualityList: ComputedRef<
+  { label: string; value: TUIVideoQuality }[]
+> = computed(() => [
+  { label: t('Low Definition'), value: TUIVideoQuality.kVideoQuality_360p },
+  {
+    label: t('Standard Definition'),
+    value: TUIVideoQuality.kVideoQuality_540p,
+  },
+  { label: t('High Definition'), value: TUIVideoQuality.kVideoQuality_720p },
+  {
+    label: t('Super Definition'),
+    value: TUIVideoQuality.kVideoQuality_1080p,
+  },
+]);
+
+const { localVideoQuality, updateVideoQuality } = useDeviceState();
+
+watch(localVideoQuality, (val: TUIVideoQuality) => {
+  updateVideoQuality({ quality: val });
+});
+</script>
+
+<style lang="scss" scoped>
+.select {
+  width: 100%;
+  font-size: 14px;
+}
+</style>

package/src/components/VideoSettingPanel/i18n/en-US/index.ts

@@ -0,0 +1,7 @@
+export const resource = {
+  Camera: 'Camera',
+  'Select device': 'Select device',
+  Preview: 'Preview',
+  'Video profile': 'Video profile',
+  Resolution: 'Resolution',
+};

package/src/components/VideoSettingPanel/i18n/index.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/src/components/VideoSettingPanel/i18n/zh-CN/index.ts

@@ -0,0 +1,7 @@
+export const resource = {
+  Camera: '摄像头',
+  'Select device': '选择设备',
+  Preview: '预览',
+  'Video profile': '视频设置',
+  Resolution: '分辨率',
+};

package/src/components/VideoSettingPanel/index.ts

@@ -0,0 +1,8 @@
+import VideoSettingPanel from './index.vue';
+import { addI18n } from '../../i18n';
+import { enResource, zhResource } from './i18n';
+
+addI18n('en-US', { translation: enResource });
+addI18n('zh-CN', { translation: zhResource });
+
+export { VideoSettingPanel };

package/src/components/VideoSettingPanel/index.vue

@@ -0,0 +1,107 @@
+<template>
+  <div class="video-setting-panel">
+    <template v-if="cameraSelectVisible">
+      <div class="section">
+        <div class="section-title">{{ t('Camera') }}</div>
+        <div class="row">
+          <span class="label">{{ t('Select device') }}</span>
+          <camera-select />
+        </div>
+      </div>
+
+      <div class="divider"></div>
+    </template>
+
+    <template v-if="videoPreviewVisible">
+      <div class="section">
+        <div class="section-title">{{ t('Preview') }}</div>
+        <div class="preview-container">
+          <video-preview class="video-preview" />
+        </div>
+      </div>
+
+      <div class="divider"></div>
+    </template>
+
+    <template v-if="videoProfileVisible">
+      <div class="section">
+        <div class="section-title">{{ t('Video profile') }}</div>
+        <div class="row">
+          <span class="label">{{ t('Resolution') }}</span>
+          <video-profile />
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import CameraSelect from './CameraSelect.vue';
+import VideoProfile from './VideoProfile.vue';
+import VideoPreview from './VideoPreview.vue';
+import { defineProps } from 'vue';
+import { useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+
+const { t } = useUIKit();
+
+const props = defineProps({
+  cameraSelectVisible: {
+    type: Boolean,
+    default: true,
+  },
+  videoPreviewVisible: {
+    type: Boolean,
+    default: true,
+  },
+  videoProfileVisible: {
+    type: Boolean,
+    default: true,
+  },
+});
+</script>
+
+<style scoped lang="scss">
+.video-setting-panel {
+  color: var(--tui-color-text-primary);
+
+  .section {
+    margin-bottom: 32px;
+
+    .section-title {
+      font-size: 18px;
+      font-weight: bold;
+      margin-bottom: 16px;
+    }
+
+    .row {
+      display: flex;
+      align-items: center;
+      margin-bottom: 16px;
+
+      .label {
+        width: 96px;
+      }
+    }
+
+    .preview-container {
+      margin-top: 8px;
+
+      .video-preview {
+        position: relative;
+        width: 100%;
+        height: 0;
+        padding-top: calc(100% * 9 / 16);
+        overflow: hidden;
+        border-radius: 8px;
+        background: #222;
+      }
+    }
+  }
+
+  .divider {
+    height: 1px;
+    background: var(--uikit-color-gray-4);
+    margin: 32px 0;
+  }
+}
+</style>

package/src/constants/emoji.ts

@@ -0,0 +1,71 @@
+interface IEmojiUrlMap {
+  [key: string]: string;
+}
+const emojiBaseUrl = 'https://web.sdk.qcloud.com/im/assets/emoji-plugin/';
+
+const emojiUrlMap: IEmojiUrlMap = {
+  '[TUIEmoji_Expect]': 'emoji_0@2x.png',
+  '[TUIEmoji_Blink]': 'emoji_1@2x.png',
+  '[TUIEmoji_Guffaw]': 'emoji_2@2x.png',
+  '[TUIEmoji_KindSmile]': 'emoji_3@2x.png',
+  '[TUIEmoji_Haha]': 'emoji_4@2x.png',
+  '[TUIEmoji_Cheerful]': 'emoji_5@2x.png',
+  '[TUIEmoji_Smile]': 'emoji_6@2x.png',
+  '[TUIEmoji_Sorrow]': 'emoji_7@2x.png',
+  '[TUIEmoji_Speechless]': 'emoji_8@2x.png',
+  '[TUIEmoji_Amazed]': 'emoji_9@2x.png',
+  '[TUIEmoji_Complacent]': 'emoji_10@2x.png',
+  '[TUIEmoji_Lustful]': 'emoji_11@2x.png',
+  '[TUIEmoji_Stareyes]': 'emoji_12@2x.png',
+  '[TUIEmoji_Giggle]': 'emoji_13@2x.png',
+  '[TUIEmoji_Daemon]': 'emoji_14@2x.png',
+  '[TUIEmoji_Rage]': 'emoji_15@2x.png',
+  '[TUIEmoji_Yawn]': 'emoji_16@2x.png',
+  '[TUIEmoji_TearsLaugh]': 'emoji_17@2x.png',
+  '[TUIEmoji_Silly]': 'emoji_18@2x.png',
+  '[TUIEmoji_Wail]': 'emoji_19@2x.png',
+  '[TUIEmoji_Kiss]': 'emoji_20@2x.png',
+  '[TUIEmoji_Trapped]': 'emoji_21@2x.png',
+  '[TUIEmoji_Fear]': 'emoji_22@2x.png',
+  '[TUIEmoji_BareTeeth]': 'emoji_23@2x.png',
+  '[TUIEmoji_FlareUp]': 'emoji_24@2x.png',
+  '[TUIEmoji_Tact]': 'emoji_25@2x.png',
+  '[TUIEmoji_Shit]': 'emoji_26@2x.png',
+  '[TUIEmoji_ShutUp]': 'emoji_27@2x.png',
+  '[TUIEmoji_Sigh]': 'emoji_28@2x.png',
+  '[TUIEmoji_Hehe]': 'emoji_29@2x.png',
+  '[TUIEmoji_Silent]': 'emoji_30@2x.png',
+  '[TUIEmoji_Skull]': 'emoji_31@2x.png',
+  '[TUIEmoji_Mask]': 'emoji_32@2x.png',
+  '[TUIEmoji_Beer]': 'emoji_33@2x.png',
+  '[TUIEmoji_Cake]': 'emoji_34@2x.png',
+  '[TUIEmoji_RedPacket]': 'emoji_35@2x.png',
+  '[TUIEmoji_Bombs]': 'emoji_36@2x.png',
+  '[TUIEmoji_Ai]': 'emoji_37@2x.png',
+  '[TUIEmoji_Celebrate]': 'emoji_38@2x.png',
+  '[TUIEmoji_Bless]': 'emoji_39@2x.png',
+  '[TUIEmoji_Flower]': 'emoji_40@2x.png',
+  '[TUIEmoji_Watermelon]': 'emoji_41@2x.png',
+  '[TUIEmoji_Cow]': 'emoji_42@2x.png',
+  '[TUIEmoji_Fool]': 'emoji_43@2x.png',
+  '[TUIEmoji_Surprised]': 'emoji_44@2x.png',
+  '[TUIEmoji_Askance]': 'emoji_45@2x.png',
+  '[TUIEmoji_Monster]': 'emoji_46@2x.png',
+  '[TUIEmoji_Pig]': 'emoji_47@2x.png',
+  '[TUIEmoji_Coffee]': 'emoji_48@2x.png',
+  '[TUIEmoji_Ok]': 'emoji_49@2x.png',
+  '[TUIEmoji_Heart]': 'emoji_50@2x.png',
+  '[TUIEmoji_Sun]': 'emoji_51@2x.png',
+  '[TUIEmoji_Moon]': 'emoji_52@2x.png',
+  '[TUIEmoji_Star]': 'emoji_53@2x.png',
+  '[TUIEmoji_Rich]': 'emoji_54@2x.png',
+  '[TUIEmoji_Fortune]': 'emoji_55@2x.png',
+  '[TUIEmoji_857]': 'emoji_56@2x.png',
+  '[TUIEmoji_666]': 'emoji_57@2x.png',
+  '[TUIEmoji_Prohibit]': 'emoji_58@2x.png',
+  '[TUIEmoji_Convinced]': 'emoji_59@2x.png',
+  '[TUIEmoji_Knife]': 'emoji_60@2x.png',
+  '[TUIEmoji_Like]': 'emoji_61@2x.png',
+};
+
+export { emojiUrlMap, emojiBaseUrl };

package/src/directives/vClickOutside.ts

@@ -0,0 +1,30 @@
+const nodeMap = new Map();
+
+const vClickOutside = {
+  mounted(el: HTMLElement, binding: any) {
+    const listenerFunction = (event: any) => {
+      if (el.contains(event.target)) {
+        return;
+      }
+      if (binding.value && typeof binding.value === 'function') {
+        binding.value(event);
+      }
+    };
+    if (!nodeMap.has(el)) {
+      nodeMap.set(el, []);
+    }
+    const nodeCallbackList = nodeMap.get(el);
+    nodeCallbackList.push(listenerFunction);
+    document.addEventListener('click', listenerFunction);
+    document.addEventListener('touchend', listenerFunction);
+  },
+  unmounted(el: HTMLElement) {
+    const nodeCallbackList = nodeMap.get(el);
+    nodeCallbackList.forEach((callback: any) => {
+      document.removeEventListener('click', callback);
+      document.addEventListener('touchend', callback);
+    });
+  },
+};
+
+export default vClickOutside;

package/src/directives/vDblTouch.ts

@@ -0,0 +1,67 @@
+const touchEventMap = new Map();
+const clickEventMap = new Map();
+
+const TIME_OUT = 300;
+
+class DblTouch {
+  public dom: HTMLElement;
+  public callback: (event?: Event | TouchEvent) => void;
+
+  constructor(el: HTMLElement, binding: any) {
+    this.dom = el;
+    this.callback = binding.value;
+
+    // Compatible iphone 11 chrome browser tap twice trigger once touchend and twice click event problem
+    el?.addEventListener('click', (event: Event) => {
+      if (binding.modifiers.stop) {
+        event.stopPropagation();
+      }
+      this.click(event);
+    });
+
+    el?.addEventListener('touchend', (event: TouchEvent) => {
+      if (binding.modifiers.stop) {
+        event.stopPropagation();
+      }
+      this.touchend(event);
+    });
+  }
+
+  executeCallback(event: Event | TouchEvent) {
+    clickEventMap.delete(this.dom);
+    touchEventMap.delete(this.dom);
+    this.callback && this.callback(event);
+  }
+
+  click(event: Event) {
+    const lastEvent = clickEventMap.get(this.dom);
+    if (lastEvent) {
+      this.executeCallback(event);
+    } else {
+      clickEventMap.set(this.dom, event);
+      setTimeout(() => {
+        clickEventMap.delete(this.dom);
+      }, TIME_OUT);
+    }
+  }
+
+  touchend(event: TouchEvent) {
+    const lastEvent = touchEventMap.get(this.dom);
+    if (lastEvent) {
+      this.executeCallback(event);
+    } else {
+      touchEventMap.set(this.dom, event);
+      setTimeout(() => {
+        touchEventMap.delete(this.dom);
+      }, TIME_OUT);
+    }
+  }
+}
+
+const vDblTouch = {
+  mounted(el: HTMLElement, binding: any) {
+    return new DblTouch(el, binding);
+  },
+};
+
+export default vDblTouch;

package/src/directives/vTap.ts

@@ -0,0 +1,86 @@
+const eventMap = new Map();
+
+const TIME_OUT = 300;
+
+class VueTouch {
+  public dom: HTMLElement;
+  public callback: (event: TouchEvent) => void;
+  public isMove: boolean;
+  public isInOnceTouch: boolean;
+  public isLazyTap: boolean;
+
+  constructor(el: HTMLElement, binding: any) {
+    this.dom = el;
+    this.callback = binding.value;
+    this.isLazyTap = binding.modifiers.lazy;
+
+    this.isMove = false;
+    this.isInOnceTouch = false;
+
+    el?.addEventListener('touchstart', (event: TouchEvent) => {
+      if (binding.modifiers.stop) {
+        event.stopPropagation();
+      }
+      this.touchstart(event);
+    });
+
+    el?.addEventListener('touchmove', (event: TouchEvent) => {
+      if (binding.modifiers.stop) {
+        event.stopPropagation();
+      }
+      this.touchmove();
+    });
+
+    el?.addEventListener('touchend', (event: TouchEvent) => {
+      if (binding.modifiers.stop) {
+        event.stopPropagation();
+      }
+      this.touchend(event);
+    });
+  }
+
+  touchstart(event: TouchEvent) {
+    if (event.touches.length > 1 || this.isInOnceTouch) {
+      return;
+    }
+    this.isMove = false;
+    this.isInOnceTouch = true;
+  }
+
+  touchmove() {
+    if (!this.isInOnceTouch) {
+      return;
+    }
+    this.isMove = true;
+    this.isInOnceTouch = false;
+  }
+
+  touchend(event: TouchEvent) {
+    if (this.isMove || !this.isInOnceTouch) {
+      return;
+    }
+    this.isInOnceTouch = false;
+    if (this.isLazyTap) {
+      if (eventMap.get(this.dom)) {
+        clearTimeout(eventMap.get(this.dom));
+        eventMap.delete(this.dom);
+        return;
+      }
+      const timer = setTimeout(() => {
+        this.callback(event);
+        eventMap.delete(this.dom);
+      }, TIME_OUT);
+      eventMap.set(this.dom, timer);
+    } else {
+      this.callback(event);
+    }
+  }
+}
+
+const vTap = {
+  mounted(el: HTMLElement, binding: any) {
+    return new VueTouch(el, binding);
+  },
+};
+
+export default vTap;