Countdown with Ember

components.count-down.js

import Ember from 'ember';

const minSecs = 60;
const hourSecs = 60 * minSecs;
const daySecs = 24 * hourSecs;

export default Ember.Component.extend({
  classNames: 'count-down',
  timeout: null,
  delay: null,
  
  days: 0,
  hours: 0,
  minutes: 0,
  seconds: 0,
  
  isDays: Ember.computed.gt('days', 0),
  isHours: Ember.computed.gt('hours', 0),
  isMinutes: Ember.computed.gt('minutes', 0),
  
  showDays: Ember.computed.alias('isDays'),
  showHours: Ember.computed.or('isDays', 'isHours'),
  showMinutes: Ember.computed.or('showHours', 'isMinutes'),
  
  multipleDays: Ember.computed.gt('days', 1),
  multipleHours: Ember.computed.gt('hours', 1),
  multipleMinutes: Ember.computed.gt('minutes', 1),
  multipleSeconds: Ember.computed.gt('seconds', 1),
  
  _currentTimeout: null,
  
  didInsertElement() {
    this._super(...arguments);
    
    Ember.run.next(this, () => {
      this.set('remaining', this.get('timeout'));
      this.refresh();
    });
  },
  
  willClearRender() {
    this._super(...arguments);
    let _currentTimeout = this.get('_currentTimeout');
    if (_currentTimeout) { Ember.run.cancel(currentTimeout); }
  },
  
  refresh() {
    let remaining = this.get('remaining');
    let delay = this.get('delay') || 1000;
    let step = this.get('step') || 1;
    
    let d = Math.floor(remaining / daySecs);
    let h = Math.floor((remaining - (d * daySecs)) / hourSecs);
    let m = Math.floor((remaining - (d * daySecs) - (h * hourSecs)) / minSecs);
    let s = Math.floor(remaining - (d * daySecs) - (h * hourSecs) - (m * minSecs));
    
    remaining -= step;
    
    if (remaining <= 0) {
      remaining = d = h = m = s = 0;
    }
    
    this.setProperties({
      remaining,
      days: d,
      hours: h,
      minutes: m,
      seconds: s
    });
    
    if (remaining > 0) {
    	let _currentTimeout = Ember.run.later(this, this.refresh, delay);
      this.set('currentTimeout', _currentTimeout);
    }
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

.count-down {
  margin-bottom: 10px;
  display: inline-block;
  border: 2px solid #555;
  padding: 5px 10px;
}

.count-down > .top-row {
  font-size:11px;
  color:#555
}

.count-down > .bottom-row {
  margin-top: 5px;
}

templates.application.hbs

<h2>Coutdowns with Ember</h2>

{{count-down timeout=10000}}
<br/>
{{count-down timeout=120000 delay=10 step=50}}
<br/>
{{count-down timeout=201700 delay=333}}

templates.components.count-down.hbs

<div class="top-row">
	{{remaining}} of {{timeout}} seconds remaining
</div>
<div class="bottom-row">
	{{#if remaining}}
    {{#if showDays}}
      {{days}} {{if multipleDays "days" "day"}},
    {{/if}}

    {{#if showHours}}
      {{hours}} {{if multipleHours "hours" "hour"}},
    {{/if}}

    {{#if showMinutes}}
      {{minutes}} {{if multipleMinutes "mins" "min"}},
    {{/if}}

    {{seconds}} {{if multipleSeconds "secs" "sec"}}
  {{else}}
		FINISHED!
  {{/if}}
</div>

twiddle.json

{
  "version": "0.8.0",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.5.1",
    "ember-data": "2.5.2",
    "ember-template-compiler": "2.5.1"
  }
}

Running app:
https://ember-twiddle.com/1fa7ebcc0447307c8ea48c9b6aaa5771?openFiles=templates.components.count-down.hbs%2Ctemplates.components.count-down.hbs