Listen Live Chunk on wqxr series

app/channel/route.js

@@ -22,11 +22,15 @@ export default Route.extend(PlayParamMixin, {
     const listingSlug = `${inflector.pluralize(channelType)}/${params.slug}`;
     set(this, 'listingSlug', listingSlug);
 
+    let listenLive = this.store.findRecord('chunk', `shows-${params.slug}-listenlive`)
+      .catch(() => '');
+
     return this.store.find('django-page', listingSlug.replace(/\/*$/, '/')).then(page => {
       return waitFor({
         page,
         channel: page.get('wnycChannel'),
-        user: this.get('session.data.authenticated')
+        user: this.get('session.data.authenticated'),
+        listenLive
       });
     })
     .catch(e => retryFromServer(e, listingSlug.replace(/\/*$/, '/')));

app/channel/template.hbs

@@ -28,9 +28,9 @@
     {{/alt-channel-layout}}
   {{else}}
     {{#if model.channel.hasMarquee}}
-        {{x-marquee model=model.channel isStaff=session.data.isStaff adminURL=adminURL}}
+      {{x-marquee listenLive=model.listenLive.pagecontent model=model.channel isStaff=session.data.isStaff adminURL=adminURL}}
     {{else}}
-      {{channel-header model=model.channel isStaff=session.data.isStaff adminURL=adminURL}}
+      {{channel-header listenLive=model.listenLive.pagecontent model=model.channel isStaff=session.data.isStaff adminURL=adminURL}}
     {{/if}}
 
   <div class="l-constrained">

app/chunk/adapter.js

@@ -0,0 +1,8 @@
+import ApplicationAdapter from 'wqxr-web-client/adapters/application';
+
+export default ApplicationAdapter.extend({
+  buildURL() {
+    let url = this._super(...arguments);
+    return url + '/';
+  }
+});

app/components/channel-header/template.hbs

@@ -21,6 +21,9 @@
                     Produced by {{producing-orgs model.producingOrganizations}}.
                 {{/if}}    
                 {{airings}}
+                {{#if listenLive}}
+                  {{django-page page=listenLive}}
+                {{/if}}
             </div>
           </div>
         </div>

app/components/x-marquee/template.hbs

@@ -2,5 +2,5 @@
   <div class="marquee-gradient" style={{marqueeGradientCSS}}></div>
 </div>
 <div class="marquee-footer">
-  {{channel-header model=model isStaff=isStaff adminURL=adminURL}}
+  {{channel-header listenLive=listenLive model=model isStaff=isStaff adminURL=adminURL}}
 </div>

app/lib/alien-dom.js

@@ -54,10 +54,10 @@ export function removeAlienListeners() {
 // destination. This runs in the django-page model's separateScripts method as well
 // as in the django-page component's didReceiveAttrs hook if an Alien DOM is present.
 export function embeddedComponentSetup(root = document) {
-  Array.from(root.querySelectorAll('[data-ember-component]')).forEach(function (el, i) {
+  Array.from(root.querySelectorAll('[data-ember-component]')).forEach(function (el) {
     // embedded ember components require an ID that is in sync with the
     // django-page document
-    el.id = el.id || `ember-component-${i}`;
+    el.id = el.id || Ember.guidFor(el);
     el.setAttribute('data-text-content', el.textContent.trim());
     el.textContent = '';
   });

mirage/config.js

@@ -46,6 +46,7 @@ export default function() {
   this.get(`${baseUrl}/api/v3/buckets/:slug/`, 'bucket');
   this.get(`${baseUrl}/api/v3/story/detail/:id`, 'story');
   this.get(`${baseUrl}/api/v3/channel/\*id`, 'api-response');
+  this.get(`${baseUrl}/api/v3/chunks/:id/`, 'chunk');
 
   /*------------------------------------------------------------
     identity management (account) endpoints

mirage/factories/chunk.js

@@ -0,0 +1,6 @@
+import { Factory, faker } from 'ember-cli-mirage';
+
+export default Factory.extend({
+  slug: () => faker.lorem.words(2).join('-'),
+  content: faker.lorem.sentence
+});

mirage/models/chunk.js

@@ -0,0 +1,4 @@
+import { Model } from 'ember-cli-mirage';
+
+export default Model.extend({
+});

tests/acceptance/viewing-show-test.js

@@ -299,6 +299,26 @@ test('show pages with a play param', function(assert) {
 
 });
 
+test('show pages with a listen live chunk', function(assert) {
+  let show = server.create('show', {
+    id: 'shows/foo/'
+  });
+  server.create('api-response', { id: 'shows/foo/recent_stories/1' });
+
+  server.create('chunk', {
+    id: 'shows-foo-listenlive',
+    content: 'foo bar text'
+  });
+  server.create('django-page', {id: show.id});
+  djangoPage
+    .bootstrap(show)
+    .visit(show);
+
+  andThen(() => {
+    assert.equal(find('.channel-header .django-content').text().trim(), 'foo bar text');
+  });
+});
+
 moduleForAcceptance('Acceptance | Django Page | Show Page Analytics');
 
 test('metrics properly reports channel attrs', function(assert) {

tests/unit/chunk/adapter-test.js

@@ -0,0 +1,12 @@
+import { moduleFor, test } from 'ember-qunit';
+
+moduleFor('adapter:chunk', 'Unit | Adapter | chunk', {
+  // Specify the other units that are required for this test.
+  // needs: ['serializer:foo']
+});
+
+// Replace this with your real tests.
+test('it exists', function(assert) {
+  let adapter = this.subject();
+  assert.ok(adapter);
+});

tests/unit/chunk/model-test.js

@@ -0,0 +1,12 @@
+import { moduleForModel, test } from 'ember-qunit';
+
+moduleForModel('chunk', 'Unit | Model | chunk', {
+  // Specify the other units that are required for this test.
+  needs: []
+});
+
+test('it exists', function(assert) {
+  let model = this.subject();
+  // let store = this.store();
+  assert.ok(!!model);
+});

tests/unit/chunk/serializer-test.js

@@ -0,0 +1,15 @@
+import { moduleForModel, test } from 'ember-qunit';
+
+moduleForModel('chunk', 'Unit | Serializer | chunk', {
+  // Specify the other units that are required for this test.
+  needs: ['serializer:chunk']
+});
+
+// Replace this with your real tests.
+test('it serializes records', function(assert) {
+  let record = this.subject();
+
+  let serializedRecord = record.serialize();
+
+  assert.ok(serializedRecord);
+});