fix: address PR comments

goplus · Feb 21, 2024 · bb1404a · bb1404a
1 parent 3226ecb
commit bb1404a
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 11 deletions.
diff --git a/spx-gui/src/components/sounds/SoundEdit.vue b/spx-gui/src/components/sounds/SoundEdit.vue
@@ -147,7 +147,7 @@ import WaveSurfer from 'wavesurfer.js';
 import TimelinePlugin from 'wavesurfer.js/src/plugin/timeline';
 import RegionsPlugin from 'wavesurfer.js/src/plugin/regions';
 import CursorPlugin from 'wavesurfer.js/src/plugin/cursor';
-import { ref, onMounted, type Ref } from 'vue'
+import { ref, onMounted, type Ref, watch } from 'vue'
 import { nextTick } from "vue";
 import { type SimpleWavesurferBackend, WavesurferEdit } from '@/util/wavesurfer-edit'
 import { NGradientText, NInput, useMessage, type MessageApi } from "naive-ui";
@@ -163,6 +163,10 @@ const props = defineProps({
 
 const emits = defineEmits(['update-sound-file'])
 
+interface WaveSurferInstance {
+ destroy(): void;
+}
+const waveSurfer = ref<WaveSurferInstance | null>(null);
 const message: MessageApi = useMessage();
 let wavesurfer: WaveSurfer;
 let isPlaying: Ref<boolean> = ref(false);
@@ -184,9 +188,22 @@ const isOperateDisabled: Ref<{ [key: string]: boolean }> = ref({
 });
 
 onMounted(() => {
+ initSoundEdit();
+});
+
+const initSoundEdit = () => {
+ // Make sure that wavesurfer does not stack after each update
+ if (waveSurfer.value) {
+ waveSurfer.value.destroy();
+ waveSurfer.value = null;
+ }
+ const waveformContainer = document.querySelector('#waveform');
+ if (waveformContainer) {
+ waveformContainer.innerHTML = '';
+ }
  initWaveSurfer();
  isRegionOptionDisabled();
-});
+}
 
 /* init WaveSurfer */
 const initWaveSurfer = () => {
@@ -503,6 +520,10 @@ function downloadAudioBuffer(audioBuffer: AudioBuffer, filename: string): void {
  document.body.removeChild(a);
 }
 
+watch(() => props.asset, () => {
+ initSoundEdit();
+});
+
 </script>
 
 <style scoped>

diff --git a/spx-gui/src/components/sounds/SoundHome.vue b/spx-gui/src/components/sounds/SoundHome.vue
@@ -28,7 +28,6 @@
  </n-layout-sider>
  <n-layout-content>
  <SoundsEdit
- :key="componentKey"
  :asset="selectedSound"
  style="margin-left: 10px"
  @update-sound-file="handleSoundFileUpdate"
@@ -52,11 +51,9 @@ const assets: ComputedRef<Sound[]> = computed(
  () => soundStore.list as Sound[],
 );
 const selectedSound = ref<Sound>();
-const componentKey = ref(0);
 
 const handleSelect = (asset: Sound) => {
  selectedSound.value = asset;
- componentKey.value++; // Increment the key to force re-creation of SoundsEdit
 };
 
 const handleSoundFileUpdate = (newFile: File) => {

diff --git a/spx-gui/src/components/sprite-list/SpriteAddBtn.vue b/spx-gui/src/components/sprite-list/SpriteAddBtn.vue
@@ -20,7 +20,7 @@
  :action="uploadActionUrl"
  @before-upload="beforeBackdropUpload"
  >
- <n-button color="#fff" quaternary size="tiny" text-color="#fff"> Upload </n-button>
+ <n-button color="#fff" quaternary size="tiny" text-color="#fff">  {{ $t("stage.upload") }} </n-button>
  </n-upload>
 
  <!-- Sound Upload -->
@@ -29,7 +29,7 @@
  :action="uploadActionUrl"
  @before-upload="beforeSoundUpload"
  >
- <n-button color="#fff" :text-color="commonColor"> Upload </n-button>
+ <n-button color="#fff" :text-color="commonColor">  {{ $t("stage.upload") }} </n-button>
  </n-upload>
 
  <!-- Sprite Upload -->
@@ -38,7 +38,7 @@
  :action="uploadActionUrl"
  @before-upload="beforeSpriteUpload"
  >
- <n-button color="#fff" :text-color="commonColor"> Upload </n-button>
+ <n-button color="#fff" :text-color="commonColor">  {{ $t("stage.upload") }} </n-button>
  </n-upload>
 
  <n-button
@@ -49,15 +49,15 @@
  text-color="#fff"
  @click="openLibraryFunc()"
  >
- Choose
+ {{ $t("stage.choose") }}
  </n-button>
  <n-button
  v-else-if="props.type == 'sprite'"
  color="#fff"
  :text-color="commonColor"
  @click="openLibraryFunc()"
  >
- Choose
+ {{ $t("stage.choose") }}
  </n-button>
 
  <n-button

diff --git a/spx-gui/src/util/file.ts b/spx-gui/src/util/file.ts
@@ -156,7 +156,7 @@ export async function convertRawDirToDirPath(dir: RawDir): Promise<DirPath> {
  * │ └─ spriteName2
  * │ ├─ 2.png
  * │ └─ index.json
- * ├─ sound
+ * ├─ sounds
  * │ ├─ soundName1
  * │ │ ├─ 3.wav
  * │ │ └─ index.json