feat: 全面优化

src/components/Dropdown/index.vue

@@ -1,9 +1,17 @@
 <template>
   <div class="dropdown-wrap">
-    <div class="btn">
+    <div
+      class="btn"
+      @click="emits('update:modelValue', !modelValue)"
+    >
       <slot name="btn"></slot>
     </div>
-    <div class="container">
+    <div
+      class="container"
+      :style="{
+        display: !isMobile() ? 'auto' : modelValue ? 'block' : 'none',
+      }"
+    >
       <div class="wrap">
         <slot name="list"></slot>
       </div>
@@ -11,7 +19,15 @@
   </div>
 </template>
 
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import { isMobile } from 'billd-utils';
+import { defineProps } from 'vue';
+
+const props = defineProps({
+  modelValue: { type: Boolean, default: false },
+});
+const emits = defineEmits(['update:modelValue']);
+</script>
 
 <style lang="scss" scoped>
 .dropdown-wrap {
@@ -23,6 +39,7 @@
   }
   .btn {
     cursor: pointer;
+    user-select: none;
   }
   .container {
     position: absolute;

src/hooks/use-play.ts

@@ -111,6 +111,7 @@ export function useHlsPlay() {
           // @ts-ignore
           this.play();
           resolve('ok');
+
           setTimeout(() => {
             newVideo.muted = false;
             appStore.setMuted(false);

src/hooks/use-pull.ts

@@ -696,6 +696,7 @@ export function usePull({
     userName,
     userAvatar,
     currentLiveRoom,
+    hlsurl,
     coverImg,
     roomNoLive,
     damuList,

src/layout/pc/head/index.vue

@@ -62,7 +62,10 @@
       </div>
     </div>
     <div class="right">
-      <Dropdown class="doc">
+      <Dropdown
+        v-model="dropdownDoc"
+        class="doc"
+      >
         <template #btn>
           <div class="btn">
             文档<VPIconChevronDown class="icon"></VPIconChevronDown>
@@ -87,7 +90,10 @@
         </template>
       </Dropdown>
 
-      <Dropdown class="ecosystem">
+      <Dropdown
+        v-model="dropdownSys"
+        class="ecosystem"
+      >
         <template #btn>
           <div class="btn">
             生态系统<VPIconChevronDown class="icon"></VPIconChevronDown>
@@ -128,7 +134,10 @@
         </template>
       </Dropdown>
 
-      <Dropdown class="about">
+      <Dropdown
+        v-model="dropdownAbout"
+        class="about"
+      >
         <template #btn>
           <div class="btn">
             关于<VPIconChevronDown class="icon"></VPIconChevronDown>
@@ -256,6 +265,9 @@ import { useUserStore } from '@/store/user';
 const router = useRouter();
 const userStore = useUserStore();
 const githubStar = ref('');
+const dropdownDoc = ref(false);
+const dropdownSys = ref(false);
+const dropdownAbout = ref(false);
 
 const about = ref([
   {

src/views/h5/room/index.vue

@@ -187,9 +187,6 @@ async function startPull() {
     hlsurl: liveRoomInfo.value!.hls_url!,
     videoEl: remoteVideoRef.value!,
   });
-  // setTimeout(() => {
-  //   appStore.setMuted(false);
-  // }, 0);
 }
 
 onMounted(() => {

src/views/pull/index.vue

@@ -51,6 +51,17 @@
               :muted="appStore.muted"
               @click="showControls = !showControls"
             ></video>
+            <div
+              v-if="
+                route.query.liveType === liveTypeEnum.srsHlsPull &&
+                hlsurl &&
+                showPlayBtn
+              "
+              class="tip-btn"
+              @click="startPull"
+            >
+              点击播放
+            </div>
             <div
               class="controls"
               :style="{
@@ -223,6 +234,7 @@ import { useRoute } from 'vue-router';
 
 import { fetchGoodsList } from '@/api/goods';
 import { loginTip } from '@/hooks/use-login';
+import { useHlsPlay } from '@/hooks/use-play';
 import { usePull } from '@/hooks/use-pull';
 import {
   DanmuMsgTypeEnum,
@@ -270,6 +282,7 @@ const {
   userName,
   userAvatar,
   currentLiveRoom,
+  hlsurl,
   coverImg,
   roomNoLive,
   damuList,
@@ -285,6 +298,17 @@ const {
   isFlv: route.query.liveType === liveTypeEnum.srsFlvPull,
   isSRS: route.query.liveType === liveTypeEnum.srsWebrtcPull,
 });
+const showPlayBtn = ref(true);
+
+const { startHlsPlay } = useHlsPlay();
+
+async function startPull() {
+  showPlayBtn.value = false;
+  await startHlsPlay({
+    hlsurl: hlsurl.value,
+    videoEl: remoteVideoRef.value!,
+  });
+}
 
 async function getGoodsList() {
   try {
@@ -349,7 +373,11 @@ onMounted(() => {
         topRef.value.getBoundingClientRect().height);
     containerRef.value.style.height = `${res}px`;
   }
-  initPull();
+  if (route.query.liveType === liveTypeEnum.srsHlsPull) {
+    initPull(false);
+  } else {
+    initPull();
+  }
 });
 </script>