Merge pull request #45 from jostw/josyeh/Marketplace/master/Bug1244001

Bug 1244001 - [TV][2.5][Web Apps] Sometimes the suggested flag will be cut

src/media/css/app-preview.styl

@@ -17,77 +17,72 @@ $app-preview-background-color = #72C9B0;
 
     background-color: $app-preview-background-color;
     background-image: url('../img/Pattern_overlay.png');
+}
 
-    .suggested {
-        position: absolute;
-        top: 1.6rem;
-        left: 0;
-
-        padding: 0 .5rem 0 1rem;
-
-        font-size: 1.9rem;
-        font-style: italic;
-        line-height: 4.2rem;
+.app-preview-suggested {
+    position: absolute;
+    top: 1.6rem;
+    left: 0;
 
-        color: $greyscale-white;
-        background: linear-gradient(90deg,
-                                    $suggested-star-color,
-                                    $suggested-flag-color);
+    padding: 0 .5rem 0 1rem;
 
-        &::before {
-            float: left;
-            margin-right: .5rem;
+    font-size: 1.9rem;
+    font-style: italic;
+    line-height: 4.2rem;
 
-            font-size: 4.2rem;
-        }
+    color: $greyscale-white;
+    background: linear-gradient(90deg,
+                                $suggested-star-color,
+                                $suggested-flag-color);
 
-        &::after {
-            content: '';
+    &::before {
+        float: left;
+        margin-right: .5rem;
 
-            position: absolute;
-            top: 0;
-            right: -4rem;
+        font-size: 4.2rem;
+    }
 
-            width: 4rem;
-            height: 4.2rem;
+    .flag {
+        position: absolute;
+        top: 0;
+        right: -4rem;
 
-            background-image: url('../img/flag_R.png');
-        }
-    }
+        width: 4rem;
+        height: 4.2rem;
 
-    .preview,
-    .detail {
-        height: 100%;
+        background-image: url('../img/flag_R.png');
     }
+}
 
-    .preview {
-        float: right;
-        width: 57.5rem;
+.app-preview-image {
+    float: right;
+    width: 57.5rem;
+    height: 100%;
 
-        border-radius: .6rem;
-        overflow: hidden;
+    border-radius: .6rem;
+    overflow: hidden;
 
-        color: transparent;
+    color: transparent;
 
-        transition: opacity 1s;
+    transition: opacity 1s;
 
-        &.invisible {
-            opacity: 0;
-        }
+    &.invisible {
+        opacity: 0;
     }
 
     img {
         width: 100%;
     }
+}
 
-    .detail {
-        position: relative;
+.app-preview-detail {
+    position: relative;
 
-        width: 89rem;
-        padding-top: 1rem;
+    width: 89rem;
+    height: 100%;
+    padding-top: 1rem;
 
-        color: $greyscale-white;
-    }
+    color: $greyscale-white;
 
     .name,
     .provider {

src/media/js/image_helper.js

@@ -0,0 +1,28 @@
+define('image_helper', ['core/defer'], function(defer) {
+    function getBackgroundImageURL($element) {
+        return $element.css('background-image')
+                       .replace(/url\(['"]?(.*?)['"]?\)/i, '$1');
+    }
+
+    function loadImage(src) {
+        var image = document.createElement('img');
+        var def = defer.Deferred();
+
+        image.src = src;
+
+        image.onload = function() {
+            def.resolve();
+        };
+
+        image.onerror = function() {
+            def.reject();
+        };
+
+        return def.promise();
+    }
+
+    return {
+        getBackgroundImageURL: getBackgroundImageURL,
+        loadImage: loadImage
+    };
+});

src/media/js/views/homepage.js

@@ -1,8 +1,8 @@
 define('views/homepage',
     ['apps', 'core/capabilities', 'core/l10n', 'core/models', 'core/z',
-     'templates', 'image_loader', 'smart_button', 'spatial_navigation'],
+     'templates', 'image_helper', 'smart_button', 'spatial_navigation'],
     function(apps, caps, l10n, models, z,
-             nunjucks, imageLoader, smartButton, SpatialNavigation) {
+             nunjucks, imageHelper, smartButton, SpatialNavigation) {
     var gettext = l10n.gettext;
     var appsModel = models('apps');
 
@@ -79,6 +79,7 @@ define('views/homepage',
         var focusedApp = appsModel.lookup(this.dataset.id);
         var focusedManifestURL = focusedApp.manifest_url;
 
+        var $appPreviewSuggested;
         var $appPreviewName;
 
         var appPreviewNameOverflowLength;
@@ -99,15 +100,14 @@ define('views/homepage',
                     $appContextMenuItem.attr({
                         label: gettext('Add to Apps'),
                         icon: (function() {
-                            var path = ['media', 'marketplace-tv-front-end',
-                                        'img', 'install.png'];
-
                             // The path of installed icon is different from server.
-                            //
+
                             // On marketplace server:
                             // `media/marketplace-tv-front-end/img/install.png`
-                            //
-                            // On local server or github page:
+                            var path = ['media', 'marketplace-tv-front-end',
+                                        'img', 'install.png'];
+
+                            // On github page:
                             // `marketplace-tv-front-end/media/img/install.png`
                             if (!location.origin.match(/marketplace/)) {
                                 var tempPath = path[0];
@@ -116,6 +116,12 @@ define('views/homepage',
                                 path[1] = tempPath;
                             }
 
+                            // On local server:
+                            // `/media/img/install.png`
+                            if (location.origin.match(/localhost/)) {
+                                path[0] = '';
+                            }
+
                             return path.join('/');
                         })()
                     });
@@ -139,9 +145,22 @@ define('views/homepage',
             })
         );
 
-        $appPreviewName = $appPreview.find('.name');
+        // Ensure suggested flag image is loaded.
+        if (focusedApp.tv_featured) {
+            $appPreviewSuggested = $appPreview.find('.app-preview-suggested');
+
+            imageHelper.loadImage(
+                imageHelper.getBackgroundImageURL(
+                    $appPreviewSuggested.find('.flag')
+                )
+            ).done(function() {
+                $appPreviewSuggested.removeClass('hidden');
+            });
+        }
 
         // Set app preview area name's text carousel.
+        $appPreviewName = $appPreview.find('.name');
+
         appPreviewNameOverflowLength =
             $appPreviewName.width() - $appPreview.find('.text').width();
 
@@ -202,8 +221,8 @@ define('views/homepage',
 
         $appPreview.find('.price').removeClass('hidden');
 
-        imageLoader.getImage(focusedApp.promo_imgs['640']).done(function() {
-            $appPreview.find('.preview').removeClass('invisible');
+        imageHelper.loadImage(focusedApp.promo_imgs['640']).done(function() {
+            $appPreview.find('.app-preview-image').removeClass('invisible');
         });
     });
 

src/media/js/views/tutorial.js

@@ -1,15 +1,13 @@
 define('views/tutorial',
-    ['core/l10n', 'core/z', 'image_loader', 'smart_button', 'spatial_navigation'],
-    function(l10n, z, imageLoader, smartButton, SpatialNavigation) {
+    ['core/l10n', 'core/z', 'image_helper', 'smart_button', 'spatial_navigation'],
+    function(l10n, z, imageHelper, smartButton, SpatialNavigation) {
     var gettext = l10n.gettext;
 
     // Ensure background image is loaded.
     function loadBackgroundImage($slide, callback) {
-        var imageSrc = $slide.find('.slide-image')
-                             .css('background-image')
-                             .replace(/url\(['"]?(.*?)['"]?\)/i, '$1');
-
-        var imagePromise = imageLoader.getImage(imageSrc);
+        var imagePromise = imageHelper.loadImage(
+            imageHelper.getBackgroundImageURL($slide.find('.slide-image'))
+        );
 
         imagePromise.done(function() {
             $slide.removeClass('invisible');

src/templates/_includes/app_preview.html

@@ -1,8 +1,11 @@
 {% if app.tv_featured %}
-  <span class="suggested" data-icon="bookmark-on">{{ _('Suggested') }}</span>
+  <div class="app-preview-suggested hidden" data-icon="bookmark-on">
+    <span>{{ _('Suggested') }}</span>
+    <span class="flag"></span>
+  </div>
 {% endif %}
 
-<div class="preview invisible">
+<div class="app-preview-image invisible">
   {% if app.promo_imgs['640'] %}
     <img src="{{ app.promo_imgs['640'] }}"
          alt="{{ app.name }}" title="{{ app.name }}">
@@ -12,15 +15,17 @@
   {% endif %}
 </div>
 
-<div class="detail">
+<div class="app-preview-detail">
   <h1 class="name">
     <span class="text">{{ app.name }}</span>
   </h1>
+
   <div class="provider">
     {% if app.developer_name %}
       <span>{{ _('by {author}')|format(author=app.developer_name) }}</span>
     {% endif %}
   </div>
+
   <span class="price hidden">{{ _('Free') }}</span>
   <article class="description">{{ app.description | safe }}</article>
 </div>