fix: 修复已知问题

README.md

@@ -94,6 +94,14 @@ npm run build
 
 ~~不通过 npm 安装 flv.js，因为安装了 flv.js 后，`import flvJs from 'flv.js'` 会导致 vscode 的 ts 错乱。因此直接下载 flv.min.js 使用。~~，应该是我的 vscode 用了 vscode 的 ts 版本（ts 的 5.x 版本），用回工作区（也就是项目里面安装的 ts 的 4.9 的版本）的 ts 版本就没事了
 
+## video.js 报错
+
+Chrome 版本 114.0.5735.133（正式版本） (arm64)，调试移动端的时候，此时的地址栏是：http://localhost:8000/h5/3?liveType=srsHlsPull，使用模拟的安卓设备，点击播放没问题（播放的 hls），但是换成模拟一个苹果设备（任意苹果设备都行，iphone6,7,8,X,12 Pro 等等），点击播放都会报错：`VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) The media could not be loaded, either because the server or network failed or because the format is not supported.`
+
+Firefox 版本 114.0.2 (64 位)，调试移动端时，此时的地址栏是：http://localhost:8000/h5/3?liveType=srsHlsPull，模拟安卓、苹果设备都能正常播放，但是小概率会报 blob 解码，但刷新就又好了
+
+Safari 版本：版本 16.5.1 (18615.2.9.11.7)，开发===>响应式设计模式，模拟任何苹果设备，都能正常播放，并且行为和实际的苹果手机行为一致（苹果手机有的 bug，在电脑的 Safari 调试的时候也有。但电脑的 Firfox 和 Chrome 调试时没有，实际上电脑的 Firfox 和 Chrome 调试时应该也要出现这个 bug）
+
 ## 团队
 
 [https://live.hsslive.cn/about/team](https://live.hsslive.cn/about/team)

src/components/FullLoading/index.ts

@@ -62,7 +62,6 @@ export const fullLoading = function (option: IOption): IOption {
 // 不推荐。
 // export const usefullLoading = {
 //   install: (app: App) => {
-//     console.log('kkkkkk', app);
 //     // 挂载在根实例的全局配置上
 //     app.config.globalProperties['$fullLoading'] = fullLoading;
 //   },

src/components/VideoControls/index.vue

@@ -1,7 +1,6 @@
 <template>
   <div class="video-controls-wrap">
     <div
-      v-if="!appStore.muted"
       class="item"
       @click="appStore.setMuted(!appStore.muted)"
     >
@@ -9,19 +8,8 @@
         size="25"
         color="white"
       >
-        <VolumeHighOutline></VolumeHighOutline>
-      </n-icon>
-    </div>
-    <div
-      v-else
-      class="item"
-      @click="appStore.setMuted(!appStore.muted)"
-    >
-      <n-icon
-        size="25"
-        color="white"
-      >
-        <VolumeMuteOutline></VolumeMuteOutline>
+        <VolumeMuteOutline v-if="appStore.muted"></VolumeMuteOutline>
+        <VolumeHighOutline v-else></VolumeHighOutline>
       </n-icon>
     </div>
   </div>
@@ -47,6 +35,7 @@ const appStore = useAppStore();
   width: 100%;
   z-index: 1;
   height: 40px;
+  user-select: none;
   background-image: linear-gradient(
     -180deg,
     rgba(0, 0, 0, 0),

src/hooks/use-play.ts

@@ -68,13 +68,19 @@ export function useHlsPlay() {
       videoEl.value?.remove();
     }
   }
+  function setMuted(val) {
+    if (videoEl.value) {
+      videoEl.value.muted = val;
+    }
+    if (hlsPlayer.value) {
+      hlsPlayer.value.muted(val);
+    }
+  }
 
   watch(
     () => appStore.muted,
     (newVal) => {
-      if (videoEl.value) {
-        videoEl.value.muted = newVal;
-      }
+      setMuted(newVal);
     }
   );
 

src/hooks/use-pull.ts

@@ -352,6 +352,7 @@ export function usePull({
     videoEl?: HTMLVideoElement;
   }) {
     if (isSRS) {
+      if (!autoplayVal.value) return;
       console.warn('开始new SRSWebRTCClass', getSocketId());
       const rtc = new SRSWebRTCClass({
         roomId: `${roomId.value}___${getSocketId()}`,
@@ -387,6 +388,7 @@ export function usePull({
         console.log(error);
       }
     } else {
+      if (!autoplayVal.value) return;
       console.warn('开始new WebRTCClass');
       const rtc = new WebRTCClass({
         roomId: `${roomId.value}___${receiver!}`,
@@ -488,15 +490,14 @@ export function usePull({
           data.data.live_room?.type === LiveRoomTypeEnum.user_obs ||
           data.data.live_room?.type === LiveRoomTypeEnum.system
         ) {
+          if (!autoplayVal.value) return;
           if (judgeDevice().isIphone) {
-            if (!autoplayVal.value) return;
             await startHlsPlay({
               hlsurl: flvurl.value,
               videoEl: remoteVideoRef.value!,
             });
             videoLoading.value = false;
           } else {
-            if (!autoplayVal.value) return;
             await startFlvPlay({
               flvurl: flvurl.value,
               videoEl: remoteVideoRef.value!,

src/layout/mobile/head/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="m-head-wrap">
+  <div class="h5-head-wrap">
     <div class="logo-bar">
       <div
         class="logo"
@@ -8,11 +8,11 @@
     </div>
     <nav class="nav-list">
       <div
-        v-for="(item, index) in navList"
+        v-for="(item, index) in appStore.navList"
         :key="index"
         class="item"
-        :class="{ active: appStore.mobileNav.id === item.id }"
-        @click="appStore.setMobileNav(item)"
+        :class="{ active: route.name === item.routeName }"
+        @click="changeRoute(item)"
       >
         {{ item.name }}
       </div>
@@ -21,23 +21,21 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
+import { useRoute } from 'vue-router';
 
 import router, { mobileRouterName } from '@/router';
-import { useAppStore } from '@/store/app';
+import { AppRootState, useAppStore } from '@/store/app';
 
+const route = useRoute();
 const appStore = useAppStore();
-const navList = ref([
-  { id: 1, name: '频道' },
-  { id: 2, name: '排行' },
-  { id: 3, name: '我的' },
-]);
 
-const currentNav = ref(navList.value[0]);
+function changeRoute(item: AppRootState['navList'][0]) {
+  router.push({ name: item.routeName });
+}
 </script>
 
 <style lang="scss" scoped>
-.m-head-wrap {
+.h5-head-wrap {
   .logo-bar {
     display: flex;
     align-items: center;

src/router/index.ts

@@ -10,6 +10,8 @@ export const mobileRouterName = {
   h5: 'h5',
   h5Room: 'h5Room',
   h5Area: 'h5Area',
+  h5Rank: 'h5Rank',
+  h5Profile: 'h5Profile',
 };
 
 export const routerName = {
@@ -146,6 +148,16 @@ export const defaultRoutes: RouteRecordRaw[] = [
         path: 'area/:areaId',
         component: () => import('@/views/h5/area/index.vue'),
       },
+      {
+        name: mobileRouterName.h5Rank,
+        path: 'rank',
+        component: () => import('@/views/h5/rank/index.vue'),
+      },
+      {
+        name: mobileRouterName.h5Profile,
+        path: 'profile',
+        component: () => import('@/views/h5/profile/index.vue'),
+      },
     ],
   },
   {

src/store/app/index.ts

@@ -1,9 +1,11 @@
 import { defineStore } from 'pinia';
 
-type AppRootState = {
+import { mobileRouterName } from '@/router';
+
+export type AppRootState = {
   liveStatus: boolean;
   muted: boolean;
-  mobileNav: { id: number; name: string };
+  navList: { routeName: string; name: string }[];
 };
 
 export const useAppStore = defineStore('app', {
@@ -11,7 +13,11 @@ export const useAppStore = defineStore('app', {
     return {
       liveStatus: false,
       muted: true,
-      mobileNav: { id: 1, name: '频道' },
+      navList: [
+        { routeName: mobileRouterName.h5, name: '频道' },
+        { routeName: mobileRouterName.h5Rank, name: '排行' },
+        { routeName: mobileRouterName.h5Profile, name: '我的' },
+      ],
     };
   },
   actions: {
@@ -21,8 +27,5 @@ export const useAppStore = defineStore('app', {
     setMuted(res: AppRootState['muted']) {
       this.muted = res;
     },
-    setMobileNav(res: AppRootState['mobileNav']) {
-      this.mobileNav = res;
-    },
   },
 });

src/views/h5/area/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="m-area-wrap">
+  <div class="h5-area-wrap">
     <div class="title">{{ route.query.name }}</div>
     <div class="live-room-list">
       <div
@@ -60,15 +60,14 @@ async function getData() {
     id: Number(route.params.areaId),
   });
   if (res.code === 200) {
-    console.log(2);
     liveRoomList.value = res.data.rows;
   }
 }
 </script>
 
 <style lang="scss" scoped>
-.m-area-wrap {
-  padding: 10px 20px;
+.h5-area-wrap {
+  padding: 0 20px;
   .title {
     margin-bottom: 10px;
   }

src/views/h5/index.vue

@@ -7,10 +7,8 @@
       {{ currentSwiper.txt }}
     </div>
 
-    <div
-      v-if="currentNav.id === appStore.mobileNav?.id"
-      class="type-list"
-    >
+    <!-- <div v-if="currentNav.id === appStore.mobileNav?.id"> -->
+    <div class="type-list">
       <div
         v-for="(item, index) in liveRoomList"
         :key="index"
@@ -56,12 +54,6 @@
         </div>
       </div>
     </div>
-    <div
-      v-else
-      class="null"
-    >
-      敬请期待~
-    </div>
   </div>
 </template>
 

src/views/h5/profile/index.vue

@@ -0,0 +1,12 @@
+<template>
+  <div class="h5-profile-wrap">建设中...</div>
+</template>
+
+<script lang="ts" setup></script>
+
+<style lang="scss" scoped>
+.h5-profile-wrap {
+  padding: 0 20px;
+  margin-top: 5px;
+}
+</style>

src/views/h5/rank/index.vue

@@ -0,0 +1,12 @@
+<template>
+  <div class="h5-rank-wrap">建设中...</div>
+</template>
+
+<script lang="ts" setup></script>
+
+<style lang="scss" scoped>
+.h5-rank-wrap {
+  padding: 0 20px;
+  margin-top: 5px;
+}
+</style>

src/views/h5/room/index.vue

@@ -50,12 +50,7 @@
       >
         点击播放
       </div>
-      <div
-        v-if="!showPlayBtn"
-        class="controls"
-      >
-        <VideoControls></VideoControls>
-      </div>
+      <VideoControls v-else></VideoControls>
     </div>
     <div class="danmu-list">
       <div class="title">弹幕专区</div>
@@ -281,9 +276,6 @@ onMounted(() => {
         color: white;
       }
     }
-    .controls {
-      display: block;
-    }
   }
 
   .danmu-list {

src/views/pull/recharge/index.vue

@@ -55,7 +55,6 @@ const goodsInfo = reactive({
 });
 
 async function startPay() {
-  console.log(money.value, minMoney);
   if (money.value < minMoney) {
     window.$message.warning(`最少充值${minMoney}元！`);
     return;

src/views/shop/index.vue

@@ -94,7 +94,6 @@ async function getGoodsList(type: GoodsTypeEnum) {
       orderBy: 'desc',
     });
     if (res.code === 200) {
-      console.log(res.data);
       list.value = res.data.rows;
     }
   } catch (error) {