增加临时房间

.env.eur

@@ -5,8 +5,8 @@ VITE_APP_CDN_URL=https://4dkk.4dage.com/v4/www/
 # sdk文件地址
 VITE_APP_SDK_DIR=https://testeurs3.4dkankan.com/v4/www/sdk
 # socket地址
-# VITE_APP_SOCKET_URL=wss://ws.gemer.xyz
-VITE_APP_SOCKET_URL=wss://testeurws.4dkankan.com
+VITE_APP_SOCKET_URL=wss://ws.gemer.xyz
+# VITE_APP_SOCKET_URL=wss://testeurws.4dkankan.com
 # VITE_APP_SOCKET_URL=wss://221.4.210.172:16666
 # 静态资源目录
 VITE_APP_STATIC_DIR=viewer

package.json

@@ -18,6 +18,7 @@
     "axios": "^1.1.3",
     "clipboard": "^2.0.11",
     "consola": "^2.15.3",
+    "dayjs": "^1.11.6",
     "lodash-es": "^4.17.21",
     "pinia": "^2.0.23",
     "pinia-plugin-persistedstate": "^2.3.0",

pnpm-lock.yaml

@@ -12,6 +12,7 @@ specifiers:
   commitizen: ^4.2.5
   consola: ^2.15.3
   cz-customizable: ^7.0.0
+  dayjs: ^1.11.6
   eslint: ^8.23.1
   eslint-config-prettier: ^8.5.0
   eslint-define-config: ^1.7.0
@@ -48,6 +49,7 @@ dependencies:
   axios: 1.1.3
   clipboard: 2.0.11
   consola: 2.15.3
+  dayjs: 1.11.6
   lodash-es: 4.17.21
   pinia: 2.0.23_l7r24p6nevbtlimqmqcwa3ouhu
   pinia-plugin-persistedstate: 2.3.0_pinia@2.0.23
@@ -2129,6 +2131,10 @@ packages:
       whatwg-url: 8.7.0
     dev: true
 
+  /dayjs/1.11.6:
+    resolution: {integrity: sha512-zZbY5giJAinCG+7AGaw0wIhNZ6J8AhWuSXKvuc1KAyMiRsvGQWqh4L+MomvhdAYjN+lqvVCMq1I41e3YHvXkyQ==}
+    dev: false
+
   /de-indent/1.0.2:
     resolution: {integrity: sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==}
     dev: true

src/components/chatRoom/chatroom.scss

@@ -68,6 +68,30 @@
       color: #fff;
     }
   }
+  .room_valid {
+    // width: 1.67rem;
+    height: 0.5rem;
+    background: rgba(0, 0, 0, 0.3);
+    border-radius: 0.25rem;
+    position: fixed;
+    top: 0.56rem;
+    left: 0.44rem;
+    padding: 0.07rem 0.17rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .members {
+      width: 0.42rem;
+      height: 0.42rem;
+      background: url(/@/assets/images/rtcLive/members@2x.png);
+      background-size: 100% 100%;
+      margin-right: 0.07rem;
+    }
+    span {
+      font-size: 0.24rem;
+      color: #fff;
+    }
+  }
   .controlBar {
     width: 9.51rem;
     height: 1.173333rem;

src/components/chatRoom/controls/actions.ts

@@ -9,6 +9,9 @@ import { useI18n } from '/@/hooks/useI18n';
 import browser from '/@/utils/browser';
 import { unref } from 'vue';
 import { useAppStore } from '/@/store/modules/app';
+import dayjs from 'dayjs';
+import duration from 'dayjs/plugin/duration';
+dayjs.extend(duration);
 // import { useRtcSdk } from '/@/hooks/useTRTC';
 interface ActionDataType {
   type: string;
@@ -88,6 +91,9 @@ export function handleActions({
     case 'sync-floor':
       handleSyncFloor(data);
 
+    case 'room-valid-time':
+      handleRoomValidTime(data);
+
     default:
       break;
   }
@@ -367,3 +373,26 @@ const handleSyncFloor = (data: FloorType) => {
     appStore.setFloor(data.floorId);
   }
 };
+interface RoomValidTimeType {
+  ttl: number;
+}
+const handleRoomValidTime = (data: RoomValidTimeType) => {
+  const rtcStore = useRtcStore();
+  const appStore = useAppStore();
+  appStore.setRoomValidTime(data.ttl);
+  if (rtcStore.isLeader) {
+    const seconds = data.ttl;
+    const time = dayjs.duration(seconds, 'seconds').format('mm:ss');
+    console.log('time', time);
+    const { t } = useI18n();
+    const msg = String(t('base.roomTimeOut')).replace(new RegExp('%time%', 'g'), time);
+    const chat: ChatContentType = {
+      role: 'leader',
+      mode: '',
+      Nickname: t('base.tips'),
+      UserId: rtcStore.userId,
+      text: msg,
+    };
+    rtcStore.addToChatList(chat);
+  }
+};

src/components/chatRoom/index.vue

@@ -7,6 +7,10 @@
       <div class="members"></div>
       <span>{{ members.length }}{{ t('base.view') }}</span>
     </div>
+
+    <div class="room_valid" v-if="isPanoramaMode && roomCounter > 0 && isNativeLeader">
+      <span>{{ dayjs.duration(roomCounter, 'seconds').format('mm:ss') }}</span>
+    </div>
     <!-- 当前人数 end -->
     <!-- 控制条 start -->
     <div class="controlBar" v-if="!showInput">
@@ -150,6 +154,9 @@
   import { useAppStore } from '/@/store/modules/app';
   import { useI18n } from '/@/hooks/useI18n';
   import { useLocale } from '/@/locales/useLocale';
+  import dayjs from 'dayjs';
+  import duration from 'dayjs/plugin/duration';
+  dayjs.extend(duration);
   // hook
   const { isDrawing, setDraw, setCloseDraw } = useDraw();
   const { initialRoom } = useRoom();
@@ -180,10 +187,14 @@
   const remoteStreams = computed(() => rtcStore.remoteStreams);
   const currentSession = computed(() => rtcStore.currentSession);
   const isPanoramaMode = computed(() => appStore.mode === 'panorama');
+
   const shareLink = ref<string>('');
   const showCloseDialog = ref(false);
   const showCreateNameDialog = ref(false);
+  const roomTTL = computed(() => appStore.ttl);
 
+  let roomCounter = ref(-1);
+  let roomCount: NodeJS.Timeout;
   const { t } = useI18n();
   const { sceneList } = useRoom();
 
@@ -198,6 +209,22 @@
     },
     { deep: true, immediate: true },
   );
+  watch(
+    () => roomTTL,
+    (val) => {
+      console.log('ttl', unref(val));
+      if (!roomCount && unref(val) > 0) {
+        roomCounter.value = unref(val);
+        roomCount = setInterval(() => {
+          roomCounter.value = roomCounter.value - 1;
+          if (unref(roomCounter) < 0) {
+            clearInterval(roomCount);
+          }
+        }, 1000);
+      }
+    },
+    { immediate: true, deep: true },
+  );
   //设置socket 参数
   const startJoin = (callback?: () => void) => {
     consola.info({

src/hooks/useTRTC.ts

@@ -344,7 +344,7 @@ async function handleStreamSubscribed(event) {
   const remoteStream = event.stream;
   const rtcStore = useRtcStore();
   // const { t } = useI18n();
-  debugger;
+  // debugger;
   const remoteUserId = remoteStream.getUserId();
   const remoteId = remoteStream.getId();
   if (remoteUserId == rtcStore.userId) {

src/locales/lang/en/base.ts

@@ -36,4 +36,6 @@ export default {
   connecting: 'Connecting...',
   baseError1: 'The scene is calculating, please try again later',
   baseError2: 'Abnormal studio, please contact the host.',
+  roomTimeOut:
+    '房间有效时长为%time%分钟，%time%分钟后将自动结束此次带看，请及时关注上方的剩余时长，谢谢！',
 };

src/locales/lang/zh/base.ts

@@ -35,4 +35,6 @@ export default {
   connecting: '连接中...',
   baseError1: '该场景正在计算中，请稍后再试',
   baseError2: '房间异常，请联系主持人',
+  roomTimeOut:
+    '房间有效时长为%time%分钟，%time%分钟后将自动结束此次带看，请及时关注上方的剩余时长，谢谢！',
 };

src/store/modules/app.ts

@@ -22,6 +22,7 @@ interface AppState {
   router: any;
   controlsBottom: string;
   isTourMode: boolean; // 自由观看模式
+  ttl: number;
 }
 
 export const useAppStore = defineStore({
@@ -46,9 +47,13 @@ export const useAppStore = defineStore({
     router: {},
     controlsBottom: '20px',
     isTourMode: true,
+    ttl: -1,
   }),
   getters: {},
   actions: {
+    setRoomValidTime(ttl: number): void {
+      this.ttl = ttl;
+    },
     setIsTourMode(payload: boolean): void {
       this.isTourMode = payload;
       const searchParams = new URLSearchParams(location.search);