fix: 细节修复

src/components/VideoControls/index.vue

@@ -17,8 +17,16 @@
 
     <div class="right">
       <div class="line">
-        <span class="txt">线路</span>
-        <div class="list">
+        <span
+          class="txt"
+          @click="showLine = !showLine"
+        >
+          线路
+        </span>
+        <div
+          class="list"
+          :class="{ show: showLine }"
+        >
           <div
             class="iten"
             :class="{ active: appStore.liveLine === item }"
@@ -31,9 +39,14 @@
         </div>
       </div>
       <div class="speed">
-        <span class="txt">倍速</span>
+        <span
+          class="txt"
+          @click="showSpeed = !showSpeed"
+          >倍速</span
+        >
         <div
           class="list"
+          :class="{ show: showSpeed }"
           @click="handleTip"
         >
           <div class="iten">2.0x</div>
@@ -48,11 +61,14 @@
 
 <script lang="ts" setup>
 import { VolumeHighOutline, VolumeMuteOutline } from '@vicons/ionicons5';
+import { ref } from 'vue';
 
 import { LiveLineEnum, LiveRoomTypeEnum } from '@/interface';
 import { useAppStore } from '@/store/app';
 
 const appStore = useAppStore();
+const showLine = ref(false);
+const showSpeed = ref(false);
 
 function handleTip() {
   window.$message.info('敬请期待~');
@@ -81,7 +97,7 @@ function changeLiveLine(item) {
   position: absolute;
   bottom: 0;
   left: 0;
-  z-index: 20;
+  z-index: 50;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -126,6 +142,9 @@ function changeLiveLine(item) {
         background-color: rgba($color: #000000, $alpha: 0.5);
         text-align: center;
         transform: translate(-50%, -100%);
+        &.show {
+          display: block;
+        }
         .iten {
           padding: 6px 10px;
           &.active {

src/hooks/use-pull.ts

@@ -106,9 +106,8 @@ export function usePull() {
   }
 
   function handlePlay(data: ILiveRoom) {
-    console.warn('handlePlay');
+    console.warn('handlePlay', data.type);
     roomLiving.value = true;
-    appStore.setLiveRoomInfo(data);
     flvurl.value = data.flv_url!;
     hlsurl.value = data.hls_url!;
     switch (data.type) {

src/network/webRTC.ts

@@ -250,7 +250,6 @@ export class WebRTCClass {
           const parameters = { ...sender.getParameters() };
           if (parameters.encodings[0]) {
             const val = 1000 * maxBitrate;
-            console.log(parameters.encodings[0].maxBitrate, val, 23223);
             if (parameters.encodings[0].maxBitrate === val) {
               console.log('最大码率不变，不设置');
               resolve(1);

src/views/home/index.vue

@@ -11,7 +11,10 @@
         ></Slider>
       </div>
       <div class="container">
-        <div class="left">
+        <div
+          class="left"
+          @click="showJoinBtn = !showJoinBtn"
+        >
           <div
             v-if="currentLiveRoom?.live_room?.cdn === 1"
             class="cdn-ico"
@@ -37,12 +40,12 @@
             <VideoControls></VideoControls>
             <div
               class="join-btn"
-              :style="{
-                display: !isMobile() ? 'none' : showControls ? 'block' : 'none',
+              :class="{
+                show: showJoinBtn,
               }"
             >
               <div
-                class="btn webrtc"
+                class="btn"
                 @click="joinRoom({ roomId: currentLiveRoom.live_room?.id! })"
               >
                 进入直播
@@ -147,7 +150,6 @@
 </template>
 
 <script lang="ts" setup>
-import { isMobile } from 'billd-utils';
 import { onMounted, ref, watch } from 'vue';
 import { useRouter } from 'vue-router';
 
@@ -156,10 +158,12 @@ import { sliderList } from '@/constant';
 import { usePull } from '@/hooks/use-pull';
 import { ILive } from '@/interface';
 import { routerName } from '@/router';
+import { useAppStore } from '@/store/app';
 
 const router = useRouter();
+const appStore = useAppStore();
 const canvasRef = ref<Element>();
-const showControls = ref(false);
+const showJoinBtn = ref(false);
 const topNums = ref(6);
 const topLiveRoomList = ref<ILive[]>([]);
 const otherLiveRoomList = ref<ILive[]>([]);
@@ -167,7 +171,7 @@ const currentLiveRoom = ref<ILive>();
 const interactionList = ref(sliderList);
 const remoteVideoRef = ref<HTMLDivElement>();
 
-const { handlePlay, videoLoading, remoteVideo, handleStopDrawing } = usePull();
+const { videoLoading, remoteVideo, handleStopDrawing, roomLiving } = usePull();
 
 watch(
   () => remoteVideo.value,
@@ -178,7 +182,6 @@ watch(
   },
   {
     deep: true,
-    immediate: true,
   }
 );
 
@@ -189,7 +192,8 @@ function changeLiveRoom(item: ILive) {
   canvasRef.value?.childNodes?.forEach((item) => {
     item.remove();
   });
-  handlePlay(item.live_room!);
+  appStore.setLiveRoomInfo(item.live_room!);
+  roomLiving.value = true;
 }
 
 async function getLiveRoomList() {
@@ -203,7 +207,8 @@ async function getLiveRoomList() {
       otherLiveRoomList.value = res.data.rows.slice(topNums.value);
       if (res.data.total) {
         currentLiveRoom.value = topLiveRoomList.value[0];
-        handlePlay(currentLiveRoom.value.live_room!);
+        appStore.setLiveRoomInfo(currentLiveRoom.value.live_room!);
+        roomLiving.value = true;
       }
     }
   } catch (error) {
@@ -312,9 +317,6 @@ function joinRoom(data: { roomId: number }) {
 
           user-select: none;
         }
-        .controls {
-          display: none;
-        }
 
         &:hover {
           .join-btn {
@@ -333,6 +335,9 @@ function joinRoom(data: { roomId: number }) {
           box-sizing: border-box;
           width: 80%;
           transform: translate(-50%, -50%);
+          &.show {
+            display: inline-flex !important;
+          }
 
           .btn {
             padding: 14px 26px;
@@ -346,12 +351,6 @@ function joinRoom(data: { roomId: number }) {
               background-color: $theme-color-gold;
               color: white;
             }
-            &.webrtc {
-              margin-right: 10px;
-            }
-            &.flv {
-              margin-right: 10px;
-            }
           }
         }
       }