chore(viewer): 处理因为 spine 版本更新不能播放的用户告知

ba-archive · Oct 26, 2024 · e8728c1 · e8728c1
1 parent 517488c
commit e8728c1
Show file tree

Hide file tree

Showing 5 changed files with 107 additions and 30 deletions.
diff --git a/apps/blue-archive-story-editor/src/components/StoryPlayer.vue b/apps/blue-archive-story-editor/src/components/StoryPlayer.vue
@@ -1,48 +1,59 @@
 <script setup lang="ts">
-import BaStoryPlayer from 'ba-story-player'
-import 'ba-story-player/dist/style.css'
-import type { NexonJSONStory } from '~/types/story'
+import BaStoryPlayer from "ba-story-player";
+import "ba-story-player/dist/style.css";
+import type { NexonJSONStory } from "~/types/story";
 
 const props = defineProps<{
-  story: NexonJSONStory
+  story: NexonJSONStory;
   summary: {
-    chapterName: string
-    summary: string
-  }
-}>()
-const playerVIf = defineModel('vif', { required: false, default: false })
+    chapterName: string;
+    summary: string;
+  };
+}>();
+const playerVIf = defineModel("vif", { required: false, default: false });
 
-const storyPlayer = ref<HTMLDivElement>()
-const { width, height } = useElementSize(storyPlayer)
+const storyPlayer = ref<HTMLDivElement>();
+const { width, height } = useElementSize(storyPlayer);
 
 function reloadPlayer() {
-  playerVIf.value = false
+  playerVIf.value = false;
   nextTick(() => {
-    playerVIf.value = true
-  })
+    playerVIf.value = true;
+  });
 }
 
-watch(() => [props.story, props.summary], () => {
-  reloadPlayer()
-})
+watch(
+  () => [props.story, props.summary],
+  () => {
+    reloadPlayer();
+  }
+);
 
 watchDebounced(
   () => [width.value, height.value],
   () => {
-    reloadPlayer()
+    reloadPlayer();
   },
-  { debounce: 1000 },
-)
+  { debounce: 1000 }
+);
 
 defineExpose({
   reload: reloadPlayer,
-  play: () => playerVIf.value = true,
-  destroy: () => playerVIf.value = false,
-})
+  play: () => (playerVIf.value = true),
+  destroy: () => (playerVIf.value = false),
+});
 </script>
 
 <template>
-  <div ref="storyPlayer" class="story-player" inline-block h630px w1120px of-hidden bg-gray-8>
+  <div
+    ref="storyPlayer"
+    class="story-player"
+    inline-block
+    h630px
+    w1120px
+    of-hidden
+    bg-gray-8
+  >
     <BaStoryPlayer
       v-if="playerVIf"
       class="player-container"

diff --git a/apps/blue-archive-story-viewer/src/components/StoryViewer.vue b/apps/blue-archive-story-viewer/src/components/StoryViewer.vue
@@ -11,8 +11,42 @@
     <div class="loading-container" v-if="!ready">
       <neu-progress-bar :show-percentage="true" :progress="initProgress" />
     </div>
+    <neu-dialog
+      title="哎呀，暂时不能播放这段剧情"
+      :show-mask="false"
+      positive-text="返回"
+      @positive-click="handleStoryEnd"
+      shadow
+      v-if="notImplementedError"
+    >
+      <template #content>
+        <p>
+          由于一些技术问题，玛丽（偶像）、樱子（偶像）、美弥（偶像）的剧情暂时无法播放。
+        </p>
+        <p>
+          我们正在努力解决，问题解决后我们会第一时间在
+          <a
+            class="text-blue-500"
+            href="https://space.bilibili.com/1413213021/dynamic"
+            target="_blank"
+          >
+            Bilibili 动态
+          </a>
+          通知大家。
+        </p>
+        <p>很抱歉给老师们带来了不便！≦(._.)≧</p>
+        <img
+          class="w-full h-auto max-w-32 max-h-32"
+          src="@assets/404_white_stroke_512px.webp"
+          alt="Network Error"
+        />
+      </template>
+    </neu-dialog>
     <div class="content-wrapper flex-vertical rounded-small">
-      <div class="flex-vertical story-container" v-if="ready && !fetchError">
+      <div
+        class="flex-vertical story-container"
+        v-if="ready && !fetchError && !notImplementedError"
+      >
         <div class="story-info flex-horizontal" v-if="!playEnded">
           <svg
             role="button"
@@ -149,6 +183,7 @@ import { useElementSize } from "@vueuse/core";
 import { capitalize } from "radash";
 import "ba-story-player/dist/style.css";
 import NeuTag from "./widgets/NeuUI/NeuTag.vue";
+import NeuDialog from "./widgets/NeuUI/NeuDialog.vue";
 import {
   getStoryJson,
   getStorySummary,
@@ -174,7 +209,12 @@ const playEnded = ref(false);
 const initProgress = ref(0);
 const ready = ref(false);
 const fetchError = ref(false);
-const fetchErrorMessage = ref({});
+const fetchErrorMessage = ref({
+  message: "",
+  response: {
+    status: 0,
+  },
+});
 const showPlayer = ref(false);
 
 const changeIndex = ref(0);
@@ -198,6 +238,9 @@ const summary = ref({
 const studentId = computed(() => route.params.id as string);
 const favorGroupId = computed(() => (route.params.groupId as string) ?? "");
 const shouldReturnToMomotalk = "true" === route.query?.returnToMomotalk;
+const notImplementedError = computed(() =>
+  [10105, 10106, 16016].includes(parseInt(studentId.value))
+);
 
 // 判断是不是学生好感剧情
 const isStuStory = computed(() =>

diff --git a/apps/blue-archive-story-viewer/src/components/archive/StudentStoryContainer.vue b/apps/blue-archive-story-viewer/src/components/archive/StudentStoryContainer.vue
@@ -61,7 +61,15 @@ const ready = ref(false);
 const initProgress = ref(0);
 // get 请求是否出错
 const fetchError = ref(false);
-const fetchErrorMessage = ref({});
+const fetchErrorMessage = ref<{
+  message: string;
+  response: { status: number };
+}>({
+  message: "",
+  response: {
+    status: 0,
+  },
+});
 
 const studentId = computed(() => parseInt(route.params.id as string));
 const studentAvatar = studentStore.getStudentAvatar(studentId.value);
@@ -83,7 +91,7 @@ axios
       .get(`/story/ai/favor/${studentId.value}/index.json`, {
         onDownloadProgress: progressEvent => {
           const total = progressEvent.total || progressEvent.loaded + 100;
-    initProgress.value = Math.floor((progressEvent.loaded * 100) / total);
+          initProgress.value = Math.floor((progressEvent.loaded * 100) / total);
         },
       })
       .then(res => {
@@ -107,6 +115,15 @@ axios
   })
   .finally(() => {
     ready.value = true;
+    if ([10105, 10106, 16016].includes(studentId.value)) {
+      fetchErrorMessage.value = {
+        message:
+          "由于技术问题，玛丽（偶像）、樱子（偶像）以及美弥（偶像）的剧情暂时无法播放。我们正在修复该问题。",
+        response: {
+          status: 1919,
+        },
+      };
+    }
   });
 
 function handleOpenIndex(index: number) {

diff --git a/apps/blue-archive-story-viewer/src/components/widgets/ErrorScreen.vue b/apps/blue-archive-story-viewer/src/components/widgets/ErrorScreen.vue
@@ -49,7 +49,12 @@ import { computed } from "vue";
 
 const props = defineProps<{
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  errorMessage: any;
+  errorMessage: {
+    message: string;
+    response: {
+      status: number;
+    };
+  };
   routePath: string | undefined;
 }>();
 

diff --git a/lib/ba-story-player/lib/layers/effectLayer/effectFunctions/BG_Rain_L.ts b/lib/ba-story-player/lib/layers/effectLayer/effectFunctions/BG_Rain_L.ts
@@ -20,7 +20,8 @@ const handler: BGEffectHandlerFunction<"BG_Rain_L"> = async function (
   const app = usePlayerStore().app;
   newRainConfig.spawnRect!.w = app.view.width;
   newRainConfig.spawnRect!.h = app.view.height;
-  newRainConfig.frequency = options.frequency;
+  // @ts-ignore
+  newRainConfig.frequency = options.frequency ?? 0.02;
   const emitter = new Emitter(
     emitterContainer,
     upgradeConfig(newRainConfig, [resources[0].texture])