diff --git a/app/components/controls/group-control.js b/app/components/controls/group-control.js
index bd9a1d3..47d96c6 100644
--- a/app/components/controls/group-control.js
+++ b/app/components/controls/group-control.js
@@ -1,7 +1,7 @@
import Em from 'ember';
export default Em.Component.extend({
- classNames: ['innerControlFrame'],
+ classNames: ['innerControlFrame', 'groupPanel'],
tagName: null,
diff --git a/app/components/controls/music-control.js b/app/components/controls/music-control.js
index 43ad904..36e89c2 100644
--- a/app/components/controls/music-control.js
+++ b/app/components/controls/music-control.js
@@ -40,6 +40,18 @@ export default Em.Component.extend({
}
},
+ volumeTooltipTxt: function() {
+ var tooltipTxt = 'Mute';
+
+ if(this.get('volumeMuted')) {
+ tooltipTxt = 'Unmute';
+ }
+
+ // change the tooltip text if it's already visible
+ Em.$('#volumeTooltip + .tooltip .tooltip-inner').html(tooltipTxt);
+ //change the tooltip text for hover
+ Em.$('#volumeTooltip').attr('data-original-title', tooltipTxt);
+ }.observes('volumeMuted'),
volumeMuted: false,
volumeClass: function(){
var volume = this.get('volume');
@@ -68,6 +80,14 @@ export default Em.Component.extend({
timeRemainingTxt: '0:00',
volume: 100,
+ playButtonTooltipTxt: function() {
+ if(this.get('status') === 'playing'){
+ return 'Pause';
+ } else {
+ return 'Play';
+ }
+ }.property('status'),
+
playButton: function(){
if(this.get('status') === 'playing'){
return 'pause';
@@ -128,13 +148,15 @@ export default Em.Component.extend({
didInsertElement: function () {
var dancer = this.get('dancer'), self = this;
- audio_file.onchange = function(){
- var files = this.files, a = new Audio();
- var file = URL.createObjectURL(files[0]);
- a.src = file;
- dancer.load(a);
- self.set('status', 'paused');
- };
+ /*audio_file.onchange = function(){
+ var files = this.files, a = new Audio();
+ var file = URL.createObjectURL(files[0]);
+ a.src = file;
+ dancer.load(a);
+ self.set('status', 'paused');
+ };*/
+
+ Em.$('[data-toggle="tooltip"]').tooltip();
},
paused: false
diff --git a/app/styles/app.scss b/app/styles/app.scss
index 45d8edc..53d1f9b 100644
--- a/app/styles/app.scss
+++ b/app/styles/app.scss
@@ -3,6 +3,10 @@
@import 'ember-modal-dialog/ember-modal-structure';
@import 'ember-modal-dialog/ember-modal-appearance';
+$playerBackColor: #F12B24;
+$playerHeight: 400px;
+$playListBackgroundColor: #1E1E1E;
+
// BRIDGE FINDER
#pressButtonBridgeImg {
width: 200px;
@@ -46,6 +50,10 @@ md-content {
}
// LIGHT GROUP
+.groupPanel {
+ border-right: 1px solid black;
+}
+
.lightGroup {
margin: 0 auto 0 auto;
}
@@ -163,12 +171,6 @@ md-toolbar {
}
// MUSIC CONTROL
-#playListContainer {
- height: 600px;
- width: 200px;
- color: red;
-}
-
#playerControls {
opacity: 0;
transition: all 0.2s ease-in-out;
@@ -194,17 +196,17 @@ md-toolbar {
}
.playerControllIcon {
- color: white !important;
+ color: #BBBBBB !important;
cursor: pointer;
transition-duration: 0.1s;
}
.playerControllIcon:hover {
- transform: scale(1.1)
+ color: white !important;
}
#playerArea {
- height: 300px;
+ height: $playerHeight;
background-color: black;
display: inline-block;
}
@@ -214,8 +216,8 @@ md-toolbar {
}
#playlist {
- height: 300px;
- background-color: #1E1E1E;
+ height: $playerHeight;
+ background-color: $playListBackgroundColor;
}
.noUi-origin {
@@ -224,7 +226,7 @@ md-toolbar {
}
.noUi-base {
- background-color: #F12B24;
+ background-color: $playerBackColor;
border-radius: 5px;
}
@@ -234,11 +236,6 @@ md-toolbar {
display: inline-block;
}
-#seekSlider {
- height: 12px;
- margin-bottom: 10px;
-}
-
.noUi-horizontal .noUi-handle {
width: 7px;
height: 21px;
@@ -246,21 +243,62 @@ md-toolbar {
top: -8px;
cursor: pointer;
transition-duration: 0.1s;
+ background: #BBBBBB !important;
}
.noUi-horizontal .noUi-handle:hover {
- transform: scale(1.1);
+ background: white !important;
}
.noUi-handle:after, .noUi-handle:before {
content: none;
}
-#seekSlider * .noUi-handle {
- height: 20px;
- width: 20px;
- border-radius: 50%;
- background: #F12B24;
- top: -7px;
- left: -10px;
+#seekSlider {
+ height: 6px;
+ margin-bottom: 10px;
+ transition-duration: 0.2s;
+}
+
+#addMusicIcon {
+ float: right;
+}
+
+#seekSlider:hover {
+ height: 8px;
+}
+
+#seekSlider:hover * .noUi-handle {
+ opacity: 1;
+}
+
+#seekSlider * .noUi-handle {
+ border: none;
+ height: 13px;
+ width: 13px;
+ border-radius: 50%;
+ top: -4px;
+ left: -6px;
+ opacity: 0;
+ transition-duration: 0.1s;
+ background-color: $playerBackColor !important;
+ box-shadow: none;
+}
+
+#playListControls {
+ margin-top: 10px;
+ padding-bottom: 10px;
+ border-bottom: 1px solid #3a3a3a;
+}
+
+.smallMarginRight {
+ margin-right:10px;
+}
+
+#playListArea {
+ background: lighten($playListBackgroundColor, 20%);
+ width: 100%;
+ height: 333px;
+ margin: 10px auto 0 auto;
+ border-radius: 5px;
}
diff --git a/app/templates/components/controls/music-control.hbs b/app/templates/components/controls/music-control.hbs
index 8519745..77ffc2f 100644
--- a/app/templates/components/controls/music-control.hbs
+++ b/app/templates/components/controls/music-control.hbs
@@ -4,35 +4,41 @@
{{range-slider start=0 min=0 max=100 id="seekSlider" change="seekChanged" }}
- {{#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"}}
+ {{paper-icon icon="skip-previous" class="playerControllIcon"}} `
{{/if}}
- {{paper-icon icon=volumeClass class="playerControllIcon volumeButton"}}
+ {{paper-icon icon=playButton class="playerControllIcon"}}
+
+ {{#if nextPrevEnabled}}
+ {{paper-icon icon="skip-next" action="" class="playerControllIcon"}}
+ {{/if}}
+
+ {{paper-icon icon=volumeClass class="playerControllIcon volumeButton"}}
{{range-slider start=volume min=0 max=100 change="volumeSliderChanged" id="volumeBar"}}
- {{timeElapsedTxt}} / {{timeRemainingTxt}}
+ {{timeElapsedTxt}} / {{timeRemainingTxt}}
- {{paper-icon icon="fullscreen" class="playerControllIcon"}}
+ {{paper-icon icon="fullscreen" class="playerControllIcon"}}
-
+
-
{{paper-icon icon="shuffle" class="playerControllIcon"}}
+
+ {{paper-icon icon="shuffle" class="playerControllIcon"}}
- {{paper-icon icon="repeat" class="playerControllIcon"}}
+ {{paper-icon icon="repeat" class="playerControllIcon"}}
- {{paper-icon icon="add" class="playerControllIcon"}}
+ {{paper-icon icon="add" class="playerControllIcon" }}
+
+
+
+
+