send Streamed Show event when show changes

app/components/persistent-player/audio-metadata/component.js

@@ -1,13 +1,26 @@
 import Component from 'ember-component';
 import { reads, or } from 'ember-computed';
+import service from 'ember-service/inject';
+import get from 'ember-metal/get';
 
 export default Component.extend({
+  // TODO: would like to inject an audio-analytics service here
+  audio:          service(),
+
   tagName:        '',
   story:          or('currentAudio.currentStory', 'currentAudio'),
   show:           reads('currentAudio.headers.brand'),
   catalogEntry:   reads('currentAudio.currentPlaylistItem.catalogEntry'),
-  showTitle:      or('show.title', 'currentAudio.currentShow.showTitle'),
   showUrl:        or('show.url', 'currentAudio.currentShow.showUrl'),
   storyTitle:     or('currentAudio.title', 'currentAudio.currentShow.episodeTitle'),
-  storyUrl:       or('currentAudio.url', 'currentAudio.currentShow.episodeUrl')
+  storyUrl:       or('currentAudio.url', 'currentAudio.currentShow.episodeUrl'),
+
+  didReceiveAttrs({oldAttrs, newAttrs}) {
+    this._super(...arguments);
+    let currentAudio = this.get('currentAudio');
+    if (!currentAudio || get(currentAudio, 'audioType') !== 'stream') { return; }
+    if (oldAttrs.showTitle === newAttrs.showTitle) { return; }
+
+    this.get('audio').trackStreamData(currentAudio);
+  }
 });

app/components/persistent-player/center/template.hbs

@@ -1,6 +1,9 @@
 <div class="persistent-playerinfoline">
   {{#text-crawl watch=currentAudio}}
-    {{persistent-player.audio-metadata currentAudio=currentAudio}}
+    {{! trigger didReceiveAttrs when showTitle updates }}
+    {{persistent-player.audio-metadata
+      currentAudio=currentAudio
+      showTitle=(or currentAudio.headers.brand.title currentAudio.currentShow.showTitle)}}
   {{/text-crawl}}
   {{#if currentAudio.shareMetadata}}
     {{share-button

app/services/audio.js

@@ -35,7 +35,7 @@ export default Service.extend({
   volume:           alias('hifi.volume'),
 
   // TODO: fix up currentStory/currentAudio interfaces for streams and on demands
-  currentStory:     or('currentAudio.story', 'currentAudio'),
+  currentStory:         or('currentAudio.story', 'currentAudio'),
 
   currentAudio:     null,
   currentContext:   null,
@@ -335,7 +335,6 @@ export default Service.extend({
   },
 
   /* ANALYTICS AND LISTEN ACTIONS -------------------------------------------------------*/
-
   addToHistory(story) {
     this.get('listens').addListen(story);
   },
@@ -351,7 +350,7 @@ export default Service.extend({
   sendPauseListenAction(pk) {
     this.get('listenActions').sendPause(pk, PLATFORM, get(this, 'position'));
   },
-
+  
   _trackPlayerEvent(options) {
     let metrics        = get(this, 'metrics');
     let {action, label, withRegion, region, withAnalytics} = options;
@@ -453,16 +452,6 @@ export default Service.extend({
       label: `Streaming_${streamName}`
     });
 
-    RSVP.Promise.resolve(get(stream, 'story')).then(story => {
-      if (story) {
-        this._trackPlayerEvent({
-          action: `Streamed Story "${get(story, 'title')}" on "${streamName}"`,
-          withAnalytics: true,
-          story
-        });
-      }
-    });
-
     if (wasStream) {
       this._trackPlayerEvent({
         action: 'Switched Stream to Stream',
@@ -538,6 +527,30 @@ export default Service.extend({
 
     this.sendCompleteListenAction(story.id);
   },
+
+  // TODO: would like to move this and the rest of the above
+  // into an audio analytics service
+  trackStreamData(stream) {
+    let showTitle = get(stream, 'currentShow.show_title') || get(stream, 'currentShow.title');
+    let streamName = get(stream, 'name');
+
+    RSVP.Promise.resolve(get(stream, 'story')).then(story => {
+      let storyTitle = story ? get(story, 'title') : 'no title';
+
+      this._trackPlayerEvent({
+        action: `Streamed Show "${showTitle}" on ${streamName}`,
+        label: storyTitle
+      });
+
+      if (story) {
+        this._trackPlayerEvent({
+          action: `Streamed Story "${storyTitle}" on "${streamName}"`,
+          withAnalytics: true,
+          story
+        });
+      }
+    });
+  },
 
   /* HELPERS -------------------------------------------------------*/
 
@@ -604,6 +617,5 @@ export default Service.extend({
     } else {
       return upperCamelize(context);
     }
-  }
-
+  },
 });

app/stream/serializer.js

@@ -76,7 +76,7 @@ export default DS.JSONAPISerializer.extend({
       }
       if (current_show.episode_pk) {
         relationships = relationships || {};
-        relationships.currentStory = {
+        relationships['current-story'] = {
           data: {
             type: 'story',
             id: current_show.episode_pk

tests/integration/components/audio-metadata/component-test.js

@@ -20,7 +20,7 @@ test('it displays ondemand story metadata', function(assert) {
     title: 'The Story'
   };
   this.set('currentAudio', onDemandStory);
-  this.render(hbs`{{persistent-player.audio-metadata currentAudio=currentAudio media=media}}`);
+  this.render(hbs`{{persistent-player.audio-metadata currentAudio=currentAudio showTitle=currentAudio.headers.brand.title media=media}}`);
 
   const expected = 'The Show - The Story';
   const actual = this.$().text().trim().replace(/\s+/g,' ');
@@ -35,7 +35,7 @@ test('it reverses metadata order on small screens', function(assert) {
     title: 'The Story'
   };
   this.set('currentAudio', onDemandStory);
-  this.render(hbs`{{persistent-player.audio-metadata currentAudio=currentAudio media=media}}`);
+  this.render(hbs`{{persistent-player.audio-metadata currentAudio=currentAudio showTitle=currentAudio.headers.brand.title media=media}}`);
 
   const expected = 'The Story - The Show';
   const actual = this.$().text().trim().replace(/\s+/g,' ');
@@ -52,7 +52,7 @@ test('it displays stream story metadata correctly', function(assert) {
     }
   };
   this.set('currentAudio', streamShow);
-  this.render(hbs`{{persistent-player.audio-metadata currentAudio=currentAudio media=media}}`);
+  this.render(hbs`{{persistent-player.audio-metadata currentAudio=currentAudio showTitle=(or currentAudio.headers.brand.title currentAudio.currentShow.showTitle) media=media}}`);
 
   const expected = 'The Show - The Episode';
   const actual = this.$().text().trim().replace(/\s+/g,' ');
@@ -82,7 +82,7 @@ test('it displays stream song metadata correctly', function(assert) {
     }
   };
   this.set('currentAudio', streamSong);
-  this.render(hbs`{{persistent-player.audio-metadata currentAudio=currentAudio media=media}}`);
+  this.render(hbs`{{persistent-player.audio-metadata currentAudio=currentAudio showTitle=(or currentAudio.headers.brand.title currentAudio.currentShow.showTitle) media=media}}`);
 
   const expected = 'The Song Show - title, composer, musician (instrument)';
   const actual = this.$().text().trim().replace(/\s+/g,' ');
@@ -97,7 +97,7 @@ test('it renders html tags in metadata', function(assert) {
     title: 'The <strong>Big</strong> Story'
   };
   this.set('currentAudio', onDemandStory);
-  this.render(hbs`{{persistent-player.audio-metadata currentAudio=currentAudio media=media}}`);
+  this.render(hbs`{{persistent-player.audio-metadata currentAudio=currentAudio showTitle=(or currentAudio.headers.brand.title currentAudio.currentShow.showTitle) media=media}}`);
 
   const expected = 'The New Show - The Big Story';
   const actual = this.$().text().trim().replace(/\s+/g,' ');