Simplify youtube loading

couchpotato/core/media/movie/_base/static/movie.actions.js

@@ -450,7 +450,9 @@ MA.Trailer = new Class({
 	label: 'Trailer',
 
 	getDetails: function(){
-		var self = this;
+		var self = this,
+			data_url = 'https://www.googleapis.com/youtube/v3/search?q="{title}" {year} trailer&maxResults=1&type=video&videoDefinition=high&videoEmbeddable=true&part=snippet&key=AIzaSyAT3li1KjfLidaL6Vt8T92MRU7n4VOrjYk';
+
 
 		if(!self.player_container){
 			self.id = 'trailer-'+randomString();
@@ -458,50 +460,42 @@ MA.Trailer = new Class({
 				'events': {
 					'click': self.watch.bind(self)
 				}
-			}).adopt(new Element('span[text="play"]'), new Element('span[text="trailer"]'));
+			}).adopt(
+				new Element('span[text="watch"]'),
+				new Element('span[text="trailer"]')
+			);
 
 			self.container = new Element('div.trailer_container')
 				.grab(self.player_container);
-		}
-
-		return self.container;
-
-	},
-
-	watch: function(){
-		var self = this,
-			data_url = 'https://www.googleapis.com/youtube/v3/search?q="{title}" {year} trailer&maxResults=1&type=video&videoDefinition=high&videoEmbeddable=true&part=snippet&key=AIzaSyAT3li1KjfLidaL6Vt8T92MRU7n4VOrjYk';
 
 			var url = data_url.substitute({
 				'title': encodeURI(self.getTitle()),
 				'year': self.get('year')
 			});
 
-		var spinner = new Element('div.mask').grab(new Element('div.spinner')).inject(self.container);
-
 			new Request.JSONP({
 				'url': url,
 				'onComplete': function(json){
-
+					self.video_id = json.items[0].id.videoId;
-				self.player = new YT.Player(self.id, {
+					self.container.grab(new Element('div.background', {
-					'height': '100%',
+						'styles': {
-					'width': '100%',
+							'background-image': 'url('+json.items[0].snippet.thumbnails.high.url+')'
-					'videoId': json.items[0].id.videoId,
-					'playerVars': {
-						'autoplay': 1,
-						'showsearch': 0,
-						'showinfo': 0,
-						'wmode': 'transparent',
-						'iv_load_policy': 3
 						}
-				});
+					}));
-
-				spinner.hide();
-
 				}
 			}).send();
 		}
 
+		return self.container;
+
+	},
+
+	watch: function(){
+		var self = this;
+
+		self.container.set('html', '<iframe src="https://www.youtube-nocookie.com/embed/'+self.video_id+'?rel=0&showinfo=0&autoplay=1&showsearch=0&iv_load_policy=3&vq=hd720" />');
+	}
+
 
 });
 
@@ -788,13 +782,12 @@ MA.Add = new Class({
 		self.button = self.createButton();
 		self.detail_button = self.createButton();
 
-		p('add');
 	},
 
 	createButton: function(){
 		var self = this;
 		return new Element('a.add', {
-			'text': 'Add movie',
+			'text': 'Add',
 			'title': 'Re-add the movie and mark all previous snatched/downloaded as ignored',
 			'events': {
 				'click': self.doAdd.bind(self)

couchpotato/core/media/movie/_base/static/movie.scss

@@ -614,49 +614,109 @@
 	}
 
 	.trailer_container {
-		background: $theme_off;
+		$play-size: 110px;
+
+		background: #000;
 		position: relative;
 		padding-bottom: 56.25%;
 		height: 0;
 		overflow: hidden;
 		max-width: 100%;
 		cursor: pointer;
-		transition: all 300ms;
 
-		&:hover {
+		.background {
-			background: $primary_color;
+			opacity: .6;
-			color: #FFF;
+			transition: all 300ms;
+			filter: blur(10px);
+			transform: scale(1.05) translateZ(0);
+			background: no-repeat center;
+			background-size: cover;
+			position: absolute;
+			top: 0;
+			right: 0;
+			bottom: 0;
+			left: 0;
+			z-index: 1;
 		}
 
 		.icon-play {
-			font-size: 22px;
+
+			opacity: 0.9;
 			position: absolute;
+			z-index: 2;
 			text-align: center;
 			width: 100%;
 			top: 50%;
 			transform: translateY(-50%);
+			transition: all 300ms;
+			color: #FFF;
+			font-size: $play-size;
+
+			@include media-desktop {
+				font-size: $play-size/2;
+			}
+
+			@include media-phablet {
+				font-size: $play-size/3.5;
+			}
 
 			span {
+				transition: all 300ms;
+				opacity: 0.9;
 				position: absolute;
-				font-size: 16px;
+				font-size: 1em;
 				top: 50%;
 				left: 50%;
-				margin-left: 10px;
+				margin-left: $play-size/2;
-				transform: translateY(-50%);
+				transform: translateY(-54%);
+
+				@include media-desktop {
+					margin-left: $play-size/4;
+				}
+
+				@include media-phablet {
+					margin-left: $play-size/7;
+				}
 
 				&:first-child {
-					margin-left: 0;
+					margin-left: -($play-size/2);
-					transform: translate(-150%, -50%);
+					transform: translate(-100%, -54%);
+
+					@include media-desktop {
+						margin-left: -($play-size/4);
+					}
+
+					@include media-phablet {
+						margin-left: -($play-size/7);
+					}
+				}
+			}
+		}
+
+		&:hover {
+			color: $primary_color;
+
+			.background {
+				filter: blur(0);
+				opacity: 1;
+			}
+
+			.icon-play {
+				opacity: 1;
+
+				span {
+					opacity: 1;
 				}
 			}
 		}
 
-		iframe, object, embed {
+		iframe {
 			position: absolute;
 			top: 0;
 			left: 0;
 			width: 100%;
 			height: 100%;
+			border: 0;
 		}
 	}
 }

couchpotato/templates/index.html

@@ -24,8 +24,6 @@
 		<script src="//localhost:35729/livereload.js?snipver=1"></script>
 		{% end %}
 
-		<script type="text/javascript" src="//www.youtube.com/player_api" defer="defer"></script>
-
 		<script type="text/javascript">
 
 			window.addEvent('load', function(){