Skip to content

Commit

Permalink
Merge pull request #148 from nypublicradio/bkammin/WNYC-170_stream_sw…
Browse files Browse the repository at this point in the history
…itcher_white_label

WNYC-170 Stream Switcher (White Label)
  • Loading branch information
Brad Kammin authored Sep 16, 2020
2 parents 4832be4 + 59eea15 commit 0bfe30e
Show file tree
Hide file tree
Showing 27 changed files with 599 additions and 6 deletions.
9 changes: 9 additions & 0 deletions addon/components/molecule/sound-animation/component.js
Original file line number Diff line number Diff line change
@@ -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,
});
7 changes: 7 additions & 0 deletions addon/components/molecule/sound-animation/template.hbs
Original file line number Diff line number Diff line change
@@ -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>
50 changes: 50 additions & 0 deletions addon/components/molecule/up-next/component.js
Original file line number Diff line number Diff line change
@@ -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 '';
})
});

10 changes: 10 additions & 0 deletions addon/components/molecule/up-next/template.hbs
Original file line number Diff line number Diff line change
@@ -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>
27 changes: 27 additions & 0 deletions addon/components/organism/stream-switcher/component.js
Original file line number Diff line number Diff line change
@@ -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,
});
42 changes: 42 additions & 0 deletions addon/components/organism/stream-switcher/stream/component.js
Original file line number Diff line number Diff line change
@@ -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);
},
});
12 changes: 12 additions & 0 deletions addon/components/organism/stream-switcher/stream/template.hbs
Original file line number Diff line number Diff line change
@@ -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}}
9 changes: 9 additions & 0 deletions addon/components/organism/stream-switcher/template.hbs
Original file line number Diff line number Diff line change
@@ -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}}

4 changes: 3 additions & 1 deletion addon/components/organism/whats-on/schedule/component.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 '';
Expand Down
10 changes: 10 additions & 0 deletions addon/helpers/dictionary-length.js
Original file line number Diff line number Diff line change
@@ -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);
10 changes: 10 additions & 0 deletions addon/helpers/dictionary-values.js
Original file line number Diff line number Diff line change
@@ -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);
1 change: 1 addition & 0 deletions app/components/molecule/sound-animation/component.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { default } from 'nypr-design-system/components/molecule/sound-animation/component';
1 change: 1 addition & 0 deletions app/components/molecule/up-next/component.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { default } from 'nypr-design-system/components/molecule/up-next/component';
1 change: 1 addition & 0 deletions app/components/organism/stream-switcher/component.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { default } from 'nypr-design-system/components/organism/stream-switcher/component';
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { default } from 'nypr-design-system/components/organism/stream-switcher/stream/component';
1 change: 1 addition & 0 deletions app/helpers/dictionary-length.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { default, dictionaryLength } from 'nypr-design-system/helpers/dictionary-length';
1 change: 1 addition & 0 deletions app/helpers/dictionary-values.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { default, dictionaryValues } from 'nypr-design-system/helpers/dictionary-values';
2 changes: 2 additions & 0 deletions app/styles/_library/_components.scss
Original file line number Diff line number Diff line change
@@ -1,2 +1,4 @@
@import "components/button";
@import "components/whats-on";
@import "components/up-next";
@import "components/stream-switcher";
Loading

0 comments on commit 0bfe30e

Please sign in to comment.