fix: LSDV-1666: Fix lock option isn't locking audio regions (#1450)

* fix: LSDV-1666: Fix lock option isn't locking audio regions

* removing feature flag validation

* add readonly property

* change readonly to locked

---------

Co-authored-by: juliosgarbi <juliosgarbi@users.noreply.github.com>

Author: juliosgarbi

src/lib/AudioUltra/Regions/Segment.ts

@@ -14,6 +14,7 @@ export interface SegmentOptions {
   end: number;
   color?: string|RgbaColorArray;
   selected?: boolean;
+  locked?: boolean;
   updateable?: boolean;
   deleteable?: boolean;
   visible?: boolean;
@@ -46,6 +47,7 @@ export class Segment extends Events<SegmentEvents> {
   selected = false;
   highlighted = false;
   updateable = true;
+  locked = false;
   deleteable = true;
   visible = true;
 
@@ -74,6 +76,7 @@ export class Segment extends Events<SegmentEvents> {
     this.end = options.end;
     this.selected = !!options.selected;
     this.updateable = options.updateable ?? this.updateable;
+    this.locked = options.locked ?? this.locked;
     this.visible = options.visible ?? this.visible;
     this.waveform = waveform;
     this.visualizer = visualizer;
@@ -99,6 +102,9 @@ export class Segment extends Events<SegmentEvents> {
     if (options.deleteable !== undefined) {
       this.deleteable = options.deleteable;
     }
+    if (options.locked !== undefined) {
+      this.locked = options.locked;
+    }
     if (options.start !== undefined) {
       this.start = options.start;
     }
@@ -175,6 +181,7 @@ export class Segment extends Events<SegmentEvents> {
       id: this.id,
       selected: this.selected,
       updateable: this.updateable,
+      locked: this.locked,
       deleteable: this.deleteable,
       visible: this.visible,
     };
@@ -241,7 +248,7 @@ export class Segment extends Events<SegmentEvents> {
   };
 
   private handleDrag = (e: MouseEvent) => {
-    if (!this.updateable) return;
+    if (!this.updateable || this.locked) return;
     if (this.draggingStartPosition) {
       e.preventDefault();
       e.stopPropagation();
@@ -359,6 +366,13 @@ export class Segment extends Events<SegmentEvents> {
     }
   }
 
+  setLocked(locked: boolean) {
+    this.locked = locked;
+
+    this.invoke('update', [this]);
+    this.waveform.invoke('regionUpdated', [this]);
+  }
+
   updateColor(color: string|RgbaColorArray) {
     if (!this.updateable) return;
     this.setColor(color);

src/regions/AudioRegion/AudioRegionModel.js

@@ -162,6 +162,19 @@ export const AudioRegionModel = types
       if (self._ws_region) self._ws_region.remove();
     },
 
+    setLocked(locked) {
+      if (locked instanceof Function) {
+        self.locked = locked(self.locked);
+      } else {
+        self.locked = locked;
+      }
+
+      if (self._ws_region) {
+        self._ws_region.drag = !self.locked;
+        self._ws_region.resize = !self.locked;
+      }
+    },
+
     onClick(wavesurfer, ev) {
       // if (! self.editable) return;
 

src/regions/AudioRegion/AudioUltraRegionModel.js

@@ -19,6 +19,7 @@ export const AudioUltraRegionModel = types
   }))
   .views(self => ({
     wsRegionOptions() {
+
       const reg = {
         id: self.id,
         start: self.start,
@@ -39,6 +40,7 @@ export const AudioUltraRegionModel = types
      */
     const Super = {
       setProperty: self.setProperty,
+      setLocked: self.setLocked,
     };
 
     return {
@@ -101,6 +103,12 @@ export const AudioUltraRegionModel = types
         if (self._ws_region) self._ws_region.remove();
       },
 
+      setLocked(locked) {
+        Super.setLocked(locked);
+
+        if(self._ws_region) self._ws_region.setLocked(self.locked);
+      },
+
       onMouseOver() {
         if (self.annotation.relationMode) {
           self.setHighlight(true);