Add trailer function

css/app.css

@@ -1191,6 +1191,15 @@ body.has-notification #notification {
   -webkit-transform: translateY(-50%);
 }
 
+.trailer-box {
+  text-align: center;
+  position: absolute;
+  top: 15%;
+  width: 100%;
+  left: 0;
+  right: 0;
+}
+
 sidebar {
   right: 0;
   position: absolute;
@@ -1951,3 +1960,6 @@ body.watching #header, body.watching #notification, body.watching #catalog-selec
   position: absolute;
   right: 10px;
 }
+.trailerExit{
+  cursor: pointer;
+}

index.html

@@ -127,10 +127,15 @@ <h4><%= i18n.__('subtitledIn') %></h4>
             </div>
 
             <% if (this.model.get('torrents')) { %>
-              <a href="" class="p_tooltip play-button"><%= i18n.__('watchItNow') %></a>
+              <a href="" id="play-button" class="p_tooltip play-button"><%= i18n.__('watchItNow') %></a>
+              <a href="" id="showTrailer" class="p_tooptip play-button"><%= i18n.__('showTrailer') %></a>
             <% } %>
           </div>
         </div>
+        <div class="trailer-box">
+          <div id="trailer">
+          </div>
+        </div>
       </div>
     </script>
 

js/frontend/views/sidebar.js

@@ -5,11 +5,13 @@ App.View.Sidebar = Backbone.View.extend({
 
     events: {
         'click .closer':           'hide',
-        'click .play-button':      'play',
+        'click #play-button':      'play',
         'click .subtitles button': 'selectSubtitle',
         'click .dropdown-toggle':  'toggleDropdown',
         'click #switch-on':        'enableHD',
-        'click #switch-off':       'disableHD'
+        'click #switch-off':       'disableHD',
+        'click #showTrailer':      'showTrailer',
+        'click .trailerExit':      'exitTrailer'
     },
 
     keyHide: function (e) {
@@ -18,6 +20,7 @@ App.View.Sidebar = Backbone.View.extend({
             $('body').removeClass('sidebar-open');
             $('.movie.active').removeClass('active');
             $('sidebar').addClass('hidden');
+            $('#trailer').remove();
         }
     },
 
@@ -256,5 +259,27 @@ App.View.Sidebar = Backbone.View.extend({
             this.model.set('torrent', torrents['720p']);
             this.model.set('quality', '720p');
         }
+    },
+
+    showTrailer: function (evt){
+        evt.preventDefault();
+        $('.movie-detail').fadeOut();
+                $.ajax({
+                    url: "https://gdata.youtube.com/feeds/api/videos?q=" + this.model.get('title') + " " + this.model.get('year') + " trailer&max-results=1&alt=json",
+                    dataType: "text",
+                    success: function(data) {
+                        var json = $.parseJSON(data);
+                        var getid = json.feed.entry[0].link[0].href.split("&");
+                        var id = getid[0].split('=');
+                        $('#trailer').html('<iframe width="720" height="405" src="http://www.youtube.com/embed/' + id[1] + '" frameborder="0" allowfullscreen=""></iframe>');
+                        $("#trailer").append('<div class="trailerExit"><img src="/images/close.svg" width="50"></div>');
+                    }
+                });
+    },
+
+    exitTrailer: function (evt){
+         $('#trailer').remove();
+         $(".trailer-box").append('<div id="trailer"> </div>');
+         $(".movie-detail").fadeIn();
     }
 });

language/en.json

@@ -55,5 +55,6 @@
 	"romanian": "Romanian",
 	"turkish": "Turkish",
 	"dutch": "dutch",
-	"italian": "italian"
-}
+	"italian": "italian",
+	"showTrailer": "View trailer"
+}

language/es.json

@@ -54,5 +54,6 @@
 	"italian": "Italiano",
 	"romanian": "Romano",
 	"spanish": "Español",
-	"turkish": "Turco"
+	"turkish": "Turco",
+	"showTrailer": "Ver trailer"
 }

language/pt-br.json

@@ -52,5 +52,7 @@
         "thriller": "Suspense",
         "war": "Guerra",
         "western": "Faroeste"
-    }
+    },
+    "showTrailer": "Assistir trailer",
+    "Synopsis": "Traduzir sinopse (Automatico)"
 }