new edit panel

This commit is contained in:
j 2013-07-13 23:08:01 +00:00
parent 70f4037172
commit 553d2dd921

View file

@ -2,255 +2,245 @@
pandora.ui.editPanel = function() { pandora.ui.editPanel = function() {
var that = Ox.SplitPanel({ var ui = pandora.user.ui,
elements: [ edit,
{element: Ox.Element(), size: 24}, listSizes = [
{element: Ox.Element()}, 144 + Ox.UI.SCROLLBAR_SIZE,
{element: Ox.Element(), size: 16} 280 + Ox.UI.SCROLLBAR_SIZE,
416 + Ox.UI.SCROLLBAR_SIZE
], ],
orientation: 'vertical' listSize = listSizes[ui.clipColumns],
}); smallTimelineCanvas,
smallTimelineContext,
that = Ox.Element();
pandora.user.ui.edit && render(); ui.edit && render();
function editPointsKey(key) {
return 'editPoints.' + ui.edit.replace(/\./g, '\\.') + '.' + key;
}
function getSmallTimelineURL() {
var fps = 25,
width = Math.floor(edit.duration * fps),
height = 64;
smallTimelineCanvas = Ox.$('<canvas>').attr({width: width, height: height})[0];
smallTimelineContext = smallTimelineCanvas.getContext('2d');
return smallTimelineCanvas.toDataURL();
}
function getVideos() {
return Ox.flatten(edit.clips.map(function(clip) {
return pandora.getClipVideos(clip);
}));
}
function render() { function render() {
pandora.api.getEdit({id: pandora.user.ui.edit}, function(result) { pandora.api.getEdit({id: pandora.user.ui.edit}, function(result) {
edit = result.data;
var edit = result.data; // fixme: duration should come from backend
edit.duration = 0;
var $toolbar = Ox.Bar({size: 24}), edit.clips.forEach(function(clip) {
clip.position = edit.duration;
$editMenu, edit.duration += clip.duration;
});
$viewSelect = Ox.Select({ //Ox.print('EDIT', edit)
items: [ pandora.$ui.mainPanel.replaceElement(1,
{'id': 'list', 'title': Ox._('View as List')}, that = Ox.VideoEditPanel({
{'id': 'player', 'title': Ox._('View as Player')}, clips: edit.clips,
], clipsSize: listSize,
value: 'list', clipSort: ui.clipSort,
width: 128 clipSortOptions: [/*...*/],
clipView: ui.clipView,
cuts: [],
duration: edit.duration,
editable: edit.editable,
enableSubtitles: ui.videoSubtitles,
fullscreen: false,
getLargeTimelineURL: function(type, i, callback) {
pandora.getLargeEditTimelineURL(edit, type, i, callback);
},
height: pandora.$ui.appPanel.size(1),
'in': ui.editPoints[ui.edit]['in'],
loop: ui.videoLoop,
muted: ui.videoMuted,
out: ui.editPoints[ui.edit].out,
position: ui.editPoints[ui.edit].position,
resolution: ui.videoResolution,
scaleToFill: ui.videoScale == 'fill',
// selected: ...
showClips: ui.showClips,
showTimeline: ui.showTimeline,
smallTimelineURL: getSmallTimelineURL(),
sort: ui.clipSort,
sortOptions: [
{key: 'index', title: Ox._('Sort Manually'), operator: '+'}
].concat(
pandora.site.clipKeys.map(function(key) {
return Ox.extend(Ox.clone(key), {
title: Ox._(('Sort by Clip {0}'), [Ox._(key.title)])
});
}) })
.css({ ).concat(
float: 'left', pandora.site.sortKeys.map(function(key) {
margin: '4px 0 0 4px' return Ox.extend(Ox.clone(key), {
title: Ox._('Sort by {0}', [Ox._(key.title)])
});
})
),
timeline: ui.videoTimeline,
video: getVideos(),
volume: ui.videoVolume,
width: pandora.$ui.document.width() - pandora.$ui.mainPanel.size(0) - 1
}) })
.bindEvent({ .bindEvent({
change: function(data) { clipssort: function(data) {
$panel.replaceElement(0, pandora.$ui.edit = pandora.ui[ pandora.UI.set({clipSort: data.sort});
data.value == 'player' ? 'editPlayer' : 'editList'
](edit));
}, },
}).appendTo($toolbar), copy: function(data) {
$statusbar = Ox.Bar({size: 16}),
$panel = Ox.SplitPanel({
elements: [
{
element: pandora.$ui.edit = pandora.ui.editList(edit)
}, },
{ cut: function(data) {
element: Ox.Element(),
size: 0, },
resizable: false edit: function(data) {
var args = {id: data.id},
index = Ox.getIndexById(edit.clips, data.id),
clip = edit.clips[index];
if (data.key == 'duration') {
data.key = 'out';
data.value += clip['in'];
} }
], pandora.api.get({id: clip.item, keys: ['duration']}, function(result) {
orientation: 'horizontal' data.value = Math.min(data.value, result.data.duration);
args[data.key] = data.value;
if (data.key == 'in' && data.value > clip.out) {
args.out = args['in'];
} else if (data.key == 'out' && data.value < clip['in']) {
args['in'] = args.out;
}
pandora.api.editClip(args, function(result) {
edit.clips[index] = result.data;
that.updateClip(data.id, result.data);
}); });
that.replaceElement(0, $toolbar);
that.replaceElement(1, $panel);
that.replaceElement(2, $statusbar);
}); });
} },
move: function(data) {
that.reload = function() { pandora.api.sortClips({
render(); edit: edit.id,
} ids: data.ids
}, function() {
return that; Ox.Request.clearCache('getEdit');
};
pandora.ui.editList = function(edit) {
var height = getHeight(),
width = getWidth(),
that = Ox.Element()
.css({
'overflow-y': 'auto'
}); });
self.$list = Ox.TableList({
columns: [
{
align: 'left',
id: 'index',
operator: '+',
title: Ox._('Index'),
visible: false,
width: 60
}, },
{ muted: function(data) {
align: 'left', pandora.UI.set('videoMuted', data.muted);
id: 'id',
operator: '+',
title: Ox._('ID'),
visible: false,
width: 60
}, },
{ paste: function() {
align: 'left', if (Ox.Clipboard.type() == 'clip') {
id: 'item', pandora.api.addClips({
operator: '+', clips: Ox.Clipboard.paste(),
title: Ox._(pandora.site.itemName.singular), edit: pandora.user.ui.edit
visible: true,
width: 360
},
{
editable: true,
id: 'in',
operator: '+',
title: Ox._('In'),
visible: true,
width: 60
},
{
editable: true,
id: 'out',
operator: '+',
title: Ox._('Out'),
visible: true,
width: 60
},
{
id: 'duration',
operator: '+',
title: Ox._('Duration'),
visible: true,
width: 60
}
],
columnsMovable: true,
columnsRemovable: true,
columnsResizable: true,
columnsVisible: true,
items: edit.clips,
scrollbarVisible: true,
sort: [{key: 'index', operator: '+'}],
sortable: true,
unique: 'id'
})
.appendTo(that)
.bindEvent({
add: function(data) {
if(pandora.user.ui.item) {
pandora.api.addClip({
edit: pandora.user.ui.edit,
item: pandora.user.ui.item,
'in': pandora.user.ui.videoPoints[pandora.user.ui.item]['in'],
out: pandora.user.ui.videoPoints[pandora.user.ui.item].out,
}, function(result) { }, function(result) {
Ox.Request.clearCache(); updateClips(edit.clips.concat(result.data.clips));
pandora.$ui.rightPanel.reload()
}); });
} }
}, },
'delete': function(data) { playing: function(data) {
if (data.ids.length > 0 && edit.editable) { pandora.UI.set(editPointsKey('position'), data.position);
pandora.api.removeClip({ },
position: function(data) {
pandora.UI.set(editPointsKey('position'), data.position);
},
remove: function(data) {
if (edit.editable) {
pandora.api.removeClips({
ids: data.ids, ids: data.ids,
edit: pandora.user.ui.edit edit: pandora.user.ui.edit
}, function(result) { }, function(result) {
Ox.Request.clearCache(); updateClips(result.data.clips);
pandora.$ui.rightPanel.reload();
}); });
} }
}, },
move: function(data) { resizeclips: function(data) {
Ox.Request.clearCache(); pandora.UI.set('clipsSize', data.clipsSize);
pandora.api.sortClips({ },
edit: pandora.user.ui.edit, resolution: function(data) {
ids: data.ids pandora.UI.set('videoResolution', data.resolution);
}) },
scale: function(data) {
pandora.UI.set('videoScale', data.scale);
}, },
select: function(data) { select: function(data) {
pandora.UI.set(editPointsKey('clip'), data.ids[0]);
}, },
submit: function(data) { subtitles: function(data) {
var value = self.$list.value(data.id, data.key); pandora.UI.set('videoSubtitles', data.subtitles);
if (data.value != value && !(data.value === '' && value === null)) { },
self.$list.value(data.id, data.key, data.value || null); timeline: function(data) {
var edit = { pandora.UI.set('videoTimeline', data.timeline);
id: data.id, },
}; toggleclips: function(data) {
edit[data.key] = parseFloat(data.value); pandora.UI.set('showAnnotations', data.showAnnotations);
pandora.api.editClip(edit, function(result) { },
self.$list.value(data.id, data.key, result.data[data.key]); toggletimeline: function(data) {
self.$list.value(data.id, 'duration', result.data.duration); pandora.UI.set('showTimeline', data.showTimeline);
},
volume: function(data) {
pandora.UI.set('videoVolume', data.volume);
},
pandora_showannotations: function(data) {
that.options({showAnnotations: data.value});
},
pandora_showtimeline: function(data) {
that.options({showTimeline: data.value});
},
pandora_videotimeline: function(data) {
that.options({timeline: data.value});
}
})
);
updateSmallTimelineURL();
}); });
} }
}
function updateClips(clips) {
Ox.Request.clearCache();
edit.clips = clips;
edit.duration = 0;
edit.clips.forEach(function(clip) {
clip.position = edit.duration;
edit.duration += clip.duration;
}); });
that.options({
function getHeight() { clips: clips,
// 24 menu + 24 toolbar + 16 statusbar + 32 title + 32 margins smallTimelineURL: getSmallTimelineURL(),
// + 1px to ge trid of scrollbar video: getVideos()
return window.innerHeight - 128 -1;
}
function getWidth() {
return window.innerWidth
- pandora.user.ui.showSidebar * pandora.user.ui.sidebarSize - 1
- pandora.user.ui.embedSize - 1
- 32;
}
that.update = function() {
$text.options({
maxHeight: getHeight(),
width: getWidth()
}); });
return that; updateSmallTimelineURL();
};
}
that.updateSmallTimelineURL = updateSmallTimelineURL;
function updateSmallTimelineURL() {
var fps = 25;
Ox.serialForEach(edit.clips, function(clip) {
var callback = Ox.last(arguments);
pandora.getLargeClipTimelineURL(clip.item, clip['in'], clip.out, ui.videoTimeline, function(url) {
var image = Ox.$('<img>')
.on({
load: function() {
smallTimelineContext.drawImage(image, Math.floor(clip.position * fps), 0);
that.options({smallTimelineURL: smallTimelineCanvas.toDataURL()});
callback();
}
})
.attr({
src: url
})[0];
});
});
}
return that; return that;
}; };
pandora.ui.editPlayer = function(edit) {
var that = Ox.Element()
.css({
overflowY: 'auto'
});
self.$player = Ox.VideoPlayer({
controlsBottom: ['play', 'volume', 'previous', 'next', 'loop', 'scale', 'space', 'position'],
controlsTop: ['fullscreen', 'space', 'open'],
enableKeyboard: true,
enableMouse: true,
enablePosition: true,
enableTimeline: true,
height: getHeight(),
paused: true,
position: 0,
video: Ox.flatten(edit.clips.map(function(clip) {
return pandora.getClipVideos(clip);
})),
width: getWidth()
}).appendTo(that);
function getHeight() {
// 24 menu + 24 toolbar + 16 statusbar + 32 title + 32 margins
// + 1px to ge trid of scrollbar
return window.innerHeight - 128 -1;
}
function getWidth() {
return window.innerWidth
- pandora.user.ui.showSidebar * pandora.user.ui.sidebarSize - 1;
}
return that;
};