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

package/src/components/VideoSettingPanel/i18n/zh-CN/index.ts

@@ -1,7 +1,12 @@
 export const resource = {
-  Camera: '摄像头',
+  'Camera': '摄像头',
   'Select device': '选择设备',
-  Preview: '预览',
+  'Preview': '预览',
   'Video profile': '视频设置',
-  Resolution: '分辨率',
+  'Resolution': '分辨率',
+  'Low Definition': '流畅',
+  'Standard Definition': '标清',
+  'High Definition': '高清',
+  'Super Definition': '超清',
+  'Off Camera': '摄像头已关闭',
 };

package/src/components/VideoSettingPanel/index.vue

@@ -2,30 +2,36 @@
   <div class="video-setting-panel">
     <template v-if="cameraSelectVisible">
       <div class="section">
-        <div class="section-title">{{ t('Camera') }}</div>
+        <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>
+      <div class="divider" />
     </template>
 
     <template v-if="videoPreviewVisible">
       <div class="section">
-        <div class="section-title">{{ t('Preview') }}</div>
+        <div class="section-title">
+          {{ t('Preview') }}
+        </div>
         <div class="preview-container">
           <video-preview class="video-preview" />
         </div>
       </div>
 
-      <div class="divider"></div>
+      <div class="divider" />
     </template>
 
     <template v-if="videoProfileVisible">
       <div class="section">
-        <div class="section-title">{{ t('Video profile') }}</div>
+        <div class="section-title">
+          {{ t('Video profile') }}
+        </div>
         <div class="row">
           <span class="label">{{ t('Resolution') }}</span>
           <video-profile />
@@ -36,15 +42,15 @@
 </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';
+import CameraSelect from './CameraSelect.vue';
+import VideoPreview from './VideoPreview.vue';
+import VideoProfile from './VideoProfile.vue';
 
 const { t } = useUIKit();
 
-const props = defineProps({
+defineProps({
   cameraSelectVisible: {
     type: Boolean,
     default: true,

package/src/hooks/useLongPress.ts

@@ -1,29 +1,24 @@
 import { ref, onUnmounted } from 'vue';
 
 interface UseLongPressOptions {
-  // 长按触发延迟（毫秒），默认500ms
   delay?: number;
-  // 是否阻止默认事件，默认true
   preventDefault?: boolean;
-  // 是否在指针离开元素时取消长按，默认true
   cancelOutsideElement?: boolean;
-  // 是否在指针移动超过阈值时取消长按，默认true
   cancelOnMove?: boolean | number;
   onContextMenu?: (event: PointerEvent) => void;
 }
 
-// 空操作函数
 const noop = () => {};
 
 /**
- * Vue3长按事件hook
- * @param onLongPress - 长按触发时的回调函数
- * @param options - 长按配置选项
- * @returns 事件处理器对象
+ * Vue3 long press hook
+ * @param onLongPress - long press callback function
+ * @param options - configuration options for long press behavior
+ * @returns event handlers and state for long press
  */
 export function useLongPress(
   onLongPress: ((event: PointerEvent) => void) | null,
-  options?: UseLongPressOptions
+  options?: UseLongPressOptions,
 ) {
   const effectiveCallback = onLongPress ?? noop;
 
@@ -35,7 +30,7 @@ export function useLongPress(
     onContextMenu,
   } = options || {};
 
-  let fixedThreshold = 5; // 移动阈值（像素）
+  let fixedThreshold = 5; // Default threshold for cancelOnMove
   if (typeof cancelOnMove === 'number') {
     fixedThreshold = cancelOnMove;
   }
@@ -44,7 +39,6 @@ export function useLongPress(
   let timer: ReturnType<typeof setTimeout> | null = null;
   let startCoords: { x: number; y: number } | null = null;
 
-  // 清除定时器和重置状态
   const clear = (event: PointerEvent) => {
     if (timer) {
       clearTimeout(timer);
@@ -54,7 +48,6 @@ export function useLongPress(
     isLongPressActive.value = false;
   };
 
-  // 开始处理：记录起始位置并开始定时器
   const start = (event: PointerEvent) => {
     clear(event);
     if (preventDefault) {
@@ -68,7 +61,6 @@ export function useLongPress(
     }, delay);
   };
 
-  // 移动处理：如果指针移动超过阈值则取消长按
   const move = (event: PointerEvent) => {
     if (!startCoords || !cancelOnMove) {
       return;
@@ -80,19 +72,16 @@ export function useLongPress(
     }
   };
 
-  // 结束处理：指针抬起，取消长按
   const end = (event: PointerEvent) => {
     clear(event);
   };
 
-  // 组件卸载时清理定时器
   onUnmounted(() => {
     if (timer) {
       clearTimeout(timer);
     }
   });
 
-  // 返回事件处理器
   const getEventHandlers = () => {
     if (onLongPress === null) {
       return {};
@@ -121,4 +110,4 @@ export function useLongPress(
   };
 }
 
-export type { UseLongPressOptions };
+export type { UseLongPressOptions };

package/src/hooks/useMessageActions.ts

@@ -42,13 +42,13 @@ interface MessageAction {
 const DEFAULT_ACTIONS: Record<string, MessageAction> = {
   copy: {
     key: 'copy',
-    label: 'Copy',
+    label: 'copy',
     visible: (message: MessageModel) => message.type === ChatEngine.TYPES.MSG_TEXT,
     icon: IconCopy,
   },
   recall: {
     key: 'recall',
-    label: 'Recall',
+    label: 'recall',
     visible: (message: MessageModel) =>
       !isCallMessage(message) && message.flow === 'out'
       && message.status === 'success'
@@ -57,19 +57,19 @@ const DEFAULT_ACTIONS: Record<string, MessageAction> = {
   },
   quote: {
     key: 'quote',
-    label: 'Quote',
+    label: 'quote',
     visible: (message: MessageModel) => !isCallMessage(message),
     icon: IconMsgQuote,
   },
   forward: {
     key: 'forward',
-    label: 'Forward',
+    label: 'forward',
     visible: (message: MessageModel) => !isCallMessage(message),
     icon: IconMsgForward,
   },
   delete: {
     key: 'delete',
-    label: 'Delete',
+    label: 'delete',
     icon: IconMsgDel,
     visible: true,
     style: {

package/src/hooks/useMouseHover.ts

@@ -1,14 +1,14 @@
 import { ref, onMounted, onUnmounted } from 'vue';
 
 /**
- * Vue3鼠标悬停检测hook
- * @param elementRef - 目标元素的ref
- * @returns 是否悬停的状态
+ * Vue3 mouse hover hook
+ * @param elementRef - ref of the target element to monitor hover state
+ * @returns isHovered - reactive state indicating whether the mouse is hovering over the element
  */
 export function useMouseHover<T extends HTMLElement = HTMLElement>(
-  elementRef: { value: T | null }
+  elementRef: { value: T | undefined },
 ) {
-  const isHovered = ref(false);
+  const isHovered = ref<boolean>(false);
 
   const handleMouseEnter = () => {
     isHovered.value = true;
@@ -34,7 +34,9 @@ export function useMouseHover<T extends HTMLElement = HTMLElement>(
     }
   });
 
-  return isHovered;
+  return {
+    isHovered,
+  };
 }
 
-export default useMouseHover;
+export default useMouseHover;

package/src/rtc/index.ts

@@ -6,10 +6,10 @@ import { BarrageList as BarrageListComponent } from '../components/BarrageList';
 import { CameraButton as CameraButtonComponent } from '../components/CameraButton';
 import { CoGuestPanel as CoGuestPanelComponent } from '../components/CoGuestPanel';
 import { LiveAudienceList as LiveAudienceListComponent } from '../components/LiveAudienceList';
+import { LiveCoreView as LiveCoreViewComponent } from '../components/LiveCoreView';
 import { LiveList as LiveListComponent } from '../components/LiveList';
 import { LiveMonitorView as LiveMonitorViewComponent } from '../components/LiveMonitorView';
 import { LiveScenePanel as LiveScenePanelComponent } from '../components/LiveScenePanel';
-import { LiveStreamView as LiveStreamViewComponent } from '../components/LiveStreamView';
 import { MicButton as MicButtonComponent } from '../components/MicButton';
 import { StreamMixer as StreamMixerComponent } from '../components/StreamMixer';
 import { StreamView as StreamViewComponent } from '../components/StreamView';
@@ -26,6 +26,7 @@ import { useLiveState as LiveState } from '../states/LiveState';
 import { useRoomState as RoomState } from '../states/RoomState';
 import { useUserState as UserState } from '../states/UserState';
 import { useVideoMixerState as VideoMixerState } from '../states/VideoMixerState';
+import { useRoomEngine as RoomEngine } from '../hooks/useRoomEngine';
 
 import RTCLoginServer from './server';
 
@@ -33,7 +34,7 @@ RTCLoginServer.getInstance().init();
 
 const BarrageList = BarrageListComponent;
 const BarrageInput = BarrageInputComponent;
-const LiveStreamView = LiveStreamViewComponent;
+const LiveCoreView = LiveCoreViewComponent;
 const StreamMixer = StreamMixerComponent;
 const LiveScenePanel = LiveScenePanelComponent;
 const LiveAudienceList = LiveAudienceListComponent;
@@ -59,12 +60,13 @@ const useDeviceState = DeviceState;
 const useLiveAudienceState = LiveAudienceState;
 const useRoomState = RoomState;
 const useVideoMixerState = VideoMixerState;
+const useRoomEngine = RoomEngine;
 
 export {
   // Components
   BarrageList,
   BarrageInput,
-  LiveStreamView,
+  LiveCoreView,
   StreamMixer,
   LiveScenePanel,
   LiveAudienceList,
@@ -80,6 +82,7 @@ export {
   VideoSetting,
 
   // States
+  useRoomEngine,
   useLiveState,
   useRoomState,
   useUserState,

package/src/types/contact.ts

@@ -32,6 +32,7 @@ export interface UserProfile {
   location: string;
   selfSignature: string;
   allowType: typeof TUIChatEngine.TYPES.ALLOW_TYPE_ALLOW_ANY
+
     | typeof TUIChatEngine.TYPES.ALLOW_TYPE_NEED_CONFIRM
     | typeof TUIChatEngine.TYPES.ALLOW_TYPE_DENY_ANY;
   avatar: string;
@@ -98,19 +99,32 @@ export interface GroupApplication {
   note: string;
 }
 
-// 参数接口
+export interface GroupApplicationParams {
+  application: GroupApplication;
+  handleMessage?: string;
+}
+
 export interface AddFriendParams {
   userID: string;
   addSource: string;
   remark?: string;
   groupName?: string;
   wording?: string;
-  type?: string;
+  type?: typeof TUIChatEngine.TYPES.SNS_ADD_TYPE_SINGLE
+    | typeof TUIChatEngine.TYPES.SNS_ADD_TYPE_BOTH;
+}
+
+export interface FriendApplicationParams {
+  userID: string;
+  remark?: string;
+  type: typeof TUIChatEngine.TYPES.SNS_APPLICATION_AGREE
+    | typeof TUIChatEngine.TYPES.SNS_APPLICATION_AGREE_AND_ADD;
 }
 
 export interface DeleteFriendParams {
   userIDList: string[];
-  type?: typeof TUIChatEngine.TYPES.SNS_DELETE_TYPE_SINGLE | typeof TUIChatEngine.TYPES.SNS_DELETE_TYPE_BOTH;
+  type?: typeof TUIChatEngine.TYPES.SNS_DELETE_TYPE_SINGLE
+    | typeof TUIChatEngine.TYPES.SNS_DELETE_TYPE_BOTH;
 }
 
 export interface FriendRemarkParams {
@@ -128,19 +142,168 @@ export interface RenameFriendGroupParams {
   newName: string;
 }
 
-export interface FriendApplicationParams {
-  userID: string;
-  remark?: string;
-  type?: typeof TUIChatEngine.TYPES.SNS_APPLICATION_AGREE | typeof TUIChatEngine.TYPES.SNS_APPLICATION_AGREE_AND_ADD;
-}
-
 export interface JoinGroupParams {
   groupID: string;
   applyMessage?: string;
-  type?: typeof TUIChatEngine.TYPES.JOIN_TYPE_FREE | typeof TUIChatEngine.TYPES.JOIN_TYPE_NEED_PERMISSION;
 }
 
-export interface GroupApplicationParams {
+export interface ContactGroupItem {
+  type: ContactItemType;
+  data: ContactItem;
+}
+
+export interface ContactGroup {
+  key: string;
+  type: ContactItemType;
+  title: string;
+  items: ContactItem[];
+  unreadCount?: number;
+  isExpanded: boolean;
+}
+
+export interface CustomGroupConfig {
+  title?: string;
+  hidden?: boolean;
+  order?: number;
+}
+
+export interface ContactGroupHeaderProps {
+  data: ContactGroup;
+  onClick: (event: MouseEvent) => void;
+}
+
+export interface ContactListProps {
+  activeContactItem?: ContactGroupItem;
+  enableSearch?: boolean;
+  groupConfig?: Partial<Record<ContactItemType, CustomGroupConfig>>;
+
+  searchPlaceholder?: string;
+  emptyText?: string;
+
+  ContactItem?: any;
+  ContactSearchComponent?: any;
+  GroupHeader?: any;
+  PlaceholderEmptyList?: any;
+
+  onContactItemClick?: (item: ContactGroupItem) => void;
+  onFriendApplicationAction?: (action: 'accept' | 'refuse', application: FriendApplication) => void;
+  onGroupApplicationAction?: (action: 'accept' | 'refuse', application: GroupApplication) => void;
+}
+
+export interface ContactInfoBaseProps {
+  showActions?: boolean;
+  onClose?: () => void;
+}
+
+export interface ContactInfoProps extends ContactInfoBaseProps {
+  contactItem?: ContactGroupItem | undefined;
+  PlaceholderEmpty?: any;
+  FriendInfoComponent?: any;
+  GroupInfoComponent?: any;
+  BlacklistInfoComponent?: any;
+  FriendApplicationInfoComponent?: any;
+  GroupApplicationInfoComponent?: any;
+  SearchGroupInfoComponent?: any;
+  SearchUserInfoComponent?: any;
+  onSendMessage?: (friend: Friend) => void;
+  onDeleteFriend?: (friend: Friend) => void;
+  onUpdateFriendRemark?: (friend: Friend, remark: string) => void;
+  onAddToBlacklist?: (friend: Friend) => void;
+  onRemoveFromBlacklist?: (profile: UserProfile) => void;
+  onEnterGroup?: (group: GroupModel) => void;
+  onLeaveGroup?: (group: GroupModel) => void;
+  onDismissGroup?: (group: GroupModel) => void;
+  onFriendApplicationAction?: (action: 'accept' | 'refuse', application: FriendApplication) => void;
+  onGroupApplicationAction?: (action: 'accept' | 'refuse', application: GroupApplication) => void;
+  onAddFriend?: (user: UserProfile, wording: string) => void;
+  onJoinGroup?: (group: GroupModel, note: string) => void;
+}
+
+export interface BlacklistInfoProps extends ContactInfoBaseProps {
+  profile: UserProfile;
+  onRemoveFromBlacklist?: (profile: UserProfile) => void;
+}
+
+export interface FriendApplicationInfoProps extends ContactInfoBaseProps {
+  application: FriendApplication;
+  onAccept?: (application: FriendApplication) => void;
+  onRefuse?: (application: FriendApplication) => void;
+}
+
+export interface FriendInfoProps extends ContactInfoBaseProps {
+  friend: Friend;
+  onSendMessage?: (friend: Friend) => void;
+  onDeleteFriend?: (friend: Friend) => void;
+  onAddToBlacklist?: (friend: Friend) => void;
+  onUpdateFriendRemark?: (friend: Friend, remark: string) => void;
+}
+
+export interface GroupApplicationInfoProps extends ContactInfoBaseProps {
   application: GroupApplication;
-  handleMessage?: string;
+  onAccept?: (application: GroupApplication) => void;
+  onRefuse?: (application: GroupApplication) => void;
+}
+
+export interface GroupInfoProps extends ContactInfoBaseProps {
+  group: GroupModel;
+  onEnterGroup?: (group: GroupModel) => void;
+  onLeaveGroup?: (group: GroupModel) => void;
+  onDismissGroup?: (group: GroupModel) => void;
+}
+
+export interface SearchGroupInfoProps extends ContactInfoBaseProps {
+  group: GroupModel;
+  onJoinGroup?: (group: GroupModel, note: string) => void;
+}
+
+export interface SearchUserInfoProps extends ContactInfoBaseProps {
+  user: UserProfile;
+  onAddFriend?: (user: UserProfile, wording: string) => void;
+}
+
+export interface ContactListItemProps {
+  contactItem: ContactGroupItem;
+  activeContactItem?: ContactGroupItem | undefined;
+  onClick?: (type: ContactItemType, item: ContactItem) => void;
+  onFriendApplicationAction?: (action: 'accept' | 'refuse', application: FriendApplication) => void;
+  onGroupApplicationAction?: (action: 'accept' | 'refuse', application: GroupApplication) => void;
+}
+
+export interface BlacklistItemProps {
+  profile: UserProfile;
+  isActive?: boolean;
+  onClick?: (profile: UserProfile) => void;
+}
+
+export interface FriendApplicationItemProps {
+  application: FriendApplication;
+  isActive?: boolean;
+  onClick?: (application: FriendApplication) => void;
+  onAction?: (action: 'accept' | 'refuse', application: FriendApplication) => void;
+}
+
+export interface FriendItemProps {
+  friend: Friend;
+  isActive?: boolean;
+  onClick?: (friend: Friend) => void;
+}
+
+export interface GroupApplicationItemProps {
+  application: GroupApplication;
+  isActive?: boolean;
+  onClick?: (application: GroupApplication) => void;
+  onAction?: (action: 'accept' | 'refuse', application: GroupApplication) => void;
+}
+
+export interface GroupItemProps {
+  group: GroupModel;
+  isActive?: boolean;
+  onClick?: (group: GroupModel) => void;
+}
+
+export interface ContactSearchProps {
+  placeholder?: string;
+  autoFocus?: boolean;
+  onResultClick?: (item: ContactGroupItem) => void;
+  onKeywordChange?: (keyword: string) => void;
 }

package/src/types/conversation.ts

@@ -1,9 +1,8 @@
-import type { Component } from 'vue';
-import type { CSSProperties } from 'vue';
-import type { CreateGroupParams } from '@tencentcloud/chat-uikit-engine';
+import type { Component, CSSProperties } from 'vue';
+import type { Friend } from './contact';
 import type { ConversationModel } from './engine';
 import type { AvatarProps } from '../components/Avatar';
-import type { Friend, UserProfile } from './contact';
+import type { CreateGroupParams } from '@tencentcloud/chat-uikit-engine';
 
 export interface ConversationListProps {
   /** Determines whether the conversation search input appears on the conversation list view. */
@@ -182,23 +181,16 @@ export interface ConversationActionsProps extends ConversationActionsConfig {
 }
 
 export interface ConversationCreateProps {
-  visible?: boolean;
-  className?: string;
-  style?: CSSProperties;
   onBeforeCreateConversation?: (
     (params: string | CreateGroupParams) => string | CreateGroupParams
   );
   onConversationCreated?: ((conversation: ConversationModel) => void);
-  'onUpdate:visible'?: ((visible: boolean) => void);
   conversationList?: ConversationModel[];
 }
 
 export interface ConversationCreateButtonProps {
-  visible?: boolean;
-  onClick?: (event: Event) => void;
-  height?: number;
-  width?: number;
-  className?: string;
+  onClick?: (value: CreateConvTypes) => void;
+  size?: number;
 }
 
 export enum PageStateTypes {
@@ -208,37 +200,34 @@ export enum PageStateTypes {
 }
 
 export interface ConversationCreateGroupDetailProps {
-  profileList: UserProfile[];
+  profileList: Friend[];
   pageState: PageStateTypes;
+  groupInfo: CreateGroupInfo;
+  onUpdateGroupInfo: (info: CreateGroupInfo) => void;
   setPageState: (state: PageStateTypes) => void;
-  onBeforeCreateConversation?: ((params: CreateGroupParams) => void);
-  onConversationCreated?: ((conversation: ConversationModel) => void);
 }
 
-export interface ConversationCreateSelectViewProps {
-  selectList: UserProfile[];
-  setSelectList: (list: UserProfile[]) => void;
-}
-
-export interface ConversationCreateUsers {
-  [key: string]: Friend[] | UserProfile[];
+export interface ConversationCreateUserSelectListProps {
+  isCreateGroup: boolean;
+  selectList: Friend[];
+  setSelectList: (list: Friend[]) => void;
 }
 
-export interface ConversationCreateUserSelectListProps extends ConversationCreateSelectViewProps {
-  isCreateGroup: boolean;
-  setIsCreateGroup: (value: boolean) => void;
-  conversationList: ConversationModel[];
-  setPageState: (state: PageStateTypes) => void;
-  onBeforeCreateConversation?: ((userID: string) => void);
-  onConversationCreated?: ((conversation: ConversationModel) => void);
-  className?: string;
+export interface ConversationGroupTypeInfoProps {
+  groupType: GroupType;
+  setGroupType: (type: GroupType) => void;
 }
 
 export enum PlaceHolderTypes {
   LOADING = 'LOADING',
   NO_CONVERSATIONS = 'NO_CONVERSATIONS',
   WRONG = 'WRONG',
-};
+}
+
+export enum CreateConvTypes {
+  C2C = 'createC2C',
+  GROUP = 'createGroup',
+}
 
 export interface ConversationPlaceHolderProps {
   type: PlaceHolderTypes;
@@ -247,3 +236,24 @@ export interface ConversationPlaceHolderProps {
   searchString?: string;
   retry?: () => void;
 }
+
+export enum GroupLabelTypes {
+  NAME = 'name',
+  GROUP_ID = 'groupID',
+  TYPE = 'type',
+}
+
+export enum GroupType {
+  WORK = 'Private',
+  PUBLIC = 'Public',
+  MEETING = 'ChatRoom',
+  AVCHATROOM = 'AVChatRoom',
+  COMMUNITY = 'Community',
+}
+
+export interface CreateGroupInfo {
+  avatar?: string;
+  name: string;
+  groupID: string;
+  type: GroupType;
+}

package/src/types/live.ts

@@ -1,7 +1,5 @@
 // Import from local types
-import { TUISeatMode } from './types';
-import { TUISeatLayoutTemplate } from '@tencentcloud/tuiroom-engine-js';
-import type { TUILoginUserInfo, TUIVideoStreamType } from './types';
+import type { TUISeatMode, TUILoginUserInfo, TUIVideoStreamType } from './types';
 
 export type LiveInfo = {
   liveId: string;
@@ -21,7 +19,7 @@ export type LiveInfo = {
   isSeatEnabled: boolean;
   seatMode: TUISeatMode;
   maxSeatCount: number;
-  layoutTemplate: TUISeatLayoutTemplate;
+  layoutTemplate: number;
   customInfo: Record<string, any>;
 };
 
@@ -104,5 +102,5 @@ export interface UpdateLiveInfoParams {
   coverUrl?: string;
   backgroundUrl?: string;
   isPublicVisible?: boolean;
-  layoutTemplate?: TUISeatLayoutTemplate;
+  layoutTemplate?: number;
 }

package/src/types/types.ts

@@ -1886,31 +1886,3 @@ export enum TUILiveLayoutManagerEvents {
    */
   onLiveVideoLayoutListChanged = 'onLiveVideoLayoutListChanged',
 }
-
-/**
- * 直播间麦位排版模板
- *
- * @enum {Number}
- */
-const TUISeatLayoutTemplate_HACK_JSDOC = {
-  /** 横屏动态1v3 */
-  LandscapeDynamic_1v3: 200,
-  /** 竖屏动态9宫格 */
-  PortraitDynamic_Grid9: 600,
-  /** 竖屏动态1v6  */
-  PortraitDynamic_1v6: 601,
-  /** 竖屏固定9宫格 */
-  PortraitFixed_Grid9: 800,
-  /** 竖屏固定1v6 */
-  PortraitFixed_1v6: 801,
-  /** 竖屏6v6 */
-  PortraitFixed_6v6: 802,
-};
-export enum TUISeatLayoutTemplate {
-  LandscapeDynamic_1v3 = 200,
-  PortraitDynamic_Grid9 = 600,
-  PortraitDynamic_1v6 = 601,
-  PortraitFixed_Grid9 = 800,
-  PortraitFixed_1v6 = 801,
-  PortraitFixed_6v6 = 802,
-}