tuikit-atomicx-vue3 0.1.0

package/dist/components/StreamMixer/LocalMixer/MixerControl.js

@@ -0,0 +1,132 @@
+import { defineComponent, computed, createElementBlock, openBlock, Fragment, renderList, withModifiers, normalizeStyle, normalizeClass, createElementVNode, createBlock, resolveDynamicComponent, toDisplayString } from "vue";
+import CameraMirror from "../icons/CameraMirror.js";
+import Delete from "../icons/Delete.js";
+import Rotation from "../icons/Rotation.js";
+import Up from "../icons/Up.js";
+import Down from "../icons/Down.js";
+import { useVideoMixerState } from "../../../states/VideoMixerState.js";
+import { TRTCVideoMirrorType, TRTCVideoRotation } from "@tencentcloud/tuiroom-engine-js";
+import { useUIKit } from "@tencentcloud/uikit-base-component-vue3";
+import { _ as _export_sfc } from "../../../_plugin-vue_export-helper-1tPrXgE0.js";
+const _hoisted_1 = ["onClick"];
+const _hoisted_2 = { class: "mixer-control-item-icon" };
+const _hoisted_3 = { class: "mixer-control-item-name" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "MixerControl",
+  setup(__props) {
+    const { activeMediaSource, mediaSourceList, updateMediaSource, removeMediaSource } = useVideoMixerState();
+    const { t } = useUIKit();
+    function handleMouseDown(event) {
+      event.stopPropagation();
+    }
+    const orderMediaSourceList = computed(() => {
+      return [...mediaSourceList.value].sort((a, b) => a.layout.zOrder - b.layout.zOrder);
+    });
+    const isActiveMediaSourceTop = computed(() => activeMediaSource.value.id === orderMediaSourceList.value[0].id);
+    const isActiveMediaSourceBottom = computed(() => activeMediaSource.value.id === orderMediaSourceList.value[orderMediaSourceList.value.length - 1].id);
+    const controlList = computed(() => [
+      {
+        name: "mirror",
+        text: t("Mirror"),
+        icon: CameraMirror,
+        onClick: () => {
+          const currentMirror = activeMediaSource.value.layout.mirror;
+          updateMediaSource(activeMediaSource.value, {
+            layout: {
+              mirror: currentMirror === TRTCVideoMirrorType.TRTCVideoMirrorType_Enable ? TRTCVideoMirrorType.TRTCVideoMirrorType_Disable : TRTCVideoMirrorType.TRTCVideoMirrorType_Enable
+            }
+          });
+        }
+      },
+      {
+        name: "rotate",
+        text: t("Rotate"),
+        icon: Rotation,
+        onClick: () => {
+          const currentRotation = activeMediaSource.value.layout.rotation || TRTCVideoRotation.TRTCVideoRotation0;
+          const rotationObj = {
+            [TRTCVideoRotation.TRTCVideoRotation0]: TRTCVideoRotation.TRTCVideoRotation90,
+            [TRTCVideoRotation.TRTCVideoRotation90]: TRTCVideoRotation.TRTCVideoRotation180,
+            [TRTCVideoRotation.TRTCVideoRotation180]: TRTCVideoRotation.TRTCVideoRotation270,
+            [TRTCVideoRotation.TRTCVideoRotation270]: TRTCVideoRotation.TRTCVideoRotation0
+          };
+          const rotation = rotationObj[currentRotation];
+          updateMediaSource(activeMediaSource.value, { layout: { rotation } });
+        }
+      },
+      {
+        name: "up",
+        text: t("Move Up"),
+        icon: Up,
+        disable: isActiveMediaSourceBottom.value,
+        onClick: async () => {
+          const currentIndex = orderMediaSourceList.value.findIndex((item) => item.id === activeMediaSource.value.id);
+          const nextMediaSource = orderMediaSourceList.value[currentIndex + 1];
+          const activeZOrder = activeMediaSource.value.layout.zOrder;
+          const nextZOrder = nextMediaSource == null ? void 0 : nextMediaSource.layout.zOrder;
+          if (nextMediaSource) {
+            await updateMediaSource(activeMediaSource.value, { layout: { zOrder: 999 } });
+            await updateMediaSource(nextMediaSource, { layout: { zOrder: activeZOrder } });
+            await updateMediaSource(activeMediaSource.value, { layout: { zOrder: nextZOrder } });
+          } else {
+            console.error(t("Already at top"));
+          }
+        }
+      },
+      {
+        name: "down",
+        text: t("Move Down"),
+        icon: Down,
+        disable: isActiveMediaSourceTop.value,
+        onClick: async () => {
+          const currentIndex = orderMediaSourceList.value.findIndex((item) => item.id === activeMediaSource.value.id);
+          const nextMediaSource = orderMediaSourceList.value[currentIndex - 1];
+          const activeZOrder = activeMediaSource.value.layout.zOrder;
+          const nextZOrder = nextMediaSource == null ? void 0 : nextMediaSource.layout.zOrder;
+          if (nextMediaSource) {
+            await updateMediaSource(activeMediaSource.value, { layout: { zOrder: 0 } });
+            await updateMediaSource(nextMediaSource, { layout: { zOrder: activeZOrder } });
+            await updateMediaSource(activeMediaSource.value, { layout: { zOrder: nextZOrder } });
+          } else {
+            console.error(t("Already at bottom"));
+          }
+        }
+      },
+      {
+        name: "delete",
+        text: t("Delete"),
+        icon: Delete,
+        style: "color: red",
+        onClick: () => {
+          removeMediaSource(activeMediaSource.value);
+        }
+      }
+    ]);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: "mixer-control",
+        onMousedown: handleMouseDown
+      }, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(controlList.value, (control) => {
+          return openBlock(), createElementBlock("div", {
+            class: normalizeClass(["mixer-control-item", { "disable": control.disable }]),
+            key: control.name,
+            style: normalizeStyle(control.style),
+            onClick: withModifiers(control.onClick, ["stop"])
+          }, [
+            createElementVNode("div", _hoisted_2, [
+              (openBlock(), createBlock(resolveDynamicComponent(control.icon), {
+                style: normalizeStyle([{ "width": "100%", "height": "100%" }, control.style])
+              }, null, 8, ["style"]))
+            ]),
+            createElementVNode("span", _hoisted_3, toDisplayString(control.text), 1)
+          ], 14, _hoisted_1);
+        }), 128))
+      ], 32);
+    };
+  }
+});
+const MixerControl = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-f2286717"]]);
+export {
+  MixerControl as default
+};

package/dist/components/StreamMixer/LocalMixer/MixerControl.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/StreamMixer/LocalMixer/index.js

@@ -0,0 +1,163 @@
+import { defineComponent, computed, ref, watch, onMounted, onUnmounted, createElementBlock, openBlock, createElementVNode, createCommentVNode, unref, normalizeStyle, createVNode, toDisplayString } from "vue";
+import { useRoomEngine } from "../../../hooks/useRoomEngine.js";
+import { useVideoMixerState } from "../../../states/VideoMixerState.js";
+import TUIRoomEngine, { TRTCVideoResolutionMode, TRTCVideoRotation, TUIVideoQuality } from "@tencentcloud/tuiroom-engine-js";
+import { useLiveState } from "../../../states/LiveState/index.js";
+import { LiveOrientation, LiveStatus } from "../../../types/live.js";
+import MixerControl from "./MixerControl.js";
+import { useUIKit } from "@tencentcloud/uikit-base-component-vue3";
+import { _ as _export_sfc } from "../../../_plugin-vue_export-helper-1tPrXgE0.js";
+const _hoisted_1 = {
+  key: 1,
+  class: "local-mixer-placeholder"
+};
+const _hoisted_2 = { class: "placeholder-text" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "index",
+  setup(__props) {
+    const { t } = useUIKit();
+    const { currentLive } = useLiveState();
+    const { publishVideoQuality, activeMediaSource, enableLocalVideoMixer, mediaSourceList } = useVideoMixerState();
+    enableLocalVideoMixer();
+    const currentLiveOrientation = computed(() => {
+      var _a, _b;
+      if (currentLive.value && ((_a = currentLive.value) == null ? void 0 : _a.layoutTemplate) >= 200 && ((_b = currentLive.value) == null ? void 0 : _b.layoutTemplate) <= 599) {
+        return LiveOrientation.Landscape;
+      }
+      return LiveOrientation.Portrait;
+    });
+    const { localLiveStatus } = useLiveState();
+    const roomEngine = useRoomEngine();
+    const localMixerRef = ref();
+    function getCanvasSize(videoResolution, resMode) {
+      const sizeMap = {
+        [TUIVideoQuality.kVideoQuality_360p]: { width: 640, height: 360 },
+        [TUIVideoQuality.kVideoQuality_540p]: { width: 960, height: 540 },
+        [TUIVideoQuality.kVideoQuality_720p]: { width: 1280, height: 720 },
+        [TUIVideoQuality.kVideoQuality_1080p]: { width: 1920, height: 1080 }
+      };
+      let { width, height } = sizeMap[videoResolution];
+      if (resMode === TRTCVideoResolutionMode.TRTCVideoResolutionModePortrait) {
+        [width, height] = [height, width];
+      }
+      return { width, height };
+    }
+    const mixControlContainerStyle = ref({
+      top: "0px",
+      left: "0px",
+      width: "0px",
+      height: "0px"
+    });
+    const mixControlStyle = ref({
+      top: "-6px",
+      transform: "translate(-50%, -100%)"
+    });
+    function getMixControlStyle() {
+      if (!localMixerRef.value || !activeMediaSource.value) {
+        return;
+      }
+      const { width: canvasWidth, height: canvasHeight } = getCanvasSize(
+        publishVideoQuality.value,
+        currentLiveOrientation.value === LiveOrientation.Landscape ? TRTCVideoResolutionMode.TRTCVideoResolutionModeLandscape : TRTCVideoResolutionMode.TRTCVideoResolutionModePortrait
+      );
+      const { width: realWidth, height: realHeight } = localMixerRef.value.getBoundingClientRect();
+      const scale = Math.max(realWidth / canvasWidth, realHeight / canvasHeight);
+      const previewWidth = canvasWidth * scale;
+      const previewHeight = canvasHeight * scale;
+      const { top, left, right, bottom } = activeMediaSource.value.layout.rect;
+      const mediaSourceWidth = right - left;
+      const mediaSourceHeight = bottom - top;
+      const rotation = activeMediaSource.value.layout.rotation || TRTCVideoRotation.TRTCVideoRotation0;
+      if (rotation === TRTCVideoRotation.TRTCVideoRotation0 || rotation === TRTCVideoRotation.TRTCVideoRotation180) {
+        mixControlContainerStyle.value = {
+          top: `${top * scale - (previewHeight - realHeight) / 2}px`,
+          left: `${left * scale - (previewWidth - realWidth) / 2}px`,
+          width: `${mediaSourceWidth * scale}px`,
+          height: `${mediaSourceHeight * scale}px`
+        };
+      } else {
+        mixControlContainerStyle.value = {
+          top: `${top * scale - (previewHeight - realHeight) / 2}px`,
+          left: `${left * scale - (previewWidth - realWidth) / 2}px`,
+          width: `${mediaSourceHeight * scale}px`,
+          height: `${mediaSourceWidth * scale}px`
+        };
+      }
+      if (top < 60) {
+        mixControlStyle.value = {
+          bottom: "-6px",
+          transform: "translate(-50%, 100%)"
+        };
+      } else {
+        mixControlStyle.value = {
+          top: "-6px",
+          transform: "translate(-50%, -100%)"
+        };
+      }
+    }
+    watch(
+      () => {
+        var _a;
+        return [publishVideoQuality.value, currentLiveOrientation.value, (_a = activeMediaSource.value) == null ? void 0 : _a.layout];
+      },
+      ([newVideoQuality, newOrientation, newLayout]) => {
+        if (!newVideoQuality || !newOrientation || !newLayout) {
+          return;
+        }
+        getMixControlStyle();
+      },
+      { immediate: true, deep: true }
+    );
+    const re = new ResizeObserver(() => {
+      getMixControlStyle();
+    });
+    onMounted(() => {
+      re.observe(localMixerRef.value);
+      TUIRoomEngine.once("ready", async () => {
+        var _a;
+        const mediaSourceManager = (_a = roomEngine.instance) == null ? void 0 : _a.getTRTCCloud().getMediaMixingManager();
+        await mediaSourceManager.setDisplayParams(document.getElementById("local-video-mixer"));
+        getMixControlStyle();
+      });
+      watch(localLiveStatus, async (newVal) => {
+        var _a;
+        if (newVal === LiveStatus.Live) {
+          const mediaSourceManager = (_a = roomEngine.instance) == null ? void 0 : _a.getTRTCCloud().getMediaMixingManager();
+          await (mediaSourceManager == null ? void 0 : mediaSourceManager.startPublish());
+        }
+      });
+    });
+    onUnmounted(() => {
+      re.unobserve(localMixerRef.value);
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: "local-mixer-container",
+        ref_key: "localMixerRef",
+        ref: localMixerRef
+      }, [
+        _cache[0] || (_cache[0] = createElementVNode("div", {
+          class: "local-mixer-content",
+          id: "local-video-mixer"
+        }, null, -1)),
+        unref(activeMediaSource) ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          class: "mixer-control-container",
+          style: normalizeStyle(mixControlContainerStyle.value)
+        }, [
+          createVNode(MixerControl, {
+            class: "mixer-control",
+            style: normalizeStyle(mixControlStyle.value)
+          }, null, 8, ["style"])
+        ], 4)) : createCommentVNode("", true),
+        unref(mediaSourceList).length === 0 ? (openBlock(), createElementBlock("div", _hoisted_1, [
+          createElementVNode("span", _hoisted_2, toDisplayString(unref(t)("No video")), 1)
+        ])) : createCommentVNode("", true)
+      ], 512);
+    };
+  }
+});
+const LocalMixer = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-d5530943"]]);
+export {
+  LocalMixer as default
+};

package/dist/components/StreamMixer/LocalMixer/index.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/StreamMixer/i18n/en-US/index.d.ts

@@ -0,0 +1,10 @@
+export declare const resource: {
+    Mirror: string;
+    Rotate: string;
+    'Move Up': string;
+    'Move Down': string;
+    Delete: string;
+    'Already at top': string;
+    'Already at bottom': string;
+    'No video': string;
+};

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

@@ -0,0 +1,15 @@
+const resource = {
+  // MixerControl.vue
+  Mirror: "Mirror",
+  Rotate: "Rotate",
+  "Move Up": "Move Up",
+  "Move Down": "Move Down",
+  Delete: "Delete",
+  "Already at top": "Already at top",
+  "Already at bottom": "Already at bottom",
+  // LocalMixer/index.vue
+  "No video": "No video"
+};
+export {
+  resource
+};

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

@@ -0,0 +1,2 @@
+export { resource as zhCNResource } from './zh-CN/index';
+export { resource as enUSResource } from './en-US/index';

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

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

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

@@ -0,0 +1,10 @@
+export declare const resource: {
+    Mirror: string;
+    Rotate: string;
+    'Move Up': string;
+    'Move Down': string;
+    Delete: string;
+    'Already at top': string;
+    'Already at bottom': string;
+    'No video': string;
+};

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

@@ -0,0 +1,15 @@
+const resource = {
+  // MixerControl.vue
+  Mirror: "镜像",
+  Rotate: "旋转",
+  "Move Up": "向上一层",
+  "Move Down": "向下一层",
+  Delete: "删除",
+  "Already at top": "已经是最上一层了",
+  "Already at bottom": "已经是最下一层了",
+  // LocalMixer/index.vue
+  "No video": "暂无画面"
+};
+export {
+  resource
+};

package/dist/components/StreamMixer/icons/CameraMirror.js

@@ -0,0 +1,36 @@
+import { createElementBlock, openBlock, createElementVNode } from "vue";
+import { _ as _export_sfc } from "../../../_plugin-vue_export-helper-1tPrXgE0.js";
+const _sfc_main = {};
+const _hoisted_1 = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "16",
+  height: "16",
+  viewBox: "0 0 16 16",
+  fill: "none"
+};
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1, _cache[0] || (_cache[0] = [
+    createElementVNode("path", {
+      d: "M7.5 1H8.5V15H7.5V1Z",
+      fill: "black",
+      "fill-opacity": "0.9",
+      style: { "fill": "black", "fill-opacity": "0.9" }
+    }, null, -1),
+    createElementVNode("path", {
+      d: "M14.7193 12.4367C14.7501 12.6777 14.6031 12.906 14.3709 12.9777C14.2988 13 14.196 13 13.9904 13H10.6499C10.5104 13 10.4407 13 10.3831 12.9862C10.2003 12.9423 10.0576 12.7995 10.0137 12.6167C9.99986 12.5592 9.99986 12.4895 9.99986 12.35V5.0008C9.99986 4.47031 9.99986 4.20506 10.0408 4.11027C10.1766 3.79537 10.5819 3.70757 10.8359 3.93804C10.9123 4.00742 11.0221 4.24889 11.2416 4.73183L14.5821 12.081C14.6672 12.2682 14.7098 12.3618 14.7193 12.4367ZM10.9999 12H13.4469L10.9999 6.61661V12Z",
+      fill: "black",
+      "fill-opacity": "0.9",
+      style: { "fill": "black", "fill-opacity": "0.9" }
+    }, null, -1),
+    createElementVNode("path", {
+      d: "M1.62882 12.9777C1.70093 13 1.80374 13 2.00935 13H5.3499C5.48935 13 5.55908 13 5.61662 12.9862C5.79944 12.9423 5.94219 12.7995 5.98608 12.6167C5.9999 12.5592 5.9999 12.4895 5.9999 12.35V5.0008C5.9999 4.47031 5.9999 4.20506 5.95901 4.11027C5.82317 3.79537 5.41786 3.70757 5.16389 3.93804C5.08744 4.00742 4.97768 4.24889 4.75816 4.73183L1.41761 12.081C1.33253 12.2682 1.28999 12.3618 1.28043 12.4367C1.24964 12.6777 1.39664 12.906 1.62882 12.9777ZM4.9999 6.61661V12H2.5529L4.9999 6.61661Z",
+      fill: "black",
+      "fill-opacity": "0.9",
+      style: { "fill": "black", "fill-opacity": "0.9" }
+    }, null, -1)
+  ]));
+}
+const CameraMirror = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  CameraMirror as default
+};

package/dist/components/StreamMixer/icons/CameraMirror.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/StreamMixer/icons/Delete.js

@@ -0,0 +1,33 @@
+import { createElementBlock, openBlock, createElementVNode } from "vue";
+import { _ as _export_sfc } from "../../../_plugin-vue_export-helper-1tPrXgE0.js";
+const _sfc_main = {};
+const _hoisted_1 = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "16",
+  height: "16",
+  viewBox: "0 0 16 16",
+  fill: "none"
+};
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1, _cache[0] || (_cache[0] = [
+    createElementVNode("path", {
+      d: "M6 12V6H7V12H6Z",
+      "fill-opacity": "0.9",
+      style: { "fill": "currentColor", "fill-opacity": "0.9" }
+    }, null, -1),
+    createElementVNode("path", {
+      d: "M9 6V12H10V6H9Z",
+      "fill-opacity": "0.9",
+      style: { "fill": "currentColor", "fill-opacity": "0.9" }
+    }, null, -1),
+    createElementVNode("path", {
+      d: "M10.5 3H14V4H13V14C13 14.5523 12.5523 15 12 15H4C3.44772 15 3 14.5523 3 14V4H2V3H5.5L5.5 1.8C5.5 1.35817 5.85817 1 6.3 1H9.7C10.1418 1 10.5 1.35817 10.5 1.8V3ZM6.5 3H9.5L9.5 2L6.5 2V3ZM4 4V14H12V4H4Z",
+      "fill-opacity": "0.9",
+      style: { "fill": "currentColor", "fill-opacity": "0.9" }
+    }, null, -1)
+  ]));
+}
+const Delete = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  Delete as default
+};

package/dist/components/StreamMixer/icons/Delete.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/StreamMixer/icons/Down.js

@@ -0,0 +1,39 @@
+import { createElementBlock, openBlock, createElementVNode } from "vue";
+import { _ as _export_sfc } from "../../../_plugin-vue_export-helper-1tPrXgE0.js";
+const _sfc_main = {};
+const _hoisted_1 = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "18",
+  height: "18",
+  viewBox: "0 0 18 18",
+  fill: "none"
+};
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1, _cache[0] || (_cache[0] = [
+    createElementVNode("path", {
+      d: "M9.00342 12.8867V2.1575",
+      stroke: "currentcolor",
+      "stroke-width": "1.5",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round"
+    }, null, -1),
+    createElementVNode("path", {
+      d: "M4.06299 7.99265L9.00003 12.9297L13.9371 7.99265",
+      stroke: "currentcolor",
+      "stroke-width": "1.5",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round"
+    }, null, -1),
+    createElementVNode("path", {
+      d: "M4.06299 15.8457H13.9371",
+      stroke: "currentcolor",
+      "stroke-width": "1.5",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round"
+    }, null, -1)
+  ]));
+}
+const Down = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  Down as default
+};

package/dist/components/StreamMixer/icons/Down.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/StreamMixer/icons/Rotation.js

@@ -0,0 +1,30 @@
+import { createElementBlock, openBlock, createElementVNode } from "vue";
+import { _ as _export_sfc } from "../../../_plugin-vue_export-helper-1tPrXgE0.js";
+const _sfc_main = {};
+const _hoisted_1 = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "16",
+  height: "16",
+  viewBox: "0 0 16 16",
+  fill: "none"
+};
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1, _cache[0] || (_cache[0] = [
+    createElementVNode("path", {
+      d: "M8.00016 2.71134C10.8965 2.71134 13.2534 5.0736 13.2534 7.99868H14.2148C14.2148 4.54763 11.4324 1.75 8.00016 1.75C5.76382 1.75 3.80336 2.93771 2.7087 4.72001L2.7087 2.64252H1.75V5.74894C1.75 6.02508 1.97386 6.24894 2.25 6.24894L5.33676 6.24894V5.28498L3.49045 5.28498C4.40906 3.74211 6.08692 2.71134 8.00016 2.71134Z",
+      fill: "black",
+      "fill-opacity": "0.9",
+      style: { "fill": "black", "fill-opacity": "0.9" }
+    }, null, -1),
+    createElementVNode("path", {
+      d: "M1.78554 7.99863H2.74687C2.74687 10.9237 5.10379 13.286 8.00015 13.286C9.91339 13.286 11.5912 12.2553 12.5099 10.7124H10.6632V9.74843H13.75C14.0261 9.74843 14.25 9.97228 14.25 10.2484V13.3548H13.2913V11.2779C12.1966 13.0599 10.2363 14.2474 8.00015 14.2474C4.56792 14.2474 1.78554 11.4497 1.78554 7.99863Z",
+      fill: "black",
+      "fill-opacity": "0.9",
+      style: { "fill": "black", "fill-opacity": "0.9" }
+    }, null, -1)
+  ]));
+}
+const Rotation = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  Rotation as default
+};

package/dist/components/StreamMixer/icons/Rotation.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/StreamMixer/icons/Up.js

@@ -0,0 +1,39 @@
+import { createElementBlock, openBlock, createElementVNode } from "vue";
+import { _ as _export_sfc } from "../../../_plugin-vue_export-helper-1tPrXgE0.js";
+const _sfc_main = {};
+const _hoisted_1 = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "18",
+  height: "18",
+  viewBox: "0 0 18 18",
+  fill: "none"
+};
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1, _cache[0] || (_cache[0] = [
+    createElementVNode("path", {
+      d: "M9.00342 5.11328V15.8425",
+      stroke: "currentcolor",
+      "stroke-width": "1.5",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round"
+    }, null, -1),
+    createElementVNode("path", {
+      d: "M4.06299 10.0074L9.00003 5.07031L13.9371 10.0074",
+      stroke: "currentcolor",
+      "stroke-width": "1.5",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round"
+    }, null, -1),
+    createElementVNode("path", {
+      d: "M4.06299 2.15234H13.9371",
+      stroke: "currentcolor",
+      "stroke-width": "1.5",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round"
+    }, null, -1)
+  ]));
+}
+const Up = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  Up as default
+};

package/dist/components/StreamMixer/icons/Up.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/StreamMixer/index.d.ts

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

package/dist/components/StreamMixer/index.js

@@ -0,0 +1,26 @@
+import { defineComponent, createBlock, openBlock, unref, withCtx, createVNode, normalizeStyle } from "vue";
+import LocalMixer from "./LocalMixer/index.js";
+import { LiveStreamView } from "../LiveStreamView/index.js";
+import { addI18n } from "../../i18n/index.js";
+import { resource as resource$1 } from "./i18n/zh-CN/index.js";
+import { resource } from "./i18n/en-US/index.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "index",
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(LiveStreamView), { "ignore-local-video": true }, {
+        localVideo: withCtx(({ style }) => [
+          createVNode(LocalMixer, {
+            style: normalizeStyle(style)
+          }, null, 8, ["style"])
+        ]),
+        _: 1
+      });
+    };
+  }
+});
+addI18n("en-US", { translation: resource });
+addI18n("zh-CN", { translation: resource$1 });
+export {
+  _sfc_main as StreamMixer
+};

package/dist/components/StreamMixer/index.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;