oxjs/source/UI/js/Video/VideoPlayerPanel.js

732 lines
24 KiB
JavaScript
Raw Normal View History

2011-11-05 22:18:26 +00:00
'use strict';
2011-05-16 08:24:46 +00:00
/*@
2013-10-22 14:45:17 +00:00
Ox.VideoPlayerPanel <f> VideoPlayerPanel Object
options <o> Options object
self <o> Shared private variable
2013-10-22 14:45:17 +00:00
([options[, self]]) -> <o:Ox.SplitPanel> VideoPlayerPanel Object
annotationsrange <!> annotationsrange
annotationssize <!> annotationssize
annotationssort <!> annotationssort
audioTrack <s|''> Two-letter ISO 639-1 language code or track name
censored <!> censored
downloadvideo <!> downloadvideo
2012-06-17 22:38:26 +00:00
find <!> find
info <!> info
key_* <!> key_*
muted <!> muted
paused <!> paused
playbackRate: <n|1> playback rate
2012-06-17 22:38:26 +00:00
position <!> position
resizecalendar <!> resizecalendar
resolution <!> resolution
scaleToFill <!> scale
selected <!> select
2012-06-17 22:38:26 +00:00
subtitles <!> subtitles
toggleannotations <!> toggleannotations
togglecalendar <!> togglecalendar
togglelayer <!> togglelayer
togglemap <!> togglemap
toggletimeline <!> toggletimeline
volume <!> volume
2011-05-16 08:24:46 +00:00
@*/
2013-10-22 14:45:17 +00:00
Ox.VideoPlayerPanel = function(options, self) {
2011-04-22 22:03:10 +00:00
self = self || {};
var that = Ox.Element({}, self)
2013-07-13 13:56:02 +00:00
.defaults({
annotationsCalendarSize: 256,
annotationsMapSize: 256,
annotationsRange: 'all',
annotationsSize: 256,
annotationsSort: 'position',
annotationsTooltip: 'annotations',
audioTrack: '',
2013-07-13 13:56:02 +00:00
censored: [],
censoredIcon: '',
censoredTooltip: '',
clickLink: null,
cuts: [],
duration: 0,
enableDownload: false,
enableSubtitles: false,
find: '',
fps: 25,
2013-07-13 13:56:02 +00:00
fullscreen: false,
getLargeTimelineURL: null,
height: 0,
'in': 0,
itemName: {singular: 'video', plural: 'videos'},
2013-07-13 13:56:02 +00:00
layers: [],
loop: false,
muted: false,
out: 0,
paused: true,
playbackRate: 1,
2013-07-13 13:56:02 +00:00
playInToOut: false,
position: 0,
poster: '',
resolution: 0,
scaleToFill: false,
selected: '',
showAnnotations: false,
showAnnotationsCalendar: false,
showAnnotationsMap: false,
showLayers: {},
showTimeline: false,
showUsers: false,
smallTimelineURL: '',
subtitles: [],
subtitlesDefaultTrack: 'English',
subtitlesLayer: null,
2015-04-14 14:50:52 +00:00
subtitlesOffset: 0,
subtitlesTrack: 'English',
2013-07-13 13:56:02 +00:00
timeline: '',
timelineTooltip: 'timeline',
video: '',
volume: 1,
width: 0
})
.options(options || {})
.update({
fullscreen: function() {
self.$video.options({fullscreen: self.options.fullscreen});
},
height: function() {
self.$video.options({height: getPlayerHeight()});
},
'in': function() {
setPoint('in', self.options['in']);
},
loop: function() {
self.$video.options({loop: self.options.loop});
},
2013-07-13 13:56:02 +00:00
out: function() {
setPoint('out', self.options.out);
},
paused: function() {
self.$video.options({paused: self.options.paused});
},
playbackRate: function() {
self.$video.options({
playbackRate: self.options.playbackRate
});
},
2013-07-13 13:56:02 +00:00
position: function() {
self.$video.options({position: self.options.position});
self.$timeline.options({position: self.options.position});
self.$annotationPanel.options({position: self.options.position});
},
selected: function() {
self.$annotationPanel.options({selected: self.options.selected});
},
showAnnotations: function() {
2014-11-17 21:08:10 +00:00
self.$mainPanel.toggleElement(1);
2013-07-13 13:56:02 +00:00
},
showTimeline: function() {
2014-11-17 21:08:10 +00:00
self.$videoPanel.toggleElement(1);
2013-07-13 13:56:02 +00:00
},
timeline: function() {
self.$timeline.options({type: self.options.timeline});
},
2017-04-15 11:45:01 +00:00
volume: function() {
self.$video.options({
volume: self.options.volume
});
},
2013-07-13 13:56:02 +00:00
width: function() {
self.$video.options({width: getPlayerWidth()});
self.$timeline.options({width: getTimelineWidth()});
}
})
.css({
height: self.options.height + 'px',
width: self.options.width + 'px'
})
.bindEvent({
resize: resizeElement,
key_0: toggleMuted,
key_comma: function() {
movePositionTo('cut', -1);
},
key_control_c: function() {
that.triggerEvent('copy', [{
annotation: self.options.selected,
'in': self.options['in'],
out: self.options.out
}]);
},
key_control_shift_c: function() {
that.triggerEvent('copyadd', [{
annotation: self.options.selected,
'in': self.options['in'],
out: self.options.out
}]);
},
key_dot: function() {
movePositionTo('cut', 1);
},
2013-07-13 13:56:02 +00:00
key_equal: function() {
self.$video.changeVolume(0.1);
},
key_i: function() {
self.$annotationPanel.options({selected: ''});
setPoint('in', self.options.position, false, true);
},
key_k: function togglePlaybackRate() {
that.options({
playbackRate: self.options.playbackRate == 1 ? 2 : self.options.playbackRate == 2 ? 0.5 : 1
});
},
key_l: toggleLoop,
key_left: function() {
movePositionBy(-1 / self.options.fps);
},
2013-07-13 13:56:02 +00:00
key_minus: function() {
self.$video.changeVolume(-0.1);
},
key_o: function() {
self.$annotationPanel.options({selected: ''});
setPoint('out', self.options.position, false, true);
},
key_p: playInToOut,
key_right: function() {
movePositionBy(1 / self.options.fps);
},
key_shift_down: function() {
movePositionBy(self.options.duration);
},
key_shift_i: function() {
goToPoint('in');
},
key_shift_left: function() {
movePositionBy(-1);
},
key_shift_o: function() {
goToPoint('out');
},
key_shift_right: function() {
movePositionBy(1);
},
key_shift_up: function() {
movePositionBy(-self.options.position);
},
key_slash: selectCut,
2013-07-13 13:56:02 +00:00
key_space: togglePaused
});
2011-04-22 22:03:10 +00:00
self.options.subtitles = options.subtitles !== void 0
? self.options.subtitles : parseSubtitles();
2011-08-17 19:34:34 +00:00
self.fullscreen = false;
self.results = [];
2011-04-22 22:03:10 +00:00
2013-07-13 13:56:02 +00:00
self.$player = Ox.Element().css({overflow: 'hidden'});
2011-04-22 22:03:10 +00:00
2011-08-17 19:34:34 +00:00
self.$video = Ox.VideoPlayer({
annotations: getAnnotations(),
audioTrack: self.options.audioTrack,
2011-10-22 21:03:42 +00:00
censored: self.options.censored,
censoredIcon: self.options.censoredIcon,
censoredTooltip: self.options.censoredTooltip,
2011-08-28 06:23:15 +00:00
controlsTop: ['fullscreen', 'title', 'find'],
controlsBottom: [
'play', 'playInToOut', 'volume', 'scale',
'timeline', 'loop', 'position', 'settings'
],
2012-02-19 19:06:25 +00:00
enableDownload: self.options.enableDownload,
2011-08-17 19:34:34 +00:00
enableFind: true,
enableKeyboard: true,
2011-08-18 14:03:48 +00:00
enableMouse: true,
2011-12-19 21:13:11 +00:00
enablePosition: true,
2011-12-22 15:47:46 +00:00
enableSubtitles: self.options.enableSubtitles,
2011-12-19 21:13:11 +00:00
enableTimeline: true,
find: self.options.find,
fullscreen: self.options.fullscreen,
2011-08-17 19:34:34 +00:00
height: getPlayerHeight(),
'in': self.options['in'],
loop: self.options.loop,
2011-08-17 19:34:34 +00:00
muted: self.options.muted,
out: self.options.out,
paused: self.options.paused,
2011-04-22 22:03:10 +00:00
position: self.options.position,
resolution: self.options.resolution,
2011-08-17 19:34:34 +00:00
scaleToFill: self.options.scaleToFill,
subtitles: Ox.clone(self.options.subtitles, true),
subtitlesDefaultTrack: self.options.subtitlesDefaultTrack,
2015-04-14 14:50:52 +00:00
subtitlesOffset: self.options.subtitlesOffset,
subtitlesTrack: self.options.subtitlesTrack,
timeline: self.options.smallTimelineURL,
2011-08-17 19:34:34 +00:00
video: self.options.video,
volume: self.options.volume,
width: getPlayerWidth()
2011-04-22 22:03:10 +00:00
})
.bindEvent({
censored: function() {
that.triggerEvent('censored');
},
2012-02-19 19:06:25 +00:00
download: function(data) {
that.triggerEvent('downloadvideo', data);
},
find: function(data) {
self.$timeline.options({find: data.find});
self.$annotationPanel.options({highlight: data.find});
that.triggerEvent('find', data);
},
fullscreen: function(data) {
self.options.fullscreen = data.fullscreen;
},
loop: function(data) {
that.triggerEvent('loop', data);
},
2011-08-17 19:34:34 +00:00
muted: function(data) {
that.triggerEvent('muted', data);
},
paused: function(data) {
self.options.paused = data.paused;
that.triggerEvent('paused', data);
},
2012-01-12 19:04:32 +00:00
playing: function(data) {
setPosition(data.position, true);
},
position: function(data) {
2012-01-12 19:04:32 +00:00
setPosition(data.position);
},
positioning: function(data) {
setPosition(data.position, false, true);
},
resolution: function(data) {
that.triggerEvent('resolution', data);
},
2011-08-17 19:34:34 +00:00
scale: function(data) {
that.triggerEvent('scale', data);
},
select: selectAnnotation,
2011-12-22 15:47:46 +00:00
subtitles: function(data) {
self.options.enableSubtitles = data.subtitles;
self.$timeline.options({subtitles: getSubtitles()});
2011-12-22 15:47:46 +00:00
that.triggerEvent('subtitles', data);
},
subtitlestrack: function(data) {
2016-03-05 10:40:24 +00:00
var enableSubtitles = !!data.track;
if (enableSubtitles != self.options.enableSubtitles) {
self.options.enableSubtitles = enableSubtitles;
that.triggerEvent('subtitles', {subtitles: enableSubtitles});
}
self.options.subtitlesTrack = data.track;
self.$timeline.options({subtitles: getSubtitles()});
},
2011-08-17 19:34:34 +00:00
volume: function(data) {
that.triggerEvent('volume', data);
}
2011-04-22 22:03:10 +00:00
})
.appendTo(self.$player);
self.$controls = Ox.Element()
.addClass('OxMedia')
2011-04-22 22:03:10 +00:00
.bindEvent({
toggle: toggleControls
});
2011-08-17 19:34:34 +00:00
self.$timeline = Ox.LargeVideoTimeline({
cuts: self.options.cuts,
2011-08-17 19:34:34 +00:00
duration: self.options.duration,
find: self.options.find,
getImageURL: self.options.getLargeTimelineURL,
'in': self.options['in'],
out: self.options.out,
2011-08-17 19:34:34 +00:00
position: self.options.position,
subtitles: getSubtitles(),
2013-07-13 13:56:02 +00:00
videoId: self.options.videoId, // fixme: not in defaults
type: self.options.timeline,
2011-08-17 19:34:34 +00:00
width: getTimelineWidth()
2011-04-22 22:03:10 +00:00
})
2011-08-17 19:34:34 +00:00
.css({left: '4px', top: '4px'})
.bindEvent({
2015-02-21 11:17:32 +00:00
key_left: function() {
self.options.paused && movePositionBy(-1 / self.options.fps);
},
key_right: function() {
self.options.paused && movePositionBy(1 / self.options.fps);
},
key_space: togglePaused,
mousedown: that.gainFocus,
position: dragendTimeline,
positioning: dragTimeline
2011-04-22 22:03:10 +00:00
})
.appendTo(self.$controls);
2012-01-12 10:39:05 +00:00
self.$videoPanel = Ox.SplitPanel({
2011-04-22 22:03:10 +00:00
elements: [
{
element: self.$player
},
{
collapsed: !self.options.showTimeline,
2011-04-22 22:03:10 +00:00
collapsible: true,
element: self.$controls,
size: 80,
tooltip: self.options.timelineTooltip
2011-04-22 22:03:10 +00:00
}
],
orientation: 'vertical'
});
2012-01-12 10:39:05 +00:00
self.$annotationPanel = Ox.AnnotationPanel({
2012-01-17 09:25:58 +00:00
calendarSize: self.options.annotationsCalendarSize,
2012-01-17 15:43:46 +00:00
clickLink: self.options.clickLink,
2012-01-17 09:25:58 +00:00
editable: false,
highlight: self.options.find,
2012-01-12 19:04:32 +00:00
'in': self.options['in'],
itemName: self.options.itemName,
2012-01-12 10:39:05 +00:00
layers: self.options.layers,
2012-01-17 09:25:58 +00:00
mapSize: self.options.annotationsMapSize,
2012-01-12 19:04:32 +00:00
out: self.options.out,
position: self.options.position,
2012-01-12 10:39:05 +00:00
range: self.options.annotationsRange,
2012-01-17 09:25:58 +00:00
selected: self.options.selected,
showCalendar: self.options.showAnnotationsCalendar,
2012-02-20 21:51:08 +00:00
showLayers: Ox.clone(self.options.showLayers),
2012-01-17 09:25:58 +00:00
showMap: self.options.showAnnotationsMap,
2012-01-12 19:04:32 +00:00
showUsers: self.options.showUsers,
2012-01-17 09:25:58 +00:00
sort: self.options.annotationsSort,
width: self.options.annotationsSize
2012-01-12 10:39:05 +00:00
})
2011-04-22 22:03:10 +00:00
.bindEvent({
2012-01-17 09:25:58 +00:00
annotationsrange: function(data) {
self.options.annotationsRange = data.range;
that.triggerEvent('annotationsrange', data);
},
annotationssort: function(data) {
self.options.annotationsSort = data.sort;
that.triggerEvent('annotationssort', data);
},
info: function(data) {
that.triggerEvent('info', data);
},
open: function() {
setPosition(self.options['in']);
},
2011-04-22 22:03:10 +00:00
resize: resizeAnnotations,
resizeend: resizeendAnnotations,
2012-01-17 09:25:58 +00:00
resizecalendar: function(data) {
that.triggerEvent('resizecalendar', data);
},
resizemap: function(data) {
that.triggerEvent('resizemap', data);
},
2012-01-12 19:04:32 +00:00
select: selectAnnotation,
2012-01-17 09:25:58 +00:00
toggle: toggleAnnotations,
togglecalendar: function(data) {
self.options.showAnnotationsCalendar = !data.collapsed;
that.triggerEvent('togglecalendar', data);
},
togglelayer: function(data) {
that.triggerEvent('togglelayer', {
collapsed: data.collapsed,
layer: data.layer
});
},
togglemap: function(data) {
self.options.showAnnotationsMap = !data.collapsed;
that.triggerEvent('togglemap', data);
}
2011-04-22 22:03:10 +00:00
});
[
'0', 'b', 'backslash', 'closebracket', 'comma', 'dot', 'equal', 'f',
'g', 'i', 'minus', 'n', 'o', 'openbracket', 'p', 'shift_0', 'shift_g',
'shift_i', 'shift_o', 'slash', 'space'
].forEach(function(key) {
key = 'key_' + key;
2014-01-19 08:28:55 +00:00
// FIXME: video player and timeline, too
self.$annotationPanel.bindEvent(key, function() {
that.triggerEvent(key);
});
});
that.setElement(
2013-07-14 13:42:09 +00:00
self.$mainPanel = Ox.SplitPanel({
2011-04-22 22:03:10 +00:00
elements: [
{
2012-01-12 10:39:05 +00:00
element: self.$videoPanel
2011-04-22 22:03:10 +00:00
},
{
collapsed: !self.options.showAnnotations,
collapsible: true,
2012-01-12 10:39:05 +00:00
element: self.$annotationPanel,
2011-04-22 22:03:10 +00:00
resizable: true,
resize: [192, 256, 320, 384],
size: self.options.annotationsSize,
tooltip: self.options.annotationsTooltip
2011-04-22 22:03:10 +00:00
}
],
orientation: 'horizontal'
})
);
2011-04-22 22:03:10 +00:00
function dragTimeline(data) {
2011-04-22 22:03:10 +00:00
self.options.position = data.position;
2011-08-17 19:34:34 +00:00
self.$video.options({position: self.options.position});
2012-01-12 19:04:32 +00:00
self.$annotationPanel.options({position: self.options.position});
}
function dragendTimeline(data) {
dragTimeline(data);
that.triggerEvent('position', {position: self.options.position});
2011-04-22 22:03:10 +00:00
}
function getAnnotations() {
2012-05-24 07:45:33 +00:00
return Ox.flatten(self.options.layers.map(function(layer) {
return layer.items.map(function(item) {
return {id: item.id, 'in': item['in'], out: item.out, text: item.value};
});
2012-05-24 07:45:33 +00:00
})).sort(sortAnnotations);
}
// fixme: why not goToNextPosition()?
function getNextPosition(type, direction) {
// type can only be 'cut'
var positions;
if (type == 'cut') {
positions = [0].concat(self.options.cuts, self.options.duration);
}
return Ox.nextValue(positions, self.options.position, direction);
}
2011-04-22 22:03:10 +00:00
function getPlayerHeight() {
2013-07-14 10:22:26 +00:00
return self.options.height
- self.options.showTimeline * 80 - 1;
2011-04-22 22:03:10 +00:00
}
function getPlayerWidth() {
2013-07-14 10:22:26 +00:00
return self.options.width
- (self.options.showAnnotations && !self.fullscreen)
2011-08-17 19:34:34 +00:00
* self.options.annotationsSize - 1;
2011-04-22 22:03:10 +00:00
}
function getSubtitles() {
return self.options.enableSubtitles
? self.options.subtitles.filter(function(v) {
return Ox.contains(v.tracks, self.options.subtitlesTrack);
})
: [];
}
2011-04-22 22:03:10 +00:00
function getTimelineWidth() {
2013-07-14 10:22:26 +00:00
return self.options.width
- (self.options.showAnnotations && !self.fullscreen)
* self.options.annotationsSize - 16 - 1;
2011-04-22 22:03:10 +00:00
}
2014-01-17 11:37:27 +00:00
function goToPoint(point) {
setPosition(self.options[point]);
}
function playInToOut() {
self.$video.playInToOut();
}
function movePositionBy(sec) {
setPosition(Ox.limit(self.options.position + sec, 0, self.options.duration));
}
function movePositionTo(type, direction) {
setPosition(getNextPosition(type, direction));
}
function parseSubtitles() {
return self.options.subtitlesLayer ? self.options.layers.filter(function(layer) {
return layer.id == self.options.subtitlesLayer;
})[0].items.map(function(subtitle) {
return {
id: subtitle.id,
'in': subtitle['in'],
out: subtitle.out,
text: subtitle.value.replace(/\n/g, ' ').replace(/<br\/?>/g, '\n'),
tracks: subtitle.languages || [self.options.subtitlesDefaultTrack]
};
}) : [];
}
function resizeAnnotations(data) {
2011-08-19 20:37:58 +00:00
// called on annotations resize
self.options.annotationsSize = data.size;
2011-08-19 20:37:58 +00:00
self.$video.options({
width: getPlayerWidth()
});
self.$timeline.options({
width: getTimelineWidth()
});
2012-01-17 09:25:58 +00:00
self.$annotationPanel.options({width: data.size});
2011-04-22 22:03:10 +00:00
}
function resizeendAnnotations(data) {
2012-01-17 09:25:58 +00:00
that.triggerEvent('annotationssize', data.size);
2011-04-22 22:03:10 +00:00
}
function resizeElement(data) {
2011-04-22 22:03:10 +00:00
// called on browser toggle
self.options.height = data.size;
2011-08-17 19:34:34 +00:00
self.$video.options({
height: getPlayerHeight()
});
2011-04-22 22:03:10 +00:00
}
2012-01-17 09:25:58 +00:00
/*
function resizePanel(data) {
2012-01-17 09:25:58 +00:00
// called on annotations toggle <-- FIXME: NOT TRUE
2011-08-17 19:34:34 +00:00
self.$video.options({
width: getPlayerWidth()
});
self.$timeline.options({
width: getTimelineWidth()
});
2011-04-22 22:03:10 +00:00
}
2012-01-17 09:25:58 +00:00
*/
2011-04-22 22:03:10 +00:00
2012-01-12 19:04:32 +00:00
function selectAnnotation(data) {
self.options.selected = data.id;
if (self.options.selected) {
setPosition(data['in']);
setPoint('in', data['in'], true);
setPoint('out', data.out, true);
2012-01-12 19:04:32 +00:00
}
self.$annotationPanel.options({selected: self.options.selected});
that.triggerEvent('select', {id: self.options.selected});
2012-01-12 19:04:32 +00:00
}
function selectCut() {
var points = {
'in': Ox.last(self.options.cuts),
out: self.options.duration
};
Ox.forEach(self.options.cuts, function(cut, i) {
if (cut > self.options.position) {
points = {
'in': i == 0 ? 0 : self.options.cuts[i - 1],
out: cut - 1 / self.options.fps
};
return false; // break
}
});
setPoint('in', points['in']);
setPoint('out', points.out);
}
function setPoint(point, position, keepSelected, triggerEvent) {
2012-01-12 19:04:32 +00:00
self.options[point] = position;
if (self.options.selected && !keepSelected) {
selectAnnotation({id: ''});
}
2012-01-12 19:04:32 +00:00
self.$video.options(point, position);
self.$timeline.options(point, position);
self.$annotationPanel.options(point, position);
if (self.options['in'] > self.options.out) {
setPoint(point == 'in' ? 'out' : 'in', position, keepSelected);
} else if (triggerEvent) {
that.triggerEvent('points', {
'in': self.options['in'],
out: self.options.out,
position: self.options.position
});
}
2012-01-12 19:04:32 +00:00
}
function setPosition(position, playing, dragging) {
var minute = Math.floor(position / 60),
previousMinute = Math.floor(self.options.position / 60);
2012-01-12 19:04:32 +00:00
self.options.position = position;
!playing && self.$video.options({position: self.options.position});
self.$timeline.options({position: self.options.position});
self.$annotationPanel.options({position: self.options.position});
if ((!playing || minute != previousMinute) && !dragging) {
that.triggerEvent('position', {
position: !playing ? self.options.position : minute * 60
});
}
2011-04-22 22:03:10 +00:00
}
function sortAnnotations(a, b) {
var ret = 0;
if (a['in'] < b['in']) {
ret = -1;
} else if (a['in'] > b['in']) {
ret = 1;
} else if (a.out < b.out) {
ret = -1;
} else if (a.out > b.out) {
ret = 1;
} else if (a.value < b.value) {
ret = -1;
} else if (a.value > b.value) {
ret = 1;
}
return ret;
}
function toggleAnnotations(data) {
2011-04-22 22:03:10 +00:00
self.options.showAnnotations = !data.collapsed;
2011-08-17 19:34:34 +00:00
self.$video.options({
2012-01-17 09:25:58 +00:00
width: getPlayerWidth()
});
self.$timeline.options({
width: getTimelineWidth()
2011-08-17 19:34:34 +00:00
});
that.triggerEvent('toggleannotations', {
2011-04-22 22:03:10 +00:00
showAnnotations: self.options.showAnnotations
});
}
function toggleControls(data) {
self.options.showTimeline = !data.collapsed;
2011-08-17 19:34:34 +00:00
self.$video.options({
height: getPlayerHeight()
2011-04-22 22:03:10 +00:00
});
that.triggerEvent('toggletimeline', {
showTimeline: self.options.showTimeline
2011-04-22 22:03:10 +00:00
});
}
function toggleLoop() {
self.$video.toggleLoop();
}
function toggleMuted() {
self.$video.toggleMuted();
}
function togglePaused() {
self.$video.togglePaused();
self.$video.options('paused') && that.triggerEvent('position', {
position: self.$video.options('position')
});
}
// fixme: can these be removed?
2011-09-14 14:34:33 +00:00
/*@
toggleAnnotations <f> toggle annotations
2011-11-03 15:42:41 +00:00
() -> <o> toggle visibility of annotations
2011-09-14 14:34:33 +00:00
@*/
2011-04-22 22:03:10 +00:00
that.toggleAnnotations = function() {
2014-11-17 21:08:10 +00:00
self.$mainPanel.toggleElement(1);
2011-04-22 22:03:10 +00:00
};
2011-09-14 14:34:33 +00:00
/*@
toggleTimeline <f> toggle timeline
() -> <o> toggle visibility of timeline
2011-09-14 14:34:33 +00:00
@*/
that.toggleTimeline = function() {
2014-11-17 21:08:10 +00:00
self.$videoPanel.toggleElement(1);
2011-04-22 22:03:10 +00:00
};
that.playInToOut = function() {
self.$video.playInToOut();
};
2011-04-22 22:03:10 +00:00
return that;
}