diff --git a/couchpotato/core/media/movie/_base/static/movie.actions.js b/couchpotato/core/media/movie/_base/static/movie.actions.js
index 984beec..e8e167d 100644
--- a/couchpotato/core/media/movie/_base/static/movie.actions.js
+++ b/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,10 +460,30 @@ 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);
+
+ var url = data_url.substitute({
+ 'title': encodeURI(self.getTitle()),
+ 'year': self.get('year')
+ });
+
+ new Request.JSONP({
+ 'url': url,
+ 'onComplete': function(json){
+ self.video_id = json.items[0].id.videoId;
+ self.container.grab(new Element('div.background', {
+ 'styles': {
+ 'background-image': 'url('+json.items[0].snippet.thumbnails.high.url+')'
+ }
+ }));
+ }
+ }).send();
}
return self.container;
@@ -469,37 +491,9 @@ MA.Trailer = new Class({
},
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.player = new YT.Player(self.id, {
- 'height': '100%',
- 'width': '100%',
- 'videoId': json.items[0].id.videoId,
- 'playerVars': {
- 'autoplay': 1,
- 'showsearch': 0,
- 'showinfo': 0,
- 'wmode': 'transparent',
- 'iv_load_policy': 3
- }
- });
-
- spinner.hide();
+ var self = this;
- }
- }).send();
+ self.container.set('html', '');
}
@@ -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)
diff --git a/couchpotato/core/media/movie/_base/static/movie.scss b/couchpotato/core/media/movie/_base/static/movie.scss
index 20683e3..786cf81 100644
--- a/couchpotato/core/media/movie/_base/static/movie.scss
+++ b/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: $primary_color;
- color: #FFF;
+ .background {
+ opacity: .6;
+ 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;
- transform: translateY(-50%);
+ margin-left: $play-size/2;
+ transform: translateY(-54%);
+
+ @include media-desktop {
+ margin-left: $play-size/4;
+ }
+
+ @include media-phablet {
+ margin-left: $play-size/7;
+ }
&:first-child {
- margin-left: 0;
- transform: translate(-150%, -50%);
+ margin-left: -($play-size/2);
+ 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;
}
}
}
diff --git a/couchpotato/templates/index.html b/couchpotato/templates/index.html
index be44514..25adf42 100644
--- a/couchpotato/templates/index.html
+++ b/couchpotato/templates/index.html
@@ -24,8 +24,6 @@
{% end %}
-
-