Firehose

.ember-cli

@@ -1,6 +1,6 @@
 {
   "port": 4200,
-  "proxy": "http://localhost:8000",
+  "proxy": "http://avalonstar.tv",
 
   /**
     Ember CLI sends analytics information by default. The data is completely

app/adapters/event.js

@@ -0,0 +1,8 @@
+import Ember from 'ember';
+import FirebaseAdapter from 'emberfire/adapters/firebase';
+
+const { inject } = Ember;
+
+export default FirebaseAdapter.extend({
+  firebase: inject.service()
+});

app/components/event-ticker-item.js

@@ -0,0 +1,35 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+  classNames: ['ticker-item', 'ticker-item--hidden'],
+  // classNames: ['ticker-item'],
+  tagName: ['li'],
+
+  // Attribute Bindings
+  attributeBindings: ['type:data-event'],
+  type: Ember.computed.alias('event.event'),
+
+  didInsertElement() {
+    // A new event here should reset the idle timer of the parent.
+    this.get('parentView').send('resetTimer');
+
+    //
+    this.$().removeClass('ticker-item--hidden');
+
+    // Store the width of the element in a `data-width` attribute.
+    this.$().attr('data-width', this.$().width());
+
+    // If there's a tip, mark it as visible for 10 seconds.
+    let tickerMessage = this.$('.ticker__message');
+    let toggleClass = 'ticker__message--hidden';
+
+    tickerMessage.removeClass(toggleClass);
+    Ember.run.later((function() {
+      tickerMessage.addClass(toggleClass);
+    }), 5000);
+  },
+
+  eventIsTip: function() {
+    return this.get('event.event') === 'tip';
+  }.property('person')
+});

app/components/event-ticker.js

@@ -0,0 +1,41 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend(Ember.PromiseProxyMixin, {
+  classNameBindings: ['isHidden:ticker-list--hidden'],
+  classNames: ['ticker-list'],
+  tagName: ['ol'],
+
+  init() {
+    this._super();
+    let promise = this.get('store').query('event', {
+      orderBy: 'timestamp',
+    });
+    if (promise) {
+      return this.set('promise', promise);
+    }
+  },
+
+  // Logic related to the toggling of the ticker list. `delay` is used to run
+  // a timer that is destroyed and recreated every time a new event is added.
+  isHidden: true, // Is the ticker currently hidden?
+  delay: 1000 * 60 * 5, // 5 minutes.
+
+  _timerExpired() {
+    this.set('isHidden', true);
+  },
+  setupTimer() {
+    this._timer = Ember.run.later(this, this._timerExpired, this.get('delay'));
+    this.set('isHidden', false);
+  },
+  removeTimer() {
+    Ember.run.cancel(this._timer);
+    delete this._timer;
+  },
+
+  actions: {
+    resetTimer() {
+      this.removeTimer();
+      this.setupTimer();
+    }
+  }
+});

app/models/event.js

@@ -0,0 +1,13 @@
+import DS from 'ember-data';
+
+export default DS.Model.extend({
+  event: DS.attr('string'),
+  username: DS.attr('string'),
+
+  // Substreak specific.
+  length: DS.attr('number'),
+
+  // Tip specific.
+  message: DS.attr('string'),
+  amount: DS.attr('string')
+});

app/router.js

@@ -12,8 +12,10 @@ Router.map(function() {
   // Overlays.
   this.route('discussion', {path: 'overlay/discussion'});
   this.route('gaming', {path: 'overlay/gaming'});
-  this.route('notifier', {path: 'overlay/notifier'});
   this.route('prologue', {path: 'overlay/prologue'});
+
+  this.route('ticker', {path: 'overlay/ticker'});
+  this.route('notifier', {path: 'overlay/notifier'});
 });
 
 export default Router;

app/routes/gaming.coffee

@@ -8,5 +8,6 @@ GamingRoute = Ember.Route.extend
       hosts: @store.findAll 'host'
       raids: @store.findAll('raid').then (items) ->
         items.get('firstObject')
+      firehose: @store.findAll('event')
 
 `export default GamingRoute`

app/routes/ticker.js

@@ -0,0 +1,7 @@
+import Ember from 'ember';
+
+export default Ember.Route.extend({
+  model() {
+    return this.store.findAll('event');
+  }
+});

app/styles/app.scss

@@ -6,6 +6,7 @@
 // Components.
 @import "components/chat-message";
 @import "components/event-notifier";
+@import "components/event-ticker";
 @import "components/broadcast-informer";
 
 // Routes.

app/styles/components/_event-notifier.scss

@@ -130,8 +130,8 @@
 // Event-based state changes.
 .notifier__container {
   &[data-type="donation"] {
-    .event-timer { background-color: $event-donation; }
-    .event__type { color: $event-donation; }
+    .event-timer { background-color: $event-tip; }
+    .event__type { color: $event-tip; }
   }
   &[data-type="host"] {
     .event-timer { background-color: $event-host; }

app/styles/components/_event-ticker.scss

@@ -0,0 +1,131 @@
+.event-ticker {
+  display: flex; align-items: flex-end;
+  width: 1280px; height: 240px;
+
+  color: white;
+  font-family: "Gotham SSm A", "Gotham SSm B";
+}
+
+.ticker-list {
+  display: flex; flex-direction: row-reverse; justify-content: flex-end;
+  position: relative; bottom: 0;
+
+  background-color: #1f1f1f;
+  white-space: nowrap;
+
+  transition: all 500ms ease;
+}
+.ticker-list--hidden {
+  bottom: -26px;
+  opacity: 0.0;
+}
+
+// .ticker-item serves as the container to the current event, as it's width
+// is assigned as `data-width` upon instantiation.
+.ticker-item {
+  flex: none;
+  position: relative;
+  margin: 0 1px;
+
+  transition: all 500ms ease;
+
+  // box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+
+  /*
+  &:before {
+    // Circle.
+    content: '';
+    position: absolute; bottom: -8px; left: 0;
+
+    width: 6px; height: 6px;
+    border-radius: 50%;
+    background-color: #000;
+  }
+  &:after {
+    // Timeline.
+    content: '';
+    position: absolute; right: 4px; bottom: -6px; left: 10px;
+
+    height: 1px;
+    background-color: #000;
+  }
+  */
+}
+
+.ticker-item--hidden {
+  .ticker-wrapper { opacity: 0.0; width: 1px; }
+}
+
+// .ticket-wrapper is animatable.
+.ticker-wrapper {
+  display: inline-flex;
+  width: 100%;
+  padding: 0 8px;
+
+  background-color: #1f1f1f;
+  border-bottom: 2px solid white;
+}
+
+.ticker__piece {
+}
+.ticker__type {
+  font-size: 14px;
+  text-transform: uppercase;
+  padding: 6px 0px 6px;
+}
+.ticker__actor {
+  font-weight: 500;
+  font-size: 14px;
+  padding: 6px 8px;
+  padding-right: 0px;
+}
+
+.ticker__message {
+  position: absolute; bottom: 46px; left: 0;
+  width: 110%;
+  padding: 12px;
+
+  background: #1f1f1f;
+  color: #fff;
+  font-size: 14px;
+  line-height: 18px;
+  white-space: normal;
+
+  // box-shadow: 0 5px 5px 0 rgba(0,0,0,0.1), 0 2px 3px 0 rgba(0,0,0,0.2);
+
+  transition: 500ms all ease;
+
+  &:after {
+    content: '';
+    position: absolute; bottom: -10px; left: 0;
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 10px 10px 0 0;
+    border-color: #1f1f1f transparent transparent transparent;
+  }
+}
+
+.ticker__message--hidden {
+  bottom: 56px;
+  opacity: 0.0;
+}
+
+// Event type customization.
+$events:
+  (host $event-host)
+  (raid $event-raid)
+  (subscription $event-subscription)
+  (substreak $event-substreak)
+  (tip $event-tip);
+@each $e in $events {
+  [data-event="#{nth($e, 1)}"] {
+    .ticker-wrapper { border-color: nth($e, 2); }
+    .ticker__type { color: nth($e, 2); }
+  }
+}
+
+[data-event="follow"] {
+  .ticker-wrapper { border-color: #000; }
+  .ticker__type { color: #666; }
+}

app/styles/routes/_gaming.scss

@@ -13,8 +13,7 @@
 .overlay--main {
   // background-image: url('http://s3-ap-southeast-2.amazonaws.com/ag.images/Thumbnails/Articles/MegaMan/MegaMan3Image.jpg')
   // background-image: url('http://i.kinja-img.com/gawker-media/image/upload/isyb6kcwv6h5yth7xelb.jpg');
-  background-image: url('http://i.ytimg.com/vi/8vc655oD3i8/maxresdefault.jpg');
-
+  // background-image: url('http://i.ytimg.com/vi/8vc655oD3i8/maxresdefault.jpg');
 }
 
 .overlay--game {

app/styles/structure/_color.scss

@@ -1,4 +1,4 @@
-$event-donation: #2ecc71;
+$event-tip: #2ecc71;
 $event-host: #9b59b6;
 $event-subscription: #3498db;
 $event-resubscription: #3498db;

app/templates/components/event-ticker-item.hbs

@@ -0,0 +1,10 @@
+<div class="ticker-wrapper">
+  {{#if eventIsTip}}
+  <span class="ticker__piece ticker__type"><strong>${{event.amount}}</strong> {{event.event}}</span>
+  <span class="ticker__piece ticker__actor">{{event.username}}</span>
+  <div class="ticker__message ticker__message--hidden">{{event.message}}</div>
+  {{else}}
+  <span class="ticker__piece ticker__type">{{event.event}}{{#if event.length}} x{{event.length}}{{/if}}</span>
+  <span class="ticker__piece ticker__actor">{{event.username}}</span>
+  {{/if}}
+</div>

app/templates/components/event-ticker.hbs

@@ -0,0 +1,7 @@
+{{#if isPending}}
+{{!-- Work on a pending state... not that we need one. --}}
+{{else}}
+{{#each promise._result as |event|}}
+  {{event-ticker-item event=event}}
+{{/each}}
+{{/if}}

app/templates/ticker.hbs

@@ -0,0 +1,3 @@
+<div class="event-ticker">
+  {{event-ticker store=store}}
+</div>

tests/integration/components/event-ticker-item-test.js

@@ -0,0 +1,26 @@
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+
+moduleForComponent('event-ticker-item', 'Integration | Component | event ticker', {
+  integration: true
+});
+
+test('it renders', function(assert) {
+  assert.expect(2);
+
+  // Set any properties with this.set('myProperty', 'value');
+  // Handle any actions with this.on('myAction', function(val) { ... });
+
+  this.render(hbs`{{event-ticker-item}}`);
+
+  assert.equal(this.$().text().trim(), '');
+
+  // Template block usage:
+  this.render(hbs`
+    {{#event-ticker-item}}
+      template block text
+    {{/event-ticker-item}}
+  `);
+
+  assert.equal(this.$().text().trim(), 'template block text');
+});

tests/integration/components/event-ticker-test.js

@@ -0,0 +1,26 @@
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+
+moduleForComponent('event-ticker', 'Integration | Component | event ticker', {
+  integration: true
+});
+
+test('it renders', function(assert) {
+  assert.expect(2);
+
+  // Set any properties with this.set('myProperty', 'value');
+  // Handle any actions with this.on('myAction', function(val) { ... });
+
+  this.render(hbs`{{event-ticker}}`);
+
+  assert.equal(this.$().text().trim(), '');
+
+  // Template block usage:
+  this.render(hbs`
+    {{#event-ticker}}
+      template block text
+    {{/event-ticker}}
+  `);
+
+  assert.equal(this.$().text().trim(), 'template block text');
+});

tests/unit/models/event-test.js

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