Merge pull request #827 from duckduckgo/jag/kwixer

Kwixer: Ready for release.

share/spice/kwixer/buy.handlebars

@@ -0,0 +1,18 @@
+{{#if ResourceDetails2}}
+  <p>
+    <b>Starring:</b> {{{formatDetail ResourceDetails2}}}
+  </p>
+{{/if}}
+{{#if ResourceDetails}}
+  <p>
+    <b>Director:</b> {{{formatDetail ResourceDetails}}}
+  </p>
+{{/if}}
+{{#if ResourceGenre}}
+  <p>
+    <b>Genres:</b> {{{formatDetail ResourceGenre}}}
+  </p>
+{{/if}}
+<a href="https://kwixer.com/#/watching/movie/{{ResourceId}}" class="btn btn--primary">
+Reviews
+</a>

share/spice/kwixer/kwixer.css

@@ -4,33 +4,6 @@
     margin-top: 0;
 }
 
-.tile--kwixer .tile__title {
-    height: 2.5em;
-}
-
-.detail.detail--kwixer {
-    background-color: #e5e5e5;
-    border-color: #c7c7c7;
-}
-
-.detail__media.detail__media--kwixer {
-    width: 30%;
-    margin-right: 1em;
-    text-align: center;
-}
-
-.detail__body--kwixer .detail__title {
-    padding: 0;
-}
-
-.detail__body--kwixer .detail__source {
-    padding-bottom: 1em;
-}
-
-.detail__body--kwixer .detail__links__btn {
+.zci--kwixer .btn.btn--primary {
     margin-top: 1em;
-}
-
-.detail__media--kwixer .detail__media__img {
-    height: 90%;
 }

share/spice/kwixer/kwixer.js

@@ -1,79 +1,88 @@
 (function(env) {
     "use strict";
 
+    // We attach this anonymous function to the global object `env`
+    // so that it's accessible everywhere.
     env.ddg_spice_kwixer = function(api_result) {
 
+        // Check if there is anything in the `api_result` before doing anything.
         if(!api_result || !api_result.length === 0) {
             return Spice.failed('kwixer');
         }
-
-        var skip_re = new RegExp([
-            'new movies with',
-            'new movies featuring',
-            'new movies starring',
-            'new movie with',
-            'new movie featuring',
-            'new movie starring',
-            'newest movies with',
-            'newest movies featuring',
-            'newest movies starring',
-            'newest movie with',
-            'newest movie featuring',
-            'newest movie starring',
-            'new films with',
-            'new films starring',
-            'new films featuring',
-            'new film with',
-            'new film starring',
-            'new film featuring',
-            'newest films with',
-            'newest films starring',
-            'newest films featuring',
-            'newest film with',
-            'newest film starring',
-            'newest film featuring',
-            'movie with',
-            'movies with',
-            'movies starring',
-            'film with',
-            'films with',
-            'films starring',
-            'film starring',
-            'movies featuring',
-            'films featuring',
-            'movies with the',
-            ' the '
-        ].join("|"), "ig");
-
+
+        // We're going to use this to only get the actor from the original query.
+        var skip_re = new RegExp(
+            [
+             'new movies with', 
+             'new movies featuring', 
+             'new movies starring', 
+             'new movie with', 
+             'new movie featuring', 
+             'new movie starring', 
+             'newest movies with', 
+             'newest movies featuring', 
+             'newest movies starring', 
+             'newest movie with', 
+             'newest movie featuring', 
+             'newest movie starring', 
+             'new films with', 
+             'new films starring', 
+             'new films featuring', 
+             'new film with', 
+             'new film starring', 
+             'new film featuring', 
+             'newest films with', 
+             'newest films starring', 
+             'newest films featuring', 
+             'newest film with', 
+             'newest film starring', 
+             'newest film featuring', 
+             'movie with', 
+             'movies with', 
+             'movies starring', 
+             'film with', 
+             'films with', 
+             'films starring', 
+             'film starring', 
+             'movies featuring', 
+             'films featuring', 
+             'movies with the', 
+             ' the '
+            ].join("|"), "ig");
+
         var query = DDG.get_query(),
             finalArray = [],
             remainder = $.trim(query.replace(skip_re, "")),
             remainderArray = remainder.split(" ");
-
+
+        // We need to go through each item in the array
+        // and check if we got relevant results.
         for(var i = 0; i < api_result.length; i++) {
             var item = api_result[i],
                 isRelevant = false,
                 actors = item.ResourceDetails2.toLowerCase();
-
+
+            // The method for checking which actors are relevant is pretty simple,
+            // and it might need some some updating because it's too naive.
             for(var j = 0; j < remainderArray.length; j++) {
                 if(actors.indexOf(remainderArray[j]) !== -1) {
                     isRelevant = true;
                     break;
                 }
             }
 
-            if(isRelevant && item.ResourceImageUrl &&
-                    item.ResourceImageUrl.length &&
-                    (/jpe?g|png/i).test(item.ResourceImageUrl)) {
-                item.ResourceImageUrl = item.ResourceImageUrl.replace("large_", "medium_");
+            // Filter out items with bad images or with default images.
+            if(isRelevant && item.ResourceImageUrl && item.ResourceImageUrl.length && (/jpe?g|png/i).test(item.ResourceImageUrl)) {
                 finalArray.push(item);
             }
         }
-
-        if (finalArray.length === 0) {
+
+        // Check if there's anything in the `finalArray`.
+        if(finalArray.length === 0) {
             return Spice.failed('kwixer');
         }
-
+
+        // Display our Spice.
         Spice.add({
             id: 'kwixer',
             name: 'Movies',
@@ -86,22 +95,40 @@
             normalize: function(item) {
                 return {
                     image: item.ResourceImageUrl,
+                    img_m: item.ResourceImageUrl,
                     title: item.ResourceTitle,
-                    ratingText: item.ResourceYear.toString()
+                    heading: item.ResourceTitle,
+                    ratingText: item.ResourceYear,
+                    url: "https://kwixer.com/#/watching/movie/" + item.ResourceId
                 }
             },
             templates: {
+                group: 'media',
+                detail: 'products_item_detail',
                 item: 'basic_image_item',
-                detail: Spice.kwixer.kwixer_detail,
                 options: {
                     rating: false,
-                    variant: 'poster'
+                    variant: 'poster',
+                    buy: Spice.kwixer.buy
                 }
             }
         });
+
+        // We're going to use this to hide the title of the template.
+        // We want the poster to take up the whole tile.
+        Spice.getDOM('kwixer').find('.tile__body').hide();
     };
-
-    Handlebars.registerHelper("formatDetail", function(s) {
-        return s.replace(/;/g, ', ');
+
+    // The separator that we get from the API is `;`, but it looks better with
+    // commas.
+    Handlebars.registerHelper("formatDetail", function(str) {
+        var list = str.split(/;/g);
+
+        // We need to make each actor into a link, too, so that we can click on their names.
+        for(var i = 0; i < list.length; i++) {
+            list[i] = "<a href='/?q=" + encodeURIComponent(list[i]) + "'>" + list[i] + "</a>";
+        }
+
+        return list.join(", ");
     });
-}(this));
+}(this));