add new fields from omdb

dashboard-ui/css/librarybrowser.css

@@ -221,7 +221,7 @@
     background-size: cover;
     vertical-align: top;
     position: relative;
-    top: -1px;
+    top: -2px;
 }
 
 .halfStarRating {
@@ -232,6 +232,13 @@
     background-position: right center;
 }
 
+.starRatingValue {
+    display: inline-block;
+    margin-left: 1px;
+    position: relative;
+    top: -2px;
+}
+
 .rottentomatoesicon {
     display: inline-block;
     width: 17px;
@@ -241,17 +248,13 @@
     background-repeat: no-repeat;
     vertical-align: top;
     position: relative;
-    top: -1px;
+    top: -2px;
 }
 
-.starRating + .rottentomatoesicon {
+.starRatingValue + .rottentomatoesicon {
     margin-left: 1em;
 }
 
-.smallPosterTileItem .starRating + .rottentomatoesicon {
-    margin-left: .5em;
-}
-
 .fresh {
     background-image: url(images/fresh.png);
 }
@@ -260,6 +263,36 @@
     background-image: url(images/rotten.png);
 }
 
+.metascore {
+    font-family: Arial;
+    color: #fff;
+    font-weight: bold;
+    display: inline-block;
+    font-size: 12px;
+    text-align: center;
+    width: 24px;
+    height: 20px;
+    line-height: 20px;
+    position: relative;
+    top: -2px;
+}
+
+.metascorehigh {
+    background-color: rgba(102, 204, 51, .75);
+}
+
+.metascoremid {
+    background-color: rgba(255, 204, 51, .75);
+}
+
+.metascorelow {
+    background-color: rgba(240, 0, 0, .75);
+}
+
+.criticRating + .metascore, .starRatingValue + .metascore {
+    margin-left: 1em;
+}
+
 .criticReview {
     margin: 1.5em 0;
     background: #222;
@@ -277,11 +310,10 @@
     }
 
 .criticRating {
-    color: #ccc;
-    vertical-align: top;
-    margin-left: 5px;
     display: inline-block;
-    vertical-align: top;
+    margin-left: 1px;
+    position: relative;
+    top: -2px;
 }
 
 .criticRatingSummary {
@@ -346,7 +378,7 @@ a.itemTag:hover {
 }
 
 .itemCommunityRating + .userDataIcons {
-    margin-left: 1.5em;
+    margin-left: 1.25em;
 }
 
 .itemBackdrop {

dashboard-ui/css/posteritem.css

@@ -14,10 +14,25 @@
     transition: all 500ms ease;
 }
 
-.posterItemOverlayTarget {
+/*.posterItemOverlayTarget {
     position: absolute;
     right: 0;
     top: 50%;
+    z-index: 999;
+}*/
+
+.posterItemOverlayTarget {
+    position: absolute;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    background: #111;
+    z-index: 999;
+    display: none;
+}
+
+.posterItemOverlayInner {
+    padding: 15px;
 }
 
 .smallBackdropPosterItem, .smallPosterItem {

dashboard-ui/edititemmetadata.html

@@ -100,12 +100,16 @@
                             </div>
                             <div id="fldCommunityRating" style="display: none;" data-role="fieldcontain">
                                 <label for="txtCommunityRating">Community rating:</label>
-                                <input type="number" id="txtCommunityRating" name="txtCommunityRating" step=".1" data-mini="true" />
+                                <input type="number" id="txtCommunityRating" name="txtCommunityRating" step=".1" min="0" max="10" data-mini="true" />
                             </div>
                             <div id="fldCommunityVoteCount" style="display: none;" data-role="fieldcontain">
                                 <label for="txtCommunityVoteCount">Vote count:</label>
                                 <input type="number" id="txtCommunityVoteCount" name="txtCommunityVoteCount" data-mini="true" />
                             </div>
+                            <div id="fldMetascore" style="display: none;" data-role="fieldcontain">
+                                <label for="txtMetascore">Metascore:</label>
+                                <input type="number" id="txtMetascore" name="txtMetascore" step="1" min="0" max="100" data-mini="true" />
+                            </div>
                             <div data-role="fieldcontain" id="fldCriticRating" style="display: none;">
                                 <label for="txtCriticRating">Critic rating:</label>
                                 <input type="number" id="txtCriticRating" name="txtCriticRating" step=".1" data-mini="true" />
@@ -114,6 +118,10 @@
                                 <label for="txtCriticRatingSummary">Critic rating summary:</label>
                                 <input type="text" id="txtCriticRatingSummary" name="txtCriticRatingSummary" data-mini="true" />
                             </div>
+                            <div data-role="fieldcontain" id="fldAwardSummary" style="display: none;">
+                                <label for="txtAwardSummary">Award summary:</label>
+                                <input type="text" id="txtAwardSummary" name="txtAwardSummary" data-mini="true" />
+                            </div>
                             <div data-role="fieldcontain">
                                 <label for="txtHomePageUrl">Website:</label>
                                 <input type="url" id="txtHomePageUrl" name="txtHomePageUrl" data-mini="true" />

dashboard-ui/movies.html

@@ -63,6 +63,9 @@
                     <input class="radioSortBy" type="radio" name="radioSortBy" id="radioDatePlayed" value="off" data-sortby="DatePlayed,SortName" data-mini="true">
                     <label for="radioDatePlayed">Date played</label>
 
+                    <input class="radioSortBy" type="radio" name="radioSortBy" id="radioMetascore" value="off" data-sortby="Metascore,SortName" data-mini="true">
+                    <label for="radioMetascore">Metascore</label>
+
                     <input class="radioSortBy" type="radio" name="radioSortBy" id="radioContentRating" value="off" data-sortby="OfficialRating,SortName" data-mini="true">
                     <label for="radioContentRating">Parental rating</label>
 

dashboard-ui/scripts/dashboardpage.js

@@ -501,7 +501,7 @@
 
                 html += '<p><strong>A new version of ' + update.name + ' is available!</strong></p>';
 
-                html += '<button type="button" data-icon="download" data-theme="b" onclick="DashboardPage.installPluginUpdate(this);" data-name="' + update.name + '" data-guid="' + update.guid + '" data-version="' + update.versionStr + '" data-classification="' + update.classification + '">Update Now</button>';
+                html += '<button type="button" data-icon="arrow-d" data-theme="b" onclick="DashboardPage.installPluginUpdate(this);" data-name="' + update.name + '" data-guid="' + update.guid + '" data-version="' + update.versionStr + '" data-classification="' + update.classification + '">Update Now</button>';
             }
 
             elem.html(html).trigger('create');

dashboard-ui/scripts/edititemmetadata.js

@@ -585,6 +585,18 @@
             $('#fldRottenTomatoes', page).hide();
         }
 
+        if (item.Type == "Movie") {
+            $('#fldAwardSummary', page).show();
+        } else {
+            $('#fldAwardSummary', page).hide();
+        }
+
+        if (item.Type == "Movie" || item.Type == "Trailer") {
+            $('#fldMetascore', page).show();
+        } else {
+            $('#fldMetascore', page).hide();
+        }
+
         if (item.Type == "Movie" || item.Type == "Trailer" || item.Type == "Person" || item.Type == "BoxSet" || item.Type == "MusicAlbum") {
             $('#fldTmdb', page).show();
         } else {
@@ -859,6 +871,9 @@
         $('#txtCommunityVoteCount', page).val(item.VoteCount || "");
         $('#txtHomePageUrl', page).val(item.HomePageUrl || "");
 
+        $('#txtAwardSummary', page).val(item.AwardSummary || "");
+        $('#txtMetascore', page).val(item.Metascore || "");
+
         $('#txtBudget', page).val(item.Budget || "");
         $('#txtRevenue', page).val(item.Revenue || "");
 
@@ -1153,6 +1168,8 @@
                 Album: $('#txtAlbum', form).val(),
                 AlbumArtist: $('#txtAlbumArtist', form).val(),
                 Artists: $('#txtArtist', form).val().split(';'),
+                Metascore: $('#txtMetascore', form).val(),
+                AwardSummary: $('#txtAwardSummary', form).val(),
                 Overview: $('#txtOverview', form).val(),
                 Status: $('#selectStatus', form).val(),
                 AirDays: editableListViewValues($("#listAirDays", form)),

dashboard-ui/scripts/episodes.js

@@ -44,7 +44,7 @@
 
             html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount);
 
-            $('#items', page).html(html).trigger('create');
+            $('#items', page).html(html).trigger('create').createPosterItemHoverMenu();
 
             $('.selectPage', page).on('change', function () {
                 query.StartIndex = (parseInt(this.value) - 1) * query.Limit;

dashboard-ui/scripts/extensions.js

@@ -408,3 +408,56 @@ function ticks_to_human(str) {
 
     return time;
 };
+
+/******************************************************************************/
+/*********************************** EASING ***********************************/
+/******************************************************************************/
+
+(function () {
+
+    // based on easing equations from Robert Penner (http://www.robertpenner.com/easing)
+
+    var baseEasings = {};
+
+    $.each(["Quad", "Cubic", "Quart", "Quint", "Expo"], function (i, name) {
+        baseEasings[name] = function (p) {
+            return Math.pow(p, i + 2);
+        };
+    });
+
+    $.extend(baseEasings, {
+        Sine: function (p) {
+            return 1 - Math.cos(p * Math.PI / 2);
+        },
+        Circ: function (p) {
+            return 1 - Math.sqrt(1 - p * p);
+        },
+        Elastic: function (p) {
+            return p === 0 || p === 1 ? p :
+                -Math.pow(2, 8 * (p - 1)) * Math.sin(((p - 1) * 80 - 7.5) * Math.PI / 15);
+        },
+        Back: function (p) {
+            return p * p * (3 * p - 2);
+        },
+        Bounce: function (p) {
+            var pow2,
+                bounce = 4;
+
+            while (p < ((pow2 = Math.pow(2, --bounce)) - 1) / 11) { }
+            return 1 / Math.pow(4, 3 - bounce) - 7.5625 * Math.pow((pow2 * 3 - 2) / 22 - p, 2);
+        }
+    });
+
+    $.each(baseEasings, function (name, easeIn) {
+        $.easing["easeIn" + name] = easeIn;
+        $.easing["easeOut" + name] = function (p) {
+            return 1 - easeIn(1 - p);
+        };
+        $.easing["easeInOut" + name] = function (p) {
+            return p < 0.5 ?
+                easeIn(p * 2) / 2 :
+                1 - easeIn(p * -2 + 2) / 2;
+        };
+    });
+
+})();

dashboard-ui/scripts/gamespage.js

@@ -41,7 +41,7 @@
 
             html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount);
 
-            $('#items', page).html(html).trigger('create');
+            $('#items', page).html(html).trigger('create').createPosterItemHoverMenu();
 
             $('.selectPage', page).on('change', function () {
                 query.StartIndex = (parseInt(this.value) - 1) * query.Limit;

dashboard-ui/scripts/itembynamedetailpage.js

@@ -436,7 +436,8 @@
                     shape: "portrait",
                     context: 'movies',
                     useAverageAspectRatio: true,
-                    showTitle: true
+                    showTitle: true,
+                    centerText: true
                 });
 
             }
@@ -485,7 +486,7 @@
 
             html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount);
 
-            $('#items', page).html(html).trigger('create');
+            $('#items', page).html(html).trigger('create').createPosterItemHoverMenu();
 
             $('.selectPage', page).on('change', function () {
 

dashboard-ui/scripts/itemdetailpage.js

@@ -470,6 +470,7 @@
                 useAverageAspectRatio: item.MediaType != "Game",
                 shape: item.Type == "MusicAlbum" ? "square" : "portrait",
                 showParentTitle: item.Type == "MusicAlbum",
+                centerText: item.Type != "MusicAlbum",
                 showTitle: item.Type == "MusicAlbum" || item.Type == "Game",
                 borderless: item.Type == "Game"
             });
@@ -588,7 +589,8 @@
                         items: result.Items,
                         shape: "portrait",
                         useAverageAspectRatio: true,
-                        showTitle: true
+                        showTitle: true,
+                        centerText: true
                     });
                 }
                 else if (item.Type == "Season") {
@@ -606,7 +608,8 @@
                         shape: "auto",
                         context: 'games',
                         useAverageAspectRatio: false,
-                        showTitle: true
+                        showTitle: true,
+                        centerText: true
                     });
                 }
                 else {
@@ -619,7 +622,7 @@
                     });
                 }
 
-                $('#childrenContent', page).html(html);
+                $('#childrenContent', page).html(html).createPosterItemHoverMenu();
 
             }
         });

dashboard-ui/scripts/librarybrowser.js

@@ -916,12 +916,12 @@
                     imageCssClass += " coveredPosterItemImage";
                 }
 
-                html += '<div class="posterItemOverlayTarget"></div>';
-
                 var progressHtml = LibraryBrowser.getItemProgressBarHtml(item);
 
                 html += '<div class="' + imageCssClass + '" style="' + style + '">';
 
+                html += '<div class="posterItemOverlayTarget"></div>';
+
                 if (item.LocationType == "Offline" || item.LocationType == "Virtual") {
                     if (options.showLocationTypeIndicator !== false) {
                         html += LibraryBrowser.getOfflineIndicatorHtml(item);
@@ -1503,19 +1503,25 @@
             var html = "";
 
             if (item.CommunityRating) {
-                var rating = item.CommunityRating / 2;
 
-                for (var i = 1; i <= 5; i++) {
-                    if (rating <= i - 1) {
-                        html += "<div class='starRating emptyStarRating' title='" + item.CommunityRating + "'></div>";
-                    }
-                    else if (rating < i) {
-                        html += "<div class='starRating halfStarRating' title='" + item.CommunityRating + "'></div>";
-                    }
-                    else {
                 html += "<div class='starRating' title='" + item.CommunityRating + "'></div>";
-                    }
+                html += '<div class="starRatingValue">';
-                }
+                html += item.CommunityRating.toFixed(1);
+                html += '</div>';
+                
+                //var rating = item.CommunityRating / 2;
+
+                //for (var i = 1; i <= 5; i++) {
+                //    if (rating <= i - 1) {
+                //        html += "<div class='starRating emptyStarRating' title='" + item.CommunityRating + "'></div>";
+                //    }
+                //    else if (rating < i) {
+                //        html += "<div class='starRating halfStarRating' title='" + item.CommunityRating + "'></div>";
+                //    }
+                //    else {
+                //        html += "<div class='starRating' title='" + item.CommunityRating + "'></div>";
+                //    }
+                //}
             }
 
             if (item.CriticRating != null) {
@@ -1529,6 +1535,18 @@
                 html += '<div class="criticRating">' + item.CriticRating + '%</div>';
             }
 
+            if (item.Metascore) {
+
+                if (item.Metascore >= 60) {
+                    html += '<div class="metascore metascorehigh" title="Metascore">' + item.Metascore + '</div>';
+                }
+                else if (item.Metascore >= 40) {
+                    html += '<div class="metascore metascoremid" title="Metascore">' + item.Metascore + '</div>';
+                } else {
+                    html += '<div class="metascore metascorelow" title="Metascore">' + item.Metascore + '</div>';
+                }
+            }
+
             return html;
         },
 
@@ -2594,7 +2612,7 @@
 
                 onShowTimerExpired(elem);
 
-            }, 500);
+            }, 300);
         }
 
         // https://hacks.mozilla.org/2013/04/detecting-touch-its-the-why-not-the-how/
@@ -2612,3 +2630,120 @@
 
 })(jQuery, document, window);
 
+(function ($, document, window) {
+
+    var showOverlayTimeout;
+
+    function onHoverOut() {
+
+        if (showOverlayTimeout) {
+            clearTimeout(showOverlayTimeout);
+            showOverlayTimeout = null;
+        }
+
+        $('.posterItemOverlayTarget:visible', this).each(function () {
+
+            var elem = this;
+
+            $(this).animate({ "height": "0" }, function () {
+
+                $(elem).hide();
+
+            });
+
+        });
+
+        $('.posterItemOverlayTarget:visible', this).stop().animate({ "height": "0" }, function () {
+
+            $(this).hide();
+
+        });
+    }
+    
+    function getOverlayHtml(item) {
+
+        var html = '';
+
+        html += '<div class="posterItemOverlayInner">';
+
+        html += '<div style="font-weight:bold;margin-bottom:1.5em;">';
+        html += LibraryBrowser.getPosterViewDisplayName(item, true);
+        html += '</div>';
+
+        //html += '<p class="itemMiscInfo">';
+        //html += LibraryBrowser.getMiscInfoHtml(item);
+        //html += '</p>';
+
+        //html += '<p>';
+        //html += '<span class="itemCommunityRating">';
+        //html += LibraryBrowser.getRatingHtml(item);
+        //html += '</span>';
+        //html += '</p>';
+
+        html += '<p>';
+        html += '<span class="userDataIcons">';
+        html += LibraryBrowser.getUserDataIconsHtml(item);
+        html += '</span>';
+        html += '</p>';
+
+        //html += '<p class="itemOverlayHtml">';
+        //html += (item.OverviewHtml || item.Overview || '');
+        //html += '</p>';
+
+        html += '<button type="button" data-mini="true" data-inline="true" data-icon="play" data-iconpos="notext">Play</button>';
+        html += '<button type="button" data-mini="true" data-inline="true" data-icon="video" data-iconpos="notext">Play</button>';
+        html += '<button type="button" data-mini="true" data-inline="true" data-icon="remote" data-iconpos="notext">Play</button>';
+        html += '<button type="button" data-mini="true" data-inline="true" data-icon="edit" data-iconpos="notext">Play</button>';
+
+        html += '</div>';
+
+        return html;
+    }
+
+    $.fn.createPosterItemHoverMenu = function () {
+
+        function onShowTimerExpired(elem) {
+
+            var innerElem = $('.posterItemOverlayTarget', elem);
+            var id = elem.getAttribute('data-itemid');
+
+            ApiClient.getItem(Dashboard.getCurrentUserId(), id).done(function (item) {
+
+                innerElem.html(getOverlayHtml(item)).trigger('create');
+            });
+
+            innerElem.show().each(function () {
+
+                this.style.height = 0;
+
+            }).animate({ "height": "100%" });
+        }
+
+        function onHoverIn() {
+
+            if (showOverlayTimeout) {
+                clearTimeout(showOverlayTimeout);
+                showOverlayTimeout = null;
+            }
+
+            var elem = this;
+
+            showOverlayTimeout = setTimeout(function () {
+
+                onShowTimerExpired(elem);
+
+            }, 300);
+        }
+
+        // https://hacks.mozilla.org/2013/04/detecting-touch-its-the-why-not-the-how/
+
+        if (('ontouchstart' in window) || (navigator.maxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0)) {
+            /* browser with either Touch Events of Pointer Events
+               running on touch-capable device */
+            return this;
+        }
+
+        return this.on('mouseenter', '.posterItem', onHoverIn).on('mouseleave', '.posterItem', onHoverOut);
+    };
+
+})(jQuery, document, window);

dashboard-ui/scripts/moviecollections.js

@@ -40,7 +40,7 @@
 
             html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount);
 
-            $('#items', page).html(html).trigger('create');
+            $('#items', page).html(html).trigger('create').createPosterItemHoverMenu();
 
             $('.selectPage', page).on('change', function () {
                 query.StartIndex = (parseInt(this.value) - 1) * query.Limit;

dashboard-ui/scripts/movies.js

@@ -66,7 +66,7 @@
 
             html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount);
 
-            $('#items', page).html(html).trigger('create');
+            $('#items', page).html(html).trigger('create').createPosterItemHoverMenu();
 
             $('.selectPage', page).on('change', function () {
                 query.StartIndex = (parseInt(this.value) - 1) * query.Limit;

dashboard-ui/scripts/movietrailers.js

@@ -40,7 +40,7 @@
 
             html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount);
 
-            $('#items', page).html(html).trigger('create');
+            $('#items', page).html(html).trigger('create').createPosterItemHoverMenu();
 
             $('.selectPage', page).on('change', function () {
                 query.StartIndex = (parseInt(this.value) - 1) * query.Limit;

dashboard-ui/scripts/tvshows.js

@@ -70,7 +70,7 @@
 
             html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount);
 
-            $('#items', page).html(html).trigger('create');
+            $('#items', page).html(html).trigger('create').createPosterItemHoverMenu();
 
             $('.selectPage', page).on('change', function () {
                 query.StartIndex = (parseInt(this.value) - 1) * query.Limit;

dashboard-ui/scripts/tvupcoming.js

@@ -58,7 +58,7 @@
                 showPremiereDate: true,
                 showPremiereDateIndex: true,
                 preferThumb: true
-            }));
+            })).createPosterItemHoverMenu();
         });
     });