diff --git a/app/components/controls/music-control.js b/app/components/controls/music-control.js index 2a0f263..1b9cd37 100644 --- a/app/components/controls/music-control.js +++ b/app/components/controls/music-control.js @@ -1,12 +1,58 @@ import Em from 'ember'; export default Em.Component.extend({ - didInsertElement: function () { + dancer: null, + + classNames: ['container-fluid'], + + actions: { + play: function(){ + if(this.get('status') === 'playing'){ + this.get('dancer').pause(); + this.set('status', 'paused'); + } else if(this.get('status') === 'paused'){ + this.get('dancer').play(); + this.set('status', 'playing'); + } + }, + next : function(){ + + }, + previous: function(){ + + }, + + fullscreen: function(){ + + } + }, + + nextPrevEnabled: function(){ + return this.get('playQueue').length > 1; + }.property('playQueue.[]'), + + status: null, + + playQueue: [], + timeElapsed: '0:00', + timeRemaining: '0:00', + + playButton: function(){ + if(this.get('status') === 'playing'){ + return 'pause'; + } else { + return 'play-arrow'; + } + }.property('status'), + + init: function(){ + this._super(); + var dancer = new Dancer(), self = this, briOff = function(i){ Em.$.ajax(self.get('apiURL') + '/lights/' + i + '/state', { - data: JSON.stringify({'on': 1, 'transitiontime': 0}), + data: JSON.stringify({'bri': 1, 'transitiontime': 0}), contentType: 'application/json', type: 'PUT' }); @@ -35,18 +81,24 @@ export default Em.Component.extend({ } } - }), - a = new Audio(); + }); kick.on(); + this.setProperties({ + dancer: dancer, + kick: kick + }); + }, + + didInsertElement: function () { + var dancer = this.get('dancer'), self = this; audio_file.onchange = function(){ - var files = this.files; + var files = this.files, a = new Audio(); var file = URL.createObjectURL(files[0]); a.src = file; dancer.load(a); - - dancer.play(); + self.set('status', 'paused'); }; }, diff --git a/app/components/controls/music-control/music-player.js b/app/components/controls/music-control/music-player.js deleted file mode 100644 index 218406e..0000000 --- a/app/components/controls/music-control/music-player.js +++ /dev/null @@ -1,27 +0,0 @@ -import Em from 'ember'; - -export default Em.Component.extend({ - classNames: ['container-fluid'], - - actions: { - play: function(){ - - }, - next : function(){ - - }, - previous: function(){ - - } - }, - - status: null, - - playButton: function(){ - if(this.get('status') === 'paused'){ - return 'pause'; - } else { - return 'play-arrow'; - } - }.property('status') -}); diff --git a/app/styles/app.scss b/app/styles/app.scss index 3500671..5c0d403 100644 --- a/app/styles/app.scss +++ b/app/styles/app.scss @@ -25,7 +25,6 @@ md-content { } .navigationItem { - text-transform: uppercase; cursor: pointer; font-family: 'Slabo 27px', serif; font-size: 18px; @@ -170,6 +169,28 @@ md-toolbar { color: red; } +#playerControls { + opacity: 0; + transition: all 0.2s ease-in-out; + position: absolute; + bottom: 0; + left: 0; + padding: 10px; + width: 100%; + color: white !important; +} + +#playerTimeControls { + position: relative; + font-size: 12px; + top: 2px; + margin-left: 10px; +} + +#playerControlsRight { + float: right; +} + .playerControllIcon { color: white !important; cursor: pointer; @@ -180,13 +201,17 @@ md-toolbar { } #playerArea { - height: 200px; + height: 300px; background-color: black; display: inline-block; } +#playerArea:hover #playerControls { + opacity: 1; +} + #playlist { - height: 200px; + height: 300px; background-color: grey; display: inline-block; } diff --git a/app/templates/components/bridge-controls.hbs b/app/templates/components/bridge-controls.hbs index 3546fac..7cf7d42 100644 --- a/app/templates/components/bridge-controls.hbs +++ b/app/templates/components/bridge-controls.hbs @@ -14,7 +14,7 @@ {{#paper-content flex-layout="column" flex=true}}
{{#each tabData as |tab|}} - {{tab.name}} + {{tab.name}} {{/each}}
diff --git a/app/templates/components/controls/music-control.hbs b/app/templates/components/controls/music-control.hbs index cbb4c74..2ae3f94 100644 --- a/app/templates/components/controls/music-control.hbs +++ b/app/templates/components/controls/music-control.hbs @@ -1 +1,29 @@ -{{controls/music-control/music-player}} \ No newline at end of file +
+
+ +
+ {{#if nextPrevEnabled}} + {{paper-icon icon="skip-previous" class="playerControllIcon"}} ` + {{/if}} + + {{paper-icon icon=playButton class="playerControllIcon"}} + + {{#if nextPrevEnabled}} + {{paper-icon icon="skip-next" action="" class="playerControllIcon"}} + {{/if}} + + {{paper-icon icon="volume-up" class="playerControllIcon"}} + + {{timeElapsed}} / {{timeRemaining}} + + + {{paper-icon icon="fullscreen" class="playerControllIcon"}} + + +
+
+ +
+ +
+
\ No newline at end of file diff --git a/app/templates/components/controls/music-control/music-player.hbs b/app/templates/components/controls/music-control/music-player.hbs deleted file mode 100644 index 662dfe4..0000000 --- a/app/templates/components/controls/music-control/music-player.hbs +++ /dev/null @@ -1,14 +0,0 @@ -
-
- -
- {{paper-icon icon="skip-previous" action="previous" class="playerControllIcon"}} - {{paper-icon icon=playButton action="play" class="playerControllIcon"}} - {{paper-icon icon="skip-next" action="pause" class="playerControllIcon"}} -
-
- -
- -
-
\ No newline at end of file diff --git a/bower.json b/bower.json index aab1080..04369d4 100644 --- a/bower.json +++ b/bower.json @@ -1,18 +1,18 @@ { "name": "huegasm", "dependencies": { + "bootstrap-sass": "~3.3.5", "ember": "1.13.6", "ember-cli-shims": "ember-cli/ember-cli-shims#0.0.3", "ember-cli-test-loader": "ember-cli-test-loader#0.1.3", + "ember-data": "~1.13.9", "ember-load-initializers": "ember-cli/ember-load-initializers#0.1.5", "ember-qunit": "0.4.9", "ember-qunit-notifications": "0.0.7", "ember-resolver": "~0.1.18", + "hammerjs": "~2.0.4", "jquery": "^1.11.1", "loader.js": "ember-cli/loader.js#3.2.0", - "qunit": "~1.18.0", - "hammerjs": "~2.0.4", - "bootstrap-sass": "~3.3.5", - "ember-data": "~1.13.9" + "qunit": "~1.18.0" } } diff --git a/ember-cli-build.js b/ember-cli-build.js index 630baf6..df45e41 100644 --- a/ember-cli-build.js +++ b/ember-cli-build.js @@ -7,6 +7,7 @@ module.exports = function(defaults) { }); app.import('vendor/dancer.js'); + // Use `app.import` to add additional libraries to the generated // output files. // diff --git a/tests/integration/components/controls/music-control/music-player-test.js b/tests/integration/components/controls/music-control/music-player-test.js deleted file mode 100644 index 6db138b..0000000 --- a/tests/integration/components/controls/music-control/music-player-test.js +++ /dev/null @@ -1,26 +0,0 @@ -import { moduleForComponent, test } from 'ember-qunit'; -import hbs from 'htmlbars-inline-precompile'; - -moduleForComponent('controls/music-control/music-player', 'Integration | Component | controls/music control/music player', { - 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`{{controls/music-control/music-player}}`); - - assert.equal(this.$().text().trim(), ''); - - // Template block usage: - this.render(hbs` - {{#controls/music-control/music-player}} - template block text - {{/controls/music-control/music-player}} - `); - - assert.equal(this.$().text().trim(), 'template block text'); -});