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;
@@ -25,6 +26,10 @@
 			background: rgba(255,255,255,0.03);
 		}
 		
+		.movies .movie_container {
+			overflow: hidden;
+		}
+
 		.movies .data {
 			padding: 20px;
 			height: 180px;
@@ -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;
@@ -311,6 +319,35 @@
 					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;
 			padding: 10px;
@@ -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

@@ -246,6 +246,10 @@ var Movie = new Class({
 
 	isSelected: function(){
 		return this.select_checkbox.get('checked');
+	},
+
+	toElement: function(){
+		return this.el;
 	}
 
 });
@@ -426,3 +430,108 @@ 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)
+	}
+
+
+});

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;

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 {

couchpotato/templates/_desktop.html

@@ -46,6 +46,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() {
 				new Uniform();