adding font awesome, starting on soundcloud integration
This commit is contained in:
parent
5bdf7e39d2
commit
3c4603c91a
13 changed files with 100 additions and 32 deletions
|
|
@ -49,15 +49,14 @@ export default Em.Component.extend({
|
|||
|
||||
selectedLights: [],
|
||||
|
||||
onIsShowingAddGroupsModalChange: function(){
|
||||
if(this.get('isShowingAddGroupsModal')){
|
||||
|
||||
}
|
||||
onIsShowingModalChange: function(){
|
||||
if(this.get('isShowingModal')){
|
||||
this.setProperties({
|
||||
selectedLights: [],
|
||||
groupName: null
|
||||
});
|
||||
}.observes('isShowingAddGroupsModal'),
|
||||
}
|
||||
}.observes('isShowingModal'),
|
||||
|
||||
saveDisabled: function(){
|
||||
return Em.isNone(this.get('groupName')) || Em.isEmpty(this.get('selectedLights')) || Em.isEmpty(this.get('groupName').trim());
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
{{#if isShowingAddGroupsModal}}
|
||||
{{#if isShowingModal}}
|
||||
{{#modal-dialog close="close" alignment="center" translucentOverlay=true}}
|
||||
|
||||
{{light-group lightsData=lightsData activeLights=selectedLights action= 'clickLight' apiURL=apiURL noHover=true}}
|
||||
|
|
|
|||
12
app/pods/components/add-soundcloud-sound-modal/component.js
Normal file
12
app/pods/components/add-soundcloud-sound-modal/component.js
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
import Em from 'ember';
|
||||
|
||||
export default Em.Component.extend({
|
||||
actions: {
|
||||
close: function () {
|
||||
this.sendAction();
|
||||
}
|
||||
},
|
||||
saveDisabled: function(){
|
||||
return Em.isNone(this.get('groupName')) || Em.isEmpty(this.get('selectedLights')) || Em.isEmpty(this.get('groupName').trim());
|
||||
}.property('groupName', 'selectedLights.[]')
|
||||
});
|
||||
10
app/pods/components/add-soundcloud-sound-modal/template.hbs
Normal file
10
app/pods/components/add-soundcloud-sound-modal/template.hbs
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
{{#if isShowingModal}}
|
||||
{{#modal-dialog close="close" alignment="center" translucentOverlay=true}}
|
||||
|
||||
<p>Enter a SoundCloud URL for a track or a playlist/set</p>
|
||||
|
||||
{{#paper-button action="close"}}Close{{/paper-button}}
|
||||
{{#paper-button class="pull-right" action="delete" primary=true}}Add Music{{/paper-button}}
|
||||
|
||||
{{/modal-dialog}}
|
||||
{{/if}}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
{{#if isShowingConfirmDeleteModal}}
|
||||
{{#if isShowingModal}}
|
||||
{{#modal-dialog close="close" alignment="center" translucentOverlay=true}}
|
||||
|
||||
<p>Are you sure you want to delete group "{{groupName}}"?</p>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@
|
|||
{{/each}}
|
||||
{{/paper-list}}
|
||||
|
||||
{{add-group-modal lightsData=lightsData groupsData=groupsData isShowingAddGroupsModal=isShowingAddGroupsModal apiURL=apiURL updateGroupsData=updateGroupsData
|
||||
action="toggleAddGroupsModal"}}
|
||||
{{add-group-modal lightsData=lightsData groupsData=groupsData isShowingModal=isShowingAddGroupsModal apiURL=apiURL updateGroupsData=updateGroupsData action="toggleAddGroupsModal"}}
|
||||
|
||||
{{delete-group-modal groupName=deleteGroupName groupId=deleteGroupId groupsData=groupsData isShowingConfirmDeleteModal=isShowingConfirmDeleteModal apiURL=apiURL updateGroupsData=updateGroupsData groupIdSelection=groupIdSelection action="toggleConfirmDeleteGroupsModal"}}
|
||||
{{delete-group-modal groupName=deleteGroupName groupId=deleteGroupId groupsData=groupsData isShowingModal=isShowingConfirmDeleteModal apiURL=apiURL updateGroupsData=updateGroupsData groupIdSelection=groupIdSelection action="toggleConfirmDeleteGroupsModal"}}
|
||||
|
|
@ -16,6 +16,9 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
|
|||
}.observes('active'),
|
||||
|
||||
actions: {
|
||||
toggleIsShowingAddSoundCloudModal: function() {
|
||||
this.toggleProperty('isShowingAddSoundCloudModal');
|
||||
},
|
||||
toggleDimming: function(){
|
||||
this.changePlayerControl('dimmerEnabled', !this.get('dimmerEnabled'));
|
||||
},
|
||||
|
|
@ -199,7 +202,7 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
|
|||
}
|
||||
}
|
||||
},
|
||||
addAudio: function () {
|
||||
addLocalAudio: function () {
|
||||
Em.$('#fileInput').click();
|
||||
},
|
||||
shuffleChanged(value) {
|
||||
|
|
@ -223,9 +226,6 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
|
|||
frequencyChanged(value){
|
||||
this.changePlayerControl('frequency', value, true);
|
||||
},
|
||||
playListAreaAddAudio(){
|
||||
this.send('addAudio');
|
||||
},
|
||||
audioModeChanged(value){
|
||||
if(value === 1) {
|
||||
this.startUsingMic();
|
||||
|
|
@ -310,6 +310,7 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
|
|||
|
||||
songBeatPreferences[title] = {threshold: this.get('threshold'), decay: this.get('decay'), frequency: this.get('frequency') };
|
||||
|
||||
this.set('usingBeatPreferences', true);
|
||||
this.get('storage').set('huegasm.songBeatPreferences', songBeatPreferences);
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -91,6 +91,7 @@ export default Em.Mixin.create({
|
|||
audioStream: null,
|
||||
dimmerOn: false,
|
||||
dimmerEnabled: false,
|
||||
isShowingAddSoundCloudModal: false,
|
||||
|
||||
notFoundHtml: '<div class="alert alert-danger" role="alert">A microphone was not found.</div>',
|
||||
|
||||
|
|
|
|||
|
|
@ -38,7 +38,9 @@
|
|||
|
||||
<div id="playListControls">
|
||||
{{#if usingLocalAudio}}
|
||||
<span data-toggle="tooltip" data-placement="bottom auto" data-title="Add new music" class="pull-right bootstrapTooltip" {{action "addAudio"}}>{{paper-icon icon="add" class="playerControllIcon"}}</span>
|
||||
<span data-toggle="tooltip" data-placement="bottom auto" data-title="Add local music" class="pull-right bootstrapTooltip" {{action "addLocalAudio"}}>{{paper-icon icon="add" class="playerControllIcon"}}</span>
|
||||
<span data-toggle="tooltip" data-placement="bottom auto" data-title="Add music from SoundCloud" class="pull-right bootstrapTooltip soundCloudLogoIcon" {{action "toggleIsShowingAddSoundCloudModal"}}>{{fa-icon "soundcloud" classNames="playerControllIcon"}}</span>
|
||||
|
||||
<span data-toggle="tooltip" data-placement="bottom auto" class="bootstrapTooltip" id="shuffleTooltip" data-title={{shuffleTooltipTxt}} {{action "shuffleChanged"}}>{{paper-icon icon="shuffle" class=shuffleClass}}</span>
|
||||
<span data-toggle="tooltip" data-placement="bottom auto" class="bootstrapTooltip" id="repeatTooltip" data-title={{repeatTooltipTxt}} {{action "repeatChanged"}}>{{paper-icon icon=repeatIcon class=repeatClass}}</span>
|
||||
{{/if}}
|
||||
|
|
@ -54,8 +56,7 @@
|
|||
</div>
|
||||
{{else}}
|
||||
{{#if usingLocalAudio}}
|
||||
<div id="playListArea"
|
||||
class={{playListAreaClass}} {{action "playListAreaAddAudio"}} {{action "playListAreaDragOver" on="dragOver"}} {{action "playListAreaDragLeave" on="dragLeave"}} {{action "dropFiles" on="drop"}}>
|
||||
<div id="playListArea" class={{playListAreaClass}} {{action "addLocalAudio"}} {{action "playListAreaDragOver" on="dragOver"}} {{action "playListAreaDragLeave" on="dragLeave"}} {{action "dropFiles" on="drop"}}>
|
||||
{{#if (or playQueueEmpty dragging)}}
|
||||
<div id="dragHere">
|
||||
{{#if dragging}}
|
||||
|
|
@ -179,3 +180,5 @@
|
|||
|
||||
{{ember-notify closeAfter=5000}}
|
||||
<div id="dimmer" {{action "toggleDimming"}}></div>
|
||||
|
||||
{{add-soundcloud-sound-modal action="toggleIsShowingAddSoundCloudModal" isShowingModal=isShowingAddSoundCloudModal}}
|
||||
|
|
@ -2,6 +2,7 @@
|
|||
@import 'bower_components/bootstrap-sass/assets/stylesheets/_bootstrap';
|
||||
@import 'ember-modal-dialog/ember-modal-structure';
|
||||
@import 'ember-modal-dialog/ember-modal-appearance';
|
||||
@import "bower_components/font-awesome/scss/font-awesome";
|
||||
|
||||
$playerHeight: 400px;
|
||||
$playerDefaultIconColor: #BBBBBB;
|
||||
|
|
@ -26,7 +27,7 @@ body {
|
|||
}
|
||||
|
||||
#settings {
|
||||
padding-right: 0;
|
||||
padding-right: 5px;
|
||||
text-align: right;
|
||||
z-index: 3;
|
||||
}
|
||||
|
|
@ -228,11 +229,11 @@ md-slider.md-default-theme .md-thumb:after {
|
|||
}
|
||||
|
||||
#groupList {
|
||||
box-shadow: 5px 10px 15px 5px rgba(0, 0, 0, .3);
|
||||
box-shadow: 5px 10px 15px 5px rgba(0, 0, 0, 0.3);
|
||||
border-radius: 0 0 5px 5px;
|
||||
width: 300px;
|
||||
top: 20px;
|
||||
right: 0;
|
||||
left: -269px;
|
||||
position: absolute;
|
||||
background-color: white;
|
||||
max-height: 400px;
|
||||
|
|
@ -309,12 +310,15 @@ md-icon {
|
|||
color: rgba(0, 0, 0, 0.54) !important;
|
||||
}
|
||||
|
||||
.addButton .group-add {
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.addButton .group-add:hover {
|
||||
.addButton {
|
||||
.group-add {
|
||||
color: $secondaryThemeColor;
|
||||
margin-right: 15px;
|
||||
font-size: 28px;
|
||||
}
|
||||
.group-add:hover {
|
||||
color: darken(#333333, 5%) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.removeButton {
|
||||
|
|
@ -436,7 +440,8 @@ md-switch.md-default-theme.md-checked .md-thumb {
|
|||
|
||||
.pull-right.bootstrapTooltip {
|
||||
.playerControllIcon {
|
||||
margin: 0;
|
||||
margin-right: 0;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -963,3 +968,13 @@ $vibrateblurouter: 2px;
|
|||
.md-warn {
|
||||
background: $secondaryThemeColor;
|
||||
}
|
||||
|
||||
.soundCloudLogoIcon {
|
||||
line-height: 34px;
|
||||
i {
|
||||
font-size: 26px;
|
||||
cursor: pointer;
|
||||
line-height: 0;
|
||||
color: #f70 !important;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,7 +19,8 @@
|
|||
"matchMedia": "~0.2.0",
|
||||
"nouislider": "^8.0.1",
|
||||
"qunit": "~1.18.0",
|
||||
"three.js": "~0.72.0"
|
||||
"three.js": "~0.72.0",
|
||||
"font-awesome": "~4.4.0"
|
||||
},
|
||||
"resolutions": {
|
||||
"ember": "~2.1.0",
|
||||
|
|
|
|||
|
|
@ -25,6 +25,7 @@
|
|||
"ember-cli-babel": "^5.0.0",
|
||||
"ember-cli-content-security-policy": "0.4.0",
|
||||
"ember-cli-dependency-checker": "^1.0.0",
|
||||
"ember-cli-font-awesome": "0.1.1",
|
||||
"ember-cli-htmlbars": "1.0.1",
|
||||
"ember-cli-htmlbars-inline-precompile": "^0.3.0",
|
||||
"ember-cli-ic-ajax": "0.2.1",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,26 @@
|
|||
import { moduleForComponent, test } from 'ember-qunit';
|
||||
import hbs from 'htmlbars-inline-precompile';
|
||||
|
||||
moduleForComponent('add-soundcloud-sound-modal', 'Integration | Component | add soundcloud sound modal', {
|
||||
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`{{add-soundcloud-sound-modal}}`);
|
||||
|
||||
assert.equal(this.$().text().trim(), '');
|
||||
|
||||
// Template block usage:
|
||||
this.render(hbs`
|
||||
{{#add-soundcloud-sound-modal}}
|
||||
template block text
|
||||
{{/add-soundcloud-sound-modal}}
|
||||
`);
|
||||
|
||||
assert.equal(this.$().text().trim(), 'template block text');
|
||||
});
|
||||
Reference in a new issue