add embedded timeline view
This commit is contained in:
j
parent
8b082023e9
commit
49e20c193a
1 changed files with 116 additions and 59 deletions
|
|
@ -8,78 +8,133 @@ Ox.load('UI', {
|
||||||
showScreen: true,
|
showScreen: true,
|
||||||
theme: 'modern'
|
theme: 'modern'
|
||||||
}, function() {
|
}, function() {
|
||||||
|
var videoKeys = [ 'duration', 'layers', 'parts', 'posterFrame', 'rightslevel', 'size', 'title', 'videoRatio' ];
|
||||||
window.pandora = new Ox.App({url: '/api/'}).bindEvent({
|
window.pandora = new Ox.App({url: '/api/'}).bindEvent({
|
||||||
load: function(data) {
|
load: function(data) {
|
||||||
Ox.extend(pandora, {
|
Ox.extend(pandora, {
|
||||||
site: data.site,
|
site: data.site,
|
||||||
user: data.user.level == 'guest' ? Ox.clone(data.site.user) : data.user,
|
user: data.user.level == 'guest' ? Ox.clone(data.site.user) : data.user,
|
||||||
ui: {},
|
$ui: {},
|
||||||
clip: function(options) {
|
ui: {
|
||||||
var that = Ox.Element(),
|
player: function(options) {
|
||||||
keys = [ 'duration', 'layers', 'parts', 'posterFrame', 'rightslevel', 'size', 'title', 'videoRatio' ];
|
var that = Ox.Element();
|
||||||
pandora.user.ui.item = options.item;
|
pandora.user.ui.item = options.item;
|
||||||
pandora.api.get({id: options.item, keys: keys}, function(result) {
|
pandora.api.get({id: options.item, keys: videoKeys}, function(result) {
|
||||||
var videoOptions = getVideoOptions(result.data);
|
var data = getVideoOptions(result.data);
|
||||||
that.append(pandora.player = Ox.VideoPlayer({
|
that.append(pandora.player = Ox.VideoPlayer({
|
||||||
censored: videoOptions.censored,
|
censored: data.censored,
|
||||||
controlsBottom: ['play', 'volume', 'scale', 'timeline', 'settings'],
|
censoredIcon: pandora.site.cantPlay.icon,
|
||||||
duration: result.data.duration,
|
censoredTooltip: pandora.site.cantPlay.text,
|
||||||
enableFind: false,
|
controlsBottom: ['play', 'volume', 'scale', 'timeline', 'settings'],
|
||||||
enableFullscreen: true,
|
duration: data.duration,
|
||||||
enableKeyboard: true,
|
enableFind: false,
|
||||||
enableMouse: true,
|
enableFullscreen: true,
|
||||||
enableTimeline: true,
|
enableKeyboard: true,
|
||||||
enableVolume: true,
|
enableMouse: true,
|
||||||
externalControls: false,
|
enableTimeline: true,
|
||||||
height: window.innerHeight,
|
enableVolume: true,
|
||||||
'in': options['in'],
|
externalControls: false,
|
||||||
out: options.out,
|
height: window.innerHeight,
|
||||||
paused: options.paused,
|
'in': options['in'],
|
||||||
position: options['in'],
|
out: options.out,
|
||||||
poster: '/' + options.item + '/' + '96p' + options['in'] +'.jpg',
|
paused: options.paused,
|
||||||
resolution: pandora.user.ui.videoResolution,
|
position: options['in'],
|
||||||
showMarkers: false,
|
poster: '/' + options.item + '/' + '96p' + options['in'] +'.jpg',
|
||||||
showMilliseconds: 0,
|
resolution: pandora.user.ui.videoResolution,
|
||||||
subtitles: videoOptions.subtitles,
|
showMarkers: false,
|
||||||
timeline: '/' + options.item + '/' + 'timeline16p.png',
|
showMilliseconds: 0,
|
||||||
title: result.data.title,
|
subtitles: data.subtitles,
|
||||||
video: videoOptions.video,
|
timeline: '/' + options.item + '/' + 'timeline16p.png',
|
||||||
width: window.innerWidth
|
title: result.data.title,
|
||||||
})
|
video: data.video,
|
||||||
.bindEvent({
|
width: window.innerWidth
|
||||||
playing: checkRange,
|
})
|
||||||
position: checkRange,
|
.bindEvent({
|
||||||
resolution: function(data) {
|
playing: checkRange,
|
||||||
pandora.api.setUI({'videoResolution': data.resolution});
|
position: checkRange,
|
||||||
},
|
resolution: function(data) {
|
||||||
})
|
pandora.api.setUI({'videoResolution': data.resolution});
|
||||||
);
|
},
|
||||||
Ox.UI.hideLoadingScreen();
|
})
|
||||||
|
);
|
||||||
|
Ox.UI.hideLoadingScreen();
|
||||||
|
|
||||||
function checkRange(data) {
|
});
|
||||||
if (
|
return that;
|
||||||
data.position < options['in'] - 0.04
|
},
|
||||||
|| data.position > options.out
|
timeline: function(options) {
|
||||||
) {
|
var that = Ox.Element();
|
||||||
if (!pandora.player.options('paused')) {
|
pandora.user.ui.item = options.item;
|
||||||
pandora.player.togglePaused();
|
pandora.api.get({id: options.item, keys: videoKeys}, function(result) {
|
||||||
}
|
Ox.UI.hideLoadingScreen();
|
||||||
pandora.player.options({
|
var data = getVideoOptions(result.data),
|
||||||
position: options['in']
|
ui = pandora.user.ui;
|
||||||
});
|
that.append(pandora.player = Ox.VideoTimelinePlayer({
|
||||||
}
|
censored: data.censored,
|
||||||
}
|
censoredIcon: pandora.site.cantPlay.icon,
|
||||||
});
|
censoredTooltip: pandora.site.cantPlay.text,
|
||||||
return that;
|
cuts: data.cuts || [],
|
||||||
|
duration: data.duration,
|
||||||
|
followPlayer: ui.followPlayer,
|
||||||
|
getFrameURL: function(position) {
|
||||||
|
return '/' + ui.item + '/' + ui.videoResolution + 'p' + position + '.jpg';
|
||||||
|
},
|
||||||
|
getLargeTimelineURL: function(type, i) {
|
||||||
|
return '/' + ui.item + '/timeline' + type + '64p' + i + '.jpg';
|
||||||
|
},
|
||||||
|
height: that.height(),
|
||||||
|
muted: ui.videoMuted,
|
||||||
|
'in': options['in'],
|
||||||
|
out: options.out,
|
||||||
|
paused: options.paused,
|
||||||
|
position: options['in'],
|
||||||
|
resolution: pandora.site.video.resolutions[0],
|
||||||
|
smallTimelineURL: '/' + ui.item + '/timeline16p.jpg',
|
||||||
|
subtitles: data.subtitles,
|
||||||
|
timeline: ui.videoTimeline,
|
||||||
|
timelines: pandora.site.timelines,
|
||||||
|
video: data.video,
|
||||||
|
videoRatio: data.videoRatio,
|
||||||
|
volume: ui.videoVolume,
|
||||||
|
width: that.width()
|
||||||
|
})
|
||||||
|
.bindEvent({
|
||||||
|
playing: checkRange,
|
||||||
|
position: checkRange,
|
||||||
|
resolution: function(data) {
|
||||||
|
pandora.api.setUI({'videoResolution': data.resolution});
|
||||||
|
},
|
||||||
|
})
|
||||||
|
);
|
||||||
|
});
|
||||||
|
return that;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
function checkRange(data) {
|
||||||
|
if (
|
||||||
|
data.position < options['in'] - 0.04
|
||||||
|
|| data.position > options.out
|
||||||
|
) {
|
||||||
|
if (!pandora.player.options('paused')) {
|
||||||
|
pandora.player.togglePaused();
|
||||||
|
}
|
||||||
|
pandora.player.options({
|
||||||
|
position: options['in']
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
Ox.extend(pandora.user, {
|
Ox.extend(pandora.user, {
|
||||||
videoFormat: Ox.UI.getVideoFormat(pandora.site.video.formats)
|
videoFormat: Ox.UI.getVideoFormat(pandora.site.video.formats)
|
||||||
});
|
});
|
||||||
var options = parseQuery();
|
var options = parseQuery();
|
||||||
if (['video', 'player'].indexOf(options.view) > -1) {
|
if (['video', 'player'].indexOf(options.view) > -1) {
|
||||||
pandora.ui.info = pandora.clip(options)
|
pandora.$ui.player = pandora.ui.player(options)
|
||||||
.css({width: '100%', height: '100%'})
|
.css({top: 0, bottom: 0, left: 0, right: 0, position: 'absolute'})
|
||||||
|
.appendTo(document.body);
|
||||||
|
} else if (options.view == 'timeline') {
|
||||||
|
pandora.$ui.timeline = pandora.ui.timeline(options)
|
||||||
|
.css({top: 0, bottom: 0, left: 0, right: 0, position: 'absolute'})
|
||||||
.appendTo(document.body);
|
.appendTo(document.body);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -142,6 +197,8 @@ Ox.load('UI', {
|
||||||
})
|
})
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
options.duration = data.duration;
|
||||||
|
options.videoRatio = data.videoRatio;
|
||||||
return options;
|
return options;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue