first draft of adding segments to transcriptions

Author: kkuepper

composables/transcription.ts

@@ -181,6 +181,41 @@ export function useTranscriptionTool(options: UseTranscriptionToolOptions) {
     );
   }
 
+  function addSegment(index: number) {
+    const followingSegment = editableTranscription.value[index];
+    if (!followingSegment) return;
+    const newSegment = {
+      start: Math.max(
+        editableTranscription.value[index - 1]?.end || 0,
+        (followingSegment.start ?? 0) - 6,
+      ),
+      end: followingSegment.start,
+      text: "",
+      isHeader: false,
+      id: index,
+    };
+    editableTranscription.value.splice(index, 0, newSegment);
+    transcription.value?.splice(index, 0, structuredClone(toRaw(newSegment)));
+    for (let i = index; i < editableTranscription.value.length; i++) {
+      editableTranscription.value[i].id = i;
+      transcription.value[i].id = i;
+    }
+  }
+
+  function appendSegment() {
+    const lastSegment = editableTranscription.value.at(-1);
+    if (!lastSegment?.end) return;
+    const newSegment = {
+      start: lastSegment.end,
+      end: lastSegment.end + 6,
+      text: "",
+      isHeader: false,
+      id: editableTranscription.value.length,
+    };
+    editableTranscription.value.push(newSegment);
+    transcription.value?.push(structuredClone(toRaw(newSegment)));
+  }
+
   return {
     currentIndex,
     transcription,
@@ -198,5 +233,7 @@ export function useTranscriptionTool(options: UseTranscriptionToolOptions) {
     toggleDeletion,
     deletedTranscriptionSegments,
     refetchTranscription,
+    addSegment,
+    appendSegment,
   };
 }

pages/transcribe/[id].vue

@@ -83,6 +83,8 @@ const {
   deletedTranscriptionSegments,
   refetchTranscription,
   syncEditableTranscription,
+  addSegment,
+  appendSegment,
 } = useTranscriptionTool({
   trackId: Number(route.params.id),
   language,
@@ -320,6 +322,30 @@ async function copyToClipboard() {
                     }}
                   </span>
                 </button>
+                <button
+                  v-if="
+                    !hasInvalidIds &&
+                    (index == 0 ||
+                      (item.start &&
+                        editableTranscription[index - 1]?.end &&
+                        item.start > editableTranscription[index - 1].end + 3))
+                  "
+                  class="flex items-center gap-0.5 rounded-full border border-label-separator px-1.5 hover:text-label-3"
+                  @click="addSegment(index)"
+                >
+                  <NuxtIcon name="icon.close.small" class="opacity-50" />
+                  Insert Before
+                </button>
+                <button
+                  v-if="
+                    !hasInvalidIds && index == editableTranscription.length - 1
+                  "
+                  class="flex items-center gap-0.5 rounded-full border border-label-separator px-1.5 hover:text-label-3"
+                  @click="appendSegment()"
+                >
+                  <NuxtIcon name="icon.close.small" class="opacity-50" />
+                  Insert After
+                </button>
                 <button
                   v-if="!hasInvalidIds"
                   :class="[