Updating from backend

app/components/player-controls.js

@@ -0,0 +1,11 @@
+import Component from '@ember/component';
+import { inject } from '@ember/service';
+import { computed } from '@ember/object';
+
+export default Component.extend({
+  player: inject(),
+
+  remaining: computed('player.position', 'player.duration', function() {
+    return this.get('player.duration') - this.get('player.position');
+  })
+});

app/helpers/format-seconds.js

@@ -0,0 +1,16 @@
+import { helper } from '@ember/component/helper';
+
+Number.prototype.pad = function(size) {
+    var s = String(this);
+    while (s.length < (size || 2)) {s = "0" + s;}
+    return s;
+}
+
+export function formatSeconds(raw/*, hash*/) {
+  let minutes = Math.floor(raw / 60);
+  let seconds = Math.floor(raw % 60);
+  let tenths = Math.floor((raw % 1) * 10);
+  return `${minutes.pad(2)}:${seconds.pad(2)}.${tenths}`;
+}
+
+export default helper(formatSeconds);

app/routes/index.js

@@ -0,0 +1,4 @@
+import Route from '@ember/routing/route';
+
+export default Route.extend({
+});

app/services/player.js

@@ -0,0 +1,32 @@
+import Service from '@ember/service';
+import { inject } from '@ember/service';
+import { later } from '@ember/runloop';
+
+export default Service.extend({
+  ajax: inject(),
+  status: 'unknown',
+  source: null,
+  position: null,
+  duration: null,
+  volume: null,
+
+  update() {
+    this.get('ajax').request('http://loupi1:8910/api/player').then((result) => {
+      this.set('status', result.status);
+      this.set('source', result.source);
+      this.set('position', result.position);
+      this.set('duration', result.duration);
+      this.set('volume', result.volume);
+    }, (err) => {
+      this.set('status', 'unknown');
+      this.set('source', null);
+    });
+
+    later(this, this.update, 100);
+  },
+
+  init() {
+    this._super();
+    this.update();
+  }
+});

app/templates/application.hbs

@@ -1,5 +1,3 @@
-{{!-- The following component displays Ember's default welcome message. --}}
-{{welcome-page}}
-{{!-- Feel free to remove this! --}}
+{{player-controls}}
 
-{{outlet}}
+{{outlet}}

app/templates/components/player-controls.hbs

@@ -0,0 +1,5 @@
+{{player.status}}
+{{player.source}}
+{{format-seconds player.position}}
+{{format-seconds player.duration}}
+{{format-seconds remaining}}

app/templates/index.hbs

@@ -0,0 +1 @@
+<h1>Media</h1>

package.json

@@ -40,7 +40,6 @@
     "ember-qunit": "^3.4.1",
     "ember-resolver": "^5.0.1",
     "ember-source": "~3.5.0",
-    "ember-welcome-page": "^3.2.0",
     "eslint-plugin-ember": "^5.2.0",
     "loader.js": "^4.7.0",
     "qunit-dom": "^0.8.0"

tests/integration/components/player-controls-test.js

@@ -0,0 +1,26 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import hbs from 'htmlbars-inline-precompile';
+
+module('Integration | Component | player-controls', function(hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function(assert) {
+    // Set any properties with this.set('myProperty', 'value');
+    // Handle any actions with this.set('myAction', function(val) { ... });
+
+    await render(hbs`{{player-controls}}`);
+
+    assert.equal(this.element.textContent.trim(), '');
+
+    // Template block usage:
+    await render(hbs`
+      {{#player-controls}}
+        template block text
+      {{/player-controls}}
+    `);
+
+    assert.equal(this.element.textContent.trim(), 'template block text');
+  });
+});

tests/integration/helpers/format-seconds-test.js

@@ -0,0 +1,17 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import hbs from 'htmlbars-inline-precompile';
+
+module('Integration | Helper | format-seconds', function(hooks) {
+  setupRenderingTest(hooks);
+
+  // Replace this with your real tests.
+  test('it renders', async function(assert) {
+    this.set('inputValue', '1234');
+
+    await render(hbs`{{format-seconds inputValue}}`);
+
+    assert.equal(this.element.textContent.trim(), '1234');
+  });
+});

tests/unit/routes/index-test.js

@@ -0,0 +1,11 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'ember-qunit';
+
+module('Unit | Route | index', function(hooks) {
+  setupTest(hooks);
+
+  test('it exists', function(assert) {
+    let route = this.owner.lookup('route:index');
+    assert.ok(route);
+  });
+});

tests/unit/services/player-test.js

@@ -0,0 +1,12 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'ember-qunit';
+
+module('Unit | Service | player', function(hooks) {
+  setupTest(hooks);
+
+  // Replace this with your real tests.
+  test('it exists', function(assert) {
+    let service = this.owner.lookup('service:player');
+    assert.ok(service);
+  });
+});