shuisheng il y a 2 ans
Parent
commit
7392fcf8aa
4 fichiers modifiés avec 31 ajouts et 11 suppressions
  1. 0 1
      src/hooks/use-play.ts
  2. 1 7
      src/views/h5/index.vue
  3. 2 1
      src/views/h5/room/index.vue
  4. 28 2
      src/views/home/index.vue

+ 0 - 1
src/hooks/use-play.ts

@@ -210,7 +210,6 @@ export function useHlsPlay() {
               }
             });
           }
-          hlsVideoEl.value = videoEl;
           resolve('');
         });
         hlsPlayer.value?.on('loadedmetadata', () => {

+ 1 - 7
src/views/h5/index.vue

@@ -70,12 +70,6 @@ import { fetchAreaLiveRoomList } from '@/api/area';
 import { IArea, IAreaLiveRoom } from '@/interface';
 import router, { mobileRouterName, routerName } from '@/router';
 
-const navList = ref([
-  { id: 1, name: '频道' },
-  { id: 2, name: '排行' },
-  { id: 3, name: '我的' },
-]);
-
 const liveRoomList = ref<IArea[]>([]);
 
 const swiperList = ref([
@@ -84,7 +78,7 @@ const swiperList = ref([
   { id: 3, txt: '广告位3', bg: '#4158D0', url: '' },
 ]);
 const timer = ref();
-const currentSwiper = ref({ id: 1, txt: '广告位1', bg: '#FFCC70', url: '' });
+const currentSwiper = ref(swiperList.value[0]);
 
 async function getLiveRoomList() {
   try {

+ 2 - 1
src/views/h5/room/index.vue

@@ -44,7 +44,7 @@
         :class="{ item: appStore.allTrack.length > 1 }"
       ></div>
       <div
-        v-if="showPlayBtn"
+        v-if="showPlayBtn && roomLiving"
         class="tip-btn"
         @click="startPull"
       >
@@ -192,6 +192,7 @@ async function getLiveRoomInfo() {
 }
 
 function startPull() {
+  appStore.setMuted(false);
   showPlayBtn.value = false;
   handleHlsPlay(liveRoomInfo.value?.hls_url);
 }

+ 28 - 2
src/views/home/index.vue

@@ -103,6 +103,12 @@
               }"
               @click="changeLiveRoom(item)"
             >
+              <div
+                class="cdn-ico"
+                v-if="item?.live_room?.cdn === 1"
+              >
+                <div class="txt">CDN</div>
+              </div>
               <div
                 class="border"
                 :style="{
@@ -302,8 +308,8 @@ function joinRoom(data: { roomId: number; isFlv: boolean }) {
 .home-wrap {
   .play-container {
     position: relative;
-    padding-bottom: 20px;
     z-index: 1;
+    padding-bottom: 20px;
     .bg {
       position: absolute;
       top: 0;
@@ -445,6 +451,7 @@ function joinRoom(data: { roomId: number; isFlv: boolean }) {
         .list {
           .item {
             position: relative;
+            overflow: hidden;
             box-sizing: border-box;
             margin-bottom: 10px;
             width: 200px;
@@ -458,13 +465,32 @@ function joinRoom(data: { roomId: number; isFlv: boolean }) {
             &:last-child {
               margin-bottom: 0;
             }
+            .cdn-ico {
+              position: absolute;
+              top: -9px;
+              right: -9px;
+              z-index: 2;
+              width: 60px;
+              height: 28px;
+              background-color: #f87c48;
+              color: white;
+              transform: rotate(45deg);
+              transform-origin: bottom;
+
+              .txt {
+                margin-left: 10px;
+                background-image: initial !important;
+                font-size: 12px;
+                line-height: 0.8;
+              }
+            }
             .border {
               position: absolute;
               top: 0;
               right: 0;
               bottom: 0;
               left: 0;
-              z-index: 1;
+              z-index: 3;
               border: 2px solid $theme-color-gold;
               border-radius: 4px;
             }