wip
This commit is contained in:
parent
46bc20966b
commit
f309c082e8
3 changed files with 73 additions and 22 deletions
|
|
@ -15,8 +15,9 @@ export default Em.Component.extend({
|
|||
this.set('status', 'playing');
|
||||
}
|
||||
},
|
||||
volumeSliderChanged: function(){
|
||||
|
||||
volumeSliderChanged: function(volume){
|
||||
this.set('volume', volume);
|
||||
localStorage.setItem('huegasm.volume', volume);
|
||||
},
|
||||
|
||||
next : function(){
|
||||
|
|
@ -28,9 +29,32 @@ export default Em.Component.extend({
|
|||
|
||||
fullscreen: function(){
|
||||
|
||||
},
|
||||
|
||||
seekChanged: function() {
|
||||
|
||||
},
|
||||
|
||||
toggleMute: function() {
|
||||
this.toggleProperty('volumeMuted');
|
||||
}
|
||||
},
|
||||
|
||||
volumeMuted: false,
|
||||
volumeClass: function(){
|
||||
var volume = this.get('volume');
|
||||
|
||||
if(this.get('volumeMuted')){
|
||||
return "volume-off";
|
||||
} else if(volume >= 70){
|
||||
return "volume-up";
|
||||
} else if(volume > 10){
|
||||
return "volume-down";
|
||||
} else {
|
||||
return 'volume-mute';
|
||||
}
|
||||
}.property('volumeMuted', 'volume'),
|
||||
|
||||
nextPrevEnabled: function(){
|
||||
return this.get('playQueue').length > 1;
|
||||
}.property('playQueue.[]'),
|
||||
|
|
@ -38,8 +62,10 @@ export default Em.Component.extend({
|
|||
status: null,
|
||||
|
||||
playQueue: [],
|
||||
timeElapsed: '0:00',
|
||||
timeRemaining: '0:00',
|
||||
timeElapsed: 0,
|
||||
timeReamining: 0,
|
||||
timeElapsedTxt: '0:00',
|
||||
timeRemainingTxt: '0:00',
|
||||
volume: 100,
|
||||
|
||||
playButton: function(){
|
||||
|
|
|
|||
|
|
@ -178,6 +178,8 @@ md-toolbar {
|
|||
padding: 10px;
|
||||
width: 100%;
|
||||
color: white !important;
|
||||
z-index: 20;
|
||||
background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7));
|
||||
}
|
||||
|
||||
#playerTimeControls {
|
||||
|
|
@ -194,10 +196,11 @@ md-toolbar {
|
|||
.playerControllIcon {
|
||||
color: white !important;
|
||||
cursor: pointer;
|
||||
transition-duration: 0.1s;
|
||||
}
|
||||
|
||||
.playerControllIcon:hover {
|
||||
color: darken(white, 20%) !important;
|
||||
transform: scale(1.1)
|
||||
}
|
||||
|
||||
#playerArea {
|
||||
|
|
@ -212,38 +215,52 @@ md-toolbar {
|
|||
|
||||
#playlist {
|
||||
height: 300px;
|
||||
background-color: grey;
|
||||
background-color: #1E1E1E;
|
||||
}
|
||||
|
||||
.volumeButtonHover {
|
||||
|
||||
}
|
||||
.noUi-origin {
|
||||
background-color: black;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.noUi-base {
|
||||
background-color: red;
|
||||
background-color: #F12B24;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.noUi-target {
|
||||
#volumeBar {
|
||||
width: 100px;
|
||||
height: 5px;
|
||||
height: 8px;
|
||||
display: inline-block;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
#seekSlider {
|
||||
height: 12px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.noUi-horizontal .noUi-handle {
|
||||
width: 4px;
|
||||
height: 20px;
|
||||
left: 0;
|
||||
width: 7px;
|
||||
height: 21px;
|
||||
left: -1px;
|
||||
top: -8px;
|
||||
cursor: pointer;
|
||||
transition-duration: 0.1s;
|
||||
}
|
||||
|
||||
.noUi-horizontal .noUi-handle:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.noUi-handle:after, .noUi-handle:before {
|
||||
content: none;
|
||||
}
|
||||
|
||||
.volumeButton:hover + .noUi-target {
|
||||
visibility:visible;
|
||||
#seekSlider * .noUi-handle {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
border-radius: 50%;
|
||||
background: #F12B24;
|
||||
top: -7px;
|
||||
left: -10px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,9 @@
|
|||
<div class="row">
|
||||
<div class="row" xmlns="http://www.w3.org/1999/html">
|
||||
<div id="playerArea" class="col-xs-8">
|
||||
|
||||
<div id="playerControls">
|
||||
{{range-slider start=0 min=0 max=100 id="seekSlider" change="seekChanged" }}
|
||||
|
||||
{{#if nextPrevEnabled}}
|
||||
<span {{action "previous"}}>{{paper-icon icon="skip-previous" class="playerControllIcon"}} </span>`
|
||||
{{/if}}
|
||||
|
|
@ -12,10 +14,10 @@
|
|||
<span {{action "next"}}>{{paper-icon icon="skip-next" action="" class="playerControllIcon"}}</span>
|
||||
{{/if}}
|
||||
|
||||
{{paper-icon icon="volume-up" class="playerControllIcon volumeButton"}}
|
||||
{{range-slider start=volume min=0 max=100 change="volumeSliderChanged"}}
|
||||
<span {{action "toggleMute"}}>{{paper-icon icon=volumeClass class="playerControllIcon volumeButton"}}</span>
|
||||
{{range-slider start=volume min=0 max=100 change="volumeSliderChanged" id="volumeBar"}}
|
||||
|
||||
<span id="playerTimeControls">{{timeElapsed}} / {{timeRemaining}}</span>
|
||||
<span id="playerTimeControls">{{timeElapsedTxt}} / {{timeRemainingTxt}}</span>
|
||||
|
||||
<span id="playerControlsRight">
|
||||
<span {{action "fullscreen"}}>{{paper-icon icon="fullscreen" class="playerControllIcon"}}
|
||||
|
|
@ -26,5 +28,11 @@
|
|||
|
||||
<div id="playlist" class="col-xs-4">
|
||||
<input id="audio_file" type="file" accept="audio/*" />
|
||||
|
||||
<span {{action "toggleShuffle"}}>{{paper-icon icon="shuffle" class="playerControllIcon"}}</span>
|
||||
|
||||
<span {{action "toggleRepeat"}}>{{paper-icon icon="repeat" class="playerControllIcon"}}</span>
|
||||
|
||||
<span {{action "addAudio"}}>{{paper-icon icon="add" class="playerControllIcon"}}</span>
|
||||
</div>
|
||||
</div>
|
||||
Reference in a new issue