TheMovieDB.org is now used as metadata source.

src/UI/Handlebars/Helpers/Series.js

@@ -33,7 +33,7 @@ Handlebars.registerHelper('remotePoster', function() {
   }
 
   return new Handlebars.SafeString('<img class="series-poster placeholder-image" src="{0}">'.format(placeholder));
-})
+});
 
 Handlebars.registerHelper('traktUrl', function() {
     return 'http://trakt.tv/search/tvdb/' + this.tvdbId + '?id_type=show';
@@ -47,6 +47,19 @@ Handlebars.registerHelper('tvdbUrl', function() {
     return 'http://imdb.com/title/tt' + this.imdbId;
 });
 
+Handlebars.registerHelper('tmdbUrl', function() {
+    return 'https://www.themoviedb.org/movie/' + this.tmdbId;
+});
+
+Handlebars.registerHelper('homepage', function() {
+    return this.website;
+});
+
+Handlebars.registerHelper('alternativeTitlesString', function() {
+  var titles = this.alternativeTitles;
+  return titles.slice(0,titles.length-1).join(", ") + " and " + titles[titles.length-1];
+});
+
 Handlebars.registerHelper('inCinemas', function() {
   var monthNames = ["January", "February", "March", "April", "May", "June",
   "July", "August", "September", "October", "November", "December"
@@ -55,7 +68,7 @@ Handlebars.registerHelper('inCinemas', function() {
   var year = cinemasDate.getFullYear();
   var month = monthNames[cinemasDate.getMonth()];
   return "In Cinemas " + month + " " + year;
-})
+});
 
 Handlebars.registerHelper('tvRageUrl', function() {
     return 'http://www.tvrage.com/shows/id-' + this.tvRageId;

src/UI/Movies/Details/InfoViewTemplate.hbs

@@ -1,5 +1,5 @@
 <div class="row">
-    <div class="col-md-9">
+    <div class="col-md-8">
         {{profile profileId}}
 
         {{#if network}}
@@ -27,11 +27,13 @@
             <span class="label label-default">Announced</span>
         {{/if_eq}}
     </div>
-    <div class="col-md-3">
+    <div class="col-md-4">
         <span class="series-info-links">
-            <!--<a href="{{traktUrl}}" class="label label-info">Trakt</a>
-
-            <a href="{{tvdbUrl}}" class="label label-info">The TVDB</a>-->
+            <!--<a href="{{traktUrl}}" class="label label-info">Trakt</a>-->
+            {{#if website}}
+              <a href="{{homepage}}" class="label label-info">Homepage</a>
+            {{/if}}
+            <a href="{{tmdbUrl}}" class="label label-info">The Movie DB</a>
 
             {{#if imdbId}}
                 <a href="{{imdbUrl}}" class="label label-info">IMDB</a>
@@ -40,18 +42,12 @@
     </div>
 </div>
 
-{{#if alternateTitles}}
+{{#if alternativeTitles}}
 <div class="row">
     <div class="col-md-12">
-        {{#each alternateTitles}}
-            {{#if_eq seasonNumber compare="-1"}}
-                <span class="label label-default">{{title}}</span>
-            {{/if_eq}}
-
-            {{#if_eq sceneSeasonNumber compare="-1"}}
-                <span class="label label-default">{{title}}</span>
-            {{/if_eq}}
-        {{/each}}
+      <span class="alternative-titles">
+        Also known as: {{alternativeTitlesString}}.
+      </span>
     </div>
 </div>
 {{/if}}

src/UI/Movies/Details/MoviesDetailsLayout.js

@@ -274,7 +274,7 @@ module.exports = Marionette.Layout.extend({
 
     _showBackdrop : function () {
         $('body').addClass('backdrop');
-        var fanArt = this._getImage('fanart');
+        var fanArt = this._getImage('banner');
 
         if (fanArt) {
             this._backstrech = $.backstretch(fanArt);

src/UI/Movies/Details/MoviesDetailsTemplate.hbs

@@ -36,12 +36,18 @@
     </div>
 </div>
 <div id="movie-info">
-  <ul class="nav nav-tabs" id="myTab">
-      <li><a href="#movie-history" class="x-movie-history">History</a></li>
-      <li><a href="#movie-search" class="x-movie-search">Search</a></li>
-  </ul>
-  <div class="tab-content">
-      <div class="tab-pane" id="movie-history"/>
-      <div class="tab-pane" id="movie-search"/>
+  <div class="movie-tabs">
+    <div>
+      <div class="movie-tabs-card">
+        <ul class="nav nav-tabs" id="myTab">
+            <li><a href="#movie-history" class="x-movie-history">History</a></li>
+            <li><a href="#movie-search" class="x-movie-search">Search</a></li>
+        </ul>
+        <div class="tab-content">
+            <div class="tab-pane" id="movie-history"/>
+            <div class="tab-pane" id="movie-search"/>
+        </div>
+      </div>
+    </div>
   </div>
 </div>

src/UI/Movies/movies.less

@@ -8,6 +8,22 @@
   max-width: 100%;
 }
 
+.movie-tabs-card {
+  .card;
+  .opacity(0.9);
+  margin  : 30px 10px;
+  padding : 10px 25px;
+
+  .show-hide-episodes {
+    .clickable();
+    text-align : center;
+
+    i {
+      .clickable();
+    }
+  }
+}
+
 .edit-movie-modal, .delete-movie-modal {
   overflow : visible;
 
@@ -253,6 +269,12 @@
   margin-bottom : 50px;
 }
 
+.alternative-titles {
+  font-size: 12px;
+  color: rgba(255, 255, 255, 180);
+  opacity: .75;
+}
+
 .movie-season {
 
   .episode-number-cell {