modernizing: further modularizing the stylesheets, new bootstrap stylesheet to allow the ( manual ) removal of bootstrap modules, velocityjs over jquery animations, fancier scrollbars for webkit
Still mostly FUBAR - WIP
This commit is contained in:
parent
38789b5e45
commit
977fdd0d47
35 changed files with 1053 additions and 1085 deletions
|
|
@ -1,9 +1,12 @@
|
|||
# Huegasm
|
||||
|
||||
Music awesomeness for hue lights.
|
||||
|
||||
It lives at http://www.huegasm.com
|
||||
|
||||
|
||||
# Current priorities
|
||||
- modernize the app
|
||||
- create a hybrid app with Cardova
|
||||
|
||||
## POSSIBLE FUTURE FEATURES
|
||||
- better visualizations
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
# Huegasm
|
||||
|
||||
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
|
||||
|
||||
|
|
@ -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
|
||||
|
||||
### Running Tests
|
||||
|
||||
* `ember test`
|
||||
* `ember test --server`
|
||||
|
||||
### Building
|
||||
|
||||
* `ember build` (development)
|
||||
* `ember build --environment production` (production)
|
||||
|
||||
### Deploying
|
||||
|
||||
Specify what it takes to deploy your app.
|
||||
|
||||
## Further Reading / Useful Links
|
||||
|
||||
* [ember.js](http://emberjs.com/)
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
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}}
|
||||
<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}}
|
||||
|
||||
{{#if isAuthenticating}}
|
||||
<p>Your bridge IP is <b>{{bridgeIp}}</b> <br>
|
||||
Press the button on your bridge to authenticate this application.</p>
|
||||
{{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}}
|
||||
{{else}}
|
||||
|
|
@ -26,7 +26,7 @@
|
|||
<p>Found multiple hue bridges. <br>
|
||||
Please select the one you want to use for this application.</p>
|
||||
|
||||
<div id="bridgeButtonGroup">
|
||||
<div id="bridge-button-group">
|
||||
{{#each multipleBridgeIps as |bridge|}}
|
||||
{{#paper-radio value=bridge selected=bridgeIp}}{{bridge}}{{/paper-radio}}
|
||||
{{/each}}
|
||||
|
|
@ -38,7 +38,7 @@
|
|||
( or type <b>offline</b> to look around )
|
||||
</p>
|
||||
|
||||
<span id="bridgeInput">
|
||||
<span id="bridge-input">
|
||||
{{paper-input label="Hue bridge IP address" value=manualBridgeIp}}
|
||||
{{#paper-button action="findBridgeByIp" raised=true primary=true}}Find{{/paper-button}}
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ const {
|
|||
} = Ember;
|
||||
|
||||
export default Component.extend({
|
||||
classNames: ['colorpicker'],
|
||||
classNames: ['color-picker'],
|
||||
rgb: null,
|
||||
canvas: null,
|
||||
canvasContext: null,
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ const {
|
|||
|
||||
export default Component.extend({
|
||||
classNames: ['dropdown-menu'],
|
||||
elementId: 'groupList',
|
||||
elementId: 'group-list',
|
||||
tagName: null,
|
||||
groupIdSelection: null,
|
||||
|
||||
|
|
@ -22,14 +22,14 @@ export default Component.extend({
|
|||
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) {
|
||||
if (groupsData.hasOwnProperty(key)) {
|
||||
let rowClass = 'groupRow';
|
||||
let rowClass = 'group-row';
|
||||
|
||||
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});
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
{{#paper-list}}
|
||||
{{#paper-item class="newGroupRow"}}
|
||||
<div class="newGroup" {{action "toggleAddGroupsModal"}}>{{paper-icon icon="group-add"}} Add a new group</div>
|
||||
{{#paper-item class="new-group-row"}}
|
||||
<div class="new-group" {{action "toggleAddGroupsModal"}}>{{paper-icon icon="group-add"}} Add a new group</div>
|
||||
{{/paper-item}}
|
||||
|
||||
{{#each groupsArrData as |group|}}
|
||||
{{#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}}
|
||||
{{/each}}
|
||||
{{/paper-list}}
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ const {
|
|||
|
||||
export default Component.extend({
|
||||
classNames: ['container-fluid'],
|
||||
elementId: 'hueControls',
|
||||
elementId: 'hue-controls',
|
||||
bridgeIp: null,
|
||||
manualBridgeIp: null,
|
||||
bridgeUsername: null,
|
||||
|
|
@ -64,12 +64,12 @@ export default Component.extend({
|
|||
|
||||
if(haveTooltip) {
|
||||
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() {
|
||||
|
|
@ -142,8 +142,8 @@ export default Component.extend({
|
|||
startIntro(){
|
||||
let INTRO = introJs,
|
||||
intro = INTRO(),
|
||||
playerBottom = $('#playerBottom'),
|
||||
beatDetectionAreaArrowIcon = $('#beatDetectionAreaArrowIcon');
|
||||
playerBottom = $('#player-bottom'),
|
||||
beatDetectionAreaArrowIcon = $('#beat-detection-area-arrow-icon');
|
||||
|
||||
this.set('dimmerOn', false);
|
||||
|
||||
|
|
@ -153,7 +153,7 @@ export default Component.extend({
|
|||
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>' +
|
||||
'<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>'
|
||||
},
|
||||
{
|
||||
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 ).'
|
||||
},
|
||||
{
|
||||
element: '#beatOptionRow',
|
||||
element: '#beat-option-row',
|
||||
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>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'
|
||||
},
|
||||
{
|
||||
element: '#beatContainer',
|
||||
element: '#beat-container',
|
||||
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>',
|
||||
position: 'top'
|
||||
},
|
||||
{
|
||||
element: '#lightsTab',
|
||||
element: '#lights-tab',
|
||||
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>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>'
|
||||
},
|
||||
{
|
||||
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>' +
|
||||
'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.',
|
||||
position: 'left'
|
||||
},
|
||||
{
|
||||
element: $('.settingsItem')[1],
|
||||
element: $('.settings-item')[1],
|
||||
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.',
|
||||
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) => {
|
||||
if(element.id === 'musicTab' || element.id === 'playlist' || element.id === 'playerArea' || element.id === 'beatOptionRow' || element.id === 'beatOptionButtonGroup' || element.id === 'beatContainer' || element.id === 'usingMicAudioTooltip'){
|
||||
$('#musicTab').removeClass('hidden');
|
||||
$('#lightsTab').addClass('hidden');
|
||||
$('.navigationItem').eq(0).removeClass('active');
|
||||
$('.navigationItem').eq(1).addClass('active');
|
||||
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'){
|
||||
$('#music-tab').removeClass('hidden');
|
||||
$('#lights-tab').addClass('hidden');
|
||||
$('.navigation-item').eq(0).removeClass('active');
|
||||
$('.navigation-item').eq(1).addClass('active');
|
||||
} else {
|
||||
$('#lightsTab').removeClass('hidden');
|
||||
$('#musicTab').addClass('hidden');
|
||||
$('.navigationItem').eq(1).removeClass('active');
|
||||
$('.navigationItem').eq(0).addClass('active');
|
||||
$('#lights-tab').removeClass('hidden');
|
||||
$('#music-tab').addClass('hidden');
|
||||
$('.navigation-item').eq(1).removeClass('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();
|
||||
|
||||
if(beatDetectionAreaArrowIcon.hasClass('keyboard-arrow-up')){
|
||||
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();
|
||||
|
||||
if(beatDetectionAreaArrowIcon.hasClass('keyboard-arrow-down')){
|
||||
|
|
@ -249,10 +249,10 @@ export default Component.extend({
|
|||
|
||||
let onFinish = ()=>{
|
||||
this.set('activeTab', 1);
|
||||
$('#musicTab').removeClass('hidden');
|
||||
$('#lightsTab').addClass('hidden');
|
||||
$('.navigationItem').eq(0).removeClass('active');
|
||||
$('.navigationItem').eq(1).addClass('active');
|
||||
$('#music-tab').removeClass('hidden');
|
||||
$('#lights-tab').addClass('hidden');
|
||||
$('.navigation-item').eq(0).removeClass('active');
|
||||
$('.navigation-item').eq(1).addClass('active');
|
||||
|
||||
if(beatDetectionAreaArrowIcon.hasClass('keyboard-arrow-up')){
|
||||
playerBottom.show();
|
||||
|
|
|
|||
|
|
@ -2,24 +2,24 @@
|
|||
<div class="row navigation">
|
||||
<div class="col-sm-4 col-sm-offset-3 col-xs-8">
|
||||
{{#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}}
|
||||
</div>
|
||||
|
||||
<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>
|
||||
|
||||
{{groups-list lightsData=lightsData groupsData=groupsData activeLights=activeLights apiURL=apiURL updateGroupsData=updateGroupsData groupControlDisplayed=groupControlDisplayed storage=storage}}
|
||||
</div>
|
||||
|
||||
<div class="settingsItem">
|
||||
<span data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="settingsItemSettings">
|
||||
<div class="settings-item">
|
||||
<span data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="settings-itemSettings">
|
||||
{{paper-icon icon="settings" class=dimmerOnClass}}Settings <span class="caret"></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 "startIntro"}}><a href="#">Restart tutorial</a></li>
|
||||
<li {{action "clearAllSettings"}}><a href="#">Reset settings</a></li>
|
||||
|
|
@ -28,7 +28,7 @@
|
|||
</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"}}
|
||||
{{/if}}
|
||||
|
|
@ -4,7 +4,7 @@
|
|||
{{#if ready}}
|
||||
{{bridge-finder bridgeIp=bridgeIp bridgeUsername=bridgeUsername trial=trial storage=storage}}
|
||||
{{else}}
|
||||
<div class="readyBlock">
|
||||
<div class="ready-block">
|
||||
<div class="title">
|
||||
<img src="assets/images/logo.png" alt="Huegasm">
|
||||
</div>
|
||||
|
|
@ -12,16 +12,16 @@
|
|||
<p id="intro">
|
||||
Your lights, meet your music. Huegasm.
|
||||
</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.
|
||||
</p>
|
||||
|
||||
<div class="embedContainerWrapper">
|
||||
<div class="embedContainer">
|
||||
<div class="embed-container-wrapper">
|
||||
<div class="embed-container">
|
||||
<iframe width="560" height="315" src="https://www.youtube.com/embed/zi9J6Qg-MPw" frameborder="0" allowfullscreen></iframe>
|
||||
</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>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ const {
|
|||
} = Ember;
|
||||
|
||||
export default Component.extend({
|
||||
classNames: ['lightGroup'],
|
||||
classNames: ['light-group'],
|
||||
isHovering: false,
|
||||
lightsList: A(),
|
||||
|
||||
|
|
@ -63,10 +63,10 @@ export default Component.extend({
|
|||
type = 'a19';
|
||||
}
|
||||
|
||||
let activeClass = 'lightActive';
|
||||
let activeClass = 'light-active';
|
||||
|
||||
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});
|
||||
|
|
@ -87,14 +87,14 @@ export default Component.extend({
|
|||
clickLight(id, data){
|
||||
let light = $('.light'+id);
|
||||
|
||||
if(!light.hasClass('bootstrapTooltip')){
|
||||
if(!light.hasClass('bootstrap-tooltip')){
|
||||
light = light.parent();
|
||||
}
|
||||
|
||||
if(light.hasClass('lightInactive')){
|
||||
light.addClass('lightActive').removeClass('lightInactive');
|
||||
} else if(light.hasClass('lightActive')){
|
||||
light.addClass('lightInactive').removeClass('lightActive');
|
||||
if(light.hasClass('light-inactive')){
|
||||
light.addClass('light-active').removeClass('light-inactive');
|
||||
} else if(light.hasClass('light-active')){
|
||||
light.addClass('light-inactive').removeClass('light-active');
|
||||
}
|
||||
|
||||
this.sendAction('action', id, data);
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
{{#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">
|
||||
</div>
|
||||
{{/each}}
|
||||
|
|
@ -10,7 +10,7 @@ const {
|
|||
export default Component.extend({
|
||||
classNames: ['col-sm-8', 'col-sm-offset-2', 'col-xs-12'],
|
||||
classNameBindings: ['active::hidden'],
|
||||
elementId: 'lightsTab',
|
||||
elementId: 'lights-tab',
|
||||
|
||||
activeLights: [],
|
||||
lightsData: null,
|
||||
|
|
@ -39,7 +39,7 @@ export default Component.extend({
|
|||
return null;
|
||||
}
|
||||
|
||||
return 'toggleColorpicker';
|
||||
return 'toggleColorPicker';
|
||||
}),
|
||||
|
||||
// determines the average brightness of the hue system for the brightness slider
|
||||
|
|
@ -109,7 +109,9 @@ export default Component.extend({
|
|||
}),
|
||||
|
||||
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) {
|
||||
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(lightsOn !== lightsOnSystem){
|
||||
activeLights.forEach(function (light) {
|
||||
$.ajax(self.get('apiURL') + '/lights/' + light + '/state', {
|
||||
activeLights.forEach((light)=>{
|
||||
$.ajax(this.get('apiURL') + '/lights/' + light + '/state', {
|
||||
data: JSON.stringify({"on": lightsOn}),
|
||||
contentType: 'application/json',
|
||||
type: 'PUT'
|
||||
|
|
@ -128,7 +130,10 @@ export default Component.extend({
|
|||
}),
|
||||
|
||||
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){
|
||||
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(lightsBrightness !== lightsBrightnessSystem){
|
||||
activeLights.forEach(function(light){
|
||||
$.ajax(self.get('apiURL') + '/lights/' + light + '/state', {
|
||||
activeLights.forEach((light)=>{
|
||||
$.ajax(this.get('apiURL') + '/lights/' + light + '/state', {
|
||||
data: JSON.stringify({"bri": lightsBrightness}),
|
||||
contentType: 'application/json',
|
||||
type: 'PUT'
|
||||
|
|
@ -150,13 +155,13 @@ export default Component.extend({
|
|||
|
||||
didInsertElement() {
|
||||
$(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');
|
||||
}
|
||||
});
|
||||
|
||||
$(document).on('click', '#colorRow', () => {
|
||||
this.send('toggleColorpicker');
|
||||
$(document).on('click', '#color-row', () => {
|
||||
this.send('toggleColorPicker');
|
||||
});
|
||||
},
|
||||
|
||||
|
|
@ -187,7 +192,7 @@ export default Component.extend({
|
|||
});
|
||||
}
|
||||
},
|
||||
toggleColorpicker() {
|
||||
toggleColorPicker() {
|
||||
this.toggleProperty('colorPickerDisplayed');
|
||||
}
|
||||
},
|
||||
|
|
@ -202,7 +207,7 @@ export default Component.extend({
|
|||
lastStrobeLight: 0,
|
||||
|
||||
onStrobeOnChange: observer('strobeOn', function () {
|
||||
let lightsData = this.get('lightsData'), self = this;
|
||||
let lightsData = this.get('lightsData');
|
||||
|
||||
if (this.get('strobeOn')) {
|
||||
this.set('preStrobeOnLightsDataCache', lightsData);
|
||||
|
|
@ -224,11 +229,11 @@ export default Component.extend({
|
|||
|
||||
this.set('strobeOnInervalHandle', setInterval(this.strobeStep.bind(this), 200));
|
||||
} else { // revert the light system to pre-strobe
|
||||
let preStrobeOnLightsDataCache = this.get('preStrobeOnLightsDataCache'), updateLight = function (lightIndx) {
|
||||
$.ajax(self.get('apiURL') + '/lights/' + lightIndx + '/state', {
|
||||
let preStrobeOnLightsDataCache = this.get('preStrobeOnLightsDataCache'), updateLight = (lightIndex)=> {
|
||||
$.ajax(this.get('apiURL') + '/lights/' + lightIndex + '/state', {
|
||||
data: JSON.stringify({
|
||||
'on': preStrobeOnLightsDataCache[lightIndx].state.on,
|
||||
'sat': preStrobeOnLightsDataCache[lightIndx].state.sat
|
||||
'on': preStrobeOnLightsDataCache[lightIndex].state.on,
|
||||
'sat': preStrobeOnLightsDataCache[lightIndex].state.sat
|
||||
}),
|
||||
contentType: 'application/json',
|
||||
type: 'PUT'
|
||||
|
|
|
|||
|
|
@ -1,27 +1,27 @@
|
|||
{{#paper-list}}
|
||||
{{#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-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-item}}
|
||||
|
||||
{{#paper-item}}
|
||||
{{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-item}}
|
||||
|
||||
{{#paper-item elementId="colorRow"}}
|
||||
{{#paper-item elementId="color-row"}}
|
||||
{{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}}
|
||||
|
||||
<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}}
|
||||
{{color-picker lightsData=lightsData activeLights=activeLights rgb=rgb}}
|
||||
|
|
@ -30,13 +30,13 @@
|
|||
|
||||
{{#paper-item}}
|
||||
{{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-item}}
|
||||
|
||||
{{#paper-item}}
|
||||
{{paper-icon icon="color-lens" class=dimmerOnClass}} {{paper-icon icon="loop" id="loopAddition" 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>
|
||||
{{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="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-item}}
|
||||
{{/paper-list}}
|
||||
|
|
@ -12,14 +12,6 @@ const {
|
|||
} = Ember;
|
||||
|
||||
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(){
|
||||
if(this.get('ambienceMode') && this.get('playing')) {
|
||||
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
|
||||
$('#beatSpeakerCenterOuter').removeClass('vibrateOuter').prop('offsetWidth', $('#beatSpeakerCenterOuter').prop('offsetWidth')).addClass('vibrateOuter');
|
||||
$('#beatSpeakerCenterInner').removeClass('vibrateInner').prop('offsetWidth', $('#beatSpeakerCenterInner').prop('offsetWidth')).addClass('vibrateInner');
|
||||
$('#beat-speaker-center-outer').velocity({blur: 3}, 100).velocity({blur: 0}, 100);
|
||||
$('#beat-speaker-center-inner').velocity({scale: 1.05}, 100).velocity({scale: 1}, 100);
|
||||
},
|
||||
|
||||
init() {
|
||||
|
|
@ -374,7 +366,7 @@ export default Component.extend(helperMixin, visualizerMixin, {
|
|||
let self = this;
|
||||
|
||||
// file input code
|
||||
$('#fileInput').on('change', function () {
|
||||
$('#file-input').on('change', function() {
|
||||
let files = this.files;
|
||||
self.send('handleNewFiles', files);
|
||||
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
|
||||
$('#beatContainer').on('mousedown', '#beatSpeakerCenterInner', function(event) {
|
||||
$('#beat-container').on('mousedown', '#beat-speaker-center-inner', function(event) {
|
||||
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);
|
||||
});
|
||||
|
||||
// control the volume by scrolling up/down
|
||||
$('#playerArea').on('mousewheel', (event)=>{
|
||||
$('#player-area').on('mousewheel', (event)=>{
|
||||
if(this.get('playQueueNotEmpty') && !this.get('usingMicAudio')) {
|
||||
let scrollSize = 5;
|
||||
|
||||
|
|
@ -432,7 +424,7 @@ export default Component.extend(helperMixin, visualizerMixin, {
|
|||
}
|
||||
|
||||
if(!this.get('playerBottomDisplayed')) {
|
||||
$('#playerBottom').hide();
|
||||
$('#player-bottom').hide();
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -444,7 +436,7 @@ export default Component.extend(helperMixin, visualizerMixin, {
|
|||
this.set('currentVisName', name);
|
||||
},
|
||||
hideTooltip(){
|
||||
$('.bootstrapTooltip').tooltip('hide');
|
||||
$('.bootstrap-tooltip').tooltip('hide');
|
||||
},
|
||||
gotoSCURL(URL){
|
||||
// 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(){
|
||||
this.$('#playerBottom').slideToggle();
|
||||
let elem = this.$('#player-bottom');
|
||||
|
||||
elem.velocity(elem.is(':visible') ? 'slideUp' : 'slideDown', { duration: 500 });
|
||||
this.changePlayerControl('playerBottomDisplayed', !this.get('playerBottomDisplayed'));
|
||||
},
|
||||
goToSong(index, playSong, scrollToSong){
|
||||
|
|
@ -620,12 +614,10 @@ export default Component.extend(helperMixin, visualizerMixin, {
|
|||
if(scrollToSong){
|
||||
// this is just a bad workaround to make sure that the track has been rendered to the playlist
|
||||
run.later(()=>{
|
||||
let track = $('.track'+index), playListArea = $('#playListArea');
|
||||
let track = $('.track'+index);
|
||||
|
||||
if(!isNone(track) && !isNone(track.offset())) {
|
||||
playListArea.animate({
|
||||
scrollTop: track.offset().top - playListArea.offset().top + playListArea.scrollTop()
|
||||
});
|
||||
track.velocity('scroll');
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
|
|
@ -642,10 +634,10 @@ export default Component.extend(helperMixin, visualizerMixin, {
|
|||
}
|
||||
},
|
||||
playerAreaPlay(){
|
||||
if(isEmpty($('#playerControls:hover')) && this.get('playQueuePointer') !== -1 ){
|
||||
if(isEmpty($('#player-controls:hover')) && this.get('playQueuePointer') !== -1 ){
|
||||
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) {
|
||||
|
|
@ -795,7 +787,7 @@ export default Component.extend(helperMixin, visualizerMixin, {
|
|||
}
|
||||
},
|
||||
addLocalAudio: function () {
|
||||
$('#fileInput').click();
|
||||
$('#file-input').click();
|
||||
},
|
||||
shuffleChanged(value) {
|
||||
this.changePlayerControl('shuffle', isNone(value) ? !this.get('shuffle') : value);
|
||||
|
|
@ -842,16 +834,16 @@ export default Component.extend(helperMixin, visualizerMixin, {
|
|||
});
|
||||
this.send('handleNewFiles', files);
|
||||
},
|
||||
playListAreaDragOver(){
|
||||
playerListAreaDragOver(){
|
||||
this.set('draggingOverPlayListArea', true);
|
||||
},
|
||||
playListAreaDragLeave(){
|
||||
playerListAreaDragLeave(){
|
||||
this.set('draggingOverPlayListArea', false);
|
||||
},
|
||||
handleNewFiles(files){
|
||||
let self = this,
|
||||
playQueue = this.get('playQueue'),
|
||||
updatePlayQueue = ()=>{
|
||||
updatePlayQueue = function(){
|
||||
let tags = ID3.getAllTags("local"),
|
||||
picture = null;
|
||||
|
||||
|
|
@ -864,7 +856,14 @@ export default Component.extend(helperMixin, visualizerMixin, {
|
|||
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();
|
||||
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ const {
|
|||
export default Mixin.create({
|
||||
classNames: ['col-sm-10', 'col-sm-offset-1', 'col-xs-12'],
|
||||
classNameBindings: ['active::hidden'],
|
||||
elementId: 'musicTab',
|
||||
elementId: 'music-tab',
|
||||
|
||||
dancer: null,
|
||||
|
||||
|
|
@ -124,7 +124,6 @@ export default Mixin.create({
|
|||
paused: false,
|
||||
// audio: playing or paused
|
||||
playing: false,
|
||||
fadeOutNotification: false,
|
||||
songBeatPreferences: {},
|
||||
usingBeatPreferences: false,
|
||||
oldBeatPrefCache: null,
|
||||
|
|
@ -236,14 +235,14 @@ export default Mixin.create({
|
|||
}),
|
||||
|
||||
playListAreaClass: computed('dragging', 'draggingOverPlayListArea', 'dimmerOn', function(){
|
||||
let classes = 'cursorPointer';
|
||||
let classes = 'pointer';
|
||||
|
||||
if(this.get('dragging')){
|
||||
classes += ' dragHereHighlight';
|
||||
classes += ' drag-here-highlight';
|
||||
}
|
||||
|
||||
if(this.get('draggingOverPlayListArea')){
|
||||
classes += ' draggingOver';
|
||||
classes += ' dragging-over';
|
||||
}
|
||||
|
||||
if(this.get('dimmerOn')){
|
||||
|
|
@ -258,7 +257,7 @@ export default Mixin.create({
|
|||
}),
|
||||
|
||||
volumeMutedClass: computed('volumeMuted', function(){
|
||||
let classes = 'playerControllIcon volumeButton';
|
||||
let classes = 'player-control-icon volumeButton';
|
||||
|
||||
if(this.get('volumeMuted')){
|
||||
classes += ' active';
|
||||
|
|
@ -268,19 +267,19 @@ export default Mixin.create({
|
|||
}),
|
||||
|
||||
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(){
|
||||
return this.get('usingMicAudio') ? 'playerControllIcon active' : 'playerControllIcon';
|
||||
return this.get('usingMicAudio') ? 'player-control-icon active' : 'player-control-icon';
|
||||
}),
|
||||
|
||||
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(){
|
||||
return this.get('shuffle') ? 'playerControllIcon active' : 'playerControllIcon';
|
||||
return this.get('shuffle') ? 'player-control-icon active' : 'player-control-icon';
|
||||
}),
|
||||
|
||||
volumeIcon: computed('volumeMuted', 'volume', function() {
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@ export default Mixin.create({
|
|||
didInsertElement(){
|
||||
let dancer = this.get('dancer'),
|
||||
canvas = $('#visualization')[0],
|
||||
playerArea = $('#playerArea'),
|
||||
playerArea = $('#player-area'),
|
||||
ctx = canvas.getContext('2d'),
|
||||
spacing = 2,
|
||||
h = playerArea.height(), w;
|
||||
|
|
|
|||
|
|
@ -1,45 +1,45 @@
|
|||
<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>
|
||||
<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}}
|
||||
{{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}}
|
||||
<span data-toggle="tooltip" data-placement="top" class="bootstrapTooltip" id="prevTooltip"
|
||||
data-title={{prevTooltipTxt}} {{action "previous"}}>{{paper-icon icon="skip-previous" class="playerControllIcon"}}</span><!--
|
||||
<span data-toggle="tooltip" data-placement="top" class="bootstrap-tooltip" id="prevTooltip"
|
||||
data-title={{prevTooltipTxt}} {{action "previous"}}>{{paper-icon icon="skip-previous" class="player-control-icon"}}</span><!--
|
||||
-->{{/if}}<!--
|
||||
--><span data-toggle="tooltip" data-placement="top" id="playingTooltip" class="bootstrapTooltip"
|
||||
data-title={{playingTooltipTxt}} {{action "play"}}>{{paper-icon icon=playingIcon class="playerControllIcon"}}</span><!--
|
||||
--><span data-toggle="tooltip" data-placement="top" id="playingTooltip" class="bootstrap-tooltip"
|
||||
data-title={{playingTooltipTxt}} {{action "play"}}>{{paper-icon icon=playingIcon class="player-control-icon"}}</span><!--
|
||||
-->{{#if playQueueMultiple}}<!--
|
||||
--><span data-toggle="tooltip" data-placement="top" class="bootstrapTooltip"
|
||||
data-title="Next" {{action "next" true}}>{{paper-icon icon="skip-next" action="" class="playerControllIcon"}}</span><!--
|
||||
--><span data-toggle="tooltip" data-placement="top" class="bootstrap-tooltip"
|
||||
data-title="Next" {{action "next" true}}>{{paper-icon icon="skip-next" action="" class="player-control-icon"}}</span><!--
|
||||
-->{{/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><!--
|
||||
-->{{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}}
|
||||
|
||||
<span class="pull-right">
|
||||
{{#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-sm.png" class="visible-xs-inline" />
|
||||
</a>
|
||||
{{/if}}
|
||||
<span class="dropup">
|
||||
<span class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
|
||||
<span data-toggle="tooltip" data-placement="top" class="bootstrapTooltip" data-title="Visualizations" {{action "hideTooltip"}}>
|
||||
{{paper-icon icon="remove-red-eye" class="playerControllIcon"}}
|
||||
<span data-toggle="tooltip" data-placement="top" class="bootstrap-tooltip" data-title="Visualizations" {{action "hideTooltip"}}>
|
||||
{{paper-icon icon="remove-red-eye" class="player-control-icon"}}
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<ul class="dropdown-menu visualizersMenu">
|
||||
<ul class="dropdown-menu visualizers-menu">
|
||||
{{#each visNames as |name|}}
|
||||
<li><a href="#" {{action "setVisName" name}}>{{name}} {{#if (eq currentVisName name)}}{{paper-icon icon="check"}}{{/if}}</a></li>
|
||||
{{/each}}
|
||||
|
|
@ -50,47 +50,47 @@
|
|||
</div>
|
||||
|
||||
<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}}
|
||||
<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
|
||||
<span class="caret"></span>
|
||||
</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 "toggleIsShowingAddSoundCloudModal"}}>SoundCloud</a></li>
|
||||
</ul>
|
||||
|
||||
{{!--{{#if (and usingLocalAudio playQueueNotEmpty)}}
|
||||
<div id="extraOptionsMenu" 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="bootstrapTooltip" 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>
|
||||
<div id="extra-options-menu" class="hidden-xs">
|
||||
<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="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="bootstrap-tooltip" data-title="Clear playlist" {{action "clearPlaylist"}}>{{paper-icon icon="clear-all" class="player-control-icon"}}</span>
|
||||
</div>
|
||||
{{/if}} --}}
|
||||
{{/if}}
|
||||
|
||||
{{#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 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="bootstrapTooltip" 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" 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="repeatTooltip" data-title={{repeatTooltipTxt}} {{action "repeatChanged"}}>{{paper-icon icon=repeatIcon class=repeatClass}}</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}}
|
||||
</div>
|
||||
|
||||
{{#if usingMicAudio}}
|
||||
<div id="playAreaMic" class="{{if dimmerOn "dimmerOn"}}">
|
||||
<div id="play-area-mic" class="{{if dimmerOn "dimmerOn"}}">
|
||||
{{paper-icon icon="mic" class=dimmerOnClass}}
|
||||
</div>
|
||||
{{else}}
|
||||
{{#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)}}
|
||||
<div id="dragHere">
|
||||
{{#if dragging}}
|
||||
|
|
@ -103,17 +103,17 @@
|
|||
{{/if}}
|
||||
|
||||
{{#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}}
|
||||
<img class="albumArt" src={{item.picture}}>
|
||||
<img class="album-art" src={{item.picture}}>
|
||||
{{else}}
|
||||
<img class="albumArt" src="assets/images/missingArtwork.png">
|
||||
<img class="album-art" src="assets/images/missingArtwork.png">
|
||||
{{/if}}
|
||||
|
||||
<div class="songInfo">
|
||||
<div class="song-info">
|
||||
{{#if item.title}}
|
||||
<div class="songTitle">{{item.title}}</div>
|
||||
<div class="songArtist">
|
||||
<div class="song-title">{{item.title}}</div>
|
||||
<div class="song-artist">
|
||||
{{#if item.artistUrl}}
|
||||
<a href="#" {{action "gotoURL" item.artistUrl bubbles=false}}>{{item.artist}}</a>
|
||||
{{else}}
|
||||
|
|
@ -125,7 +125,7 @@
|
|||
{{/if}}
|
||||
</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>
|
||||
{{/each}}
|
||||
</div>
|
||||
|
|
@ -134,48 +134,48 @@
|
|||
</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">
|
||||
{{paper-icon icon=beatDetectionAreaArrowIcon id="beatDetectionAreaArrowIcon"}}
|
||||
{{paper-icon icon=beatDetectionAreaArrowIcon id="beat-detection-area-arrow-icon"}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="playerBottom" class="row {{if dimmerOn "dimmerOn"}}">
|
||||
<div id="beatArea" class="col-sm-7 col-xs-12">
|
||||
<div id="player-bottom" class="row {{if dimmerOn "dimmerOn"}}">
|
||||
<div id="beat-area" class="col-sm-7 col-xs-12">
|
||||
{{#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"}}
|
||||
</span>
|
||||
{{/if}}
|
||||
|
||||
<div class="row" id="beatOptionRow">
|
||||
<div class="beatOption 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>
|
||||
<div class="row" id="beat-option-row">
|
||||
<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 bootstrap-tooltip">Sensitivity</span>
|
||||
{{range-slider start=threshold orientation="vertical" step=beatOptions.threshold.step range=beatOptions.threshold.range slide="thresholdChanged" pips=beatOptions.threshold.pips}}
|
||||
</div>
|
||||
|
||||
<div class="beatOption 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>
|
||||
<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 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}}
|
||||
</div>
|
||||
|
||||
{{#if usingMicAudio}}
|
||||
<div class="beatOption 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>
|
||||
<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 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}}
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
<div id="lightOption" class="beatOption 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"}}>
|
||||
<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="bootstrap-tooltip" {{action "hideTooltip" on="mouseLeave"}}>
|
||||
{{#paper-checkbox checked=flashingTransitions}}Flashing Transitions{{/paper-checkbox}}
|
||||
</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}}
|
||||
</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}}
|
||||
</span>--}}
|
||||
</div>
|
||||
|
|
@ -183,7 +183,7 @@
|
|||
|
||||
</div>
|
||||
|
||||
<div id="beatContainer" class="col-sm-5 hidden-xs">
|
||||
<div id="beat-container" class="col-sm-5">
|
||||
<div class="bezel">
|
||||
<div class="rivet1"></div>
|
||||
<div class="rivet2"></div>
|
||||
|
|
@ -194,8 +194,8 @@
|
|||
<div class="rivet7"></div>
|
||||
<div class="rivet8"></div>
|
||||
|
||||
<div id="beatSpeakerCenterOuter">
|
||||
<div id="beatSpeakerCenterInner" class="cursorPointer" {{action "clickSpeaker"}}>
|
||||
<div id="beat-speaker-center-outer">
|
||||
<div id="beat-speaker-center-inner" class="pointer" {{action "clickSpeaker"}}>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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-appearance';
|
||||
|
||||
@import 'bootstrap'; // used to take out bootstrap scss modules that we don't need
|
||||
@import 'paper';
|
||||
|
||||
@import 'bridge-finder';
|
||||
@import 'common';
|
||||
@import 'dimmer';
|
||||
@import 'fancy-speaker';
|
||||
@import 'index';
|
||||
@import 'introjs';
|
||||
@import 'paper';
|
||||
@import 'variables';
|
||||
@import 'group-controls';
|
||||
@import 'hue-controls';
|
||||
@import 'huegasm-variables';
|
||||
@import 'light-group';
|
||||
@import 'music-tab';
|
||||
@import 'noui-slider';
|
||||
|
||||
html {
|
||||
min-height: 100%;
|
||||
|
|
@ -17,34 +23,12 @@ html {
|
|||
}
|
||||
|
||||
body {
|
||||
font-family: 'Slabo 27px', serif;
|
||||
margin-bottom: $footerHeight + 30px;
|
||||
position: static;
|
||||
}
|
||||
|
||||
.ember-notify-default.ember-notify-cn {
|
||||
top: 20px;
|
||||
}
|
||||
|
||||
.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;
|
||||
body, button {
|
||||
font-family: 'Slabo 27px', serif;
|
||||
}
|
||||
|
||||
.ember-app {
|
||||
|
|
@ -66,8 +50,29 @@ body {
|
|||
}
|
||||
}
|
||||
|
||||
.cursorPointer {
|
||||
cursor: pointer;
|
||||
.ember-notify-default.ember-notify-cn {
|
||||
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 {
|
||||
|
|
@ -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 {
|
||||
background: $secondaryThemeColor;
|
||||
}
|
||||
|
|
@ -769,82 +97,26 @@ div.ember-modal-dialog {
|
|||
}
|
||||
}
|
||||
|
||||
.addMusicButton {
|
||||
float: right;
|
||||
color: white;
|
||||
// fancy webkit scrollbars
|
||||
::-webkit-scrollbar {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
#addMusicChoices {
|
||||
min-width: initial;
|
||||
right: 0;
|
||||
left: initial;
|
||||
width: 100px;
|
||||
top: 25px;
|
||||
::-webkit-scrollbar:vertical {
|
||||
width: 12px;
|
||||
}
|
||||
|
||||
.addNewMusic {
|
||||
padding: 0 5px 0 10px;
|
||||
font-size: 16px;
|
||||
border-radius: 5px;
|
||||
background: #f8f8f8;
|
||||
border: none;
|
||||
::-webkit-scrollbar:horizontal {
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
.addNewMusic:hover {
|
||||
background: darken(#f8f8f8, 5%);
|
||||
::-webkit-scrollbar-thumb {
|
||||
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 {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
#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);
|
||||
::-webkit-scrollbar-track {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
56
web/app/styles/bootstrap.scss
vendored
Normal file
56
web/app/styles/bootstrap.scss
vendored
Normal 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";
|
||||
|
|
@ -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,6 +6,10 @@
|
|||
position: relative !important;
|
||||
}
|
||||
|
||||
.noTextDecoration {
|
||||
.no-text-decoration {
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
.pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
@import 'variables';
|
||||
@import 'huegasm-variables';
|
||||
|
||||
div.dimmerOn {
|
||||
color: white !important;
|
||||
|
|
@ -19,20 +19,20 @@ body.dimmerOn {
|
|||
.color {
|
||||
border: 1px solid white;
|
||||
}
|
||||
.playlistItem {
|
||||
.playlist-item {
|
||||
color: #cdcdcd;
|
||||
background: $dimmerOnButtonColor;
|
||||
}
|
||||
.playlistItem.active {
|
||||
.playlist-item.active {
|
||||
background: darken($dimmerOnButtonColor, 15%) !important;
|
||||
}
|
||||
.playlistItem:hover {
|
||||
.playlist-item:hover {
|
||||
background: darken($dimmerOnButtonColor, 10%);
|
||||
}
|
||||
.playlistItem .close {
|
||||
.playlist-item .close {
|
||||
color: #cdcdcd !important;
|
||||
}
|
||||
.playlistItem .close:hover {
|
||||
.playlist-item .close:hover {
|
||||
color: white !important;
|
||||
}
|
||||
svg {
|
||||
|
|
@ -49,16 +49,16 @@ body.dimmerOn {
|
|||
color: white !important;
|
||||
}
|
||||
}
|
||||
.addNewMusic {
|
||||
.add-new-music {
|
||||
background: $dimmerOnButtonColor
|
||||
}
|
||||
.addNewMusic:hover {
|
||||
.add-new-music:hover {
|
||||
background: darken($dimmerOnButtonColor, 5%);
|
||||
}
|
||||
#extraOptionsMenu {
|
||||
#extra-options-menu {
|
||||
opacity: 0.8;
|
||||
}
|
||||
#extraOptionsMenu:hover {
|
||||
#extra-options-menu:hover {
|
||||
background: rgba(0, 0, 0, 0.9);
|
||||
}
|
||||
.popover-content {
|
||||
|
|
|
|||
|
|
@ -2,10 +2,6 @@
|
|||
$centersize: 80px;
|
||||
$center1size: 205px;
|
||||
$bezelsize: 240px;
|
||||
$vibratesize: $centersize*1.06;
|
||||
$vibratemargin:-$vibratesize/2;
|
||||
$vibrateblurinner: 3px;
|
||||
$vibrateblurouter: 2px;
|
||||
|
||||
/* Extenders */
|
||||
%base {
|
||||
|
|
@ -20,46 +16,7 @@ $vibrateblurouter: 2px;
|
|||
box-shadow: inset 0 0 3px #000, 0 0 2px #000;
|
||||
}
|
||||
|
||||
/* Keyframes */
|
||||
@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 {
|
||||
#beat-speaker-center-inner {
|
||||
@extend %base;
|
||||
height: $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%);
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 1);
|
||||
}
|
||||
.vibrateInner{
|
||||
-webkit-animation: vibrateInner 0.15s linear 1;
|
||||
animation: vibrateInner 0.15s linear 1;
|
||||
}
|
||||
#beatSpeakerCenterOuter {
|
||||
#beat-speaker-center-outer {
|
||||
@extend %base;
|
||||
position: absolute;
|
||||
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: 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 {
|
||||
@extend %base;
|
||||
margin: 0 auto;
|
||||
|
|
@ -108,8 +57,6 @@ $vibrateblurouter: 2px;
|
|||
position: relative;
|
||||
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);
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.rivet1 {
|
||||
@extend %rivet;
|
||||
|
|
|
|||
74
web/app/styles/group-controls.scss
Normal file
74
web/app/styles/group-controls.scss
Normal 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
88
web/app/styles/hue-controls.scss
Normal 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;
|
||||
}
|
||||
|
|
@ -2,22 +2,22 @@
|
|||
font-size: 18px;
|
||||
}
|
||||
|
||||
#introParagraph {
|
||||
#intro-paragraph {
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
.bridgeFinder, .readyBlock {
|
||||
.bridgeFinder, .ready-block {
|
||||
text-align: center;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
// preloading image
|
||||
.readyBlock:after {
|
||||
.ready-block:after {
|
||||
display: none;
|
||||
content: url(images/pressButtonBridge.png);
|
||||
}
|
||||
|
||||
.embedContainer {
|
||||
.embed-container {
|
||||
position:relative;
|
||||
padding-bottom:56.25%;
|
||||
padding-top:30px;
|
||||
|
|
@ -25,12 +25,12 @@
|
|||
overflow:hidden;
|
||||
}
|
||||
|
||||
.embedContainerWrapper {
|
||||
.embed-container-wrapper {
|
||||
max-width: 600px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.embedContainer iframe, .embedContainer object, .embedContainer embed {
|
||||
.embed-container iframe, .embed-container object, .embed-container embed {
|
||||
position:absolute;
|
||||
top:0;
|
||||
left:0;
|
||||
|
|
@ -38,7 +38,7 @@
|
|||
height:100%;
|
||||
}
|
||||
|
||||
.goButton {
|
||||
.go-button {
|
||||
margin-top: 20px;
|
||||
border-radius: 100% !important;
|
||||
width: 100px;
|
||||
|
|
|
|||
|
|
@ -1,16 +1,10 @@
|
|||
@import 'variables';
|
||||
@import 'huegasm-variables';
|
||||
|
||||
.introjs-overlay {
|
||||
background: black;
|
||||
}
|
||||
|
||||
.introjs-helperNumberLayer {
|
||||
padding: 0;
|
||||
width: 23px;
|
||||
height: 23px;
|
||||
}
|
||||
|
||||
#settings.introjs-fixParent{
|
||||
#settings.introjs-fixParent {
|
||||
position: inherit !important;
|
||||
}
|
||||
|
||||
|
|
@ -18,7 +12,7 @@
|
|||
color: black;
|
||||
}
|
||||
|
||||
.introjs-skipbutton{
|
||||
.introjs-skipbutton {
|
||||
color: $secondaryThemeColor;
|
||||
}
|
||||
|
||||
|
|
|
|||
73
web/app/styles/light-group.scss
Normal file
73
web/app/styles/light-group.scss
Normal 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
406
web/app/styles/music-tab.scss
Normal 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
59
web/app/styles/noui-slider.scss
Normal 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;
|
||||
}
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
@import 'ember-paper';
|
||||
@import 'variables';
|
||||
@import 'huegasm-variables';
|
||||
|
||||
md-checkbox.md-default-theme .md-icon {
|
||||
border-color: inherit !important;
|
||||
|
|
@ -27,13 +27,6 @@ md-switch[disabled=disabled], md-switch[disabled=disabled] .md-container, md-sli
|
|||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
#bridgeInput {
|
||||
md-input-container {
|
||||
max-width: 200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
md-progress-circular {
|
||||
margin: 0 auto 20px auto !important;
|
||||
}
|
||||
|
|
@ -42,7 +35,7 @@ md-progress-linear {
|
|||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
.settingsItem span:hover {
|
||||
.settings-item span:hover {
|
||||
text-decoration: underline;
|
||||
md-icon.group {
|
||||
color: black !important;
|
||||
|
|
@ -52,8 +45,7 @@ md-progress-linear {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
.settingsItem {
|
||||
.settings-item {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
transition: 0.1s all ease-in-out;
|
||||
|
|
@ -65,7 +57,7 @@ md-progress-linear {
|
|||
}
|
||||
}
|
||||
|
||||
.bootstrapTooltip md-icon {
|
||||
.bootstrap-tooltip md-icon {
|
||||
font-size: 22px;
|
||||
cursor: pointer;
|
||||
-webkit-transform: translate3d(0, 0, 0); // hack for chrome to force hardware acceleration and stop flickering
|
||||
|
|
|
|||
|
|
@ -11,8 +11,9 @@
|
|||
"jquery-mousewheel": "^3.1.13",
|
||||
"locallyjs": "^0.3.2",
|
||||
"matchMedia": "^0.3.0",
|
||||
"nouislider": "^8.3.0",
|
||||
"nouislider": "^9.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"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,28 +5,17 @@ module.exports = function(defaults) {
|
|||
var app = new EmberApp(defaults);
|
||||
|
||||
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/dropdown.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/intro.js/intro.js');
|
||||
app.import('bower_components/intro.js/introjs.css');
|
||||
|
||||
// Use `app.import` to add additional libraries to the generated
|
||||
// output files.
|
||||
//
|
||||
// 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.
|
||||
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/velocity/velocity.js');
|
||||
|
||||
return app.toTree();
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"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.",
|
||||
"private": true,
|
||||
"directories": {
|
||||
|
|
|
|||
Reference in a new issue