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

modernizing: further modularizing the stylesheets, new bootstrap stylesheet to allow the ( manual ) removal of bootstrap modules, velocityjs over jquery animations, fancier scrollbars for webkit

Browse source 
Still mostly FUBAR - WIP
This commit is contained in:
lone-cloud 2016-10-11 17:18:29 -07:00
parent 38789b5e45
commit 977fdd0d47
35 changed files with 1053 additions and 1085 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
README.md
View file

@ -1,9 +1,12 @@
# Huegasm # Huegasm
Music awesomeness for hue lights. Music awesomeness for hue lights.
It lives at http://www.huegasm.com It lives at http://www.huegasm.com
# Current priorities
- modernize the app
- create a hybrid app with Cardova
## POSSIBLE FUTURE FEATURES ## POSSIBLE FUTURE FEATURES
- better visualizations - better visualizations

11
web/README.md
View file

@ -1,7 +1,7 @@
# Huegasm # Huegasm
This README outlines the details of collaborating on this Ember application. This README outlines the details of collaborating on this Ember application.
A short introduction of this app could easily go here. Music awesomeness for hue lights.
## Prerequisites ## Prerequisites
@ -29,20 +29,11 @@ You will need the following things properly installed on your computer.
Make use of the many generators for code, try `ember help generate` for more details Make use of the many generators for code, try `ember help generate` for more details
### Running Tests
* `ember test`
* `ember test --server`
### Building ### Building
* `ember build` (development) * `ember build` (development)
* `ember build --environment production` (production) * `ember build --environment production` (production)
### Deploying
Specify what it takes to deploy your app.
## Further Reading / Useful Links ## Further Reading / Useful Links
* [ember.js](http://emberjs.com/) * [ember.js](http://emberjs.com/)

8
web/app/pods/components/bridge-finder/template.hbs
View file

@ -6,14 +6,14 @@
This likely happened because you're using an outdated browser and/or because your browser does not support <a href="https://en.wikipedia.org/wiki/Cross-origin_resource_sharing">CORS</a>. Feel free to contact me through the link at the bottom of the page if you feel like this is not the case.<br> This likely happened because you're using an outdated browser and/or because your browser does not support <a href="https://en.wikipedia.org/wiki/Cross-origin_resource_sharing">CORS</a>. Feel free to contact me through the link at the bottom of the page if you feel like this is not the case.<br>
For the best browsing experience on this site ( and every other one known to man ) please switch to <a href="https://www.google.com/chrome/">Google Chrome</a> or <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a></p>. For the best browsing experience on this site ( and every other one known to man ) please switch to <a href="https://www.google.com/chrome/">Google Chrome</a> or <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a></p>.
{{else}} {{else}}
<img src="assets/images/pressButtonBridge.png" id="pressButtonBridgeImg"> <img src="assets/images/pressButtonBridge.png" id="press-bridge-button-img">
{{paper-progress-linear warn=true value=bridgeUserNamePingIntervalProgress}} {{paper-progress-linear warn=true value=bridgeUserNamePingIntervalProgress}}
{{#if isAuthenticating}} {{#if isAuthenticating}}
<p>Your bridge IP is <b>{{bridgeIp}}</b> <br> <p>Your bridge IP is <b>{{bridgeIp}}</b> <br>
Press the button on your bridge to authenticate this application.</p> Press the button on your bridge to authenticate this application.</p>
{{else}} {{else}}
<p>You failed to press the button. <a class="noTextDecoration" href="#" {{action 'retry'}}>RETRY</a></p> <p>You failed to press the button. <a class="no-text-decoration" href="#" {{action 'retry'}}>RETRY</a></p>
{{/if}} {{/if}}
{{/if}} {{/if}}
{{else}} {{else}}
@ -26,7 +26,7 @@
<p>Found multiple hue bridges. <br> <p>Found multiple hue bridges. <br>
Please select the one you want to use for this application.</p> Please select the one you want to use for this application.</p>
<div id="bridgeButtonGroup"> <div id="bridge-button-group">
{{#each multipleBridgeIps as |bridge|}} {{#each multipleBridgeIps as |bridge|}}
{{#paper-radio value=bridge selected=bridgeIp}}{{bridge}}{{/paper-radio}} {{#paper-radio value=bridge selected=bridgeIp}}{{bridge}}{{/paper-radio}}
{{/each}} {{/each}}
@ -38,7 +38,7 @@
( or type <b>offline</b> to look around ) ( or type <b>offline</b> to look around )
</p> </p>
<span id="bridgeInput"> <span id="bridge-input">
{{paper-input label="Hue bridge IP address" value=manualBridgeIp}} {{paper-input label="Hue bridge IP address" value=manualBridgeIp}}
{{#paper-button action="findBridgeByIp" raised=true primary=true}}Find{{/paper-button}} {{#paper-button action="findBridgeByIp" raised=true primary=true}}Find{{/paper-button}}
</span> </span>

2
web/app/pods/components/color-picker/component.js
View file

@ -6,7 +6,7 @@ const {
} = Ember; } = Ember;
export default Component.extend({ export default Component.extend({
classNames: ['colorpicker'], classNames: ['color-picker'],
rgb: null, rgb: null,
canvas: null, canvas: null,
canvasContext: null, canvasContext: null,

8
web/app/pods/components/groups-list/component.js
View file

@ -10,7 +10,7 @@ const {
export default Component.extend({ export default Component.extend({
classNames: ['dropdown-menu'], classNames: ['dropdown-menu'],
elementId: 'groupList', elementId: 'group-list',
tagName: null, tagName: null,
groupIdSelection: null, groupIdSelection: null,
@ -22,14 +22,14 @@ export default Component.extend({
ids.push(key); ids.push(key);
} }
} }
groupsArrData.push({name: 'All', data: {lights: ids, key: '0' }, rowClass: groupIdSelection === '0' ? 'groupRow selectedRow' : 'groupRow', deletable: false}); groupsArrData.push({name: 'All', data: {lights: ids, key: '0' }, rowClass: groupIdSelection === '0' ? 'group-row selected-row' : 'group-row', deletable: false});
for (let key in groupsData) { for (let key in groupsData) {
if (groupsData.hasOwnProperty(key)) { if (groupsData.hasOwnProperty(key)) {
let rowClass = 'groupRow'; let rowClass = 'group-row';
if(key === groupIdSelection){ if(key === groupIdSelection){
rowClass += ' selectedRow'; rowClass += ' selected-row';
} }
groupsArrData.push({name: groupsData[key].name, data: {lights: groupsData[key].lights, key: key}, rowClass: rowClass, deletable: true}); groupsArrData.push({name: groupsData[key].name, data: {lights: groupsData[key].lights, key: key}, rowClass: rowClass, deletable: true});

6
web/app/pods/components/groups-list/template.hbs
View file

@ -1,11 +1,11 @@
{{#paper-list}} {{#paper-list}}
{{#paper-item class="newGroupRow"}} {{#paper-item class="new-group-row"}}
<div class="newGroup" {{action "toggleAddGroupsModal"}}>{{paper-icon icon="group-add"}} Add a new group</div> <div class="new-group" {{action "toggleAddGroupsModal"}}>{{paper-icon icon="group-add"}} Add a new group</div>
{{/paper-item}} {{/paper-item}}
{{#each groupsArrData as |group|}} {{#each groupsArrData as |group|}}
{{#paper-item class=group.rowClass}} {{#paper-item class=group.rowClass}}
<div class="groupSelect" {{action "selectGroup" group.data.key}}>{{group.name}}</div> {{#if group.deletable}}<span data-toggle="tooltip" data-placement="top auto" title="Remove Group" class="bootstrapTooltip removeButton cursorPointer" {{action "toggleConfirmDeleteGroupsModal" group.name group.data.key}}>{{paper-icon icon="close"}}</span>{{/if}} <div class="group-select" {{action "selectGroup" group.data.key}}>{{group.name}}</div> {{#if group.deletable}}<span data-toggle="tooltip" data-placement="top auto" title="Remove Group" class="bootstrap-tooltip remove-button pointer" {{action "toggleConfirmDeleteGroupsModal" group.name group.data.key}}>{{paper-icon icon="close"}}</span>{{/if}}
{{/paper-item}} {{/paper-item}}
{{/each}} {{/each}}
{{/paper-list}} {{/paper-list}}

58
web/app/pods/components/hue-controls/component.js
View file

@ -12,7 +12,7 @@ const {
export default Component.extend({ export default Component.extend({
classNames: ['container-fluid'], classNames: ['container-fluid'],
elementId: 'hueControls', elementId: 'hue-controls',
bridgeIp: null, bridgeIp: null,
manualBridgeIp: null, manualBridgeIp: null,
bridgeUsername: null, bridgeUsername: null,
@ -64,12 +64,12 @@ export default Component.extend({
if(haveTooltip) { if(haveTooltip) {
run.once(this, function(){ run.once(this, function(){
$('.bootstrapTooltip').tooltip(); $('.bootstrap-tooltip').tooltip();
}); });
} }
}); });
observer.observe($('#hueControls')[0], {childList: true, subtree: true}); observer.observe($('#hue-controls')[0], {childList: true, subtree: true});
}, },
init() { init() {
@ -142,8 +142,8 @@ export default Component.extend({
startIntro(){ startIntro(){
let INTRO = introJs, let INTRO = introJs,
intro = INTRO(), intro = INTRO(),
playerBottom = $('#playerBottom'), playerBottom = $('#player-bottom'),
beatDetectionAreaArrowIcon = $('#beatDetectionAreaArrowIcon'); beatDetectionAreaArrowIcon = $('#beat-detection-area-arrow-icon');
this.set('dimmerOn', false); this.set('dimmerOn', false);
@ -153,7 +153,7 @@ export default Component.extend({
intro: 'Welcome! This short tutorial will introduce you to Huegasm.' intro: 'Welcome! This short tutorial will introduce you to Huegasm.'
}, },
{ {
element: '#musicTab', element: '#music-tab',
intro: 'This is the music player. You\'ll use this to play music and synchronize it with your active lights.<br><br>' + intro: 'This is the music player. You\'ll use this to play music and synchronize it with your active lights.<br><br>' +
'<i><b>TIP</b>: Control which lights are active through the <b>Lights</b> tab or through the <b>Groups</b> menu dropdown.</i>' '<i><b>TIP</b>: Control which lights are active through the <b>Lights</b> tab or through the <b>Groups</b> menu dropdown.</i>'
}, },
@ -163,11 +163,11 @@ export default Component.extend({
'<i><b>TIP</b>: Songs added through Soundcloud will be saved for when you visit this page again.</i>' '<i><b>TIP</b>: Songs added through Soundcloud will be saved for when you visit this page again.</i>'
}, },
{ {
element: '#playerArea', element: '#player-area',
intro: 'The audio playback may be controlled with the controls here. Basic music visualization effects may be shown here by selecting them from the menu ( eyeball icon in the bottom right ).' intro: 'The audio playback may be controlled with the controls here. Basic music visualization effects may be shown here by selecting them from the menu ( eyeball icon in the bottom right ).'
}, },
{ {
element: '#beatOptionRow', element: '#beat-option-row',
intro: 'These are the settings for the music tab:<br>' + intro: 'These are the settings for the music tab:<br>' +
'<b>Sensitivity</b> - The sensitivity of the beat detector ( more sensitivity results in more registered beats )<br>' + '<b>Sensitivity</b> - The sensitivity of the beat detector ( more sensitivity results in more registered beats )<br>' +
'<b>Hue Range</b> - The hue range that the lights may change to on beat.<br>' + '<b>Hue Range</b> - The hue range that the lights may change to on beat.<br>' +
@ -177,13 +177,13 @@ export default Component.extend({
position: 'top' position: 'top'
}, },
{ {
element: '#beatContainer', element: '#beat-container',
intro: 'An interactive speaker that will bump when a beat is registered. <br><br>' + intro: 'An interactive speaker that will bump when a beat is registered. <br><br>' +
'<i><b>TIP</b>: Click on the center of the speaker to simulate a beat.</i>', '<i><b>TIP</b>: Click on the center of the speaker to simulate a beat.</i>',
position: 'top' position: 'top'
}, },
{ {
element: '#lightsTab', element: '#lights-tab',
intro: 'This is the lights tab. Here you\'ll be able to change various light properties:<br>' + intro: 'This is the lights tab. Here you\'ll be able to change various light properties:<br>' +
'<b>Power</b> - Turn the selected lights on/off<br>' + '<b>Power</b> - Turn the selected lights on/off<br>' +
'<b>Brightness</b> - The brightness level of the selected lights<br>' + '<b>Brightness</b> - The brightness level of the selected lights<br>' +
@ -192,17 +192,17 @@ export default Component.extend({
'<b>Colorloop</b> - Selected lights will slowly cycle through all the colors<br>' '<b>Colorloop</b> - Selected lights will slowly cycle through all the colors<br>'
}, },
{ {
element: '#activeLights', element: '#active-lights',
intro: 'These icons represent the hue lights in your system. Active lights will be controlled by the application while the inactive lights will have a red X over them and will not be controlled.<br>' + intro: 'These icons represent the hue lights in your system. Active lights will be controlled by the application while the inactive lights will have a red X over them and will not be controlled.<br>' +
'You may toggle a light\'s state by clicking on it.' 'You may toggle a light\'s state by clicking on it.'
}, },
{ {
element: $('.settingsItem')[0], element: $('.settings-item')[0],
intro: 'The Groups menu allows for saving and quickly selecting groups of lights.', intro: 'The Groups menu allows for saving and quickly selecting groups of lights.',
position: 'left' position: 'left'
}, },
{ {
element: $('.settingsItem')[1], element: $('.settings-item')[1],
intro: 'A few miscellaneous settings can be found here.<br><br>' + intro: 'A few miscellaneous settings can be found here.<br><br>' +
'<b>WARNING</b>: clearing application settings will restore the application to its original state. This will even delete your playlist and any saved song beat preferences.', '<b>WARNING</b>: clearing application settings will restore the application to its original state. This will even delete your playlist and any saved song beat preferences.',
position: 'left' position: 'left'
@ -216,27 +216,27 @@ export default Component.extend({
] ]
}); });
// it's VERY ugly but it works // it's VERY ugly but it works... the jQuery massacre :'(
intro.onchange((element) => { intro.onchange((element) => {
if(element.id === 'musicTab' || element.id === 'playlist' || element.id === 'playerArea' || element.id === 'beatOptionRow' || element.id === 'beatOptionButtonGroup' || element.id === 'beatContainer' || element.id === 'usingMicAudioTooltip'){ if(element.id === 'music-tab' || element.id === 'playlist' || element.id === 'player-area' || element.id === 'beat-option-row' || element.id === 'beat-option-button-group' || element.id === 'beat-container' || element.id === 'using-mic-audio-tooltip'){
$('#musicTab').removeClass('hidden'); $('#music-tab').removeClass('hidden');
$('#lightsTab').addClass('hidden'); $('#lights-tab').addClass('hidden');
$('.navigationItem').eq(0).removeClass('active'); $('.navigation-item').eq(0).removeClass('active');
$('.navigationItem').eq(1).addClass('active'); $('.navigation-item').eq(1).addClass('active');
} else { } else {
$('#lightsTab').removeClass('hidden'); $('#lights-tab').removeClass('hidden');
$('#musicTab').addClass('hidden'); $('#music-tab').addClass('hidden');
$('.navigationItem').eq(1).removeClass('active'); $('.navigation-item').eq(1).removeClass('active');
$('.navigationItem').eq(0).addClass('active'); $('.navigation-item').eq(0).addClass('active');
} }
if(element.id === 'musicTab' || element.id === 'playlist' || element.id === 'playerArea'){ if(element.id === 'music-tab' || element.id === 'playlist' || element.id === 'player-area'){
playerBottom.hide(); playerBottom.hide();
if(beatDetectionAreaArrowIcon.hasClass('keyboard-arrow-up')){ if(beatDetectionAreaArrowIcon.hasClass('keyboard-arrow-up')){
beatDetectionAreaArrowIcon.removeClass('keyboard-arrow-up').addClass('keyboard-arrow-down'); beatDetectionAreaArrowIcon.removeClass('keyboard-arrow-up').addClass('keyboard-arrow-down');
} }
} else if(element.id === 'beatOptionRow' || element.id === 'beatOptionButtonGroup' || element.id === 'beatContainer'){ } else if(element.id === 'beat-option-row' || element.id === 'beat-option-button-group' || element.id === 'beat-container'){
playerBottom.show(); playerBottom.show();
if(beatDetectionAreaArrowIcon.hasClass('keyboard-arrow-down')){ if(beatDetectionAreaArrowIcon.hasClass('keyboard-arrow-down')){
@ -249,10 +249,10 @@ export default Component.extend({
let onFinish = ()=>{ let onFinish = ()=>{
this.set('activeTab', 1); this.set('activeTab', 1);
$('#musicTab').removeClass('hidden'); $('#music-tab').removeClass('hidden');
$('#lightsTab').addClass('hidden'); $('#lights-tab').addClass('hidden');
$('.navigationItem').eq(0).removeClass('active'); $('.navigation-item').eq(0).removeClass('active');
$('.navigationItem').eq(1).addClass('active'); $('.navigation-item').eq(1).addClass('active');
if(beatDetectionAreaArrowIcon.hasClass('keyboard-arrow-up')){ if(beatDetectionAreaArrowIcon.hasClass('keyboard-arrow-up')){
playerBottom.show(); playerBottom.show();

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

@ -2,24 +2,24 @@
<div class="row navigation"> <div class="row navigation">
<div class="col-sm-4 col-sm-offset-3 col-xs-8"> <div class="col-sm-4 col-sm-offset-3 col-xs-8">
{{#each tabData as |tab|}} {{#each tabData as |tab|}}
<span class="navigationItem cursorPointer {{if tab.selected "active"}} text-uppercase" {{action "changeTab" tab.name}}>{{tab.name}}</span> <span class="navigation-item pointer {{if tab.selected "active"}} text-uppercase" {{action "changeTab" tab.name}}>{{tab.name}}</span>
{{/each}} {{/each}}
</div> </div>
<div id="settings" class="col-xs-4"> <div id="settings" class="col-xs-4">
<div class="settingsItem"> <div class="settings-item">
<span data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{paper-icon icon="group" class=dimmerOnClass}}Groups <span class="caret"></span> <span data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{paper-icon icon="group" class=dimmerOnClass}}Groups <span class="caret"></span>
</span> </span>
{{groups-list lightsData=lightsData groupsData=groupsData activeLights=activeLights apiURL=apiURL updateGroupsData=updateGroupsData groupControlDisplayed=groupControlDisplayed storage=storage}} {{groups-list lightsData=lightsData groupsData=groupsData activeLights=activeLights apiURL=apiURL updateGroupsData=updateGroupsData groupControlDisplayed=groupControlDisplayed storage=storage}}
</div> </div>
<div class="settingsItem"> <div class="settings-item">
<span data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="settingsItemSettings"> <span data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="settings-itemSettings">
{{paper-icon icon="settings" class=dimmerOnClass}}Settings <span class="caret"></span> {{paper-icon icon="settings" class=dimmerOnClass}}Settings <span class="caret"></span>
</span> </span>
<ul id="appSettings" class="dropdown-menu"> <ul id="app-settings" class="dropdown-menu">
<li {{action "clearBridge"}}><a href="#">Switch bridge</a></li> <li {{action "clearBridge"}}><a href="#">Switch bridge</a></li>
<li {{action "startIntro"}}><a href="#">Restart tutorial</a></li> <li {{action "startIntro"}}><a href="#">Restart tutorial</a></li>
<li {{action "clearAllSettings"}}><a href="#">Reset settings</a></li> <li {{action "clearAllSettings"}}><a href="#">Reset settings</a></li>
@ -28,7 +28,7 @@
</div> </div>
</div> </div>
{{lights-tab apiURL=apiURL lightsData=lightsData activeLights=activeLights trial=trial active=lightsTabSelected colorLoopOn=colorLoopOn dimmerOn=dimmerOn}} {{lights-tab apiURL=apiURL lightsData=lightsData activeLights=activeLights trial=trial active=lights-tabSelected 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"}}
{{/if}} {{/if}}

10
web/app/pods/components/huegasm-app/template.hbs
View file

@ -4,7 +4,7 @@
{{#if ready}} {{#if ready}}
{{bridge-finder bridgeIp=bridgeIp bridgeUsername=bridgeUsername trial=trial storage=storage}} {{bridge-finder bridgeIp=bridgeIp bridgeUsername=bridgeUsername trial=trial storage=storage}}
{{else}} {{else}}
<div class="readyBlock"> <div class="ready-block">
<div class="title"> <div class="title">
<img src="assets/images/logo.png" alt="Huegasm"> <img src="assets/images/logo.png" alt="Huegasm">
</div> </div>
@ -12,16 +12,16 @@
<p id="intro"> <p id="intro">
Your lights, meet your music. Huegasm. Your lights, meet your music. Huegasm.
</p> </p>
<p id="introParagraph"> <p id="intro-paragraph">
Huegasm is a free web application for managing and synchronizing your <a target="_blank" href="http://www2.meethue.com">Philips Hue lights</a> with the beat of your music. Huegasm is a free web application for managing and synchronizing your <a target="_blank" href="http://www2.meethue.com">Philips Hue lights</a> with the beat of your music.
</p> </p>
<div class="embedContainerWrapper"> <div class="embed-container-wrapper">
<div class="embedContainer"> <div class="embed-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/zi9J6Qg-MPw" frameborder="0" allowfullscreen></iframe> <iframe width="560" height="315" src="https://www.youtube.com/embed/zi9J6Qg-MPw" frameborder="0" allowfullscreen></iframe>
</div> </div>
</div> </div>
{{#paper-button raised=true primary=true action="isReady" class="goButton center-block"}}Go!{{/paper-button}} {{#paper-button raised=true primary=true action="isReady" class="go-button center-block"}}Go!{{/paper-button}}
</div> </div>
{{/if}} {{/if}}
{{/if}} {{/if}}

16
web/app/pods/components/light-group/component.js
View file

@ -9,7 +9,7 @@ const {
} = Ember; } = Ember;
export default Component.extend({ export default Component.extend({
classNames: ['lightGroup'], classNames: ['light-group'],
isHovering: false, isHovering: false,
lightsList: A(), lightsList: A(),
@ -63,10 +63,10 @@ export default Component.extend({
type = 'a19'; type = 'a19';
} }
let activeClass = 'lightActive'; let activeClass = 'light-active';
if(!this.get('activeLights').contains(key)){ if(!this.get('activeLights').contains(key)){
activeClass = 'lightInactive'; activeClass = 'light-inactive';
} }
lightsList.push({type: type, name: lightsData[key].name, id: key, data: lightsData[key], activeClass: activeClass}); lightsList.push({type: type, name: lightsData[key].name, id: key, data: lightsData[key], activeClass: activeClass});
@ -87,14 +87,14 @@ export default Component.extend({
clickLight(id, data){ clickLight(id, data){
let light = $('.light'+id); let light = $('.light'+id);
if(!light.hasClass('bootstrapTooltip')){ if(!light.hasClass('bootstrap-tooltip')){
light = light.parent(); light = light.parent();
} }
if(light.hasClass('lightInactive')){ if(light.hasClass('light-inactive')){
light.addClass('lightActive').removeClass('lightInactive'); light.addClass('light-active').removeClass('light-inactive');
} else if(light.hasClass('lightActive')){ } else if(light.hasClass('light-active')){
light.addClass('lightInactive').removeClass('lightActive'); light.addClass('light-inactive').removeClass('light-active');
} }
this.sendAction('action', id, data); this.sendAction('action', id, data);

2
web/app/pods/components/light-group/template.hbs
View file

@ -1,5 +1,5 @@
{{#each lightsList as |light|}} {{#each lightsList as |light|}}
<div class="{{light.activeClass}} bootstrapTooltip light{{light.id}}" data-toggle="tooltip" data-placement="top auto" data-title={{light.name}} {{action "clickLight" light.id light.data}} {{action "lightStartHover" light.id on="mouseEnter"}} {{action "lightStopHover" light.id on="mouseLeave"}}> <div class="{{light.activeClass}} bootstrap-tooltip light{{light.id}}" data-toggle="tooltip" data-placement="top auto" data-title={{light.name}} {{action "clickLight" light.id light.data}} {{action "lightStartHover" light.id on="mouseEnter"}} {{action "lightStopHover" light.id on="mouseLeave"}}>
<img class="hueLight" width="40" src="assets/images/lights/{{light.type}}{{if dimmerOn "w"}}.svg"> <img class="hueLight" width="40" src="assets/images/lights/{{light.type}}{{if dimmerOn "w"}}.svg">
</div> </div>
{{/each}} {{/each}}

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

@ -10,7 +10,7 @@ const {
export default Component.extend({ export default Component.extend({
classNames: ['col-sm-8', 'col-sm-offset-2', 'col-xs-12'], classNames: ['col-sm-8', 'col-sm-offset-2', 'col-xs-12'],
classNameBindings: ['active::hidden'], classNameBindings: ['active::hidden'],
elementId: 'lightsTab', elementId: 'lights-tab',
activeLights: [], activeLights: [],
lightsData: null, lightsData: null,
@ -39,7 +39,7 @@ export default Component.extend({
return null; return null;
} }
return 'toggleColorpicker'; 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
@ -109,7 +109,9 @@ export default Component.extend({
}), }),
onLightsOnChange: observer('lightsOn', function(){ onLightsOnChange: observer('lightsOn', function(){
let lightsData = this.get('lightsData'), activeLights = this.get('activeLights'), lightsOn = this.get('lightsOn'), self = this; let lightsData = this.get('lightsData'),
activeLights = this.get('activeLights'),
lightsOn = this.get('lightsOn');
let lightsOnSystem = activeLights.some(function(light) { let lightsOnSystem = activeLights.some(function(light) {
return lightsData[light].state.on === true; return lightsData[light].state.on === true;
@ -117,8 +119,8 @@ export default Component.extend({
// if the internal lights state is different than the one from lightsData ( user manually toggled the switch ), send the request to change the bulbs state // if the internal lights state is different than the one from lightsData ( user manually toggled the switch ), send the request to change the bulbs state
if(lightsOn !== lightsOnSystem){ if(lightsOn !== lightsOnSystem){
activeLights.forEach(function (light) { activeLights.forEach((light)=>{
$.ajax(self.get('apiURL') + '/lights/' + light + '/state', { $.ajax(this.get('apiURL') + '/lights/' + light + '/state', {
data: JSON.stringify({"on": lightsOn}), data: JSON.stringify({"on": lightsOn}),
contentType: 'application/json', contentType: 'application/json',
type: 'PUT' type: 'PUT'
@ -128,7 +130,10 @@ export default Component.extend({
}), }),
onBrightnessChanged: observer('lightsBrightness', function(){ onBrightnessChanged: observer('lightsBrightness', function(){
let lightsData = this.get('lightsData'), lightsBrightnessSystem = false, lightsBrightness = this.get('lightsBrightness'), activeLights = this.get('activeLights'), self = this; let lightsData = this.get('lightsData'),
lightsBrightnessSystem = false,
lightsBrightness = this.get('lightsBrightness'),
activeLights = this.get('activeLights');
activeLights.forEach(function(light){ activeLights.forEach(function(light){
lightsBrightnessSystem += lightsData[light].state.bri; lightsBrightnessSystem += lightsData[light].state.bri;
@ -138,8 +143,8 @@ export default Component.extend({
// if the internal lights state is different than the one from lightsData ( user manually toggled the switch ), send the request to change the bulbs state // if the internal lights state is different than the one from lightsData ( user manually toggled the switch ), send the request to change the bulbs state
if(lightsBrightness !== lightsBrightnessSystem){ if(lightsBrightness !== lightsBrightnessSystem){
activeLights.forEach(function(light){ activeLights.forEach((light)=>{
$.ajax(self.get('apiURL') + '/lights/' + light + '/state', { $.ajax(this.get('apiURL') + '/lights/' + light + '/state', {
data: JSON.stringify({"bri": lightsBrightness}), data: JSON.stringify({"bri": lightsBrightness}),
contentType: 'application/json', contentType: 'application/json',
type: 'PUT' type: 'PUT'
@ -150,13 +155,13 @@ export default Component.extend({
didInsertElement() { didInsertElement() {
$(document).click((event)=>{ $(document).click((event)=>{
if(this.get('colorPickerDisplayed') && !event.target.classList.contains('color') && !$(event.target).closest('.colorpicker, #colorRow').length) { if(this.get('colorPickerDisplayed') && !event.target.classList.contains('color') && !$(event.target).closest('.color-picker, #color-row').length) {
this.toggleProperty('colorPickerDisplayed'); this.toggleProperty('colorPickerDisplayed');
} }
}); });
$(document).on('click', '#colorRow', () => { $(document).on('click', '#color-row', () => {
this.send('toggleColorpicker'); this.send('toggleColorPicker');
}); });
}, },
@ -187,7 +192,7 @@ export default Component.extend({
}); });
} }
}, },
toggleColorpicker() { toggleColorPicker() {
this.toggleProperty('colorPickerDisplayed'); this.toggleProperty('colorPickerDisplayed');
} }
}, },
@ -202,7 +207,7 @@ export default Component.extend({
lastStrobeLight: 0, lastStrobeLight: 0,
onStrobeOnChange: observer('strobeOn', function () { onStrobeOnChange: observer('strobeOn', function () {
let lightsData = this.get('lightsData'), self = this; let lightsData = this.get('lightsData');
if (this.get('strobeOn')) { if (this.get('strobeOn')) {
this.set('preStrobeOnLightsDataCache', lightsData); this.set('preStrobeOnLightsDataCache', lightsData);
@ -224,11 +229,11 @@ export default Component.extend({
this.set('strobeOnInervalHandle', setInterval(this.strobeStep.bind(this), 200)); this.set('strobeOnInervalHandle', setInterval(this.strobeStep.bind(this), 200));
} else { // revert the light system to pre-strobe } else { // revert the light system to pre-strobe
let preStrobeOnLightsDataCache = this.get('preStrobeOnLightsDataCache'), updateLight = function (lightIndx) { let preStrobeOnLightsDataCache = this.get('preStrobeOnLightsDataCache'), updateLight = (lightIndex)=> {
$.ajax(self.get('apiURL') + '/lights/' + lightIndx + '/state', { $.ajax(this.get('apiURL') + '/lights/' + lightIndex + '/state', {
data: JSON.stringify({ data: JSON.stringify({
'on': preStrobeOnLightsDataCache[lightIndx].state.on, 'on': preStrobeOnLightsDataCache[lightIndex].state.on,
'sat': preStrobeOnLightsDataCache[lightIndx].state.sat 'sat': preStrobeOnLightsDataCache[lightIndex].state.sat
}), }),
contentType: 'application/json', contentType: 'application/json',
type: 'PUT' type: 'PUT'

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

@ -1,27 +1,27 @@
{{#paper-list}} {{#paper-list}}
{{#paper-item class="item"}} {{#paper-item class="item"}}
{{light-group lightsData=lightsData activeLights=activeLights action='clickLight' apiURL=apiURL classNames="horizontalLightGroup" dimmerOn=dimmerOn id="activeLights"}} {{light-group lightsData=lightsData activeLights=activeLights action='clickLight' apiURL=apiURL classNames="horizontal-light-group" dimmerOn=dimmerOn id="active-lights"}}
{{/paper-item}} {{/paper-item}}
{{#paper-item}} {{#paper-item}}
{{paper-icon icon="power-settings-new" class=dimmerOnClass}} {{paper-icon icon="power-settings-new" class=dimmerOnClass}}
<p data-toggle="tooltip" data-placement="bottom auto" class="bootstrapTooltip lightCtrlTooltip" data-title="Turn the selected lights on/off">Power</p> <p data-toggle="tooltip" data-placement="bottom auto" class="bootstrap-tooltip lights-control-tooltip" data-title="Turn the selected lights on/off">Power</p>
{{#paper-switch checked=lightsOn disabled=trial skipProxy=trial}} {{lightsOnTxt}} {{/paper-switch}} {{#paper-switch checked=lightsOn disabled=trial skipProxy=trial}} {{lightsOnTxt}} {{/paper-switch}}
{{/paper-item}} {{/paper-item}}
{{#paper-item}} {{#paper-item}}
{{paper-icon icon="brightness-4" class=dimmerOnClass}} {{paper-icon icon="brightness-4" class=dimmerOnClass}}
<p data-toggle="tooltip" data-placement="bottom auto" class="bootstrapTooltip lightCtrlTooltip" data-title="The brightness level of the selected lights">Brightness</p> <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>
{{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="colorRow"}} {{#paper-item elementId="color-row"}}
{{paper-icon icon="color-lens" class=dimmerOnClass}} {{paper-icon icon="color-lens" class=dimmerOnClass}}
<p data-toggle="tooltip" data-placement="bottom auto" class="bootstrapTooltip lightCtrlTooltip" data-title="The color of the selected lights">Color</p> <p data-toggle="tooltip" data-placement="bottom auto" class="bootstrap-tooltip lights-control-tooltip" data-title="The color of the selected lights">Color</p>
{{/paper-item}} {{/paper-item}}
<div class="relative"> <div class="relative">
{{#paper-button raised=true class="color" action="toggleColorpicker" disabled=trial}}{{/paper-button}} {{#paper-button raised=true class="color" action="toggleColorPicker" disabled=trial}}{{/paper-button}}
{{#if colorPickerDisplayed}} {{#if colorPickerDisplayed}}
{{color-picker lightsData=lightsData activeLights=activeLights rgb=rgb}} {{color-picker lightsData=lightsData activeLights=activeLights rgb=rgb}}
@ -30,13 +30,13 @@
{{#paper-item}} {{#paper-item}}
{{paper-icon icon="flare" class=dimmerOnClass}} {{paper-icon icon="flare" class=dimmerOnClass}}
<p data-toggle="tooltip" data-placement="bottom auto" class="bootstrapTooltip lightCtrlTooltip" data-title="Selected lights will flash in sequential order">Strobe</p> <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>
{{#paper-switch checked=strobeOn disabled=trial skipProxy=trial}} {{strobeOnTxt}} {{/paper-switch}} {{#paper-switch checked=strobeOn disabled=trial skipProxy=trial}} {{strobeOnTxt}} {{/paper-switch}}
{{/paper-item}} {{/paper-item}}
{{#paper-item}} {{#paper-item}}
{{paper-icon icon="color-lens" class=dimmerOnClass}} {{paper-icon icon="loop" id="loopAddition" class=dimmerOnClass}} {{paper-icon icon="color-lens" class=dimmerOnClass}} {{paper-icon icon="loop" id="loop-addition" class=dimmerOnClass}}
<p data-toggle="tooltip" data-placement="bottom auto" class="bootstrapTooltip lightCtrlTooltip" data-title="Selected lights will slowly cycle through all the colors">Colorloop</p> <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>
{{#paper-switch checked=colorLoopOn disabled=trial skipProxy=trial}} {{colorloopOnTxt}} {{/paper-switch}} {{#paper-switch checked=colorLoopOn disabled=trial skipProxy=trial}} {{colorloopOnTxt}} {{/paper-switch}}
{{/paper-item}} {{/paper-item}}
{{/paper-list}} {{/paper-list}}

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

@ -12,14 +12,6 @@ const {
} = Ember; } = Ember;
export default Component.extend(helperMixin, visualizerMixin, { export default Component.extend(helperMixin, visualizerMixin, {
onActiveChange: observer('active', function(){
if(this.get('active')){
$('#playNotification').removeClass('fadeOut');
$('#beatSpeakerCenterOuter').removeClass('vibrateOuter');
$('#beatSpeakerCenterInner').removeClass('vibrateInner');
}
}),
onAmbienceModeChange: observer('ambienceMode', 'playing', function(){ onAmbienceModeChange: observer('ambienceMode', 'playing', function(){
if(this.get('ambienceMode') && this.get('playing')) { if(this.get('ambienceMode') && this.get('playing')) {
this.set('ambienceModeHandle', setInterval(()=> {this.doAmbienceLightChange();}, 5000)); this.set('ambienceModeHandle', setInterval(()=> {this.doAmbienceLightChange();}, 5000));
@ -318,8 +310,8 @@ export default Component.extend(helperMixin, visualizerMixin, {
} }
//work the music beat area - simulate the speaker vibration by running a CSS animation on it //work the music beat area - simulate the speaker vibration by running a CSS animation on it
$('#beatSpeakerCenterOuter').removeClass('vibrateOuter').prop('offsetWidth', $('#beatSpeakerCenterOuter').prop('offsetWidth')).addClass('vibrateOuter'); $('#beat-speaker-center-outer').velocity({blur: 3}, 100).velocity({blur: 0}, 100);
$('#beatSpeakerCenterInner').removeClass('vibrateInner').prop('offsetWidth', $('#beatSpeakerCenterInner').prop('offsetWidth')).addClass('vibrateInner'); $('#beat-speaker-center-inner').velocity({scale: 1.05}, 100).velocity({scale: 1}, 100);
}, },
init() { init() {
@ -374,7 +366,7 @@ export default Component.extend(helperMixin, visualizerMixin, {
let self = this; let self = this;
// file input code // file input code
$('#fileInput').on('change', function () { $('#file-input').on('change', function() {
let files = this.files; let files = this.files;
self.send('handleNewFiles', files); self.send('handleNewFiles', files);
this.value = null; // reset in case upload the second file again this.value = null; // reset in case upload the second file again
@ -385,7 +377,7 @@ export default Component.extend(helperMixin, visualizerMixin, {
}); });
// prevent space/text selection when the user repeatedly clicks on the center // prevent space/text selection when the user repeatedly clicks on the center
$('#beatContainer').on('mousedown', '#beatSpeakerCenterInner', function(event) { $('#beat-container').on('mousedown', '#beat-speaker-center-inner', function(event) {
event.preventDefault(); event.preventDefault();
}); });
@ -395,12 +387,12 @@ export default Component.extend(helperMixin, visualizerMixin, {
} }
}); });
this.$().on('drop', '#playListArea', (event)=>{ this.$().on('drop', '#play-list-area', (event)=>{
this.send('dropFiles', event.dataTransfer.files); this.send('dropFiles', event.dataTransfer.files);
}); });
// control the volume by scrolling up/down // control the volume by scrolling up/down
$('#playerArea').on('mousewheel', (event)=>{ $('#player-area').on('mousewheel', (event)=>{
if(this.get('playQueueNotEmpty') && !this.get('usingMicAudio')) { if(this.get('playQueueNotEmpty') && !this.get('usingMicAudio')) {
let scrollSize = 5; let scrollSize = 5;
@ -432,7 +424,7 @@ export default Component.extend(helperMixin, visualizerMixin, {
} }
if(!this.get('playerBottomDisplayed')) { if(!this.get('playerBottomDisplayed')) {
$('#playerBottom').hide(); $('#player-bottom').hide();
} }
}, },
@ -444,7 +436,7 @@ export default Component.extend(helperMixin, visualizerMixin, {
this.set('currentVisName', name); this.set('currentVisName', name);
}, },
hideTooltip(){ hideTooltip(){
$('.bootstrapTooltip').tooltip('hide'); $('.bootstrap-tooltip').tooltip('hide');
}, },
gotoSCURL(URL){ gotoSCURL(URL){
// need to pause the music since soundcloud is going to start playing this song anyways // need to pause the music since soundcloud is going to start playing this song anyways
@ -556,7 +548,9 @@ export default Component.extend(helperMixin, visualizerMixin, {
} }
}, },
slideTogglePlayerBottom(){ slideTogglePlayerBottom(){
this.$('#playerBottom').slideToggle(); let elem = this.$('#player-bottom');
elem.velocity(elem.is(':visible') ? 'slideUp' : 'slideDown', { duration: 500 });
this.changePlayerControl('playerBottomDisplayed', !this.get('playerBottomDisplayed')); this.changePlayerControl('playerBottomDisplayed', !this.get('playerBottomDisplayed'));
}, },
goToSong(index, playSong, scrollToSong){ goToSong(index, playSong, scrollToSong){
@ -620,12 +614,10 @@ export default Component.extend(helperMixin, visualizerMixin, {
if(scrollToSong){ if(scrollToSong){
// this is just a bad workaround to make sure that the track has been rendered to the playlist // this is just a bad workaround to make sure that the track has been rendered to the playlist
run.later(()=>{ run.later(()=>{
let track = $('.track'+index), playListArea = $('#playListArea'); let track = $('.track'+index);
if(!isNone(track) && !isNone(track.offset())) { if(!isNone(track) && !isNone(track.offset())) {
playListArea.animate({ track.velocity('scroll');
scrollTop: track.offset().top - playListArea.offset().top + playListArea.scrollTop()
});
} }
}, 1000); }, 1000);
} }
@ -642,10 +634,10 @@ export default Component.extend(helperMixin, visualizerMixin, {
} }
}, },
playerAreaPlay(){ playerAreaPlay(){
if(isEmpty($('#playerControls:hover')) && this.get('playQueuePointer') !== -1 ){ if(isEmpty($('#player-controls:hover')) && this.get('playQueuePointer') !== -1 ){
this.send('play'); this.send('play');
this.set('fadeOutNotification', true);
$('#playNotification').removeClass('fadeOut').prop('offsetWidth', $('#playNotification').prop('offsetWidth')).addClass('fadeOut'); $('#play-notification').velocity({opacity: 0.8, scale: 1}, 0).velocity({opacity: 0, scale: 3}, 500);
} }
}, },
play(replayPause) { play(replayPause) {
@ -795,7 +787,7 @@ export default Component.extend(helperMixin, visualizerMixin, {
} }
}, },
addLocalAudio: function () { addLocalAudio: function () {
$('#fileInput').click(); $('#file-input').click();
}, },
shuffleChanged(value) { shuffleChanged(value) {
this.changePlayerControl('shuffle', isNone(value) ? !this.get('shuffle') : value); this.changePlayerControl('shuffle', isNone(value) ? !this.get('shuffle') : value);
@ -842,16 +834,16 @@ export default Component.extend(helperMixin, visualizerMixin, {
}); });
this.send('handleNewFiles', files); this.send('handleNewFiles', files);
}, },
playListAreaDragOver(){ playerListAreaDragOver(){
this.set('draggingOverPlayListArea', true); this.set('draggingOverPlayListArea', true);
}, },
playListAreaDragLeave(){ playerListAreaDragLeave(){
this.set('draggingOverPlayListArea', false); this.set('draggingOverPlayListArea', false);
}, },
handleNewFiles(files){ handleNewFiles(files){
let self = this, let self = this,
playQueue = this.get('playQueue'), playQueue = this.get('playQueue'),
updatePlayQueue = ()=>{ updatePlayQueue = function(){
let tags = ID3.getAllTags("local"), let tags = ID3.getAllTags("local"),
picture = null; picture = null;
@ -864,7 +856,14 @@ export default Component.extend(helperMixin, visualizerMixin, {
picture = "data:" + tags.picture.format + ";base64," + window.btoa(base64String); picture = "data:" + tags.picture.format + ";base64," + window.btoa(base64String);
} }
playQueue.pushObject({fileName: this.name.replace(/\.[^/.]+$/, ""), url: URL.createObjectURL(this), artist: tags.artist, title: tags.title, picture: picture, local: true }); playQueue.pushObject({
fileName: this.name.replace(/\.[^/.]+$/, ""),
url: URL.createObjectURL(this),
artist: tags.artist,
title: tags.title,
picture: picture,
local: true
});
ID3.clearAll(); ID3.clearAll();

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

@ -14,7 +14,7 @@ const {
export default Mixin.create({ export default Mixin.create({
classNames: ['col-sm-10', 'col-sm-offset-1', 'col-xs-12'], classNames: ['col-sm-10', 'col-sm-offset-1', 'col-xs-12'],
classNameBindings: ['active::hidden'], classNameBindings: ['active::hidden'],
elementId: 'musicTab', elementId: 'music-tab',
dancer: null, dancer: null,
@ -124,7 +124,6 @@ export default Mixin.create({
paused: false, paused: false,
// audio: playing or paused // audio: playing or paused
playing: false, playing: false,
fadeOutNotification: false,
songBeatPreferences: {}, songBeatPreferences: {},
usingBeatPreferences: false, usingBeatPreferences: false,
oldBeatPrefCache: null, oldBeatPrefCache: null,
@ -236,14 +235,14 @@ export default Mixin.create({
}), }),
playListAreaClass: computed('dragging', 'draggingOverPlayListArea', 'dimmerOn', function(){ playListAreaClass: computed('dragging', 'draggingOverPlayListArea', 'dimmerOn', function(){
let classes = 'cursorPointer'; let classes = 'pointer';
if(this.get('dragging')){ if(this.get('dragging')){
classes += ' dragHereHighlight'; classes += ' drag-here-highlight';
} }
if(this.get('draggingOverPlayListArea')){ if(this.get('draggingOverPlayListArea')){
classes += ' draggingOver'; classes += ' dragging-over';
} }
if(this.get('dimmerOn')){ if(this.get('dimmerOn')){
@ -258,7 +257,7 @@ export default Mixin.create({
}), }),
volumeMutedClass: computed('volumeMuted', function(){ volumeMutedClass: computed('volumeMuted', function(){
let classes = 'playerControllIcon volumeButton'; let classes = 'player-control-icon volumeButton';
if(this.get('volumeMuted')){ if(this.get('volumeMuted')){
classes += ' active'; classes += ' active';
@ -268,19 +267,19 @@ export default Mixin.create({
}), }),
usingLocalAudioClass: computed('usingLocalAudio', function(){ usingLocalAudioClass: computed('usingLocalAudio', function(){
return this.get('usingLocalAudio') ? 'playerControllIcon active' : 'playerControllIcon'; return this.get('usingLocalAudio') ? 'player-control-icon active' : 'player-control-icon';
}), }),
usingMicAudioClass: computed('usingMicAudio', function(){ usingMicAudioClass: computed('usingMicAudio', function(){
return this.get('usingMicAudio') ? 'playerControllIcon active' : 'playerControllIcon'; return this.get('usingMicAudio') ? 'player-control-icon active' : 'player-control-icon';
}), }),
repeatClass: computed('repeat', function(){ repeatClass: computed('repeat', function(){
return this.get('repeat') !== 0 ? 'playerControllIcon active' : 'playerControllIcon'; return this.get('repeat') !== 0 ? 'player-control-icon active' : 'player-control-icon';
}), }),
shuffleClass: computed('shuffle', function(){ shuffleClass: computed('shuffle', function(){
return this.get('shuffle') ? 'playerControllIcon active' : 'playerControllIcon'; return this.get('shuffle') ? 'player-control-icon active' : 'player-control-icon';
}), }),
volumeIcon: computed('volumeMuted', 'volume', function() { volumeIcon: computed('volumeMuted', 'volume', function() {

2
web/app/pods/components/music-tab/mixins/visualizer.js
View file

@ -27,7 +27,7 @@ export default Mixin.create({
didInsertElement(){ didInsertElement(){
let dancer = this.get('dancer'), let dancer = this.get('dancer'),
canvas = $('#visualization')[0], canvas = $('#visualization')[0],
playerArea = $('#playerArea'), playerArea = $('#player-area'),
ctx = canvas.getContext('2d'), ctx = canvas.getContext('2d'),
spacing = 2, spacing = 2,
h = playerArea.height(), w; h = playerArea.height(), w;

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

@ -1,45 +1,45 @@
<div class="row" id="step1"> <div class="row" id="step1">
<div id="playerArea" class="col-sm-8 col-xs-12 {{if (eq "None" currentVisName) "displayIcon"}}" {{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="artwork"><img src={{largeArtworkPic}}></div>
<div id="playNotification" class="material-icons {{if fadeOutNotification "fadeOut"}} {{if playing "play-arrow" "pause"}}"></div> <div id="play-notification" class="material-icons {{if playing "play-arrow" "pause"}}"></div>
<div id="playerControls"> <div id="player-controls">
{{#if usingLocalAudio}} {{#if usingLocalAudio}}
{{range-slider start=seekPosition min=0 max=100 id="seekSlider" slide="seekChanged"}} {{range-slider start=seekPosition min=0 max=100 id="seek-slider" slide="seekChanged"}}
{{#if playQueueNotEmpty}} {{#if playQueueNotEmpty}}
<span data-toggle="tooltip" data-placement="top" class="bootstrapTooltip" id="prevTooltip" <span data-toggle="tooltip" data-placement="top" class="bootstrap-tooltip" id="prevTooltip"
data-title={{prevTooltipTxt}} {{action "previous"}}>{{paper-icon icon="skip-previous" class="playerControllIcon"}}</span><!-- data-title={{prevTooltipTxt}} {{action "previous"}}>{{paper-icon icon="skip-previous" class="player-control-icon"}}</span><!--
-->{{/if}}<!-- -->{{/if}}<!--
--><span data-toggle="tooltip" data-placement="top" id="playingTooltip" class="bootstrapTooltip" --><span data-toggle="tooltip" data-placement="top" id="playingTooltip" class="bootstrap-tooltip"
data-title={{playingTooltipTxt}} {{action "play"}}>{{paper-icon icon=playingIcon class="playerControllIcon"}}</span><!-- data-title={{playingTooltipTxt}} {{action "play"}}>{{paper-icon icon=playingIcon class="player-control-icon"}}</span><!--
-->{{#if playQueueMultiple}}<!-- -->{{#if playQueueMultiple}}<!--
--><span data-toggle="tooltip" data-placement="top" class="bootstrapTooltip" --><span data-toggle="tooltip" data-placement="top" class="bootstrap-tooltip"
data-title="Next" {{action "next" true}}>{{paper-icon icon="skip-next" action="" class="playerControllIcon"}}</span><!-- data-title="Next" {{action "next" true}}>{{paper-icon icon="skip-next" action="" class="player-control-icon"}}</span><!--
-->{{/if}}<!-- -->{{/if}}<!--
--><span data-toggle="tooltip" data-placement="top" class="bootstrapTooltip" 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 slide="volumeChanged" id="volumeBar" class="hidden-xs"}} -->{{range-slider start=volume min=0 max=100 slide="volumeChanged" id="volume-bar" class="hidden-xs"}}
<div id="playerTimeControls">{{timeElapsedTxt}} / {{timeTotalTxt}}</div> <div id="player-time-controls">{{timeElapsedTxt}} / {{timeTotalTxt}}</div>
{{/if}} {{/if}}
<span class="pull-right"> <span class="pull-right">
{{#if scUrl}} {{#if scUrl}}
<a href="#" data-toggle="tooltip" data-placement="top" class="soundCloudLink bootstrapTooltip" data-title="Listen on SoundCloud" {{action "gotoSCURL" scUrl}}> <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.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"> <span class="dropup">
<span class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> <span class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span data-toggle="tooltip" data-placement="top" class="bootstrapTooltip" data-title="Visualizations" {{action "hideTooltip"}}> <span data-toggle="tooltip" data-placement="top" class="bootstrap-tooltip" data-title="Visualizations" {{action "hideTooltip"}}>
{{paper-icon icon="remove-red-eye" class="playerControllIcon"}} {{paper-icon icon="remove-red-eye" class="player-control-icon"}}
</span> </span>
</span> </span>
<ul class="dropdown-menu visualizersMenu"> <ul class="dropdown-menu visualizers-menu">
{{#each visNames as |name|}} {{#each visNames as |name|}}
<li><a href="#" {{action "setVisName" name}}>{{name}} {{#if (eq currentVisName name)}}{{paper-icon icon="check"}}{{/if}}</a></li> <li><a href="#" {{action "setVisName" name}}>{{name}} {{#if (eq currentVisName name)}}{{paper-icon icon="check"}}{{/if}}</a></li>
{{/each}} {{/each}}
@ -50,47 +50,47 @@
</div> </div>
<div id="playlist" class="col-sm-4 col-xs-12"> <div id="playlist" class="col-sm-4 col-xs-12">
<input id="fileInput" type="file" accept="audio/*" multiple="true"/> <input id="file-input" type="file" accept="audio/*" multiple="true"/>
<div id="playListControls"> <div id="play-list-controls">
{{#if usingLocalAudio}} {{#if usingLocalAudio}}
<button class="dropdown-toggle pull-right addNewMusic" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> <button class="dropdown-toggle pull-right add-new-music" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Add new music Add new music
<span class="caret"></span> <span class="caret"></span>
</button> </button>
<ul id="addMusicChoices" class="dropdown-menu"> <ul id="add-music-choices" class="dropdown-menu">
<li><a href="#" {{action "addLocalAudio"}}>Local</a></li> <li><a href="#" {{action "addLocalAudio"}}>Local</a></li>
<li><a href="#" {{action "toggleIsShowingAddSoundCloudModal"}}>SoundCloud</a></li> <li><a href="#" {{action "toggleIsShowingAddSoundCloudModal"}}>SoundCloud</a></li>
</ul> </ul>
{{!--{{#if (and usingLocalAudio playQueueNotEmpty)}} {{!--{{#if (and usingLocalAudio playQueueNotEmpty)}}
<div id="extraOptionsMenu" class="hidden-xs"> <div id="extra-options-menu" class="hidden-xs">
<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="bootstrap-tooltip" 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> <span data-toggle="tooltip" data-placement="bottom auto" class="bootstrap-tooltip" id="repeatTooltip" data-title={{repeatTooltipTxt}} {{action "repeatChanged"}}>{{paper-icon icon=repeatIcon class=repeatClass}}</span>
<span data-toggle="tooltip" data-placement="bottom auto" class="bootstrapTooltip" data-title="Clear playlist" {{action "clearPlaylist"}}>{{paper-icon icon="clear-all" class="playerControllIcon"}}</span> <span data-toggle="tooltip" data-placement="bottom auto" class="bootstrap-tooltip" data-title="Clear playlist" {{action "clearPlaylist"}}>{{paper-icon icon="clear-all" class="player-control-icon"}}</span>
</div> </div>
{{/if}} --}} {{/if}} --}}
{{/if}} {{/if}}
{{#if usingMicSupported}} {{#if usingMicSupported}}
<span data-toggle="tooltip" data-placement="bottom auto" class="bootstrapTooltip" id="usingMicAudioTooltip" data-title={{usingMicAudioTooltipTxt}} {{action "useMicAudio"}}>{{paper-icon icon=micIcon class=usingMicAudioClass}}</span> <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>
{{/if}} {{/if}}
{{#if usingLocalAudio}} {{#if usingLocalAudio}}
<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="bootstrap-tooltip" 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> <span data-toggle="tooltip" data-placement="bottom auto" class="bootstrap-tooltip" id="repeatTooltip" data-title={{repeatTooltipTxt}} {{action "repeatChanged"}}>{{paper-icon icon=repeatIcon class=repeatClass}}</span>
<span data-toggle="tooltip" data-placement="bottom auto" class="bootstrapTooltip" data-title="Clear playlist" {{action "clearPlaylist"}}>{{paper-icon icon="clear-all" class="playerControllIcon"}}</span> <span data-toggle="tooltip" data-placement="bottom auto" class="bootstrap-tooltip" data-title="Clear playlist" {{action "clearPlaylist"}}>{{paper-icon icon="clear-all" class="player-control-icon"}}</span>
{{/if}} {{/if}}
</div> </div>
{{#if usingMicAudio}} {{#if usingMicAudio}}
<div id="playAreaMic" class="{{if dimmerOn "dimmerOn"}}"> <div id="play-area-mic" class="{{if dimmerOn "dimmerOn"}}">
{{paper-icon icon="mic" class=dimmerOnClass}} {{paper-icon icon="mic" class=dimmerOnClass}}
</div> </div>
{{else}} {{else}}
{{#if usingLocalAudio}} {{#if usingLocalAudio}}
<div id="playListArea" class={{playListAreaClass}} {{action "addLocalAudio"}} {{action "playListAreaDragOver" on="dragOver"}} {{action "playListAreaDragLeave" on="dragLeave"}} {{action "dropFiles" on="drop"}}> <div id="play-list-area" class={{playListAreaClass}} {{action "addLocalAudio"}} {{action "playerListAreaDragOver" on="dragOver"}} {{action "playerListAreaDragLeave" on="dragLeave"}} {{action "dropFiles" on="drop"}}>
{{#if (or playQueueEmpty dragging)}} {{#if (or playQueueEmpty dragging)}}
<div id="dragHere"> <div id="dragHere">
{{#if dragging}} {{#if dragging}}
@ -103,17 +103,17 @@
{{/if}} {{/if}}
{{#each playQueue as |item index|}} {{#each playQueue as |item index|}}
<div class="playlistItem cursorPointer track{{index}} {{if (eq index playQueuePointer) "active"}} {{if dragging "hidden"}}" {{action "goToSong" index true bubbles=false}}> <div class="playlist-item pointer track{{index}} {{if (eq index playQueuePointer) "active"}} {{if dragging "hidden"}}" {{action "goToSong" index true bubbles=false}}>
{{#if item.picture}} {{#if item.picture}}
<img class="albumArt" src={{item.picture}}> <img class="album-art" src={{item.picture}}>
{{else}} {{else}}
<img class="albumArt" src="assets/images/missingArtwork.png"> <img class="album-art" src="assets/images/missingArtwork.png">
{{/if}} {{/if}}
<div class="songInfo"> <div class="song-info">
{{#if item.title}} {{#if item.title}}
<div class="songTitle">{{item.title}}</div> <div class="song-title">{{item.title}}</div>
<div class="songArtist"> <div class="song-artist">
{{#if item.artistUrl}} {{#if item.artistUrl}}
<a href="#" {{action "gotoURL" item.artistUrl bubbles=false}}>{{item.artist}}</a> <a href="#" {{action "gotoURL" item.artistUrl bubbles=false}}>{{item.artist}}</a>
{{else}} {{else}}
@ -125,7 +125,7 @@
{{/if}} {{/if}}
</div> </div>
<span data-toggle="tooltip" data-placement="bottom auto" data-title="Remove" data-container="body" class="audioRemoveButton cursorPointer bootstrapTooltip" {{action "removeAudio" index bubbles=false}}>{{paper-icon icon="close"}}</span> <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 icon="close"}}</span>
</div> </div>
{{/each}} {{/each}}
</div> </div>
@ -134,48 +134,48 @@
</div> </div>
</div> </div>
<div id="slideToggle" class="text-center cursorPointer 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 icon=beatDetectionAreaArrowIcon id="beatDetectionAreaArrowIcon"}} {{paper-icon icon=beatDetectionAreaArrowIcon id="beat-detection-area-arrow-icon"}}
</div> </div>
</div> </div>
<div id="playerBottom" class="row {{if dimmerOn "dimmerOn"}}"> <div id="player-bottom" class="row {{if dimmerOn "dimmerOn"}}">
<div id="beatArea" 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="bootstrapTooltip" id="saveBeatPreferencesStar"> <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">
{{paper-icon class=dimmerOnClass icon="star"}} {{paper-icon class=dimmerOnClass icon="star"}}
</span> </span>
{{/if}} {{/if}}
<div class="row" id="beatOptionRow"> <div class="row" id="beat-option-row">
<div class="beatOption col-xs-4"> <div class="beat-option col-xs-4">
<span data-toggle="tooltip" data-placement="bottom" data-title="The sensitivity of the beat detector ( more sensitivity results in more registered beats )" class="optionDescription bootstrapTooltip">Sensitivity</span> <span data-toggle="tooltip" data-placement="bottom" data-title="The sensitivity of the beat detector ( more sensitivity results in more registered beats )" class="optionDescription bootstrap-tooltip">Sensitivity</span>
{{range-slider start=threshold orientation="vertical" step=beatOptions.threshold.step range=beatOptions.threshold.range slide="thresholdChanged" pips=beatOptions.threshold.pips}} {{range-slider start=threshold orientation="vertical" step=beatOptions.threshold.step range=beatOptions.threshold.range slide="thresholdChanged" pips=beatOptions.threshold.pips}}
</div> </div>
<div class="beatOption col-xs-4"> <div class="beat-option col-xs-4">
<span data-toggle="tooltip" data-placement="bottom" data-title="The range of hues ( colors ) that the lights may change to on beat." class="optionDescription bootstrapTooltip">Hue Range</span> <span data-toggle="tooltip" data-placement="bottom" data-title="The range of hues ( colors ) that the lights may change to on beat." class="optionDescription bootstrap-tooltip">Hue Range</span>
{{range-slider start=hueRange orientation="vertical" step=beatOptions.hueRange.step range=beatOptions.hueRange.range slide="hueRangeChanged" pips=beatOptions.hueRange.pips}} {{range-slider start=hueRange orientation="vertical" step=beatOptions.hueRange.step range=beatOptions.hueRange.range slide="hueRangeChanged" pips=beatOptions.hueRange.pips}}
</div> </div>
{{#if usingMicAudio}} {{#if usingMicAudio}}
<div class="beatOption 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="optionDescription bootstrapTooltip">Mic Boost</span> <span data-toggle="tooltip" data-placement="bottom" data-title="The coefficient to boost the microphone signal by" class="optionDescription bootstrap-tooltip">Mic Boost</span>
{{range-slider start=micBoost orientation="vertical" step=beatOptions.micBoost.step range=beatOptions.micBoost.range slide="micBoostChanged" pips=beatOptions.micBoost.pips}} {{range-slider start=micBoost orientation="vertical" step=beatOptions.micBoost.step range=beatOptions.micBoost.range slide="micBoostChanged" pips=beatOptions.micBoost.pips}}
</div> </div>
{{/if}} {{/if}}
<div id="lightOption" class="beatOption col-xs-4"> <div id="light-option" class="beat-option col-xs-4">
<span data-toggle="tooltip" data-placement="bottom auto" data-title="Quickly flash the lights on beat" class="bootstrapTooltip" {{action "hideTooltip" on="mouseLeave"}}> <span data-toggle="tooltip" data-placement="bottom auto" data-title="Quickly flash the lights on beat" class="bootstrap-tooltip" {{action "hideTooltip" on="mouseLeave"}}>
{{#paper-checkbox checked=flashingTransitions}}Flashing Transitions{{/paper-checkbox}} {{#paper-checkbox checked=flashingTransitions}}Flashing Transitions{{/paper-checkbox}}
</span> </span>
<span data-toggle="tooltip" data-placement="bottom auto" data-title="Slowly cycle the lights through all the colors" class="bootstrapTooltip" {{action "hideTooltip" on="mouseLeave"}}> <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"}}>
{{#paper-checkbox checked=colorloopMode}}Colorloop{{/paper-checkbox}} {{#paper-checkbox checked=colorloopMode}}Colorloop{{/paper-checkbox}}
</span> </span>
{{!--<span data-toggle="tooltip" data-placement="bottom auto" data-title="Periodically turn the lights on and off to create a cool looking ambience" class="bootstrapTooltip" {{action "hideTooltip" on="mouseLeave"}}> {{!--<span data-toggle="tooltip" data-placement="bottom auto" data-title="Periodically turn the lights on and off to create a cool looking ambience" class="bootstrap-tooltip" {{action "hideTooltip" on="mouseLeave"}}>
{{#paper-checkbox checked=ambienceMode}}Ambience{{/paper-checkbox}} {{#paper-checkbox checked=ambienceMode}}Ambience{{/paper-checkbox}}
</span>--}} </span>--}}
</div> </div>
@ -183,7 +183,7 @@
</div> </div>
<div id="beatContainer" class="col-sm-5 hidden-xs"> <div id="beat-container" class="col-sm-5">
<div class="bezel"> <div class="bezel">
<div class="rivet1"></div> <div class="rivet1"></div>
<div class="rivet2"></div> <div class="rivet2"></div>
@ -194,8 +194,8 @@
<div class="rivet7"></div> <div class="rivet7"></div>
<div class="rivet8"></div> <div class="rivet8"></div>
<div id="beatSpeakerCenterOuter"> <div id="beat-speaker-center-outer">
<div id="beatSpeakerCenterInner" class="cursorPointer" {{action "clickSpeaker"}}> <div id="beat-speaker-center-inner" class="pointer" {{action "clickSpeaker"}}>
</div> </div>
</div> </div>
</div> </div>

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

@ -1,15 +1,21 @@
@import 'bower_components/bootstrap-sass/assets/stylesheets/_bootstrap';
@import 'ember-modal-dialog/ember-modal-structure'; @import 'ember-modal-dialog/ember-modal-structure';
@import 'ember-modal-dialog/ember-modal-appearance'; @import 'ember-modal-dialog/ember-modal-appearance';
@import 'bootstrap'; // used to take out bootstrap scss modules that we don't need
@import 'paper';
@import 'bridge-finder'; @import 'bridge-finder';
@import 'common'; @import 'common';
@import 'dimmer'; @import 'dimmer';
@import 'fancy-speaker'; @import 'fancy-speaker';
@import 'index'; @import 'index';
@import 'introjs'; @import 'introjs';
@import 'paper'; @import 'group-controls';
@import 'variables'; @import 'hue-controls';
@import 'huegasm-variables';
@import 'light-group';
@import 'music-tab';
@import 'noui-slider';
html { html {
min-height: 100%; min-height: 100%;
@ -17,34 +23,12 @@ html {
} }
body { body {
font-family: 'Slabo 27px', serif;
margin-bottom: $footerHeight + 30px; margin-bottom: $footerHeight + 30px;
position: static; position: static;
} }
.ember-notify-default.ember-notify-cn { body, button {
top: 20px; font-family: 'Slabo 27px', serif;
}
.alert {
margin-bottom: 0;
border: none;
}
#settings {
padding-right: 5px;
text-align: right;
z-index: 3;
font-size: 16px;
}
.settingsItem:nth-of-type(2){
margin-left: 10px;
}
.settingsItem .settings::before, .settingsItem .group::before {
font-size: 28px;
transition: 0.1s all ease-in-out;
} }
.ember-app { .ember-app {
@ -66,8 +50,29 @@ body {
} }
} }
.cursorPointer { .ember-notify-default.ember-notify-cn {
cursor: pointer; top: 20px;
}
.alert {
margin-bottom: 0;
border: none;
}
#settings {
padding-right: 5px;
text-align: right;
z-index: 3;
font-size: 16px;
}
.settings-item:nth-of-type(2){
margin-left: 10px;
}
.settings-item .settings::before, .settings-item .group::before {
font-size: 28px;
transition: 0.1s all ease-in-out;
} }
.title { .title {
@ -77,683 +82,6 @@ body {
} }
} }
#pressButtonBridgeImg {
width: 200px;
margin: 0 auto 30px auto;
display: inherit;
}
#bridgeButtonGroup {
width: 150px;
margin: 30px auto;
text-align: left;
}
// HUE CONTROLS
#appSettings {
position: absolute;
background: white;
box-shadow: 5px 10px 15px 5px rgba(0, 0, 0, 0.3);
width: 175px;
left: -85px;
top: 20px;
border: none;
color: black;
}
#lightsTab {
min-height: 400px;
}
.lightCtrlTooltip + .tooltip {
left: -20px !important;
}
#colorRow {
cursor: pointer;
}
#colorRow * .tooltip {
left: -7px !important;
}
#hueControls {
max-width: 1200px;
position: relative;
}
// preload images
#hueControls:after, md-progress-circular:after {
display: none;
content: url(images/colormap.png) url(images/missingArtwork.png) url(images/sc-white.png) url(/favicon-96x96.png) url(images/lights/a19.svg) url(images/lights/a19w.svg) url(images/lights/br30.svg) url(images/lights/br30w.svg) url(images/lights/gu10.svg) url(images/lights/gu10w.svg) url(images/lights/huego.svg) url(images/lights/huegow.svg) url(images/lights/lc_aura.svg) url(images/lights/lc_auraw.svg) url(images/lights/lc_bloom.svg) url(images/lights/lc_bloomw.svg) url(images/lights/lc_iris.svg) url(images/lights/lc_irisw.svg) url(images/lights/lightstrip.svg) url(images/lights/lightstripw.svg) url(images/lights/storylight.svg) url(images/lights/storylightw.svg);
}
.navigation {
text-align: center;
padding: 30px 0;
}
.navigationItem {
font-size: 18px;
padding: 0 10px 0 10px;
}
.navigationItem.active {
font-weight: bold;
cursor: default;
text-decoration: none !important;
}
.navigationItem:hover {
text-decoration: underline;
}
.color {
border: 1px solid rgba(0, 0, 0, 0.5);
position: absolute;
top: -53px;
right: 0;
}
.colorpicker {
padding: 5px;
background: rgba(0, 0, 0, 0.7);
box-shadow: 5px 10px 15px 5px rgba(0, 0, 0, 0.3);
color: #FFFFFF;
position: absolute;
width: 266px;
height: 266px;
right: 6px;
top: -9px;
z-index: 3;
}
#picker {
cursor: crosshair;
}
#loopAddition {
position: absolute;
left: 18px;
top: 13px;
font-size: 16px;
}
// LIGHT GROUP
#groupList {
box-shadow: 5px 10px 15px 5px rgba(0, 0, 0, 0.3);
border-radius: 0 0 5px 5px;
width: 300px;
top: 20px;
left: -210px;
position: absolute;
background-color: white;
max-height: 400px;
overflow: auto;
text-align: left;
padding: 0;
color: black;
}
.lightGroup {
margin: 0 auto 0 auto;
.tooltip.top {
margin-top: 4px;
margin-left: 0;
}
div {
display: inline-block;
}
}
.lightInactive {
cursor: pointer;
position: relative;
}
.lightInactive::before {
font-weight: bold;
position: absolute;
content: "X";
top: -10px;
left: 5px;
font-size: 40px;
color: rgba(255, 0, 0, 0.37);
font-family: cursive;
}
.horizontalLightGroup {
.lightInactive::before {
top: -9px;
left: 6px;
}
.tooltip.top {
margin-top: 1px;
margin-left: 2px;
}
}
.lightActive {
cursor: pointer;
img {
transition-duration: 0.3s;
transition-property: transform;
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 {
background-color: rgba(0, 0, 0, 0.50);
}
.addButton {
width: 100%;
cursor: pointer;
margin-left: 10px;
}
.removeButton {
margin: 10px 0 10px 60px;
}
.sideNavTitle {
margin-left: 16px;
margin-top: 10px;
text-align: left;
}
// GROUP CONTROL
.groupRow {
transition: 0.1s all ease-in-out;
}
.groupRow.selectedRow {
background-color: #7F7F7F !important;
color: white;
}
.groupRow:hover {
background-color: #DEDEDE;
}
.groupRow.selectedRow .groupSelect {
cursor: default;
}
.groupSelect {
cursor: pointer;
padding: 10px 0 10px 10px;
width: 70%;
font-family: 'Open Sans', sans-serif;
}
.newGroup {
font-size: 18px;
min-height: 100%;
width: 100%;
padding: 10px 0 10px 10px;
margin: 0;
.group-add {
margin-right: 5px;
}
}
.newGroupRow{
background: white;
}
.newGroupRow:hover {
background-color: darken(white, 5%);
}
.groupRow:hover * .close {
display: block;
}
.groupRow:hover * .close {
display: block;
}
.selectedRow * .close {
color: white !important;
}
.selectedRow.groupRow * .close:hover {
color: darken(white, 20%) !important;
}
.close:hover {
color: darken(#333333, 5%) !important;
}
.close:hover {
opacity: 1;
}
.close {
font-size: 18px !important;
color: rgb(51, 51, 51);
display: none;
opacity: 1;
text-shadow: none;
}
// MUSIC TAB
.row {
margin: 0;
}
#beatOptionRow {
height: 250px;
}
#lightOption {
text-align: left !important;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
.tooltip {
margin-top: 5px !important;
left: 0 !important;
}
}
#musicTab{
padding: 0;
margin-bottom: $footerHeight + 30px;
}
#slideToggle {
color: $playerDefaultIconColor;
background: #730B07;
div md-icon {
color: inherit !important;
}
}
#slideToggle:hover{
color: lighten($playerDefaultIconColor, 30%) !important;;
}
#playerControls {
transition: all 0.2s ease-in-out;
position: absolute;
bottom: 0;
left: 0;
padding: 5px 10px;
width: 100%;
color: white !important;
z-index: 20;
background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
.tooltip.top {
margin-top: -17px;
}
.tooltip-arrow {
display: none;
}
.play-arrow, .pause, .replay {
font-size: 30px;
}
}
#playerTimeControls {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
display: inline-block;
margin-left: 1em;
}
.playerControllIcon {
color: $playerDefaultIconColor !important;
transition-duration: 0.1s;
margin-right: 5px;
}
.playerControllIcon.active {
color: $secondaryThemeColor !important;
}
.playerControllIcon:hover {
color: white !important;
}
#playNotification {
position: relative;
color: white;
top: 50%;
left: 50%;
opacity: 0;
background: black;
border-radius: 100%;
}
.fadeOut {
animation-duration: 1s;
animation-name: fadeOut;
}
@keyframes fadeOut {
from {
opacity: 0.8;
font-size: 24px;
}
to {
opacity: 0;
transform: scale(3);
-webkit-transform: scale(3);
}
}
#playerArea {
height: $playerHeight;
background-color: black;
display: inline-block;
padding: 0;
}
#playlist {
height: $playerHeight;
background-color: #1E1E1E;
padding: 0 5px 0 5px;
}
#playerArea * .noUi-origin {
background-color: black;
border-radius: 5px;
}
#playerArea * .noUi-base {
background-color: $secondaryThemeColor;
border-radius: 5px;
}
.noUi-base {
cursor: pointer;
}
.noUi-connect {
background-color: $secondaryThemeColor;
}
#volumeBar {
width: 5em;
height: 0.4em;
display: inline-block;
}
.noUi-handle {
cursor: pointer;
}
.noUi-horizontal .noUi-handle {
width: 0.4em;
height: 1.3em;
left: -0.071em;
top: -0.500em;
transition-duration: 0.1s;
background: $playerDefaultIconColor !important;
}
.noUi-horizontal .noUi-handle:hover {
background: white !important;
}
#playerArea * .noUi-handle::after, #playerArea * .noUi-handle::before {
content: none;
}
#seekSlider {
height: 6px;
margin-bottom: 10px;
transition-duration: 0.2s;
}
// mobile overrides
@media(max-width:767px) {
#seekSlider {
height: 8px;
.noUi-handle {
opacity: 1 !important;
}
}
.settingsItem:nth-of-type(2){
margin-left: 0;
}
#seekSlider {
margin-bottom: 15px;
}
.beatOption {
text-align: center !important;
}
}
#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: $secondaryThemeColor !important;
box-shadow: none;
}
#playListControls {
min-height: 30px;
margin-top: 5px;
border-bottom: 1px solid #3a3a3a;
position: relative;
}
#playListArea, #playAreaMic {
background-color: white;
width: 100%;
height: 350px;
margin: 10px auto 0 auto;
border-radius: 5px;
transition: 0.1s all ease-in-out;
position: relative;
overflow: auto;
#dragHere {
position: absolute;
top: 27%;
font-size: 20px;
text-align: center;
width: 100%;
}
.library-music, .mic {
position: absolute;
top: 40%;
font-size: 100px;
opacity: 0.5;
width: 100%;
text-align: center;
}
}
.songArtist {
font-weight: bold;
}
#playListArea.dragHereHighlight {
background-color: white;
border: 5px dotted #5383ff;
}
#playListArea.draggingOver {
background-color: darken(white, 5%);
box-shadow: inset 0 0 20px 0 rgba(0, 0, 0, 1);
}
#fileInput {
width: 1px;
height: 1px;
visibility: hidden;
}
.playlistItem {
border-bottom: 1px solid rgba(128, 128, 128, 0.3);
border-top: 1px solid rgba(128,128,128,0.3);
height: 62px;
font-family: 'Open Sans', sans-serif;
padding: 0 20px 0 5px;
position: relative;
color: black;
background: darken(white, 5%);
.close {
font-size: 18px;
}
.albumArt {
height: 60px;
float: left;
margin-right: 5px;
border: 1px solid rgba(0, 0, 0, 0.5);
}
.songInfo {
.songTitle {
max-height: 40px;
overflow: hidden;
}
.songArtist {
max-height: 20px;
overflow: hidden;
}
}
.audioRemoveButton {
position: absolute;
top: 20px;
right: 5px;
}
}
.playlistItem.active {
background: darken(white, 15%) !important;
border-top: 1px solid $secondaryThemeColor;
border-bottom: 1px solid $secondaryThemeColor;
}
.playlistItem:hover {
background: darken(white, 10%);
.close {
display: block;
}
}
#beatArea {
height: $playerBottomHeight;
position: relative;
padding: 0;
}
.noUi-target {
margin: 0 auto;
}
.noUi-base, .noUi-background {
background-color: #ADADAD;
border: 1px solid #797979;
}
.noUi-vertical {
height: 200px;
margin-top: 10px;
margin-bottom: 15px;
}
.star {
cursor: auto !important;
}
#beatOptionButtonGroup {
margin: 20px 0 10px 0;
}
.beatOption {
padding: 5px 0;
text-align: center;
md-switch {
margin: 0;
}
.optionDescription {
font-size: 16px;
}
button {
margin-top: 0;
}
.tooltip {
margin: 0;
}
}
#playerBottom {
color: black;
border: 1px solid black;
width: 100%;
background: white;
}
#beatContainer {
padding: 0;
height: $playerBottomHeight;
}
#beatArea .lightGroup {
margin: 10px 20px 0 40px;
float: right;
div {
display: block;
padding: 10px;
}
}
#playerButtonGroup {
margin-top: 10px;
}
.noUi-value-vertical {
margin-top: -10px;
}
.noUi-value-vertical, .noUi-pips {
color: inherit !important;
font: 400 14px 'Slabo 27px';
}
.noUi-vertical .noUi-handle {
border: 1px solid #A3A0A0;
width: 26px;
}
.noUi-vertical .noUi-handle:after, .noUi-vertical .noUi-handle:before{
background: grey;
}
#saveBeatPreferencesStar {
position: absolute;
top: 3px;
z-index: 1000;
md-icon {
color: $secondaryThemeColor !important;
font-size: 25px;
}
}
button.md-warn { button.md-warn {
background: $secondaryThemeColor; background: $secondaryThemeColor;
} }
@ -769,82 +97,26 @@ div.ember-modal-dialog {
} }
} }
.addMusicButton { // fancy webkit scrollbars
float: right; ::-webkit-scrollbar {
color: white; -webkit-appearance: none;
} }
#addMusicChoices { ::-webkit-scrollbar:vertical {
min-width: initial; width: 12px;
right: 0;
left: initial;
width: 100px;
top: 25px;
} }
.addNewMusic { ::-webkit-scrollbar:horizontal {
padding: 0 5px 0 10px; height: 12px;
font-size: 16px;
border-radius: 5px;
background: #f8f8f8;
border: none;
} }
.addNewMusic:hover { ::-webkit-scrollbar-thumb {
background: darken(#f8f8f8, 5%); background-color: rgba(0, 0, 0, .5);
border-radius: 10px;
border: 2px solid #ffffff;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
} }
.soundCloudLink { ::-webkit-scrollbar-track {
margin-right: 5px; background-color: #ffffff;
} }
#visualization {
position: absolute;
top: 0;
left: 0;
}
.check {
margin-left: 10px;
position: relative;
top: -4px;
}
.visualizersMenu {
left: -135px;
}
.displayIcon {
background: url(/favicon-96x96.png) center center no-repeat;
background-size: 80px 80px;
}
#artwork {
position: absolute;
width: 100%;
overflow: hidden;
img {
display: block;
margin: 0 auto;
max-height: 400px;
}
}
.keyboard-arrow-down {
font-size: 20px;
}
#extraOptionsMenu {
z-index: 1;
background: rgba(0, 0, 0, 0.5);
padding: 3px 15px;
position: absolute;
bottom: -39px;
right: 17px;
border-radius: 0 0 5px 5px;
}
#extraOptionsMenu:hover {
opacity: 1;
background: rgba(0, 0, 0, 0.8);
}

56
web/app/styles/bootstrap.scss vendored Normal file
View file

@ -0,0 +1,56 @@
/*!
* Bootstrap v3.3.7 (http://getbootstrap.com)
* Copyright 2011-2016 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
// Core variables and mixins
@import "bower_components/bootstrap-sass/assets/stylesheets/bootstrap/variables";
@import "bower_components/bootstrap-sass/assets/stylesheets/bootstrap/mixins";
// Reset and dependencies
@import "bower_components/bootstrap-sass/assets/stylesheets/bootstrap/normalize";
@import "bower_components/bootstrap-sass/assets/stylesheets/bootstrap/print";
@import "bower_components/bootstrap-sass/assets/stylesheets/bootstrap/glyphicons";
// Core CSS
@import "bower_components/bootstrap-sass/assets/stylesheets/bootstrap/scaffolding";
@import "bower_components/bootstrap-sass/assets/stylesheets/bootstrap/type";
@import "bower_components/bootstrap-sass/assets/stylesheets/bootstrap/code";
@import "bower_components/bootstrap-sass/assets/stylesheets/bootstrap/grid";
//@import "bower_components/bootstrap-sass/assets/stylesheets/bootstrap/tables";
@import "bower_components/bootstrap-sass/assets/stylesheets/bootstrap/forms";
@import "bower_components/bootstrap-sass/assets/stylesheets/bootstrap/buttons";
// Components
@import "bower_components/bootstrap-sass/assets/stylesheets/bootstrap/component-animations";
@import "bower_components/bootstrap-sass/assets/stylesheets/bootstrap/dropdowns";
@import "bower_components/bootstrap-sass/assets/stylesheets/bootstrap/button-groups";
@import "bower_components/bootstrap-sass/assets/stylesheets/bootstrap/input-groups";
@import "bower_components/bootstrap-sass/assets/stylesheets/bootstrap/navs";
@import "bower_components/bootstrap-sass/assets/stylesheets/bootstrap/navbar";
@import "bower_components/bootstrap-sass/assets/stylesheets/bootstrap/breadcrumbs";
@import "bower_components/bootstrap-sass/assets/stylesheets/bootstrap/pagination";
@import "bower_components/bootstrap-sass/assets/stylesheets/bootstrap/pager";
@import "bower_components/bootstrap-sass/assets/stylesheets/bootstrap/labels";
//@import "bower_components/bootstrap-sass/assets/stylesheets/bootstrap/badges";
//@import "bower_components/bootstrap-sass/assets/stylesheets/bootstrap/jumbotron";
//@import "bower_components/bootstrap-sass/assets/stylesheets/bootstrap/thumbnails";
@import "bower_components/bootstrap-sass/assets/stylesheets/bootstrap/alerts";
@import "bower_components/bootstrap-sass/assets/stylesheets/bootstrap/progress-bars";
@import "bower_components/bootstrap-sass/assets/stylesheets/bootstrap/media";
@import "bower_components/bootstrap-sass/assets/stylesheets/bootstrap/list-group";
@import "bower_components/bootstrap-sass/assets/stylesheets/bootstrap/panels";
@import "bower_components/bootstrap-sass/assets/stylesheets/bootstrap/responsive-embed";
//@import "bower_components/bootstrap-sass/assets/stylesheets/bootstrap/wells";
@import "bower_components/bootstrap-sass/assets/stylesheets/bootstrap/close";
// Components w/ JavaScript
@import "bower_components/bootstrap-sass/assets/stylesheets/bootstrap/modals";
@import "bower_components/bootstrap-sass/assets/stylesheets/bootstrap/tooltip";
@import "bower_components/bootstrap-sass/assets/stylesheets/bootstrap/popovers";
//@import "bower_components/bootstrap-sass/assets/stylesheets/bootstrap/carousel";
// Utility classes
@import "bower_components/bootstrap-sass/assets/stylesheets/bootstrap/utilities";
@import "bower_components/bootstrap-sass/assets/stylesheets/bootstrap/responsive-utilities";

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

@ -0,0 +1,16 @@
#press-bridge-button-img {
width: 200px;
margin: 0 auto 30px auto;
display: inherit;
}
#bridge-button-group {
width: 150px;
margin: 30px auto;
text-align: left;
}
#bridge-input md-input-container{
max-width: 200px;
margin: 0 auto;
}

6
web/app/styles/common.scss
View file

@ -6,6 +6,10 @@
position: relative !important; position: relative !important;
} }
.noTextDecoration { .no-text-decoration {
text-decoration: none !important; text-decoration: none !important;
}
.pointer {
cursor: pointer;
} }

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

@ -1,4 +1,4 @@
@import 'variables'; @import 'huegasm-variables';
div.dimmerOn { div.dimmerOn {
color: white !important; color: white !important;
@ -19,20 +19,20 @@ body.dimmerOn {
.color { .color {
border: 1px solid white; border: 1px solid white;
} }
.playlistItem { .playlist-item {
color: #cdcdcd; color: #cdcdcd;
background: $dimmerOnButtonColor; background: $dimmerOnButtonColor;
} }
.playlistItem.active { .playlist-item.active {
background: darken($dimmerOnButtonColor, 15%) !important; background: darken($dimmerOnButtonColor, 15%) !important;
} }
.playlistItem:hover { .playlist-item:hover {
background: darken($dimmerOnButtonColor, 10%); background: darken($dimmerOnButtonColor, 10%);
} }
.playlistItem .close { .playlist-item .close {
color: #cdcdcd !important; color: #cdcdcd !important;
} }
.playlistItem .close:hover { .playlist-item .close:hover {
color: white !important; color: white !important;
} }
svg { svg {
@ -49,16 +49,16 @@ body.dimmerOn {
color: white !important; color: white !important;
} }
} }
.addNewMusic { .add-new-music {
background: $dimmerOnButtonColor background: $dimmerOnButtonColor
} }
.addNewMusic:hover { .add-new-music:hover {
background: darken($dimmerOnButtonColor, 5%); background: darken($dimmerOnButtonColor, 5%);
} }
#extraOptionsMenu { #extra-options-menu {
opacity: 0.8; opacity: 0.8;
} }
#extraOptionsMenu:hover { #extra-options-menu:hover {
background: rgba(0, 0, 0, 0.9); background: rgba(0, 0, 0, 0.9);
} }
.popover-content { .popover-content {

57
web/app/styles/fancy-speaker.scss
View file

@ -2,10 +2,6 @@
$centersize: 80px; $centersize: 80px;
$center1size: 205px; $center1size: 205px;
$bezelsize: 240px; $bezelsize: 240px;
$vibratesize: $centersize*1.06;
$vibratemargin:-$vibratesize/2;
$vibrateblurinner: 3px;
$vibrateblurouter: 2px;
/* Extenders */ /* Extenders */
%base { %base {
@ -20,46 +16,7 @@ $vibrateblurouter: 2px;
box-shadow: inset 0 0 3px #000, 0 0 2px #000; box-shadow: inset 0 0 3px #000, 0 0 2px #000;
} }
/* Keyframes */ #beat-speaker-center-inner {
@keyframes vibrateInner {
50% {
-webkit-filter: blur($vibrateblurinner);
transform: scale(1.05);
}
}
@keyframes vibrateOuter {
0% {
-webkit-filter: blur($vibrateblurouter);
filter: blur($vibrateblurouter);
}
30% {
-webkit-filter: blur(0);
filter: blur(0);
}
50% {
-webkit-filter: blur($vibrateblurouter);
filter: blur($vibrateblurouter);
}
65% {
-webkit-filter: blur(0);
filter: blur(0);
}
70% {
-webkit-filter: blur($vibrateblurouter);
filter: blur($vibrateblurouter);
}
80% {
-webkit-filter: blur($vibrateblurouter);
filter: blur($vibrateblurouter);
}
100% {
-webkit-filter: blur($vibrateblurouter);
filter: blur($vibrateblurouter);
}
}
#beatSpeakerCenterInner {
@extend %base; @extend %base;
height: $centersize; height: $centersize;
width: $centersize; width: $centersize;
@ -77,11 +34,7 @@ $vibrateblurouter: 2px;
background: radial-gradient(ellipse at center, rgba(0,0,0,1) 0%,rgba(79,79,79,1) 0%,rgba(0,0,0,1) 100%); background: radial-gradient(ellipse at center, rgba(0,0,0,1) 0%,rgba(79,79,79,1) 0%,rgba(0,0,0,1) 100%);
box-shadow: 0 0 10px rgba(0, 0, 0, 1); box-shadow: 0 0 10px rgba(0, 0, 0, 1);
} }
.vibrateInner{ #beat-speaker-center-outer {
-webkit-animation: vibrateInner 0.15s linear 1;
animation: vibrateInner 0.15s linear 1;
}
#beatSpeakerCenterOuter {
@extend %base; @extend %base;
position: absolute; position: absolute;
top: 16px; top: 16px;
@ -96,10 +49,6 @@ $vibrateblurouter: 2px;
background: -ms-linear-gradient(130deg, rgba(117, 117, 117, 1) 55%, rgba(220, 220, 220, 1) 100%); background: -ms-linear-gradient(130deg, rgba(117, 117, 117, 1) 55%, rgba(220, 220, 220, 1) 100%);
background: linear-gradient(130deg, rgba(117, 117, 117, 1) 55%, rgba(220, 220, 220, 1) 100%); background: linear-gradient(130deg, rgba(117, 117, 117, 1) 55%, rgba(220, 220, 220, 1) 100%);
} }
.vibrateOuter {
-webkit-animation: vibrateOuter 0.15s linear 1;
animation: vibrateOuter 0.15s linear 1;
}
.bezel { .bezel {
@extend %base; @extend %base;
margin: 0 auto; margin: 0 auto;
@ -108,8 +57,6 @@ $vibrateblurouter: 2px;
position: relative; position: relative;
background-color: #A8A8A8; background-color: #A8A8A8;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.8), inset 3px 3px 10px rgba(0, 0, 0, 0.8), 0 0 2px rgba(0, 0, 0, 0.8), inset 0 0 30px -5px rgba(0, 0, 0, 0.8); box-shadow: 0 0 10px rgba(0, 0, 0, 0.8), inset 3px 3px 10px rgba(0, 0, 0, 0.8), 0 0 2px rgba(0, 0, 0, 0.8), inset 0 0 30px -5px rgba(0, 0, 0, 0.8);
top: 50%;
transform: translateY(-50%);
} }
.rivet1 { .rivet1 {
@extend %rivet; @extend %rivet;

74
web/app/styles/group-controls.scss Normal file
View file

@ -0,0 +1,74 @@
.group-row {
transition: 0.1s all ease-in-out;
}
.group-row.selected-row {
background-color: #7F7F7F !important;
color: white;
}
.group-row:hover {
background-color: #DEDEDE;
}
.group-row.selected-row .group-select {
cursor: default;
}
.group-select {
cursor: pointer;
padding: 10px 0 10px 10px;
width: 70%;
font-family: 'Open Sans', sans-serif;
}
.new-group {
font-size: 18px;
min-height: 100%;
width: 100%;
padding: 10px 0 10px 10px;
margin: 0;
.group-add {
margin-right: 5px;
}
}
.new-group-row{
background: white;
}
.new-group-row:hover {
background-color: darken(white, 5%);
}
.group-row:hover * .close {
display: block;
}
.group-row:hover * .close {
display: block;
}
.selected-row * .close {
color: white !important;
}
.selected-row.group-row * .close:hover {
color: darken(white, 20%) !important;
}
.close:hover {
color: darken(#333333, 5%) !important;
}
.close:hover {
opacity: 1;
}
.close {
font-size: 18px !important;
color: rgb(51, 51, 51);
display: none;
opacity: 1;
text-shadow: none;
}

88
web/app/styles/hue-controls.scss Normal file
View file

@ -0,0 +1,88 @@
#app-settings {
position: absolute;
background: white;
box-shadow: 5px 10px 15px 5px rgba(0, 0, 0, 0.3);
width: 175px;
left: -85px;
top: 20px;
border: none;
color: black;
}
#lights-tab {
min-height: 400px;
}
.lights-control-tooltip + .tooltip {
left: -20px !important;
}
#color-row {
cursor: pointer;
}
#color-row * .tooltip {
left: -7px !important;
}
#hue-controls {
max-width: 1200px;
position: relative;
}
// preload images
#hue-controls:after, md-progress-circular:after {
display: none;
content: url(images/colormap.png) url(images/missingArtwork.png) url(images/sc-white.png) url(/favicon-96x96.png) url(images/lights/a19.svg) url(images/lights/a19w.svg) url(images/lights/br30.svg) url(images/lights/br30w.svg) url(images/lights/gu10.svg) url(images/lights/gu10w.svg) url(images/lights/huego.svg) url(images/lights/huegow.svg) url(images/lights/lc_aura.svg) url(images/lights/lc_auraw.svg) url(images/lights/lc_bloom.svg) url(images/lights/lc_bloomw.svg) url(images/lights/lc_iris.svg) url(images/lights/lc_irisw.svg) url(images/lights/lightstrip.svg) url(images/lights/lightstripw.svg) url(images/lights/storylight.svg) url(images/lights/storylightw.svg);
}
.navigation {
text-align: center;
padding: 30px 0;
}
.navigation-item {
font-size: 18px;
padding: 0 10px 0 10px;
}
.navigation-item.active {
font-weight: bold;
cursor: default;
text-decoration: none !important;
}
.navigation-item:hover {
text-decoration: underline;
}
.color {
border: 1px solid rgba(0, 0, 0, 0.5);
position: absolute;
top: -53px;
right: 0;
}
.color-picker {
padding: 5px;
background: rgba(0, 0, 0, 0.7);
box-shadow: 5px 10px 15px 5px rgba(0, 0, 0, 0.3);
color: #FFFFFF;
position: absolute;
width: 266px;
height: 266px;
right: 6px;
top: -9px;
z-index: 3;
}
#picker {
cursor: crosshair;
}
#loop-addition {
position: absolute;
left: 18px;
top: 13px;
font-size: 16px;
}

0
web/app/styles/variables.scss → web/app/styles/huegasm-variables.scss
View file

14
web/app/styles/index.scss
View file

@ -2,22 +2,22 @@
font-size: 18px; font-size: 18px;
} }
#introParagraph { #intro-paragraph {
margin-bottom: 50px; margin-bottom: 50px;
} }
.bridgeFinder, .readyBlock { .bridgeFinder, .ready-block {
text-align: center; text-align: center;
padding-top: 10px; padding-top: 10px;
} }
// preloading image // preloading image
.readyBlock:after { .ready-block:after {
display: none; display: none;
content: url(images/pressButtonBridge.png); content: url(images/pressButtonBridge.png);
} }
.embedContainer { .embed-container {
position:relative; position:relative;
padding-bottom:56.25%; padding-bottom:56.25%;
padding-top:30px; padding-top:30px;
@ -25,12 +25,12 @@
overflow:hidden; overflow:hidden;
} }
.embedContainerWrapper { .embed-container-wrapper {
max-width: 600px; max-width: 600px;
margin: auto; margin: auto;
} }
.embedContainer iframe, .embedContainer object, .embedContainer embed { .embed-container iframe, .embed-container object, .embed-container embed {
position:absolute; position:absolute;
top:0; top:0;
left:0; left:0;
@ -38,7 +38,7 @@
height:100%; height:100%;
} }
.goButton { .go-button {
margin-top: 20px; margin-top: 20px;
border-radius: 100% !important; border-radius: 100% !important;
width: 100px; width: 100px;

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

@ -1,16 +1,10 @@
@import 'variables'; @import 'huegasm-variables';
.introjs-overlay { .introjs-overlay {
background: black; background: black;
} }
.introjs-helperNumberLayer { #settings.introjs-fixParent {
padding: 0;
width: 23px;
height: 23px;
}
#settings.introjs-fixParent{
position: inherit !important; position: inherit !important;
} }
@ -18,7 +12,7 @@
color: black; color: black;
} }
.introjs-skipbutton{ .introjs-skipbutton {
color: $secondaryThemeColor; color: $secondaryThemeColor;
} }

73
web/app/styles/light-group.scss Normal file
View file

@ -0,0 +1,73 @@
#group-list {
box-shadow: 5px 10px 15px 5px rgba(0, 0, 0, 0.3);
border-radius: 0 0 5px 5px;
width: 300px;
top: 20px;
left: -210px;
position: absolute;
background-color: white;
max-height: 400px;
overflow: auto;
text-align: left;
padding: 0;
color: black;
}
.light-group {
margin: 0 auto 0 auto;
.tooltip.top {
margin-top: 4px;
margin-left: 0;
}
div {
display: inline-block;
}
}
.light-inactive {
cursor: pointer;
position: relative;
}
.light-inactive::before {
font-weight: bold;
position: absolute;
content: "X";
top: -10px;
left: 5px;
font-size: 40px;
color: rgba(255, 0, 0, 0.37);
font-family: cursive;
}
.horizontal-light-group {
.light-inactive::before {
top: -9px;
left: 6px;
}
.tooltip.top {
margin-top: 1px;
margin-left: 2px;
}
}
.light-active {
cursor: pointer;
img {
transition-duration: 0.3s;
transition-property: transform;
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 {
background-color: rgba(0, 0, 0, 0.50);
}
.remove-button {
margin: 10px 0 10px 60px;
}

406
web/app/styles/music-tab.scss Normal file
View file

@ -0,0 +1,406 @@
@import 'huegasm-variables';
.row {
margin: 0;
}
#beat-option-row {
height: 250px;
}
#light-option {
text-align: left !important;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
.tooltip {
margin-top: 5px !important;
left: 0 !important;
}
}
#music-tab {
padding: 0;
margin-bottom: $footerHeight + 30px;
}
#slide-toggle {
color: $playerDefaultIconColor;
background: #730B07;
div md-icon {
color: inherit !important;
}
}
#slide-toggle:hover{
color: lighten($playerDefaultIconColor, 30%) !important;;
}
#player-controls {
transition: all 0.2s ease-in-out;
position: absolute;
bottom: 0;
left: 0;
padding: 5px 10px;
width: 100%;
color: white !important;
z-index: 20;
background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
.tooltip.top {
margin-top: -17px;
}
.tooltip-arrow {
display: none;
}
.play-arrow, .pause, .replay {
font-size: 30px;
}
}
#player-time-controls {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
display: inline-block;
margin-left: 1em;
}
.player-control-icon {
color: $playerDefaultIconColor !important;
transition-duration: 0.1s;
margin-right: 5px;
}
.player-control-icon.active {
color: $secondaryThemeColor !important;
}
.player-control-icon:hover {
color: white !important;
}
#play-notification {
position: relative;
color: white;
top: 50%;
left: 50%;
opacity: 0;
background: black;
border-radius: 100%;
}
#player-area {
height: $playerHeight;
background-color: black;
display: inline-block;
padding: 0;
}
#playlist {
height: $playerHeight;
background-color: #1E1E1E;
padding: 0 5px 0 5px;
}
#player-area * .noUi-origin {
background-color: black;
border-radius: 5px;
}
#player-area * .noUi-base {
background-color: $secondaryThemeColor;
border-radius: 5px;
}
#volume-bar {
width: 5em;
height: 0.4em;
display: inline-block;
}
#player-area * .noUi-handle::after, #player-area * .noUi-handle::before {
content: none;
}
#seek-slider {
height: 6px;
margin-bottom: 10px;
transition-duration: 0.2s;
}
#seek-slider:hover {
height: 8px;
}
#seek-slider:hover * .noUi-handle {
opacity: 1;
}
#seek-slider * .noUi-handle {
border: none;
height: 13px;
width: 13px;
border-radius: 50%;
top: -4px;
left: -6px;
opacity: 0;
transition-duration: 0.1s;
background-color: $secondaryThemeColor !important;
box-shadow: none;
}
#play-list-controls {
min-height: 30px;
margin-top: 5px;
border-bottom: 1px solid #3a3a3a;
position: relative;
}
#play-list-area, #play-area-mic {
background-color: white;
width: 100%;
height: 350px;
margin: 10px auto 0 auto;
border-radius: 5px;
transition: 0.1s all ease-in-out;
position: relative;
overflow: auto;
#dragHere {
position: absolute;
top: 27%;
font-size: 20px;
text-align: center;
width: 100%;
}
.library-music, .mic {
position: absolute;
top: 40%;
font-size: 100px;
opacity: 0.5;
width: 100%;
text-align: center;
}
}
.song-artist {
font-weight: bold;
}
#play-list-area.dragHereHighlight {
background-color: white;
border: 5px dotted #5383ff;
}
#play-list-area.draggingOver {
background-color: darken(white, 5%);
box-shadow: inset 0 0 20px 0 rgba(0, 0, 0, 1);
}
#fileInput {
width: 1px;
height: 1px;
visibility: hidden;
}
.playlist-item {
border-bottom: 1px solid rgba(128, 128, 128, 0.3);
border-top: 1px solid rgba(128,128,128,0.3);
height: 62px;
font-family: 'Open Sans', sans-serif;
padding: 0 20px 0 5px;
position: relative;
color: black;
background: darken(white, 5%);
.close {
font-size: 18px;
}
.album-art {
height: 60px;
float: left;
margin-right: 5px;
border: 1px solid rgba(0, 0, 0, 0.5);
}
.song-info {
.song-title {
max-height: 40px;
overflow: hidden;
}
.song-artist {
max-height: 20px;
overflow: hidden;
}
}
.audio-remove-button {
position: absolute;
top: 20px;
right: 5px;
}
}
.playlist-item.active {
background: darken(white, 15%) !important;
border-top: 1px solid $secondaryThemeColor;
border-bottom: 1px solid $secondaryThemeColor;
}
.playlist-item:hover {
background: darken(white, 10%);
.close {
display: block;
}
}
#beat-area {
height: $playerBottomHeight;
position: relative;
padding: 0;
}
.star {
cursor: auto !important;
}
#beat-option-button-group {
margin: 20px 0 10px 0;
}
.beat-option {
padding: 5px 0;
text-align: center;
md-switch {
margin: 0;
}
.optionDescription {
font-size: 16px;
}
button {
margin-top: 0;
}
.tooltip {
margin: 0;
}
}
#playerBottom {
color: black;
border: 1px solid black;
width: 100%;
background: white;
}
#beatContainer {
padding: 0;
height: $playerBottomHeight;
}
#beat-area .light-group {
margin: 10px 20px 0 40px;
float: right;
div {
display: block;
padding: 10px;
}
}
#add-music-choices {
min-width: initial;
right: 0;
left: initial;
width: 100px;
top: 25px;
}
.add-new-music {
padding: 0 5px 0 10px;
font-size: 16px;
border-radius: 5px;
background: #f8f8f8;
border: none;
}
.add-new-music:hover {
background: darken(#f8f8f8, 5%);
}
.sound-cloud-link {
margin-right: 5px;
}
#visualization {
position: absolute;
top: 0;
left: 0;
}
#save-beat-preferences-star {
position: absolute;
top: 3px;
z-index: 1000;
md-icon {
color: $secondaryThemeColor !important;
font-size: 25px;
}
}
.visualizers-menu {
left: -135px;
}
.display-icon {
background: url(/favicon-96x96.png) center center no-repeat;
background-size: 80px 80px;
}
#artwork {
position: absolute;
width: 100%;
overflow: hidden;
img {
display: block;
margin: 0 auto;
max-height: 400px;
}
}
.keyboard-arrow-down {
font-size: 20px;
}
#extra-options-menu {
z-index: 1;
background: rgba(0, 0, 0, 0.5);
padding: 3px 15px;
position: absolute;
bottom: -39px;
right: 17px;
border-radius: 0 0 5px 5px;
}
#extra-options-menu:hover {
opacity: 1;
background: rgba(0, 0, 0, 0.8);
}
.check {
margin-left: 10px;
position: relative;
top: -4px;
}
// mobile overrides
@media(max-width:767px) {
#seek-slider {
height: 8px;
.noUi-handle {
opacity: 1 !important;
}
}
.settings-item:nth-of-type(2){
margin-left: 0;
}
#seek-slider {
margin-bottom: 15px;
}
.beat-option {
text-align: center !important;
}
}

59
web/app/styles/noui-slider.scss Normal file
View file

@ -0,0 +1,59 @@
@import 'huegasm-variables';
.noUi-value-vertical {
margin-top: -10px;
}
.noUi-value-vertical, .noUi-pips {
color: inherit !important;
font: 400 14px 'Slabo 27px';
}
.noUi-vertical .noUi-handle {
border: 1px solid #A3A0A0;
width: 26px;
}
.noUi-vertical .noUi-handle:after, .noUi-vertical .noUi-handle:before{
background: grey;
}
.noUi-base {
cursor: pointer;
}
.noUi-connect {
background-color: $secondaryThemeColor;
}
.noUi-handle {
cursor: pointer;
}
.noUi-horizontal .noUi-handle {
width: 0.4em;
height: 1.3em;
left: -0.071em;
top: -0.500em;
transition-duration: 0.1s;
background: $playerDefaultIconColor !important;
}
.noUi-horizontal .noUi-handle:hover {
background: white !important;
}
.noUi-target {
margin: 0 auto;
}
.noUi-base {
background-color: #ADADAD;
border: 1px solid #797979;
}
.noUi-vertical {
height: 200px;
margin-top: 10px;
margin-bottom: 15px;
}

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

@ -1,5 +1,5 @@
@import 'ember-paper'; @import 'ember-paper';
@import 'variables'; @import 'huegasm-variables';
md-checkbox.md-default-theme .md-icon { md-checkbox.md-default-theme .md-icon {
border-color: inherit !important; border-color: inherit !important;
@ -27,13 +27,6 @@ md-switch[disabled=disabled], md-switch[disabled=disabled] .md-container, md-sli
cursor: not-allowed; cursor: not-allowed;
} }
#bridgeInput {
md-input-container {
max-width: 200px;
margin: 0 auto;
}
}
md-progress-circular { md-progress-circular {
margin: 0 auto 20px auto !important; margin: 0 auto 20px auto !important;
} }
@ -42,7 +35,7 @@ md-progress-linear {
margin-bottom: 50px; margin-bottom: 50px;
} }
.settingsItem span:hover { .settings-item span:hover {
text-decoration: underline; text-decoration: underline;
md-icon.group { md-icon.group {
color: black !important; color: black !important;
@ -52,8 +45,7 @@ md-progress-linear {
} }
} }
.settings-item {
.settingsItem {
position: relative; position: relative;
display: inline-block; display: inline-block;
transition: 0.1s all ease-in-out; transition: 0.1s all ease-in-out;
@ -65,7 +57,7 @@ md-progress-linear {
} }
} }
.bootstrapTooltip md-icon { .bootstrap-tooltip md-icon {
font-size: 22px; font-size: 22px;
cursor: pointer; cursor: pointer;
-webkit-transform: translate3d(0, 0, 0); // hack for chrome to force hardware acceleration and stop flickering -webkit-transform: translate3d(0, 0, 0); // hack for chrome to force hardware acceleration and stop flickering

5
web/bower.json
View file

@ -11,8 +11,9 @@
"jquery-mousewheel": "^3.1.13", "jquery-mousewheel": "^3.1.13",
"locallyjs": "^0.3.2", "locallyjs": "^0.3.2",
"matchMedia": "^0.3.0", "matchMedia": "^0.3.0",
"nouislider": "^8.3.0", "nouislider": "^9.0.0",
"HackTimer": "https://github.com/turuslan/HackTimer.git#~1.0.0", "HackTimer": "https://github.com/turuslan/HackTimer.git#~1.0.0",
"hammer.js": "^2.0.8" "hammer.js": "^2.0.8",
"velocity": "^1.3.1"
} }
} }

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

@ -5,28 +5,17 @@ module.exports = function(defaults) {
var app = new EmberApp(defaults); var app = new EmberApp(defaults);
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/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/JavaScript-ID3-Reader/dist/id3-minimized.js');
app.import('bower_components/jquery-mousewheel/jquery.mousewheel.js');
app.import('bower_components/locallyjs/dist/locally.min.js');
app.import('bower_components/HackTimer/HackTimer.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');
// Use `app.import` to add additional libraries to the generated app.import('bower_components/jquery-mousewheel/jquery.mousewheel.js');
// output files. app.import('bower_components/locallyjs/dist/locally.min.js');
// app.import('bower_components/velocity/velocity.js');
// If you need to use different assets in different
// environments, specify an object as the first parameter. That
// object's keys should be the environment name and the values
// should be the asset to use in that environment.
//
// If the library that you are including contains AMD or ES6
// modules that you would like to import into your application
// please specify an object with the list of modules as keys
// along with the exports of each module as its value.
return app.toTree(); return app.toTree();
}; };

2
web/package.json
View file

@ -1,6 +1,6 @@
{ {
"name": "huegasm", "name": "huegasm",
"version": "2.0.0", "version": "1.1.0",
"description": "Huegasm is a free web application for managing and synchronizing your Philips Hue lights with the beat of your music.", "description": "Huegasm is a free web application for managing and synchronizing your Philips Hue lights with the beat of your music.",
"private": true, "private": true,
"directories": { "directories": {