video annotation panel: update subtitles on edit / remove

source/Ox.UI/js/Video/VideoAnnotationPanel.js

@@ -86,6 +86,7 @@ Ox.VideoAnnotationPanel = function(options, self) {
                 showLayers: {},
                 showUsers: false,
                 subtitles: [],
+                subtitlesLayer: null,
                 timeline: '',
                 timelines: [],
                 videoRatio: 16/9,
@@ -273,6 +274,8 @@ Ox.VideoAnnotationPanel = function(options, self) {
                 }
             });
 
+    self.options.subtitles = self.options.subtitles || getSubtitles();
+
     self.options.layers.forEach(function(layer, i) {
         that.bindEvent('key_' + (i + 1), function() {
             layer.editable
@@ -338,7 +341,7 @@ Ox.VideoAnnotationPanel = function(options, self) {
                 showMarkers: true,
                 showMilliseconds: 3,
                 sizeIsLarge: self.options.videoSize == 'large',
-                subtitles: self.options.subtitles,
+                subtitles: Ox.clone(self.options.subtitles),
                 type: type,
                 video: type == 'play' ? self.options.video : self.options.getFrameURL,
                 volume: self.options.volume,
@@ -773,6 +776,9 @@ Ox.VideoAnnotationPanel = function(options, self) {
                 }
             },
             change: function(data) {
+                if (data.layer == self.options.subtitlesLayer) {
+                    updateSubtitles();
+                }
                 that.triggerEvent('editannotation', data);
             },
             define: function(data) {
@@ -1019,6 +1025,22 @@ Ox.VideoAnnotationPanel = function(options, self) {
         }));
     }
 
+    function getSelectedLayer() {
+        var layer;
+        Ox.forEach(self.options.layers, function(layer) {
+            Ox.forEach(layer.items, function(item) {
+                if (item.id == self.options.selected) {
+                    layer = layer.id;
+                    return false;
+                }
+            });
+            if (layer) {
+                return false;
+            }
+        });
+        return layer;
+    }
+
     function getSizes(scrollbarIsVisible) {
         var scrollbarWidth = Ox.UI.SCROLLBAR_SIZE,
             contentWidth = self.options.width
@@ -1087,6 +1109,19 @@ Ox.VideoAnnotationPanel = function(options, self) {
         return (!scrollbarIsVisible && height > self.options.height - 16) ? getSizes(true) : size;
     }
 
+    function getSubtitles() {
+        return self.options.subtitlesLayer ? self.options.layers.filter(function(layer) {
+            return layer.id == self.options.subtitlesLayer;
+        })[0].map(function(subtitle) {
+            return {
+                id: subtitle.id,
+                'in': subtitle['in'],
+                out: subtitle.out,
+                text: subtitle.value.replace(/\n/g, ' ').replace(/<br\/?>/g, '\n')
+            };
+        }) : [];
+    }
+
     function getWords() {
         var words = [];
         Ox.forEach(Ox.count(Ox.words(
@@ -1136,6 +1171,9 @@ Ox.VideoAnnotationPanel = function(options, self) {
         self.positions = getPositions();
         self.options.find && submitFindInput(self.options.find);
         self.editing = false;
+        if (data.layer == self.options.subtitlesLayer) {
+            updateSubtitles();
+        }
         setTimelineState();
         self.$annotationPanel.removeItem();
         that.triggerEvent('removeannotation', data);
@@ -1215,6 +1253,12 @@ Ox.VideoAnnotationPanel = function(options, self) {
         if (self.options['in'] > self.options.out) {
             setPoint(point == 'in' ? 'out' : 'in', position, keepSelected);
         } else {
+            if (
+                self.options.selected && self.options.subtitlesLayer
+                && getSelectedLayer() == self.options.subtitlesLayer
+            ) {
+                updateSubtitles();
+            }
             self.$annotationPanel.options({
                 'in': self.options['in'],
                 out: self.options.out
@@ -1321,6 +1365,9 @@ Ox.VideoAnnotationPanel = function(options, self) {
         updateWords('add');
         self.options.find && submitFindInput(self.options.find);
         self.editing = false;
+        if (data.layer == self.options.subtitlesLayer) {
+            updateSubtitles();
+        }
         setTimelineState();
         if (
             self.options.annotationsRange == 'position'
@@ -1429,9 +1476,17 @@ Ox.VideoAnnotationPanel = function(options, self) {
         });
     }
 
+    function updateSubtitles() {
+        self.options.subtitles = getSubtitles();
+        self.$player.forEach(function($player) {
+            player.options({subtitles: self.options.subtitles});
+        });
+    }
+
     function updateTimelines() {
-        self.$timeline[0].options({type: self.options.timeline});
+        self.$timeline.forEach(function($timeline) {
-        self.$timeline[1].options({type: self.options.timeline});
+            $timeline.options({type: self.options.timeline});
+        });
     }
 
     function updateWords(action) {