make video editor handle internal links (fixes #494)

source/Ox.UI/js/Video/Ox.AnnotationPanel.js

@@ -258,7 +258,6 @@ Ox.AnnotationPanel = function(options, self) {
     }
 
     function insert(data) {
-        Ox.print('insert', data);
         var id = data.id;
         Ox.InsertHTMLDialog(Ox.extend({
             callback: function(data) {
@@ -271,14 +270,12 @@ Ox.AnnotationPanel = function(options, self) {
     }
 
     function renderEditMenu() {
-        Ox.print('RENDER EDIT MENU')
         var annotation, annotationTitle, folder,
             isDefined, isEditable, isEvent, isEventOrPlace, isPlace, isString,
             key, manageTitle, type, value
         if (self.options.selected) {
             annotation = getAnnotation(self.options.selected);
             folder = getFolder(self.options.selected);
-            Ox.print('>>>>?', annotation, folder, self.options.selected);
             key = folder.options('id');
             type = folder.options('type');
             value = annotation.value;
@@ -400,7 +397,6 @@ Ox.AnnotationPanel = function(options, self) {
         }
         if (!self.deselecting) {
             self.options.selected = data.id;
-            Ox.print('selectAnnotation', index, data.id)
             self.options.editable && renderEditMenu();
             that.triggerEvent('select', data);
         }
@@ -417,7 +413,6 @@ Ox.AnnotationPanel = function(options, self) {
             Ox.getIndexById(self.options.layers, layer) + direction,
             self.options.layers.length
         );
-        Ox.print('index', index)
         self.$folder[index].selectItem(direction == 1 ? 0 : -1);
     }
 

source/Ox.UI/js/Video/Ox.VideoEditor.js

@@ -594,7 +594,7 @@ Ox.VideoEditor = function(options, self) {
         })
         .bindEvent({
             add: function(data) {
-                Ox.print('ADD EVENT REACHED EDITOR', data)
+                //Ox.print('ADD EVENT REACHED EDITOR', data)
                 addAnnotation(data.layer);
             },
             annotationsfont: function(data) {
@@ -610,7 +610,7 @@ Ox.VideoEditor = function(options, self) {
                 that.triggerEvent('annotationssort', data);
             },
             blur: function(data) {
-                Ox.print('VIDEO EDITOR BLUR')
+                //Ox.print('VIDEO EDITOR BLUR')
                 // Only blur if the video editor did not receive the click,
                 // no dialog is open, and no menu was visible
                 if (
@@ -628,7 +628,7 @@ Ox.VideoEditor = function(options, self) {
                 that.triggerEvent('define', data);
             },
             edit: function(data) {
-                Ox.print('EDIT EVENT REACHED EDITOR', data)
+                //Ox.print('EDIT EVENT REACHED EDITOR', data)
                 updateWords('remove');
                 self.editing = true;
                 setTimelineState();
@@ -979,7 +979,7 @@ Ox.VideoEditor = function(options, self) {
     }
 
     function removeAnnotation(data) {
-        Ox.print('REMOVE EVENT REACHED EDITOR', data)
+        //Ox.print('REMOVE EVENT REACHED EDITOR', data)
         var layer = Ox.getObjectById(self.options.layers, data.layer),
             index = Ox.getIndexById(layer.items, data.id);
         updateWords('remove');
@@ -1258,7 +1258,6 @@ Ox.VideoEditor = function(options, self) {
     function updateWords(action) {
         // action can be 'add' or 'remove'
         var words = [];
-        Ox.print('#^#$^#$^#$^#$', self.options.selected, getAnnotationValue(self.options.selected))
         Ox.forEach(Ox.count(Ox.words(
             getAnnotationValue(self.options.selected)
         )), function(count, value) {
@@ -1293,10 +1292,16 @@ Ox.VideoEditor = function(options, self) {
     }
 
     self.setOption = function(key, value) {
-        if (key == 'width' || key == 'height') {
+        if (key == 'height' || key == 'width') {
             setSizes();
+        } else if (key == 'in' || key == 'out') {
+            setPoint(key, value);
         } else if (key == 'position') {
             setPosition(value);
+        } else if (key == 'selected') {
+            selectAnnotation(
+                value ? Ox.getObjectById(self.annotations, value) : {id: ''}
+            );
         } else if (key == 'showAnnotations') {
             that.$element.toggle(1);
         }
@@ -1317,7 +1322,7 @@ Ox.VideoEditor = function(options, self) {
         // called from editannotation callback
         self.options.selected = annotation.id; // fixme: needed?
         self.$annotationPanel.updateItem(id, annotation);
-    }
+    };
 
     /*@
     removeAnnotation <f> remove annotation

source/Ox.UI/js/Video/Ox.VideoPanel.js

@@ -41,6 +41,7 @@ Ox.VideoPanel = function(options, self) {
                 poster: '',
                 resolution: 0,
                 scaleToFill: false,
+                selected: '',
                 showAnnotations: false,
                 showAnnotationsCalendar: false,
                 showAnnotationsMap: false,
@@ -366,16 +367,14 @@ Ox.VideoPanel = function(options, self) {
             self.$video.options({
                 height: getPlayerHeight()
             });
+        } else if (key == 'in' || key == 'out') {
+            setPoint(key, value);
         } else if (key == 'position') {
-            self.$video.options({
-                position: value
-            });
-            self.$timeline.options({
-                position: value
-            });
-            self.$annotationPanel.options({
-                position: value
-            });
+            self.$video.options({position: value});
+            self.$timeline.options({position: value});
+            self.$annotationPanel.options({position: value});
+        } else if (key == 'selected') {
+            self.$annotationPanel.options({selected: value});
         } else if (key == 'showAnnotations') {
             that.$element.toggle(1);
         } else if (key == 'showTimeline') {

source/Ox.UI/js/Video/Ox.VideoPlayer.js

@@ -1085,6 +1085,13 @@ Ox.VideoPlayer = function(options, self) {
         self.$copyrightIcon[self.censored ? 'show' : 'hide']();
     }
 
+    function changeVolumeBy(num) {
+        showVolume();
+        self.options.volume = Ox.limit(self.options.volume + num, 0, 1);
+        setVolume(self.options.volume);
+        self.$volumeInput && self.$volumeInput.value(self.options.volume);
+    }
+
     function clearInterfaceTimeout() {
         clearTimeout(self.interfaceTimeout);
         self.interfaceTimeout = 0;
@@ -1853,6 +1860,14 @@ Ox.VideoPlayer = function(options, self) {
         }
     }
 
+    function setCensored() {
+        var censored = getCensored();
+        if (censored != self.censored) {
+            self.censored = censored;
+            censor();
+        }
+    }
+
     function setMarkers() {
         //Ox.Log('Video', 'SET MARKERS', self.options.position, self.options['in'], self.options.out, self.$pointMarker);
         Ox.forEach(self.$posterMarker, function(marker) {
@@ -1877,6 +1892,7 @@ Ox.VideoPlayer = function(options, self) {
     function setPosition(position, from) {
         self.options.position = Ox.limit(position, self['in'], self.out);
         /*
+        // disabled
         self.options.position = Math.round(
             position * self.options.fps
         ) / self.options.fps;
@@ -1989,14 +2005,6 @@ Ox.VideoPlayer = function(options, self) {
         }
     }
 
-    function setCensored() {
-        var censored = getCensored();
-        if (censored != self.censored) {
-            self.censored = censored;
-            censor();
-        }
-    }
-
     function setSubtitle() {
         var subtitle = getSubtitle();
         if (subtitle != self.subtitle) {
@@ -2024,13 +2032,6 @@ Ox.VideoPlayer = function(options, self) {
         self.$video.css(self.videoCSS);
     };
 
-    function changeVolumeBy(num) {
-        showVolume();
-        self.options.volume = Ox.limit(self.options.volume + num, 0, 1);
-        setVolume(self.options.volume);
-        self.$volumeInput && self.$volumeInput.value(self.options.volume);
-    }
-
     function setVolume(volume) {
         self.options.volume = volume;
         if (!!self.options.volume == self.options.muted) {

source/Ox/js/String.js

@@ -74,6 +74,8 @@ Ox.highlightHTML <f> Highlight matches in an HTML string
     '<span class="h">AT&amp;T</span>'
     > Ox.highlightHTML('AT&amp;T', 'amp', 'h')
     'AT&amp;T'
+    > Ox.highlightHTML('a &lt;b&gt; c', '<b>', 'h')
+    '<span class="h">a <span class="h">&lt;b&gt;</span> c'
 @*/
 Ox.highlightHTML = function(html, str, classname, tags) {
     var count = 0,