WIP
This commit is contained in:
Egor
parent
7ce43ac53c
commit
424156142d
6 changed files with 123 additions and 56 deletions
|
|
@ -1,7 +1,7 @@
|
|||
import Em from 'ember';
|
||||
|
||||
export default Em.Component.extend({
|
||||
classNames: ['innerControlFrame'],
|
||||
classNames: ['innerControlFrame', 'groupPanel'],
|
||||
|
||||
tagName: null,
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,35 +4,41 @@
|
|||
<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}}
|
||||
|
||||
<span {{action "play"}}>{{paper-icon icon=playButton class="playerControllIcon"}}</span>
|
||||
|
||||
{{#if nextPrevEnabled}}
|
||||
<span {{action "next"}}>{{paper-icon icon="skip-next" action="" class="playerControllIcon"}}</span>
|
||||
<span {{action "previous"}}>{{paper-icon icon="skip-previous" class="playerControllIcon"}} </span>`
|
||||
{{/if}}
|
||||
|
||||
<span {{action "toggleMute"}}>{{paper-icon icon=volumeClass class="playerControllIcon volumeButton"}}</span>
|
||||
<span data-toggle="tooltip" data-placement="top auto" title={{playButtonTooltipTxt}} {{action "play"}}>{{paper-icon icon=playButton class="playerControllIcon"}}</span>
|
||||
|
||||
{{#if nextPrevEnabled}}
|
||||
<span data-toggle="tooltip" data-placement="top auto" title="Next song" {{action "next"}}>{{paper-icon icon="skip-next" action="" class="playerControllIcon"}}</span>
|
||||
{{/if}}
|
||||
|
||||
<span data-toggle="tooltip" data-placement="top auto" title="Mute" id="volumeTooltip" {{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">{{timeElapsedTxt}} / {{timeRemainingTxt}}</span>
|
||||
<span id="playerTimeControls">{{timeElapsedTxt}} / {{timeRemainingTxt}}</span>
|
||||
|
||||
<span id="playerControlsRight">
|
||||
<span {{action "fullscreen"}}>{{paper-icon icon="fullscreen" class="playerControllIcon"}}
|
||||
<span data-toggle="tooltip" data-placement="top auto" title="Full screen" {{action "fullscreen"}}>{{paper-icon icon="fullscreen" class="playerControllIcon"}}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="playlist" class="col-xs-4">
|
||||
<input id="audio_file" type="file" accept="audio/*" />
|
||||
<!--<input id="audio_file" type="file" accept="audio/*" />-->
|
||||
|
||||
<span {{action "toggleShuffle"}}>{{paper-icon icon="shuffle" class="playerControllIcon"}}</span>
|
||||
<div id="playListControls">
|
||||
<span data-toggle="tooltip" data-placement="bottom auto" title="Shuffle" class="smallMarginRight" {{action "toggleShuffle"}}>{{paper-icon icon="shuffle" class="playerControllIcon"}}</span>
|
||||
|
||||
<span {{action "toggleRepeat"}}>{{paper-icon icon="repeat" class="playerControllIcon"}}</span>
|
||||
<span data-toggle="tooltip" data-placement="bottom auto" title="Repeat playlist" {{action "toggleRepeat"}}>{{paper-icon icon="repeat" class="playerControllIcon"}}</span>
|
||||
|
||||
<span {{action "addAudio"}}>{{paper-icon icon="add" class="playerControllIcon"}}</span>
|
||||
<span data-toggle="tooltip" data-placement="bottom auto" title="Add new music" id="addMusicIcon" {{action "addAudio"}}>{{paper-icon icon="add" class="playerControllIcon" }}</span>
|
||||
</div>
|
||||
|
||||
<div id="playListArea">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -7,6 +7,7 @@ module.exports = function(defaults) {
|
|||
});
|
||||
|
||||
app.import('vendor/dancer.js');
|
||||
app.import('bower_components/bootstrap-sass/assets/javascripts/bootstrap/tooltip.js');
|
||||
|
||||
// Use `app.import` to add additional libraries to the generated
|
||||
// output files.
|
||||
|
|
|
|||
18
package.json
18
package.json
|
|
@ -20,27 +20,27 @@
|
|||
"license": "MIT",
|
||||
"devDependencies": {
|
||||
"broccoli-asset-rev": "^2.0.2",
|
||||
"ember-cli": "1.13.7",
|
||||
"ember-cli-app-version": "0.4.0",
|
||||
"ember-cli": "1.13.8",
|
||||
"ember-cli-app-version": "1.0.0",
|
||||
"ember-cli-babel": "^5.0.0",
|
||||
"ember-cli-content-security-policy": "0.4.0",
|
||||
"ember-cli-dependency-checker": "^1.0.0",
|
||||
"ember-cli-htmlbars": "0.7.9",
|
||||
"ember-cli-htmlbars-inline-precompile": "^0.1.1",
|
||||
"ember-cli-htmlbars": "1.0.0",
|
||||
"ember-cli-htmlbars-inline-precompile": "^0.3.0",
|
||||
"ember-cli-ic-ajax": "0.2.1",
|
||||
"ember-cli-inject-live-reload": "^1.3.0",
|
||||
"ember-cli-nouislider": "0.7.0",
|
||||
"ember-cli-qunit": "0.3.20",
|
||||
"ember-cli-release": "0.2.3",
|
||||
"ember-cli-sass": "4.0.1",
|
||||
"ember-cli-qunit": "1.0.1",
|
||||
"ember-cli-release": "0.2.6",
|
||||
"ember-cli-sass": "4.2.0",
|
||||
"ember-cli-sri": "^1.0.1",
|
||||
"ember-cli-uglify": "^1.0.1",
|
||||
"ember-cli-windows-addon": "^1.2.2",
|
||||
"ember-data": "1.13.7",
|
||||
"ember-data": "1.13.11",
|
||||
"ember-disable-proxy-controllers": "^1.0.0",
|
||||
"ember-export-application-global": "^1.0.3",
|
||||
"ember-modal-dialog": "0.7.7",
|
||||
"ember-paper": "0.2.6",
|
||||
"ember-paper": "0.2.7",
|
||||
"liquid-fire": "0.21.2"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Reference in a new issue