From 82436145467dffb21d0ed91dd8bdd5394e43be87 Mon Sep 17 00:00:00 2001 From: j Date: Mon, 12 Jan 2026 22:30:54 +0000 Subject: [PATCH 1/4] add support for data annotations --- source/UI/js/Form/ArrayEditable.js | 2 +- source/UI/js/Form/Editable.js | 27 +++++++++----- source/UI/js/Video/AnnotationFolder.js | 43 +++++++++++++++------- source/UI/js/Video/AnnotationPanel.js | 4 +- source/UI/js/Video/VideoAnnotationPanel.js | 35 ++++++++++++++---- 5 files changed, 77 insertions(+), 34 deletions(-) diff --git a/source/UI/js/Form/ArrayEditable.js b/source/UI/js/Form/ArrayEditable.js index 11f62ff9..c0ae9fbf 100644 --- a/source/UI/js/Form/ArrayEditable.js +++ b/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}) }); } diff --git a/source/UI/js/Form/Editable.js b/source/UI/js/Form/Editable.js index 61e96f54..5ea5076e 100644 --- a/source/UI/js/Form/Editable.js +++ b/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' ? '
' : '', + element: options.type == 'input' ? '' : '
', 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' ? '' : '
') @@ -159,7 +161,7 @@ Ox.Editable = function(options, self) { changeOnKeypress: true, element: self.options.type == 'input' ? '' : '
', 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' - ? (self.options.unformat || Ox.decodeHTMLEntities)(self.options.value) + return self.options.unformat + ? self.options.unformat(self.options.value) + : self.options.type == 'input' ? Ox.decodeHTMLEntities(self.options.value) : self.options.value.replace(//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 ? ' ' : 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'); diff --git a/source/UI/js/Video/AnnotationFolder.js b/source/UI/js/Video/AnnotationFolder.js index 2284f36d..4a5c4243 100644 --- a/source/UI/js/Video/AnnotationFolder.js +++ b/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, - type: self.options.type == 'text' ? 'textarea' : 'input' + maxHeight: isTextType(self.options.type) ? Infinity : void 0, + 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, - format: self.options.translate ? function(value) { - return Ox._(value); - } : null, - unformat: function(value) { - return Ox.decodeHTMLEntities(Ox.stripTags(value)); - } - } : {})) + autocompleteSelectUpdate: true + } : { + })) .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'], - position: ['+in', '+duration', self.options.type == 'text' ? '+created' : '+value'], + duration: ['-duration', '+in', isTextType(self.options.type) ? '+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; diff --git a/source/UI/js/Video/AnnotationPanel.js b/source/UI/js/Video/AnnotationPanel.js index 658dc9f4..f80121bd 100644 --- a/source/UI/js/Video/AnnotationPanel.js +++ b/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) + '"'; diff --git a/source/UI/js/Video/VideoAnnotationPanel.js b/source/UI/js/Video/VideoAnnotationPanel.js index 3d52533a..fd0bdd73 100644 --- a/source/UI/js/Video/VideoAnnotationPanel.js +++ b/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) - && Ox.decodeHTMLEntities(Ox.stripTags( - annotation.value.toLowerCase() - )).indexOf(query) > -1; + let value = annotation.value + if (!value.toLowerCase && value.toString) { + value = value.toString() + } + 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( - Ox.stripTags(annotation.value.toLowerCase()) - ); + let value = annotation.value + 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); } From 1540854faeea6852008aa7ae2290f03fc012ec63 Mon Sep 17 00:00:00 2001 From: j Date: Tue, 13 Jan 2026 19:23:15 +0000 Subject: [PATCH 2/4] trigger seeked to avoid loading icon after loop --- source/UI/js/Video/VideoElement.js | 1 + 1 file changed, 1 insertion(+) diff --git a/source/UI/js/Video/VideoElement.js b/source/UI/js/Video/VideoElement.js index 72bdfac6..c6e279b8 100644 --- a/source/UI/js/Video/VideoElement.js +++ b/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() { From bc5b1b961cb692660a5cfb00f288089e540c447f Mon Sep 17 00:00:00 2001 From: j Date: Tue, 13 Jan 2026 19:23:40 +0000 Subject: [PATCH 3/4] don't show poster if player already started --- source/UI/js/Video/VideoPlayer.js | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/source/UI/js/Video/VideoPlayer.js b/source/UI/js/Video/VideoPlayer.js index 9a15bcf4..7d767813 100644 --- a/source/UI/js/Video/VideoPlayer.js +++ b/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(); - self.posterIsVisible = true; + )); + if (Ox.isUndefined(self.posterIsVisible) && self.options.paused) { + 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(); From ec5b050496721d3f77897d86380ae866532014e7 Mon Sep 17 00:00:00 2001 From: j Date: Wed, 14 Jan 2026 21:39:36 +0000 Subject: [PATCH 4/4] support disalogs without titlebar, i.e. preview vidieo player --- source/UI/js/Window/Dialog.js | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/source/UI/js/Window/Dialog.js b/source/UI/js/Window/Dialog.js index 30a44a58..c027db68 100644 --- a/source/UI/js/Window/Dialog.js +++ b/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',