fix: 优化

src/components/PullAuthTip/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="pull-auth">
-    <div class="auth-txt">需要权限</div>
+    <div class="auth-txt">SVIP</div>
   </div>
 </template>
 
@@ -11,19 +11,19 @@
   position: absolute !important;
   z-index: 10;
   border-radius: 4px;
-  background-color: rgba($color: black, $alpha: 0.5);
+  background-color: rgba($color: black, $alpha: 0.2);
 
   @extend %maskBg;
   .auth-txt {
     position: absolute;
-    top: 50%;
-    left: 50%;
+    top: 0;
+    right: 0;
     padding: 2px 10px;
-    border-radius: 6px;
+    border-radius: 0px 4px 0px 8px;
     background-color: rgba($color: $theme-color-gold, $alpha: 0.8);
     color: white;
     font-weight: bold;
-    transform: translate(-50%, -50%);
+    font-size: 13px;
   }
 }
 </style>

src/constant.ts

@@ -104,7 +104,7 @@ export const MODULE_CONFIG_SWITCH = {
   // qq登录
   qqLogin: true,
   // 微信扫码登录
-  wechatLogin: true,
+  wechatLogin: false,
   // github登录
   githubLogin: true,
   // 我要开播按钮

src/hooks/use-play.ts

@@ -36,6 +36,7 @@ export function useFlvPlay() {
   const retry = ref(0);
   const retryTimer = ref();
   const retrying = ref(false);
+  const flvIsPlaying = ref(false);
 
   onMounted(() => {});
 
@@ -115,6 +116,7 @@ export function useFlvPlay() {
           });
           videoEl.addEventListener('playing', () => {
             console.log('flv-playing');
+            flvIsPlaying.value = true;
             retry.value = 0;
             setMuted(cacheStore.muted);
             setVolume(cacheStore.volume);
@@ -160,7 +162,7 @@ export function useFlvPlay() {
     });
   }
 
-  return { flvPlayer, flvVideoEl, startFlvPlay, destroyFlv };
+  return { flvPlayer, flvVideoEl, flvIsPlaying, startFlvPlay, destroyFlv };
 }
 
 export function useHlsPlay() {
@@ -173,6 +175,7 @@ export function useHlsPlay() {
   const retry = ref(0);
   const retryTimer = ref();
   const retrying = ref(false);
+  const hlsIsPlaying = ref(false);
 
   onMounted(() => {});
 
@@ -285,6 +288,7 @@ export function useHlsPlay() {
         });
         hlsPlayer.value?.on('playing', () => {
           console.log('hls-playing');
+          hlsIsPlaying.value = true;
           setMuted(cacheStore.muted);
           setVolume(cacheStore.volume);
           retry.value = 0;
@@ -308,5 +312,5 @@ export function useHlsPlay() {
     });
   }
 
-  return { hlsPlayer, hlsVideoEl, startHlsPlay, destroyHls };
+  return { hlsPlayer, hlsVideoEl, hlsIsPlaying, startHlsPlay, destroyHls };
 }

src/hooks/use-pull.ts

@@ -29,6 +29,7 @@ export function usePull() {
   const msgIsFile = ref(false);
   const autoplayVal = ref(false);
   const videoLoading = ref(false);
+  const isPlaying = ref(false);
   const flvurl = ref('');
   const hlsurl = ref('');
   const videoHeight = ref();
@@ -49,8 +50,8 @@ export function usePull() {
     damuList,
   } = useSrsWs();
   isPull.value = true;
-  const { flvVideoEl, startFlvPlay, destroyFlv } = useFlvPlay();
-  const { hlsVideoEl, startHlsPlay, destroyHls } = useHlsPlay();
+  const { flvVideoEl, flvIsPlaying, startFlvPlay, destroyFlv } = useFlvPlay();
+  const { hlsVideoEl, hlsIsPlaying, startHlsPlay, destroyHls } = useHlsPlay();
   const stopDrawingArr = ref<any[]>([]);
 
   onUnmounted(() => {
@@ -225,6 +226,19 @@ export function usePull() {
     }
   );
 
+  watch(
+    () => hlsIsPlaying.value,
+    (newVal) => {
+      isPlaying.value = newVal;
+    }
+  );
+  watch(
+    () => flvIsPlaying.value,
+    (newVal) => {
+      isPlaying.value = newVal;
+    }
+  );
+
   watch(
     () => networkStore.rtcMap,
     (newVal) => {
@@ -392,6 +406,7 @@ export function usePull() {
     keydownDanmu,
     sendDanmu,
     addVideo,
+    isPlaying,
     msgIsFile,
     mySocketId,
     videoHeight,

src/layout/mobile/head/index.vue

@@ -6,6 +6,7 @@
         @click="router.push({ name: mobileRouterName.h5 })"
       ></div>
       <a
+        v-if="MODULE_CONFIG_SWITCH.github"
         class="github"
         target="_blank"
         href="https://github.com/galaxy-s10/billd-live"
@@ -38,6 +39,7 @@
 import { onMounted, ref } from 'vue';
 import { useRoute } from 'vue-router';
 
+import { MODULE_CONFIG_SWITCH } from '@/constant';
 import router, { mobileRouterName } from '@/router';
 import { AppRootState, useAppStore } from '@/store/app';
 

src/views/area/id/index.vue

@@ -19,6 +19,17 @@
               }')`,
             }"
           >
+            <PullAuthTip
+              v-if="
+                iten?.pull_is_should_auth === LiveRoomPullIsShouldAuthEnum.yes
+              "
+            ></PullAuthTip>
+            <div
+              v-if="iten?.live"
+              class="living-ico"
+            >
+              直播中
+            </div>
             <div
               v-if="iten?.cdn === 1"
               class="cdn-ico"
@@ -45,7 +56,7 @@ import { onMounted, ref, watch } from 'vue';
 import { useRoute } from 'vue-router';
 
 import { fetchLiveRoomList } from '@/api/area';
-import { ILiveRoom } from '@/interface';
+import { ILiveRoom, LiveRoomPullIsShouldAuthEnum } from '@/interface';
 import router, { routerName } from '@/router';
 
 const liveRoomList = ref<ILiveRoom[]>([]);
@@ -117,6 +128,20 @@ async function getData() {
           border-radius: 8px;
           background-position: center center;
           background-size: cover;
+          .living-ico {
+            position: absolute;
+            top: 0px;
+            left: 0px;
+            z-index: 10;
+            padding: 0 10px;
+            height: 20px;
+            border-radius: 8px 0 10px;
+            background-color: $theme-color-gold;
+            color: white;
+            text-align: center;
+            font-size: 12px;
+            line-height: 20px;
+          }
           .cdn-ico {
             position: absolute;
             top: -10px;

src/views/h5/area/index.vue

@@ -16,6 +16,17 @@
             }')`,
           }"
         >
+          <PullAuthTip
+            v-if="
+              iten?.pull_is_should_auth === LiveRoomPullIsShouldAuthEnum.yes
+            "
+          ></PullAuthTip>
+          <div
+            v-if="iten?.live"
+            class="living-ico"
+          >
+            <div class="live-txt">直播中</div>
+          </div>
           <div
             v-if="iten?.cdn === 1"
             class="cdn-ico"
@@ -41,7 +52,7 @@ import { onMounted, ref } from 'vue';
 import { useRoute } from 'vue-router';
 
 import { fetchLiveRoomList } from '@/api/area';
-import { ILiveRoom } from '@/interface';
+import { ILiveRoom, LiveRoomPullIsShouldAuthEnum } from '@/interface';
 import router, { routerName } from '@/router';
 
 const liveRoomList = ref<ILiveRoom[]>([]);
@@ -95,6 +106,23 @@ async function getData() {
         border-radius: 8px;
         background-position: center center;
         background-size: cover;
+        .living-ico {
+          position: absolute;
+          top: 0px;
+          left: 0px;
+          z-index: 10;
+          padding: 0 6px;
+          border-radius: 8px 0 10px;
+          background-color: $theme-color-gold;
+          color: white;
+          text-align: center;
+          font-size: 12px;
+          .live-txt {
+            transform-origin: center !important;
+
+            @include minFont(10);
+          }
+        }
         .cdn-ico {
           position: absolute;
           top: -12px;

src/views/h5/index.vue

@@ -7,7 +7,6 @@
       {{ currentSwiper.txt }}
     </div>
 
-    <!-- <div v-if="currentNav.id === appStore.mobileNav?.id"> -->
     <div class="type-list">
       <div
         v-for="(item, index) in liveRoomList"
@@ -41,6 +40,18 @@
                 }')`,
               }"
             >
+              <PullAuthTip
+                v-if="
+                  iten?.live_room?.pull_is_should_auth ===
+                  LiveRoomPullIsShouldAuthEnum.yes
+                "
+              ></PullAuthTip>
+              <div
+                v-if="iten?.live_room?.live"
+                class="living-ico"
+              >
+                直播中
+              </div>
               <div
                 v-if="iten.live_room?.cdn === 1"
                 class="cdn-ico"
@@ -67,7 +78,11 @@
 import { onMounted, onUnmounted, ref } from 'vue';
 
 import { fetchAreaLiveRoomList } from '@/api/area';
-import { IArea, IAreaLiveRoom } from '@/interface';
+import {
+  IArea,
+  IAreaLiveRoom,
+  LiveRoomPullIsShouldAuthEnum,
+} from '@/interface';
 import router, { mobileRouterName, routerName } from '@/router';
 
 const liveRoomList = ref<IArea[]>([]);
@@ -215,6 +230,20 @@ onUnmounted(() => {
             border-radius: 8px;
             background-position: center center;
             background-size: cover;
+            .living-ico {
+              position: absolute;
+              top: 0px;
+              left: 0px;
+              z-index: 10;
+              padding: 0 10px;
+              height: 20px;
+              border-radius: 8px 0 10px;
+              background-color: $theme-color-gold;
+              color: white;
+              text-align: center;
+              font-size: 12px;
+              line-height: 20px;
+            }
             .cdn-ico {
               position: absolute;
               top: -12px;

src/views/h5/room/index.vue

@@ -87,8 +87,8 @@
                       }}]
                     </span>
                     <span v-else>{{ item.socket_id }}[游客]</span>
+                    <span>：</span>
                   </span>
-                  <span>：</span>
                   <span
                     class="msg"
                     v-if="!item.msgIsFile"
@@ -134,7 +134,13 @@
             class="customerService-wrap"
             :style="{ height: containerHeight + 'px' }"
           >
-            敬请期待！
+            <img
+              class="qrcode"
+              v-if="frontendWechatQrcode !== ''"
+              :src="frontendWechatQrcode"
+              alt=""
+            />
+            <div class="tip">打开微信扫一扫添加客服</div>
           </div>
         </n-tab-pane>
         <n-tab-pane
@@ -183,6 +189,7 @@
 import { nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
 import { useRoute } from 'vue-router';
 
+import { fetchFindLiveConfigByKey } from '@/api/liveConfig';
 import { fetchFindLiveRoom } from '@/api/liveRoom';
 import { usePull } from '@/hooks/use-pull';
 import { DanmuMsgTypeEnum, LiveRoomTypeEnum } from '@/interface';
@@ -199,6 +206,7 @@ const danmuListRef = ref<HTMLDivElement>();
 const showPlayBtn = ref(false);
 const containerHeight = ref(0);
 const videoWrapHeight = ref(0);
+const frontendWechatQrcode = ref('');
 const remoteVideoRef = ref<HTMLDivElement>();
 
 const {
@@ -208,6 +216,7 @@ const {
   sendDanmu,
   closeRtc,
   closeWs,
+  isPlaying,
   autoplayVal,
   videoLoading,
   damuList,
@@ -218,6 +227,29 @@ const {
   videoHeight,
 } = usePull();
 
+onUnmounted(() => {
+  closeWs();
+  closeRtc();
+});
+
+onMounted(() => {
+  getWechatQrcode();
+  setTimeout(() => {
+    scrollTo(0, 0);
+  }, 100);
+  videoWrapHeight.value =
+    document.documentElement.clientWidth / appStore.videoRatio;
+  nextTick(() => {
+    if (danmuListRef.value && bottomRef.value) {
+      const res =
+        bottomRef.value.getBoundingClientRect().top -
+        danmuListRef.value.getBoundingClientRect().top;
+      containerHeight.value = res;
+    }
+  });
+  getLiveRoomInfo();
+});
+
 watch(
   () => remoteVideo.value,
   (newVal) => {
@@ -231,12 +263,14 @@ watch(
   }
 );
 
-function handleScrollTop() {
-  if (danmuListRef.value) {
-    danmuListRef.value.scrollTop = danmuListRef.value.scrollHeight + 10000;
+watch(
+  () => isPlaying.value,
+  (newVal) => {
+    if (newVal) {
+      showPlayBtn.value = false;
+    }
   }
-}
-
+);
 watch(
   () => damuList.value.length,
   () => {
@@ -246,6 +280,12 @@ watch(
   }
 );
 
+function handleScrollTop() {
+  if (danmuListRef.value) {
+    danmuListRef.value.scrollTop = danmuListRef.value.scrollHeight + 10000;
+  }
+}
+
 function handleRefresh() {
   if (appStore.liveRoomInfo) {
     handlePlay(appStore.liveRoomInfo);
@@ -278,27 +318,17 @@ function startPull() {
   showPlayBtn.value = false;
   handlePlay(appStore.liveRoomInfo!);
 }
-onUnmounted(() => {
-  closeWs();
-  closeRtc();
-});
 
-onMounted(() => {
-  setTimeout(() => {
-    scrollTo(0, 0);
-  }, 100);
-  videoWrapHeight.value =
-    document.documentElement.clientWidth / appStore.videoRatio;
-  nextTick(() => {
-    if (danmuListRef.value && bottomRef.value) {
-      const res =
-        bottomRef.value.getBoundingClientRect().top -
-        danmuListRef.value.getBoundingClientRect().top;
-      containerHeight.value = res;
+async function getWechatQrcode() {
+  try {
+    const res = await fetchFindLiveConfigByKey('frontend_wechat_qrcode');
+    if (res.code === 200) {
+      frontendWechatQrcode.value = res.data.value;
     }
-  });
-  getLiveRoomInfo();
-});
+  } catch (error) {
+    console.log(error);
+  }
+}
 </script>
 
 <style lang="scss" scoped>
@@ -436,7 +466,8 @@ onMounted(() => {
       font-size: 13px;
 
       .name {
-        color: #9499a0;
+        color: white;
+        opacity: 0.8;
         cursor: pointer;
         &.system {
           color: red;
@@ -444,7 +475,7 @@ onMounted(() => {
       }
       .msg {
         margin-top: 4px;
-        color: #61666d;
+        color: white;
         &.img {
           img {
             width: 80%;
@@ -459,6 +490,16 @@ onMounted(() => {
     height: 300px;
     color: white;
   }
+  .customerService-wrap {
+    position: relative;
+    text-align: center;
+    .qrcode {
+      display: block;
+      margin: 0 auto 10px;
+      width: 200px;
+      height: 200px;
+    }
+  }
   .send-msg {
     position: fixed;
     bottom: 0;

src/views/home/index.vue

@@ -26,7 +26,7 @@
             v-if="item.length"
             :list="item"
             :width="docW"
-            :speed="120"
+            :speed="60"
             :direction="index % 2 === 0 ? 'l-r' : 'r-l'"
             :customStyle="{ margin: '0 auto' }"
           ></Slider>
@@ -258,7 +258,7 @@ watch(
 );
 
 function handleSlideList() {
-  const row = 3;
+  const row = 2;
   const res: any[] = [];
   const count = Math.ceil(sliderList.length / row);
   for (let i = 0, len = sliderList.length; i < len; i += count) {