From 5edb41a41e6aa0d70149bd63c4dbfa631a576776 Mon Sep 17 00:00:00 2001 From: Egor! Date: Tue, 11 Oct 2016 17:18:29 -0700 Subject: [PATCH] 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 --- README.md | 5 +- web/README.md | 11 +- .../components/bridge-finder/template.hbs | 8 +- .../pods/components/color-picker/component.js | 2 +- .../pods/components/groups-list/component.js | 8 +- .../pods/components/groups-list/template.hbs | 6 +- .../pods/components/hue-controls/component.js | 58 +- .../pods/components/hue-controls/template.hbs | 12 +- .../pods/components/huegasm-app/template.hbs | 10 +- .../pods/components/light-group/component.js | 16 +- .../pods/components/light-group/template.hbs | 2 +- .../pods/components/lights-tab/component.js | 39 +- .../pods/components/lights-tab/template.hbs | 18 +- .../pods/components/music-tab/component.js | 57 +- .../components/music-tab/mixins/helpers.js | 19 +- .../components/music-tab/mixins/visualizer.js | 2 +- .../pods/components/music-tab/template.hbs | 114 +-- web/app/styles/app.scss | 826 ++---------------- web/app/styles/bootstrap.scss | 56 ++ web/app/styles/bridge-finder.scss | 16 + web/app/styles/common.scss | 6 +- web/app/styles/dimmer.scss | 20 +- web/app/styles/fancy-speaker.scss | 57 +- web/app/styles/group-controls.scss | 74 ++ web/app/styles/hue-controls.scss | 88 ++ ...{variables.scss => huegasm-variables.scss} | 0 web/app/styles/index.scss | 14 +- web/app/styles/introjs.scss | 12 +- web/app/styles/light-group.scss | 73 ++ web/app/styles/music-tab.scss | 406 +++++++++ web/app/styles/noui-slider.scss | 59 ++ web/app/styles/paper.scss | 16 +- web/bower.json | 5 +- web/ember-cli-build.js | 21 +- web/package.json | 2 +- 35 files changed, 1053 insertions(+), 1085 deletions(-) create mode 100644 web/app/styles/bootstrap.scss create mode 100644 web/app/styles/group-controls.scss create mode 100644 web/app/styles/hue-controls.scss rename web/app/styles/{variables.scss => huegasm-variables.scss} (100%) create mode 100644 web/app/styles/light-group.scss create mode 100644 web/app/styles/music-tab.scss create mode 100644 web/app/styles/noui-slider.scss diff --git a/README.md b/README.md index 8fd1213..f90fc18 100644 --- a/README.md +++ b/README.md @@ -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 diff --git a/web/README.md b/web/README.md index 6be258e..c8af9d5 100644 --- a/web/README.md +++ b/web/README.md @@ -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/) diff --git a/web/app/pods/components/bridge-finder/template.hbs b/web/app/pods/components/bridge-finder/template.hbs index 1b8cb08..088f0a7 100644 --- a/web/app/pods/components/bridge-finder/template.hbs +++ b/web/app/pods/components/bridge-finder/template.hbs @@ -6,14 +6,14 @@ This likely happened because you're using an outdated browser and/or because your browser does not support CORS. Feel free to contact me through the link at the bottom of the page if you feel like this is not the case.
For the best browsing experience on this site ( and every other one known to man ) please switch to Google Chrome or Firefox

. {{else}} - + {{paper-progress-linear warn=true value=bridgeUserNamePingIntervalProgress}} {{#if isAuthenticating}}

Your bridge IP is {{bridgeIp}}
Press the button on your bridge to authenticate this application.

{{else}} -

You failed to press the button. RETRY

+

You failed to press the button. RETRY

{{/if}} {{/if}} {{else}} @@ -26,7 +26,7 @@

Found multiple hue bridges.
Please select the one you want to use for this application.

-
+
{{#each multipleBridgeIps as |bridge|}} {{#paper-radio value=bridge selected=bridgeIp}}{{bridge}}{{/paper-radio}} {{/each}} @@ -38,7 +38,7 @@ ( or type offline to look around )

- + {{paper-input label="Hue bridge IP address" value=manualBridgeIp}} {{#paper-button action="findBridgeByIp" raised=true primary=true}}Find{{/paper-button}} diff --git a/web/app/pods/components/color-picker/component.js b/web/app/pods/components/color-picker/component.js index dd95379..698841f 100644 --- a/web/app/pods/components/color-picker/component.js +++ b/web/app/pods/components/color-picker/component.js @@ -6,7 +6,7 @@ const { } = Ember; export default Component.extend({ - classNames: ['colorpicker'], + classNames: ['color-picker'], rgb: null, canvas: null, canvasContext: null, diff --git a/web/app/pods/components/groups-list/component.js b/web/app/pods/components/groups-list/component.js index b5f2f08..5a65303 100644 --- a/web/app/pods/components/groups-list/component.js +++ b/web/app/pods/components/groups-list/component.js @@ -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}); diff --git a/web/app/pods/components/groups-list/template.hbs b/web/app/pods/components/groups-list/template.hbs index a772591..2181ab4 100644 --- a/web/app/pods/components/groups-list/template.hbs +++ b/web/app/pods/components/groups-list/template.hbs @@ -1,11 +1,11 @@ {{#paper-list}} - {{#paper-item class="newGroupRow"}} -
{{paper-icon icon="group-add"}} Add a new group
+ {{#paper-item class="new-group-row"}} +
{{paper-icon icon="group-add"}} Add a new group
{{/paper-item}} {{#each groupsArrData as |group|}} {{#paper-item class=group.rowClass}} -
{{group.name}}
{{#if group.deletable}}{{paper-icon icon="close"}}{{/if}} +
{{group.name}}
{{#if group.deletable}}{{paper-icon icon="close"}}{{/if}} {{/paper-item}} {{/each}} {{/paper-list}} diff --git a/web/app/pods/components/hue-controls/component.js b/web/app/pods/components/hue-controls/component.js index 6db718c..678d60e 100644 --- a/web/app/pods/components/hue-controls/component.js +++ b/web/app/pods/components/hue-controls/component.js @@ -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.

' + 'TIP: Control which lights are active through the Lights tab or through the Groups menu dropdown.' }, @@ -163,11 +163,11 @@ export default Component.extend({ 'TIP: Songs added through Soundcloud will be saved for when you visit this page again.' }, { - 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:
' + 'Sensitivity - The sensitivity of the beat detector ( more sensitivity results in more registered beats )
' + 'Hue Range - The hue range that the lights may change to on beat.
' + @@ -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.

' + 'TIP: Click on the center of the speaker to simulate a beat.', position: 'top' }, { - element: '#lightsTab', + element: '#lights-tab', intro: 'This is the lights tab. Here you\'ll be able to change various light properties:
' + 'Power - Turn the selected lights on/off
' + 'Brightness - The brightness level of the selected lights
' + @@ -192,17 +192,17 @@ export default Component.extend({ 'Colorloop - Selected lights will slowly cycle through all the colors
' }, { - 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.
' + '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.

' + 'WARNING: 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(); diff --git a/web/app/pods/components/hue-controls/template.hbs b/web/app/pods/components/hue-controls/template.hbs index 845c526..df7711b 100644 --- a/web/app/pods/components/hue-controls/template.hbs +++ b/web/app/pods/components/hue-controls/template.hbs @@ -2,24 +2,24 @@
{{#each tabData as |tab|}} - {{tab.name}} + {{tab.name}} {{/each}}
-
+
{{groups-list lightsData=lightsData groupsData=groupsData activeLights=activeLights apiURL=apiURL updateGroupsData=updateGroupsData groupControlDisplayed=groupControlDisplayed storage=storage}}
-
-
- {{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}} \ No newline at end of file diff --git a/web/app/pods/components/huegasm-app/template.hbs b/web/app/pods/components/huegasm-app/template.hbs index c4b6684..0ce5de8 100644 --- a/web/app/pods/components/huegasm-app/template.hbs +++ b/web/app/pods/components/huegasm-app/template.hbs @@ -4,7 +4,7 @@ {{#if ready}} {{bridge-finder bridgeIp=bridgeIp bridgeUsername=bridgeUsername trial=trial storage=storage}} {{else}} -
+
Huegasm
@@ -12,16 +12,16 @@

Your lights, meet your music. Huegasm.

-

+

Huegasm is a free web application for managing and synchronizing your Philips Hue lights with the beat of your music.

-
-
+
+
- {{#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}}
{{/if}} {{/if}} diff --git a/web/app/pods/components/light-group/component.js b/web/app/pods/components/light-group/component.js index 9ea9d2c..2cdd91b 100644 --- a/web/app/pods/components/light-group/component.js +++ b/web/app/pods/components/light-group/component.js @@ -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); diff --git a/web/app/pods/components/light-group/template.hbs b/web/app/pods/components/light-group/template.hbs index 1a37454..dda1903 100644 --- a/web/app/pods/components/light-group/template.hbs +++ b/web/app/pods/components/light-group/template.hbs @@ -1,5 +1,5 @@ {{#each lightsList as |light|}} -
+
{{/each}} \ No newline at end of file diff --git a/web/app/pods/components/lights-tab/component.js b/web/app/pods/components/lights-tab/component.js index 99a1966..423b488 100644 --- a/web/app/pods/components/lights-tab/component.js +++ b/web/app/pods/components/lights-tab/component.js @@ -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' diff --git a/web/app/pods/components/lights-tab/template.hbs b/web/app/pods/components/lights-tab/template.hbs index 0aa9a6b..d04f58e 100644 --- a/web/app/pods/components/lights-tab/template.hbs +++ b/web/app/pods/components/lights-tab/template.hbs @@ -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}} -

Power

+

Power

{{#paper-switch checked=lightsOn disabled=trial skipProxy=trial}} {{lightsOnTxt}} {{/paper-switch}} {{/paper-item}} {{#paper-item}} {{paper-icon icon="brightness-4" class=dimmerOnClass}} -

Brightness

+

Brightness

{{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}} -

Color

+

Color

{{/paper-item}}
- {{#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}} -

Strobe

+

Strobe

{{#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}} -

Colorloop

+ {{paper-icon icon="color-lens" class=dimmerOnClass}} {{paper-icon icon="loop" id="loop-addition" class=dimmerOnClass}} +

Colorloop

{{#paper-switch checked=colorLoopOn disabled=trial skipProxy=trial}} {{colorloopOnTxt}} {{/paper-switch}} {{/paper-item}} {{/paper-list}} \ No newline at end of file diff --git a/web/app/pods/components/music-tab/component.js b/web/app/pods/components/music-tab/component.js index 5d8eedf..e72c996 100644 --- a/web/app/pods/components/music-tab/component.js +++ b/web/app/pods/components/music-tab/component.js @@ -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(); diff --git a/web/app/pods/components/music-tab/mixins/helpers.js b/web/app/pods/components/music-tab/mixins/helpers.js index 771211a..6915607 100644 --- a/web/app/pods/components/music-tab/mixins/helpers.js +++ b/web/app/pods/components/music-tab/mixins/helpers.js @@ -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() { diff --git a/web/app/pods/components/music-tab/mixins/visualizer.js b/web/app/pods/components/music-tab/mixins/visualizer.js index f6c5fa4..17dcfe2 100644 --- a/web/app/pods/components/music-tab/mixins/visualizer.js +++ b/web/app/pods/components/music-tab/mixins/visualizer.js @@ -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; diff --git a/web/app/pods/components/music-tab/template.hbs b/web/app/pods/components/music-tab/template.hbs index 5781331..c0d6308 100644 --- a/web/app/pods/components/music-tab/template.hbs +++ b/web/app/pods/components/music-tab/template.hbs @@ -1,45 +1,45 @@
-
+
-
+
-
+
{{#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}} - {{paper-icon icon="skip-previous" class="playerControllIcon"}}{{/if}}{{paper-icon icon=playingIcon class="playerControllIcon"}}{{paper-icon icon=playingIcon class="player-control-icon"}}{{#if playQueueMultiple}}{{paper-icon icon="skip-next" action="" class="playerControllIcon"}}{{paper-icon icon="skip-next" action="" class="player-control-icon"}}{{/if}}{{paper-icon icon=volumeIcon class=volumeMutedClass}}{{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"}} -
{{timeElapsedTxt}} / {{timeTotalTxt}}
+
{{timeElapsedTxt}} / {{timeTotalTxt}}
{{/if}} {{#if scUrl}} - + {{/if}} - - {{paper-icon icon="remove-red-eye" class="playerControllIcon"}} + + {{paper-icon icon="remove-red-eye" class="player-control-icon"}} -
- + -
+
{{#if usingLocalAudio}} - -