Trailer support

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 {

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)
+	}
+
+
 });