refactor embed

This commit is contained in:
rolux 2013-03-01 11:24:33 +00:00
parent bb470c37a1
commit 9a56f6ecc4
5 changed files with 430 additions and 364 deletions

View file

@ -0,0 +1,45 @@
'use strict';
pandora.ui.embedError = function(notImplemented) {
var that = Ox.Element()
.addClass('OxScreen')
.css({
position: 'absolute',
left: 0,
top: 0,
right: 0,
bottom: 0,
});
$('<div>')
.css({
position: 'absolute',
left: 0,
top: 0,
right: 0,
bottom: 0,
width: '96px',
height: '48px',
paddingTop: '16px',
margin: 'auto'
})
.append(
$('<img>')
.css({width: '96px'})
.attr({src: '/static/png/logo.png'})
)
.append(
$('<div>')
.css({marginTop: '4px', fontSize: '9px', textAlign: 'center'})
.html(
notImplemented
? 'This view is<br>not implemented.'
: 'This view cannot<br>be embedded.'
)
)
.appendTo(that);
return that;
};

View file

@ -0,0 +1,13 @@
'use strict';
pandora.ui.embedList = function() {
var that = Ox.Element();
that.resizePanel = function() {
return that;
};
return that;
};

View file

@ -0,0 +1,14 @@
'use strict';
pandora.ui.embedNavigation = function(type) {
var that = pandora.ui.navigationView(type, 16/9);
that.resizePanel = function() {
pandora.$ui.map.resizeMap();
return that;
};
return that;
};

View file

@ -1,367 +1,36 @@
'use strict';
// FIXME: rename to embed
pandora.ui.embedPanel = function() {
var that = Ox.Element(),
options, video,
var that,
ui = pandora.user.ui,
$outerPanel, $innerPanel,
$title, $player, $controls, $timeline, $annotations,
$errorBox, $errorLogo, $errorText;
view = !ui.item ? ui.listView : ui.itemView;
if (pandora.user.ui.item) {
options = getOptions();
pandora.api.get({id: ui.item, keys: [
'duration', 'layers', 'parts', 'posterFrame',
'rightslevel', 'size', 'title', 'videoRatio'
]}, function(result) {
video = Ox.extend(result.data, pandora.getVideoOptions(result.data));
var isFrame = options['in'] !== void 0 && (
options['in'] == options.out
|| options['in'] == video.duration
),
sizes = getSizes();
options.height = sizes.videoHeight;
if (options.title) {
$title = Ox.Element()
.css({position: 'absolute'})
.append(
$('<div>')
.css({
marginTop: !options.title.match(/\\n/) ? '8px' : '2px',
textAlign: 'center'
})
.html(options.title.replace(/\\n/g, '<br>'))
);
} else {
$title = Ox.Element();
}
$player = Ox.VideoPlayer(Ox.extend({
censored: video.censored,
censoredIcon: pandora.site.cantPlay.icon,
censoredTooltip: pandora.site.cantPlay.text,
controlsBottom: (
isFrame ? [] : ['play', 'volume']
).concat(
['scale']
).concat(
Ox.Fullscreen.available && options.showCloseButton ? ['fullscreen'] : []
).concat(
['timeline', 'position', 'settings']
),
controlsTooltips: {
close: 'Close',
open: 'Watch on ' + pandora.site.site.name
},
controlsTop: [
options.showCloseButton ? 'close'
: Ox.Fullscreen.available ? 'fullscreen'
: 'space16'
].concat(
['title', 'open']
),
duration: video.duration,
enableFullscreen: Ox.Fullscreen.available,
enableKeyboard: !isFrame,
enableMouse: !isFrame,
enablePosition: !isFrame,
enableSubtitles: true,
enableTimeline: !isFrame,
enableVolume: !isFrame,
height: options.height,
invertHighlight: options.invertHighlight,
muted: pandora.user.ui.videoMuted,
paused: options.paused,
playInToOut: options.playInToOut,
position: options.position,
poster: '/' + options.item + '/' + '96p' + (
options.position !== void 0 ? options.position
: options['in'] !== void 0 ? options['in']
: video.posterFrame
) +'.jpg',
resolution: pandora.user.ui.videoResolution,
scaleToFill: pandora.user.ui.videoScale == 'fill',
subtitles: video.subtitles,
timeline: options.playInToOut ? function(size, i) {
return '/' + options.item
+ '/timelineantialias'
+ size + 'p' + i + '.jpg'
} : '/' + options.item + '/' + 'timeline16p.png',
timelineType: options.showTimeline
? options.timeline : '',
timelineTypes: options.showTimeline
? pandora.site.timelines : [],
title: video.title,
video: video.video,
volume: pandora.user.ui.videoVolume,
width: options.width
}, options['in'] ? {
'in': options['in']
} : {}, options.out ? {
out: options.out
} : {}))
.bindEvent({
fullscreen: function(data) {
Ox.Fullscreen.toggle();
},
open: function() {
$player.options({paused: true});
var url = document.location.protocol + '//'
+ document.location.hostname + '/'
+ options.item + '/'
+ Ox.formatDuration($player.options('position'));
window.open(url, '_blank');
},
playing: function(data) {
setPosition(data.position, true);
},
position: function(data) {
setPosition(data.position);
},
subtitles: function(data) {
options.showTimeline && $timeline.options({
subtitles: data.subtitles ? video.subtitles : []
});
},
timeline: function(data) {
options.showTimeline && $timeline.options({
type: data.timeline
});
}
})
.bindEvent(function(data, event) {
if (Ox.contains(['close', 'paused'], event)) {
Ox.$parent.postMessage(event, data);
}
});
$controls = Ox.Element();
if (options.showTimeline) {
$timeline = Ox.LargeVideoTimeline(Ox.extend({
disabled: isFrame,
duration: video.duration,
getImageURL: function(type, i) {
return '/' + ui.item + '/timeline' + type + '64p' + i + '.jpg';
},
position: options.position,
showInToOut: options.playInToOut && options['in'] < options.out,
subtitles: ui.videoSubtitles ? video.subtitles : [],
type: options.timeline,
width: window.innerWidth - 16
}, options['in'] ? {
'in': options['in']
} : {}, options.out ? {
out: options.out
} : {}))
.css({
top: '4px',
left: '4px'
})
.bindEvent({
mousedown: that.gainFocus,
position: changeTimeline
})
.appendTo($controls);
}
if (options.showAnnotations) {
video.annotations = video.annotations.filter(function(layer) {
return Ox.contains(options.showLayers, layer.id);
});
if (options.playInToOut) {
video.annotations.forEach(function(layer) {
var items = [];
layer.items.forEach(function(item) {
if ((
item['in'] >= options['in'] && item['in'] <= options.out
) || (
item.out >= options['in'] && item.out <= options.out
)) {
items.push(item);
}
});
layer.items = items;
});
}
$annotations = Ox.AnnotationPanel(Ox.extend({
font: options.annotationsFont,
layers: video.annotations,
position: options.position,
range: options.annotationsRange,
showLayers: ui.showLayers,
showUsers: true,
sort: options.annotationsSort,
width: window.innerWidth
}, options['in'] ? {
'in': options['in']
} : {}, options.out ? {
out: options.out
} : {}))
.bindEvent({
select: selectAnnotation
})
} else {
$annotations = Ox.Element();
}
$innerPanel = Ox.SplitPanel({
elements: [
{element: $title, size: options.title ? 32 : 0},
{element: $player},
{element: $controls, size: options.showTimeline ? 80 : 0}
],
orientation: 'vertical'
});
$outerPanel = Ox.SplitPanel({
elements: [
{element: $innerPanel, size: sizes.innerHeight},
{element: $annotations}
],
orientation: 'vertical'
});
that.setElement($outerPanel);
});
} else {
that.addClass('OxScreen')
.css({
position: 'absolute',
left: 0,
top: 0,
right: 0,
bottom: 0,
});
$errorBox = $('<div>')
.css({
position: 'absolute',
left: 0,
top: 0,
right: 0,
bottom: 0,
width: '96px',
height: '96px',
padding: '16px',
margin: 'auto'
})
.appendTo(that);
$errorLogo = $('<img>')
.css({width: '96px', opacity: 0})
.one({
load: function() {
$errorLogo.animate({opacity: 1}, 250);
}
})
.attr({src: '/static/png/logo.png'})
.appendTo($errorBox);
$errorText = $('<div>')
.css({marginTop: '4px', fontSize: '9px', textAlign: 'center'})
.html('This view cannot<br>be embedded.')
.appendTo($errorBox);
}
function changeTimeline(data) {
var position = options.playInToOut
? Ox.limit(data.position, options['in'], options.out)
: data.position;
$player.options({position: position});
position != data.position && $timeline.options({position: position});
options.showAnnotations && $annotations.options({position: position});
}
function getOptions() {
var options = {},
defaults = {
annotationsFont: ui.annotationsFont,
annotationsRange: ui.annotationsRange,
annotationsSort: ui.annotationsSort,
invertHighlight: true,
matchRatio: false,
paused: true,
playInToOut: true,
showAnnotations: false,
showCloseButton: false,
showLayers: pandora.site.layers.map(function(layer) {
return layer.id;
}),
showTimeline: false,
timeline: ui.videoTimeline,
width: window.innerWidth
};
ui.hash.query.forEach(function(condition) {
if (condition.key != 'embed') {
options[condition.key] = condition.value;
}
});
options = Ox.extend(
{item: ui.item},
ui.videoPoints[ui.item] || {},
defaults,
options
);
if (!options.position) {
options.position = options['in'] || 0;
}
if (!options['in'] && !options.out) {
options.playInToOut = false;
} else if (options['in'] && options['in'] == options.out) {
options.invertHighlight = false;
options.paused = true;
options.playInToOut = false;
}
return options;
}
function getSizes() {
var innerHeight,
maxVideoHeight = window.innerHeight
- (options.title ? 32 : 0)
- (options.showTimeline ? 80 : 0)
- (options.showAnnotations ? 128 : 0),
videoHeight;
if (options.matchRatio || options.showAnnotations) {
videoHeight = Math.round(window.innerWidth / video.videoRatio);
options.matchRatio = videoHeight <= maxVideoHeight;
if (!options.matchRatio) {
videoHeight = maxVideoHeight;
if (ui.section != 'texts' && !ui.page) {
if (!ui.item) {
if (Ox.contains(['grid', 'clip'], view)) {
that = pandora.ui.embedError(true);
} else if (Ox.contains(['map', 'calendar'], view)) {
that = pandora.ui.embedNavigation(view);
}
} else {
videoHeight = window.innerHeight
- (options.title ? 32 : 0)
- (options.showTimeline ? 80 : 0);
}
innerHeight = videoHeight
+ (options.title ? 32 : 0)
+ (options.showTimeline ? 80 : 0);
return {innerHeight: innerHeight, videoHeight: videoHeight};
}
function selectAnnotation(data) {
if (data.id) {
setPosition(Math.max(data['in'], options['in'] || 0));
$annotations.options({selected: ''});
if (view == 'info') {
that = pandora.ui.embedError(true);
} else if (Ox.contains(['player', 'editor'], view)) {
that = pandora.ui.embedPlayer();
} else if (view == 'timeline') {
that = pandora.ui.embedError(true);
} else if (view == 'clips') {
that = pandora.ui.embedError(true);
} else if (Ox.contains(['map', 'calendar'], view)) {
that = pandora.ui.embedNavigation(view);
}
}
function setPosition(position, playing) {
!playing && $player.options({position: position});
options.showTimeline && $timeline.options({position: position});
options.showAnnotations && $annotations.options({position: position});
}
if (!that) {
that = pandora.ui.embedError();
}
that.display = function() {
@ -376,14 +45,7 @@ pandora.ui.embedPanel = function() {
that.reloadPanel = function() {
that.setElement(pandora.$ui.embedPanel = pandora.ui.embedPanel());
};
that.resizePanel = function() {
var sizes = getSizes();
$player.options({width: window.innerWidth, height: sizes.videoHeight});
$outerPanel.size(0, sizes.innerHeight);
options.showTimeline && $timeline.options({width: window.innerWidth - 16});
options.showAnnotations && $annotations.options({width: window.innerWidth});
return that;
};
that.bindEvent({
@ -393,8 +55,6 @@ pandora.ui.embedPanel = function() {
pandora_hash: that.reloadPanel
});
Ox.$parent.postMessage('loaded');
return that;
};

View file

@ -0,0 +1,334 @@
'use strict';
pandora.ui.embedPlayer = function() {
var that = Ox.Element(),
ui = pandora.user.ui,
defaults = {
annotationsFont: ui.annotationsFont,
annotationsRange: ui.annotationsRange,
annotationsSort: ui.annotationsSort,
invertHighlight: true,
matchRatio: false,
paused: true,
playInToOut: true,
showAnnotations: false,
showCloseButton: false,
showLayers: pandora.site.layers.map(function(layer) {
return layer.id;
}),
showTimeline: false,
timeline: ui.videoTimeline,
width: window.innerWidth
},
options = getOptions(),
video,
$innerPanel, $outerPanel,
$title, $player, $controls, $timeline, $annotations;
pandora.api.get({id: ui.item, keys: [
'duration', 'layers', 'parts', 'posterFrame',
'rightslevel', 'size', 'title', 'videoRatio'
]}, function(result) {
video = Ox.extend(result.data, pandora.getVideoOptions(result.data));
var isFrame = options['in'] !== void 0 && (
options['in'] == options.out
|| options['in'] == video.duration
),
sizes = getSizes();
options.height = sizes.videoHeight;
if (options.title) {
$title = Ox.Element()
.css({position: 'absolute'})
.append(
$('<div>')
.css({
marginTop: !options.title.match(/\\n/) ? '8px' : '2px',
textAlign: 'center'
})
.html(options.title.replace(/\\n/g, '<br>'))
);
} else {
$title = Ox.Element();
}
$player = Ox.VideoPlayer(Ox.extend({
censored: video.censored,
censoredIcon: pandora.site.cantPlay.icon,
censoredTooltip: pandora.site.cantPlay.text,
controlsBottom: (
isFrame ? [] : ['play', 'volume']
).concat(
['scale']
).concat(
Ox.Fullscreen.available && options.showCloseButton ? ['fullscreen'] : []
).concat(
['timeline', 'position', 'settings']
),
controlsTooltips: {
close: 'Close',
open: 'Watch on ' + pandora.site.site.name
},
controlsTop: [
options.showCloseButton ? 'close'
: Ox.Fullscreen.available ? 'fullscreen'
: 'space16'
].concat(
['title', 'open']
),
duration: video.duration,
enableFullscreen: Ox.Fullscreen.available,
enableKeyboard: !isFrame,
enableMouse: !isFrame,
enablePosition: !isFrame,
enableSubtitles: true,
enableTimeline: !isFrame,
enableVolume: !isFrame,
height: options.height,
invertHighlight: options.invertHighlight,
muted: pandora.user.ui.videoMuted,
paused: options.paused,
playInToOut: options.playInToOut,
position: options.position,
poster: '/' + options.item + '/' + '96p' + (
options.position !== void 0 ? options.position
: options['in'] !== void 0 ? options['in']
: video.posterFrame
) +'.jpg',
resolution: pandora.user.ui.videoResolution,
scaleToFill: pandora.user.ui.videoScale == 'fill',
subtitles: video.subtitles,
timeline: options.playInToOut ? function(size, i) {
return '/' + options.item
+ '/timelineantialias'
+ size + 'p' + i + '.jpg'
} : '/' + options.item + '/' + 'timeline16p.png',
timelineType: options.showTimeline
? options.timeline : '',
timelineTypes: options.showTimeline
? pandora.site.timelines : [],
title: video.title,
video: video.video,
volume: pandora.user.ui.videoVolume,
width: options.width
}, options['in'] ? {
'in': options['in']
} : {}, options.out ? {
out: options.out
} : {}))
.bindEvent({
fullscreen: function(data) {
Ox.Fullscreen.toggle();
},
open: function() {
$player.options({paused: true});
var url = document.location.protocol + '//'
+ document.location.hostname + '/'
+ options.item + '/'
+ Ox.formatDuration($player.options('position'));
window.open(url, '_blank');
},
playing: function(data) {
setPosition(data.position, true);
},
position: function(data) {
setPosition(data.position);
},
subtitles: function(data) {
options.showTimeline && $timeline.options({
subtitles: data.subtitles ? video.subtitles : []
});
},
timeline: function(data) {
options.showTimeline && $timeline.options({
type: data.timeline
});
}
})
.bindEvent(function(data, event) {
if (Ox.contains(['close', 'paused'], event)) {
Ox.$parent.postMessage(event, data);
}
});
$controls = Ox.Element();
if (options.showTimeline) {
$timeline = Ox.LargeVideoTimeline(Ox.extend({
disabled: isFrame,
duration: video.duration,
getImageURL: function(type, i) {
return '/' + ui.item + '/timeline' + type + '64p' + i + '.jpg';
},
position: options.position,
showInToOut: options.playInToOut && options['in'] < options.out,
subtitles: ui.videoSubtitles ? video.subtitles : [],
type: options.timeline,
width: window.innerWidth - 16
}, options['in'] ? {
'in': options['in']
} : {}, options.out ? {
out: options.out
} : {}))
.css({
top: '4px',
left: '4px'
})
.bindEvent({
mousedown: that.gainFocus,
position: changeTimeline
})
.appendTo($controls);
}
if (options.showAnnotations) {
video.annotations = video.annotations.filter(function(layer) {
return Ox.contains(options.showLayers, layer.id);
});
if (options.playInToOut) {
video.annotations.forEach(function(layer) {
var items = [];
layer.items.forEach(function(item) {
if ((
item['in'] >= options['in'] && item['in'] <= options.out
) || (
item.out >= options['in'] && item.out <= options.out
)) {
items.push(item);
}
});
layer.items = items;
});
}
$annotations = Ox.AnnotationPanel(Ox.extend({
font: options.annotationsFont,
layers: video.annotations,
position: options.position,
range: options.annotationsRange,
showLayers: ui.showLayers,
showUsers: true,
sort: options.annotationsSort,
width: window.innerWidth
}, options['in'] ? {
'in': options['in']
} : {}, options.out ? {
out: options.out
} : {}))
.bindEvent({
select: selectAnnotation
})
} else {
$annotations = Ox.Element();
}
$innerPanel = Ox.SplitPanel({
elements: [
{element: $title, size: options.title ? 32 : 0},
{element: $player},
{element: $controls, size: options.showTimeline ? 80 : 0}
],
orientation: 'vertical'
});
$outerPanel = Ox.SplitPanel({
elements: [
{element: $innerPanel, size: sizes.innerHeight},
{element: $annotations}
],
orientation: 'vertical'
});
that.setElement($outerPanel);
});
function changeTimeline(data) {
var position = options.playInToOut
? Ox.limit(data.position, options['in'], options.out)
: data.position;
$player.options({position: position});
position != data.position && $timeline.options({position: position});
options.showAnnotations && $annotations.options({position: position});
}
function getOptions() {
var options = {};
ui.hash.query.forEach(function(condition) {
if (condition.key != 'embed') {
options[condition.key] = condition.value;
}
});
options = Ox.extend(
{item: ui.item},
ui.videoPoints[ui.item] || {},
defaults,
options
);
if (!options.position) {
options.position = options['in'] || 0;
}
if (!options['in'] && !options.out) {
options.playInToOut = false;
} else if (options['in'] && options['in'] == options.out) {
options.invertHighlight = false;
options.paused = true;
options.playInToOut = false;
}
return options;
}
function getSizes() {
var innerHeight,
maxVideoHeight = window.innerHeight
- (options.title ? 32 : 0)
- (options.showTimeline ? 80 : 0)
- (options.showAnnotations ? 128 : 0),
videoHeight;
if (options.matchRatio || options.showAnnotations) {
videoHeight = Math.round(window.innerWidth / video.videoRatio);
options.matchRatio = videoHeight <= maxVideoHeight;
if (!options.matchRatio) {
videoHeight = maxVideoHeight;
}
} else {
videoHeight = window.innerHeight
- (options.title ? 32 : 0)
- (options.showTimeline ? 80 : 0);
}
innerHeight = videoHeight
+ (options.title ? 32 : 0)
+ (options.showTimeline ? 80 : 0);
return {innerHeight: innerHeight, videoHeight: videoHeight};
}
function selectAnnotation(data) {
if (data.id) {
setPosition(Math.max(data['in'], options['in'] || 0));
$annotations.options({selected: ''});
}
}
function setPosition(position, playing) {
!playing && $player.options({position: position});
options.showTimeline && $timeline.options({position: position});
options.showAnnotations && $annotations.options({position: position});
}
that.resizePanel = function() {
var sizes = getSizes();
$player.options({width: window.innerWidth, height: sizes.videoHeight});
$outerPanel.size(0, sizes.innerHeight);
options.showTimeline && $timeline.options({width: window.innerWidth - 16});
options.showAnnotations && $annotations.options({width: window.innerWidth});
return that;
};
Ox.$parent.postMessage('loaded');
return that;
};