Trailer support
This commit is contained in:
@@ -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 {
|
||||
|
||||
@@ -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 |
@@ -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 {
|
||||
|
||||
@@ -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() {
|
||||
|
||||
Reference in New Issue
Block a user