From c98532b41946b60d8f0edbdbf23388ca96761f97 Mon Sep 17 00:00:00 2001
From: zijiren233 <pyh1670605849@gmail.com>
Date: Wed, 20 Nov 2024 01:22:27 +0800
Subject: [PATCH] feat: current lodding and default subtitle and hls auto

---
 src/hooks/useMovie.ts   |  5 +++--
 src/plugins/control.ts  | 16 ++++++++++++---
 src/plugins/subtitle.ts | 25 ++++++++++++++++++++---
 src/views/Cinema.vue    | 44 +++++++++++++++++++++++++++++++++++++++--
 4 files changed, 80 insertions(+), 10 deletions(-)

diff --git a/src/hooks/useMovie.ts b/src/hooks/useMovie.ts
index 0fb6db7..a1f9ff6 100644
--- a/src/hooks/useMovie.ts
+++ b/src/hooks/useMovie.ts
@@ -61,7 +61,8 @@ export const useMovieApi = (token: string, roomId: string) => {
   };
 
   // 获取正在播放的影片
-  const { state: currentMovie, execute: reqCurrentMovieApi } = currentMovieApi();
+  const { state: currentMovie, execute: reqCurrentMovieApi, isLoading: isLoadingCurrent } =
+    currentMovieApi();
   const getCurrentMovie = async () => {
     try {
       await reqCurrentMovieApi({
@@ -332,7 +333,7 @@ export const useMovieApi = (token: string, roomId: string) => {
 
     getCurrentMovie,
     currentMovie,
-
+    isLoadingCurrent,
     selectMovies,
     swapMovie,
 
diff --git a/src/plugins/control.ts b/src/plugins/control.ts
index e777a5e..6bfa9ed 100644
--- a/src/plugins/control.ts
+++ b/src/plugins/control.ts
@@ -73,6 +73,16 @@ class HLSProvider implements MediaProvider {
   setAudioTrack(trackId: number) {
     this.hls.audioTrack = trackId;
   }
+
+  isAutoQuality() {
+    return this.hls.currentLevel === -1;
+  }
+
+  setAutoQuality(enabled: boolean) {
+    if (enabled) {
+      this.hls.currentLevel = -1;
+    }
+  }
 }
 
 class DASHProvider implements MediaProvider {
@@ -90,12 +100,12 @@ class DASHProvider implements MediaProvider {
     return this.dash.getSettings().streaming.abr.autoSwitchBitrate["video"];
   }
 
-  setQuality(level: number | string) {
-    if (level === "auto") {
+  setQuality(level: number) {
+    if (level === -1) {
       this.setAutoQuality(true);
     } else {
       this.setAutoQuality(false);
-      this.dash.setQualityFor("video", level as number);
+      this.dash.setQualityFor("video", level);
     }
   }
 
diff --git a/src/plugins/subtitle.ts b/src/plugins/subtitle.ts
index 5309def..b130d7a 100644
--- a/src/plugins/subtitle.ts
+++ b/src/plugins/subtitle.ts
@@ -12,19 +12,31 @@ const newSubtitleHtml = (name: string): HTMLElement => {
   return SubtitleHtml;
 };
 
+const disableSubtitleStr = "关闭";
+
 export function artplayerSubtitle(subtitles: Record<string, { url: string; type: string }>) {
   return (art: Artplayer) => {
-    subtitles["关闭"] = { url: "", type: "" };
     const subtitleHTML = newSubtitleHtml("字幕");
 
+    const subtitleKeys = Object.keys(subtitles);
+    const hasOnlyOneSubtitle = subtitleKeys.length === 1;
+
     const selector = Object.keys(subtitles).map((key) => ({
       html: key,
       url: subtitles[key].url,
-      type: subtitles[key].type
+      type: subtitles[key].type,
+      default: hasOnlyOneSubtitle && key !== disableSubtitleStr
     }));
 
+    selector.push({
+      html: disableSubtitleStr,
+      url: "",
+      type: "",
+      default: false
+    });
+
     const onSelect = (item: any) => {
-      if (item.html === "关闭") {
+      if (item.html === disableSubtitleStr) {
         art.subtitle.show = false;
         art.emit("artplayer-plugin-ass:visible" as keyof Events, false);
       } else if (item.type.toLowerCase() === "ass") {
@@ -63,6 +75,13 @@ export function artplayerSubtitle(subtitles: Record<string, { url: string; type:
       onSelect
     });
 
+    if (hasOnlyOneSubtitle) {
+      const firstSubtitle = subtitles[subtitleKeys[0]];
+      if (firstSubtitle) {
+        onSelect(firstSubtitle);
+      }
+    }
+
     if (isMobile) {
       art.on("fullscreen", updateControls);
     }
diff --git a/src/views/Cinema.vue b/src/views/Cinema.vue
index bbb1567..3b067a9 100644
--- a/src/views/Cinema.vue
+++ b/src/views/Cinema.vue
@@ -44,7 +44,7 @@ onBeforeUnmount(() => {
   watchers.forEach((w) => w());
 });
 
-const { getMovies, getCurrentMovie } = useMovieApi(token.value, roomID.value);
+const { getMovies, getCurrentMovie, isLoadingCurrent } = useMovieApi(token.value, roomID.value);
 const { getMyInfo, myInfo } = useRoomApi();
 const { state: roomInfo, execute: reqRoomInfoApi } = roomInfoApi();
 const { hasMemberPermission } = useRoomPermission();
@@ -483,7 +483,14 @@ onMounted(async () => {
           </div>
         </div>
         <div class="card-body max-sm:pb-3 max-sm:px-3" ref="noPlayArea" v-else>
-          <img class="mx-auto" src="/src/assets/something-lost.webp" />
+          <div v-if="isLoadingCurrent" class="flex justify-center items-center h-[550px]">
+            <div class="loading-spinner">
+              <div class="bounce1"></div>
+              <div class="bounce2"></div>
+              <div class="bounce3"></div>
+            </div>
+          </div>
+          <img v-else class="mx-auto" src="/src/assets/something-lost.webp" />
         </div>
       </div>
     </el-col>
@@ -557,4 +564,37 @@ onMounted(async () => {
   overflow-y: scroll;
   height: 67vh;
 }
+
+.loading-spinner {
+  margin: 0 auto;
+  width: 70px;
+  text-align: center;
+  
+  > div {
+    width: 18px;
+    height: 18px;
+    background-color: #409eff;
+    border-radius: 100%;
+    display: inline-block;
+    animation: bounce 1.4s infinite ease-in-out both;
+    margin: 0 3px;
+  }
+
+  .bounce1 {
+    animation-delay: -0.32s;
+  }
+
+  .bounce2 {
+    animation-delay: -0.16s;
+  }
+}
+
+@keyframes bounce {
+  0%, 80%, 100% { 
+    transform: scale(0);
+  } 
+  40% { 
+    transform: scale(1.0);
+  }
+}
 </style>