Merge pull request #148 from nypublicradio/bkammin/WNYC-170_stream_sw…

…itcher_white_label

WNYC-170 Stream Switcher (White Label)

addon/components/molecule/sound-animation/component.js

@@ -0,0 +1,9 @@
+import Component from '@ember/component';
+import layout from './template';
+
+export default Component.extend({
+  layout,
+  classNames: ['sound-animation'],
+  classNameBindings: ['isPlaying:is-playing'],
+  isPlaying: false,
+});

addon/components/molecule/sound-animation/template.hbs

@@ -0,0 +1,7 @@
+<div class='sound-animation-bar'></div>
+<div class='sound-animation-bar'></div>
+<div class='sound-animation-bar'></div>
+<div class='sound-animation-bar'></div>
+<div class='sound-animation-bar'></div>
+<div class='sound-animation-bar'></div>
+<div class='sound-animation-bar'></div>

addon/components/molecule/up-next/component.js

@@ -0,0 +1,50 @@
+import Component from '@ember/component';
+import { computed } from '@ember/object';
+import moment from 'moment';
+import layout from './template';
+
+/**
+  Displays a given airing as the next scheduled airing. Optionally display the airing's show image.
+
+  Usage:
+  ```
+  <Organism::UpNext
+    @airing={{nowPlaying.streamSchedules}}
+    @displayImage=true
+  />
+  ```
+
+  @class up-next
+*/
+export default Component.extend({
+  layout,
+  classNames: ['up-next'],
+  MILLISECONDS_IN_HOUR: 3600000,
+  MILLISECONDS_IN_MINUTE: 60000,
+  MILLISECONDS_IN_SECOND: 1000,
+
+  /**
+  Next scheduled airing.
+
+  @argument airing
+  @type {[airing]}
+  */
+  airing: null,
+
+  time: computed('clock.second', function() {
+    if (this.airing && this.airing.startTime) {
+      let currentTime = new Date();
+      if (this.airing.startTime.getTime() - currentTime.getTime() > this.MILLISECONDS_IN_HOUR) {
+        return moment(this.airing.startTime).format('h:mm A');
+      } else if (this.airing.startTime.getTime() - currentTime.getTime() > this.MILLISECONDS_IN_MINUTE) {
+        return 'in ' + ((this.airing.startTime.getTime() - currentTime.getTime()) / this.MILLISECONDS_IN_MINUTE).toFixed(0) + ' min';
+      } else if (this.airing.startTime.getTime() - currentTime.getTime() >= 0) {
+        return 'in ' + ((this.airing.startTime.getTime() - currentTime.getTime()) / this.MILLISECONDS_IN_SECOND).toFixed(0) + ' sec';
+      } else {
+        return 'now';
+      }
+    }
+    return '';
+  })
+});
+

addon/components/molecule/up-next/template.hbs

@@ -0,0 +1,10 @@
+{{#if displayImage}}
+    <div class='up-next-image'>
+        <img
+            alt="image for {{airing.showTitle}}"
+            src={{airing.show.image.url}}>
+    </div>
+{{/if}}
+<div class='up-next-label'>up next</div>
+<div class='up-next-show-title'>{{airing.showTitle}}</div>
+<div class='up-next-time'>{{time}}</div>

addon/components/organism/stream-switcher/component.js

@@ -0,0 +1,27 @@
+import Component from '@ember/component';
+import layout from './template';
+
+/**
+  Switch between available streams.
+
+  Usage:
+  ```
+  <Organism::StreamSwitcher
+    @streams={{nowPlaying.streamSchedules}}
+  />
+  ```
+
+  @class stream-switcher
+*/
+export default Component.extend({
+  layout,
+  classNames: ['stream-switcher'],
+
+  /**
+  Available streams.
+
+  @argument streams
+  @type {[stream-schedule]}
+  */
+  streams: null,
+});

addon/components/organism/stream-switcher/stream/component.js

@@ -0,0 +1,42 @@
+import Component from '@ember/component';
+import { inject as service } from '@ember/service';
+import { get, computed } from '@ember/object';
+import layout from './template';
+
+export default Component.extend({
+  dj: service(),
+  hifi: service(),
+  layout,
+  tag: 'li',
+  classNames: ['stream-switcher-streams-stream'],
+  classNameBindings: ['isActive:is-active', 'isPlaying:is-playing', 'isLoading'],
+
+  isActive: computed('nowPlaying.slug', function() {
+    return get(this, 'nowPlaying.slug') == get(this, 'stream.slug');
+  }),
+
+  isPlaying: computed('nowPlaying.slug', 'hifi.isPlaying', function() {
+    return get(this, 'hifi.isPlaying') === true &&
+      get(this, 'nowPlaying.slug') == get(this, 'stream.slug');
+  }),
+
+  isLoading: computed('nowPlaying.slug', 'hifi.isLoading', function() {
+    return get(this, 'hifi.isLoading') &&
+      get(this, 'nowPlaying.slug') == get(this, 'stream.slug');
+  }),
+
+  click: function(event) {
+    event.target.scrollIntoView({
+      behavior: 'smooth', block: 'nearest'
+    });
+
+    if (this.nowPlaying.slug == this.stream.slug) {
+      return;
+    }
+
+    if (this.hifi.isPlaying || this.hifi.isLoading) {
+      this.hifi.pause();
+    }
+    this.nowPlaying.setStreamSchedule(this.stream.slug);
+  },
+});

addon/components/organism/stream-switcher/stream/template.hbs

@@ -0,0 +1,12 @@
+<div class='stream-switcher-streams-stream-title'>{{stream.name}}</div>
+{{molecule/sound-animation isPlaying=this.isPlaying}}
+<NyprMOnAirImage
+    @stream={{stream.stream}}
+    @show={{stream.liveAiring.show}}
+/>
+<div class='stream-switcher-streams-stream-show-title'>
+    {{stream.liveAiring.showTitle}}
+</div>
+{{#if stream.nextAiring}}
+    {{molecule/up-next airing=stream.nextAiring}}
+{{/if}}

addon/components/organism/stream-switcher/template.hbs

@@ -0,0 +1,9 @@
+<div class='stream-switcher-stations-label'>stations</div>
+{{#if (gt (dictionary-length @streams) 0)}}
+    <ul class='stream-switcher-streams'>
+        {{#each (dictionary-values @streams) as |stream|}}
+            {{organism/stream-switcher/stream stream=stream nowPlaying=nowPlaying}}
+        {{/each}}
+    </ul>
+{{/if}}
+

addon/components/organism/whats-on/schedule/component.js

@@ -17,8 +17,10 @@ export default Component.extend({
         return moment(this.airing.startTime).format('h:mm A');
       } else if (this.airing.startTime.getTime() - currentTime.getTime() > this.MILLISECONDS_IN_MINUTE) {
         return 'in ' + ((this.airing.startTime.getTime() - currentTime.getTime()) / this.MILLISECONDS_IN_MINUTE).toFixed(0) + ' min';
-      } else {
+      } else if (this.airing.startTime.getTime() - currentTime.getTime() >= 0) {
         return 'in ' + ((this.airing.startTime.getTime() - currentTime.getTime()) / this.MILLISECONDS_IN_SECOND).toFixed(0) + ' sec';
+      } else {
+        return 'now';
       }
     }
     return '';

addon/helpers/dictionary-length.js

@@ -0,0 +1,10 @@
+import { helper } from '@ember/component/helper';
+
+export function dictionaryLength(params/*, hash*/) {
+  if (!params || !params[0]) {
+    return 0;
+  }
+  return Object.keys(params[0]).length;
+}
+
+export default helper(dictionaryLength);

addon/helpers/dictionary-values.js

@@ -0,0 +1,10 @@
+import { helper } from '@ember/component/helper';
+
+export function dictionaryValues(params/*, hash*/) {
+  if (!params || !params[0]) {
+    return [];
+  }
+  return Object.values(params[0]);
+}
+
+export default helper(dictionaryValues);

app/components/molecule/sound-animation/component.js

@@ -0,0 +1 @@
+export { default } from 'nypr-design-system/components/molecule/sound-animation/component';

app/components/molecule/up-next/component.js

@@ -0,0 +1 @@
+export { default } from 'nypr-design-system/components/molecule/up-next/component';

app/components/organism/stream-switcher/component.js

@@ -0,0 +1 @@
+export { default } from 'nypr-design-system/components/organism/stream-switcher/component';

app/components/organism/stream-switcher/stream/component.js

@@ -0,0 +1 @@
+export { default } from 'nypr-design-system/components/organism/stream-switcher/stream/component';

app/helpers/dictionary-length.js

@@ -0,0 +1 @@
+export { default, dictionaryLength } from 'nypr-design-system/helpers/dictionary-length';

app/helpers/dictionary-values.js

@@ -0,0 +1 @@
+export { default, dictionaryValues } from 'nypr-design-system/helpers/dictionary-values';

app/styles/_library/_components.scss

@@ -1,2 +1,4 @@
 @import "components/button";
 @import "components/whats-on";
+@import "components/up-next";
+@import "components/stream-switcher";