DIVE Metadata Edit from Annotator (#330)

* initial implementation of editing metadata inside annotation

* add actions

* remove increment/decrement

* basic connection of functionality

* working buttons/actions

* add creation of Keys to the action editor

* linting

* fix: update masks cache seconds counting

* update mask cache seconds calculation

* package version increment

* update data format documentation

Author: BryonLewis

client/dive-common/components/ActionEditors/ActionEditor.vue

@@ -5,20 +5,23 @@ import {
 } from 'vue';
 import {
   CreateTrackAction, DIVEAction, TrackSelectAction, CreateFullFrameTrackAction,
+  DIVEMetadataAction,
 } from 'dive-common/use/useActions';
 import {
   useAttributes, useTrackStyleManager,
 } from 'vue-media-annotator/provides';
 import TrackFilter from './TrackFilter.vue';
 import CreateTrackActionEditor from './CreateTrackActionEditor.vue';
 import CreateFullFrameTrackActionEditor from './CreateFullFrameTrackActionEditor.vue';
+import DiveMetadataActionVue from './DiveMetadataAction.vue';
 
 export default defineComponent({
   name: 'ActionEditorSettings',
   components: {
     TrackFilter,
     CreateTrackActionEditor,
     CreateFullFrameTrackActionEditor,
+    DiveMetadataActionVue,
   },
   props: {
     value: {
@@ -30,9 +33,9 @@ export default defineComponent({
     const typeStylingRef = useTrackStyleManager().typeStyling;
     const attributesList = useAttributes();
     const editingAction: Ref<DIVEAction> = ref(props.value);
-    const addEditActionType: Ref<'TrackSelection' | 'GoToFrame' | 'CreateTrackAction' | 'CreateFullFrameTrackAction'> = ref(props.value.action.type);
+    const addEditActionType: Ref<'TrackSelection' | 'GoToFrame' | 'CreateTrackAction' | 'CreateFullFrameTrackAction' | 'Metadata'> = ref(props.value.action.type);
 
-    const saveAction = (action: TrackSelectAction | CreateTrackAction | CreateFullFrameTrackAction, type: DIVEAction['action']['type']) => {
+    const saveAction = (action: TrackSelectAction | CreateTrackAction | CreateFullFrameTrackAction | DIVEMetadataAction, type: DIVEAction['action']['type']) => {
       let diveAction: DIVEAction = {
         action,
       };
@@ -87,6 +90,17 @@ export default defineComponent({
           },
         };
       }
+      if (addEditActionType.value === 'Metadata') {
+        editingAction.value = {
+          action: {
+            type: 'Metadata',
+            key: '',
+            actionType: 'set',
+            dataType: 'string',
+            visibility: 'always',
+          },
+        };
+      }
     };
 
     const getAttributeColor = (item: string) => {
@@ -131,7 +145,7 @@ export default defineComponent({
         <v-row class="pt-4">
           <v-select
             v-model="addEditActionType"
-            :items="['GoToFrame', 'TrackSelection', 'CreateTrackAction', 'CreateFullFrameTrackAction']"
+            :items="['GoToFrame', 'TrackSelection', 'CreateTrackAction', 'CreateFullFrameTrackAction', 'Metadata']"
             label="Action Type"
             @change="changeType"
           />
@@ -166,6 +180,13 @@ export default defineComponent({
             @cancel="$emit('cancel')"
           />
         </v-row>
+        <v-row v-else-if="addEditActionType === 'Metadata' && editingAction.action.type === 'Metadata'">
+          <DiveMetadataActionVue
+            :action="editingAction.action"
+            @update:action="saveAction($event, addEditActionType)"
+            @cancel="$emit('cancel')"
+          />
+        </v-row>
       </div>
     </v-card-text>
   </v-card>

client/dive-common/components/ActionEditors/ActionEditorSettings.vue

@@ -4,7 +4,7 @@ import {
   defineComponent, ref, Ref,
 } from 'vue';
 import {
-  DIVEAction, TrackSelectAction,
+  DIVEAction, DIVEMetadataAction, TrackSelectAction,
 } from 'dive-common/use/useActions';
 import {
   useAttributes, useConfiguration, useTrackStyleManager,
@@ -44,7 +44,7 @@ export default defineComponent({
     const typeStylingRef = useTrackStyleManager().typeStyling;
     const attributesList = useAttributes();
     const editingAction: Ref<null | DIVEAction> = ref(null);
-    const addEditActionType: Ref<'TrackSelection' | 'GoToFrame' | 'CreateTrackAction' | 'CreateFullFrameTrackAction'> = ref('TrackSelection');
+    const addEditActionType: Ref<'TrackSelection' | 'GoToFrame' | 'CreateTrackAction' | 'CreateFullFrameTrackAction' | 'Metadata'> = ref('TrackSelection');
     const editAction = (index?: number) => {
       addEditAction.value = true;
       if (index !== undefined) {
@@ -118,6 +118,18 @@ export default defineComponent({
           },
         };
       }
+      if (addEditActionType.value === 'Metadata') {
+        editingAction.value = {
+          action: {
+            type: 'Metadata',
+            key: '',
+            actionType: 'set',
+            dataType: 'string',
+            value: '',
+            visibility: 'connected',
+          } as DIVEMetadataAction,
+        };
+      }
     };
 
     const removeAction = (index: number) => {

client/dive-common/components/ActionEditors/ActionShortcuts.vue

@@ -49,7 +49,7 @@ export default defineComponent({
     const typeStylingRef = useTrackStyleManager().typeStyling;
     const attributesList = useAttributes();
     const editingShortcut: Ref<null | DIVEActionShortcut> = ref(null);
-    const addEditActionType: Ref<'TrackSelection' | 'GoToFrame' | 'CreateTrackAction' | 'CreateFullFrameTrackAction'> = ref('TrackSelection');
+    const addEditActionType: Ref<'TrackSelection' | 'GoToFrame' | 'CreateTrackAction' | 'CreateFullFrameTrackAction' | 'Metadata'> = ref('TrackSelection');
     const actionList: Ref<DIVEAction[]> = ref([]);
     const updateActionList = () => {
       actionList.value = editingShortcut.value?.actions || [];

client/dive-common/components/ActionEditors/CreateFullFrameTrackActionEditor.vue

@@ -6,7 +6,7 @@ import { EditAnnotationTypes } from 'vue-media-annotator/layers/';
 import { CreateFullFrameTrackAction } from 'dive-common/use/useActions';
 
 export default defineComponent({
-  name: 'EditFullFrameTrackAction',
+  name: 'CreateFullFrameTrackAction',
   props: {
     action: {
       type: Object as PropType<CreateFullFrameTrackAction>,

client/dive-common/components/ActionEditors/CreateTrackActionEditor.vue

@@ -7,7 +7,7 @@ import { EditAnnotationTypes } from 'vue-media-annotator/layers/';
 import { CreateTrackAction } from 'dive-common/use/useActions';
 
 export default defineComponent({
-  name: 'EditTrackAction',
+  name: 'CreateTrackActionEditor',
   props: {
     action: {
       type: Object as PropType<CreateTrackAction>,