更新优化

dist/index.html

@@ -5,7 +5,7 @@
     <link rel="icon" href="./favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>管乐迷</title>
-    <script type="module" crossorigin src="./assets/index.90171202.js"></script>
+    <script type="module" crossorigin src="./assets/index.d3251cd4.js"></script>
     <link rel="modulepreload" href="./assets/vendor.9de3b924.js">
     <link rel="stylesheet" href="./assets/index.fb6968e4.css">
     <script type="module">!function(){try{new Function("m","return import(m)")}catch(o){console.warn("vite: loading legacy build because dynamic import is unsupported, syntax error above should be ignored");var e=document.getElementById("vite-legacy-polyfill"),n=document.createElement("script");n.src=e.src,n.onload=function(){System.import(document.getElementById('vite-legacy-entry').getAttribute('data-src'))},document.body.appendChild(n)}}();</script>
@@ -15,6 +15,6 @@
     
     <script nomodule>!function(){var e=document,t=e.createElement("script");if(!("noModule"in t)&&"onbeforeload"in t){var n=!1;e.addEventListener("beforeload",(function(e){if(e.target===t)n=!0;else if(!e.target.hasAttribute("nomodule")||!n)return;e.preventDefault()}),!0),t.type="module",t.src=".",e.head.appendChild(t),t.remove()}}();</script>
     <script nomodule id="vite-legacy-polyfill" src="./assets/polyfills-legacy.68541211.js"></script>
-    <script nomodule id="vite-legacy-entry" data-src="./assets/index-legacy.b96c2a82.js">System.import(document.getElementById('vite-legacy-entry').getAttribute('data-src'))</script>
+    <script nomodule id="vite-legacy-entry" data-src="./assets/index-legacy.55cb2894.js">System.import(document.getElementById('vite-legacy-entry').getAttribute('data-src'))</script>
   </body>
 </html>

src/components/live-broadcast/header.module.less

@@ -5,6 +5,7 @@
   padding: 13px 19px;
   height: var(--header-height);
   box-sizing: border-box;
+  background: rgba(0,0,0,.6);
   >.title{
     font-size: 18px;
     font-weight: normal;

src/components/live-broadcast/header.tsx

@@ -4,13 +4,14 @@ import runtime, * as RuntimeUtils from './runtime'
 import { state } from '/src/state'
 import request from '/src/helpers/request'
 import styles from './header.module.less'
+import { removeToken } from '/src/utils/auth'
 
 export default defineComponent({
   name: 'LiveBroadcastHeader',
   methods: {
     async startLive() {
       try {
-        await ElMessageBox.confirm('是否确认开始直播？', '提示', {
+        await ElMessageBox.confirm('开启后学生将看到视频画面', '提示', {
           confirmButtonText: '确定',
           cancelButtonText: '取消',
           type: 'warning',
@@ -23,7 +24,7 @@ export default defineComponent({
     },
     async closeLive() {
       try {
-        await ElMessageBox.confirm('是否确认结束直播？', '提示', {
+        await ElMessageBox.confirm('关闭后将切断视频，学生不可观', '提示', {
           confirmButtonText: '确定',
           cancelButtonText: '取消',
           type: 'warning',
@@ -38,17 +39,44 @@ export default defineComponent({
         await RuntimeUtils.closeLive()
         ElMessage.success('关闭成功')
       } catch (error) {}
+    },
+    async closeRoom() {
+      try {
+        await ElMessageBox.confirm('关闭后将切断视频，学生不可观', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning',
+        })
+        // 异步获取用户信息
+        const id = state.user?.id
+        await request.get('/api-web/imLiveBroadcastRoom/roomDestroy/' + id, {})
+        RuntimeUtils.closeDevice('camera')
+        RuntimeUtils.closeDevice('microphone')
+        state.user = null
+        removeToken();
+        ElMessage.success('关闭成功');
+        (this as any).$router.push({
+          path: '/login',
+          query: {
+            ...this.$route.query
+          }
+        });
+      } catch (error) {}
     }
   },
   render() {
     return (
-      <div class={styles.header}>
+      <div class={styles.header} >
         <h3 class={styles.title}>直播内容：{ state.user?.liveRemark }</h3>
-        {runtime.videoStatus === 'liveing' ? (
-          <ElButton type="danger" color="#EA4132" onClick={this.closeLive}>关闭直播</ElButton>
-        ) : (
-          <ElButton type="primary" color="#01A79E" onClick={this.startLive}>开始直播</ElButton>
-        )}
+        <div>
+          {runtime.videoStatus === 'liveing' ? (
+            <ElButton type="danger" color="#EA4132" onClick={this.closeLive}>关闭视频</ElButton>
+          ) : (
+            <ElButton type="primary" color="#01A79E" onClick={this.startLive}>开启视频</ElButton>
+          )}
+
+          <ElButton type="primary" color="#EA4132" onClick={this.closeRoom}>关闭直播间</ElButton>
+        </div>
       </div>
     )
   }

src/components/live-broadcast/index.module.less

@@ -1,5 +1,6 @@
 .main{
   --header-height: 68px;
+  --header-height-down: -68px;
   --action-bar-height: 88px;
   width: calc(100% - 385px);
   background-color: var(--live-backound-color);
@@ -8,9 +9,10 @@
   flex-direction: column;
   height: calc(100vh - var(--header-bar-height));
   overflow: hidden;
+  position: relative;
   .video{
     width: 100%;
-    max-height: calc(100vh - var(--header-bar-height) - var(--header-height) - var(--action-bar-height));
+    max-height: calc(100vh - var(--header-bar-height) - var(--action-bar-height));
     flex: 1;
     background-color: var(--video-backound-color);
     position: relative;
@@ -19,4 +21,49 @@
       height: 100%;
     }
   }
+  .headerSection {
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    z-index: 999;
+    .headerAnimation {
+      transform: translateY(0);
+    }
+    .headerContent{
+      opacity: 0;
+      animation-name: header-down;
+      animation-duration: 0.5s;
+      animation-fill-mode: forwards;
+      animation-delay: 0.1s;
+    }
+  }
+
+  .header-top {
+    opacity: 0;
+    animation-name: header-up;
+    animation-duration: 0.5s;
+    animation-fill-mode: forwards;
+    animation-delay: 0.1s;
+  }
+  @keyframes header-up {
+    0% {
+      transform: translateY(0);
+      opacity: 0;
+    }
+    100% {
+      transform: translateY(var(--header-height-down));
+      opacity: 1;
+    }
+  }
+  @keyframes header-down {
+    0% {
+      transform: translateY(var(--header-height-down));
+      opacity: 0;
+    }
+    100% {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
 }

src/components/live-broadcast/index.tsx

@@ -17,6 +17,20 @@ let cameraVideoTrack: RTC.RCLocalTrack
 
 export default defineComponent({
   name: 'LiveBroadcast',
+  data() {
+    return {
+      headerStatus: false
+    }
+  },
+  computed: {
+    isLive() {
+      console.log(runtime.videoStatus)
+      if(runtime.videoStatus === 'liveing') {
+        this.toggleHeaderStatus(true)
+      }
+      return runtime.videoStatus === 'liveing'
+    }
+  },
   async mounted() {
     this.initializeRoom()
     RuntimeUtils.loopSyncLike()
@@ -136,11 +150,26 @@ export default defineComponent({
       // removeMedia(runtime.mediaStreams, runtime.mediaStreamTrack)
       runtime.videoStatus = 'stream'
     },
+    toggleHeaderStatus(status: boolean, time?: number) {
+      setTimeout(() => {
+        this.headerStatus = status
+      }, time || 3000);
+    },
+    onMousemove() {
+      
+    },
+    onMouseleave() {
+
+    }
   },
   render() {
     return (
       <div class={styles.main}>
-        <Header/>
+        {this.isLive ? null : null}
+        {/* , this.headerStatus ? styles['header-top'] : null */}
+        <div class={[styles.headerSection]} onMousemove={this.onMousemove} onMouseleave={this.onMouseleave}>
+          <Header class={[this.headerStatus ? styles.headerContent : styles.headerAnimation]} />
+        </div>
         <div class={styles.video}>
           <video ref={videoRef}></video>
           {!runtime.screenShareStatus ? <VideoStatus/> : null}

src/components/live-message/index.tsx

@@ -23,7 +23,7 @@ export default defineComponent({
   },
   computed: {
     joinStatus() {
-      console.log(this.modelIndex)
+      // console.log(this.modelIndex)
       let status = runtimeModel.joinTips
       const list = Object.values(runtimeModel.joinList)
       if(runtimeModel.joinTips && this.modelIndex === 'join' || list.length <= 0) {

src/components/live-message/model/index.module.less

@@ -90,3 +90,22 @@
   top: 0;
   bottom: 0;
 }
+
+
+.slide-top-enter-active {
+  opacity: 0;
+  animation-name: error-num;
+  animation-duration: 0.5s;
+  animation-fill-mode: forwards;
+  animation-delay: 0.1s;
+}
+@keyframes error-num {
+	0% {
+		transform: translateY(30px);
+		opacity: 0;
+	}
+	100% {
+		transform: translateY(0);
+		opacity: 1;
+	}
+}

src/components/live-message/model/look-model.tsx

@@ -18,10 +18,10 @@ export default defineComponent({
   computed: {
     count() {
       let count = 0
-      for (const key in runtimeModel.joinList) {
-        if (Object.prototype.hasOwnProperty.call(runtimeModel.joinList, key)) {
-          const item = runtimeModel.joinList[key];
-          if (item.type === 3) {
+      for (const key in runtimeModel.lookList) {
+        if (Object.prototype.hasOwnProperty.call(runtimeModel.lookList, key)) {
+          const item = runtimeModel.lookList[key];
+          if (item.userRoomType === 2 || item.userRoomType === 4) {
             count += 1
           }
           if (count > 3) {
@@ -93,6 +93,10 @@ export default defineComponent({
     },
     async onUpLook(item: any) {
       try {
+        console.log(this.count, runtimeModel.lookList, 'this.count, runtimeModel.lookList')
+        if(this.count > 3) {
+          return
+        }
         // RC:Chatroom:SeatResponse type teacherName teacherId audienceName audienceId
         // 操作类型 1 主讲人同意 2 主讲人拒绝 3 观众同意 4 观众拒绝
         // RC:Chatroom:SeatApply type teacherName teacherId audienceName audienceId

src/components/live-message/model/message-model.tsx

@@ -1,4 +1,4 @@
-import { defineComponent } from "vue";
+import { defineComponent, Transition } from "vue";
 import { ElTag } from "element-plus";
 // import VirtualList from 'vue-virtual-list-v3';
 // import VirtualList from 'vue3-virtual-list'
@@ -103,12 +103,12 @@ export default defineComponent({
     return (
       <div style={{ minHeight: '100%', position: 'relative' }} id="messageList">
         {runtime.messageList.length > 0 ? runtime.messageList.map((item: any) => (
-          <div class={styles.itemContent}>
+          <div class={[styles.itemContent, styles["slide-top-enter-active"]]}>
             <div class={styles.itemInfo}>
               <div class={styles.itemName}>
                 <div class={styles.userName}>
                   {item.isSelf ? <ElTag effect="dark" color="#01A79E">主讲人</ElTag> : null}
-                  <span class={styles['name-style']}>{item.name}{ item.system ? null : '：' }</span>
+                  <span class={styles['name-style']}>{item.name}{item.system ? null : '：'}</span> 
                   <span class={[styles.itemText, item.isSelf ? styles.active : null]}>
                     {item.content}
                   </span>