lone-cloud/huegasm
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

bug fixes, switching over to use ember-paper menus, mobile improvements

Browse source
This commit is contained in:
Egor 2016-11-07 23:06:23 -08:00
parent e9ac1d162b
commit decc0de04c
38 changed files with 447 additions and 5600 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
README.md
View file

@ -7,6 +7,9 @@ It lives at http://www.huegasm.com
## Current priorities ## Current priorities
- create a hybrid app with Cardova - create a hybrid app with Cardova
## Bugs
- HackTimer not working? Slowness when switching to another browser tab, etc...
## POSSIBLE FUTURE FEATURES ## POSSIBLE FUTURE FEATURES
- decode the hue color better - decode the hue color better
- better visualizations - better visualizations

8
mobile/app/pods/components/hue-controls/component.js
View file

@ -185,7 +185,7 @@ export default Component.extend({
element: '#dimmer', element: '#dimmer',
intro: 'And that\'s it...Hope you enjoy the application. ;)<br><br>' + intro: 'And that\'s it...Hope you enjoy the application. ;)<br><br>' +
'<i><b>TIP</b>: click on the icon to switch to a darker theme.</i>', '<i><b>TIP</b>: click on the icon to switch to a darker theme.</i>',
position: 'top' position: 'bottom'
} }
] ]
}); });
@ -227,12 +227,6 @@ export default Component.extend({
$('#lights-tab').addClass('hidden'); $('#lights-tab').addClass('hidden');
$('.navigation-item').eq(0).removeClass('active'); $('.navigation-item').eq(0).removeClass('active');
$('.navigation-item').eq(1).addClass('active'); $('.navigation-item').eq(1).addClass('active');
if(beatDetectionAreaArrowIcon.hasClass('keyboard-arrow-up')){
playerBottom.show();
} else {
playerBottom.hide();
}
}, onExit = ()=>{ }, onExit = ()=>{
let dimmer = $('#dimmer'); let dimmer = $('#dimmer');

41
mobile/app/pods/components/hue-controls/template.hbs
View file

@ -6,29 +6,26 @@
<span class="navigation-item text-uppercase {{if tab.selected "active"}}" {{action "changeTab" tab.name}}>{{tab.name}}</span> <span class="navigation-item text-uppercase {{if tab.selected "active"}}" {{action "changeTab" tab.name}}>{{tab.name}}</span>
{{/each}} {{/each}}
<div id="settings"> {{#paper-menu as |menu|}}
<span data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="settings-itemSettings"> {{#menu.trigger}}
{{paper-icon "settings" class=dimmerOnClass id="settings-icon" size=28}} {{#paper-button iconButton=true}}
</span> {{paper-icon "settings-icon" class=dimmerOnClass size=28}}
{{/paper-button}}
{{/menu.trigger}}
{{#menu.content width=3 as |content|}}
{{#content.menu-item onClick="clearBridge"}}
{{paper-icon "compare arrows" class=dimmerOnClass}} Switch bridge
{{/content.menu-item}}
<ul id="settings-menu" class="dropdown-menu"> {{#content.menu-item onClick="startIntro"}}
<li {{action "clearBridge"}}> {{paper-icon "cached" class=dimmerOnClass}} Restart tutorial
<a href="#"> {{/content.menu-item}}
Switch bridge
</a> {{#content.menu-item onClick="clearAllSettings"}}
</li> {{paper-icon "settings backup restore" class=dimmerOnClass}} Reset settings
<li {{action "startIntro"}}> {{/content.menu-item}}
<a href="#"> {{/menu.content}}
Restart tutorial {{/paper-menu}}
</a>
</li>
<li {{action "clearAllSettings"}}>
<a href="#">
Reset settings
</a>
</li>
</ul>
</div>
</div> </div>
{{light-group lightsData=lightsData activeLights=activeLights syncLight=syncLight apiURL=apiURL dimmerOn=dimmerOn storage=storage}} {{light-group lightsData=lightsData activeLights=activeLights syncLight=syncLight apiURL=apiURL dimmerOn=dimmerOn storage=storage}}

2
mobile/app/pods/components/huegasm-app/template.hbs
View file

@ -1,5 +1,5 @@
{{#if bridgeUsername}} {{#if bridgeUsername}}
{{hue-controls bridgeIp=bridgeIp bridgeUsername=bridgeUsername trial=trial dimmerOn=dimmerOn storage=storage}} {{hue-controls bridgeIp=bridgeIp bridgeUsername=bridgeUsername trial=trial storage=storage}}
{{else}} {{else}}
{{bridge-finder bridgeIp=bridgeIp bridgeUsername=bridgeUsername trial=trial storage=storage}} {{bridge-finder bridgeIp=bridgeIp bridgeUsername=bridgeUsername trial=trial storage=storage}}
{{/if}} {{/if}}

30
mobile/app/pods/components/lights-tab/component.js
View file

@ -9,12 +9,10 @@ const {
} = Ember; } = Ember;
export default Component.extend({ export default Component.extend({
classNames: ['col-sm-8', 'col-sm-offset-2', 'col-xs-12'], classNames: ['col-xs-12'],
classNameBindings: ['active::hidden'], classNameBindings: ['active::hidden'],
elementId: 'lights-tab', elementId: 'lights-tab',
colorPickerDisplayed: false,
rgb: [255, 255, 255], rgb: [255, 255, 255],
lightsOn: false, lightsOn: false,
@ -30,14 +28,6 @@ export default Component.extend({
return this.get('colorLoopOn') ? 'On' : 'Off'; return this.get('colorLoopOn') ? 'On' : 'Off';
}), }),
colorRowAction: computed('strobeOn', function() {
if (this.get('trial')) {
return null;
}
return 'toggleColorPicker';
}),
// determines the average brightness of the hue system for the brightness slider // determines the average brightness of the hue system for the brightness slider
lightsBrightness: computed('lightsData', function(){ lightsBrightness: computed('lightsData', function(){
let lightsData = this.get('lightsData'), let lightsData = this.get('lightsData'),
@ -173,24 +163,6 @@ export default Component.extend({
}); });
}), }),
didInsertElement() {
$(document).click((event)=>{
if(this.get('colorPickerDisplayed') && !event.target.classList.contains('color') && !$(event.target).closest('#color-picker, #color-row').length) {
this.toggleProperty('colorPickerDisplayed');
}
});
$(document).on('click', '#color-row', () => {
this.send('toggleColorPicker');
});
},
actions: {
toggleColorPicker() {
this.toggleProperty('colorPickerDisplayed');
}
},
// **************** STROBE LIGHT START **************** // **************** STROBE LIGHT START ****************
strobeOn: false, strobeOn: false,

24
mobile/app/pods/components/lights-tab/template.hbs
View file

@ -8,21 +8,25 @@
{{#paper-item}} {{#paper-item}}
{{paper-icon "brightness-4" class=dimmerOnClass}} {{paper-icon "brightness-4" class=dimmerOnClass}}
<p>Brightness</p> <p>Brightness</p>
{{paper-slider flex=true min='1' max='254' value=lightsBrightness disabled=brightnessControlDisabled}} {{paper-slider flex=true min=1 max=254 value=lightsBrightness disabled=brightnessControlDisabled}}
{{/paper-item}} {{/paper-item}}
{{#paper-item elementId="color-row"}} {{#paper-item class="color-row"}}
{{paper-icon "color-lens" class=dimmerOnClass}} {{paper-icon "color-lens" class=dimmerOnClass}}
<p>Color</p> <p>Color</p>
{{/paper-item}} {{#paper-menu offset="0 -100" as |menu|}}
{{#menu.trigger}}
<div class="relative"> {{#paper-button iconButton=false}}
{{paper-button raised=true class="color" onClick=(action "toggleColorPicker") disabled=trial}} {{paper-button raised=true class="color" disabled=trial}}
{{/paper-button}}
{{#if colorPickerDisplayed}} {{/menu.trigger}}
{{#menu.content class="color-content" width=8 as |content|}}
{{#content.menu-item}}
{{lights-tab/color-picker lightsData=lightsData activeLights=activeLights rgb=rgb}} {{lights-tab/color-picker lightsData=lightsData activeLights=activeLights rgb=rgb}}
{{/if}} {{/content.menu-item}}
</div> {{/menu.content}}
{{/paper-menu}}
{{/paper-item}}
{{#paper-item}} {{#paper-item}}
{{paper-icon "flare" class=dimmerOnClass}} {{paper-icon "flare" class=dimmerOnClass}}

5
mobile/app/pods/components/music-tab/component.js
View file

@ -349,6 +349,8 @@ export default Component.extend(helperMixin, visualizerMixin, {
}, },
didInsertElement() { didInsertElement() {
this._super();
let self = this; let self = this;
// file input code // file input code
@ -376,6 +378,7 @@ export default Component.extend(helperMixin, visualizerMixin, {
// demo tracks // demo tracks
if(this.get('firstVisit')){ if(this.get('firstVisit')){
this.send('handleNewSoundCloudURL', 'https://soundcloud.com/mrsuicidesheep/candyland-speechless-feat-rkcb'); this.send('handleNewSoundCloudURL', 'https://soundcloud.com/mrsuicidesheep/candyland-speechless-feat-rkcb');
this.send('handleNewSoundCloudURL', 'https://soundcloud.com/dillistone/dillistone-lili-n-rude');
this.send('handleNewSoundCloudURL', 'https://soundcloud.com/mrsuicidesheep/vallis-alps-young-feki-remix'); this.send('handleNewSoundCloudURL', 'https://soundcloud.com/mrsuicidesheep/vallis-alps-young-feki-remix');
this.send('handleNewSoundCloudURL', 'https://soundcloud.com/mrsuicidesheep/andrew-luce-when-to-love-you-feat-chelsea-cutler'); this.send('handleNewSoundCloudURL', 'https://soundcloud.com/mrsuicidesheep/andrew-luce-when-to-love-you-feat-chelsea-cutler');
this.send('handleNewSoundCloudURL', 'https://soundcloud.com/mrsuicidesheep/ahh-ooh-carefree-with-me'); this.send('handleNewSoundCloudURL', 'https://soundcloud.com/mrsuicidesheep/ahh-ooh-carefree-with-me');
@ -598,7 +601,7 @@ export default Component.extend(helperMixin, visualizerMixin, {
if(isEmpty($('#player-controls:hover')) && this.get('playQueuePointer') !== -1 ){ if(isEmpty($('#player-controls:hover')) && this.get('playQueuePointer') !== -1 ){
this.send('play'); this.send('play');
$('#play-notification').velocity({opacity: 0.8, scale: 1}, 0).velocity({opacity: 0, scale: 3}, 500); $('#play-notification').velocity({opacity: 1, scale: 1}, 0).velocity({opacity: 0, scale: 3}, 500);
} }
}, },
play(replayPause) { play(replayPause) {

14
mobile/app/pods/components/music-tab/mixins/helpers.js
View file

@ -11,7 +11,7 @@ const {
} = Ember; } = Ember;
export default Mixin.create({ export default Mixin.create({
classNames: ['col-sm-10', 'col-sm-offset-1', 'col-xs-12'], classNames: ['col-xs-12'],
classNameBindings: ['active::hidden'], classNameBindings: ['active::hidden'],
elementId: 'music-tab', elementId: 'music-tab',
@ -101,7 +101,7 @@ export default Mixin.create({
usingLocalAudio: computed.equal('audioMode', 0), usingLocalAudio: computed.equal('audioMode', 0),
usingMicAudio: computed.equal('audioMode', 1), usingMicAudio: computed.equal('audioMode', 1),
playerBottomDisplayed: false, playerBottomDisplayed: true,
dragging: false, dragging: false,
draggingOverPlayListArea: false, draggingOverPlayListArea: false,
dragLeaveTimeoutHandle: null, dragLeaveTimeoutHandle: null,
@ -189,7 +189,7 @@ export default Mixin.create({
}), }),
largeArtworkPic: computed('playQueuePointer', 'usingMicAudio', 'currentVisName', function(){ largeArtworkPic: computed('playQueuePointer', 'usingMicAudio', 'currentVisName', function(){
let pic = null, let pic = '',
currentVisName = this.get('currentVisName'), currentVisName = this.get('currentVisName'),
usingMicAudio = this.get('usingMicAudio'), usingMicAudio = this.get('usingMicAudio'),
playQueuePointer = this.get('playQueuePointer'), playQueuePointer = this.get('playQueuePointer'),
@ -237,6 +237,14 @@ export default Mixin.create({
} }
}), }),
playerAreaClickIcon: computed('playing', function() {
if(this.get('playing')){
return 'play-arrow';
} else {
return 'pause';
}
}),
playListAreaClass: computed('dragging', 'draggingOverPlayListArea', 'dimmerOn', function(){ playListAreaClass: computed('dragging', 'draggingOverPlayListArea', 'dimmerOn', function(){
let classes = 'pointer'; let classes = 'pointer';

104
mobile/app/pods/components/music-tab/template.hbs
View file

@ -1,8 +1,12 @@
<div class="row" id="step1"> <div class="row" id="step1">
<div id="player-area" class="col-sm-8 col-xs-12 {{if (eq "None" currentVisName) "display-icon"}}" {{action "playerAreaPlay"}}> <div id="player-area" class="col-xs-12 {{if (eq "None" currentVisName) "display-icon"}}" {{action "playerAreaPlay"}}>
<canvas id="visualization"></canvas> <canvas id="visualization"></canvas>
<div id="artwork"><img src={{largeArtworkPic}}></div>
<div id="play-notification" class="material-icons {{if playing "play-arrow" "pause"}}"></div> <div id="artwork">
<img src={{largeArtworkPic}}>
</div>
{{paper-icon playerAreaClickIcon id="play-notification"}}
<div id="player-controls"> <div id="player-controls">
{{#if usingLocalAudio}} {{#if usingLocalAudio}}
@ -21,50 +25,54 @@
<div id="player-time-controls">{{timeElapsedTxt}} / {{timeTotalTxt}}</div> <div id="player-time-controls">{{timeElapsedTxt}} / {{timeTotalTxt}}</div>
{{/if}} {{/if}}
<span class="pull-right"> {{#paper-menu as |menu|}}
{{#menu.trigger}}
{{#paper-button iconButton=true}}
{{paper-icon "remove-red-eye" class="player-control-icon"}}
{{/paper-button}}
{{/menu.trigger}}
{{#menu.content width=2 as |content|}}
{{#each visNames as |name|}}
{{#content.menu-item onClick=(action "setVisName" name)}}
{{name}}
{{#if (eq currentVisName name)}}
{{paper-icon "check" classNames=dimmerOnClass}}
{{/if}}
{{/content.menu-item}}
{{/each}}
{{/menu.content}}
{{/paper-menu}}
{{#if scUrl}} {{#if scUrl}}
<a href="#" class="sound-cloud-link"{{action "gotoSCURL" scUrl}}> <a href={{scUrl}} class="sound-cloud-link"{{action "gotoSCURL" scUrl}}>
<img src="assets/images/sc-white.png" class="hidden-xs" /> <img src="assets/images/sc-white.png" class="hidden-xs" />
<img src="assets/images/sc-white-sm.png" class="visible-xs-inline" /> <img src="assets/images/sc-white-sm.png" class="visible-xs-inline" />
</a> </a>
{{/if}} {{/if}}
<span class="dropup"> </div>
<span class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span>
{{paper-icon "remove-red-eye" class="player-control-icon"}}
</span>
</span>
<ul class="dropdown-menu visualizers-menu">
{{#each visNames as |name|}}
<li>
<a href="#" {{action "setVisName" name}}>{{name}}
{{#if (eq currentVisName name)}}
{{paper-icon "check" classNames=dimmerOnClass}}
{{/if}}
</a>
</li>
{{/each}}
</ul>
</span>
</span>
</div>
</div> </div>
<div id="playlist" class="col-sm-4 col-xs-12"> <div id="playlist" class="col-xs-12">
<input id="file-input" type="file" accept="audio/*" multiple="true"/> <input id="file-input" type="file" accept="audio/*" multiple="true"/>
<div id="play-list-controls"> <div id="play-list-controls">
{{#if usingLocalAudio}} {{#if usingLocalAudio}}
<button class="dropdown-toggle pull-right add-new-music" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> {{#paper-menu as |menu|}}
Add new music {{#menu.trigger}}
<span class="caret"></span> {{#paper-button iconButton=false}}
</button> {{paper-icon "playlist add" class="player-control-icon"}} Add new music
{{/paper-button}}
<ul id="add-music-choices" class="dropdown-menu"> {{/menu.trigger}}
<li><a href="#" {{action "addLocalAudio"}}>Local</a></li> {{#menu.content width=3 as |content|}}
<li><a href="#" {{action "toggleIsShowingAddSoundCloudModal"}}>SoundCloud</a></li> {{#content.menu-item onClick="addLocalAudio"}}
</ul> {{paper-icon "attachment" class=shuffleClass}} Local file
{{/content.menu-item}}
{{#content.menu-item onClick="toggleIsShowingAddSoundCloudModal"}}
{{paper-icon "cloud" class=shuffleClass}} SoundCloud
{{/content.menu-item}}
{{/menu.content}}
{{/paper-menu}}
{{/if}} {{/if}}
{{#if usingMicSupported}} {{#if usingMicSupported}}
@ -125,13 +133,13 @@
</div> </div>
<div id="slide-toggle" class="text-center row" {{action "slideTogglePlayerBottom"}}> <div id="slide-toggle" class="text-center row" {{action "slideTogglePlayerBottom"}}>
<div class="col-xs-offset-5 col-xs-2"> <div class="col-xs-offset-5 col-xs-2">
{{paper-icon beatDetectionAreaArrowIcon id="beat-detection-area-arrow-icon"}} {{paper-icon beatDetectionAreaArrowIcon id="beat-detection-area-arrow-icon"}}
</div> </div>
</div> </div>
<div id="player-bottom" class="row {{if dimmerOn "dimmerOn"}}"> <div id="player-bottom" class="row {{if dimmerOn "dimmerOn"}}">
<div id="beat-area" class="col-sm-7 col-xs-12"> <div id="beat-area" class="col-xs-12">
{{#if usingBeatPreferences}} {{#if usingBeatPreferences}}
<span id="save-beat-preferences-star"> <span id="save-beat-preferences-star">
{{paper-icon "star" class=dimmerOnClass}} {{paper-icon "star" class=dimmerOnClass}}
@ -139,7 +147,7 @@
{{/if}} {{/if}}
<div class="row" id="beat-option-row"> <div class="row" id="beat-option-row">
<div class="beat-option col-xs-4"> <div class="beat-option col-xs-6">
<span class="option-description"> <span class="option-description">
Sensitivity Sensitivity
</span> </span>
@ -147,7 +155,7 @@
{{range-slider start=threshold orientation="vertical" step=beatOptions.threshold.step range=beatOptions.threshold.range on-slide="thresholdChanged" pips=beatOptions.threshold.pips}} {{range-slider start=threshold orientation="vertical" step=beatOptions.threshold.step range=beatOptions.threshold.range on-slide="thresholdChanged" pips=beatOptions.threshold.pips}}
</div> </div>
<div class="beat-option col-xs-4"> <div class="beat-option col-xs-6">
<span class="option-description"> <span class="option-description">
Hue Range Hue Range
</span> </span>
@ -164,20 +172,18 @@
{{range-slider start=micBoost orientation="vertical" step=beatOptions.micBoost.step range=beatOptions.micBoost.range on-slide="micBoostChanged" pips=beatOptions.micBoost.pips}} {{range-slider start=micBoost orientation="vertical" step=beatOptions.micBoost.step range=beatOptions.micBoost.range on-slide="micBoostChanged" pips=beatOptions.micBoost.pips}}
</div> </div>
{{/if}} {{/if}}
</div>
</div>
<div id="light-option" class="beat-option col-xs-4"> <div class="beat-option col-xs-6">
<span>
{{paper-checkbox value=flashingTransitions onChange=(action (mut flashingTransitions)) label="Flashing Transitions"}} {{paper-checkbox value=flashingTransitions onChange=(action (mut flashingTransitions)) label="Flashing Transitions"}}
</span> </div>
<span> <div class="beat-option col-xs-6">
{{paper-checkbox value=colorloopMode onChange=(action (mut colorloopMode)) label="Colorloop"}} {{paper-checkbox value=colorloopMode onChange=(action (mut colorloopMode)) label="Colorloop"}}
</span>
</div>
</div>
</div> </div>
<div id="beat-container" class="col-sm-5 col-xs-12"> <div id="beat-container" class="col-xs-12">
<div class="bezel"> <div class="bezel">
<div class="rivet1"></div> <div class="rivet1"></div>
<div class="rivet2"></div> <div class="rivet2"></div>

12
mobile/app/styles/app.scss
View file

@ -40,11 +40,11 @@ button.md-warn {
div.ember-modal-dialog { div.ember-modal-dialog {
padding: 20px; padding: 20px;
color: black; color: $blackish;
md-input-container { md-input-container {
width: 100%; width: 100%;
input { input.md-input[type="text"] {
color: black !important; color: $blackish !important;
} }
} }
md-input-container label { md-input-container label {
@ -59,12 +59,6 @@ div.ember-modal-dialog {
} }
} }
.dropdown-menu {
font-size: 14px;
a {
line-height: 2 !important;
}
}
// fancy webkit scrollbars // fancy webkit scrollbars
::-webkit-scrollbar { ::-webkit-scrollbar {
-webkit-appearance: none; -webkit-appearance: none;

17
mobile/app/styles/dimmer.scss
View file

@ -26,30 +26,19 @@ body.dimmerOn {
.color { .color {
border: 1px solid white; border: 1px solid white;
} }
.playlist-item, .dropdown-menu, .add-new-music { .playlist-item, .ember-basic-dropdown-content md-menu-content {
color: $whitish; color: $whitish;
background-color: $dimmerOnButtonColor; background-color: $dimmerOnButtonColor;
} }
.dropdown-menu { .ember-basic-dropdown-content a {
a {
color: $whitish; color: $whitish;
&:hover {
background-color: darken($dimmerOnButtonColor, 10%) !important;
}
}
} }
.playlist-item { .playlist-item {
&.active { &.active {
background: darken($dimmerOnButtonColor, 15%) !important; background: darken($dimmerOnButtonColor, 15%) !important;
} }
&:hover {
background: darken($dimmerOnButtonColor, 10%);
}
.audio-remove-button .paper-icon { .audio-remove-button .paper-icon {
color: $whitish !important; color: $whitish !important;
&:hover {
color: white !important;
}
} }
} }
svg { svg {
@ -62,7 +51,7 @@ body.dimmerOn {
background: darken($dimmerOnButtonColor, 5%); background: darken($dimmerOnButtonColor, 5%);
} }
.popover-content { .popover-content {
color: black !important; color: $blackish !important;
} }
.md-bar { .md-bar {
background-color: darken(white, 60%) !important; background-color: darken(white, 60%) !important;

56
mobile/app/styles/hue-controls.scss
View file

@ -1,8 +1,10 @@
#lights-tab { #lights-tab {
min-height: 350px;
.paper-icon { .paper-icon {
line-height: 0.8 !important; line-height: 0.8 !important;
} }
md-slider {
width: 50%;
}
} }
#hue-controls { #hue-controls {
@ -28,16 +30,14 @@
font-weight: bold; font-weight: bold;
text-decoration: none !important; text-decoration: none !important;
} }
&:hover {
text-decoration: underline;
}
} }
.color { .color {
border: 1px solid rgba(0, 0, 0, 0.5); border: 1px solid rgba(0, 0, 0, 0.5);
position: absolute; }
top: -53px;
right: 0; .color-row .md-list-item-inner {
padding-right: 0;
} }
#color-picker { #color-picker {
@ -53,6 +53,13 @@
z-index: 3; z-index: 3;
} }
.color-content {
box-shadow: none !important;
md-menu-content, md-menu-item {
background-color: transparent !important;
}
}
#loop-addition { #loop-addition {
position: absolute; position: absolute;
left: 33px; left: 33px;
@ -60,42 +67,9 @@
font-size: 16px; font-size: 16px;
} }
#settings { #navigation .ember-basic-dropdown-trigger {
z-index: 3; z-index: 3;
text-align: right; text-align: right;
float: right; float: right;
position: relative; position: relative;
} }
#settings-menu {
position: absolute;
box-shadow: 1px 10px 15px 1px rgba(0, 0, 0, 0.3);
left: -135px;
top: 25px;
border: none;
padding: 0;
}
#settings-icon {
transition: 0.1s all ease-in-out;
&:hover {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
&:before {
transition: 0.1s all ease-in-out;
}
}
@media(min-width:767px) {
#lights-tab {
font-size: 20px;
min-height: 450px;
.paper-icon {
font-size: 24px;
}
.md-list-item-inner {
height: 75px;
}
}
}

4
mobile/app/styles/introjs.scss
View file

@ -1,5 +1,5 @@
.introjs-overlay { .introjs-overlay {
background: black; background: $blackish;
} }
#settings.introjs-fixParent { #settings.introjs-fixParent {
@ -7,7 +7,7 @@
} }
.introjs-tooltip { .introjs-tooltip {
color: black; color: $blackish;
} }
.introjs-skipbutton { .introjs-skipbutton {

4
mobile/app/styles/light-group.scss
View file

@ -34,10 +34,6 @@
transition-property: transform; transition-property: transform;
box-shadow: 0 0 1px rgba(0, 0, 0, 0); box-shadow: 0 0 1px rgba(0, 0, 0, 0);
} }
img:hover {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
} }
.ember-modal-overlay.translucent { .ember-modal-overlay.translucent {

114
mobile/app/styles/music-tab.scss
View file

@ -2,42 +2,40 @@
margin: 0; margin: 0;
} }
#beat-option-row {
height: 250px;
}
#light-option {
text-align: left !important;
top: 20%;
}
#music-tab { #music-tab {
padding: 0; padding: 0;
margin: 10px 0 20px; margin: 10px 0 20px;
} }
#slide-toggle { #slide-toggle {
font-size: 26px;
color: $playerDefaultIconColor; color: $playerDefaultIconColor;
background: #730B07; background: #730B07;
div .paper-icon { div .paper-icon {
color: inherit !important; color: inherit !important;
font-size: 26px;
font-weight: bold;
} }
} }
#slide-toggle:hover{
color: lighten($playerDefaultIconColor, 30%) !important;;
}
#player-controls { #player-controls {
transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 0;
padding: 5px 10px; padding: 15px 10px;
width: 100%; width: 100%;
color: white !important; color: white !important;
z-index: 20; z-index: 20;
background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 1)); background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
.ember-basic-dropdown-trigger {
position: absolute;
right: 0;
bottom: 10px;
}
md-menu-item > .md-button md-icon {
margin: auto 0 5px 10px;
}
.play-arrow, .pause, .replay { .play-arrow, .pause, .replay {
font-size: 30px; font-size: 30px;
} }
@ -53,24 +51,21 @@
.player-control-icon { .player-control-icon {
color: $playerDefaultIconColor !important; color: $playerDefaultIconColor !important;
transition-duration: 0.1s; transition-duration: 0.1s;
margin-right: 5px; margin-right: 10px;
font-size: 22px;
} }
.player-control-icon.active { .player-control-icon.active {
color: $secondaryThemeColor !important; color: $secondaryThemeColor !important;
} }
.player-control-icon:hover {
color: white !important;
}
#play-notification { #play-notification {
position: relative; position: relative;
color: white; color: white !important;
background: black;
top: 50%; top: 50%;
left: 50%; left: 50%;
opacity: 0; opacity: 0;
background: black;
border-radius: 100%; border-radius: 100%;
} }
@ -88,18 +83,18 @@
} }
#player-area * .noUi-origin { #player-area * .noUi-origin {
background-color: black; background-color: $blackish;
border-radius: 5px; border-radius: 5px;
} }
#player-area * .noUi-base { #player-area * .noUi-base {
background-color: black; background-color: $blackish;
border-radius: 5px; border-radius: 5px;
} }
#volume-bar { #volume-bar {
width: 5em; width: 5em;
height: 0.4em; height: 0.5em;
display: inline-block; display: inline-block;
} }
@ -108,17 +103,12 @@
} }
#seek-slider { #seek-slider {
height: 6px; margin-bottom: 15px;
margin-bottom: 10px;
transition-duration: 0.2s; transition-duration: 0.2s;
}
#seek-slider:hover {
height: 8px; height: 8px;
} .noUi-handle {
opacity: 1 !important;
#seek-slider:hover * .noUi-handle { }
opacity: 1;
} }
#seek-slider * .noUi-handle { #seek-slider * .noUi-handle {
@ -135,17 +125,28 @@
} }
#play-list-controls { #play-list-controls {
min-height: 30px; min-height: 40px;
margin-top: 5px; margin-top: 5px;
border-bottom: 1px solid #3a3a3a; border-bottom: 1px solid #3a3a3a;
position: relative; position: relative;
font-size: 20px;
button .player-control-icon {
margin: 0 5px 1px 3px;
}
.ember-basic-dropdown-trigger {
float: right;
color: $whitish;
.paper-button {
margin: 0;
}
}
} }
#play-list-area, #play-area-mic { #play-list-area, #play-area-mic {
background-color: white; background-color: white;
width: 100%; width: 100%;
height: 350px; height: 350px;
margin: 10px auto 0 auto; margin: 5px auto;
border-radius: 5px; border-radius: 5px;
transition: 0.1s all ease-in-out; transition: 0.1s all ease-in-out;
position: relative; position: relative;
@ -184,7 +185,7 @@
font-family: 'Open Sans', sans-serif; font-family: 'Open Sans', sans-serif;
padding: 0 20px 0 5px; padding: 0 20px 0 5px;
position: relative; position: relative;
color: black; color: $blackish;
background: darken(white, 5%); background: darken(white, 5%);
.close { .close {
font-size: 18px; font-size: 18px;
@ -224,7 +225,6 @@
} }
#beat-area { #beat-area {
height: $playerBottomHeight;
position: relative; position: relative;
padding: 0; padding: 0;
margin-bottom: 10px; margin-bottom: 10px;
@ -241,7 +241,7 @@
margin: 0; margin: 0;
} }
.option-description { .option-description {
font-size: 16px; font-size: 18px;
} }
button { button {
margin-top: 0; margin-top: 0;
@ -249,15 +249,19 @@
} }
#player-bottom { #player-bottom {
color: black; color: $blackish;
border: 1px solid black; border: 1px solid black;
width: 100%; width: 100%;
background: white; background: white;
padding-bottom: 20px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px
} }
#beat-container { #beat-container {
padding: 0; padding: 0;
height: $playerBottomHeight; height: $playerBottomHeight;
margin: 0;
} }
#beat-area .light-group { #beat-area .light-group {
@ -285,12 +289,10 @@
border: none; border: none;
} }
.add-new-music:hover {
background: darken(#f8f8f8, 5%);
}
.sound-cloud-link { .sound-cloud-link {
margin-right: 5px; position: absolute;
right: 55px;
bottom: 22px;
} }
#visualization { #visualization {
@ -303,6 +305,7 @@
position: absolute; position: absolute;
top: 3px; top: 3px;
z-index: 1000; z-index: 1000;
right: 5px;
md-icon { md-icon {
color: $secondaryThemeColor !important; color: $secondaryThemeColor !important;
font-size: 25px; font-size: 25px;
@ -343,32 +346,9 @@
font-size: 18px !important; font-size: 18px !important;
color: rgb(51, 51, 51); color: rgb(51, 51, 51);
text-shadow: none; text-shadow: none;
&:hover {
color: darken(#333333, 5%) !important;
}
} }
.ember-notify-default.ember-notify-cn { .ember-notify-default.ember-notify-cn {
top: 0; top: 0;
bottom: initial; bottom: initial;
} }
// mobile overrides
@media(max-width:767px) {
#seek-slider {
height: 8px;
.noUi-handle {
opacity: 1 !important;
}
}
#seek-slider {
margin-bottom: 15px;
}
.beat-option {
text-align: center !important;
}
#save-beat-preferences-star {
right: 5px;
left: initial;
}
}

4
mobile/app/styles/noui-slider.scss
View file

@ -29,10 +29,6 @@
background: $playerDefaultIconColor !important; background: $playerDefaultIconColor !important;
} }
.noUi-horizontal .noUi-handle:hover {
background: white !important;
}
.noUi-target { .noUi-target {
margin: 0 auto; margin: 0 auto;
} }

9
mobile/app/styles/paper.scss
View file

@ -10,9 +10,6 @@ md-checkbox.md-default-theme.md-checked .md-icon {
md-checkbox .md-label { md-checkbox .md-label {
width: 125px; width: 125px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} }
.md-button { .md-button {
@ -42,9 +39,3 @@ md-icon {
md-switch.md-default-theme.md-checked .md-thumb { md-switch.md-default-theme.md-checked .md-thumb {
background-color: $secondaryThemeColor; background-color: $secondaryThemeColor;
} }
@media(max-width:500px) {
md-checkbox .md-label {
width: 70px;
}
}

2
mobile/bower.json
View file

@ -1,7 +1,7 @@
{ {
"name": "huegasm", "name": "huegasm",
"dependencies": { "dependencies": {
"HackTimer": "https://github.com/turuslan/HackTimer.git#~1.0.0", "HackTimer": "https://github.com/turuslan/HackTimer.git#~1.1.0",
"JavaScript-ID3-Reader": "https://github.com/aadsm/JavaScript-ID3-Reader.git", "JavaScript-ID3-Reader": "https://github.com/aadsm/JavaScript-ID3-Reader.git",
"bootstrap-sass": "^3.3.5", "bootstrap-sass": "^3.3.5",
"ember": "beta", "ember": "beta",

4
mobile/ember-cli-build.js
View file

@ -4,12 +4,12 @@ var EmberApp = require('ember-cli/lib/broccoli/ember-app');
module.exports = function(defaults) { module.exports = function(defaults) {
var app = new EmberApp(defaults); var app = new EmberApp(defaults);
app.import('bower_components/HackTimer/HackTimer.js');
app.import('vendor/dancer.js'); app.import('vendor/dancer.js');
app.import('bower_components/bootstrap-sass/assets/javascripts/bootstrap/tooltip.js'); app.import('bower_components/bootstrap-sass/assets/javascripts/bootstrap/tooltip.js');
app.import('bower_components/bootstrap-sass/assets/javascripts/bootstrap/dropdown.js');
app.import('bower_components/bootstrap-sass/assets/javascripts/bootstrap/popover.js'); app.import('bower_components/bootstrap-sass/assets/javascripts/bootstrap/popover.js');
app.import('bower_components/HackTimer/HackTimer.js');
app.import('bower_components/intro.js/intro.js'); app.import('bower_components/intro.js/intro.js');
app.import('bower_components/intro.js/introjs.css'); app.import('bower_components/intro.js/introjs.css');
app.import('bower_components/JavaScript-ID3-Reader/dist/id3-minimized.js'); app.import('bower_components/JavaScript-ID3-Reader/dist/id3-minimized.js');

6
mobile/package.json
View file

@ -10,7 +10,7 @@
"scripts": { "scripts": {
"start": "ember server", "start": "ember server",
"build": "ember build", "build": "ember build",
"test": "ember test" "test": "ember test",
}, },
"engines": { "engines": {
"node": ">= 0.10.0" "node": ">= 0.10.0"
@ -34,12 +34,12 @@
"ember-cli-sri": "^2.1.0", "ember-cli-sri": "^2.1.0",
"ember-cli-test-loader": "^1.1.0", "ember-cli-test-loader": "^1.1.0",
"ember-cli-uglify": "^1.2.0", "ember-cli-uglify": "^1.2.0",
"ember-cordova": "0.3.5", "ember-cordova": "^0.3.5",
"ember-export-application-global": "^1.0.4", "ember-export-application-global": "^1.0.4",
"ember-load-initializers": "^0.5.0", "ember-load-initializers": "^0.5.0",
"ember-modal-dialog": "^0.9.0", "ember-modal-dialog": "^0.9.0",
"ember-notify": "^5.0.4", "ember-notify": "^5.0.4",
"ember-paper": "^1.0.0-alpha.5", "ember-paper": "^1.0.0-alpha.7",
"ember-resolver": "^2.0.3", "ember-resolver": "^2.0.3",
"ember-truth-helpers": "^1.2.0", "ember-truth-helpers": "^1.2.0",
"loader.js": "^4.0.7" "loader.js": "^4.0.7"

43
web/app/pods/components/hue-controls/template.hbs
View file

@ -3,34 +3,33 @@
{{#each tabData as |tab|}} {{#each tabData as |tab|}}
<span class="navigation-item pointer text-uppercase {{if tab.selected "active"}}" {{action "changeTab" tab.name}}>{{tab.name}}</span> <span class="navigation-item pointer text-uppercase {{if tab.selected "active"}}" {{action "changeTab" tab.name}}>{{tab.name}}</span>
{{/each}} {{/each}}
<div id="settings"> {{#paper-menu as |menu|}}
<span data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="settings-itemSettings"> {{#menu.trigger}}
{{paper-icon "settings" class=dimmerOnClass id="settings-icon" size=28}} {{#paper-button iconButton=true}}
</span> {{paper-icon "settings-icon" class=dimmerOnClass size=28}}
{{/paper-button}}
{{/menu.trigger}}
{{#menu.content width=3 as |content|}}
{{#content.menu-item onClick="clearBridge"}}
{{paper-icon "compare arrows" class=dimmerOnClass}} Switch bridge
{{/content.menu-item}}
<ul id="settings-menu" class="dropdown-menu"> {{#content.menu-item onClick="startIntro"}}
<li {{action "clearBridge"}}> {{paper-icon "cached" class=dimmerOnClass}} Restart tutorial
<a href="#"> {{/content.menu-item}}
Switch bridge
</a> {{#content.menu-item onClick="clearAllSettings"}}
</li> {{paper-icon "settings backup restore" class=dimmerOnClass}} Reset settings
<li {{action "startIntro"}}> {{/content.menu-item}}
<a href="#"> {{/menu.content}}
Restart tutorial {{/paper-menu}}
</a>
</li>
<li {{action "clearAllSettings"}}>
<a href="#">
Reset settings
</a>
</li>
</ul>
</div>
</div> </div>
{{light-group lightsData=lightsData activeLights=activeLights syncLight=syncLight apiURL=apiURL dimmerOn=dimmerOn storage=storage}} {{light-group lightsData=lightsData activeLights=activeLights syncLight=syncLight apiURL=apiURL dimmerOn=dimmerOn storage=storage}}
<div class="row">
{{lights-tab apiURL=apiURL lightsData=lightsData activeLights=activeLights syncLight=syncLight trial=trial active=lightsTabSelected colorLoopOn=colorLoopOn dimmerOn=dimmerOn}} {{lights-tab apiURL=apiURL lightsData=lightsData activeLights=activeLights syncLight=syncLight trial=trial active=lightsTabSelected colorLoopOn=colorLoopOn dimmerOn=dimmerOn}}
{{music-tab apiURL=apiURL lightsData=lightsData activeLights=activeLights active=musicTabSelected pauseLightUpdates=pauseLightUpdates dimmerOn=dimmerOn storage=storage colorLoopOn=colorLoopOn action="startIntro"}} {{music-tab apiURL=apiURL lightsData=lightsData activeLights=activeLights active=musicTabSelected pauseLightUpdates=pauseLightUpdates dimmerOn=dimmerOn storage=storage colorLoopOn=colorLoopOn action="startIntro"}}
</div>
{{/if}} {{/if}}

28
web/app/pods/components/lights-tab/component.js
View file

@ -13,8 +13,6 @@ export default Component.extend({
classNameBindings: ['active::hidden'], classNameBindings: ['active::hidden'],
elementId: 'lights-tab', elementId: 'lights-tab',
colorPickerDisplayed: false,
rgb: [255, 255, 255], rgb: [255, 255, 255],
lightsOn: false, lightsOn: false,
@ -30,14 +28,6 @@ export default Component.extend({
return this.get('colorLoopOn') ? 'On' : 'Off'; return this.get('colorLoopOn') ? 'On' : 'Off';
}), }),
colorRowAction: computed('strobeOn', function() {
if (this.get('trial')) {
return null;
}
return 'toggleColorPicker';
}),
// determines the average brightness of the hue system for the brightness slider // determines the average brightness of the hue system for the brightness slider
lightsBrightness: computed('lightsData', function(){ lightsBrightness: computed('lightsData', function(){
let lightsData = this.get('lightsData'), let lightsData = this.get('lightsData'),
@ -173,24 +163,6 @@ export default Component.extend({
}); });
}), }),
didInsertElement() {
$(document).click((event)=>{
if(this.get('colorPickerDisplayed') && !event.target.classList.contains('color') && !$(event.target).closest('#color-picker, #color-row').length) {
this.toggleProperty('colorPickerDisplayed');
}
});
$(document).on('click', '#color-row', () => {
this.send('toggleColorPicker');
});
},
actions: {
toggleColorPicker() {
this.toggleProperty('colorPickerDisplayed');
}
},
// **************** STROBE LIGHT START **************** // **************** STROBE LIGHT START ****************
strobeOn: false, strobeOn: false,

31
web/app/pods/components/lights-tab/template.hbs
View file

@ -1,38 +1,43 @@
{{#paper-list}} {{#paper-list}}
{{#paper-item}} {{#paper-item}}
{{paper-icon "power-settings-new" class=dimmerOnClass}} {{paper-icon "power-settings-new" class=dimmerOnClass}}
<p data-toggle="tooltip" data-placement="bottom auto" class="bootstrap-tooltip lights-control-tooltip" data-title="Turn the selected lights on/off">Power</p> <p data-toggle="tooltip" data-placement="top auto" class="bootstrap-tooltip lights-control-tooltip" data-title="Turn the selected lights on/off">Power</p>
{{paper-switch value=lightsOn onChange=(action (mut lightsOn)) disabled=trial skipProxy=trial label=lightsOnTxt}} {{paper-switch value=lightsOn onChange=(action (mut lightsOn)) disabled=trial skipProxy=trial label=lightsOnTxt}}
{{/paper-item}} {{/paper-item}}
{{#paper-item}} {{#paper-item}}
{{paper-icon "brightness-4" class=dimmerOnClass}} {{paper-icon "brightness-4" class=dimmerOnClass}}
<p data-toggle="tooltip" data-placement="bottom auto" class="bootstrap-tooltip lights-control-tooltip" data-title="The brightness level of the selected lights">Brightness</p> <p data-toggle="tooltip" data-placement="top auto" class="bootstrap-tooltip lights-control-tooltip" data-title="The brightness level of the selected lights">Brightness</p>
{{paper-slider flex=true min='1' max='254' value=lightsBrightness disabled=brightnessControlDisabled}} {{paper-slider flex=true min=1 max=254 value=lightsBrightness disabled=brightnessControlDisabled}}
{{/paper-item}} {{/paper-item}}
{{#paper-item elementId="color-row"}} {{#paper-item elementId="color-row"}}
{{paper-icon "color-lens" class=dimmerOnClass}} {{paper-icon "color-lens" class=dimmerOnClass}}
<p data-toggle="tooltip" data-placement="bottom auto" class="bootstrap-tooltip lights-control-tooltip" data-title="The color of the selected lights">Color</p> <p data-toggle="tooltip" data-placement="top auto" class="bootstrap-tooltip lights-control-tooltip" data-title="The color of the selected lights">Color</p>
{{/paper-item}}
<div class="relative"> {{#paper-menu offset="0 -50" as |menu|}}
{{paper-button raised=true class="color" onClick=(action "toggleColorPicker") disabled=trial}} {{#menu.trigger}}
{{#paper-button iconButton=false}}
{{#if colorPickerDisplayed}} {{paper-button raised=true class="color" disabled=trial}}
{{/paper-button}}
{{/menu.trigger}}
{{#menu.content class="color-content" width=0 as |content|}}
{{#content.menu-item}}
{{lights-tab/color-picker lightsData=lightsData activeLights=activeLights rgb=rgb}} {{lights-tab/color-picker lightsData=lightsData activeLights=activeLights rgb=rgb}}
{{/if}} {{/content.menu-item}}
</div> {{/menu.content}}
{{/paper-menu}}
{{/paper-item}}
{{#paper-item}} {{#paper-item}}
{{paper-icon "flare" class=dimmerOnClass}} {{paper-icon "flare" class=dimmerOnClass}}
<p data-toggle="tooltip" data-placement="bottom auto" class="bootstrap-tooltip lights-control-tooltip" data-title="Selected lights will flash in sequential order">Strobe</p> <p data-toggle="tooltip" data-placement="top auto" class="bootstrap-tooltip lights-control-tooltip" data-title="Selected lights will flash in sequential order">Strobe</p>
{{paper-switch value=strobeOn onChange=(action (mut strobeOn)) disabled=trial skipProxy=trial label=strobeOnTxt}} {{paper-switch value=strobeOn onChange=(action (mut strobeOn)) disabled=trial skipProxy=trial label=strobeOnTxt}}
{{/paper-item}} {{/paper-item}}
{{#paper-item}} {{#paper-item}}
{{paper-icon "color-lens" class=dimmerOnClass}} {{paper-icon "loop" id="loop-addition" class=dimmerOnClass}} {{paper-icon "color-lens" class=dimmerOnClass}} {{paper-icon "loop" id="loop-addition" class=dimmerOnClass}}
<p data-toggle="tooltip" data-placement="bottom auto" class="bootstrap-tooltip lights-control-tooltip" data-title="Selected lights will slowly cycle through all the colors">Colorloop</p> <p data-toggle="tooltip" data-placement="top auto" class="bootstrap-tooltip lights-control-tooltip" data-title="Selected lights will slowly cycle through all the colors">Colorloop</p>
{{paper-switch value=colorLoopOn onChange=(action (mut colorLoopOn)) disabled=trial skipProxy=trial label=colorloopOnTxt}} {{paper-switch value=colorLoopOn onChange=(action (mut colorLoopOn)) disabled=trial skipProxy=trial label=colorloopOnTxt}}
{{/paper-item}} {{/paper-item}}
{{/paper-list}} {{/paper-list}}

3
web/app/pods/components/music-tab/component.js
View file

@ -363,6 +363,8 @@ export default Component.extend(helperMixin, visualizerMixin, {
}, },
didInsertElement() { didInsertElement() {
this._super();
let self = this; let self = this;
// file input code // file input code
@ -409,6 +411,7 @@ export default Component.extend(helperMixin, visualizerMixin, {
// demo tracks // demo tracks
if(this.get('firstVisit')){ if(this.get('firstVisit')){
this.send('handleNewSoundCloudURL', 'https://soundcloud.com/mrsuicidesheep/candyland-speechless-feat-rkcb'); this.send('handleNewSoundCloudURL', 'https://soundcloud.com/mrsuicidesheep/candyland-speechless-feat-rkcb');
this.send('handleNewSoundCloudURL', 'https://soundcloud.com/dillistone/dillistone-lili-n-rude');
this.send('handleNewSoundCloudURL', 'https://soundcloud.com/mrsuicidesheep/vallis-alps-young-feki-remix'); this.send('handleNewSoundCloudURL', 'https://soundcloud.com/mrsuicidesheep/vallis-alps-young-feki-remix');
this.send('handleNewSoundCloudURL', 'https://soundcloud.com/mrsuicidesheep/andrew-luce-when-to-love-you-feat-chelsea-cutler'); this.send('handleNewSoundCloudURL', 'https://soundcloud.com/mrsuicidesheep/andrew-luce-when-to-love-you-feat-chelsea-cutler');
this.send('handleNewSoundCloudURL', 'https://soundcloud.com/mrsuicidesheep/ahh-ooh-carefree-with-me'); this.send('handleNewSoundCloudURL', 'https://soundcloud.com/mrsuicidesheep/ahh-ooh-carefree-with-me');

12
web/app/pods/components/music-tab/mixins/helpers.js
View file

@ -102,7 +102,7 @@ export default Mixin.create({
usingLocalAudio: computed.equal('audioMode', 0), usingLocalAudio: computed.equal('audioMode', 0),
usingMicAudio: computed.equal('audioMode', 1), usingMicAudio: computed.equal('audioMode', 1),
playerBottomDisplayed: false, playerBottomDisplayed: true,
dragging: false, dragging: false,
draggingOverPlayListArea: false, draggingOverPlayListArea: false,
dragLeaveTimeoutHandle: null, dragLeaveTimeoutHandle: null,
@ -190,7 +190,7 @@ export default Mixin.create({
}), }),
largeArtworkPic: computed('playQueuePointer', 'usingMicAudio', 'currentVisName', function(){ largeArtworkPic: computed('playQueuePointer', 'usingMicAudio', 'currentVisName', function(){
let pic = null, let pic = '',
currentVisName = this.get('currentVisName'), currentVisName = this.get('currentVisName'),
usingMicAudio = this.get('usingMicAudio'), usingMicAudio = this.get('usingMicAudio'),
playQueuePointer = this.get('playQueuePointer'), playQueuePointer = this.get('playQueuePointer'),
@ -238,6 +238,14 @@ export default Mixin.create({
} }
}), }),
playerAreaClickIcon: computed('playing', function() {
if(this.get('playing')){
return 'play-arrow';
} else {
return 'pause';
}
}),
playListAreaClass: computed('dragging', 'draggingOverPlayListArea', 'dimmerOn', function(){ playListAreaClass: computed('dragging', 'draggingOverPlayListArea', 'dimmerOn', function(){
let classes = 'pointer'; let classes = 'pointer';

105
web/app/pods/components/music-tab/template.hbs
View file

@ -1,8 +1,12 @@
<div class="row" id="step1"> <div class="row" id="step1">
<div id="player-area" class="col-sm-8 col-xs-12 {{if (eq "None" currentVisName) "display-icon"}}" {{action "playerAreaPlay"}}> <div id="player-area" class="col-sm-8 col-xs-12 {{if (eq "None" currentVisName) "display-icon"}}" {{action "playerAreaPlay"}}>
<canvas id="visualization"></canvas> <canvas id="visualization"></canvas>
<div id="artwork"><img src={{largeArtworkPic}}></div>
<div id="play-notification" class="material-icons {{if playing "play-arrow" "pause"}}"></div> <div id="artwork">
<img src={{largeArtworkPic}}>
</div>
{{paper-icon playerAreaClickIcon id="play-notification"}}
<div id="player-controls"> <div id="player-controls">
{{#if usingLocalAudio}} {{#if usingLocalAudio}}
@ -20,36 +24,37 @@
-->{{/if}}<!-- -->{{/if}}<!--
--><span data-toggle="tooltip" data-placement="top" class="bootstrap-tooltip" id="volumeMutedTooltip" --><span data-toggle="tooltip" data-placement="top" class="bootstrap-tooltip" id="volumeMutedTooltip"
data-title={{volumeMutedTooltipTxt}} {{action "volumeMutedChanged"}}>{{paper-icon icon=volumeIcon class=volumeMutedClass}}</span><!-- data-title={{volumeMutedTooltipTxt}} {{action "volumeMutedChanged"}}>{{paper-icon icon=volumeIcon class=volumeMutedClass}}</span><!--
-->{{range-slider start=volume min=0 max=100 connect=filledConnect on-slide="volumeChanged" id="volume-bar"}} -->{{range-slider start=volume min=0 max=100 connect=filledConnect on-slide="volumeChanged" id="volume-bar" class="hidden-xs"}}
<div id="player-time-controls">{{timeElapsedTxt}} / {{timeTotalTxt}}</div> <div id="player-time-controls">{{timeElapsedTxt}} / {{timeTotalTxt}}</div>
{{/if}} {{/if}}
<span class="pull-right"> {{#paper-menu as |menu|}}
{{#if scUrl}} {{#menu.trigger}}
<a href="#" data-toggle="tooltip" data-placement="top" class="sound-cloud-link bootstrap-tooltip" data-title="Listen on SoundCloud" {{action "gotoSCURL" scUrl}}><img src="assets/images/sc-white.png" class="hidden-xs" /><img src="assets/images/sc-white-sm.png" class="visible-xs-inline" /></a> {{#paper-button iconButton=true}}
{{/if}}
<span class="dropup">
<span class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span data-toggle="tooltip" data-placement="top" class="bootstrap-tooltip" data-title="Visualizations" {{action "hideTooltip"}}>
{{paper-icon "remove-red-eye" class="player-control-icon"}} {{paper-icon "remove-red-eye" class="player-control-icon"}}
</span> {{/paper-button}}
</span> {{/menu.trigger}}
{{#menu.content width=2 as |content|}}
<ul class="dropdown-menu visualizers-menu">
{{#each visNames as |name|}} {{#each visNames as |name|}}
<li> {{#content.menu-item onClick=(action "setVisName" name)}}
<a href="#" {{action "setVisName" name}}>{{name}} {{name}}
{{#if (eq currentVisName name)}} {{#if (eq currentVisName name)}}
{{paper-icon "check" classNames=dimmerOnClass}} {{paper-icon "check" classNames=dimmerOnClass}}
{{/if}} {{/if}}
</a> {{/content.menu-item}}
</li>
{{/each}} {{/each}}
</ul> {{/menu.content}}
</span> {{/paper-menu}}
</span>
</div> {{#if scUrl}}
<a href={{scUrl}} class="sound-cloud-link"{{action "gotoSCURL" scUrl}}>
<img src="assets/images/sc-white.png" class="hidden-xs" />
<img src="assets/images/sc-white-sm.png" class="visible-xs-inline" />
</a>
{{/if}}
</div>
</div> </div>
<div id="playlist" class="col-sm-4 col-xs-12"> <div id="playlist" class="col-sm-4 col-xs-12">
@ -57,25 +62,31 @@
<div id="play-list-controls"> <div id="play-list-controls">
{{#if usingLocalAudio}} {{#if usingLocalAudio}}
<button class="dropdown-toggle pull-right add-new-music" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> {{#paper-menu as |menu|}}
Add new music {{#menu.trigger}}
<span class="caret"></span> {{#paper-button iconButton=false}}
</button> {{paper-icon "playlist add" class="player-control-icon"}} <span id="add-new-music-label">Add new music</span>
{{/paper-button}}
<ul id="add-music-choices" class="dropdown-menu"> {{/menu.trigger}}
<li><a href="#" {{action "addLocalAudio"}}>Local</a></li> {{#menu.content width=3 as |content|}}
<li><a href="#" {{action "toggleIsShowingAddSoundCloudModal"}}>SoundCloud</a></li> {{#content.menu-item onClick="addLocalAudio"}}
</ul> {{paper-icon "attachment" class=shuffleClass}} Local file
{{/content.menu-item}}
{{#content.menu-item onClick="toggleIsShowingAddSoundCloudModal"}}
{{paper-icon "cloud" class=shuffleClass}} SoundCloud
{{/content.menu-item}}
{{/menu.content}}
{{/paper-menu}}
{{/if}} {{/if}}
{{#if usingMicSupported}} {{#if usingMicSupported}}
<span data-toggle="tooltip" data-placement="bottom auto" class="bootstrap-tooltip" id="using-mic-audio-tooltip" data-title={{usingMicAudioTooltipTxt}} {{action "useMicAudio"}}>{{paper-icon icon=micIcon class=usingMicAudioClass}}</span> <span data-toggle="tooltip" data-placement="top auto" class="bootstrap-tooltip" id="using-mic-audio-tooltip" data-title={{usingMicAudioTooltipTxt}} {{action "useMicAudio"}}>{{paper-icon icon=micIcon class=usingMicAudioClass}}</span>
{{/if}} {{/if}}
{{#if usingLocalAudio}} {{#if usingLocalAudio}}
<span data-toggle="tooltip" data-placement="bottom auto" class="bootstrap-tooltip" id="shuffleTooltip" data-title={{shuffleTooltipTxt}} {{action "shuffleChanged"}}>{{paper-icon "shuffle" class=shuffleClass}}</span> <span data-toggle="tooltip" data-placement="top auto" class="bootstrap-tooltip" id="shuffleTooltip" data-title={{shuffleTooltipTxt}} {{action "shuffleChanged"}}>{{paper-icon "shuffle" class=shuffleClass}}</span>
<span data-toggle="tooltip" data-placement="bottom auto" class="bootstrap-tooltip" id="repeatTooltip" data-title={{repeatTooltipTxt}} {{action "repeatChanged"}}>{{paper-icon repeatIcon class=repeatClass}}</span> <span data-toggle="tooltip" data-placement="top auto" class="bootstrap-tooltip" id="repeatTooltip" data-title={{repeatTooltipTxt}} {{action "repeatChanged"}}>{{paper-icon repeatIcon class=repeatClass}}</span>
<span data-toggle="tooltip" data-placement="bottom auto" class="bootstrap-tooltip" data-title="Clear playlist" {{action "clearPlaylist"}}>{{paper-icon "clear-all" class="player-control-icon"}}</span> <span data-toggle="tooltip" data-placement="top auto" class="bootstrap-tooltip" data-title="Clear playlist" {{action "clearPlaylist"}}>{{paper-icon "clear-all" class="player-control-icon"}}</span>
{{/if}} {{/if}}
</div> </div>
@ -120,7 +131,7 @@
{{/if}} {{/if}}
</div> </div>
<span data-toggle="tooltip" data-placement="bottom auto" data-title="Remove" data-container="body" class="audio-remove-button pointer bootstrap-tooltip" {{action "removeAudio" index bubbles=false}}>{{paper-icon "close" classNames="close"}}</span> <span data-toggle="tooltip" data-placement="top auto" data-title="Remove" data-container="body" class="audio-remove-button pointer bootstrap-tooltip" {{action "removeAudio" index bubbles=false}}>{{paper-icon "close" classNames="close"}}</span>
</div> </div>
{{/each}} {{/each}}
</div> </div>
@ -130,30 +141,30 @@
</div> </div>
<div id="slide-toggle" class="text-center pointer row" {{action "slideTogglePlayerBottom"}}> <div id="slide-toggle" class="text-center pointer row" {{action "slideTogglePlayerBottom"}}>
<div class="col-xs-offset-5 col-xs-2"> <div class="col-xs-offset-5 col-xs-2">
{{paper-icon beatDetectionAreaArrowIcon id="beat-detection-area-arrow-icon"}} {{paper-icon beatDetectionAreaArrowIcon id="beat-detection-area-arrow-icon"}}
</div> </div>
</div> </div>
<div id="player-bottom" class="row {{if dimmerOn "dimmerOn"}}"> <div id="player-bottom" class="row {{if dimmerOn "dimmerOn"}}">
<div id="beat-area" class="col-sm-7 col-xs-12"> <div id="beat-area" class="col-sm-7 col-xs-12">
{{#if usingBeatPreferences}} {{#if usingBeatPreferences}}
<span data-toggle="tooltip" data-placement="bottom" data-title="Using the saved sensitivity preference from the last time you listened to this song" class="bootstrap-tooltip" id="save-beat-preferences-star"> <span data-toggle="tooltip" data-placement="top" data-title="Using the saved sensitivity preference from the last time you listened to this song" class="bootstrap-tooltip" id="save-beat-preferences-star">
{{paper-icon "star" class=dimmerOnClass}} {{paper-icon "star" class=dimmerOnClass}}
</span> </span>
{{/if}} {{/if}}
<div class="row" id="beat-option-row"> <div class="row" id="beat-option-row">
<div class="beat-option col-xs-4"> <div class="beat-option col-sm-4 col-xs-6">
<span data-toggle="tooltip" data-placement="bottom" data-title="The sensitivity of the beat detector ( more sensitivity results in more registered beats )" class="option-description bootstrap-tooltip"> <span data-toggle="tooltip" data-placement="top" data-title="The sensitivity of the beat detector ( more sensitivity results in more registered beats )" class="option-description bootstrap-tooltip">
Sensitivity Sensitivity
</span> </span>
{{range-slider start=threshold orientation="vertical" step=beatOptions.threshold.step range=beatOptions.threshold.range on-slide="thresholdChanged" pips=beatOptions.threshold.pips}} {{range-slider start=threshold orientation="vertical" step=beatOptions.threshold.step range=beatOptions.threshold.range on-slide="thresholdChanged" pips=beatOptions.threshold.pips}}
</div> </div>
<div class="beat-option col-xs-4"> <div class="beat-option col-sm-4 col-xs-6">
<span data-toggle="tooltip" data-placement="bottom" data-title="The range of hues ( colors ) that the lights may change to on beat." class="option-description bootstrap-tooltip"> <span data-toggle="tooltip" data-placement="top" data-title="The range of hues ( colors ) that the lights may change to on beat." class="option-description bootstrap-tooltip">
Hue Range Hue Range
</span> </span>
@ -162,7 +173,7 @@
{{#if usingMicAudio}} {{#if usingMicAudio}}
<div class="beat-option col-xs-4"> <div class="beat-option col-xs-4">
<span data-toggle="tooltip" data-placement="bottom" data-title="The coefficient to boost the microphone signal by" class="option-description bootstrap-tooltip"> <span data-toggle="tooltip" data-placement="top" data-title="The coefficient to boost the microphone signal by" class="option-description bootstrap-tooltip">
Mic Boost Mic Boost
</span> </span>
@ -170,12 +181,12 @@
</div> </div>
{{/if}} {{/if}}
<div id="light-option" class="beat-option col-xs-4"> <div id="light-option" class="beat-option col-sm-4 col-xs-12">
<span data-toggle="tooltip" data-placement="bottom auto" data-title="Quickly flash the lights on beat" class="bootstrap-tooltip" {{action "hideTooltip" on="mouseLeave"}}> <span data-toggle="tooltip" data-placement="top auto" data-title="Quickly flash the lights on beat" class="bootstrap-tooltip" {{action "hideTooltip" on="mouseLeave"}}>
{{paper-checkbox value=flashingTransitions onChange=(action (mut flashingTransitions)) label="Flashing Transitions"}} {{paper-checkbox value=flashingTransitions onChange=(action (mut flashingTransitions)) label="Flashing Transitions"}}
</span> </span>
<span data-toggle="tooltip" data-placement="bottom auto" data-title="Slowly cycle the lights through all the colors" class="bootstrap-tooltip" {{action "hideTooltip" on="mouseLeave"}}> <span data-toggle="tooltip" data-placement="top auto" data-title="Slowly cycle the lights through all the colors" class="bootstrap-tooltip" {{action "hideTooltip" on="mouseLeave"}}>
{{paper-checkbox value=colorloopMode onChange=(action (mut colorloopMode)) label="Colorloop"}} {{paper-checkbox value=colorloopMode onChange=(action (mut colorloopMode)) label="Colorloop"}}
</span> </span>

28
web/app/styles/app.scss
View file

@ -16,16 +16,6 @@
@import 'music-tab'; @import 'music-tab';
@import 'noui-slider'; @import 'noui-slider';
html {
min-height: 100%;
height: auto;
}
body {
margin-bottom: $footerHeight;
position: static;
}
body, button { body, button {
font-family: 'Slabo 27px', serif; font-family: 'Slabo 27px', serif;
} }
@ -35,12 +25,8 @@ body, button {
} }
#footer { #footer {
position: absolute;
left: 0;
bottom: 0;
width: 100%; width: 100%;
text-align: center; text-align: center;
height: $footerHeight;
} }
#footer-text { #footer-text {
@ -71,25 +57,17 @@ button.md-warn {
div.ember-modal-dialog { div.ember-modal-dialog {
padding: 20px; padding: 20px;
color: black; color: $blackish;
md-input-container { md-input-container {
width: 100%; width: 100%;
.md-input { input.md-input[type="text"] {
color: black !important; color: $blackish !important;
} }
} }
md-input-container label { md-input-container label {
color: rgba(0, 0, 0, 0.26); color: rgba(0, 0, 0, 0.26);
} }
} }
.dropdown-menu {
font-size: 14px;
a {
line-height: 2 !important;
}
}
// fancy webkit scrollbars // fancy webkit scrollbars
::-webkit-scrollbar { ::-webkit-scrollbar {
-webkit-appearance: none; -webkit-appearance: none;

5
web/app/styles/bridge-finder.scss
View file

@ -30,8 +30,11 @@
font-size: 16px; font-size: 16px;
} }
#bridge-finder .md-bar { #bridge-finder {
min-height: 500px;
.md-bar {
background-color: $secondaryThemeColor !important; background-color: $secondaryThemeColor !important;
}
} }
// preloading image // preloading image

12
web/app/styles/dimmer.scss
View file

@ -26,17 +26,12 @@ body.dimmerOn {
.color { .color {
border: 1px solid white; border: 1px solid white;
} }
.playlist-item, .dropdown-menu, .add-new-music { .playlist-item, .ember-basic-dropdown-content md-menu-content {
color: $whitish; color: $whitish;
background-color: $dimmerOnButtonColor; background-color: $dimmerOnButtonColor;
} }
.dropdown-menu { .ember-basic-dropdown-content a {
a {
color: $whitish; color: $whitish;
&:hover {
background-color: darken($dimmerOnButtonColor, 10%) !important;
}
}
} }
.playlist-item { .playlist-item {
&.active { &.active {
@ -62,14 +57,13 @@ body.dimmerOn {
background: darken($dimmerOnButtonColor, 5%); background: darken($dimmerOnButtonColor, 5%);
} }
.popover-content { .popover-content {
color: black !important; color: $blackish !important;
} }
.md-bar { .md-bar {
background-color: darken(white, 60%) !important; background-color: darken(white, 60%) !important;
} }
} }
.paper-icon.dimmerOn { .paper-icon.dimmerOn {
color: inherit !important; color: inherit !important;
text-shadow: $glowingText; text-shadow: $glowingText;

43
web/app/styles/hue-controls.scss
View file

@ -3,6 +3,9 @@
.paper-icon { .paper-icon {
line-height: 0.8 !important; line-height: 0.8 !important;
} }
md-slider {
width: 50%;
}
} }
.lights-control-tooltip + .tooltip { .lights-control-tooltip + .tooltip {
@ -11,6 +14,9 @@
#color-row { #color-row {
cursor: pointer; cursor: pointer;
.md-list-item-inner {
padding-right: 0;
}
} }
#hue-controls { #hue-controls {
@ -44,9 +50,10 @@
.color { .color {
border: 1px solid rgba(0, 0, 0, 0.5); border: 1px solid rgba(0, 0, 0, 0.5);
position: absolute; }
top: -53px;
right: 0; .color-row .md-list-item-inner {
padding-right: 0;
} }
#color-picker { #color-picker {
@ -62,6 +69,13 @@
z-index: 3; z-index: 3;
} }
.color-content {
box-shadow: none !important;
md-menu-content, md-menu-item {
background-color: transparent !important;
}
}
#picker { #picker {
cursor: crosshair; cursor: crosshair;
} }
@ -73,34 +87,13 @@
font-size: 16px; font-size: 16px;
} }
#settings { #navigation .ember-basic-dropdown-trigger {
z-index: 3; z-index: 3;
text-align: right; text-align: right;
cursor: pointer;
float: right; float: right;
position: relative; position: relative;
} }
#settings-menu {
position: absolute;
box-shadow: 1px 10px 15px 1px rgba(0, 0, 0, 0.3);
left: -135px;
top: 25px;
border: none;
padding: 0;
}
#settings-icon {
transition: 0.1s all ease-in-out;
&:hover {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
&:before {
transition: 0.1s all ease-in-out;
}
}
@media(min-width:767px) { @media(min-width:767px) {
#lights-tab { #lights-tab {
font-size: 20px; font-size: 20px;

1
web/app/styles/huegasm-variables.scss
View file

@ -1,6 +1,5 @@
$playerHeight: 400px; $playerHeight: 400px;
$playerDefaultIconColor: #BBBBBB; $playerDefaultIconColor: #BBBBBB;
$footerHeight: 50px;
$playerBottomHeight: 255px; $playerBottomHeight: 255px;
$secondaryThemeColor: #F12B24; $secondaryThemeColor: #F12B24;
$glowingText: 0 0 2px #fff, 0 0 4px #fff, 0 0 20px #228DFF; $glowingText: 0 0 2px #fff, 0 0 4px #fff, 0 0 20px #228DFF;

4
web/app/styles/introjs.scss
View file

@ -1,5 +1,5 @@
.introjs-overlay { .introjs-overlay {
background: black; background: $blackish;
} }
#settings.introjs-fixParent { #settings.introjs-fixParent {
@ -7,7 +7,7 @@
} }
.introjs-tooltip { .introjs-tooltip {
color: black; color: $blackish;
} }
.introjs-skipbutton { .introjs-skipbutton {

105
web/app/styles/music-tab.scss
View file

@ -2,28 +2,20 @@
margin: 0; margin: 0;
} }
#beat-option-row {
height: 250px;
}
#light-option {
text-align: left !important;
top: 20%;
.tooltip {
margin-top: 5px !important;
}
}
#music-tab { #music-tab {
padding: 0; padding: 0;
margin: 10px 0 $footerHeight + 20px; margin-top: 10px;
margin-bottom: 20px;
} }
#slide-toggle { #slide-toggle {
font-size: 28px;
color: $playerDefaultIconColor; color: $playerDefaultIconColor;
background: #730B07; background: #730B07;
div .paper-icon { div .paper-icon {
color: inherit !important; color: inherit !important;
font-size: 28px;
font-weight: bold;
} }
} }
@ -36,17 +28,26 @@
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 0;
padding: 5px 10px; padding: 15px 10px;
width: 100%; width: 100%;
color: white !important; color: white !important;
z-index: 20; z-index: 20;
cursor: default;
background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 1)); background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
.ember-basic-dropdown-trigger {
position: absolute;
right: 0;
bottom: 13px;
}
.tooltip.top { .tooltip.top {
margin-top: -17px; margin-top: -17px;
} }
.tooltip-arrow { .tooltip-arrow {
display: none; display: none;
} }
md-menu-item > .md-button md-icon {
margin: auto 0 5px 10px;
}
.play-arrow, .pause, .replay { .play-arrow, .pause, .replay {
font-size: 30px; font-size: 30px;
} }
@ -62,7 +63,9 @@
.player-control-icon { .player-control-icon {
color: $playerDefaultIconColor !important; color: $playerDefaultIconColor !important;
transition-duration: 0.1s; transition-duration: 0.1s;
margin-right: 5px; margin-right: 10px;
margin-top: 4px;
font-size: 22px;
} }
.player-control-icon.active { .player-control-icon.active {
@ -75,11 +78,11 @@
#play-notification { #play-notification {
position: relative; position: relative;
color: white; color: white !important;
background: black;
top: 50%; top: 50%;
left: 50%; left: 50%;
opacity: 0; opacity: 0;
background: black;
border-radius: 100%; border-radius: 100%;
} }
@ -88,6 +91,7 @@
background-color: black; background-color: black;
display: inline-block; display: inline-block;
padding: 0; padding: 0;
cursor: pointer;
} }
#playlist { #playlist {
@ -97,18 +101,18 @@
} }
#player-area * .noUi-origin { #player-area * .noUi-origin {
background-color: black; background-color: $blackish;
border-radius: 5px; border-radius: 5px;
} }
#player-area * .noUi-base { #player-area * .noUi-base {
background-color: black; background-color: $blackish;
border-radius: 5px; border-radius: 5px;
} }
#volume-bar { #volume-bar {
width: 5em; width: 5em;
height: 0.4em; height: 0.5em;
display: inline-block; display: inline-block;
} }
@ -117,9 +121,12 @@
} }
#seek-slider { #seek-slider {
height: 6px; margin-bottom: 15px;
margin-bottom: 10px;
transition-duration: 0.2s; transition-duration: 0.2s;
height: 8px;
.noUi-handle {
opacity: 1 !important;
}
} }
#seek-slider:hover { #seek-slider:hover {
@ -144,17 +151,27 @@
} }
#play-list-controls { #play-list-controls {
min-height: 30px; min-height: 40px;
margin-top: 5px; margin-top: 5px;
border-bottom: 1px solid #3a3a3a; border-bottom: 1px solid #3a3a3a;
position: relative; position: relative;
button .player-control-icon {
margin: 0 5px 1px 3px;
}
.ember-basic-dropdown-trigger {
float: right;
color: $whitish;
.paper-button {
margin: 0;
}
}
} }
#play-list-area, #play-area-mic { #play-list-area, #play-area-mic {
background-color: white; background-color: white;
width: 100%; width: 100%;
height: 350px; height: 350px;
margin: 10px auto 0 auto; margin: 5px auto;
border-radius: 5px; border-radius: 5px;
transition: 0.1s all ease-in-out; transition: 0.1s all ease-in-out;
position: relative; position: relative;
@ -203,7 +220,7 @@
font-family: 'Open Sans', sans-serif; font-family: 'Open Sans', sans-serif;
padding: 0 20px 0 5px; padding: 0 20px 0 5px;
position: relative; position: relative;
color: black; color: $blackish;
background: darken(white, 5%); background: darken(white, 5%);
.close { .close {
font-size: 18px; font-size: 18px;
@ -260,14 +277,21 @@
margin: 20px 0 10px 0; margin: 20px 0 10px 0;
} }
#light-option {
margin-top: 14%;
}
.beat-option { .beat-option {
padding: 5px 0; padding: 5px 0;
text-align: center; text-align: center;
md-checkbox {
padding: 10px 0;
}
md-switch { md-switch {
margin: 0; margin: 0;
} }
.option-description { .option-description {
font-size: 16px; font-size: 20px;
} }
button { button {
margin-top: 0; margin-top: 0;
@ -278,15 +302,19 @@
} }
#player-bottom { #player-bottom {
color: black; color: $blackish;
border: 1px solid black; border: 1px solid black;
width: 100%; width: 100%;
background: white; background: white;
padding-bottom: 20px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px
} }
#beat-container { #beat-container {
padding: 0; padding: 0;
height: $playerBottomHeight; height: $playerBottomHeight;
margin: 0;
} }
#beat-area .light-group { #beat-area .light-group {
@ -319,7 +347,9 @@
} }
.sound-cloud-link { .sound-cloud-link {
margin-right: 5px; position: absolute;
right: 55px;
bottom: 22px;
} }
#visualization { #visualization {
@ -385,8 +415,24 @@
bottom: initial; bottom: initial;
} }
@media(min-width:767px) and (max-width:1000px) {
#add-new-music-label {
display: none;
}
#play-list-controls .paper-button {
border: 1px solid $whitish;
border-radius: 5px;
}
}
// mobile overrides // mobile overrides
@media(max-width:767px) { @media(max-width:767px) {
#light-option {
margin-top: 0;
}
#beat-area {
height: initial;
}
#seek-slider { #seek-slider {
height: 8px; height: 8px;
.noUi-handle { .noUi-handle {
@ -406,4 +452,7 @@
right: 5px; right: 5px;
left: initial; left: initial;
} }
md-checkbox {
padding-right: 20px !important;
}
} }

7
web/app/styles/paper.scss
View file

@ -14,9 +14,7 @@ md-checkbox.md-default-theme.md-checked .md-icon {
md-checkbox .md-label { md-checkbox .md-label {
width: 125px; width: 125px;
white-space: nowrap; text-align: left;
overflow: hidden;
text-overflow: ellipsis;
} }
.md-button { .md-button {
@ -56,9 +54,6 @@ md-switch.md-default-theme.md-checked .md-thumb {
} }
@media(max-width:500px) { @media(max-width:500px) {
md-checkbox .md-label {
width: 70px;
}
#save-beat-preferences-star { #save-beat-preferences-star {
right: 5px; right: 5px;
} }

2
web/bower.json
View file

@ -1,7 +1,7 @@
{ {
"name": "huegasm", "name": "huegasm",
"dependencies": { "dependencies": {
"HackTimer": "https://github.com/turuslan/HackTimer.git#~1.0.0", "HackTimer": "https://github.com/turuslan/HackTimer.git#~1.1.0",
"JavaScript-ID3-Reader": "https://github.com/aadsm/JavaScript-ID3-Reader.git", "JavaScript-ID3-Reader": "https://github.com/aadsm/JavaScript-ID3-Reader.git",
"bootstrap-sass": "^3.3.5", "bootstrap-sass": "^3.3.5",
"ember": "beta", "ember": "beta",

4
web/ember-cli-build.js
View file

@ -4,12 +4,12 @@ var EmberApp = require('ember-cli/lib/broccoli/ember-app');
module.exports = function(defaults) { module.exports = function(defaults) {
var app = new EmberApp(defaults); var app = new EmberApp(defaults);
app.import('bower_components/HackTimer/HackTimer.js');
app.import('vendor/dancer.js'); app.import('vendor/dancer.js');
app.import('bower_components/bootstrap-sass/assets/javascripts/bootstrap/tooltip.js'); app.import('bower_components/bootstrap-sass/assets/javascripts/bootstrap/tooltip.js');
app.import('bower_components/bootstrap-sass/assets/javascripts/bootstrap/dropdown.js');
app.import('bower_components/bootstrap-sass/assets/javascripts/bootstrap/popover.js'); app.import('bower_components/bootstrap-sass/assets/javascripts/bootstrap/popover.js');
app.import('bower_components/HackTimer/HackTimer.js');
app.import('bower_components/intro.js/intro.js'); app.import('bower_components/intro.js/intro.js');
app.import('bower_components/intro.js/introjs.css'); app.import('bower_components/intro.js/introjs.css');
app.import('bower_components/JavaScript-ID3-Reader/dist/id3-minimized.js'); app.import('bower_components/JavaScript-ID3-Reader/dist/id3-minimized.js');

2
web/package.json
View file

@ -38,7 +38,7 @@
"ember-load-initializers": "^0.5.0", "ember-load-initializers": "^0.5.0",
"ember-modal-dialog": "^0.9.0", "ember-modal-dialog": "^0.9.0",
"ember-notify": "^5.0.4", "ember-notify": "^5.0.4",
"ember-paper": "^1.0.0-alpha.5", "ember-paper": "^1.0.0-alpha.7",
"ember-resolver": "^2.0.3", "ember-resolver": "^2.0.3",
"ember-truth-helpers": "^1.2.0", "ember-truth-helpers": "^1.2.0",
"loader.js": "^4.0.7" "loader.js": "^4.0.7"

5069
web/yarn.lock
View file

File diff suppressed because it is too large Load diff