FEATURE: delete caption in editor

Author: hosuaby

dist/editor/index.js

@@ -50,6 +50,11 @@ export class KaraokeGroup {
         return this.words.pop()!;
     }
 
+    public shiftIndices(shift: number) {
+        this.indexStart += shift;
+        this.indexEnd += shift;
+    }
+
     public get id() {
         return `${this.indexStart}-${this.indexEnd}`;
     }
@@ -129,6 +134,24 @@ export class CaptionsService {
         }
     }
 
+    public deleteKaraokeGroup(karaokeGroupId: string) {
+        const groups: KaraokeGroup[] = [];
+        let shift = 0;
+
+        for (const group of this.groups) {
+            if (group.id === karaokeGroupId) {
+                shift = group.indexStart - group.indexEnd - 1;
+            } else {
+                if (~shift) {
+                    group.shiftIndices(shift);
+                }
+                groups.push(group);
+            }
+        }
+
+        this.groups = groups;
+    }
+
     public get karaokeGroups(): KaraokeGroup[] {
         return [...this.groups];
     }

dist/editor/index.js.map

@@ -10,6 +10,7 @@ const props = defineProps<{ karaokeGroup: KaraokeGroup }>();
 defineEmits<{
   (event: 'move-word-to-prec', value: KaraokeWord): void;
   (event: 'move-word-to-next', value: KaraokeWord): void;
+  (event: 'delete', value: string): void;
 }>();
 
 const timecodeStart = new Timecode(props.karaokeGroup.startTimeMs);
@@ -23,6 +24,14 @@ const millisChanged = timecodeStart.millis !== timecodeEnd.millis;
 
 <template>
   <tr>
+    <td>
+      <button class="button is-small is-danger"
+              @click="$emit('delete', karaokeGroup.id);">
+        <span class="icon is-small">
+          <i class="fas fa-times"></i>
+        </span>
+      </button>
+    </td>
     <td>
       <indexes v-bind="{ karaokeGroup: karaokeGroup }"></indexes>
     </td>

src/editor/captions.service.ts

@@ -23,12 +23,18 @@ function moveLastWordToNextGroup(groupId: number) {
   captionService.moveLastWordToNextGroup(groupId);
   groups.value = captionService.karaokeGroups;
 }
+
+function deleteKaraokeGroup(karaokeGroupId: string) {
+  captionService.deleteKaraokeGroup(karaokeGroupId);
+  groups.value = captionService.karaokeGroups;
+}
 </script>
 
 <template>
   <table class="table is-fullwidth is-hoverable">
     <thead>
       <tr class="is-link">
+        <th style="width: 3%"></th>
         <th class="has-text-white" style="width: 5%">Indexes</th>
         <th class="has-text-white" style="width: 15%">Start</th>
         <th class="has-text-white" style="width: 15%">End</th>
@@ -41,7 +47,8 @@ function moveLastWordToNextGroup(groupId: number) {
            :key="karaokeGroup.id"
            :karaoke-group="karaokeGroup"
            @move-word-to-prec="moveFirstWordToPrecedentGroup(index)"
-           @move-word-to-next="moveLastWordToNextGroup(index)"></cue>
+           @move-word-to-next="moveLastWordToNextGroup(index)"
+           @delete="deleteKaraokeGroup(karaokeGroup.id)"></cue>
     </tbody>
   </table>
 </template>