fix: 优化

src/hooks/use-pull.ts

@@ -41,8 +41,15 @@ export function usePull(roomId: string) {
   const isRemoteDesk = ref(false);
   const videoElArr = ref<HTMLVideoElement[]>([]);
   const remoteVideo = ref<HTMLElement[]>([]);
-  const { mySocketId, initWs, roomLiving, anchorInfo, liveUserList, damuList } =
-    useWebsocket();
+  const {
+    mySocketId,
+    initWs,
+    isBilibili,
+    roomLiving,
+    anchorInfo,
+    liveUserList,
+    damuList,
+  } = useWebsocket();
   const { flvVideoEl, flvIsPlaying, startFlvPlay, destroyFlv } = useFlvPlay();
   const { hlsVideoEl, hlsIsPlaying, startHlsPlay, destroyHls } = useHlsPlay();
   const stopDrawingArr = ref<any[]>([]);
@@ -454,7 +461,7 @@ export function usePull(roomId: string) {
     const instance = networkStore.wsMap.get(roomId);
     if (!instance) return;
     const requestId = getRandomString(8);
-    console.log(danmuMsgType.value, 2221);
+    console.log(isBilibili.value, isBilibili, 'isBilibili');
     const messageData: WsMessageType['data'] = {
       socket_id: '',
       msg: danmuStr.value,
@@ -463,6 +470,7 @@ export function usePull(roomId: string) {
       msgIsFile: msgIsFile.value,
       send_msg_time: +new Date(),
       user_agent: navigator.userAgent,
+      isBilibili: isBilibili.value,
     };
     instance.send({
       requestId,
@@ -474,6 +482,7 @@ export function usePull(roomId: string) {
   }
 
   return {
+    initWs,
     videoWrapRef,
     handlePlay,
     handleStopDrawing,

src/hooks/use-push.ts

@@ -346,6 +346,7 @@ export function usePush() {
         msgIsFile: msgIsFile.value,
         send_msg_time: +new Date(),
         user_agent: navigator.userAgent,
+        isBilibili: false,
       },
     });
     danmuStr.value = '';

src/hooks/use-websocket.ts

@@ -628,6 +628,7 @@ export const useWebsocket = () => {
         userInfo: data.user_info,
         msgIsFile: data.data.msgIsFile,
         send_msg_time: data.data.send_msg_time,
+        isBilibili: data.data.isBilibili,
       });
     });
 
@@ -965,19 +966,19 @@ export const useWebsocket = () => {
   }) {
     roomId.value = data.roomId;
     isAnchor.value = data.isAnchor;
-    if (data.isRemoteDesk) {
+    if (data.isRemoteDesk !== undefined) {
       isRemoteDesk.value = data.isRemoteDesk;
     }
-    if (data.isBilibili) {
+    if (data.isBilibili !== undefined) {
       isBilibili.value = data.isBilibili;
     }
-    if (data.currentMaxBitrate) {
+    if (data.currentMaxBitrate !== undefined) {
       currentMaxBitrate.value = data.currentMaxBitrate;
     }
-    if (data.currentMaxFramerate) {
+    if (data.currentMaxFramerate !== undefined) {
       currentMaxFramerate.value = data.currentMaxFramerate;
     }
-    if (data.currentResolutionRatio) {
+    if (data.currentResolutionRatio !== undefined) {
       currentResolutionRatio.value = data.currentResolutionRatio;
     }
     new WebSocketClass({
@@ -991,6 +992,7 @@ export const useWebsocket = () => {
   return {
     initWs,
     handleStartLive,
+    isBilibili,
     connectStatus,
     mySocketId,
     canvasVideoStream,

src/types/websocket.ts

@@ -168,6 +168,7 @@ export interface IDanmu {
   live_room_id: number;
   redbag_send_id?: number;
   msg_id?: number;
+  isBilibili?: boolean;
 
   socket_id: string;
   request_id?: string;

src/views/area/id/index.vue

@@ -84,6 +84,7 @@
 </template>
 
 <script lang="ts" setup>
+import { openToTarget } from 'billd-utils';
 import { onMounted, reactive, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
@@ -128,10 +129,11 @@ function goRoom(item: ILiveRoom) {
     window.$message.info('该直播间没在直播~');
     return;
   }
-  router.push({
+  const url = router.resolve({
     name: routerName.pull,
     params: { roomId: item.id },
   });
+  openToTarget(url.href);
 }
 
 onMounted(() => {
@@ -185,6 +187,7 @@ async function getData() {
     display: flex;
     align-content: flex-start;
     flex-wrap: wrap;
+    justify-content: space-between;
     .item {
       display: inline-block;
       margin-right: 25px;

src/views/home/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     class="home-wrap"
-    ref="doc"
+    ref="docRef"
   >
     <div class="play-container">
       <div
@@ -207,26 +207,27 @@
     <!-- <div
       style="position: fixed; bottom: 200px; right: 0; background-color: red"
     >
-      {{ arrivedState }}
-    </div> -->
-
-    <div class="ad-wrap">
-      <!-- live-首页广告位1 -->
-      <ins
-        class="adsbygoogle"
-        style="display: block"
-        data-ad-client="ca-pub-6064454674933772"
-        data-ad-slot="3325489849"
-        data-ad-format="auto"
-        data-full-width-responsive="true"
-      ></ins>
+      {{ isBottom }}
     </div>
+     -->
+    <div ref="loadMoreRef"></div>
     <div class="foot">*{{ t('home.copyrightTip') }}~</div>
   </div>
+  <div class="ad-wrap-a">
+    <!-- live-首页广告位1 -->
+    <ins
+      class="adsbygoogle"
+      style="display: block"
+      data-ad-client="ca-pub-6064454674933772"
+      data-ad-slot="3325489849"
+      data-ad-format="auto"
+      data-full-width-responsive="true"
+    ></ins>
+  </div>
 </template>
 
 <script lang="ts" setup>
-import { useScroll } from '@vueuse/core';
+import { openToTarget } from 'billd-utils';
 import { onMounted, reactive, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router';
@@ -264,8 +265,8 @@ const currentLiveRoom = ref<ILive>();
 const interactionList = ref<any[]>([]);
 const videoWrapTmpRef = ref<HTMLDivElement>();
 const remoteVideoRef = ref<HTMLDivElement>();
-const docW = document.documentElement.clientWidth;
-const doc = ref<HTMLElement | null>(null);
+const docRef = ref<HTMLElement | null>();
+const loadMoreRef = ref<HTMLElement | null>();
 
 const pageParams = reactive({ page: 0, page_size: 30, platform: 'web' });
 const { t } = useI18n();
@@ -277,13 +278,33 @@ const {
   handleStopDrawing,
   handlePlay,
 } = usePull(route.params.roomId as string);
-const { arrivedState } = useScroll(doc, {
-  offset: { top: 0, bottom: 400, right: 0, left: 0 },
-});
+const isBottom = ref(false);
 const first = ref(true);
+const rootMargin = {
+  bottom: 600,
+  top: 0,
+  left: 0,
+  right: 0,
+};
 onMounted(() => {
   //  @ts-ignore
   (adsbygoogle = window.adsbygoogle || []).push({});
+  const intersectionObserver = new IntersectionObserver(
+    (entries) => {
+      entries.forEach((item) => {
+        if (item.isIntersecting) {
+          isBottom.value = true;
+        } else {
+          isBottom.value = false;
+        }
+      });
+    },
+    {
+      // root: '',
+      rootMargin: `${rootMargin.top}px ${rootMargin.right}px ${rootMargin.bottom}px ${rootMargin.left}px`,
+    }
+  );
+  intersectionObserver.observe(loadMoreRef.value!);
   handleSlideList();
   getLiveRoomList();
   getBg();
@@ -291,7 +312,7 @@ onMounted(() => {
 });
 
 watch(
-  () => arrivedState.bottom,
+  () => isBottom.value,
   async (newval) => {
     if (newval && !first.value) {
       const arr = await handleBilibil();
@@ -414,18 +435,20 @@ async function getLiveRoomList() {
 }
 
 function joinRoom(data) {
-  router.push({
+  const url = router.resolve({
     name: routerName.pull,
     params: { roomId: data.id },
     query: { is_bilibili: data.is_bilibili },
   });
+  openToTarget(url.href);
 }
 </script>
 
 <style lang="scss" scoped>
 .home-wrap {
-  overflow: scroll;
-  height: calc(100vh - $header-height);
+  // overflow: scroll;
+  // height: 100vh;
+  // height: calc(100vh - $header-height);
   .play-container {
     position: relative;
     z-index: 1;
@@ -778,26 +801,28 @@ function joinRoom(data) {
       }
     }
   }
-  .ad-wrap {
-    position: fixed;
-    top: 300px;
-    left: 10px;
-    width: 250px;
-    // height: 150px;
-    border-radius: 10px;
-    // background-color: red;
-    cursor: pointer;
-    ins {
-      width: 100%;
-      height: 100%;
-    }
-  }
+
   .foot {
     margin-top: 10px;
     text-align: center;
   }
 }
 
+.ad-wrap-a {
+  position: fixed;
+  top: 300px;
+  left: 10px;
+  // background-color: red;
+  z-index: 999;
+  width: 250px;
+  // height: 150px;
+  border-radius: 10px;
+  ins {
+    width: 100%;
+    height: 100%;
+  }
+}
+
 // 屏幕宽度小于1330的时候
 @media screen and (max-width: 1330px) {
   .home-wrap {

src/views/pull/index.vue

@@ -456,7 +456,6 @@ import { commentAuthTip, loginTip } from '@/hooks/use-login';
 import { useFullScreen, usePictureInPicture } from '@/hooks/use-play';
 import { usePull } from '@/hooks/use-pull';
 import { useQiniuJsUpload } from '@/hooks/use-upload';
-import { useWebsocket } from '@/hooks/use-websocket';
 import {
   DanmuMsgTypeEnum,
   GiftRecordStatusEnum,
@@ -507,6 +506,7 @@ const loopGetLiveUserTimer = ref();
 const isBilibili = ref(false);
 
 const {
+  initWs,
   initPull,
   closeWs,
   closeRtc,
@@ -526,7 +526,7 @@ const {
   anchorInfo,
 } = usePull(roomId.value);
 
-const { initWs } = useWebsocket();
+// const { initWs } = useWebsocket();
 
 const rtcRtt = computed(() => {
   const arr: any[] = [];
@@ -576,12 +576,12 @@ onMounted(() => {
     isBilibili.value = false;
     initPull({});
   } else {
-    // initWs({
-    //   roomId: roomId.value,
-    //   isRemoteDesk: false,
-    //   isBilibili: true,
-    //   isAnchor: false,
-    // });
+    initWs({
+      roomId: roomId.value,
+      isRemoteDesk: false,
+      isBilibili: true,
+      isAnchor: false,
+    });
     isBilibili.value = true;
     handleBilibil();
   }
@@ -1250,11 +1250,11 @@ function handleScrollTop() {
       position: absolute;
       bottom: -10px;
       left: 0;
+      z-index: 999;
       width: 100%;
       // height: 150px;
       border-radius: 10px;
       // background-color: red;
-      cursor: pointer;
       transform: translateY(100%);
       ins {
         width: 100%;
@@ -1477,11 +1477,11 @@ function handleScrollTop() {
     position: fixed;
     top: 300px;
     left: 10px;
+    z-index: 999;
     width: 250px;
     // height: 150px;
     border-radius: 10px;
     // background-color: red;
-    cursor: pointer;
     ins {
       width: 100%;
       height: 100%;

src/views/rank/index.vue

@@ -118,6 +118,7 @@
 </template>
 
 <script lang="ts" setup>
+import { openToTarget } from 'billd-utils';
 import { onMounted, reactive, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
@@ -256,10 +257,11 @@ function handleJump(item) {
 }
 
 function handleJoin(item) {
-  router.push({
+  const url = router.resolve({
     name: routerName.pull,
     params: { roomId: item.live.live_room_id },
   });
+  openToTarget(url.href);
 }
 
 async function getWalletList() {