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

package/src/components/ConversationList/ConversationList.vue

@@ -31,18 +31,18 @@
       :empty="renderConversationList.length === 0"
       :loading="!conversationList"
       :error="false"
-      :placeholder-empty-list="PlaceholderEmptyList"
-      :placeholder-loading="PlaceholderLoading"
-      :placeholder-load-error="PlaceholderLoadError"
+      :PlaceholderEmptyList="PlaceholderEmptyList"
+      :PlaceholderLoading="PlaceholderLoading"
+      :PlaceholderLoadError="PlaceholderLoadError"
     >
       <ConversationPreview
         v-for="conversation in renderConversationList"
         :key="conversation.conversationID"
         :conversation="conversation"
         :enable-actions="enableActions"
-        :avatar="Avatar"
-        :preview="Preview"
-        :conversation-actions="ConversationActions"
+        :Avatar="Avatar"
+        :Preview="Preview"
+        :ConversationActions="ConversationActions"
         :actions-config="actionsConfig"
         @select="handleSelectConversation"
       />
@@ -53,16 +53,12 @@
 <script lang="ts" setup>
 import { computed, ref, watch } from 'vue';
 import { useConversationListState } from '../../states/ConversationListState';
-import {
-  PlaceHolderTypes,
-} from '../../types';
 import { isH5 } from '../../utils';
 import { Avatar as DefaultAvatar } from '../Avatar';
 import { ConversationActions as DefaultConversationActions } from './ConversationActions';
 import { ConversationCreate as DefaultConversationCreate } from './ConversationCreate';
 import { ConversationListContent as DefaultConversationListContent } from './ConversationListContent';
 import { ConversationListHeader as DefaultConversationListHeader } from './ConversationListHeader';
-import PlaceHolder from './ConversationPlaceHolder';
 import { ConversationPreview, ConversationPreviewUI as DefaultConversationPreviewUI } from './ConversationPreview';
 import { ConversationSearch as DefaultConversationSearch } from './ConversationSearch';
 import { useConversation } from './hooks/useConversation';
@@ -88,30 +84,19 @@ const props = withDefaults(defineProps<Props>(), {
   ConversationCreate: () => DefaultConversationCreate,
   ConversationSearch: () => DefaultConversationSearch,
   ConversationActions: () => DefaultConversationActions,
-  PlaceholderEmptyList: () => ({
-    component: PlaceHolder,
-    props: { type: PlaceHolderTypes.NO_CONVERSATIONS },
-  }),
-  PlaceholderLoading: () => ({
-    component: PlaceHolder,
-    props: { type: PlaceHolderTypes.LOADING },
-  }),
-  PlaceholderLoadError: () => ({
-    component: PlaceHolder,
-    props: { type: PlaceHolderTypes.WRONG },
-  }),
+  PlaceholderEmptyList: undefined,
+  PlaceholderLoading: undefined,
+  PlaceholderLoadError: undefined,
   Avatar: () => DefaultAvatar,
 });
 
 const emit = defineEmits<{
   selectConversation: [conversation: ConversationModel];
-  beforeCreateConversation: [params: string | any];
+  beforeCreateConversation: [params: string | CreateGroupParams];
   conversationCreated: [conversation: ConversationModel];
 }>();
 
 const {
-  filter,
-  sort,
   enableActions,
   actionsConfig: propActionsConfig,
   enableCreate: propEnableCreate,
@@ -131,24 +116,19 @@ const renderConversationList = computed(() => {
 
   let _conversationList = conversationList.value;
 
-  if (filter && typeof filter === 'function') {
-    _conversationList = filter(_conversationList);
+  if (props.filter && typeof props.filter === 'function') {
+    _conversationList = props.filter(_conversationList);
   }
 
-  if (sort && typeof sort === 'function') {
-    _conversationList = sort(_conversationList);
+  if (props.sort && typeof props.sort === 'function') {
+    _conversationList = props.sort(_conversationList);
   }
 
   return _conversationList;
 });
 
 const isCreateModelShow = ref(false);
-const actionsConfig = ref<ConversationActionsConfig>({
-  enableDelete: true,
-  enableMute: true,
-  enableMarkUnread: true,
-  enablePin: true,
-});
+const actionsConfig = ref<ConversationActionsConfig>({});
 
 const enableCreate = computed(() => propEnableCreate);
 const enableSearch = computed(() => propEnableSearch);
@@ -159,12 +139,6 @@ watch(
   (): [ConversationActionsConfig | undefined, string[] | null] => [propActionsConfig, conversationActionList.value],
   ([newActionsConfig, newConversationActionList]) => {
     if (!newActionsConfig && !newConversationActionList) {
-      actionsConfig.value = {
-        enableDelete: true,
-        enableMute: true,
-        enableMarkUnread: true,
-        enablePin: true,
-      };
       return;
     }
 

package/src/components/ConversationList/ConversationListContent/ConversationListContent.scss

@@ -6,6 +6,7 @@
   flex-direction: column;
   background-color: var(--bg-color-operate, #f5f5f5);
   color: var(--text-color-primary, #333);
+  
   @include scrollbar.scrollbar-hidden();
 
   .placeholder-error,

package/src/components/ConversationList/ConversationListContent/ConversationListContent.vue

@@ -6,26 +6,24 @@
     <slot v-if="!error && !loading && !empty" />
 
     <component
-      :is="PlaceholderLoadError.component"
+      :is="PlaceholderLoadError"
       v-else-if="error"
-      v-bind="PlaceholderLoadError.props"
     />
 
     <component
-      :is="PlaceholderLoading.component"
+      :is="PlaceholderLoading"
       v-else-if="loading"
-      v-bind="PlaceholderLoading.props"
     />
 
     <component
-      :is="PlaceholderEmptyList.component"
+      :is="PlaceholderEmptyList"
       v-else-if="empty"
-      v-bind="PlaceholderEmptyList.props"
     />
   </div>
 </template>
 
 <script lang="ts" setup>
+import { h } from 'vue';
 import { PlaceHolderTypes } from '../../../types';
 import PlaceHolder from '../ConversationPlaceHolder';
 import type { ConversationListContentProps } from '../../../types';
@@ -34,18 +32,15 @@ const props = withDefaults(defineProps<ConversationListContentProps>(), {
   empty: false,
   loading: false,
   error: false,
-  PlaceholderEmptyList: () => ({
-    component: PlaceHolder,
-    props: { type: PlaceHolderTypes.NO_CONVERSATIONS },
-  }),
-  PlaceholderLoading: () => ({
-    component: PlaceHolder,
-    props: { type: PlaceHolderTypes.LOADING },
-  }),
-  PlaceholderLoadError: () => ({
-    component: PlaceHolder,
-    props: { type: PlaceHolderTypes.WRONG },
-  }),
+  PlaceholderEmptyList: () => (h(PlaceHolder, {
+    type: PlaceHolderTypes.NO_CONVERSATIONS
+  })),
+  PlaceholderLoading: () => (h(PlaceHolder, {
+    type: PlaceHolderTypes.LOADING
+  })),
+  PlaceholderLoadError: () => (h(PlaceHolder, {
+    type: PlaceHolderTypes.WRONG
+  }))
 });
 
 </script>

package/src/components/ConversationList/ConversationPreview/ConversationPreview.scss

@@ -1,3 +1,4 @@
+@use '../../../styles/mixins' as mixins;
 .conversationPreview {
   display: flex;
   align-items: center;
@@ -42,18 +43,17 @@
   }
 
   &__title {
+    flex: 1;
     font-weight: 500;
     font-size: 14px;
     color: var(--text-color-primary, #333);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    flex: 1;
+
+    @include mixins.text-ellipsis();
   }
 
   &__time {
     font-size: 12px;
-    line-height: 24px;
+    line-height: 18px;
     color: var(--text-color-secondary, #666);
     flex-shrink: 0;
     margin-left: 8px;
@@ -66,12 +66,11 @@
   }
 
   &__abstract {
+    flex: 1;
     font-size: 12px;
     color: var(--text-color-secondary, #666);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    flex: 1;
+
+    @include mixins.text-ellipsis();
   }
 
   &__external {
@@ -87,6 +86,9 @@
   &__unread {
     flex-shrink: 0;
     margin-left: 8px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 
     .unread-count {
       display: inline-flex;

package/src/components/ConversationList/ConversationPreview/ConversationPreview.vue

@@ -3,17 +3,16 @@
     <component
       :is="Preview"
       :conversation="conversation"
-      :is-selected="isSelected"
-      :enable-actions="enableActions"
-      :highlight-match-string="highlightMatchString"
-      :avatar="Avatar"
-      :conversation-actions="ConversationActions"
-      :title="Title"
-      :last-message-timestamp="LastMessageTimestamp"
-      :last-message-abstract="LastMessageAbstract"
-      :unread="Unread"
-      :actions-config="actionsConfig"
-      :class-name="className"
+      :isSelected="isSelected"
+      :enableActions="enableActions"
+      :Avatar="Avatar"
+      :ConversationActions="ConversationActions"
+      :Title="Title"
+      :LastMessageTimestamp="LastMessageTimestamp"
+      :LastMessageAbstract="LastMessageAbstract"
+      :Unread="Unread"
+      :actionsConfig="actionsConfig"
+      :className="className"
       :style="style"
       @select="handleSelectConversation"
     >
@@ -49,20 +48,19 @@ const emit = defineEmits<{
   selectConversation: [conversation: ConversationModel];
 }>();
 
-const Title = computed(() => h(ConversationPreviewTitle, {
+const Title = computed(() => h(props.Title || ConversationPreviewTitle, {
   conversation: props.conversation,
-  highlightMatchString: props.highlightMatchString,
 }));
 
-const LastMessageTimestamp = computed(() => h(ConversationPreviewTimestamp, {
+const LastMessageTimestamp = computed(() => h(props.LastMessageTimestamp || ConversationPreviewTimestamp, {
   conversation: props.conversation,
 }));
 
-const LastMessageAbstract = computed(() => h(ConversationPreviewAbstract, {
+const LastMessageAbstract = computed(() => h(props.LastMessageAbstract || ConversationPreviewAbstract, {
   conversation: props.conversation,
 }));
 
-const Unread = computed(() => h(ConversationPreviewUnread, {
+const Unread = computed(() => h(props.Unread || ConversationPreviewUnread, {
   conversation: props.conversation,
 }));
 

package/src/components/ConversationList/ConversationPreview/ConversationPreviewTitle.vue

@@ -1,29 +1,17 @@
 <template>
   <div :class="[$style.conversationPreview__title, $style.textEllipsis]">
-    <span
-      v-for="(item, index) in titleItems"
-      :key="index"
-      :class="{
-        [$style['conversationPreview__title--highlight']]: item.isHighlight,
-        [$style['conversationPreview__title--normal']]: !item.isHighlight,
-      }"
-    >
-      {{ item.text }}
-    </span>
+    {{ title }}
   </div>
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
-import { generateHighlightTitle } from './utils';
 import type { ConversationModel } from '../../../types';
 
 const props = defineProps<{
   conversation: ConversationModel;
-  highlightMatchString?: string;
 }>();
 
-const titleItems = computed(() => generateHighlightTitle(props.conversation, props.highlightMatchString));
+const title =props?.conversation?.getShowName?.() || '';
 </script>
 
 <style lang="scss" module>

package/src/components/ConversationList/ConversationPreview/index.ts

@@ -4,4 +4,4 @@ export { default as ConversationPreviewTitle } from './ConversationPreviewTitle.
 export { default as ConversationPreviewTimestamp } from './ConversationPreviewTimestamp.vue';
 export { default as ConversationPreviewAbstract } from './ConversationPreviewAbstract.vue';
 export { default as ConversationPreviewUnread } from './ConversationPreviewUnread.vue';
-export { generateHighlightTitle, getLatestMessagePreview } from './utils';
+export { getLatestMessagePreview } from './utils';

package/src/components/ConversationList/ConversationSearch/ConversationSearch.vue

@@ -37,6 +37,7 @@
       </div>
 
       <TUIDialog
+        appendTo="body"
         :customClasses="[$style.conversationSearch__advanced]"
         :visible="isShowStandard"
         :show-close="false"

package/src/components/LiveCoreView/index.vue

@@ -2,17 +2,18 @@
   <div
     ref="liveCoreViewContainerRef"
     class="live-core-view-container"
+    :class="{ 'align-center': isAlignCenter }"
   >
+    <div
+      v-if="!$slots.localVideo && !isPlayedVideo"
+      class="live-core-placeholder"
+    >
+      <span class="placeholder-text">{{ t('No video') }}</span>
+    </div>
     <div
       class="live-core-view"
       :style="streamViewStyle"
     >
-      <div
-        v-if="!$slots.localVideo && seatList.length === 0"
-        class="live-core-placeholder"
-      >
-        <span class="placeholder-text">{{ t('No video') }}</span>
-      </div>
       <div
         id="atomicx-live-stream-content"
         class="stream-content"
@@ -55,7 +56,7 @@ import { useLiveState } from '../../states/LiveState';
 import { useLoginState } from '../../states/LoginState';
 import { getContentSize } from '../../utils/domOperation';
 import DefaultStreamViewUI from './DefaultStreamViewUI.vue';
-import type { SeatUserInfo } from '../../types';
+import type { SeatInfo, SeatUserInfo } from '../../types';
 
 const { t } = useUIKit();
 const { seatList, canvas, startPlayStream, stopPlayStream } = useLiveSeatState();
@@ -63,23 +64,37 @@ const { currentLive } = useLiveState();
 
 const slots = useSlots();
 
-const ignoreLocalVideoPlay = computed(() => slots.localVideo);
+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;
+});
 
-onMounted(() => {
+onMounted(async () => {
   isMounted.value = true;
-  startPlayStream({ view: 'atomicx-live-stream-content' });
+  await startPlayStream({ view: 'atomicx-live-stream-content' });
+  isPlayedVideo.value = true;
 });
 
-onBeforeUnmount(() => {
+onBeforeUnmount(async () => {
   isMounted.value = false;
-  stopPlayStream();
+  await stopPlayStream();
+  isPlayedVideo.value = false;
 });
 
 const isPortraitContainer = ref(true);
 const liveCoreViewContainerRef = ref<HTMLDivElement>();
+
+const liveCoreViewContainerSize = ref<{ width: number; height: number }>({
+  width: 0,
+  height: 0,
+});
 const originStreamViewStyle = ref({
   width: 0,
   height: 0,
@@ -105,20 +120,30 @@ const ratioLayoutList = computed(() => {
 });
 
 const streamViewSize = computed(() => {
-  if (isPortraitContainer.value) {
-    return {
-      width: originStreamViewStyle.value.width,
-      height: originStreamViewStyle.value.height,
-    };
-  }
   return {
     width: originStreamViewStyle.value.width * originStreamViewStyle.value.scale,
     height: originStreamViewStyle.value.height * originStreamViewStyle.value.scale,
   };
 });
 
-const seatListWithRealSize = computed(() => seatList.value.map((item, index) => {
+const seatListWithRealSize = computed(() => seatList.value.map((item: SeatInfo, index: number) => {
   const ratioLayout = ratioLayoutList.value[index];
+  const isPortraitAndFill = isPortraitContainer.value && fillMode.value === StreamFillMode.Fill;
+  const isSampleWithCanvas = seatList.value.length === 1 || (item.region?.w === canvas.value.width && item.region?.h === canvas.value.height);
+  if (!isInStreamMixerComp.value && isPortraitAndFill && isSampleWithCanvas) {
+    return {
+      userInfo: item.userInfo as SeatUserInfo,
+      region: {
+        position: 'absolute' as const,
+        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 as SeatUserInfo,
     region: {
@@ -138,7 +163,7 @@ const seatListWithRealSize = computed(() => seatList.value.map((item, index) =>
 const localStreamViewInfo = computed(() => seatListWithRealSize.value.find(item => item?.userInfo?.userId === loginUserInfo.value?.userId));
 
 const needPlayStreamViewInfo = computed(() => {
-  if (ignoreLocalVideoPlay.value) {
+  if (isInStreamMixerComp.value) {
     return seatListWithRealSize.value.filter(item => item.userInfo?.userId !== loginUserInfo.value?.userId);
   }
   return seatListWithRealSize.value;
@@ -152,31 +177,31 @@ const needPlayStreamViewInfo = computed(() => {
 // Based on container B's actual size, calculate the actual position and size of each child element
 
 const visualStreamSize = computed(() => {
-  if (ratioLayoutList.value.length === 0) {
+  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: 0,
-      height: 0,
-      centerX: 0,
-      centerY: 0,
+      width: maxX - minX,
+      height: maxY - minY,
+      centerX: (minX + maxX) / 2,
+      centerY: (minY + maxY) / 2,
     };
   }
-  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,
+    width: 0,
+    height: 0,
+    centerX: 0,
+    centerY: 0,
   };
 });
 
@@ -188,11 +213,12 @@ function handleStreamListTransform() {
   if (!liveCoreViewContainerRef.value) {
     return;
   }
-  const containerRect = liveCoreViewContainerRef.value.getBoundingClientRect();
-  const containerWidth = Math.floor(containerRect.width);
-  const containerHeight = Math.floor(containerRect.height);
 
   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);
@@ -208,12 +234,6 @@ function handleStreamListTransform() {
 }
 
 const streamViewStyle = computed(() => {
-  if (isPortraitContainer.value) {
-    return {
-      width: `${Math.floor(originStreamViewStyle.value.width)}px`,
-      height: `${Math.floor(originStreamViewStyle.value.height)}px`,
-    };
-  }
   return {
     width: `${Math.floor(originStreamViewStyle.value.width) * originStreamViewStyle.value.scale}px`,
     height: `${Math.floor(originStreamViewStyle.value.height) * originStreamViewStyle.value.scale}px`,
@@ -246,6 +266,35 @@ const heightRatio: ComputedRef<number> = computed(() => {
   return Number(aspectRatio.value.split(':')[1]);
 });
 
+/**
+ * fillMode rules:
+ * Rule 1: If there is only one user in seatList, fillMode is Fill
+ * Rule 2: If a user's region in seatList matches the canvas size, fillMode is Fill
+ * Rule 3: If in landscape mode, fillMode must be Fit
+ */
+enum StreamFillMode {
+  Fit = 'fit',
+  Fill = 'fill',
+}
+
+const fillMode = ref<StreamFillMode>(StreamFillMode.Fit);
+
+watch(() => [canvas.value, seatList.value], () => {
+  if (canvas.value.width > canvas.value.height) {
+    fillMode.value = StreamFillMode.Fit;
+    handleStreamRegionSize();
+    return;
+  }
+  const onlyOneSeat = seatList.value.length === 1;
+  const hasOneFullScreenUser = seatList.value.find((item: any) => item.region?.w === canvas.value.width && item.region?.h === canvas.value.height);
+  if (!isInStreamMixerComp.value && (onlyOneSeat || hasOneFullScreenUser)) {
+    fillMode.value = StreamFillMode.Fill;
+  } else {
+    fillMode.value = StreamFillMode.Fit;
+  }
+  handleStreamRegionSize();
+});
+
 function handleStreamRegionSize() {
   if (!liveCoreViewContainerRef.value) {
     return;
@@ -257,13 +306,25 @@ function handleStreamRegionSize() {
   if (widthRatio.value && heightRatio.value) {
     const scaleWidth = containerWidth / widthRatio.value;
     const scaleHeight = containerHeight / heightRatio.value;
-    if (scaleWidth > scaleHeight) {
-      width = (containerHeight / heightRatio.value) * widthRatio.value;
-      height = containerHeight;
-    }
-    if (scaleWidth <= scaleHeight) {
-      width = containerWidth;
-      height = (containerWidth / widthRatio.value) * heightRatio.value;
+
+    if (fillMode.value === StreamFillMode.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;
@@ -283,6 +344,10 @@ const getContainerOrientation = () => {
   }
   const containerRect = liveCoreViewContainerRef.value.getBoundingClientRect();
   isPortraitContainer.value = containerRect.width < containerRect.height;
+  liveCoreViewContainerSize.value = {
+    width: containerRect.width,
+    height: containerRect.height,
+  };
 };
 
 const ro = new ResizeObserver(() => {
@@ -306,32 +371,33 @@ onBeforeUnmount(() => {
   width: 100%;
   height: 100%;
   display: flex;
-  overflow: hidden;
-  align-items: center;
   justify-content: center;
+  overflow: hidden;
+  &.align-center {
+    align-items: center;
+  }
+  .live-core-placeholder {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .placeholder-text {
+      color: var(--text-color-secondary, rgba(255, 255, 255, 0.55));
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 22px;
+    }
+  }
 
   .live-core-view {
     width: 100%;
     height: 100%;
-    position: relative;
-
-    .live-core-placeholder {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      .placeholder-text {
-        color: var(--text-color-secondary, rgba(255, 255, 255, 0.55));
-        font-size: 14px;
-        font-style: normal;
-        font-weight: 400;
-        line-height: 22px;
-      }
-    }
+    position: absolute;
 
     .stream-content {
       width: 100%;