Trailer support

This commit is contained in:
Ruud
2012-06-16 17:45:57 +02:00
parent 896e0ab322
commit 15c76bf7cb
6 changed files with 158 additions and 2 deletions
@@ -13,6 +13,7 @@
overflow: hidden;
width: 100%;
transition: all 0.2s linear;
transform: translateZ(0);
}
.movies .movie.list_view, .movies .movie.mass_edit_view {
margin: 1px 0;
@@ -24,6 +25,10 @@
.movies .movie.list_view:hover, .movies .movie.mass_edit_view:hover {
background: rgba(255,255,255,0.03);
}
.movies .movie_container {
overflow: hidden;
}
.movies .data {
padding: 20px;
@@ -32,8 +37,8 @@
position: relative;
float: right;
border-radius: 0;
overflow: hidden;
transition: all 0.2s linear;
transform: translateZ(0);
}
.movies .list_view .data, .movies .mass_edit_view .data {
height: 30px;
@@ -62,6 +67,7 @@
height: 180px;
border-radius: 4px 0 0 4px;
transition: all 0.2s linear;
transform: translateZ(0);
}
.movies .list_view .poster, .movies .mass_edit_view .poster {
@@ -84,6 +90,7 @@
float: left;
width: 90%;
transition: all 0.2s linear;
transform: translateZ(0);
}
.movies .list_view .info .title, .movies .mass_edit_view .info .title {
font-size: 16px;
@@ -100,6 +107,7 @@
width: 10%;
text-align: right;
transition: all 0.2s linear;
transform: translateZ(0);
}
.movies .list_view .info .year, .movies .mass_edit_view .info .year {
font-size: 16px;
@@ -310,6 +318,35 @@
padding-bottom: 4px;
height: auto;
}
.movies .movie .trailer_container {
width: 100%;
background: #000;
text-align: center;
transition: all .6s cubic-bezier(0.9,0,0.1,1);
transform: translateZ(0);
overflow: hidden;
}
.movies .movie .trailer_container.hide {
height: 0 !important;
}
.movies .movie .hide_trailer {
position: absolute;
top: 0;
left: 50%;
margin-left: -50px;
width: 100px;
text-align: center;
padding: 3px 10px;
background: #4e5969;
border-radius: 0 0 2px 2px;
transition: all .6s cubic-bezier(0.9,0,0.1,1) .2s;
transform: translateZ(0);
}
.movies .movie .hide_trailer.hide {
top: -30px;
}
.movies .load_more {
display: block;
@@ -323,6 +360,7 @@
.movies .alph_nav {
transition: box-shadow .4s linear;
transform: translateZ(0);
position: fixed;
z-index: 2;
top: 0;
@@ -364,6 +402,7 @@
color: rgba(255,255,255,0.2);
border: 1px solid transparent;
transition: all 0.1s ease-in-out;
transform: translateZ(0);
text-shadow: none;
}
.movies .alph_nav .numbers li:first-child {
+110 -1
View File
@@ -77,7 +77,7 @@ var Movie = new Class({
self.profile = Quality.getProfile(self.data.profile_id) || {};
self.create();
self.busy(false);
},
@@ -246,6 +246,10 @@ var Movie = new Class({
isSelected: function(){
return this.select_checkbox.get('checked');
},
toElement: function(){
return this.el;
}
});
@@ -425,4 +429,109 @@ var ReleaseAction = new Class({
}
});
var TrailerAction = new Class({
Extends: MovieAction,
id: null,
create: function(){
var self = this;
self.el = new Element('a.trailer', {
'title': 'Watch the trailer of ' + self.movie.getTitle(),
'events': {
'click': self.watch.bind(self)
}
});
},
watch: function(offset){
var self = this;
var data_url = 'http://gdata.youtube.com/feeds/videos?vq="{title}" {year} trailer&max-results=1&alt=json-in-script&orderby=relevance&sortorder=descending&format=5&fmt=18'
var url = data_url.substitute({
'title': self.movie.getTitle(),
'year': self.movie.get('year'),
'offset': offset || 1
}),
size = $(self.movie).getSize(),
height = (size.x/16)*9,
id = 'trailer-'+randomString();
self.player_container = new Element('div[id='+id+']');
self.container = new Element('div.hide.trailer_container')
.adopt(self.player_container)
.inject(self.movie.container, 'top');
self.container.setStyle('height', 0);
self.container.removeClass('hide');
self.close_button = new Element('a.hide.hide_trailer', {
'text': 'Hide trailer',
'events': {
'click': self.stop.bind(self)
}
}).inject(self.movie);
setTimeout(function(){
$(self.movie).setStyle('max-height', height);
self.container.setStyle('height', height);
}, 100)
new Request.JSONP({
'url': url,
'onComplete': function(json){
var video_url = json.feed.entry[0].id.$t.split('/'),
video_id = video_url[video_url.length-1];
self.player = new YT.Player(id, {
'height': height,
'width': size.x,
'videoId': video_id,
'playerVars': {
'autoplay': 1,
'showsearch': 0,
'wmode': 'transparent',
'iv_load_policy': 3
}
});
self.close_button.removeClass('hide');
var quality_set = false;
var change_quality = function(state){
if(!quality_set && (state.data == 1 || state.data || 2)){
try {
self.player.setPlaybackQuality('hd720');
quality_set = true;
}
catch(e){
}
}
}
self.player.addEventListener('onStateChange', change_quality);
}
}).send()
},
stop: function(){
var self = this;
self.player.stopVideo();
self.container.addClass('hide');
self.close_button.addClass('hide');
setTimeout(function(){
self.container.destroy()
self.close_button.destroy();
}, 1800)
}
});
Binary file not shown.

After

Width:  |  Height:  |  Size: 596 B

+4
View File
@@ -154,6 +154,7 @@ body > .spinner, .mask{
.icon.rating { background-image: url('../images/icon.rating.png'); }
.icon.files { background-image: url('../images/icon.files.png'); }
.icon.info { background-image: url('../images/icon.info.png'); }
.icon.trailer { background-image: url('../images/icon.trailer.png'); }
/*** Navigation ***/
.header {
@@ -166,6 +167,7 @@ body > .spinner, .mask{
z-index: 5;
box-shadow: 0 20px 30px -30px rgba(0,0,0,0.05);
transition: box-shadow .4s cubic-bezier(0.9,0,0.1,1);
transform: translateZ(0);
}
.header.with_shadow {
box-shadow: 0 20px 30px -30px rgba(0,0,0,0.3);
@@ -215,6 +217,7 @@ body > .spinner, .mask{
outline: none;
box-shadow: inset 0 1px 8px rgba(0,0,0,0.05), 0 1px 0px rgba(255,255,255,0.15);
transition: all .4s cubic-bezier(0.9,0,0.1,1);
transform: translateZ(0);
}
.header .navigation li:hover a:after { background-color: #047792; }
@@ -522,6 +525,7 @@ body > .spinner, .mask{
width: 25px;
border: 1px solid rgba(0,0,0,0.3);
transition: all 0.3s ease-in-out;
transform: translateZ(0);
}
.more_menu.show > a:not(:active), .more_menu > a:hover:not(:active) {
background-color: #406db8;
@@ -35,6 +35,7 @@
padding: 11px 15px;
font-weight: normal;
transition: all 0.1s ease-in-out;
transform: translateZ(0);
color: rgba(255, 255, 255, 0.8);
}
.page.settings .tabs a:hover, .page.settings .tabs .active a {
@@ -49,6 +50,7 @@
padding: 0;
overflow: hidden;
transition: all 1s ease-in-out;
transform: translateZ(0);
max-height: 0;
}
.page.settings .tabs > .active .subtabs {
+2
View File
@@ -45,6 +45,8 @@
<link href="{{ url_for('web.static', filename='images/favicon.ico') }}" rel="icon" type="image/x-icon" />
<link rel="apple-touch-icon" href="{{ url_for('web.static', filename='images/homescreen.png') }}" />
<script type="text/javascript" src="https://www.youtube.com/player_api" defer="defer"></script>
<script type="text/javascript">
window.addEvent('domready', function() {