From b5a7b9b28d2f58b19001019abda392f4d8f785fa Mon Sep 17 00:00:00 2001 From: rlx <0x0073@0x2620.org> Date: Sun, 19 Feb 2012 17:24:34 +0000 Subject: [PATCH] remove some unused files --- source/Ox.UI/js/Video/Ox.BlockTimeline.js | 376 ---------------------- source/Ox.UI/js/Video/Ox.LargeTimeline.js | 225 ------------- source/Ox.UI/js/Video/Ox.SmallTimeline.js | 205 ------------ 3 files changed, 806 deletions(-) delete mode 100644 source/Ox.UI/js/Video/Ox.BlockTimeline.js delete mode 100644 source/Ox.UI/js/Video/Ox.LargeTimeline.js delete mode 100644 source/Ox.UI/js/Video/Ox.SmallTimeline.js diff --git a/source/Ox.UI/js/Video/Ox.BlockTimeline.js b/source/Ox.UI/js/Video/Ox.BlockTimeline.js deleted file mode 100644 index 91781b4a..00000000 --- a/source/Ox.UI/js/Video/Ox.BlockTimeline.js +++ /dev/null @@ -1,376 +0,0 @@ -// vim: et:ts=4:sw=4:sts=4:ft=javascript - -'use strict'; - -/*@ -Ox.BlockTimeline BlockTimeline Object - () -> BlockTimeline Object - (options) -> BlockTimeline Object - (options, self) -> BlockTimeline Object - options Options object - self shared private variable -@*/ - -Ox.BlockTimeline = function(options, self) { - - self = self || {}; - var that = Ox.Element({}, self) - .defaults({ - duration: 0, - find: '', - matches: [], - points: [0, 0], - position: 0, - subtitles: [], - videoId: '', - width: 0 - }) - .options(options || {}) - .addClass('OxTimelineSmall') - .mousedown(mousedown) - .mouseleave(mouseleave) - .mousemove(mousemove) - .bindEvent({ - drag: function(data) { - mousedown(data); - } - }); - - Ox.extend(self, { - $images: [], - $lines: [], - $markerPoint: [], - $selection: [], - $subtitles: [], - $tooltip: Ox.Tooltip({ - animate: false - }).css({ - textAlign: 'center' - }), - hasSubtitles: self.options.subtitles.length, - height: 16, - lines: Math.ceil(self.options.duration / self.options.width), - margin: 8 - }); - - that.css({ - width: (self.options.width + self.margin) + 'px', - height: ((self.height + self.margin) * self.lines + 4) + 'px' - }); - - getTimelineImageURL(function(url) { - - self.timelineImageURL = url; - - Ox.range(0, self.lines).forEach(function(i) { - addLine(i); - }); - - self.$markerPosition = $('') - .addClass('OxMarkerPosition') - .attr({ - src: Ox.UI.PATH + 'png/videoMarkerPlay.png' - }) - .css({ - position: 'absolute', - width: '9px', - height: '5px', - zIndex: 10 - }) - .appendTo(that.$element); - - setPosition(); - - ['in', 'out'].forEach(function(v, i) { - var titleCase = Ox.toTitleCase(v); - self.$markerPoint[i] = $('') - .addClass('OxMarkerPoint' + titleCase) - .attr({ - src: Ox.UI.PATH + 'png/videoMarker' + titleCase + '.png' - }) - .appendTo(that.$element); - setMarkerPoint(i); - }); - - }); - - function addLine(i) { - // fixme: get URLs once, not once for every line - self.$lines[i] = Ox.Element() - .css({ - top: i * (self.height + self.margin) + 'px', - width: self.options.width + 'px' - }) - .appendTo(that); - self.$images[i] = $('') - .addClass('OxTimelineSmallImage') - .attr({ - src: self.timelineImageURL - }) - .css({ - marginLeft: (-i * self.options.width) + 'px' - }) - .appendTo(self.$lines[i].$element); - if (self.hasSubtitles) { - self.subtitlesImageURL = getSubtitlesImageURL(); - self.$subtitles[i] = $('') - .addClass('OxTimelineSmallSubtitles') - .attr({ - src: self.subtitlesImageURL - }) - .css({ - marginLeft: (-i * self.options.width) + 'px' - }) - .appendTo(self.$lines[i].$element); - } - if (self.options.points[0] != self.options.points[1]) { - addSelection(i); - } - } - - function addSelection(i) { - self.selectionImageURL = getSelectionImageURL(); - self.$selection[i] && self.$selection[i].remove(); - self.$selection[i] = $('') - .addClass('OxTimelineSmallSelection') - .attr({ - src: self.selectionImageURL - }) - .css({ - marginLeft: (-i * self.options.width) + 'px' - }) - .appendTo(self.$lines[i].$element); - } - - function getPosition(e) { - //FIXME: this might still be broken in opera according to http://acko.net/blog/mouse-handling-and-absolute-positions-in-javascript - return (e.offsetX ? e.offsetX : e.clientX - $(e.target).offset().left); - } - - function getSelectionImageURL() { - var height = 18, - width = Math.ceil(self.options.duration), - $canvas = $('') - .attr({ - height: height, - width: width - }), - canvas = $canvas[0], - context = canvas.getContext('2d'), - imageData = context.createImageData(width, height), - data = imageData.data, - points = self.options.points.map(function(v, i) { - return Math.round(v) + i; - }), - top = 0, - bottom = 18; - Ox.range(points[0], points[1]).forEach(function(x) { - Ox.range(top, bottom).forEach(function(y) { - var color = (y == top || y == bottom - 1) ? [255, 255, 255, 255] : [255, 255, 255, 64], - index = x * 4 + y * 4 * width; - data[index] = color[0]; - data[index + 1] = color[1]; - data[index + 2] = color[2]; - data[index + 3] = color[3]; - }); - }); - context.putImageData(imageData, 0, 0); - return canvas.toDataURL(); - } - - function getSubtitle(position) { - var subtitle = null; - Ox.forEach(self.options.subtitles, function(v) { - if (v['in'] <= position && v['out'] >= position) { - subtitle = v; - return false; - } - }); - return subtitle; - } - - function getSubtitlesImageURL() { - var height = 18, - width = Math.ceil(self.options.duration), - $canvas = $('') - .attr({ - height: height, - width: width - }), - canvas = $canvas[0], - context = canvas.getContext('2d'), - imageData = context.createImageData(width, height), - data = imageData.data; - self.options.subtitles.forEach(function(v) { - //var color = self.options.matches.indexOf(i) > -1 ? [255, 255, 0] : [255, 255, 255] - var inPoint = Math.round(v['in']), - outPoint = Math.round(v.out) + 1, - lines = v.value.split('\n').length, - bottom = 15, - top = bottom - lines - 2; - Ox.range(inPoint, outPoint).forEach(function(x) { - Ox.range(top, bottom).forEach(function(y) { - var color = (y == top || y == bottom - 1) ? [0, 0, 0] : [255, 255, 255], - index = x * 4 + y * 4 * width; - data[index] = color[0]; - data[index + 1] = color[1]; - data[index + 2] = color[2]; - data[index + 3] = 128; - }); - }); - }); - context.putImageData(imageData, 0, 0); - return canvas.toDataURL(); - } - - function getTimelineImageURL(callback) { - var height = 16, - images = Math.ceil(self.options.duration / 3600), - loaded = 0, - width = Math.ceil(self.options.duration), - $canvas = $('') - .attr({ - height: height, - width: width - }), - canvas = $canvas[0], - context = canvas.getContext('2d'); - Ox.range(images).forEach(function(i) { - var $img = $('') - .attr({ - src: '/' + self.options.videoId + '/timelines/timeline.16.' + i + '.png' - }) - .load(function() { - context.drawImage($img[0], i * 3600, 0); - //Ox.Log('Video', 'loaded, images', loaded, images, $img[0]) - if (++loaded == images) { - //Ox.Log('Video', 'callback', canvas.toDataURL().length) - callback(canvas.toDataURL()); - } - }); - }); - } - - function mousedown(e) { - var $target = $(e.target); - if ( - $target.hasClass('OxTimelineSmallImage') || - $target.hasClass('OxTimelineSmallSubtitles') || - $target.hasClass('OxTimelineSmallSelection') - ) { - self.options.position = getPosition(e); - setPosition(); - that.triggerEvent('change', { - position: self.options.position - }); - } - e.preventDefault(); - } - - function mouseleave(e) { - self.$tooltip.hide(); - } - - function mousemove(e) { - var $target = $(e.target), - position, - subtitle; - if ( - $target.hasClass('OxTimelineSmallImage') || - $target.hasClass('OxTimelineSmallSubtitles') || - $target.hasClass('OxTimelineSmallSelection') - ) { - position = getPosition(e); - subtitle = getSubtitle(position); - self.$tooltip.options({ - title: subtitle ? - '' + - Ox.highlight(subtitle.value, self.options.find, 'OxHighlight').replace(/\n/g, '
') + - '
' + - Ox.formatDuration(subtitle['in'], 3) + ' - ' + Ox.formatDuration(subtitle['out'], 3) : - Ox.formatDuration(position, 3) - }) - .show(e.clientX, e.clientY); - } else { - self.$tooltip.hide(); - } - - } - - function setMarker() { - self.$markerPosition - .css({ - left: (self.options.position % self.options.width) + 'px', - top: (parseInt(self.options.position / self.options.width) * (self.height + self.margin) + 2) + 'px', - }); - } - - function setMarkerPoint(i) { - var position = Math.round(self.options.points[i]); - self.$markerPoint[i] - .css({ - left: (position % self.options.width) + 'px', - top: (parseInt(position / self.options.width) * (self.height + self.margin) + 16) + 'px', - }); - } - - function setPosition() { - self.options.position = Ox.limit(self.options.position, 0, self.options.duration); - setMarker(); - } - - function setWidth() { - self.lines = Math.ceil(self.options.duration / self.options.width); - that.css({ - width: (self.options.width + self.margin) + 'px', - height: ((self.height + self.margin) * self.lines + 4) + 'px' - }); - Ox.range(self.lines).forEach(function(i) { - if (self.$lines[i]) { - self.$lines[i].css({ - width: self.options.width + 'px' - }); - self.$images[i].css({ - marginLeft: (-i * self.options.width) + 'px' - }); - if (self.hasSubtitles) { - self.$subtitles[i].css({ - marginLeft: (-i * self.options.width) + 'px' - }); - } - } else { - addLine(i); - } - }); - while (self.$lines.length > self.lines) { - self.$lines[self.$lines.length - 1].remove(); - self.$lines.pop(); - } - setMarker(); - setMarkerPoint(0); - setMarkerPoint(1); - } - - function updateSelection() { - self.$lines.forEach(function($line, i) { - addSelection(i); - }); - } - - self.setOption = function(key, value) { - //Ox.Log('Video', 'onChange:', key, value) - if (key == 'points') { - //Ox.Log('Video', 'key', key, 'value', value) - setMarkerPoint(0); - setMarkerPoint(1); - updateSelection(); - } else if (key == 'position') { - setPosition(); - } else if (key == 'width') { - setWidth(); - } - }; - - return that; - -}; diff --git a/source/Ox.UI/js/Video/Ox.LargeTimeline.js b/source/Ox.UI/js/Video/Ox.LargeTimeline.js deleted file mode 100644 index 48fb58b2..00000000 --- a/source/Ox.UI/js/Video/Ox.LargeTimeline.js +++ /dev/null @@ -1,225 +0,0 @@ -// vim: et:ts=4:sw=4:sts=4:ft=javascript - -'use strict'; - -/*@ -Ox.LargeTimeline LargeTimeline Object - () -> LargeTimeline Object - (options) -> LargeTimeline Object - (options, self) -> LargeTimeline Object - options Options object - self shared private variable -@*/ - -Ox.LargeTimeline = function(options, self) { - - self = self || {}; - var that = Ox.Element({}, self) - .defaults({ - cuts: [], - duration: 0, - find: '', - matches: [], - points: [0, 0], - position: 0, - style: 'default', - subtitles: [], - videoId: '', - width: 0 - }) - .options(options || {}) - .addClass('OxTimelineLarge') - .mouseleave(mouseleave) - .mousemove(mousemove) - .bindEvent({ - anyclick: click, - dragstart: dragstart, - drag: drag - }); - - Ox.extend(self, { - $cuts: [], - $markerPoint: [], - $subtitles: [], - $tiles: {}, - $tooltip: Ox.Tooltip({ - animate: false - }), - center: parseInt(self.options.width / 2), - element: that.$element[0], - fps: 25, - height: 64, - tileWidth: 1500 - }); - self.tiles = self.options.duration * self.fps / self.tileWidth; - - self.$timeline = $('
') - .css({ - left: self.center + 'px' - }) - .appendTo(that.$element); - - self.options.subtitles.forEach(function(v, i) { - self.$subtitles[i] = $('
') - .addClass('OxSubtitle' + (self.options.matches.indexOf(i) > -1 ? ' OxHighlight' : '')) - .css({ - left: (v['in'] * self.fps) + 'px', - width: (((v['out'] - v['in']) * self.fps) - 2) + 'px' - }) - .html(Ox.highlight(v.value, self.options.find, 'OxHighlight')) - .appendTo(self.$timeline); - }); - - self.options.cuts.forEach(function(v, i) { - self.$cuts[i] = $('') - .addClass('OxCut') - .attr({ - src: Ox.UI.PATH + 'png/videoMarkerCut.png' - }) - .css({ - left: (v * self.fps) + 'px' - }) - .appendTo(self.$timeline); - }); - - self.$markerPosition = $('') - .addClass('OxMarkerPosition') - .attr({ - src: Ox.UI.PATH + 'png/videoMarkerPlay.png' - }) - .appendTo(that.$element); - setMarker(); - - ['In', 'Out'].forEach(function(v, i) { - self.$markerPoint[i] = $('') - .addClass('OxMarkerPoint' + v) - .attr({ - src: Ox.UI.PATH + 'png/videoMarker' + v + '.png' - }) - .appendTo(self.$timeline); - setMarkerPoint(i); - }); - - setWidth(); - setPosition(); - - function click(data) { - self.options.position = Ox.limit( - getPosition(data), 0, self.options.duration - ); - setPosition(); - triggerChangeEvent(); - } - - function dragstart(data) { - self.drag = {x: data.clientX}; - } - - function drag(data) { - self.options.position = Ox.limit( - self.options.position + (self.drag.x - data.clientX) / self.fps, - 0, self.options.duration - ); - self.drag.x = data.clientX; - setPosition(); - triggerChangeEvent(); - } - - function getPosition(e) { - return self.options.position + (e.clientX - that.offset().left - self.center - 1) / self.fps; - } - - function mouseleave(e) { - self.clientX = 0; - self.clientY = 0; - self.$tooltip.hide(); - } - - function mousemove(e) { - self.clientX = e.clientX; - self.clientY = e.clientY; - updateTooltip(); - } - - function setMarkerPoint(i) { - self.$markerPoint[i].css({ - left: (self.options.points[i] * self.fps) + 'px' - }); - } - - function setMarker() { - self.$markerPosition.css({ - left: (self.center - 4) + 'px', - }); - } - - function setPosition() { - self.tile = parseInt(self.options.position * self.fps / self.tileWidth); - self.$timeline.css({ - marginLeft: (-self.options.position * self.fps) + 'px' - }); - Ox.range( - Math.max(self.tile - 1, 0), Math.min(self.tile + 2, self.tiles) - ).forEach(function(v) { - if (!self.$tiles[v]) { - self.$tiles[v] = $('') - .attr({ - src: '/' + self.options.videoId + '/' + ( - self.options.style == 'default' ? 'timeline' : self.options.style - ) + '64p' + v + '.png' - }) - .css({ - left: (v * self.tileWidth) + 'px' - }) - .appendTo(self.$timeline); - } - }); - if (self.clientX && self.clientY) { - updateTooltip(); - } - } - - function setWidth() { - self.center = parseInt(self.options.width / 2); - that.css({ - width: self.options.width + 'px' - }); - self.$timeline.css({ - left: self.center + 'px' - }); - setMarker(); - } - - function triggerChangeEvent() { - that.triggerEvent('change', { - position: self.options.position - }); - } - - function updateTooltip() { - var position = getPosition(self); - if (position >= 0 && position <= self.options.duration) { - self.$tooltip - .options({ - title: Ox.formatDuration(position, 3) - }) - .show(self.clientX, self.clientY); - } else { - self.$tooltip.hide(); - } - } - - self.setOption = function(key, value) { - if (key == 'points') { - setMarkerPoint(0); - setMarkerPoint(1); - } else if (key == 'position') { - setPosition(); - } else if (key == 'width') { - setWidth(); - } - }; - - return that; - -}; diff --git a/source/Ox.UI/js/Video/Ox.SmallTimeline.js b/source/Ox.UI/js/Video/Ox.SmallTimeline.js deleted file mode 100644 index 5918d72a..00000000 --- a/source/Ox.UI/js/Video/Ox.SmallTimeline.js +++ /dev/null @@ -1,205 +0,0 @@ -// vim: et:ts=4:sw=4:sts=4:ft=javascript - -'use strict'; - -/*@ -Ox.SmallTimeline SmallTimeline Object - () -> SmallTimeline Object - (options) -> SmallTimeline Object - (options, self) -> SmallTimeline Object - options Options object - self shared private variable -@*/ - -Ox.SmallTimeline = function(options, self) { - - self = self || {}; - var that = Ox.Element({}, self) - .defaults({ - duration: 0, - find: '', - matches: [], - points: [0, 0], - position: 0, - subtitles: [], - videoId: '', - width: 0 - }) - .options(options || {}) - .addClass('OxTimelineSmall') - .mousedown(mousedown) - .mouseleave(mouseleave) - .mousemove(mousemove) - .bindEvent({ - drag: function(data) { - mousedown(data); - } - }); - - Ox.extend(self, { - $images: [], - $markerPoint: [], - $subtitles: [], - $tooltip: Ox.Tooltip({ - animate: false - }).css({ - textAlign: 'center' - }), - hasSubtitles: self.options.subtitles.length, - height: 16, - margin: 8 - }); - - that.css({ - width: (self.options.width + self.margin) + 'px', - height: (self.height + self.margin) + 'px' - }); - - self.$line = $('') - .addClass('OxTimelineSmallImage') - .attr({ - src: '/' + self.options.videoId + '/timeline16p.png' - }) - .css({ - position: 'absolute', - left: '4px', - top: '4px', - width: self.options.width, - height: '16px' - }) - .appendTo(that.$element); - - self.$markerPosition = $('') - .addClass('OxMarkerPosition') - .attr({ - src: Ox.UI.PATH + 'png/videoMarkerPlay.png' - }) - .css({ - position: 'absolute', - width: '9px', - height: '5px', - zIndex: 10 - }) - .appendTo(that.$element); - - setPosition(); - - ['in', 'out'].forEach(function(v, i) { - var titleCase = Ox.toTitleCase(v); - self.$markerPoint[i] = $('') - .addClass('OxMarkerPoint' + titleCase) - .attr({ - src: Ox.UI.PATH + 'png/videoMarker' + titleCase + '.png' - }) - .appendTo(that.$element); - setMarkerPoint(i); - }); - - function getPosition(e) { - return e.offsetX / self.options.width * self.options.duration; - } - - function getSubtitle(position) { - var subtitle = null; - Ox.forEach(self.options.subtitles, function(v) { - if (v['in'] <= position && v['out'] >= position) { - subtitle = v; - return false; - } - }); - return subtitle; - } - - function mousedown(e) { - var $target = $(e.target); - if ( - $target.hasClass('OxTimelineSmallImage') || - $target.hasClass('OxTimelineSmallSubtitles') - ) { - self.options.position = getPosition(e); - setPosition(); - that.triggerEvent('change', { - position: self.options.position - }); - } - e.preventDefault(); - } - - function mouseleave(e) { - self.$tooltip.hide(); - } - - function mousemove(e) { - var $target = $(e.target), - position, - subtitle; - if ( - $target.hasClass('OxTimelineSmallImage') || - $target.hasClass('OxTimelineSmallSubtitles') - ) { - position = getPosition(e); - subtitle = getSubtitle(position); - self.$tooltip.options({ - title: subtitle ? - '' + - Ox.highlight(subtitle.value, self.options.find, 'OxHighlight').replace(/\n/g, '
') + - '
' + - Ox.formatDuration(subtitle['in'], 3) + ' - ' + Ox.formatDuration(subtitle['out'], 3) : - Ox.formatDuration(position, 3) - }) - .show(e.clientX, e.clientY); - } else { - self.$tooltip.hide(); - } - - } - - function setMarker() { - self.$markerPosition - .css({ - left: parseInt( - self.options.position / self.options.duration * self.options.width - ) + 'px', - top: '2px', - }); - } - - function setMarkerPoint(i) { - var position = self.options.points[i]; - self.$markerPoint[i] - .css({ - left: (position % self.options.width) + 'px', - top: (parseInt(position / self.options.width) * (self.height + self.margin) + 16) + 'px', - }); - } - - function setPosition() { - self.options.position = Ox.limit(self.options.position, 0, self.options.duration); - setMarker(); - } - - function setWidth() { - self.$line.css({ - width: self.options.width + 'px', - }); - setMarker(); - setMarkerPoint(0); - setMarkerPoint(1); - } - - self.setOption = function(key, value) { - //Ox.Log('Video', 'onChange:', key, value) - if (key == 'points') { - //Ox.Log('Video', 'key', key, 'value', value) - setMarkerPoint(0); - setMarkerPoint(1); - } else if (key == 'position') { - setPosition(); - } else if (key == 'width') { - setWidth(); - } - }; - - return that; - -};