diff --git a/static/js/pandora/sequencesDialog.js b/static/js/pandora/sequencesDialog.js new file mode 100644 index 000000000..b076fc009 --- /dev/null +++ b/static/js/pandora/sequencesDialog.js @@ -0,0 +1,105 @@ +// vim: et:ts=4:sw=4:sts=4:ft=javascript + +'use strict'; + +pandora.ui.sequencesDialog = function(id, position) { + + var dialogHeight = Math.round((window.innerHeight - 48) * 0.9), + dialogWidth = Math.round(window.innerWidth * 0.9), + mode = pandora.user.ui.sequenceMode, + sidebarWidth = 144, + $tabPanel = Ox.TabPanel({ + content: function(mode) { + var $splitPanel = Ox.SplitPanel({ + elements: [ + { + element: Ox.Element(), + size: sidebarWidth + }, + { + element: Ox.Element() + } + ], + orientation: 'horizontal' + }); + pandora.api.getSequence({id: id, mode: mode, position: position}, function(result) { + // result.data: {hash, in, out} + var fixedRatio = 16/9, + hash = result.data.hash; + $sidebar = Ox.Element(), // add video player + $list = Ox.IconList({ + fixedRatio: fixedRatio + item: function(data, sort, size) { + var ratio = data.videoRatio, + width = ratio > fixedRatio ? size : Math.round(size * ratio / fixedRatio), + height = Math.round(width / ratio); + return { + height: height, + id: data.id, + info: Ox.formatDuration(data['in']) + ' - ' + Ox.formatDuration(data.out), + title: data.title + (data.director.length ? ' (' + data.director.join(', ') + ')' : ''), + url: '/' + data.id.split('/')[0] + '/' + height + 'p' + data['in'] + '.jpg'; + width: width + }; + }, + items: function(data, callback) { + pandora.api.findSequences(Ox.extend(data, { + query: { + conditions: [{key: mode, value: hash, operator: '=='}], + operator: '&' + } + }), callback); + }, + keys: ['director', 'id', 'title', 'videoRatio'], + max: 1, + orientation: 'both', + size: 128, + sort: pandora.user.ui.sequenceSort, + unique: 'id' + }) + .bindEvent({ + open: function(data) { + // ... + }, + openpreview: function(data) { + // ... + }, + select: function(data) { + // ... + } + }); + $splitPanel.replaceElements([$sidebar, $list]); + }); + return $splitPanel; + }, + tabs: [ + {id: 'shapes', title: 'Similar Shapes'}, + {id: 'colors', title: 'Similar Colors'} + ] + }), + + $dialog = Ox.Dialog({ + buttons: [ + Ox.Button({ + id: 'close', + title: 'Close' + }).bindEvent({ + click: function() { + $dialog.close; + } + }) + ], + closeButton: true, + content: $tabPanel, + height: dialogHeight, + keys: {escape: 'close'}, + maximizeButton: true, + padding: 0, + removeOnClose: true, + title: 'Similar Clips', + width: dialogWidth + }); + + return $dialog; + +}; \ No newline at end of file