tuikit-atomicx-vue3 3.3.4 → 3.4.2

package/dist/components/LiveCoreView/index.js

@@ -1,366 +0,0 @@
-import { addI18n } from "../../i18n/index.js";
-import DefaultStreamViewUI from "./DefaultStreamViewUI.js";
-import { defineComponent, useSlots, computed, ref, onMounted, onBeforeUnmount, watch, createElementBlock, openBlock, normalizeClass, createCommentVNode, createElementVNode, createBlock, toDisplayString, unref, normalizeStyle, renderSlot, Fragment, renderList, mergeProps, normalizeProps, Teleport } from "vue";
-import { useUIKit } from "@tencentcloud/uikit-base-component-vue3";
-import { useLiveSeatState } from "../../states/LiveSeatState/index.js";
-import { useLiveState } from "../../states/LiveState/index.js";
-import { useLoginState } from "../../states/LoginState.js";
-import { getContentSize } from "../../utils/domOperation.js";
-import PlayerControl from "./PlayerControl/PlayerControl.js";
-import { usePlayerControlState } from "./PlayerControl/PlayerControlState.js";
-import { isMobile } from "../../utils/env.js";
-import { _ as _export_sfc } from "../../_plugin-vue_export-helper-1tPrXgE0.js";
-import { resource } from "./i18n/en-US/index.js";
-import { resource as resource$1 } from "./i18n/zh-CN/index.js";
-const _hoisted_1 = {
-  key: 0,
-  class: "live-core-placeholder"
-};
-const _hoisted_2 = { class: "placeholder-text" };
-const _hoisted_3 = {
-  key: 0,
-  class: "live-core-ui"
-};
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "index",
-  setup(__props) {
-    const { isFullscreen, isLandscapeStyleMode } = usePlayerControlState();
-    const { t } = useUIKit();
-    const { seatList, canvas, startPlayStream, stopPlayStream } = useLiveSeatState();
-    const { currentLive } = useLiveState();
-    const slots = useSlots();
-    const isInStreamMixerComp = computed(() => slots.localVideo);
-    const { loginUserInfo } = useLoginState();
-    const isPlayedVideo = ref(false);
-    const isMounted = ref(false);
-    const isAlignCenter = computed(() => {
-      if (!isInStreamMixerComp.value && isPortraitContainer.value && widthRatio.value < heightRatio.value) {
-        return false;
-      }
-      return true;
-    });
-    const isShowPlayerControl = computed(() => {
-      var _a;
-      return ((_a = currentLive.value) == null ? void 0 : _a.liveId) && !seatList.value.some((item) => {
-        var _a2, _b;
-        return ((_a2 = item.userInfo) == null ? void 0 : _a2.userId) === ((_b = loginUserInfo.value) == null ? void 0 : _b.userId);
-      });
-    });
-    onMounted(async () => {
-      isMounted.value = true;
-      await startPlayStream({ view: "atomicx-live-stream-content" });
-      isPlayedVideo.value = true;
-    });
-    onBeforeUnmount(async () => {
-      isMounted.value = false;
-      await stopPlayStream();
-      isPlayedVideo.value = false;
-    });
-    const isPortraitContainer = ref(true);
-    const liveCoreViewContainerRef = ref();
-    const liveCoreViewContainerSize = ref({
-      width: 0,
-      height: 0
-    });
-    const originStreamViewStyle = ref({
-      width: 0,
-      height: 0,
-      transformX: 0,
-      transformY: 0,
-      scale: 1
-    });
-    const ratioLayoutList = computed(() => {
-      var _a;
-      const layoutCanvas = canvas.value;
-      const layoutList = (_a = seatList.value) == null ? void 0 : _a.map((seat) => {
-        var _a2;
-        return { userId: (_a2 = seat.userInfo) == null ? void 0 : _a2.userId, ...seat.region };
-      });
-      if (!layoutList) {
-        return [];
-      }
-      return layoutList.map((item) => ({
-        userId: item.userId,
-        x: item.x / layoutCanvas.width,
-        y: item.y / layoutCanvas.width,
-        width: item.w / layoutCanvas.width,
-        height: item.h === layoutCanvas.height ? -1 : item.h / layoutCanvas.width,
-        zOrder: item.zOrder
-      }));
-    });
-    const streamViewSize = computed(() => {
-      return {
-        width: originStreamViewStyle.value.width * originStreamViewStyle.value.scale,
-        height: originStreamViewStyle.value.height * originStreamViewStyle.value.scale
-      };
-    });
-    const seatListWithRealSize = computed(() => seatList.value.map((item, index) => {
-      var _a, _b;
-      const ratioLayout = ratioLayoutList.value[index];
-      const isPortraitAndFill = isPortraitContainer.value && fillMode.value === "fill";
-      const isSampleWithCanvas = seatList.value.length === 1 || ((_a = item.region) == null ? void 0 : _a.w) === canvas.value.width && ((_b = item.region) == null ? void 0 : _b.h) === canvas.value.height;
-      if (!isInStreamMixerComp.value && isPortraitAndFill && isSampleWithCanvas) {
-        return {
-          userInfo: item.userInfo,
-          region: {
-            position: "absolute",
-            left: "50%",
-            top: "50%",
-            width: `${liveCoreViewContainerSize.value.width}px`,
-            height: `${liveCoreViewContainerSize.value.height}px`,
-            transform: `translate(-50%, -50%)`,
-            zIndex: Number(ratioLayout.zOrder) || 0
-          }
-        };
-      }
-      return {
-        userInfo: item.userInfo,
-        region: {
-          position: "absolute",
-          left: `${streamViewSize.value.width * ratioLayout.x}px`,
-          top: `${streamViewSize.value.width * ratioLayout.y}px`,
-          width: `${streamViewSize.value.width * ratioLayout.width}px`,
-          height: ratioLayout.height === -1 ? `${streamViewSize.value.height}px` : `${streamViewSize.value.width * ratioLayout.height}px`,
-          zIndex: Number(ratioLayout.zOrder) || 0
-        }
-      };
-    }));
-    const localStreamViewInfo = computed(() => seatListWithRealSize.value.find((item) => {
-      var _a, _b;
-      return ((_a = item == null ? void 0 : item.userInfo) == null ? void 0 : _a.userId) === ((_b = loginUserInfo.value) == null ? void 0 : _b.userId);
-    }));
-    const needPlayStreamViewInfo = computed(() => {
-      if (isInStreamMixerComp.value) {
-        return seatListWithRealSize.value.filter((item) => {
-          var _a, _b;
-          return ((_a = item.userInfo) == null ? void 0 : _a.userId) !== ((_b = loginUserInfo.value) == null ? void 0 : _b.userId);
-        });
-      }
-      return seatListWithRealSize.value;
-    });
-    const visualStreamSize = computed(() => {
-      if (!isPortraitContainer.value && widthRatio.value < heightRatio.value && ratioLayoutList.value.length > 0) {
-        const absoluteLayoutList = ratioLayoutList.value.map((item) => ({
-          userId: item.userId,
-          left: originStreamViewStyle.value.width * item.x,
-          top: originStreamViewStyle.value.width * item.y,
-          width: originStreamViewStyle.value.width * item.width,
-          height: item.height === -1 ? originStreamViewStyle.value.height : originStreamViewStyle.value.width * item.height,
-          zIndex: item.zOrder
-        }));
-        const minX = Math.min(...absoluteLayoutList.map((item) => item.left));
-        const minY = Math.min(...absoluteLayoutList.map((item) => item.top));
-        const maxX = Math.max(...absoluteLayoutList.map((item) => item.left + item.width));
-        const maxY = Math.max(...absoluteLayoutList.map((item) => item.top + item.height));
-        return {
-          width: maxX - minX,
-          height: maxY - minY,
-          centerX: (minX + maxX) / 2,
-          centerY: (minY + maxY) / 2
-        };
-      }
-      return {
-        width: 0,
-        height: 0,
-        centerX: 0,
-        centerY: 0
-      };
-    });
-    watch(visualStreamSize, () => {
-      handleStreamListTransform();
-    });
-    function handleStreamListTransform() {
-      if (!liveCoreViewContainerRef.value) {
-        return;
-      }
-      if (visualStreamSize.value.width && visualStreamSize.value.height) {
-        const containerRect = liveCoreViewContainerRef.value.getBoundingClientRect();
-        const containerWidth = Math.floor(containerRect.width);
-        const containerHeight = Math.floor(containerRect.height);
-        const scaleWidth = containerWidth / visualStreamSize.value.width;
-        const scaleHeight = containerHeight / visualStreamSize.value.height;
-        originStreamViewStyle.value.scale = Math.min(scaleWidth, scaleHeight);
-        originStreamViewStyle.value.transformX = originStreamViewStyle.value.width / 2 - visualStreamSize.value.centerX;
-        originStreamViewStyle.value.transformY = originStreamViewStyle.value.height / 2 - visualStreamSize.value.centerY;
-      } else {
-        handleStreamRegionSize();
-        originStreamViewStyle.value.scale = 1;
-        originStreamViewStyle.value.transformX = 0;
-        originStreamViewStyle.value.transformY = 0;
-      }
-    }
-    const streamViewStyle = computed(() => {
-      return {
-        width: `${Math.floor(originStreamViewStyle.value.width) * originStreamViewStyle.value.scale}px`,
-        height: `${Math.floor(originStreamViewStyle.value.height) * originStreamViewStyle.value.scale}px`,
-        transform: `translate(${originStreamViewStyle.value.transformX * originStreamViewStyle.value.scale}px, ${originStreamViewStyle.value.transformY * originStreamViewStyle.value.scale}px)`
-      };
-    });
-    const aspectRatio = computed(() => {
-      var _a, _b;
-      if (canvas.value.width && canvas.value.height) {
-        return `${canvas.value.width}:${canvas.value.height}`;
-      }
-      if (currentLive.value && ((_a = currentLive.value) == null ? void 0 : _a.layoutTemplate) >= 200 && ((_b = currentLive.value) == null ? void 0 : _b.layoutTemplate) <= 599) {
-        return "16:9";
-      }
-      return "9:16";
-    });
-    const widthRatio = computed(() => {
-      if (!aspectRatio.value || aspectRatio.value.indexOf(":") < 0) {
-        return 0;
-      }
-      return Number(aspectRatio.value.split(":")[0]);
-    });
-    const heightRatio = computed(() => {
-      if (!aspectRatio.value || aspectRatio.value.indexOf(":") < 0) {
-        return 0;
-      }
-      return Number(aspectRatio.value.split(":")[1]);
-    });
-    const fillMode = ref(
-      "fit"
-      /* Fit */
-    );
-    watch(() => [canvas.value, seatList.value], () => {
-      if (canvas.value.width > canvas.value.height) {
-        fillMode.value = "fit";
-        handleStreamRegionSize();
-        return;
-      }
-      const onlyOneSeat = seatList.value.length === 1;
-      const hasOneFullScreenUser = seatList.value.find((item) => {
-        var _a, _b;
-        return ((_a = item.region) == null ? void 0 : _a.w) === canvas.value.width && ((_b = item.region) == null ? void 0 : _b.h) === canvas.value.height;
-      });
-      if (!isInStreamMixerComp.value && (onlyOneSeat || hasOneFullScreenUser)) {
-        fillMode.value = "fill";
-      } else {
-        fillMode.value = "fit";
-      }
-      handleStreamRegionSize();
-    }, { deep: true });
-    function handleStreamRegionSize() {
-      if (!liveCoreViewContainerRef.value) {
-        return;
-      }
-      const containerWidth = getContentSize(liveCoreViewContainerRef.value).width;
-      const containerHeight = getContentSize(liveCoreViewContainerRef.value).height;
-      let width = containerWidth;
-      let height = containerHeight;
-      if (widthRatio.value && heightRatio.value) {
-        const scaleWidth = containerWidth / widthRatio.value;
-        const scaleHeight = containerHeight / heightRatio.value;
-        if (fillMode.value === "fit") {
-          if (scaleWidth > scaleHeight) {
-            width = containerHeight / heightRatio.value * widthRatio.value;
-            height = containerHeight;
-          }
-          if (scaleWidth <= scaleHeight) {
-            width = containerWidth;
-            height = containerWidth / widthRatio.value * heightRatio.value;
-          }
-        } else {
-          if (scaleWidth > scaleHeight) {
-            width = containerWidth;
-            height = containerWidth / widthRatio.value * heightRatio.value;
-          }
-          if (scaleWidth <= scaleHeight) {
-            width = containerHeight / heightRatio.value * widthRatio.value;
-            height = containerHeight;
-          }
-        }
-      }
-      originStreamViewStyle.value.width = width;
-      originStreamViewStyle.value.height = height;
-    }
-    watch(
-      () => aspectRatio.value,
-      () => {
-        handleStreamRegionSize();
-      }
-    );
-    const getContainerOrientation = () => {
-      if (!liveCoreViewContainerRef.value) {
-        return;
-      }
-      const containerRect = liveCoreViewContainerRef.value.getBoundingClientRect();
-      isPortraitContainer.value = containerRect.width < containerRect.height;
-      liveCoreViewContainerSize.value = {
-        width: containerRect.width,
-        height: containerRect.height
-      };
-    };
-    const ro = new ResizeObserver(() => {
-      getContainerOrientation();
-      handleStreamRegionSize();
-      handleStreamListTransform();
-    });
-    onMounted(() => {
-      ro.observe(liveCoreViewContainerRef.value);
-      getContainerOrientation();
-    });
-    onBeforeUnmount(() => {
-      ro.unobserve(liveCoreViewContainerRef.value);
-    });
-    return (_ctx, _cache) => {
-      var _a;
-      return openBlock(), createElementBlock("div", {
-        ref_key: "liveCoreViewContainerRef",
-        ref: liveCoreViewContainerRef,
-        id: "live-core-view-container",
-        class: normalizeClass(["live-core-view-container", { "align-center": isAlignCenter.value }])
-      }, [
-        !_ctx.$slots.localVideo && !isPlayedVideo.value ? (openBlock(), createElementBlock("div", _hoisted_1, [
-          createElementVNode("span", _hoisted_2, toDisplayString(unref(t)("No video")), 1)
-        ])) : createCommentVNode("", true),
-        createElementVNode("div", {
-          class: "live-core-view",
-          style: normalizeStyle(streamViewStyle.value)
-        }, [
-          _cache[0] || (_cache[0] = createElementVNode("div", {
-            id: "atomicx-live-stream-content",
-            class: "stream-content"
-          }, null, -1)),
-          needPlayStreamViewInfo.value.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_3, [
-            (openBlock(true), createElementBlock(Fragment, null, renderList(needPlayStreamViewInfo.value, (item, index) => {
-              return openBlock(), createElementBlock("div", {
-                key: `seat-${index}`,
-                style: normalizeStyle(item.region)
-              }, [
-                renderSlot(_ctx.$slots, "streamViewUI", mergeProps({ ref_for: true }, { userInfo: item.userInfo }), void 0, true),
-                !_ctx.$slots.streamViewUI ? (openBlock(), createBlock(DefaultStreamViewUI, {
-                  key: 0,
-                  streamViewInfoList: needPlayStreamViewInfo.value,
-                  userInfo: item.userInfo
-                }, null, 8, ["streamViewInfoList", "userInfo"])) : createCommentVNode("", true)
-              ], 4);
-            }), 128))
-          ])) : createCommentVNode("", true),
-          _ctx.$slots.localVideo && isMounted.value ? renderSlot(_ctx.$slots, "localVideo", normalizeProps(mergeProps({ key: 1 }, { style: (_a = localStreamViewInfo.value) == null ? void 0 : _a.region })), void 0, true) : createCommentVNode("", true)
-        ], 4),
-        !unref(isFullscreen) ? (openBlock(), createBlock(Teleport, {
-          key: 1,
-          to: "body",
-          disabled: !unref(isMobile)
-        }, [
-          isShowPlayerControl.value ? (openBlock(), createBlock(PlayerControl, {
-            key: 0,
-            isLandscapeStyleMode: unref(isLandscapeStyleMode)
-          }, null, 8, ["isLandscapeStyleMode"])) : createCommentVNode("", true)
-        ], 8, ["disabled"])) : createCommentVNode("", true),
-        isShowPlayerControl.value && unref(isFullscreen) ? (openBlock(), createBlock(PlayerControl, {
-          key: 2,
-          isLandscapeStyleMode: unref(isLandscapeStyleMode)
-        }, null, 8, ["isLandscapeStyleMode"])) : createCommentVNode("", true)
-      ], 2);
-    };
-  }
-});
-const LiveCoreViewComponent = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-4d9101b9"]]);
-addI18n("en-US", { translation: resource });
-addI18n("zh-CN", { translation: resource$1 });
-export {
-  DefaultStreamViewUI,
-  LiveCoreViewComponent as LiveCoreView
-};

package/dist/index-BF6QB9jF.js

@@ -1,63 +0,0 @@
-import { g as getDefaultExportFromCjs } from "./_commonjsHelpers-CUmg6egw.js";
-var classnames = { exports: {} };
-/*!
-	Copyright (c) 2018 Jed Watson.
-	Licensed under the MIT License (MIT), see
-	http://jedwatson.github.io/classnames
-*/
-(function(module) {
-  (function() {
-    var hasOwn = {}.hasOwnProperty;
-    function classNames() {
-      var classes = "";
-      for (var i = 0; i < arguments.length; i++) {
-        var arg = arguments[i];
-        if (arg) {
-          classes = appendClass(classes, parseValue(arg));
-        }
-      }
-      return classes;
-    }
-    function parseValue(arg) {
-      if (typeof arg === "string" || typeof arg === "number") {
-        return arg;
-      }
-      if (typeof arg !== "object") {
-        return "";
-      }
-      if (Array.isArray(arg)) {
-        return classNames.apply(null, arg);
-      }
-      if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes("[native code]")) {
-        return arg.toString();
-      }
-      var classes = "";
-      for (var key in arg) {
-        if (hasOwn.call(arg, key) && arg[key]) {
-          classes = appendClass(classes, key);
-        }
-      }
-      return classes;
-    }
-    function appendClass(value, newClass) {
-      if (!newClass) {
-        return value;
-      }
-      if (value) {
-        return value + " " + newClass;
-      }
-      return value + newClass;
-    }
-    if (module.exports) {
-      classNames.default = classNames;
-      module.exports = classNames;
-    } else {
-      window.classNames = classNames;
-    }
-  })();
-})(classnames);
-var classnamesExports = classnames.exports;
-const cs = /* @__PURE__ */ getDefaultExportFromCjs(classnamesExports);
-export {
-  cs as c
-};