0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki Activity

enable timeline types

Browse source
This commit is contained in:
rlx 2012-06-15 13:20:07 +00:00
parent fbeb434e27
commit 856ea3b1d3
7 changed files with 134 additions and 94 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

53
source/Ox.UI/js/Video/BlockVideoTimeline.js
View file

@ -36,6 +36,7 @@ Ox.BlockVideoTimeline = function(options, self) {
results: setResults,
subtitles: setSubtitles,
state: setState,
type: setType,
width: setWidth
})
.addClass('OxBlockVideoTimeline')
@ -69,19 +70,7 @@ Ox.BlockVideoTimeline = function(options, self) {
setCSS();
self.$image = Ox.SmallVideoTimelineImage({
duration: self.options.duration,
editing: self.options.editing,
imageURL: self.options.getImageURL,
'in': self.options['in'],
mode: 'editor',
out: self.options.out,
results: self.options.results,
state: self.options.state,
subtitles: self.options.subtitles,
type: self.options.type,
width: Math.round(self.options.duration)
});
self.$image = getImage();
Ox.loop(self.lines, function(i) {
addLine(i);
@ -155,6 +144,22 @@ Ox.BlockVideoTimeline = function(options, self) {
}
}
function getImage() {
return Ox.SmallVideoTimelineImage({
duration: self.options.duration,
editing: self.options.editing,
imageURL: self.options.getImageURL,
'in': self.options['in'],
mode: 'editor',
out: self.options.out,
results: self.options.results,
state: self.options.state,
subtitles: self.options.subtitles,
type: self.options.type,
width: Math.round(self.options.duration)
});
}
function getLines() {
return Math.ceil(self.options.duration / self.options.width);
}
@ -270,6 +275,19 @@ Ox.BlockVideoTimeline = function(options, self) {
updateTimelines();
}
function setType() {
self.$image = getImage();
self.$images.forEach(function($image, i) {
self.$images[i].replaceWith(
self.$images[i] = self.$image.clone()
.css({
position: 'absolute',
marginLeft: -i * self.options.width + 'px'
})
);
});
}
function setWidth() {
self.lines = getLines();
setCSS();
@ -303,11 +321,10 @@ Ox.BlockVideoTimeline = function(options, self) {
function updateTimelines() {
self.$lines.forEach(function($line, i) {
$($line.children()[0]).replaceWith(
self.$images[i] = self.$image.clone()
.css({
position: 'absolute',
marginLeft: (-i * self.options.width) + 'px'
})
self.$images[i] = self.$image.clone().css({
position: 'absolute',
marginLeft: (-i * self.options.width) + 'px'
})
);
});
}

65
source/Ox.UI/js/Video/LargeVideoTimeline.js
View file

@ -35,6 +35,7 @@ Ox.LargeVideoTimeline = function(options, self) {
},
position: setPosition,
subtitles: setSubtitles,
type: setType,
width: setWidth
})
.addClass('OxLargeVideoTimeline')
@ -46,56 +47,42 @@ Ox.LargeVideoTimeline = function(options, self) {
drag: drag
});
Ox.extend(self, {
$cuts: [],
$pointMarker: {},
$tiles: {},
$tooltip: Ox.Tooltip({
animate: false
}),
center: Math.floor(self.options.width / 2),
element: that.$element[0],
fps: 25,
height: 64,
tileWidth: 1500
});
self.$cuts = [];
self.$pointMarker = {};
self.$tiles = {};
self.$tooltip = Ox.Tooltip({animate: false});
self.center = Math.floor(self.options.width / 2);
self.fps = 25;
self.height = 64;
self.tileWidth = 150;
self.tiles = self.options.duration * self.fps / self.tileWidth;
self.$timeline = $('<div>')
.css({
left: self.center + 'px'
})
.appendTo(that.$element)
.css({left: self.center + 'px'})
.appendTo(that)
setSubtitles();
self.options.cuts.forEach(function(v, i) {
self.$cuts[i] = $('<img>')
.addClass('OxCut')
.attr({
src: Ox.UI.getImageURL('markerCut')
})
.css({
left: (v * self.fps) + 'px'
})
.attr({src: Ox.UI.getImageURL('markerCut')})
.css({left: (v * self.fps) + 'px'})
.appendTo(self.$timeline)
});
self.$markerPosition = $('<img>')
.addClass('OxMarkerPosition')
.attr({
src: Ox.UI.getImageURL('markerPosition')
})
.appendTo(that.$element);
.attr({src: Ox.UI.getImageURL('markerPosition')})
.appendTo(that);
setMarker();
['in', 'out'].forEach(function(point) {
var titlecase = Ox.toTitleCase(point);
self.$pointMarker[point] = $('<img>')
.addClass('OxMarkerPoint' + titlecase)
.attr({
src: Ox.UI.getImageURL('marker' + titlecase)
})
.attr({src: Ox.UI.getImageURL('marker' + titlecase)})
.appendTo(self.$timeline);
setPointMarker(point);
});
@ -126,7 +113,9 @@ Ox.LargeVideoTimeline = function(options, self) {
}
function getPosition(e) {
return self.options.position + (e.clientX - that.offset().left - self.center - 1) / self.fps;
return self.options.position + (
e.clientX - that.offset().left - self.center - 1
) / self.fps;
}
function mouseleave(e) {
@ -142,9 +131,7 @@ Ox.LargeVideoTimeline = function(options, self) {
}
function setMarker() {
self.$markerPosition.css({
left: self.center + 'px'
});
self.$markerPosition.css({left: self.center + 'px'});
}
function setPointMarker(point) {
@ -198,6 +185,12 @@ Ox.LargeVideoTimeline = function(options, self) {
});
}
function setType() {
Ox.forEach(self.$tiles, function($tile, i) {
$tile.attr({src: self.options.getImageURL(self.options.type, i)});
});
}
function setWidth() {
self.center = Math.floor(self.options.width / 2);
that.css({
@ -210,9 +203,7 @@ Ox.LargeVideoTimeline = function(options, self) {
}
function triggerPositionEvent() {
that.triggerEvent('position', {
position: self.options.position
});
that.triggerEvent('position', {position: self.options.position});
}
function updateTooltip() {

8
source/Ox.UI/js/Video/SmallVideoTimelineImage.js
View file

@ -97,7 +97,7 @@ Ox.SmallVideoTimelineImage = function(options, self) {
width: self.options.width + 'px',
height: '16px'
})
.appendTo(that.$element);
.appendTo(that);
} else {
Ox.loop(self.images, function(i) {
$('<img>')
@ -111,7 +111,7 @@ Ox.SmallVideoTimelineImage = function(options, self) {
width: (i == self.images - 1 ? self.imageWidth % 3600 : 3600) + 'px',
height: '16px'
})
.appendTo(that.$element);
.appendTo(that);
});
}
@ -239,10 +239,6 @@ Ox.SmallVideoTimelineImage = function(options, self) {
return canvas.toDataURL();
}
function getPosition() {
}
return that;
};

18
source/Ox.UI/js/Video/VideoEditor.js
View file

@ -89,6 +89,10 @@ Ox.VideoEditor = function(options, self) {
showAnnotations: function() {
that.$element.toggle(1);
},
timeline: function() {
self.$menuButton.checkItem(self.options.timeline);
updateTimelines();
},
width: setSizes
})
.bindEvent({
@ -495,8 +499,7 @@ Ox.VideoEditor = function(options, self) {
self.options.timelines,
function(timeline) {
return Ox.extend({
checked: timeline.id == self.options.timeline,
disabled: true
checked: timeline.id == self.options.timeline
}, timeline);
}
)},
@ -564,7 +567,11 @@ Ox.VideoEditor = function(options, self) {
} else if (id == 'subtitles') {
toggleSubtitles();
} else if (id == 'timeline') {
// data.checked[0].id
self.options.timeline = data.checked[0].id;
updateTimelines();
that.triggerEvent('timeline', {
timeline: self.options.timeline
});
}
},
hide: function() {
@ -1367,6 +1374,11 @@ Ox.VideoEditor = function(options, self) {
});
}
function updateTimelines() {
self.$timeline[0].options({type: self.options.timeline});
self.$timeline[1].options({type: self.options.timeline});
}
function updateWords(action) {
// action can be 'add' or 'remove'
var words = [];

3
source/Ox.UI/js/Video/VideoPanel.js
View file

@ -87,6 +87,9 @@ Ox.VideoPanel = function(options, self) {
showTimeline: function() {
self.$videoPanel.toggle(1);
},
timeline: function() {
self.$timeline.options({type: self.options.timeline});
},
width: function() {
self.$video.options({width: getPlayerWidth()});
self.$timeline.options({width: getTimelineWidth()});

7
source/Ox.UI/js/Video/VideoTimelinePanel.js
View file

@ -53,9 +53,7 @@ Ox.VideoTimelinePanel = function(options, self) {
self.$player.options({height: self.options.height});
},
paused: function() {
self.$player.options({
paused: self.options.paused
});
self.$player.options({paused: self.options.paused});
},
position: function() {
setPosition(self.options.position);
@ -63,6 +61,9 @@ Ox.VideoTimelinePanel = function(options, self) {
showAnnotations: function() {
that.$element.toggle(1);
},
timeline: function() {
self.$player.options({timeline: self.options.timeline});
},
width: function() {
self.$player.options({width: getPlayerWidth()});
}

74
source/Ox.UI/js/Video/VideoTimelinePlayer.js
View file

@ -45,6 +45,10 @@ Ox.VideoTimelinePlayer = function(options, self) {
togglePaused();
},
position: setPosition,
timeline: function() {
self.$menuButton.checkItem(self.options.timeline);
updateTimeline();
},
width: setWidth
});
@ -73,8 +77,7 @@ Ox.VideoTimelinePlayer = function(options, self) {
self.options.timelines,
function(timeline) {
return Ox.extend({
checked: timeline.id == self.options.timeline,
disabled: true
checked: timeline.id == self.options.timeline
}, timeline);
}
)},
@ -95,7 +98,11 @@ Ox.VideoTimelinePlayer = function(options, self) {
change: function(data) {
var id = data.id;
if (id == 'timeline') {
// data.checked[0].id
self.options.timeline = data.checked[0].id;
updateTimeline();
that.triggerEvent('timeline', {
timeline: self.options.timeline
});
} else if (id == 'followPlayer') {
self.options.followPlayer = data.checked;
if (!self.options.paused && self.options.followPlayer) {
@ -268,7 +275,6 @@ Ox.VideoTimelinePlayer = function(options, self) {
self.$lines = [];
self.$timelines = [];
self.$interfaces = [];
self.$timeline = renderTimeline();
//setSubtitles();
@ -277,7 +283,7 @@ Ox.VideoTimelinePlayer = function(options, self) {
});
Ox.last(self.$lines).css({
height: self.tileHeight + 1.5 * self.margin + 'px'
});
});
self.$frameBox = $('<div>')
.css({
@ -397,12 +403,12 @@ Ox.VideoTimelinePlayer = function(options, self) {
})
.appendTo(self.$timelinePlayer);
self.$timelines[i] = [
self.$timeline.clone()
self.$timeline.clone(true)
.css({
width: self.frame + self.videoWidth + 'px',
marginLeft: -i * self.contentWidth + 'px'
}),
self.$timeline.clone()
self.$timeline.clone(true)
.css({
marginLeft: -i * self.contentWidth + self.videoWidth - 1 + 'px'
})
@ -581,30 +587,29 @@ Ox.VideoTimelinePlayer = function(options, self) {
height: self.tileHeight + self.margin + 'px',
overflow: 'hidden'
});
Ox.loop(self.tiles, function(i) {
$('<img>')
.attr({
src: self.options.getLargeTimelineURL(self.options.timeline, i)
})
.css({
position: 'absolute',
left: i * self.tileWidth + 'px',
top: self.margin / 2 + 'px'
})
.appendTo($timeline);
});
$('<div>')
.addClass('OxTimelineInterface')
Ox.loop(self.tiles, function(i) {
$('<img>')
.attr({
src: self.options.getLargeTimelineURL(self.options.timeline, i)
})
.css({
position: 'absolute',
left: 0,
top: self.margin / 2 + 'px',
width: self.frames + 'px',
height: self.tileHeight + 'px'
//background: 'rgba(255, 0, 0, 0.5)'
left: i * self.tileWidth + 'px',
top: self.margin / 2 + 'px'
})
.data({index: i})
.appendTo($timeline);
});
$('<div>')
.addClass('OxTimelineInterface')
.css({
position: 'absolute',
left: 0,
top: self.margin / 2 + 'px',
width: self.frames + 'px',
height: self.tileHeight + 'px'
})
.appendTo($timeline);
return $timeline;
}
@ -715,6 +720,10 @@ Ox.VideoTimelinePlayer = function(options, self) {
});
}
function setTimeline() {
self.$timelinePlayer.empty();
}
function setVolume() {
self.$video.options({volume: self.options.volume});
that.triggerEvent('volume', {
@ -807,6 +816,17 @@ Ox.VideoTimelinePlayer = function(options, self) {
}
}
function updateTimeline() {
self.$timelinePlayer.find('img').each(function() {
var $this = $(this);
$this.attr({
src: self.options.getLargeTimelineURL(
self.options.timeline, $this.data('index')
)
});
});
}
/*@
togglePaused <f> toggle paused
() -> <o> toggle paused