add channel lazy image, closes #165

Author: Duke

app/components/channel-lazy-image.js

@@ -0,0 +1,49 @@
+import Ember from 'ember';
+
+const { computed, isEmpty } = Ember;
+
+const IMAGE_HOST = 'https://images$x$.uhura.io';
+const DEFAULT_IMAGE = '/assets/channel-placeholder.png';
+
+export default Ember.Component.extend({
+  tagName: 'img',
+  classNames: ['channel-img'],
+  attributeBindings: 'src',
+  imageURL: false,
+
+  src: computed('imageURL', function() {
+    return this.get('imageURL') || DEFAULT_IMAGE;
+  }),
+
+  didInsertElement() {
+    const that = this;
+    let image = new Image();
+    image.src = this.get('cachedImageSource');
+    image.onload = function() {
+      if (typeof this.naturalWidth !== 'undefined' && this.naturalWidth !== 0) {
+        Ember.run(() => {
+          if (!that.get('isDestroyed')) {
+            that.set('imageURL', this.src);
+          }
+        });
+      }
+    };
+  },
+
+  cachedImageSource: computed('channel.imageURL', 'channel.image_url', function() {
+    const imageURL = this.get('channel.imageURL') || this.get('channel.image_url');
+
+    if (isEmpty(imageURL)) {
+      return DEFAULT_IMAGE;
+    }
+
+    const isCached = imageURL.indexOf('.uhura.io') !== -1;
+    if (isCached) {
+      return imageURL;
+    }
+
+    const hostIndex = Math.floor(Math.random() * (2 - 1 + 1)) + 1;
+    const imageHost = IMAGE_HOST.replace('$x$', hostIndex);
+    return `${imageHost}/resolve?url=${imageURL}`;
+  })
+});

app/mixins/models/channel.js

@@ -2,9 +2,6 @@ import DS from 'ember-data';
 import Ember from 'ember';
 
 let { computed } = Ember;
-
-const IMAGE_HOST = 'https://images$x$.uhura.io';
-
 export default Ember.Mixin.create({
   title: DS.attr('string'),
   image_url: DS.attr('string'),
@@ -27,31 +24,5 @@ export default Ember.Mixin.create({
       shortDescription += '...';
     }
     return shortDescription;
-  }),
-  imageURL: computed('image_url', function() {
-    const that = this;
-    let image = new Image();
-    image.src = this._realImageUrl();
-    image.onload = function() {
-      if (typeof this.naturalWidth !== 'undefined' && this.naturalWidth !== 0) {
-        Ember.run(() => {
-          if (!that.isDestroyed) {
-            that.set('imageURL', this.src);
-          }
-        });
-      }
-    };
-
-    return '/assets/channel-placeholder.png';
-  }),
-
-  _realImageUrl() {
-    let url = this.get('image_url');
-    if (url !== '' && url.indexOf('.uhura.io') === -1) {
-      const imageHostIndex = Math.floor(Math.random() * (2 - 1 + 1)) + 1;
-      const imageHost = IMAGE_HOST.replace('$x$', imageHostIndex);
-      return `${imageHost}/resolve?url=${this.get('image_url')}`;
-    }
-    return url;
-  }
+  })
 });

app/routes/home.js

@@ -8,19 +8,11 @@ export default Ember.Route.extend({
 
   model() {
     return hash({
-      channels: this.get('client').request('', 'top', 'channels').then(this.fixImageURL),
+      channels: this.get('client').request('', 'top', 'channels').then((data) => data.channels),
       episodes: this.buildEpisodes()
     });
   },
 
-  fixImageURL(data) {
-    const { channels } = data;
-    return channels.map((channel) => {
-      channel.imageURL = channel.image_url;
-      return channel;
-    });
-  },
-
   buildEpisodes() {
     return [
       {

app/templates/components/categories-list.hbs

@@ -8,7 +8,7 @@
         {{#each category.sixChannels as |channel|}}
           <li class="category-channel mdl-cell mdl-cell--4-col">
             {{#link-to 'channel' channel.id}}
-              <img src={{channel.imageURL}} />
+              {{channel-lazy-image channel=channel}}
             {{/link-to}}
           </li>
         {{/each}}

app/templates/components/channel-card.hbs

@@ -1,12 +1,12 @@
 <div id="channel-{{channel.id}}">
   <div class="channel-img__contaniner mdl-shadow--2dp">
-    <img class="channel-img" data-channel-image-id={{channel.id}} src={{channel.imageURL}} />
+    {{channel-lazy-image channel=channel}}
   </div>
   <h4>{{channel.title}}</h4>
 </div>
 
 <div class="channel-card__info mdl-shadow--2dp" for="channel-{{channel.id}}">
-  <img class="channel-img" data-channel-image-id={{channel.id}} src={{channel.imageURL}} />
+  {{channel-lazy-image channel=channel}}
   <h5>{{channel.title}}</h5>
   {{#link-to 'channel' channel.id class="mdl-button mdl-js-button
   mdl-js-ripple-effect mdl-button--colored"}}Open{{/link-to}}

app/templates/components/channel-lazy-image.hbs

@@ -0,0 +1 @@
+{{yield}}

tests/integration/components/channel-lazy-image-test.js

@@ -0,0 +1,11 @@
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+
+moduleForComponent('channel-lazy-image', 'Integration | Component | channel lazy image', {
+  integration: true
+});
+
+test('it renders', function(assert) {
+  this.render(hbs`{{channel-lazy-image }}`);
+  assert.equal(this.$('img').attr('src'), '/assets/channel-placeholder.png');
+});