diff --git a/couchpotato/core/plugins/movie/static/movie.css b/couchpotato/core/plugins/movie/static/movie.css
index c2cae584..8f584609 100644
--- a/couchpotato/core/plugins/movie/static/movie.css
+++ b/couchpotato/core/plugins/movie/static/movie.css
@@ -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 {
diff --git a/couchpotato/core/plugins/movie/static/movie.js b/couchpotato/core/plugins/movie/static/movie.js
index 9877b12f..69afe9db 100644
--- a/couchpotato/core/plugins/movie/static/movie.js
+++ b/couchpotato/core/plugins/movie/static/movie.js
@@ -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)
+ }
+
+
});
\ No newline at end of file
diff --git a/couchpotato/static/images/icon.trailer.png b/couchpotato/static/images/icon.trailer.png
new file mode 100644
index 00000000..6a382dc7
Binary files /dev/null and b/couchpotato/static/images/icon.trailer.png differ
diff --git a/couchpotato/static/style/main.css b/couchpotato/static/style/main.css
index d7011fc1..c2a525a1 100644
--- a/couchpotato/static/style/main.css
+++ b/couchpotato/static/style/main.css
@@ -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;
diff --git a/couchpotato/static/style/page/settings.css b/couchpotato/static/style/page/settings.css
index 59a03c82..feea6bbe 100644
--- a/couchpotato/static/style/page/settings.css
+++ b/couchpotato/static/style/page/settings.css
@@ -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 {
diff --git a/couchpotato/templates/_desktop.html b/couchpotato/templates/_desktop.html
index e6d1ccb2..6dcc2c02 100644
--- a/couchpotato/templates/_desktop.html
+++ b/couchpotato/templates/_desktop.html
@@ -45,6 +45,8 @@
+
+