some css for text annotations

build/css/ox.ui.css

@@ -1284,6 +1284,15 @@ Video
 ================================================================================
 */
 
+.OxAnnotation {
+    border-width: 0 0 1px 0;
+    border-style: solid;
+    padding: 4px;
+}
+.OxAnnotation:last-child {
+    border-width: 0;
+}
+
 .OxVideoEditor {
     overflow-x: hidden;
     overflow-y: auto;

build/css/ox.ui.modern.css

@@ -346,6 +346,10 @@ Video
 ================================================================================
 */
 
+.OxThemeModern .OxAnnotation {
+    border-color: rgb(48, 48, 48);
+}
+
 .OxThemeModern .OxVideoPlayer {
     background: rgb(0, 0, 0);
 }

build/js/ox.ui.js

@@ -10427,6 +10427,7 @@ requires
             that = new Ox.Element('div', self)
                 .defaults({
                     id: '',
+                    items: [],
                     title: '',
                     type: 'text'
                 })
@@ -10434,12 +10435,31 @@ requires
 
         that.$element = new Ox.CollapsePanel({
                 collapsed: false,
+                extras: [
+                    new Ox.Button({
+                        id: 'add',
+                        style: 'symbol',
+                        title: 'Add',
+                        type: 'image'
+                    })
+                ],
                 size: 16,
                 title: self.options.title
             })
+            .addClass('OxAnnotationPanel')
             .bindEvent({
                 toggle: togglePanel
             });
+        that.$content = that.$element.$content;
+
+        self.$annotations = new Ox.Element('div')
+            .appendTo(that.$content);
+        self.options.items.forEach(function(item, i) {
+            new Ox.Element('div')
+                .addClass('OxAnnotation')
+                .html(item.value)
+                .appendTo(self.$annotations);
+        });
 
         function togglePanel() {
             
@@ -11434,6 +11454,9 @@ requires
             .appendTo(self.$video);
 
         self.$annotations = new Ox.Element()
+            .css({
+                overflowY: 'auto'
+            })
             .bindEvent({
                 resize: resizeAnnotations,
                 toggle: toggleAnnotations
@@ -11441,7 +11464,9 @@ requires
         self.$annotationPanel = [];
 
         self.options.layers.forEach(function(layer, i) {
-            self.$annotationPanel[i] = new Ox.AnnotationPanel(layer)
+            self.$annotationPanel[i] = new Ox.AnnotationPanel(
+                    $.extend({}, layer, layer.id == 'subtitles' ? {items: self.options.subtitles} : {})
+                )
                 .appendTo(self.$annotations);
         });