support disalogs without titlebar, i.e. preview vidieo player

source/UI/js/Form/ArrayEditable.js

@@ -75,7 +75,7 @@ Ox.ArrayEditable = function(options, self) {
             width: function() {
                 var width = self.options.width;
                 that.css({width: width - 8 + 'px'}); // 2 x 4 px padding
-                self.options.type == 'textarea' && self.$items.forEach(function($item) {
+                self.options.type != 'input' && self.$items.forEach(function($item) {
                     $item.options({width: width})
                 });
             }

source/UI/js/Form/Editable.js

@@ -19,7 +19,7 @@ Ox.Editable = function(options, self) {
 
     self = self || {};
     var that = Ox.Element({
-            element: options.type == 'textarea' ? '<div>' : '<span>',
+            element: options.type == 'input' ? '<span>' : '<div>',
             tooltip: options.tooltip
         }, self)
         .defaults({
@@ -94,7 +94,9 @@ Ox.Editable = function(options, self) {
             }
         });
 
-    self.options.value = self.options.value.toString();
+    if (self.options.type != 'data') {
+        self.options.value = self.options.value.toString();
+    }
 
     self.css = {};
     self.$value = Ox.Element(self.options.type == 'input' ? '<span>' : '<div>')
@@ -159,7 +161,7 @@ Ox.Editable = function(options, self) {
                         changeOnKeypress: true,
                         element: self.options.type == 'input' ? '<span>' : '<div>',
                         style: 'square',
-                        type: self.options.type,
+                        type: getInputType(),
                         value: formatInputValue()
                     })
                     .css(self.css)
@@ -203,14 +205,15 @@ Ox.Editable = function(options, self) {
     }
 
     function formatInputValue() {
-        return self.options.type == 'input'
+        return self.options.unformat
-            ? (self.options.unformat || Ox.decodeHTMLEntities)(self.options.value)
+            ? self.options.unformat(self.options.value)
+            : self.options.type == 'input' ? Ox.decodeHTMLEntities(self.options.value)
             : self.options.value.replace(/<br\/?><br\/?>/g, '\n\n');
     }
 
     function formatTestValue() {
         var value = Ox.encodeHTMLEntities(
-            (self.options.unformat || Ox.identity)(self.$input.options('value'))
+            (self.options.type != 'data' && self.options.unformat || Ox.identity)(self.$input.options('value'))
         );
         return !value ? '&nbsp;'
             : self.options.type == 'input'
@@ -247,7 +250,9 @@ Ox.Editable = function(options, self) {
             self.$input.value().replace(/\n\n+/g, '\0')
         ).replace(/\0/g, '\n\n').trim();
         return (
-            self.options.type == 'input'
+            self.options.type == 'data'
+            ? JSON.parse(value)
+            : self.options.type == 'input'
             ? Ox.encodeHTMLEntities(value)
             : Ox.sanitizeHTML(value, self.options.tags, self.options.globalAttributes)
         );
@@ -265,7 +270,7 @@ Ox.Editable = function(options, self) {
         height = self.options.height || Ox.limit(self.$test.height(), self.minHeight, self.maxHeight);
         width = self.$test.width();
         // +Ox.UI.SCROLLBAR_SIZE to prevent scrollbar from showing up
-        if (self.options.type == 'textarea') {
+        if (self.options.type != 'input') {
             width += Ox.UI.SCROLLBAR_SIZE;
         }
         width = self.options.width || Ox.limit(width, self.minWidth, self.maxWidth);
@@ -280,12 +285,16 @@ Ox.Editable = function(options, self) {
             width: width,
             height: height
         });
-        self.$input.find(self.options.type).css({
+        self.$input.find(getInputType()).css({
             width: width + 'px',
             height: height + 'px'
         });
     }
 
+    function getInputType() {
+        return self.options.type == 'data' ? 'textarea' : self.options.type
+    }
+
     function submit() {
         self.options.editing = false;
         that.removeClass('OxEditing');

source/UI/js/Video/AnnotationFolder.js

@@ -121,7 +121,7 @@ Ox.AnnotationFolder = function(options, self) {
                     self.$widget.options({width: self.options.width});
                 }
                 self.$annotations.options({
-                    width: self.options.type == 'text'
+                    width: isTextType(self.options.type)
                         ? self.options.width + 8
                         : self.options.width
                 });
@@ -284,7 +284,7 @@ Ox.AnnotationFolder = function(options, self) {
             clickLink: self.options.clickLink,
             confirmDeleteDialog: self.options.confirmDeleteDialog,
             editable: self.options.editable,
-            getSortValue: self.options.type == 'text'
+            getSortValue: isTextType(self.options.type)
                 ? function(value) {
                     return Ox.stripTags(value);
                 }
@@ -301,8 +301,24 @@ Ox.AnnotationFolder = function(options, self) {
                     + Ox.formatDate(item.modified.slice(0, 10), '%B %e, %Y');
             } : '',
             width: self.options.width,
-            maxHeight: self.options.type == 'text' ? Infinity : void 0,
+            maxHeight: isTextType(self.options.type) ? Infinity : void 0,
-            type: self.options.type == 'text' ? 'textarea' : 'input'
+            type: self.options.type == 'data' ? 'data' : self.options.type == 'text' ? 'textarea' : 'input',
+            format: self.options.type == 'data' ? function(value) {
+                return Ox.TreeList({
+                    data: value,
+                    width: self.options.width
+                }).css({
+                    minHeight: '256px',
+                });
+            } : self.options.translate ? function(value) {
+                return Ox._(value);
+            } : null,
+            unformat: function(value) {
+                if (self.options.type == 'data') {
+                    return JSON.stringify(value, null, "    ");
+                }
+                return Ox.decodeHTMLEntities(Ox.stripTags(value));
+            }
         }, self.options.autocomplete ? {
             autocomplete: function(value, callback) {
                 self.options.autocomplete(self.options.id, value, callback);
@@ -313,14 +329,9 @@ Ox.AnnotationFolder = function(options, self) {
             autocompleteSelectHighlight: true,
             autocompleteSelectMaxWidth: 256,
             autocompleteSelectOffset: {left: 0, top: 0},
-            autocompleteSelectUpdate: true,
+            autocompleteSelectUpdate: true
-            format: self.options.translate ? function(value) {
+        } : {
-                return Ox._(value);
+        }))
-            } : null,
-            unformat: function(value) {
-                return Ox.decodeHTMLEntities(Ox.stripTags(value));
-            }
-        } : {}))
         .bindEvent({
             add: function(data) {
                 if (self.editing) {
@@ -548,8 +559,8 @@ Ox.AnnotationFolder = function(options, self) {
 
     function getSort() {
         return ({
-            duration: ['-duration', '+in', self.options.type == 'text' ? '+created' : '+value'],
+            duration: ['-duration', '+in', isTextType(self.options.type) ? '+created' : '+value'],
-            position: ['+in', '+duration', self.options.type == 'text' ? '+created' : '+value'],
+            position: ['+in', '+duration', isTextType(self.options.type) ? '+created' : '+value'],
             text: ['+value', '+in', '+duration'],
             created: ['+created', '+in', '+duration', '+value']
         })[self.options.sort];
@@ -560,6 +571,10 @@ Ox.AnnotationFolder = function(options, self) {
             && !!item[self.options.type].type;
     }
 
+    function isTextType(type) {
+        return ['text', 'data'].includes(type);
+    }
+
     function removeAnnotation(data) {
         var item;
         self.editing = false;

source/UI/js/Video/AnnotationPanel.js

@@ -247,13 +247,13 @@ Ox.AnnotationPanel = function(options, self) {
             if (annotation && folder) {
                 key = folder.options('id');
                 type = folder.options('type');
-                value = annotation.entity ? annotation.entity.name : annotation.value;
+                value = type == 'data' ? '' : annotation.entity ? annotation.entity.name : annotation.value;
                 isEditable = annotation.editable;
                 isEntity = !!annotation.entity;
                 isEvent = type == 'event';
                 isPlace = type == 'place';
                 isEventOrPlace = isEvent || isPlace;
-                isString = type != 'text';
+                isString = type != 'text' && type != 'data';
                 // fixme: absence of annotation[type] may be an error
                 isDefined = isEventOrPlace && !!annotation[type] && !!annotation[type].type;
                 annotationTitle = folder.options('item') + ': "' + Ox.stripTags(value) + '"';

source/UI/js/Video/VideoAnnotationPanel.js

@@ -1069,10 +1069,16 @@ Ox.VideoAnnotationPanel = function(options, self) {
         if (query.length) {
             query = query.toLowerCase();
             results = self.annotations.filter(function(annotation) {
-                return Ox.contains(['*', annotation.layer], self.options.findLayer)
+                let value = annotation.value
-                    && Ox.decodeHTMLEntities(Ox.stripTags(
+                if (!value.toLowerCase && value.toString) {
-                        annotation.value.toLowerCase()
+                    value = value.toString()
-                    )).indexOf(query) > -1;
+                }
+                if (value.toLowerCase) {
+                    return Ox.contains(['*', annotation.layer], self.options.findLayer)
+                        && Ox.decodeHTMLEntities(Ox.stripTags(
+                            value.toLowerCase()
+                        )).indexOf(query) > -1;
+                }
             });
         }
         return results;
@@ -1119,6 +1125,9 @@ Ox.VideoAnnotationPanel = function(options, self) {
             Ox.forEach(layer.items, function(item) {
                 if (item.id == annotationId) {
                     value = item.value;
+                    if (!value.toLowerCase && value.toString) {
+                        value = value.toString()
+                    }
                     found = true;
                     return false; // break
                 }
@@ -1276,9 +1285,15 @@ Ox.VideoAnnotationPanel = function(options, self) {
         var words = [];
         Ox.forEach(Ox.count(Ox.words(
             self.annotations.map(function(annotation) {
-                return Ox.decodeHTMLEntities(
+                let value = annotation.value
-                    Ox.stripTags(annotation.value.toLowerCase())
+                if (!value.toLowerCase && value.toString) {
-                );
+                    value = value.toString()
+                }
+                if (value.toLowerCase) {
+                    return Ox.decodeHTMLEntities(
+                        Ox.stripTags(value.toLowerCase())
+                    );
+                }
             }).join(' ')
         )), function(count, value) {
             words.push({count: count, value: value});
@@ -1431,11 +1446,12 @@ Ox.VideoAnnotationPanel = function(options, self) {
                 position: self.options.position
             });
             if (self.editing && self.options.selected.length && self.options.selected[0] != '_') {
+                let value = $('.OxEditableElement input:visible').val()
                 that.triggerEvent('editannotation', {
                     id: self.options.selected,
                     'in': self.options['in'],
                     out: self.options.out,
-                    value: $('.OxEditableElement input:visible').val()
+                    value: value
                 });
             }
         }
@@ -1568,6 +1584,9 @@ Ox.VideoAnnotationPanel = function(options, self) {
         }
         data['in'] = self.options['in'];
         data.out = self.options.out;
+        if (data.layer == 'data' && Ox.isString(data.value)) {
+            data.value = JSON.parse(data.value)
+        }
         that.triggerEvent('editannotation', data);
     }
 

source/UI/js/Video/VideoElement.js

@@ -399,6 +399,7 @@ Ox.VideoElement = function(options, self) {
             }
             if (video.currentTime == in_) {
                 Ox.Log('Video', 'sCV', 'already at position');
+                that.triggerEvent('seeked');
                 ready();
             } else {
                 self.$video.one('seeked', function() {

source/UI/js/Video/VideoPlayer.js

@@ -519,9 +519,13 @@ Ox.VideoPlayer = function(options, self) {
                         .css(getVideoCSS(
                             self.$poster[0].width,
                             self.$poster[0].height
-                        ))
+                        ));
-                        .show();
+                    if (Ox.isUndefined(self.posterIsVisible) && self.options.paused) {
-                    self.posterIsVisible = true;
+                        self.$poster.show()
+                        self.posterIsVisible = true;
+                    } else {
+                        hidePoster()
+                    }
                 }
             })
             .appendTo(self.$videoContainer);
@@ -2772,6 +2776,7 @@ Ox.VideoPlayer = function(options, self) {
         if (!self.options.paused) {
             self.playOnLoad = true;
             togglePaused('button');
+            hidePoster();
         }
         self.loadedMetadata = false;
         showLoadingIcon();

source/UI/js/Window/Dialog.js

@@ -19,6 +19,7 @@ Ox.Dialog = function(options, self) {
     var that = Ox.Element({}, self)
             .defaults({
                 buttons: [],
+                borderless: false,
                 controlsBottom: [],
                 controlsTop: [],
                 closeButton: false,
@@ -73,7 +74,7 @@ Ox.Dialog = function(options, self) {
             .appendTo(Ox.Fullscreen.element ? Ox.Fullscreen.element : Ox.$body);
 
     self.hasButtons = !!self.options.buttons.length;
-    self.barsHeight = 24 + 24 * self.hasButtons;
+    self.barsHeight = !self.options.borderless*24 + 24 * self.hasButtons;
     self.initialMaxHeight = self.options.maxHeight;
     self.initialMaxWidth = self.options.maxWidth;
     self.titleMargin = 8 + (self.options.closeButton ? 20 : 0)
@@ -94,7 +95,9 @@ Ox.Dialog = function(options, self) {
             size: 24
         })
         .addClass('OxTitlebar')
-        .appendTo(that);
+    if (!self.options.borderless) {
+        self.$titlebar.appendTo(that);
+    }
 
     if (self.options.closeButton) {
         self.$closeButton = Ox.Button({
@@ -605,6 +608,13 @@ Ox.Dialog = function(options, self) {
                 borderBottomRightRadius: '8px'
             })
             .appendTo(that);
+        if (self.options.borderless) {
+            self.$content.css({
+                top: 0,
+                borderTopLeftRadius: '8px',
+                borderTopRightRadius: '8px'
+            })
+        }
         !isImage && self.$content.append(
             self.options.content.css(self.hasButtons ? {} : {
                 borderBottomLeftRadius: '8px',