Merge pull request #506 from Gencaster/504-audio-scriptcell-cant-save…

…-playback-change fix audio scriptcell update
Gencaster · Jul 25, 2023 · 2406327 · 2406327
2 parents 30898d5 + 309d057
commit 2406327
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 54 deletions.
diff --git a/caster-editor/src/components/NodeEditorCell.vue b/caster-editor/src/components/NodeEditorCell.vue
@@ -98,10 +98,6 @@ const props = defineProps<{
   scriptCell: ScriptCellData;
 }>();
 
-const emit = defineEmits<{
-  (e: "update:scriptCell", scriptCell: ScriptCellData): void;
-}>();
-
 const { newScriptCellUpdates } = storeToRefs(useInterfaceStore());
 
 const scriptCellText = computed<string>({
@@ -111,7 +107,6 @@ const scriptCellText = computed<string>({
   set(value) {
     const newCell = { ...props.scriptCell };
     newCell.cellCode = value;
-    emit("update:scriptCell", newCell);
     return value;
   },
 });

diff --git a/caster-editor/src/components/ScriptCellAudio.vue b/caster-editor/src/components/ScriptCellAudio.vue
@@ -14,7 +14,7 @@
       </div>
       <div class="content">
         <AudioPlayer
-          :audio-file="audioCell.audioFile"
+          :audio-file="audioCellData.audioFile"
           :type="'minimal'"
           :volume="audioCellData.volume"
         />
@@ -64,6 +64,7 @@
       </div>
 
       <div class="content">
+        <!-- The markdown component takes care of any necessary text updates -->
         <ScriptCellMarkdown
           v-model:text="textData"
           :cell-type="CellType.Comment"
@@ -91,7 +92,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, ref, type Ref } from "vue";
+import { reactive, ref, watch, type Ref, computed } from "vue";
 import Browser from "@/components/AudioFileBrowser.vue";
 import AudioPlayer from "./AudioFilePlayer.vue";
 import ScriptCellMarkdown from "./ScriptCellMarkdown.vue";
@@ -103,6 +104,7 @@ import {
   type AudioFile,
   PlaybackChoices,
   type DjangoFileType,
+  type AudioCellInput,
 } from "@/graphql";
 import { CellType } from "@/graphql";
 import { storeToRefs } from "pinia";
@@ -128,54 +130,65 @@ const props = defineProps<{
 
 const { newScriptCellUpdates } = storeToRefs(useInterfaceStore());
 
-// Mutations
-const emit = defineEmits<{
-  (e: "update:audioCell", scriptCell: AudioScriptCellData["audioCell"]): void;
-  (e: "update:text", text: string): void;
-}>();
-
-const audioCellData = computed<AudioScriptCellData["audioCell"]>({
-  get() {
-    return props.audioCell;
-  },
-  set(value) {
-    console.log("current audio cell internal", value);
-    emit("update:audioCell", value);
-
-    let update = newScriptCellUpdates.value.get(props.uuid);
-
-    if (update) {
-      update.audioCell = value;
-    } else {
-      newScriptCellUpdates.value.set(props.uuid, {
-        uuid: props.uuid,
-        audioCell: value,
-      });
-    }
-    return value;
-  },
+const audioCellData = reactive<AudioScriptCellData["audioCell"]>({
+  volume: props.audioCell.volume,
+  uuid: props.audioCell.uuid,
+  playback: props.audioCell.playback,
+  audioFile: props.audioCell.audioFile,
 });
 
-const textData = computed<string>({
-  get() {
-    return props.text;
+// in case we receive an update of the props we also update the reactive component
+// this is only necessary for playback and volume
+// for some reason props is not reactive so we make it reactive
+// by turning it into a computed property, probably an anti pattern
+//
+// we use a 'clutch' to discard incoming updates
+// as updates of our own
+const dataClutch = ref<boolean>(false);
+watch(
+  computed(() => props.audioCell),
+  (newValue) => {
+    dataClutch.value = true;
+    audioCellData.playback = newValue.playback;
+    audioCellData.volume = newValue.volume;
+    // watch takes some time to keep up, so the clutch
+    // needs to be on for some time
+    setTimeout(() => {
+      dataClutch.value = false;
+    }, 10);
   },
-  set(value) {
-    emit("update:text", value);
-
+  { deep: true },
+);
+
+watch(
+  audioCellData,
+  (newData) => {
+    if (dataClutch.value) {
+      // ignore updates from props update
+      return;
+    }
     let update = newScriptCellUpdates.value.get(props.uuid);
 
+    const audioCellUpdate: AudioCellInput = {
+      uuid: newData.uuid,
+      audioFile: { uuid: audioCellData.audioFile.uuid },
+      volume: audioCellData.volume,
+      playback: audioCellData.playback,
+    };
+
     if (update) {
-      update.cellCode = value;
+      update.audioCell = audioCellUpdate;
     } else {
       newScriptCellUpdates.value.set(props.uuid, {
         uuid: props.uuid,
-        cellCode: value,
+        audioCell: audioCellUpdate,
       });
     }
-    return value;
   },
-});
+  { deep: true },
+);
+
+const textData = ref<string>(props.text);
 
 // State
 const showBrowser: Ref<boolean> = ref(false);

diff --git a/caster-editor/src/components/ScriptCellCodemirror.vue b/caster-editor/src/components/ScriptCellCodemirror.vue
@@ -39,10 +39,6 @@ const props = defineProps<{
   uuid: string;
 }>();
 
-const emit = defineEmits<{
-  (e: "update:text", text: string): void;
-}>();
-
 const { newScriptCellUpdates } = storeToRefs(useInterfaceStore());
 
 const domReady: Ref<boolean> = ref(false);
@@ -52,8 +48,6 @@ const scriptText = computed<string>({
     return props.text;
   },
   set(value) {
-    emit("update:text", value);
-
     let update = newScriptCellUpdates.value.get(props.uuid);
 
     if (update) {

diff --git a/caster-editor/src/components/ScriptCellMarkdown.vue b/caster-editor/src/components/ScriptCellMarkdown.vue
@@ -30,10 +30,6 @@ const props = defineProps<{
   cellType: CellType.Markdown | CellType.Comment;
 }>();
 
-const emit = defineEmits<{
-  (e: "update:text", text: string): void;
-}>();
-
 // Store
 const { newScriptCellUpdates } = storeToRefs(useInterfaceStore());
 
@@ -46,7 +42,6 @@ const scriptCellText = computed<string>({
     return props.text;
   },
   set(value) {
-    emit("update:text", value);
     let update = newScriptCellUpdates.value.get(props.uuid);
 
     if (update) {