diff --git a/chrome/.bowerrc b/chrome/.bowerrc new file mode 100644 index 0000000..959e169 --- /dev/null +++ b/chrome/.bowerrc @@ -0,0 +1,4 @@ +{ + "directory": "bower_components", + "analytics": false +} diff --git a/chrome/.editorconfig b/chrome/.editorconfig new file mode 100644 index 0000000..219985c --- /dev/null +++ b/chrome/.editorconfig @@ -0,0 +1,20 @@ +# EditorConfig helps developers define and maintain consistent +# coding styles between different editors and IDEs +# editorconfig.org + +root = true + + +[*] +end_of_line = lf +charset = utf-8 +trim_trailing_whitespace = true +insert_final_newline = true +indent_style = space +indent_size = 2 + +[*.hbs] +insert_final_newline = false + +[*.{diff,md}] +trim_trailing_whitespace = false diff --git a/chrome/.ember-cli b/chrome/.ember-cli new file mode 100644 index 0000000..b4934f3 --- /dev/null +++ b/chrome/.ember-cli @@ -0,0 +1,10 @@ +{ + /** + Ember CLI sends analytics information by default. The data is completely + anonymous, but there are times when you might want to disable this behavior. + + Setting `disableAnalytics` to true will prevent any data from being sent. + */ + "disableAnalytics": true, + "usePods": true +} diff --git a/chrome/.gitignore b/chrome/.gitignore new file mode 100644 index 0000000..8756776 --- /dev/null +++ b/chrome/.gitignore @@ -0,0 +1,18 @@ +# See http://help.github.com/ignore-files/ for more about ignoring files. + +# compiled output +/dist +/tmp + +# dependencies +/node_modules +/bower_components + +# misc +/.sass-cache +/connect.lock +/coverage/* +/libpeerconnection.log +npm-debug.log +testem.log +/.idea/ diff --git a/chrome/.jshintrc b/chrome/.jshintrc new file mode 100644 index 0000000..42624ff --- /dev/null +++ b/chrome/.jshintrc @@ -0,0 +1,37 @@ +{ + "predef": [ + "document", + "window", + "-Promise", + "Dancer", + "ID3", + "FileAPIReader", + "SC", + "introJs" + ], + "browser": true, + "boss": true, + "curly": true, + "debug": false, + "devel": true, + "eqeqeq": true, + "evil": true, + "forin": false, + "immed": false, + "laxbreak": false, + "newcap": true, + "noarg": true, + "noempty": false, + "nonew": false, + "nomen": false, + "onevar": false, + "plusplus": false, + "regexp": false, + "undef": true, + "sub": true, + "strict": false, + "white": false, + "eqnull": true, + "esversion": 6, + "unused": true +} diff --git a/chrome/.travis.yml b/chrome/.travis.yml new file mode 100644 index 0000000..a75f20e --- /dev/null +++ b/chrome/.travis.yml @@ -0,0 +1,24 @@ +--- +language: node_js +node_js: + - "4" + +sudo: false + +cache: + directories: + - $HOME/.npm + - $HOME/.cache # includes bowers cache + +before_install: + - npm config set spin false + - npm install -g bower phantomjs-prebuilt + - bower --version + - phantomjs --version + +install: + - npm install + - bower install + +script: + - npm test diff --git a/chrome/.watchmanconfig b/chrome/.watchmanconfig new file mode 100644 index 0000000..e7834e3 --- /dev/null +++ b/chrome/.watchmanconfig @@ -0,0 +1,3 @@ +{ + "ignore_dirs": ["tmp", "dist"] +} diff --git a/chrome/README.md b/chrome/README.md new file mode 100644 index 0000000..c8af9d5 --- /dev/null +++ b/chrome/README.md @@ -0,0 +1,44 @@ +# Huegasm + +This README outlines the details of collaborating on this Ember application. +Music awesomeness for hue lights. + +## Prerequisites + +You will need the following things properly installed on your computer. + +* [Git](http://git-scm.com/) +* [Node.js](http://nodejs.org/) (with NPM) +* [Bower](http://bower.io/) +* [Ember CLI](http://ember-cli.com/) +* [PhantomJS](http://phantomjs.org/) + +## Installation + +* `git clone ` this repository +* `cd huegasm` +* `npm install` +* `bower install` + +## Running / Development + +* `ember serve` +* Visit your app at [http://localhost:4200](http://localhost:4200). + +### Code Generators + +Make use of the many generators for code, try `ember help generate` for more details + +### Building + +* `ember build` (development) +* `ember build --environment production` (production) + +## Further Reading / Useful Links + +* [ember.js](http://emberjs.com/) +* [ember-cli](http://ember-cli.com/) +* Development Browser Extensions + * [ember inspector for chrome](https://chrome.google.com/webstore/detail/ember-inspector/bmdblncegkenkacieihfhpjfppoconhi) + * [ember inspector for firefox](https://addons.mozilla.org/en-US/firefox/addon/ember-inspector/) + diff --git a/chrome/app/app.js b/chrome/app/app.js new file mode 100644 index 0000000..831ad61 --- /dev/null +++ b/chrome/app/app.js @@ -0,0 +1,18 @@ +import Ember from 'ember'; +import Resolver from './resolver'; +import loadInitializers from 'ember-load-initializers'; +import config from './config/environment'; + +let App; + +Ember.MODEL_FACTORY_INJECTIONS = true; + +App = Ember.Application.extend({ + modulePrefix: config.modulePrefix, + podModulePrefix: config.podModulePrefix, + Resolver +}); + +loadInitializers(App, config.modulePrefix); + +export default App; diff --git a/chrome/app/index.html b/chrome/app/index.html new file mode 100644 index 0000000..297c7f4 --- /dev/null +++ b/chrome/app/index.html @@ -0,0 +1,30 @@ + + + + + + + Huegasm + + + + {{content-for 'head'}} + + + + + {{content-for 'head-footer'}} + + + + + + {{content-for 'body'}} + + + + + {{content-for 'body-footer'}} + + + \ No newline at end of file diff --git a/chrome/app/pods/application/controller.js b/chrome/app/pods/application/controller.js new file mode 100644 index 0000000..77fa65f --- /dev/null +++ b/chrome/app/pods/application/controller.js @@ -0,0 +1,54 @@ +import Ember from 'ember'; + +const { + Controller, + isEmpty, + $ +} = Ember; + +export default Controller.extend({ + dimmerOn: false, + lightsIconsOn: true, + + init(){ + this._super(...arguments); + + let storage = new window.Locally.Store({compress: true}), + dimmerOn = storage.get('huegasm.dimmerOn'), + lightsIconsOn = storage.get('huegasm.lightsIconsOn'); + this.set('storage', storage); + + if (!isEmpty(dimmerOn) && dimmerOn) { + this.send('toggleDimmer'); + } + + if (!isEmpty(lightsIconsOn)) { + this.set('lightsIconsOn', lightsIconsOn); + } + }, + + actions: { + toggleLightsIcons() { + this.toggleProperty('lightsIconsOn'); + + let lightsIconsOn = this.get('lightsIconsOn'); + + this.get('storage').set('huegasm.lightsIconsOn', lightsIconsOn); + }, + toggleDimmer(){ + this.toggleProperty('dimmerOn'); + + let dimmerOn = this.get('dimmerOn'); + + if (dimmerOn) { + $('body').addClass('dimmerOn'); + $('html').addClass('dimmerOn'); + } else { + $('body').removeClass('dimmerOn'); + $('html').removeClass('dimmerOn'); + } + + this.get('storage').set('huegasm.dimmerOn', dimmerOn); + } + } +}); diff --git a/chrome/app/pods/application/template.hbs b/chrome/app/pods/application/template.hbs new file mode 100644 index 0000000..38cb29e --- /dev/null +++ b/chrome/app/pods/application/template.hbs @@ -0,0 +1,3 @@ +{{huegasm-app toggleLightsIcons="toggleLightsIcons" toggleDimmer="toggleDimmer" dimmerOn=dimmerOn lightsIconsOn=lightsIconsOn storage=storage}} + +{{huegasm-footer action="toggleDimmer" dimmerOn=dimmerOn storage=storage}} \ No newline at end of file diff --git a/chrome/app/pods/components/bridge-finder/component.js b/chrome/app/pods/components/bridge-finder/component.js new file mode 100644 index 0000000..4f69cd7 --- /dev/null +++ b/chrome/app/pods/components/bridge-finder/component.js @@ -0,0 +1,152 @@ +import Ember from 'ember'; + +const { + Component, + observer, + computed, + on, + isNone, + run: { later }, + $ +} = Ember; + +export default Component.extend({ + elementId: 'bridge-finder', + classNames: ['container'], + bridgeIp: null, + trial: false, + bridgeUsername: null, + bridgeFindStatus: null, + bridgeFindSuccess: computed.equal('bridgeFindStatus', 'success'), + bridgeFindMultiple: computed.equal('bridgeFindStatus', 'multiple'), + bridgeFindFail: computed.equal('bridgeFindStatus', 'fail'), + bridgeUsernamePingMaxTime: 30000, // 30 seconds + bridgeUsernamePingIntervalTime: 1500, + bridgeUserNamePingIntervalProgress: 0, + bridgePingIntervalHandle: null, + bridgeAuthenticateReachedStatus: null, + manualBridgeIp: null, + manualBridgeIpNotFound: false, + multipleBridgeIps: [], + isAuthenticating: computed.notEmpty('bridgePingIntervalHandle'), + + // try to authenticate against the bridge here + onBridgeIpChange: on('init', observer('bridgeIp', function () { + if (!this.get('trial') && !this.get('isAuthenticating')) { + this.setProperties({ + bridgePingIntervalHandle: setInterval(this.pingBridgeUser.bind(this), this.get('bridgeUsernamePingIntervalTime')), + bridgeUserNamePingIntervalProgress: 0 + }); + } + })), + + didInsertElement() { + $(document).keypress((event) => { + if (!isNone(this.get('manualBridgeIp')) && event.which === 13) { + this.send('findBridgeByIp'); + } + }); + }, + + // find the bridge ip here + init() { + this._super(...arguments); + + if (this.get('bridgeIp') === null) { + $.ajax('https://www.meethue.com/api/nupnp', { + timeout: 30000 + }) + .done((result, status) => { + let bridgeFindStatus = 'fail'; + + if (status === 'success' && result.length === 1) { + this.set('bridgeIp', result[0].internalipaddress); + this.get('storage').set('huegasm.bridgeIp', result[0].internalipaddress); + bridgeFindStatus = 'success'; + } else if (result.length > 1) { + let multipleBridgeIps = this.get('multipleBridgeIps'); + + result.forEach(function (item) { + multipleBridgeIps.pushObject(item.internalipaddress); + }); + + bridgeFindStatus = 'multiple'; + } else { + bridgeFindStatus = 'fail'; + } + + this.set('bridgeFindStatus', bridgeFindStatus); + }) + .fail(() => { + this.set('bridgeFindStatus', 'fail'); + }); + } + }, + + pingBridgeUser() { + let bridgeIp = this.get('bridgeIp'), + bridgeUserNamePingIntervalProgress = this.get('bridgeUserNamePingIntervalProgress'), + bridgeUsernamePingMaxTime = this.get('bridgeUsernamePingMaxTime'); + + if (bridgeIp !== null && bridgeUserNamePingIntervalProgress < 100) { + $.ajax('http://' + bridgeIp + '/api', { + data: JSON.stringify({ "devicetype": "huegasm" }), + contentType: 'application/json', + type: 'POST' + }).done((result, status) => { + if (!this.isDestroyed) { + this.set('bridgeAuthenticateReachedStatus', status); + + if (status === 'success' && !result[0].error) { + this.clearBridgePingIntervalHandle(); + this.get('storage').set('huegasm.bridgeUsername', result[0].success.username); + this.set('bridgeUsername', result[0].success.username); + } + } + }); + + this.incrementProperty('bridgeUserNamePingIntervalProgress', this.get('bridgeUsernamePingIntervalTime') / bridgeUsernamePingMaxTime * 100); + } else { + this.clearBridgePingIntervalHandle(); + } + }, + + clearBridgePingIntervalHandle() { + clearInterval(this.get('bridgePingIntervalHandle')); + this.set('bridgePingIntervalHandle', null); + }, + + actions: { + retry() { + this.onBridgeIpChange(); + }, + chooseBridge(bridge) { + this.set('bridgeIp', bridge); + this.get('storage').set('huegasm.bridgeIp', bridge); + }, + findBridgeByIp() { + let manualBridgeIp = this.get('manualBridgeIp'); + + if (manualBridgeIp.toLowerCase() === 'trial' || manualBridgeIp.toLowerCase() === 'offline') { + this.setProperties({ + trial: true, + bridgeIp: 'trial', + bridgeUsername: 'trial' + }); + } else { + $.ajax('http://' + manualBridgeIp + '/api', { + data: JSON.stringify({ "devicetype": "huegasm" }), + contentType: 'application/json', + type: 'POST' + }).fail(() => { + this.set('manualBridgeIpNotFound', true); + later(this, function () { + this.set('manualBridgeIpNotFound', false); + }, 5000); + }).then(() => { + this.set('bridgeIp', manualBridgeIp); + }); + } + } + }, +}); diff --git a/chrome/app/pods/components/bridge-finder/template.hbs b/chrome/app/pods/components/bridge-finder/template.hbs new file mode 100644 index 0000000..ee0852a --- /dev/null +++ b/chrome/app/pods/components/bridge-finder/template.hbs @@ -0,0 +1,49 @@ +
Huegasm
+{{#unless bridgeUsername}} + {{#if bridgeIp}} + {{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 in time. RETRY

+ {{/if}} + {{else}} + {{#unless bridgeFindStatus}} + {{paper-progress-circular diameter=100}} +

Trying to find your bridge's IP.

+ {{/unless}} + + {{#if bridgeFindMultiple}} +

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

+ +
+ {{#each multipleBridgeIps as |bridge|}} + {{paper-radio value=bridge label=bridge onChange=(action "chooseBridge")}} + {{/each}} +
+ {{else}} + {{#if bridgeFindFail}} +

A hue bridge could not be automatically found on your network.
Enter one manually?

( or type offline to look around ) +

+ + + {{paper-input label="Hue bridge IP address" value=manualBridgeIp onChange=(action (mut manualBridgeIp))}} + +
+ {{paper-button onClick=(action "findBridgeByIp") raised=true primary=true label="Find"}} +
+ + + {{#if manualBridgeIpNotFound}} +

+ Could not find a bridge with that IP address. +

+ {{/if}} + {{/if}} + {{/if}} + {{/if}} +{{/unless}} \ No newline at end of file diff --git a/chrome/app/pods/components/hue-controls/component.js b/chrome/app/pods/components/hue-controls/component.js new file mode 100644 index 0000000..a3a5f9f --- /dev/null +++ b/chrome/app/pods/components/hue-controls/component.js @@ -0,0 +1,245 @@ +import Ember from 'ember'; + +const { + A, + Component, + computed, + isEmpty, + isNone, + run: { later, scheduleOnce }, + inject, + $ +} = Ember; + +export default Component.extend({ + classNames: ['container-fluid'], + elementId: 'hue-controls', + lightsData: null, + + activeLights: A(), + tabList: ["Lights", "Music"], + selectedTab: 1, + pauseLightUpdates: false, + + displayFailure: true, + + notify: inject.service(), + + dimmerOnClass: computed('dimmerOn', function () { + return this.get('dimmerOn') ? 'dimmerOn md-menu-origin' : 'md-menu-origin'; + }), + + ready: computed('lightsData', 'trial', function () { + return this.get('trial') || !isNone(this.get('lightsData')); + }), + + apiURL: computed('bridgeIp', 'bridgeUsername', function () { + return 'http://' + this.get('bridgeIp') + '/api/' + this.get('bridgeUsername'); + }), + + tabData: computed('tabList', 'selectedTab', function () { + let tabData = [], selectedTab = this.get('selectedTab'); + + this.get('tabList').forEach(function (tab, i) { + let selected = false; + + if (i === selectedTab) { + selected = true; + } + + tabData.push({ "name": tab, "selected": selected }); + }); + + return tabData; + }), + + didInsertElement() { + // here's a weird way to automatically initialize bootstrap tooltips + let observer = new MutationObserver(function (mutations) { + let haveTooltip = !mutations.every(function (mutation) { + return isEmpty(mutation.addedNodes) || isNone(mutation.addedNodes[0].classList) || mutation.addedNodes[0].classList.contains('tooltip'); + }); + + if (haveTooltip) { + scheduleOnce('afterRender', function () { + $('.bootstrap-tooltip').tooltip(); + }); + } + }); + + observer.observe($('#hue-controls')[0], { childList: true, subtree: true }); + }, + + init() { + this._super(...arguments); + + if (!this.get('trial')) { + this.updateLightData(); + setInterval(this.updateLightData.bind(this), 2000); + } + + if (!isNone(this.get('storage').get('huegasm.selectedTab'))) { + this.set('selectedTab', this.get('storage').get('huegasm.selectedTab')); + } + }, + + updateLightData() { + let fail = () => { + if (isNone(this.get('lightsData'))) { + this.send('clearBridge'); + } else if (this.get('displayFailure')) { + this.get('notify').warning({ html: '' }); + this.set('displayFailure', false); + + later(this, function () { + this.set('displayFailure', true); + }, 30000); + } + }; + + if (!this.get('pauseLightUpdates')) { + $.get(this.get('apiURL') + '/lights', (result, status) => { + if (!isNone(result[0]) && !isNone(result[0].error)) { + fail(); + } else if (status === 'success' && JSON.stringify(this.get('lightsData')) !== JSON.stringify(result)) { + this.set('lightsData', result); + } + }).fail(fail); + } + }, + + actions: { + changeTab(tabName) { + let index = this.get('tabList').indexOf(tabName); + this.set('selectedTab', index); + this.get('storage').set('huegasm.selectedTab', index); + }, + clearBridge() { + let storage = this.get('storage'); + storage.remove('huegasm.bridgeUsername'); + storage.remove('huegasm.bridgeIp'); + location.reload(); + }, + toggleDimmer() { + this.sendAction('toggleDimmer'); + }, + toggleLightsIcons() { + this.sendAction('toggleLightsIcons'); + }, + clearAllSettings() { + this.get('storage').clear(); + location.reload(); + }, + startIntro() { + let intro = introJs(), + playerBottom = $('#player-bottom'); + + if (this.get('dimmerOn')) { + this.send('toggleDimmer'); + } + + intro.setOptions({ + steps: [ + { + intro: 'Welcome! This short tutorial will introduce you to Huegasm.' + }, + { + 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.' + }, + { + element: '#playlist', + intro: 'You can add and select music to play from your playlist here. You may listen to local audio files, stream music from soundcloud or stream directly from a connected microphone.

' + + 'TIP: Songs added through Soundcloud will be saved for when you visit this page again.' + }, + { + element: $('#playlist md-menu')[0], + intro: 'You can add songs from SoundCloud by copy and pasting the URL shown here' + }, + { + 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: '#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.
' + + 'Brightness Range - The minimum ( off-beat ) and maximum ( on-beat ) brightness of the lights.
' + + 'Flashing Transitions - Quickly flash the lights on beat
' + + 'Colorloop - Slowly cycle the lights through all the colors while the music is playing
' + + 'TIP: Your sensitivity settings are saved per song as indicated by the red star icon in the top left corner. These settings they will be restored if you ever listen to the same song again.', + position: 'top' + }, + { + 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: '#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
' + + 'Color - The color of the selected lights
' + + 'Strobe - Selected lights will flash in sequential order
' + + 'Colorloop - Selected lights will slowly cycle through all the colors
' + }, + { + 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: $('#navigation .ember-basic-dropdown-trigger')[0], + 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.' + }, + { + intro: 'And that\'s it...Hope you enjoy the application. ;)' + } + ] + }); + + intro.onexit(() => { + $('body').velocity('scroll', { duration: 200 }); + }); + + intro.onchange((element) => { + if (element.id === '' || 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' || element.nodeName === 'MD-MENU') { + $('.navigation-item').eq(1).click(); + } else { + $('.navigation-item').eq(0).click(); + } + + if (element.id === 'music-tab' || element.id === 'playlist' || element.id === 'player-area') { + playerBottom.hide(); + } else if (element.id === 'beat-option-row' || element.id === 'beat-option-button-group' || element.id === 'beat-container') { + playerBottom.show(); + } else if (element.id === 'dimmer') { + $(document).click(); + } + }); + + // skip hidden/missing elements + intro.onafterchange((element) => { + let elem = $(element); + if (elem.html() === '') { + $('.introjs-nextbutton').click(); + } + + if (element.id === '') { + later(this, () => { + $('body').velocity('scroll'); + }, 500); + } else { + later(this, () => { + $('.introjs-tooltip').velocity('scroll', { offset: -100 }); + }, 500); + } + }).start(); + } + } +}); diff --git a/chrome/app/pods/components/hue-controls/template.hbs b/chrome/app/pods/components/hue-controls/template.hbs new file mode 100644 index 0000000..8eb84f0 --- /dev/null +++ b/chrome/app/pods/components/hue-controls/template.hbs @@ -0,0 +1,49 @@ +{{#if ready}} + + + {{light-group lightsData=lightsData activeLights=activeLights syncLight=syncLight apiURL=apiURL dimmerOn=dimmerOn lightsIconsOn=lightsIconsOn storage=storage}} + +
+ {{lights-tab active=(eq selectedTab 0) apiURL=apiURL lightsData=lightsData activeLights=activeLights syncLight=syncLight trial=trial colorLoopOn=colorLoopOn dimmerOn=dimmerOn playing=playing pauseLightUpdates=pauseLightUpdates}} + + {{music-tab active=(eq selectedTab 1) apiURL=apiURL lightsData=lightsData activeLights=activeLights pauseLightUpdates=pauseLightUpdates dimmerOn=dimmerOn storage=storage colorLoopOn=colorLoopOn playing=playing action="startIntro"}} +
+{{else}} + {{paper-progress-circular diameter=100}} +{{/if}} + +{{ember-notify messageStyle='bootstrap' closeAfter=5000}} \ No newline at end of file diff --git a/chrome/app/pods/components/huegasm-app/component.js b/chrome/app/pods/components/huegasm-app/component.js new file mode 100644 index 0000000..023d9f6 --- /dev/null +++ b/chrome/app/pods/components/huegasm-app/component.js @@ -0,0 +1,37 @@ +import Ember from 'ember'; + +const { + Component, + isEmpty, + $ +} = Ember; + +export default Component.extend({ + bridgeIp: null, + bridgeUsername: null, + trial: false, + elementId: 'huegasm', + + init() { + this._super(...arguments); + + let storage = this.get('storage'); + + if (!isEmpty(storage.get('huegasm.bridgeIp')) && !isEmpty(storage.get('huegasm.bridgeUsername'))) { + this.setProperties({ + bridgeIp: storage.get('huegasm.bridgeIp'), + bridgeUsername: storage.get('huegasm.bridgeUsername') + }); + } + }, + + actions: { + toggleDimmer() { + this.sendAction('toggleDimmer'); + }, + + toggleLightsIcons() { + this.sendAction('toggleLightsIcons'); + } + } +}); diff --git a/chrome/app/pods/components/huegasm-app/template.hbs b/chrome/app/pods/components/huegasm-app/template.hbs new file mode 100644 index 0000000..41ecb42 --- /dev/null +++ b/chrome/app/pods/components/huegasm-app/template.hbs @@ -0,0 +1,6 @@ +{{#if bridgeUsername}} + {{hue-controls bridgeIp=bridgeIp bridgeUsername=bridgeUsername trial=trial dimmerOn=dimmerOn lightsIconsOn=lightsIconsOn + storage=storage toggleDimmer="toggleDimmer" toggleLightsIcons="toggleLightsIcons"}} +{{else}} + {{bridge-finder bridgeIp=bridgeIp bridgeUsername=bridgeUsername trial=trial storage=storage}} +{{/if}} \ No newline at end of file diff --git a/chrome/app/pods/components/huegasm-footer/component.js b/chrome/app/pods/components/huegasm-footer/component.js new file mode 100644 index 0000000..0d4aa3a --- /dev/null +++ b/chrome/app/pods/components/huegasm-footer/component.js @@ -0,0 +1,21 @@ +import Ember from 'ember'; + +const { + Component, + computed +} = Ember; + +export default Component.extend({ + tagName: 'footer', + classNames: ['footer'], + + year: computed(function(){ + return new Date().getFullYear(); + }), + + actions: { + toggleDimmer(){ + this.sendAction(); + } + } +}); diff --git a/chrome/app/pods/components/huegasm-footer/template.hbs b/chrome/app/pods/components/huegasm-footer/template.hbs new file mode 100644 index 0000000..9ad0fb3 --- /dev/null +++ b/chrome/app/pods/components/huegasm-footer/template.hbs @@ -0,0 +1,13 @@ + + +
+ © {{year}} + + + Egor Philippov + +
+ + + Get it on the Google Play Store + \ No newline at end of file diff --git a/chrome/app/pods/components/light-group/component.js b/chrome/app/pods/components/light-group/component.js new file mode 100644 index 0000000..3f86d23 --- /dev/null +++ b/chrome/app/pods/components/light-group/component.js @@ -0,0 +1,161 @@ +import Ember from 'ember'; + +const { + A, + Component, + computed, + isEmpty, + isNone, + observer, + $ +} = Ember; + +export default Component.extend({ + elementId: 'active-lights', + classNames: ['light-group'], + isHovering: false, + activeLights: A(), + + // list of all the lights in the hue system + lightsList: computed('lightsData', 'activeLights.[]', 'dimmerOn', function(){ + let lightsData = this.get('lightsData'), + activeLights = this.get('activeLights'), + dimmerOn = this.get('dimmerOn'), + lightsList = A(), + type, + activeClass; + + for (let key in lightsData) { + activeClass = 'light-active'; + + if (lightsData.hasOwnProperty(key) && lightsData[key].state.reachable) { + switch(lightsData[key].modelid){ + case 'LCT001': + type = 'a19'; + break; + case 'LCT002': + type = 'br30'; + break; + case 'LCT003': + type = 'gu10'; + break; + case 'LST001': + type = 'lightstrip'; + break; + case 'LLC010': + type = 'lc_iris'; + break; + case 'LLC011': + type = 'lc_bloom'; + break; + case 'LLC012': + type = 'lc_bloom'; + break; + case 'LLC006': + type = 'lc_iris'; + break; + case 'LLC007': + type = 'lc_aura'; + break; + case 'LLC013': + type = 'storylight'; + break; + case 'LWB004': + type ='a19'; + break; + case 'LLC020': + type = 'huego'; + break; + default: + type = 'a19'; + } + + if(dimmerOn){ + type += 'w'; + } + + if(!activeLights.includes(key)){ + activeClass = 'light-inactive'; + } + + lightsList.push({type: type, name: lightsData[key].name, id: key, data: lightsData[key], activeClass: activeClass}); + } + } + + return lightsList; + }), + + onActiveLightsChange: observer('activeLights.[]', function(){ + this.get('storage').set('huegasm.activeLights', this.get('activeLights')); + }), + + init(){ + this._super(...arguments); + + let lightsData = this.get('lightsData'), + activeLights = this.get('activeLights'), + activeLightsCache = this.get('storage').get('huegasm.activeLights'); + + if(!isNone(activeLightsCache)){ + activeLightsCache.forEach(function(i){ + if (!isNone(lightsData) && lightsData.hasOwnProperty(i) && lightsData[i].state.reachable) { + activeLights.pushObject(i); + } + }); + } else { + for (let key in lightsData) { + if (lightsData.hasOwnProperty(key) && lightsData[key].state.reachable) { + activeLights.pushObject(key); + } + } + } + }, + + actions: { + clickLight(id){ + let activeLights = this.get('activeLights'), + lightId = activeLights.indexOf(id); + + if(lightId !== -1){ + activeLights.removeObject(id); + } else { + activeLights.pushObject(id); + this.set('syncLight', id); + } + }, + lightStartHover(id){ + if(!window.matchMedia || (window.matchMedia("(min-width: 768px)").matches)){ + let hoveredLight = this.get('lightsList').filter(function(light){ + return light.activeClass !== 'unreachable' && light.id === id[0]; + }); + + if(!isEmpty(hoveredLight) && this.get('noHover') !== true){ + $.ajax(this.get('apiURL') + '/lights/' + id + '/state', { + data: JSON.stringify({"alert": "lselect"}), + contentType: 'application/json', + type: 'PUT' + }); + } + + this.set('isHovering', true); + } + }, + lightStopHover(id){ + if(!window.matchMedia || (window.matchMedia("(min-width: 768px)").matches)){ + let hoveredLight = this.get('lightsList').filter(function(light){ + return light.activeClass !== 'unreachable' && light.id === id[0]; + }); + + if(!isEmpty(hoveredLight) && this.get('noHover') !== true){ + $.ajax(this.get('apiURL') + '/lights/' + id + '/state', { + data: JSON.stringify({"alert": "none"}), + contentType: 'application/json', + type: 'PUT' + }); + } + + this.set('isHovering', false); + } + } + } +}); diff --git a/chrome/app/pods/components/light-group/template.hbs b/chrome/app/pods/components/light-group/template.hbs new file mode 100644 index 0000000..3486231 --- /dev/null +++ b/chrome/app/pods/components/light-group/template.hbs @@ -0,0 +1,11 @@ +{{#each lightsList as |light|}} + {{#if lightsIconsOn}} +
+ +
+ {{else}} +
+
{{light.name}}
+
+ {{/if}} +{{/each}} \ No newline at end of file diff --git a/chrome/app/pods/components/lights-tab/color-picker/component.js b/chrome/app/pods/components/lights-tab/color-picker/component.js new file mode 100644 index 0000000..232cfb1 --- /dev/null +++ b/chrome/app/pods/components/lights-tab/color-picker/component.js @@ -0,0 +1,58 @@ +import Ember from 'ember'; + +const { + Component, + $ +} = Ember; + +export default Component.extend({ + elementId: 'color-picker', + rgb: null, + canvas: null, + canvasContext: null, + pressingDown: false, + + mouseUp(){ + this.set('pressingDown', false); + }, + + mouseMove(event){ + if (this.get('pressingDown')) { + this.mouseDown(event); + } + }, + + mouseDown(event){ + let canvasOffset = $(this.get('canvas')).offset(), + canvasX = Math.floor(event.pageX - canvasOffset.left), + canvasY = Math.floor(event.pageY - canvasOffset.top); + + // get current pixel + let imageData = this.get('canvasContext').getImageData(canvasX, canvasY, 1, 1), + pixel = imageData.data; + + this.set('pressingDown', true); + + if (!(pixel[0] === 0 && pixel[1] === 0 && pixel[2] === 0)) { + this.set('rgb', [pixel[0], pixel[1], pixel[2]]); + } + }, + + // https://dzone.com/articles/creating-your-own-html5 + didInsertElement(){ + // handle color changes + let canvas = $('#picker')[0], + canvasContext = canvas.getContext('2d'), + image = new Image(); + + image.src = 'assets/images/colormap.png'; + image.onload = function () { + canvasContext.drawImage(image, 0, 0, image.width, image.height); // draw the image on the canvas + }; + + this.setProperties({ + canvas: canvas, + canvasContext: canvasContext + }); + } +}); diff --git a/chrome/app/pods/components/lights-tab/color-picker/template.hbs b/chrome/app/pods/components/lights-tab/color-picker/template.hbs new file mode 100644 index 0000000..16508e9 --- /dev/null +++ b/chrome/app/pods/components/lights-tab/color-picker/template.hbs @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/chrome/app/pods/components/lights-tab/component.js b/chrome/app/pods/components/lights-tab/component.js new file mode 100644 index 0000000..5086f2c --- /dev/null +++ b/chrome/app/pods/components/lights-tab/component.js @@ -0,0 +1,348 @@ +import Ember from 'ember'; + +const { + Component, + observer, + computed, + on, + run: { later, once }, + $ +} = Ember; + +export default Component.extend({ + classNames: ['col-sm-10', 'col-sm-offset-1', 'col-xs-12'], + classNameBindings: ['active::hidden'], + elementId: 'lights-tab', + + rgb: [255, 255, 255], + + lightsOn: false, + + // COLOR LOOP related stuff + colorLoopOn: false, + + lightsOnTxt: computed('lightsOn', function () { + return this.get('lightsOn') ? 'On' : 'Off'; + }), + + colorloopOnTxt: computed('colorLoopOn', function () { + return this.get('colorLoopOn') ? 'On' : 'Off'; + }), + + // determines the average brightness of the hue system for the brightness slider + lightsBrightness: computed('lightsData', function () { + let lightsData = this.get('lightsData'), + activeLights = this.get('activeLights'), + lightsBrightness = 0; + + activeLights.forEach(function (light) { + lightsBrightness += lightsData[light].state.bri; + }); + + return lightsBrightness / activeLights.length; + }), + + brightnessControlDisabled: computed.not('lightsOn'), + + onColorLoopOnChange: observer('colorLoopOn', function () { + let lightsData = this.get('lightsData'), + activeLights = this.get('activeLights'), + colorLoopsOn = this.get('colorLoopOn'), + effect = colorLoopsOn ? 'colorloop' : 'none'; + + let colorLoopsOnSystem = activeLights.some(function (light) { + return lightsData[light].state.effect === 'colorloop'; + }); + + // 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 (colorLoopsOn !== colorLoopsOnSystem) { + activeLights.forEach((light) => { + if (this.get('lightsData')[light].state.effect !== effect) { + $.ajax(this.get('apiURL') + '/lights/' + light + '/state', { + data: JSON.stringify({ 'effect': effect }), + contentType: 'application/json', + type: 'PUT' + }); + } + }); + } + }), + + rgbPreview: observer('rgb', function () { + let rgb = this.get('rgb'), + xy = this.rgbToXy(rgb[0], rgb[1], rgb[2]); + + this.set('colorLoopOn', false); + + this.get('activeLights').forEach((light) => { + $.ajax(this.get('apiURL') + '/lights/' + light + '/state', { + data: JSON.stringify({ "xy": xy }), + contentType: 'application/json', + type: 'PUT' + }); + }); + + this.set('colorLoopOn', false); + $('.color').css('background', 'rgb(' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ')'); + }), + + // determines whether the lights are on/off for the lights switch + lightsOnChange: on('init', observer('lightsData.@each.state.on', 'activeLights.[]', function () { + if (!this.get('strobeOn')) { + let lightsData = this.get('lightsData'), lightsOn = this.get('activeLights').some(function (light) { + return lightsData[light].state.on === true; + }); + + this.set('lightsOn', lightsOn); + } + })), + + onLightsOnChange: observer('lightsOn', function () { + 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; + }); + + // 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((light) => { + $.ajax(this.get('apiURL') + '/lights/' + light + '/state', { + data: JSON.stringify({ "on": lightsOn }), + contentType: 'application/json', + type: 'PUT' + }); + }); + } + }), + + onBrightnessChanged: observer('lightsBrightness', function () { + once(this, function () { + let lightsData = this.get('lightsData'), + lightsBrightnessSystem = false, + lightsBrightness = this.get('lightsBrightness'), + activeLights = this.get('activeLights'); + + activeLights.forEach(function (light) { + lightsBrightnessSystem += lightsData[light].state.bri; + }); + + lightsBrightnessSystem /= activeLights.length; + + // 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((light) => { + $.ajax(this.get('apiURL') + '/lights/' + light + '/state', { + data: JSON.stringify({ "bri": lightsBrightness }), + contentType: 'application/json', + type: 'PUT' + }); + }); + } + }); + }), + + // sync the current light settings to the newly added light + onaActiveLightsChange: observer('syncLight', function () { + let options = { + on: this.get('lightsOn'), + bri: this.get('lightsBrightness'), + effect: this.get('colorLoopOn') ? 'colorloop' : 'none' + }, rgb = this.get('rgb'), + syncLight = this.get('syncLight'); + + if (rgb[0] !== 255 && rgb[1] !== 255 && rgb[2] !== 255) { + options['xy'] = this.rgbToXy(rgb[0], rgb[1], rgb[2]); + } + + options['transitiontime'] = 0; + + $.ajax(this.get('apiURL') + '/lights/' + syncLight + '/state', { + data: JSON.stringify(options), + contentType: 'application/json', + type: 'PUT' + }); + }), + + // **************** STROBE LIGHT START **************** + strobeOn: false, + + strobeOnInervalHandle: null, + preStrobeOnLightsDataCache: null, + nextLightIdx: 0, + + onStrobeOnChange: observer('strobeOn', function () { + let lightsData = this.get('lightsData'), + strobeOn = this.get('strobeOn'); + + if (strobeOn) { + this.set('preStrobeOnLightsDataCache', lightsData); + let stobeInitRequestData = { transitiontime: 0 }; + + for (let key in lightsData) { + if (lightsData.hasOwnProperty(key)) { + if (lightsData[key].state.on) { + stobeInitRequestData.on = false; + } + + $.ajax(this.get('apiURL') + '/lights/' + key + '/state', { + data: JSON.stringify(stobeInitRequestData), + contentType: 'application/json', + type: 'PUT' + }); + } + } + + this.set('strobeOnInervalHandle', setInterval(this.strobeStep.bind(this), 500)); + } else { // revert the light system to pre-strobe + let preStrobeOnLightsDataCache = this.get('preStrobeOnLightsDataCache'), updateLight = (lightIndex) => { + $.ajax(this.get('apiURL') + '/lights/' + lightIndex + '/state', { + data: JSON.stringify({ + on: preStrobeOnLightsDataCache[lightIndex].state.on, + sat: preStrobeOnLightsDataCache[lightIndex].state.sat + }), + contentType: 'application/json', + type: 'PUT' + }); + }; + + for (let key in lightsData) { + if (lightsData.hasOwnProperty(key)) { + later(this, updateLight, key, 2000); + } + } + + later(this, this.onColorLoopOnChange, 2000); + clearInterval(this.get('strobeOnInervalHandle')); + } + + this.set('pauseLightUpdates', strobeOn); + }), + + strobeStep() { + let nextLightIdx = this.get('nextLightIdx') % this.get('activeLights').length, + nextStrobeLight = this.get('activeLights')[nextLightIdx], + turnOnOptions = { on: true, transitiontime: 0, alert: 'select' }; + + // random light if in cololoop mode + if (this.get('colorLoopOn')) { + turnOnOptions.hue = Math.floor(Math.random() * 65535); + } + + $.ajax(this.get('apiURL') + '/lights/' + nextStrobeLight + '/state', { + data: JSON.stringify(turnOnOptions), + contentType: 'application/json', + type: 'PUT' + }); + $.ajax(this.get('apiURL') + '/lights/' + nextStrobeLight + '/state', { + data: JSON.stringify({ 'on': false, 'transitiontime': 0 }), + contentType: 'application/json', + type: 'PUT' + }); + + this.set('nextLightIdx', ++nextLightIdx); + }, + + strobeOnTxt: computed('strobeOn', function () { + return this.get('strobeOn') ? 'On' : 'Off'; + }), + + dimmerOnClass: computed('dimmerOn', function () { + return this.get('dimmerOn') ? 'dimmerOn' : null; + }), + + actions: { + toggleDimmer() { + this.sendAction('toggleDimmer'); + } + }, + + // **************** STROBE LIGHT FINISH **************** + // http://www.developers.meethue.com/documentation/color-conversions-rgb-xy + rgbToXy(red, green, blue) { + let X, Y, Z, x, y; + + // normalize + red = Number((red / 255)); + green = Number((green / 255)); + blue = Number((blue / 255)); + + // gamma correction + red = (red > 0.04045) ? Math.pow((red + 0.055) / (1.0 + 0.055), 2.4) : (red / 12.92); + green = (green > 0.04045) ? Math.pow((green + 0.055) / (1.0 + 0.055), 2.4) : (green / 12.92); + blue = (blue > 0.04045) ? Math.pow((blue + 0.055) / (1.0 + 0.055), 2.4) : (blue / 12.92); + + // RGB to XYZ + X = red * 0.664511 + green * 0.154324 + blue * 0.162028; + Y = red * 0.283881 + green * 0.668433 + blue * 0.047685; + Z = red * 0.000088 + green * 0.072310 + blue * 0.986039; + + x = X / (X + Y + Z); + y = Y / (X + Y + Z); + + return [x, y]; + }, + + xyToRgb(x, y) { + let r, g, b, X, Y = 1.0, Z; + + X = (Y / y) * x; + Z = (Y / y) * (1 - x - y); + + r = X * 1.656492 - Y * 0.354851 - Z * 0.255038; + g = X * -0.707196 + Y * 1.655397 + Z * 0.036152; + b = X * 0.051713 - Y * 0.121364 + Z * 1.011530; + + if (r > b && r > g && r > 1.0) { + // red is too big + g = g / r; + b = b / r; + r = 1.0; + } else if (g > b && g > r && g > 1.0) { + // green is too big + r = r / g; + b = b / g; + g = 1.0; + } else if (b > r && b > g && b > 1.0) { + // blue is too big + r = r / b; + g = g / b; + b = 1.0; + } + + r = (r <= 0.0031308) ? 12.92 * r : 1.055 * Math.pow(r, (1.0 / 2.4)) - 0.055; + g = (g <= 0.0031308) ? 12.92 * g : 1.055 * Math.pow(g, (1.0 / 2.4)) - 0.055; + b = (b <= 0.0031308) ? 12.92 * b : 1.055 * Math.pow(b, (1.0 / 2.4)) - 0.055; + + if (r > b && r > g) { + // red is biggest + if (r > 1.0) { + g = g / r; + b = b / r; + r = 1.0; + } + } else if (g > b && g > r) { + // green is biggest + if (g > 1.0) { + r = r / g; + b = b / g; + g = 1.0; + } + } else if (b > r && b > g) { + // blue is biggest + if (b > 1.0) { + r = r / b; + g = g / b; + b = 1.0; + } + } + + r = r * 255; + g = g * 255; + b = b * 255; + + return [r, g, b]; + } +}); diff --git a/chrome/app/pods/components/lights-tab/template.hbs b/chrome/app/pods/components/lights-tab/template.hbs new file mode 100644 index 0000000..8b68b7e --- /dev/null +++ b/chrome/app/pods/components/lights-tab/template.hbs @@ -0,0 +1,43 @@ +{{#paper-list}} + {{#paper-item}} + {{paper-icon "power-settings-new" class=dimmerOnClass}} +

Power

+ {{paper-switch value=lightsOn onChange=(action (mut lightsOn)) disabled=(or trial playing) skipProxy=trial label=lightsOnTxt}} + {{/paper-item}} + + {{#paper-item}} + {{paper-icon "brightness-4" class=dimmerOnClass}} +

Brightness

+ {{paper-slider class="flex" step=10 min=1 max=254 value=lightsBrightness onChange=(action (mut lightsBrightness)) disabled=brightnessControlDisabled}} + {{/paper-item}} + + {{#paper-item elementId="color-row" }} + {{paper-icon "color-lens" class=dimmerOnClass}} +

Color

+ + {{#paper-menu offset="0 -50" as |menu|}} + {{#menu.trigger}} + {{#paper-button iconButton=false}} + {{paper-button raised=true class="color" disabled=(or trial playing)}} + {{/paper-button}} + {{/menu.trigger}} + {{#menu.content class="color-content" width=0 as |content|}} + {{#content.menu-item}} + {{lights-tab/color-picker lightsData=lightsData activeLights=activeLights rgb=rgb}} + {{/content.menu-item}} + {{/menu.content}} + {{/paper-menu}} + {{/paper-item}} + + {{#paper-item}} + {{paper-icon "flare" class=dimmerOnClass}} +

Strobe

+ {{paper-switch value=strobeOn onChange=(action (mut strobeOn)) disabled=(or trial playing) skipProxy=trial label=strobeOnTxt}} + {{/paper-item}} + + {{#paper-item}} + {{paper-icon "color-lens" class=dimmerOnClass}} {{paper-icon "loop" id="loop-addition" class=dimmerOnClass}} +

Colorloop

+ {{paper-switch value=colorLoopOn onChange=(action (mut colorLoopOn)) disabled=(or trial playing) skipProxy=trial label=colorloopOnTxt}} + {{/paper-item}} +{{/paper-list}} \ No newline at end of file diff --git a/chrome/app/pods/components/music-tab/add-soundcloud-sound-modal/component.js b/chrome/app/pods/components/music-tab/add-soundcloud-sound-modal/component.js new file mode 100644 index 0000000..072e4a9 --- /dev/null +++ b/chrome/app/pods/components/music-tab/add-soundcloud-sound-modal/component.js @@ -0,0 +1,46 @@ +import Ember from 'ember'; + +const { + Component, + observer, + computed, + isEmpty, + isNone, + run: { later }, + $ +} = Ember; + +export default Component.extend({ + url: null, + + onIsShowingModalChange: observer('isShowingModal', function(){ + if(this.get('isShowingModal')){ + this.set('url', null); + later(function(){ + $('md-input-container input').focus(); + }, 500); + } + + }), + + saveDisabled: computed('url', function(){ + return isNone(this.get('url')) || isEmpty(this.get('url').trim()); + }), + + didInsertElement: function() { + $(document).keypress((event)=>{ + if(!this.get('saveDisabled') && event.which === 13) { + this.send('add'); + } + }); + }, + + actions: { + close () { + this.sendAction(); + }, + add (){ + this.sendAction('action', this.get('url')); + } + } +}); diff --git a/chrome/app/pods/components/music-tab/add-soundcloud-sound-modal/template.hbs b/chrome/app/pods/components/music-tab/add-soundcloud-sound-modal/template.hbs new file mode 100644 index 0000000..d889152 --- /dev/null +++ b/chrome/app/pods/components/music-tab/add-soundcloud-sound-modal/template.hbs @@ -0,0 +1,14 @@ +{{#if isShowingModal}} + {{#modal-dialog close="close" alignment="center" translucentOverlay=true attachment="center" targetAttachment="center"}} + +

Enter a SoundCloud track or playlist/set URL

+

( ex. https://soundcloud.com/mrsuicidesheep/tracks )

+ + {{paper-input label="SoundCloud URL" icon="search" value=url onChange=(action (mut url))}} + +
+ {{paper-button onClick=(action "close") label="Close"}} + {{paper-button class="pull-right" onClick=(action "add") disabled=saveDisabled primary=true label="Add Music"}} +
+ {{/modal-dialog}} +{{/if}} \ No newline at end of file diff --git a/chrome/app/pods/components/music-tab/component.js b/chrome/app/pods/components/music-tab/component.js new file mode 100644 index 0000000..92dc0b4 --- /dev/null +++ b/chrome/app/pods/components/music-tab/component.js @@ -0,0 +1,737 @@ +import Ember from 'ember'; +import helperMixin from './mixins/helpers'; +import visualizerMixin from './mixins/visualizer'; + +const { + Component, + observer, + isEmpty, + isNone, + $, + run: { later, next } +} = Ember; + +export default Component.extend(helperMixin, visualizerMixin, { + updatePageTitle: observer('playQueuePointer', function () { + let title = 'Huegasm', + playQueuePointer = this.get('playQueuePointer'), + playQueue = this.get('playQueue'); + + if (playQueuePointer !== -1) { + let song = playQueue[playQueuePointer]; + if (song.title) { + title = song.title; + + if (song.artist) { + title += (' - ' + song.artist); + } + } else { + title = song.fileName; + } + + title += '- Huegasm'; + } + + document.title = title; + }), + + changePlayerControl(name, value, saveBeatPrefs) { + this.set(name, value); + + if (name === 'threshold') { + this.get('kick').set({ threshold: value }); + } + + if (saveBeatPrefs && this.get('playQueuePointer') !== -1) { + this.saveSongBeatPreferences(); + } + + this.get('storage').set('huegasm.' + name, value); + }, + + saveSongBeatPreferences() { + let song = this.get('playQueue')[this.get('playQueuePointer')]; + if (song) { + let title = isEmpty(song.artist) ? song.fileName : song.artist + '-' + song.title, + songBeatPreferences = this.get('songBeatPreferences'); + + songBeatPreferences[title] = { threshold: this.get('threshold') }; + + this.set('usingBeatPreferences', true); + this.get('storage').set('huegasm.songBeatPreferences', songBeatPreferences); + } + }, + + loadSongBeatPreferences() { + let song = this.get('playQueue')[this.get('playQueuePointer')], + title = isEmpty(song.artist) ? song.fileName : song.artist + '-' + song.title, + songBeatPreferences = this.get('songBeatPreferences'), + preference = songBeatPreferences[title], + oldBeatPrefCache = this.get('oldBeatPrefCache'), + newOldBeatPrefCache = null; + + if (!isNone(preference)) { // load existing beat prefs + newOldBeatPrefCache = { threshold: this.get('threshold') }; + + this.changePlayerControl('threshold', preference.threshold); + this.set('usingBeatPreferences', true); + } else if (!isNone(oldBeatPrefCache)) { // revert to using beat prefs before the remembered song + this.changePlayerControl('threshold', oldBeatPrefCache.threshold); + this.set('usingBeatPreferences', false); + } + + this.set('oldBeatPrefCache', newOldBeatPrefCache); + }, + + clearCurrentAudio(resetPointer) { + let dancer = this.get('dancer'); + + if (dancer.audio.pause) { + dancer.pause(); + } + + if (resetPointer) { + this.set('playQueuePointer', -1); + } + + this.setProperties({ + timeElapsed: 0, + timeTotal: 0, + playing: false + }); + }, + + dragOver() { + let dragLeaveTimeoutHandle = this.get('dragLeaveTimeoutHandle'); + this.set('dragging', true); + + if (dragLeaveTimeoutHandle) { + clearTimeout(dragLeaveTimeoutHandle); + } + }, + + dragLeave() { + // need to delay the dragLeave notification to avoid flickering ( hovering over some page elements causes this event to be sent ) + this.set('dragLeaveTimeoutHandle', setTimeout(() => { this.set('dragging', false); }, 500)); + }, + + simulateKick(/*mag, ratioKickMag*/) { + let activeLights = this.get('activeLights'), + lightsData = this.get('lightsData'), + color = null, + + transitiontime = this.get('flashingTransitions'), + stimulateLight = (light, brightness, hue) => { + let options = { 'bri': brightness }; + + if (transitiontime) { + options['transitiontime'] = 0; + } else { + options['transitiontime'] = 1; + } + + if (!isNone(hue)) { + options.hue = hue; + } + + if (lightsData[light].state.on === false) { + options.on = true; + } + + $.ajax(this.get('apiURL') + '/lights/' + light + '/state', { + data: JSON.stringify(options), + contentType: 'application/json', + type: 'PUT' + }); + }, + timeToBriOff = 100; + + if (activeLights.length > 0) { + let lastLightBopIndex = this.get('lastLightBopIndex'), + lightBopIndex, + brightnessRange = this.get('brightnessRange'), + light; + + lightBopIndex = Math.floor(Math.random() * activeLights.length); + + // let's try not to select the same light twice in a row + if (activeLights.length > 1) { + while (lightBopIndex === lastLightBopIndex) { + lightBopIndex = Math.floor(Math.random() * activeLights.length); + } + } + + light = activeLights[lightBopIndex]; + this.set('lastLightBopIndex', lightBopIndex); + + if (!this.get('colorloopMode')) { + let hueRange = this.get('hueRange'); + + color = Math.floor(Math.random() * (hueRange[1] - hueRange[0] + 1) + hueRange[0]); + } + + if (transitiontime) { + timeToBriOff = 80; + } + + stimulateLight(light, brightnessRange[1], color); + later(this, stimulateLight, light, brightnessRange[0], timeToBriOff); + } + + this.set('paused', true); + later(this, function () { + this.set('paused', false); + }, 150); + + //work the music beat area - simulate the speaker vibration by running a CSS animation on it + $('#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() { + this._super(...arguments); + + window.requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame; + window.cancelAnimationFrame = window.cancelAnimationFrame || window.webkitCancelAnimationFrame || window.mozCancelAnimationFrame || window.msCancelAnimationFrame; + navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia; + + let dancer = new Dancer(), + storage = this.get('storage'), + kick = dancer.createKick({ + threshold: this.get('threshold'), + onKick: (mag, ratioKickMag) => { + if (this.get('paused') === false) { + this.simulateKick(mag, ratioKickMag); + } + } + }); + + kick.on(); + + this.setProperties({ + dancer: dancer, + kick: kick + }); + + ['volume', 'shuffle', 'repeat', 'volumeMuted', 'threshold', 'playerBottomDisplayed', 'songBeatPreferences', 'firstVisit', 'currentVisName', 'playQueue', 'playQueuePointer', 'flashingTransitions', 'colorloopMode', 'hueRange', 'brightnessRange'].forEach((item) => { + if (!isNone(storage.get('huegasm.' + item))) { + let itemVal = storage.get('huegasm.' + item); + + if (isNone(this.actions[item + 'Changed'])) { + this.set(item, itemVal); + } else { + this.send(item + 'Changed', itemVal); + } + } + }); + + this.set('oldPlayQueueLength', this.get('playQueue.length')); + + SC.initialize({ + client_id: this.get('SC_CLIENT_ID') + }); + }, + + didInsertElement() { + this._super(); + + let self = this; + + // file input code + $('#file-input').on('change', function () { + let files = this.files; + self.send('handleNewFiles', files); + this.value = null; // reset in case upload the second file again + }); + + $(document).on('click', '.alert', (event) => { + $(event.target).addClass('removed'); + }); + + // prevent space/text selection when the user repeatedly clicks on the center + $('#beat-container').on('mousedown', '#beat-speaker-center-inner', function (event) { + event.preventDefault(); + }); + + $(document).keypress((event) => { + if (event.which === 32 && event.target.type !== 'text') { + this.send('play'); + } + }); + + this.$().on('drop', '#play-list-area', (event) => { + this.send('dropFiles', event.dataTransfer.files); + }); + + // control the volume by scrolling up/down + $('#player-area').on('mousewheel', (event) => { + if (this.get('playQueueNotEmpty')) { + let scrollSize = 5; + + if (event.deltaY < 0) { + scrollSize *= -1; + } + let newVolume = this.get('volume') + scrollSize; + + this.send('volumeChanged', newVolume < 0 ? 0 : newVolume); + event.preventDefault(); + } + }); + + // demo tracks + if (this.get('firstVisit')) { + this.send('handleNewSoundCloudURL', 'https://soundcloud.com/mrsuicidesheep/candyland-speechless-feat-rkcb'); + this.send('handleNewSoundCloudURL', 'https://soundcloud.com/dillistone/dillistone-lili-n-rude'); + this.send('handleNewSoundCloudURL', 'https://soundcloud.com/mrsuicidesheep/vallis-alps-young-feki-remix'); + this.send('handleNewSoundCloudURL', 'https://soundcloud.com/mrsuicidesheep/andrew-luce-when-to-love-you-feat-chelsea-cutler'); + this.send('handleNewSoundCloudURL', 'https://soundcloud.com/mrsuicidesheep/ahh-ooh-carefree-with-me'); + this.send('handleNewSoundCloudURL', 'https://soundcloud.com/mrsuicidesheep/crywolf-slow-burn'); + this.send('handleNewSoundCloudURL', 'https://soundcloud.com/mrsuicidesheep/clozee-red-forest'); + this.send('handleNewSoundCloudURL', 'https://soundcloud.com/mrsuicidesheep/elo-method-subranger-solace'); + this.send('handleNewSoundCloudURL', 'https://soundcloud.com/mrsuicidesheep/90-pounds-of-pete-waited-too-long-feat-devon-baldwin'); + this.send('handleNewSoundCloudURL', 'https://soundcloud.com/mrsuicidesheep/draper-eyes-open'); + this.send('handleNewSoundCloudURL', 'https://soundcloud.com/itspapaya/sunny'); + this.send('handleNewSoundCloudURL', 'https://soundcloud.com/stonesthrow/nxworries-anderson-paak-knxwledge-suede'); + + this.get('storage').set('huegasm.firstVisit', false); + + this.sendAction(); + } + + if (!this.get('playerBottomDisplayed')) { + $('#player-bottom').hide(); + } + }, + + actions: { + clearPlaylist() { + this.get('playQueue').clear(); + }, + setVisName(name) { + this.set('currentVisName', name); + }, + hideTooltip() { + $('.bootstrap-tooltip').tooltip('hide'); + }, + gotoSCURL(URL) { + // need to pause the music since soundcloud is going to start playing this song anyways + if (this.get('playing')) { + this.send('play'); + } + + this.send('gotoURL', URL); + }, + gotoURL(URL) { + $('.tooltip').remove(); + window.open(URL, '_blank'); + }, + handleNewSoundCloudURL(URL) { + if (URL) { + SC.resolve(URL).then((resultObj) => { + let processResult = (result) => { + if (result.kind === 'user') { + this.get('notify').alert({ html: this.get('scUserNotSupportedHtml') }); + } else if (result.kind === 'track') { + if (result.streamable === true) { + let picture = null; + + if (result.artwork_url) { + picture = result.artwork_url.replace('large', 't67x67'); + } else if (result.user.avatar_url) { + picture = result.user.avatar_url; + } + + $.get(picture) + .done(() => { + this.get('playQueue').pushObject({ url: result.stream_url + '?client_id=' + this.get('SC_CLIENT_ID'), fileName: result.title + ' - ' + result.user.username, artist: result.user.username, scUrl: result.permalink_url, title: result.title, picture: picture }); + }).fail(() => { // no picture + this.get('playQueue').pushObject({ url: result.stream_url + '?client_id=' + this.get('SC_CLIENT_ID'), fileName: result.title + ' - ' + result.user.username, artist: result.user.username, scUrl: result.permalink_url, title: result.title }); + }); + } else { + failedSongs.push(result.title); + } + } else if (result.kind === 'playlist') { + if (result.streamable === true) { + result.tracks.forEach(processResult); + } else { + failedSongs.push(result.title); + } + } + }, + failedSongs = []; + + if (resultObj instanceof Array) { + resultObj.forEach(processResult); + } else { + processResult(resultObj); + } + + if (failedSongs.length > 0) { + this.get('notify').alert({ html: this.get('notStreamableHtml')(failedSongs) }); + } + + if (this.get('playQueuePointer') === -1) { + if (this.get('firstVisit')) { + this.send('goToSong', 0); + } else { + this.send('next'); + } + } + }, () => { + this.get('notify').alert({ html: this.get('urlNotFoundHtml')(URL) }); + }); + } + + this.set('isShowingAddSoundCloudModal', false); + }, + toggleIsShowingAddSoundCloudModal() { + this.toggleProperty('isShowingAddSoundCloudModal'); + }, + slideTogglePlayerBottom() { + let elem = this.$('#player-bottom'); + + elem.velocity(elem.is(':visible') ? 'slideUp' : 'slideDown', { duration: 300 }); + this.changePlayerControl('playerBottomDisplayed', !this.get('playerBottomDisplayed')); + }, + goToSong(index, playSong, scrollToSong) { + let dancer = this.get('dancer'), playQueue = this.get('playQueue'); + + if (dancer.audio) { + this.clearCurrentAudio(true); + } + + if (!isNone(playQueue[index])) { + let audio = new Audio(); + audio.src = this.get('playQueue')[index].url; + + audio.crossOrigin = "anonymous"; + audio.oncanplay = () => { + this.set('timeTotal', Math.floor(audio.duration)); + this.set('soundCloudFuckUps', 0); + }; + audio.onerror = (event) => { + let playQueuePointer = this.get('playQueuePointer'), + song = this.get('playQueue')[playQueuePointer]; + + if (this.get('soundCloudFuckUps') >= this.get('maxSoundCloudFuckUps')) { + this.get('notify').alert({ html: this.get('tooManySoundCloudFuckUps') }); + this.send('play'); + this.set('soundCloudFuckUps', 0); + } else { + if (song.local) { + this.send('removeAudio', playQueuePointer); + } else { + this.send('next', true); + } + + if (event.target.error.code === 2) { + this.get('notify').alert({ html: this.get('failedToDecodeFileHtml')(song.fileName) }); + } else { + this.get('notify').alert({ html: this.get('failedToPlayFileHtml')(song.fileName) }); + } + + this.set('usingBeatPreferences', false); + this.incrementProperty('soundCloudFuckUps'); + } + }; + audio.ontimeupdate = () => { + this.set('timeElapsed', Math.floor(audio.currentTime)); + }; + audio.onended = () => { + this.send('next'); + }; + + dancer.load(audio, 1); + + this.set('playQueuePointer', index); + + this.loadSongBeatPreferences(); + + if (playSong) { + this.send('play'); + } + + if (scrollToSong) { + // this is just a bad workaround to make sure that the track has been rendered to the playlist + next(this, () => { + $('.track' + index).velocity('scroll', { container: $('#play-list-area'), duration: 200 }); + }); + } + } + }, + removeAudio(index) { + this.get('playQueue').removeAt(index); + + // need to manually remove the tooltip + $('body .tooltip').remove(); + + if (index === this.get('playQueuePointer')) { + this.send('goToSong', index, true, true); + } + }, + playerAreaPlay() { + if (isEmpty($('#player-controls:hover')) && this.get('playQueuePointer') !== -1) { + this.send('play'); + + $('#play-notification').velocity({ opacity: 0.8, scale: 1 }, 0).velocity({ opacity: 0, scale: 3 }, 500); + } + }, + play(replayPause) { + let dancer = this.get('dancer'), + playQueuePointer = this.get('playQueuePointer'), + playing = this.get('playing'), + lightsData = this.get('lightsData'); + + if (playQueuePointer !== -1) { + if (playing) { + dancer.pause(); + + let preMusicLightsDataCache = this.get('preMusicLightsDataCache'), + updateLight = (lightIndex) => { + $.ajax(this.get('apiURL') + '/lights/' + lightIndex + '/state', { + data: JSON.stringify({ + 'on': preMusicLightsDataCache[lightIndex].state.on, + 'hue': preMusicLightsDataCache[lightIndex].state.hue, + 'bri': preMusicLightsDataCache[lightIndex].state.bri + }), + contentType: 'application/json', + type: 'PUT' + }); + }; + + for (let key in lightsData) { + if (lightsData.hasOwnProperty(key)) { + later(this, updateLight, key, 1000); + } + } + + if (!replayPause) { + this.set('timeElapsed', Math.floor(dancer.getTime())); + } + } else { + let timeTotal = this.get('timeTotal'); + + if (this.get('volumeMuted')) { + dancer.setVolume(0); + } else { + dancer.setVolume(this.get('volume') / 100); + } + + // replay song + if (this.get('timeElapsed') === timeTotal && timeTotal !== 0) { + this.send('next', true); + return; + } + + $(window).trigger('resize'); // workaround to redraw the canvas for the vitualizer + + this.set('preMusicLightsDataCache', lightsData); + dancer.play(); + } + + this.set('pauseLightUpdates', !playing); + this.onColorloopModeChange(); + this.toggleProperty('playing'); + } + }, + volumeChanged(value) { + this.changePlayerControl('volume', value); + if (this.get('playing')) { + this.get('dancer').setVolume(value / 100); + } + + if (this.get('volume') > 0 && this.get('volumeMuted')) { + this.changePlayerControl('volumeMuted', false); + } + }, + next(repeatAll) { + let playQueuePointer = this.get('playQueuePointer'), + playQueue = this.get('playQueue'), + nextSong = (playQueuePointer + 1), + repeat = this.get('repeat'), + shuffle = this.get('shuffle'); + + if (repeat === 2) { // repeating one song takes precedence over shuffling + if (playQueuePointer === -1 && playQueue.length > 0) { + nextSong = 0; + } else { + nextSong = playQueuePointer; + } + } else if (shuffle) { // next shuffle song + let shufflePlayed = this.get('shufflePlayed'); + + // played all the song in shuffle mode + if (shufflePlayed.length === playQueue.length) { + shufflePlayed.clear(); + this.send('play', true); + return; + } + + // we're going to assume that the song URL is the id + do { + nextSong = Math.floor(Math.random() * playQueue.length); + } while (shufflePlayed.includes(playQueue[nextSong].url)); + + shufflePlayed.pushObject(playQueue[nextSong].url); + } else if (nextSong > playQueue.length - 1) { + if (repeat === 1 || repeatAll) { + nextSong = nextSong % playQueue.length; + } else { + this.send('play', true); + return; + } + } + + this.send('goToSong', nextSong, true, true); + }, + previous() { + if (this.get('timeElapsed') > 5) { + this.send('seekChanged', 0); + } else { + let nextSong = this.get('playQueuePointer'), + playQueue = this.get('playQueue'); + + if (this.get('shuffle') && !isNone(playQueue[nextSong])) { // go to the previously shuffled song + let shufflePlayed = this.get('shufflePlayed'), + shuffledSongIndx = this.get('shufflePlayed').indexOf(playQueue[nextSong].url), + i = 0; + + if (shufflePlayed.length > 0 && shuffledSongIndx !== -1) { // only if there was one + nextSong = shuffledSongIndx - 1; + + if (nextSong < 0) { + nextSong = shufflePlayed.length - 1; + } + + playQueue.some(function (item) { // try to find the previous song id + if (item.url === shufflePlayed[nextSong]) { + nextSong = i; + return true; + } + i++; + + return false; + }); + } + } else { + nextSong--; + + if (nextSong < 0) { + nextSong = playQueue.length - 1; + } + } + + this.send('goToSong', nextSong, true, true); + } + }, + seekChanged(position) { + let dancer = this.get('dancer'); + + if (dancer.audio) { + dancer.audio.currentTime = Math.floor(this.get('timeTotal') * position / 100); + } + }, + volumeMutedChanged(value) { + let dancer = this.get('dancer'), + volumeMuted = isNone(value) ? !this.get('volumeMuted') : value; + + this.changePlayerControl('volumeMuted', volumeMuted); + + if (this.get('playing')) { + if (volumeMuted) { + dancer.setVolume(0); + } else { + dancer.setVolume(this.get('volume') / 100); + } + } + }, + addLocalAudio: function () { + $('#file-input').click(); + }, + shuffleChanged(value) { + this.changePlayerControl('shuffle', isNone(value) ? !this.get('shuffle') : value); + }, + repeatChanged(value) { + this.changePlayerControl('repeat', isNone(value) ? (this.get('repeat') + 1) % 3 : value); + }, + playerBottomDisplayedChanged(value) { + this.changePlayerControl('playerBottomDisplayed', value); + }, + thresholdChanged(value) { + this.changePlayerControl('threshold', value, true); + }, + brightnessRangeChanged(value) { + this.changePlayerControl('brightnessRange', value); + }, + hueRangeChanged(value) { + this.changePlayerControl('hueRange', value); + }, + playQueuePointerChanged(value) { + this.send('goToSong', value, false, true); + }, + clickSpeaker() { + this.simulateKick(1); + }, + dropFiles(files) { + this.setProperties({ + dragging: false, + draggingOverPlayListArea: false + }); + this.send('handleNewFiles', files); + }, + playerListAreaDragOver() { + this.set('draggingOverPlayListArea', true); + }, + playerListAreaDragLeave() { + this.set('draggingOverPlayListArea', false); + }, + handleNewFiles(files) { + let self = this, + playQueue = this.get('playQueue'), + updatePlayQueue = function () { + let tags = ID3.getAllTags("local"), + picture = null; + + if (tags.picture) { + let base64String = ""; + for (let i = 0; i < tags.picture.data.length; i++) { + base64String += String.fromCharCode(tags.picture.data[i]); + } + + 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 + }); + + ID3.clearAll(); + + if (self.get('playQueuePointer') === -1) { + self.send('next'); + } + }; + + for (let key in files) { + if (files.hasOwnProperty(key)) { + let file = files[key]; + + if (file.type.startsWith('audio')) { + ID3.loadTags("local", updatePlayQueue.bind(file), { + dataReader: new FileAPIReader(file), + tags: ['title', 'artist', 'album', 'track', 'picture'] + }); + } + } + } + }, + toggleDimmer() { + this.sendAction('toggleDimmer'); + } + } +}); diff --git a/chrome/app/pods/components/music-tab/mixins/helpers.js b/chrome/app/pods/components/music-tab/mixins/helpers.js new file mode 100644 index 0000000..2d3d395 --- /dev/null +++ b/chrome/app/pods/components/music-tab/mixins/helpers.js @@ -0,0 +1,412 @@ +import Ember from 'ember'; + +const { + Mixin, + observer, + computed, + isNone, + run, + $, + inject, + on, + A +} = Ember; + +export default Mixin.create({ + classNames: ['col-sm-10', 'col-sm-offset-1', 'col-xs-12'], + classNameBindings: ['active::hidden'], + elementId: 'music-tab', + + dancer: null, + + notify: inject.service(), + + beatOptions: { + threshold: { + range: {min: 0, max: 0.5}, + step: 0.01, + defaultValue: 0.3, + pips: { + mode: 'values', + values: [0, 0.25, 0.5], + density: 10, + format: { + to: function ( value ) { + if(value === 0) { + value = 'More'; + } else if(value === 0.25) { + value = ''; + } else { + value = 'Less'; + } + + return value; + }, + from: function ( value ) { return value; } + } + } + }, + hueRange: { + range: {min: 0, max: 65535}, + step: 1, + defaultValue: 0.3, + pips: { + mode: 'values', + values: [0, 25500, 46920, 65535], + density: 10, + format: { + to: function ( value ) { + if(value === 0 || value === 65535) { + value = 'Red'; + } else if(value === 25500 ) { + value = 'Green'; + } else { + value = 'Blue'; + } + + return value; + }, + from: function ( value ) { return value; } + } + } + }, + brightnessRange: { + range: {min: 1, max: 254}, + step: 1, + defaultValue: 0, + pips: { + mode: 'values', + values: [1, 50, 100, 150, 200, 254], + density: 10, + format: { + to: function ( value ) { return value; }, + from: function ( value ) { return value; } + } + } + } + }, + + threshold: 0.3, + hueRange: [0, 65535], + brightnessRange: [1, 254], + oldThreshold: null, + + playQueuePointer: -1, + playQueue: A(), + timeElapsed: 0, + timeTotal: 0, + lastLightBopIndex: 0, + + playerBottomDisplayed: true, + dragging: false, + draggingOverPlayListArea: false, + dragLeaveTimeoutHandle: null, + audioStream: null, + dimmerOn: false, + isShowingAddSoundCloudModal: false, + + colorloopMode: false, + flashingTransitions: false, + + // 0 - no repeat, 1 - repeat all, 2 - repeat one + repeat: 0, + shuffle: false, + volumeMuted: false, + volume: 100, + // beat detection related pausing + paused: false, + // audio: playing or paused + playing: false, + songBeatPreferences: {}, + usingBeatPreferences: false, + oldBeatPrefCache: null, + storage: null, + firstVisit: true, + + soundCloudFuckUps: 0, + maxSoundCloudFuckUps: 3, + + // used to insure that we don't replay the same thing multiple times in shuffle mode + shufflePlayed: [], + + // noUiSlider connection specification + filledConnect: [true, false], + hueRangeConnect: [false, true, false], + + SC_CLIENT_ID: 'aeec0034f58ecd85c2bd1deaecc41594', + scUserNotSupportedHtml: '', + tooManySoundCloudFuckUps: '', + notStreamableHtml(fileNames){ + let html = ''; + + return html; + }, + urlNotFoundHtml(url){ + return ''; + }, + failedToPlayFileHtml(fileName){ + return ''; + }, + failedToDecodeFileHtml(fileName){ + return ''; + }, + + scUrl: computed('playQueuePointer', 'playQueue.[]', function(){ + let rtn = null, + currentSong = this.get('playQueue')[this.get('playQueuePointer')]; + + if(currentSong && currentSong.scUrl){ + rtn = currentSong.scUrl; + } + + return rtn; + }), + + playQueueEmpty: computed.empty('playQueue'), + playQueueNotEmpty: computed.notEmpty('playQueue'), + playQueueMultiple: computed('playQueue.[]', function(){ + return this.get('playQueue').length > 1; + }), + + seekPosition: computed('timeElapsed', 'timeTotal', function(){ + let timeTotal = this.get('timeTotal'), + timeElapsed = this.get('timeElapsed'); + + if (timeTotal === 0) { + return 0; + } + + return timeElapsed/timeTotal*100; + }), + + largeArtworkPic: computed('playQueuePointer', 'currentVisName', function(){ + let pic = '', + currentVisName = this.get('currentVisName'), + playQueuePointer = this.get('playQueuePointer'), + playQueue = this.get('playQueue'); + + if(playQueuePointer !== -1 && currentVisName === 'None'){ + let song = playQueue[playQueuePointer]; + if(!isNone(song.picture)){ + pic = song.picture; + + if(song.scUrl){ + pic = pic.replace('67x67', '500x500'); + } + } + } + + return pic; + }), + + repeatIcon: computed('repeat', function() { + if(this.get('repeat') === 2) { + return 'repeat-one'; + } + + return 'repeat'; + }), + + playingIcon: computed('playing', function() { + if(this.get('playing')){ + return 'pause'; + } else if(this.get('timeElapsed') === this.get('timeTotal') && this.get('timeTotal') !== 0){ + return 'replay'; + } else { + return 'play-arrow'; + } + }), + + playerAreaClickIcon: computed('playing', function() { + if(this.get('playing')){ + return 'play-arrow'; + } else { + return 'pause'; + } + }), + + playListAreaClass: computed('dragging', 'draggingOverPlayListArea', 'dimmerOn', function(){ + let classes = 'pointer'; + + if(this.get('dragging')){ + classes += ' drag-here-highlight'; + } + + if(this.get('draggingOverPlayListArea')){ + classes += ' dragging-over'; + } + + if(this.get('dimmerOn')){ + classes += ' dimmerOn'; + } + + return classes; + }), + + dimmerOnClass: computed('dimmerOn', function(){ + return this.get('dimmerOn') ? 'dimmerOn' : null; + }), + + volumeMutedClass: computed('volumeMuted', function(){ + let classes = 'player-control-icon volumeButton'; + + if(this.get('volumeMuted')){ + classes += ' active'; + } + + return classes; + }), + + repeatClass: computed('repeat', function(){ + return this.get('repeat') !== 0 ? 'player-control-icon active' : 'player-control-icon'; + }), + + shuffleClass: computed('shuffle', function(){ + return this.get('shuffle') ? 'player-control-icon active' : 'player-control-icon'; + }), + + volumeIcon: computed('volumeMuted', 'volume', function() { + let volume = this.get('volume'); + + if (this.get('volumeMuted')) { + return "volume-off"; + } else if (volume >= 70) { + return "volume-up"; + } else if (volume > 10) { + return "volume-down"; + } else { + return 'volume-mute'; + } + }), + + beatDetectionAreaArrowIcon: computed('playerBottomDisplayed', function(){ + if(!this.get('playerBottomDisplayed')){ + return 'keyboard-arrow-down'; + } else { + return 'keyboard-arrow-up'; + } + }), + + timeElapsedTxt: computed('timeElapsed', function(){ + return this.formatTime(this.get('timeElapsed')); + }), + + timeTotalTxt: computed('timeTotal', function() { + return this.formatTime(this.get('timeTotal')); + }), + + onPlayQueueChange: observer('playQueue.length', function(){ + let playQueueLength = this.get('playQueue.length'); + + if(playQueueLength > this.get('oldPlayQueueLength')){ + run.once(this, ()=>{ + run.next(this, function() { + $(`.track${playQueueLength-1}`).velocity('scroll', { container: $('#play-list-area'), duration: 200 }); + }); + }); + } + + this.set('oldPlayQueueLength', playQueueLength); + }), + + onColorloopModeChange: observer('colorloopMode', 'playing', function(){ + this.set('colorLoopOn', this.get('playing') && this.get('colorloopMode')); + }), + + onOptionChange: observer('flashingTransitions', 'playQueue.[]', 'playQueuePointer', 'colorloopMode', function(self, option){ + option = option.replace('.[]', ''); + let value = this.get(option); + + // can't really save local music + if(option === 'playQueue'){ + value = value.filter((song)=>{ + return !song.url.startsWith('blob:'); + }); + } + + this.get('storage').set('huegasm.' + option, value); + }), + + onRepeatChange: on('init', observer('repeat', function () { + let tooltipTxt = 'Repeat all', type = 'repeat'; + + if (this.get(type) === 1) { + tooltipTxt = 'Repeat one'; + } else if (this.get(type) === 2) { + tooltipTxt = 'Repeat off'; + } + + this.changeTooltipText(type, tooltipTxt); + })), + + onShuffleChange: on('init', observer('shuffle', function () { + let tooltipTxt = 'Shuffle', type = 'shuffle'; + + if (this.get(type)) { + this.get('shufflePlayed').clear(); + tooltipTxt = 'Unshuffle'; + } + + this.changeTooltipText(type, tooltipTxt); + })), + + onVolumeMutedChange: on('init', observer('volumeMuted', function() { + let tooltipTxt = 'Mute', type = 'volumeMuted', + volumeMuted = this.get(type), dancer = this.get('dancer'), + volume=0; + + if (volumeMuted) { + tooltipTxt = 'Unmute'; + volume = 0; + } else { + volume = this.get('volume')/100; + } + + if(this.get('playing')){ + dancer.setVolume(volume); + } + + this.changeTooltipText(type, tooltipTxt); + })), + + onPrevChange: on('init', observer('timeElapsed', 'playQueueNotEmpty', 'playQueue.[]', function() { + if(this.get('playQueueNotEmpty')){ + let tooltipTxt = 'Previous', type = 'prev'; + + if(this.get('timeElapsed') > 5 || this.get('playQueue').length === 1) { + tooltipTxt = 'Replay'; + } + + this.changeTooltipText(type, tooltipTxt); + } + })), + + onPlayingChange: on('init', observer('playing', function () { + let tooltipTxt = 'Play', type = 'playing'; + + if (this.get(type)) { + tooltipTxt = 'Pause'; + } else if(this.get('timeElapsed') === this.get('timeTotal') && this.get('timeTotal') !== 0){ + tooltipTxt = 'Replay'; + } + + this.changeTooltipText(type, tooltipTxt); + })), + + changeTooltipText(type, text) { + // change the tooltip text if it's already visible + $('#' + type + 'Tooltip + .tooltip .tooltip-inner').html(text); + //change the tooltip text for hover + $('#' + type + 'Tooltip').attr('data-original-title', text); + + if(isNone(this.get(type + 'TooltipTxt'))) { + this.set(type + 'TooltipTxt', text); + } + }, + + formatTime(time){ + return this.pad(Math.floor(time/60), 2) + ':' + this.pad(time%60, 2); + }, + + pad(num, size){ return ('000000000' + num).substr(-size); } +}); diff --git a/chrome/app/pods/components/music-tab/mixins/visualizer.js b/chrome/app/pods/components/music-tab/mixins/visualizer.js new file mode 100644 index 0000000..17dcfe2 --- /dev/null +++ b/chrome/app/pods/components/music-tab/mixins/visualizer.js @@ -0,0 +1,94 @@ +import Ember from 'ember'; + +const { + Mixin, + observer, + $ +} = Ember; + +export default Mixin.create({ + currentVisName: 'None', + + visNames: ['None', 'Bars', 'Wave'], + + onCurrentVisNameChange: observer('currentVisName', function () { + let currentVisName = this.get('currentVisName'); + + if(currentVisName === 'None'){ + let canvasEl = $('#visualization')[0], + ctx = canvasEl.getContext('2d'); + + ctx.clearRect(0, 0, canvasEl.width, canvasEl.height); + } + + this.get('storage').set('huegasm.currentVisName', currentVisName); + }), + + didInsertElement(){ + let dancer = this.get('dancer'), + canvas = $('#visualization')[0], + playerArea = $('#player-area'), + ctx = canvas.getContext('2d'), + spacing = 2, + h = playerArea.height(), w; + + canvas.height = h; + + // must be done to preserver resolution so that things don't appear blurry + // note that the height is set to 400px via css so it doesn't need to be recalculated + let syncCanvasHeight = ()=>{ + w = playerArea.width(); + canvas.width = w; + }; + + syncCanvasHeight(); + + $(window).on('resize', syncCanvasHeight); + + dancer.bind('update', () => { + let currentVisName = this.get('currentVisName'), + gradient = ctx.createLinearGradient(0, 0, 0, h), + pageHidden = document.hidden || document.msHidden || document.webkitHidden || document.mozHidden; + + // dont do anything if the page is hidden or no visualization + if(currentVisName === 'None' || pageHidden || !this.get('active')){ + return; + } + + ctx.clearRect(0, 0, w, h); + + if (currentVisName === 'Wave') { + let width = 3, + count = 1024; + + gradient.addColorStop(0.6, 'white'); + gradient.addColorStop(0, '#0036FA'); + + ctx.lineWidth = 1; + ctx.strokeStyle = gradient; + let waveform = dancer.getWaveform(); + + ctx.beginPath(); + ctx.moveTo(0, h / 2); + for (let i = 0, l = waveform.length; i < l && i < count; i++) { + ctx.lineTo(i * ( spacing + width ), ( h / 2 ) + waveform[i] * ( h / 2 )); + } + ctx.stroke(); + ctx.closePath(); + } else if (currentVisName === 'Bars') { + let width = 4, + count = 128; + + gradient.addColorStop(1, '#0f0'); + gradient.addColorStop(0.6, '#ff0'); + gradient.addColorStop(0.2, '#F12B24'); + + ctx.fillStyle = gradient; + let spectrum = dancer.getSpectrum(); + for (let i = 0, l = spectrum.length; i < l && i < count; i++) { + ctx.fillRect(i * ( spacing + width ), h, width, -spectrum[i] * h - 60); + } + } + }); + } +}); diff --git a/chrome/app/pods/components/music-tab/template.hbs b/chrome/app/pods/components/music-tab/template.hbs new file mode 100644 index 0000000..8ed2441 --- /dev/null +++ b/chrome/app/pods/components/music-tab/template.hbs @@ -0,0 +1,194 @@ +
+
+ + +
+ +
+ + {{paper-icon playerAreaClickIcon id="play-notification"}} + +
+ {{range-slider start=seekPosition min=0 max=100 connect=filledConnect id="seek-slider" on-change="seekChanged"}} + + {{#if playQueueNotEmpty}} + {{paper-icon "skip-previous" class="player-control-icon"}}{{/if}}{{paper-icon playingIcon class="player-control-icon"}}{{#if playQueueMultiple}}{{paper-icon "skip-next" action="" class="player-control-icon"}}{{/if}}{{paper-icon icon=volumeIcon class=volumeMutedClass}}{{range-slider start=volume min=0 max=100 connect=filledConnect on-change="volumeChanged" id="volume-bar" class="hidden-xs"}} + +
{{timeElapsedTxt}} / {{timeTotalTxt}}
+ + {{#paper-menu as |menu|}} + {{#menu.trigger}} + {{#paper-button iconButton=true}} + {{paper-icon "remove-red-eye" class="player-control-icon"}} + {{/paper-button}} + {{/menu.trigger}} + {{#menu.content width=2 as |content|}} + {{#each visNames as |name|}} + {{#content.menu-item onClick=(action "setVisName" name)}} + {{name}} + + {{#if (eq currentVisName name)}} + {{paper-icon "check" classNames=dimmerOnClass}} + {{/if}} + {{/content.menu-item}} + {{/each}} + {{/menu.content}} + {{/paper-menu}} + + {{#if scUrl}} + + + + + {{/if}} +
+
+ +
+ + +
+ {{#paper-menu as |menu|}} + {{#menu.trigger}} + {{#paper-button iconButton=false}} + {{paper-icon "playlist add" class="player-control-icon"}} Add new music + {{/paper-button}} + {{/menu.trigger}} + {{#menu.content width=3 as |content|}} + {{#content.menu-item onClick="addLocalAudio"}} + {{paper-icon "attachment" class=shuffleClass}} Local file + {{/content.menu-item}} + {{#content.menu-item onClick="toggleIsShowingAddSoundCloudModal"}} + {{paper-icon "cloud" class=shuffleClass}} SoundCloud + {{/content.menu-item}} + {{/menu.content}} + {{/paper-menu}} + + {{paper-icon "shuffle" class=shuffleClass}} + {{paper-icon repeatIcon class=repeatClass}} + +
+ +
+ {{#if (or playQueueEmpty dragging)}} +
+ {{#if dragging}} + Drag your music files here + {{else}} + Add your music files here + {{/if}} +
+ {{paper-icon "library-music" class=dimmerOnClass}} + {{/if}} + + {{#each playQueue as |item index|}} +
+ {{#if item.picture}} + + {{else}} + + {{/if}} + +
+ {{#if item.title}} +
{{item.title}}
+
+ {{#if item.artistUrl}} + {{item.artist}} + {{else}} + {{item.artist}} + {{/if}} +
+ {{else}} + {{item.fileName}} + {{/if}} +
+ + {{paper-icon "close" classNames="close"}} +
+ {{/each}} +
+
+
+ +
+
+ {{paper-icon beatDetectionAreaArrowIcon id="beat-detection-area-arrow-icon"}} +
+
+ +
+
+ {{#if usingBeatPreferences}} + + {{paper-icon "star" class=dimmerOnClass}} + + {{/if}} + +
+
+ + Hue Range + + + {{range-slider start=hueRange orientation="vertical" step=beatOptions.hueRange.step range=beatOptions.hueRange.range connect=hueRangeConnect on-change="hueRangeChanged" pips=beatOptions.hueRange.pips}} +
+ +
+ + Brightness Range + + + {{range-slider start=brightnessRange orientation="vertical" step=beatOptions.brightnessRange.step range=beatOptions.brightnessRange.range on-change="brightnessRangeChanged" pips=beatOptions.brightnessRange.pips}} +
+ +
+ + Sensitivity + + + {{range-slider start=threshold orientation="vertical" step=beatOptions.threshold.step range=beatOptions.threshold.range on-change="thresholdChanged" pips=beatOptions.threshold.pips}} +
+ +
+ + {{paper-checkbox value=flashingTransitions onChange=(action (mut flashingTransitions)) label="Flashing Transitions"}} + + + + {{paper-checkbox value=colorloopMode onChange=(action (mut colorloopMode)) label="Colorloop"}} + +
+
+
+ +
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+ +{{music-tab/add-soundcloud-sound-modal action="handleNewSoundCloudURL" isShowingModal=isShowingAddSoundCloudModal}} \ No newline at end of file diff --git a/chrome/app/resolver.js b/chrome/app/resolver.js new file mode 100644 index 0000000..2fb563d --- /dev/null +++ b/chrome/app/resolver.js @@ -0,0 +1,3 @@ +import Resolver from 'ember-resolver'; + +export default Resolver; diff --git a/chrome/app/router.js b/chrome/app/router.js new file mode 100644 index 0000000..cdc2578 --- /dev/null +++ b/chrome/app/router.js @@ -0,0 +1,12 @@ +import Ember from 'ember'; +import config from './config/environment'; + +const Router = Ember.Router.extend({ + location: config.locationType, + rootURL: config.rootURL +}); + +Router.map(function() { +}); + +export default Router; diff --git a/chrome/app/styles/app.scss b/chrome/app/styles/app.scss new file mode 100644 index 0000000..c0b4812 --- /dev/null +++ b/chrome/app/styles/app.scss @@ -0,0 +1,118 @@ +@import 'ember-modal-dialog/ember-modal-structure'; +@import 'ember-modal-dialog/ember-modal-appearance'; + +@import 'huegasm-variables'; + +@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 'introjs'; +@import 'hue-controls'; +@import 'light-group'; +@import 'music-tab'; +@import 'noui-slider'; + +body { + min-width: 500px; +} + +body > .ember-view { + display: flex; + min-height: 100vh; + flex-direction: column; +} + +body, button { + font-family: 'Slabo 27px', serif; +} + +#huegasm { + flex: 1; +} + +.ember-app { + padding-bottom: 50px; +} + +.footer { + margin: 0 auto 10px auto; + width: 100%; + max-width: 800px; + text-align: center; + display: flex; + align-items: center; + justify-content: space-around; + +} + +.footer-text { + display: inline-block; + font-size: 18px; + a { + margin-left: 5px; + } +} + +.alert { + margin-bottom: 0; + border: none; +} + + +.title { + margin-bottom: 20px; + img { + width: 200px; + } +} + +button.md-warn { + background: $secondaryThemeColor; +} + +div.ember-modal-dialog { + padding: 20px; + color: $blackish; + md-input-container { + width: 100%; + input.md-input[type="text"] { + color: $blackish !important; + } + } + md-input-container label { + color: rgba(0, 0, 0, 0.26); + } +} + +.display-flex { + display: flex !important; +} + +// fancy webkit scrollbars +::-webkit-scrollbar { + -webkit-appearance: none; +} + +::-webkit-scrollbar:vertical { + width: 12px; +} + +::-webkit-scrollbar:horizontal { + height: 12px; +} + +::-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); +} + +::-webkit-scrollbar-track { + background-color: #ffffff; +} + diff --git a/chrome/app/styles/bootstrap.scss b/chrome/app/styles/bootstrap.scss new file mode 100644 index 0000000..f5e4339 --- /dev/null +++ b/chrome/app/styles/bootstrap.scss @@ -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"; diff --git a/chrome/app/styles/bridge-finder.scss b/chrome/app/styles/bridge-finder.scss new file mode 100644 index 0000000..f6ef407 --- /dev/null +++ b/chrome/app/styles/bridge-finder.scss @@ -0,0 +1,73 @@ +#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: 30px auto 20px; +} + +#intro { + font-size: 22px; +} + +#intro-paragraph { + margin-bottom: 20px; + font-size: 16px; +} + +#bridge-finder, .ready-block { + text-align: center; + padding: 10px 15px 0; + font-size: 16px; +} + +#bridge-finder { + min-height: 500px; + .md-bar { + background-color: $secondaryThemeColor !important; + } +} + +// preloading image +.ready-block:after { + display: none; + content: url(images/pressButtonBridge.png); +} + +.embed-container { + position:relative; + padding-bottom:56.25%; + padding-top:30px; + height:0; + overflow:hidden; +} + +.embed-container-wrapper { + max-width: 550px; + margin: auto; +} + +.embed-container iframe, .embed-container object, .embed-container embed { + position:absolute; + top:0; + left:0; + width:100%; + height:100%; +} + +.go-button { + margin: 20px 0; + border-radius: 100% !important; + width: 100px; + height: 100px; + font-size: 28px; +} diff --git a/chrome/app/styles/common.scss b/chrome/app/styles/common.scss new file mode 100644 index 0000000..db7ef0f --- /dev/null +++ b/chrome/app/styles/common.scss @@ -0,0 +1,15 @@ +.text-left { + text-align: left !important; +} + +.relative { + position: relative !important; +} + +.no-text-decoration { + text-decoration: none !important; +} + +.pointer { + cursor: pointer; +} \ No newline at end of file diff --git a/chrome/app/styles/dimmer.scss b/chrome/app/styles/dimmer.scss new file mode 100644 index 0000000..b36f0d3 --- /dev/null +++ b/chrome/app/styles/dimmer.scss @@ -0,0 +1,76 @@ +div.dimmerOn { + color: $whitish !important; + background: $blackish !important; +} + +html.dimmerOn { + color: white; + background: $blackish; +} + +body.dimmerOn { + color: $whitish; + background: $blackish; + md-input-container { + label { + color: #3f51b5 !important; + } + .md-input { + color: $whitish !important; + border-color: #3f51b5 !important; + } + } + .md-track { + background: $whitish; + } + .color { + border: 1px solid white; + } + .playlist-item, .ember-basic-dropdown-content md-menu-content { + color: $whitish; + background-color: $dimmerOnButtonColor; + } + .ember-basic-dropdown-content a { + color: $whitish; + } + .playlist-item { + &.active { + background: darken($dimmerOnButtonColor, 15%) !important; + } + &:hover { + background: darken($dimmerOnButtonColor, 10%); + } + .audio-remove-button .paper-icon { + color: $whitish !important; + &:hover { + color: white !important; + } + } + } + svg { + -webkit-filter: drop-shadow(0 0 5px #228DFF); + } + .md-container { + color: $whitish; + } + .add-new-music:hover { + background: darken($dimmerOnButtonColor, 5%); + } + .md-bar { + background-color: darken(white, 60%) !important; + } +} + +.paper-icon.dimmerOn { + text-shadow: $glowingText; + opacity: 0.9 !important; +} + +.logo { + display: inline-block; + cursor: pointer; + width: 40px; + height: 40px; + background: url(images/huegasm.png) center center no-repeat; + background-size: 40px 40px; +} \ No newline at end of file diff --git a/chrome/app/styles/fancy-speaker.scss b/chrome/app/styles/fancy-speaker.scss new file mode 100644 index 0000000..b9e1ac7 --- /dev/null +++ b/chrome/app/styles/fancy-speaker.scss @@ -0,0 +1,101 @@ +$centersize: 80px; +$center1size: 205px; +$bezelsize: 240px; + +%base { + border-radius: 100%; +} +%rivet { + position: absolute; + height: 8px; + width: 8px; + background-color: #555; + border-radius: 100%; + box-shadow: inset 0 0 3px #000, 0 0 2px #000; +} + +#beat-speaker-center-inner { + @extend %base; + height: $centersize; + width: $centersize; + position: absolute; + bottom: 47px; + right: 47px; + -webkit-filter: blur(1px); + filter: blur(1px); + background: rgb(0,0,0); + background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,1) 0%, rgba(79,79,79,1) 0%, rgba(0,0,0,1) 100%); + background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(0,0,0,1)), color-stop(0%,rgba(79,79,79,1)), color-stop(100%,rgba(0,0,0,1))); + background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,1) 0%,rgba(79,79,79,1) 0%,rgba(0,0,0,1) 100%); + background: -o-radial-gradient(center, ellipse cover, rgba(0,0,0,1) 0%,rgba(79,79,79,1) 0%,rgba(0,0,0,1) 100%); + background: -ms-radial-gradient(center, ellipse cover, rgba(0,0,0,1) 0%,rgba(79,79,79,1) 0%,rgba(0,0,0,1) 100%); + background: radial-gradient(ellipse at center, rgba(0,0,0,1) 0%,rgba(79,79,79,1) 0%,rgba(0,0,0,1) 100%); + box-shadow: 0 0 10px rgba(0, 0, 0, 1); +} + +#beat-speaker-center-outer { + @extend %base; + position: absolute; + top: 16px; + left: 16px; + height: $center1size; + width: $center1size; + border: 15px solid #333; + box-shadow: -3px -3px 15px rgba(0, 0, 0, 0.4), inset -3px -3px 15px rgba(0, 0, 0, 0.5); + background: -moz-linear-gradient(130deg, rgba(117, 117, 117, 1) 55%, rgba(220, 220, 220, 1) 100%); + background: -webkit-linear-gradient(130deg, rgba(117, 117, 117, 1) 55%, rgba(220, 220, 220, 1) 100%); + background: -o-linear-gradient(130deg, rgba(117, 117, 117, 1) 55%, rgba(220, 220, 220, 1) 100%); + background: -ms-linear-gradient(130deg, rgba(117, 117, 117, 1) 55%, rgba(220, 220, 220, 1) 100%); + background: linear-gradient(130deg, rgba(117, 117, 117, 1) 55%, rgba(220, 220, 220, 1) 100%); +} + +.bezel { + @extend %base; + margin: 0 auto; + height: $bezelsize; + width: $bezelsize; + 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); +} + +.rivet1 { + @extend %rivet; + top: 6px; + left: 50%; +} +.rivet2 { + @extend %rivet; + bottom: 6px; + left: 50%; +} +.rivet3 { + @extend %rivet; + top: 50%; + left: 6px; +} +.rivet4 { + @extend %rivet; + top: 50%; + right: 6px; +} +.rivet5 { + @extend %rivet; + top: 18%; + left: 13.7%; +} +.rivet6 { + @extend %rivet; + top: 18%; + right: 13.5%; +} +.rivet7 { + @extend %rivet; + bottom: 17%; + left: 13.5%; +} +.rivet8 { + @extend %rivet; + bottom: 17%; + right: 13.5%; +} diff --git a/chrome/app/styles/hue-controls.scss b/chrome/app/styles/hue-controls.scss new file mode 100644 index 0000000..e517619 --- /dev/null +++ b/chrome/app/styles/hue-controls.scss @@ -0,0 +1,112 @@ +#lights-tab { + padding: 0; + margin-top: 5vh; + .paper-icon { + line-height: 0.8 !important; + } +} + +.lights-control-tooltip + .tooltip { + left: 0 !important; +} + +#color-row { + cursor: pointer; + .md-list-item-inner { + padding-right: 0; + } +} + +#hue-controls { + max-width: 1200px; + height: 90vh; + md-progress-circular { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + } +} + +// 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(images/huegasm.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 { + padding: 15px 0 4vh; + text-align: center; + margin: auto; + position: relative; + .ember-basic-dropdown-trigger { + z-index: 3; + text-align: right; + position: absolute; + top: -10px; + right: 10px; + transform: scale(1.1); + } +} + +.navigation-item { + font-size: 18px; + padding: 0 10px 0 10px; + &.active { + font-weight: bold; + cursor: default; + text-decoration: none !important; + } + &:hover { + text-decoration: underline; + } +} + +.color { + border: 1px solid rgba(0, 0, 0, 0.5); +} + +#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; +} + +.color-content { + box-shadow: none !important; + md-menu-content, md-menu-item { + background-color: transparent !important; + } +} + +#picker { + cursor: crosshair; +} + +#loop-addition { + position: absolute; + left: 33px; + top: 15px; + font-size: 16px !important; +} + +#huegasm-content { + height: 80%; + max-height: 500px; +} + +@media(min-width:767px) { + #lights-tab { + font-size: 20px; + .paper-icon { + font-size: 24px; + } + } +} diff --git a/chrome/app/styles/huegasm-variables.scss b/chrome/app/styles/huegasm-variables.scss new file mode 100644 index 0000000..914abb3 --- /dev/null +++ b/chrome/app/styles/huegasm-variables.scss @@ -0,0 +1,8 @@ +$playerHeight: 400px; +$playerDefaultIconColor: #BBBBBB; +$secondaryThemeColor: #F12B24; +$glowingText: 0 0 2px #fff, 0 0 4px #fff, 0 0 20px #228DFF; +$dimmerOnButtonColor: #404040; +$blackish: #242424; +$whitish: #e0e0e0; +$paperThemeColor: #3f51b5; diff --git a/chrome/app/styles/introjs.scss b/chrome/app/styles/introjs.scss new file mode 100644 index 0000000..fc7b5a1 --- /dev/null +++ b/chrome/app/styles/introjs.scss @@ -0,0 +1,18 @@ +#settings.introjs-fixParent { + position: inherit !important; +} + +.introjs-tooltip { + width: 300px; +} + +.introjs-skipbutton { + color: $secondaryThemeColor; +} + +.introjs-bullets ul li a.active { + position: relative; + height: 10px; + width: 10px; + top: -2px; +} diff --git a/chrome/app/styles/light-group.scss b/chrome/app/styles/light-group.scss new file mode 100644 index 0000000..c8e56f8 --- /dev/null +++ b/chrome/app/styles/light-group.scss @@ -0,0 +1,71 @@ +.light-group { + max-width: 800px; + margin: 0 auto; + display: flex; + justify-content: center; + .tooltip.top { + margin-top: 1px; + margin-left: 2px; + } +} + +.toggleable-light { + cursor: pointer; + position: relative; + border-radius: 30%; + border: 2px solid $whitish; + margin: 0 2px; + display: flex; + height: 50px; + align-items: center; + justify-content: center; +} + +.light-inactive { + border-color: rgba($secondaryThemeColor, 0.4); +} + +.light-inactive::before { + font-weight: bold; + position: absolute; + top: -5px; + content: "\e014"; + font-family: 'Glyphicons Halflings'; + font-size: 40px; + color: rgba($secondaryThemeColor, 0.6); +} + +.light-active { + border-color: rgba(green, 0.4); + img { + transition-duration: 0.3s; + transition-property: transform; + box-shadow: 0 0 1px rgba(0, 0, 0, 0); + } + img:hover { + transform: scale(1.2); + } +} + +.ember-modal-overlay.translucent { + background-color: rgba(0, 0, 0, 0.50); +} + +.remove-button { + margin: 10px 0 10px 60px; +} + +.light-text { + width: 60px; + word-wrap: break-word; + padding: 0 10px; +} + +.light-text-content { + display: block; /* Fallback for non-webkit */ + display: -webkit-box; + overflow: hidden; + text-overflow: ellipsis; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; +} \ No newline at end of file diff --git a/chrome/app/styles/music-tab.scss b/chrome/app/styles/music-tab.scss new file mode 100644 index 0000000..21b9fc4 --- /dev/null +++ b/chrome/app/styles/music-tab.scss @@ -0,0 +1,496 @@ +.row { + margin: 0; +} + +#music-tab { + padding: 0; + margin-top: 10px; + margin-bottom: 20px; +} + +#slide-toggle { + font-size: 22px; + color: $playerDefaultIconColor; + background: #730B07; + div .paper-icon { + color: inherit !important; + font-size: 24px; + font-weight: bold; + } +} + +#slide-toggle:hover { + color: lighten($playerDefaultIconColor, 30%) !important; +} + +#player-controls { + transition: all 0.2s ease-in-out; + position: absolute; + bottom: 0; + left: 0; + padding: 15px 10px; + width: 100%; + color: white !important; + z-index: 20; + cursor: default; + background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 1)); + .ember-basic-dropdown-trigger { + position: absolute; + right: 0; + bottom: 13px; + } + .tooltip.top { + margin-top: -17px; + } + .tooltip-arrow { + display: none; + } + md-menu-item>.md-button md-icon { + margin: auto 0 5px 10px; + } + .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: 10px; + margin-top: 4px; + font-size: 22px; +} + +.player-control-icon.active { + color: $secondaryThemeColor !important; +} + +.player-control-icon:hover { + color: white !important; +} + +#play-notification { + position: relative; + color: white !important; + background: black; + top: 50%; + left: 50%; + opacity: 0; + border-radius: 100%; +} + +#player-area { + height: $playerHeight; + background-color: black; + display: inline-block; + padding: 0; + cursor: pointer; +} + +#playlist { + height: $playerHeight; + background-color: #1E1E1E; + padding: 0 5px 0 5px; +} + +#player-area * .noUi-origin { + background-color: $blackish; + border-radius: 5px; +} + +#player-area * .noUi-base { + background-color: $blackish; + border-radius: 5px; +} + +#volume-bar { + width: 5em; + height: 0.5em; + display: inline-block; +} + +#player-area * .noUi-handle::after, +#player-area * .noUi-handle::before { + content: none; +} + +#seek-slider { + margin-bottom: 15px; + transition-duration: 0.2s; + height: 8px; + .noUi-handle { + opacity: 1 !important; + } +} + +#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: 40px; + margin-top: 5px; + border-bottom: 1px solid #3a3a3a; + position: relative; + button .player-control-icon { + margin: 0 5px 1px 3px; + } + .ember-basic-dropdown-trigger { + position: absolute; + bottom: 0; + right: 0; + color: $whitish; + .paper-button { + margin: 0; + } + } +} + +#play-list-area { + background-color: white; + width: 100%; + height: 350px; + margin: 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%; + } + [md-font-icon="library-music"] { + position: absolute; + top: 40%; + font-size: 100px; + opacity: 0.5; + width: 100%; + text-align: center; + } +} + +.song-artist { + font-weight: bold; +} + +#play-list-area.drag-here-highlight { + background-color: white; + border: 5px dotted #5383ff; +} + +#play-list-area.dragging-over { + background-color: darken(white, 5%); + box-shadow: inset 0 0 20px 0 rgba(0, 0, 0, 1); +} + +#file-input { + 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: $blackish; + 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: 10px; + right: 0; + padding: 10px; + } +} + +.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 { + position: relative; + padding: 0; +} + +.star { + cursor: auto !important; +} + +#beat-option-button-group { + margin: 20px 0 10px 0; +} + +#light-option { + margin-top: 20px; + display: flex; + justify-content: space-around; + .md-label { + width: auto; + } +} + +.beat-option { + padding: 5px 0; + text-align: center; + md-checkbox { + padding: 10px 0; + } + md-switch { + margin: 0; + } + .option-description { + display: inline-flex; + font-size: 20px; + justify-content: center; + flex-direction: column; + } + button { + margin-top: 0; + } + .tooltip { + margin: 0; + } +} + +#player-bottom { + color: $blackish; + border: 1px solid black; + width: 100%; + background: white; + border-bottom-left-radius: 5px; + border-bottom-right-radius: 5px; + display: flex; + align-items: center; +} + +#beat-container { + display: flex; + margin-bottom: 10px; +} + +#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 { + position: absolute; + right: 55px; + bottom: 22px; +} + +#visualization { + position: absolute; + top: 0; + left: 0; +} + +#save-beat-preferences-star { + position: absolute; + top: 5px; + left: 5px; + z-index: 1000; + md-icon { + color: $secondaryThemeColor !important; + font-size: 25px; + cursor: default; + } +} + +.visualizers-menu { + left: -135px; +} + +.display-icon { + background: url(images/huegasm.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; +} + +.visualizers-menu .paper-icon { + margin-left: 10px; + position: relative; + top: -4px; +} + +.close { + font-size: 18px !important; + color: rgb(51, 51, 51); + display: none; + text-shadow: none; + &:hover { + color: darken(#333333, 5%) !important; + } +} + +.ember-notify-default.ember-notify-cn { + top: 0; + bottom: initial; +} + +#soundcloud-logo { + display: block; +} + +#soundcloud-logo-small { + display: none; +} + +#soundcloud-tutorial { + width: 100%; +} + +@media(max-width:1100px) { + #soundcloud-logo { + display: none; + } + #soundcloud-logo-small { + display: block; + } +} + +@media(min-width:767px) and (max-width:1200px) { + #add-new-music-label { + display: none; + } + #play-list-controls .paper-button { + border: 1px solid $whitish; + border-radius: 5px; + } +} + +@media(max-width: 500px) { + #sensitivity-settings .noUi-value-vertical { + display: none; + } + .option-description { + height: 55px; + } +} + +// mobile overrides +@media(max-width:767px) { + div#player-bottom { + display: block !important; + } + #beat-area { + height: initial; + } + #seek-slider { + height: 8px; + .noUi-handle { + opacity: 1 !important; + } + } + #seek-slider { + margin-bottom: 15px; + } + .close { + display: block; + } + #save-beat-preferences-star { + right: 5px; + left: initial; + } + md-checkbox { + padding-right: 20px !important; + } +} diff --git a/chrome/app/styles/noui-slider.scss b/chrome/app/styles/noui-slider.scss new file mode 100644 index 0000000..06c756b --- /dev/null +++ b/chrome/app/styles/noui-slider.scss @@ -0,0 +1,56 @@ +.noUi-value-vertical { + margin-top: -10px; + transform: none; +} + +.noUi-value-vertical, .noUi-pips { + color: inherit !important; +} + +.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.550em; + 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: 15px auto 10px; +} diff --git a/chrome/app/styles/paper.scss b/chrome/app/styles/paper.scss new file mode 100644 index 0000000..901c2b4 --- /dev/null +++ b/chrome/app/styles/paper.scss @@ -0,0 +1,72 @@ +@import 'ember-paper'; + +.paper-icon { + cursor: pointer; +} + +md-checkbox .md-icon, .md-off, .md-on { + border-color: inherit !important; +} + +md-checkbox.md-default-theme.md-checked .md-icon { + background: $secondaryThemeColor; +} + +md-checkbox .md-label { + width: 125px; + text-align: left; +} + +.md-button { + flex-direction: unset; + span { + width: 100%; + } +} + +md-switch[disabled=disabled], md-switch[disabled=disabled] .md-container, md-slider[disabled=disabled] { + cursor: not-allowed; +} + +md-progress-circular { + margin: 0 auto 20px auto !important; +} + +md-progress-linear { + margin-bottom: 50px !important; +} + +md-slider { + cursor: pointer; +} + +.md-thumb-text { + user-select: none; +} + +md-slider.md-default-theme .md-thumb:after { + border-color: $secondaryThemeColor; + background-color: $secondaryThemeColor; +} + +md-icon { + color: rgba(0, 0, 0, 0.54) !important; +} + +md-switch.md-default-theme.md-checked .md-thumb { + background-color: $secondaryThemeColor; +} + +.ember-basic-dropdown-trigger { + outline: none !important; +} + +md-list-item { + margin-bottom: 2vh; +} + +@media(max-width:500px) { + #save-beat-preferences-star { + right: 5px; + } +} diff --git a/chrome/bower.json b/chrome/bower.json new file mode 100644 index 0000000..66eb724 --- /dev/null +++ b/chrome/bower.json @@ -0,0 +1,14 @@ +{ + "name": "huegasm", + "dependencies": { + "JavaScript-ID3-Reader": "https://github.com/aadsm/JavaScript-ID3-Reader.git", + "bootstrap-sass": "^3.3.5", + "hammer.js": "^2.0.8", + "intro.js": "^2.1.0", + "jquery-mousewheel": "^3.1.13", + "locallyjs": "^0.3.2", + "matchMedia": "^0.3.0", + "nouislider": "^9.0.0", + "velocity": "^1.3.1" + } +} diff --git a/chrome/config/environment.js b/chrome/config/environment.js new file mode 100644 index 0000000..a683d19 --- /dev/null +++ b/chrome/config/environment.js @@ -0,0 +1,47 @@ +/* jshint node: true */ + +module.exports = function (environment) { + var ENV = { + modulePrefix: 'huegasm', + podModulePrefix: 'huegasm/pods', + environment: environment, + rootURL: '', + locationType: 'hash', + EmberENV: { + FEATURES: { + // Here you can enable experimental features on an ember canary build + // e.g. 'with-controller': true + } + }, + + APP: { + // Here you can pass flags/options to your application instance + // when it is created + } + }; + + if (environment === 'development') { + // ENV.APP.LOG_RESOLVER = true; + // ENV.APP.LOG_ACTIVE_GENERATION = true; + // ENV.APP.LOG_TRANSITIONS = true; + // ENV.APP.LOG_TRANSITIONS_INTERNAL = true; + // ENV.APP.LOG_VIEW_LOOKUPS = true; + } + + if (environment === 'test') { + // Testem prefers this... + ENV.locationType = 'none'; + + // keep test console output quieter + ENV.APP.LOG_ACTIVE_GENERATION = false; + ENV.APP.LOG_VIEW_LOOKUPS = false; + + ENV.APP.rootElement = '#ember-testing'; + } + + if (environment === 'production') { + + } + + return ENV; +}; diff --git a/chrome/ember-cli-build.js b/chrome/ember-cli-build.js new file mode 100644 index 0000000..85f25c8 --- /dev/null +++ b/chrome/ember-cli-build.js @@ -0,0 +1,29 @@ +/* global require, module */ +var EmberApp = require('ember-cli/lib/broccoli/ember-app'); +var Funnel = require('broccoli-funnel'); + +module.exports = function (defaults) { + var app = new EmberApp(defaults, { + fingerprint: { + enabled: false + } + }); + var extraAssets = new Funnel('bower_components/bootstrap-sass/assets/fonts/bootstrap/', { + srcDir: '/', + include: ['**'], + destDir: '/fonts/bootstrap' + }); + + app.import('vendor/dancer.js'); + + app.import('bower_components/bootstrap-sass/assets/javascripts/bootstrap/tooltip.js'); + app.import('bower_components/intro.js/intro.js'); + app.import('bower_components/intro.js/introjs.css'); + app.import('bower_components/intro.js/themes/introjs-nassim.css'); + 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(extraAssets); +}; diff --git a/chrome/package.json b/chrome/package.json new file mode 100644 index 0000000..b05c55d --- /dev/null +++ b/chrome/package.json @@ -0,0 +1,46 @@ +{ + "name": "huegasm", + "version": "1.0.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": { + "doc": "doc", + "test": "tests" + }, + "scripts": { + "start": "ember server --live-reload=false", + "build": "ember build --env=production" + }, + "engines": { + "node": ">= 0.12.0" + }, + "author": "Egor Philippov", + "license": "MIT", + "devDependencies": { + "broccoli-asset-rev": "^2.2.0", + "ember-ajax": "^2.0.1", + "ember-cli": "^2.8.0", + "ember-cli-app-version": "^2.0.0", + "ember-cli-babel": "^5.1.5", + "ember-cli-dependency-checker": "^1.2.0", + "ember-cli-htmlbars": "^1.0.1", + "ember-cli-htmlbars-inline-precompile": "^0.3.1", + "ember-cli-inject-live-reload": "^1.3.1", + "ember-cli-nouislider": "^0.11.0", + "ember-cli-release": "0.2.8", + "ember-cli-shims": "^1.0.2", + "ember-cli-sass": "^6.0.0", + "ember-cli-sri": "^2.1.0", + "ember-cli-test-loader": "^1.1.0", + "ember-cli-uglify": "^1.2.0", + "ember-export-application-global": "^1.0.4", + "ember-load-initializers": "^0.6.3", + "ember-modal-dialog": "^0.9.0", + "ember-notify": "^5.0.4", + "ember-paper": "^1.0.0-alpha.14", + "ember-resolver": "^2.0.3", + "ember-truth-helpers": "^1.2.0", + "ember-source": "^2.11.0", + "loader.js": "^4.0.7" + } +} \ No newline at end of file diff --git a/chrome/public/128x128.png b/chrome/public/128x128.png new file mode 100644 index 0000000..33ec2e7 Binary files /dev/null and b/chrome/public/128x128.png differ diff --git a/chrome/public/16x16.png b/chrome/public/16x16.png new file mode 100644 index 0000000..9e5a2e4 Binary files /dev/null and b/chrome/public/16x16.png differ diff --git a/chrome/public/32x32.png b/chrome/public/32x32.png new file mode 100644 index 0000000..14dbea8 Binary files /dev/null and b/chrome/public/32x32.png differ diff --git a/chrome/public/48x48.png b/chrome/public/48x48.png new file mode 100644 index 0000000..8c41674 Binary files /dev/null and b/chrome/public/48x48.png differ diff --git a/chrome/public/assets/images/colormap.png b/chrome/public/assets/images/colormap.png new file mode 100644 index 0000000..53c80ef Binary files /dev/null and b/chrome/public/assets/images/colormap.png differ diff --git a/chrome/public/assets/images/google-play-badge.png b/chrome/public/assets/images/google-play-badge.png new file mode 100644 index 0000000..585006b Binary files /dev/null and b/chrome/public/assets/images/google-play-badge.png differ diff --git a/chrome/public/assets/images/huegasm.png b/chrome/public/assets/images/huegasm.png new file mode 100644 index 0000000..6490342 Binary files /dev/null and b/chrome/public/assets/images/huegasm.png differ diff --git a/chrome/public/assets/images/lights/a19.svg b/chrome/public/assets/images/lights/a19.svg new file mode 100644 index 0000000..cf3eee3 --- /dev/null +++ b/chrome/public/assets/images/lights/a19.svg @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/chrome/public/assets/images/lights/a19w.svg b/chrome/public/assets/images/lights/a19w.svg new file mode 100644 index 0000000..b05e873 --- /dev/null +++ b/chrome/public/assets/images/lights/a19w.svg @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/chrome/public/assets/images/lights/br30.svg b/chrome/public/assets/images/lights/br30.svg new file mode 100644 index 0000000..7d71208 --- /dev/null +++ b/chrome/public/assets/images/lights/br30.svg @@ -0,0 +1,48 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/chrome/public/assets/images/lights/br30w.svg b/chrome/public/assets/images/lights/br30w.svg new file mode 100644 index 0000000..ba1585a --- /dev/null +++ b/chrome/public/assets/images/lights/br30w.svg @@ -0,0 +1,48 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/chrome/public/assets/images/lights/gu10.svg b/chrome/public/assets/images/lights/gu10.svg new file mode 100644 index 0000000..014d2f5 --- /dev/null +++ b/chrome/public/assets/images/lights/gu10.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + diff --git a/chrome/public/assets/images/lights/gu10w.svg b/chrome/public/assets/images/lights/gu10w.svg new file mode 100644 index 0000000..1ea01cb --- /dev/null +++ b/chrome/public/assets/images/lights/gu10w.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + diff --git a/chrome/public/assets/images/lights/huego.svg b/chrome/public/assets/images/lights/huego.svg new file mode 100644 index 0000000..e912e5a --- /dev/null +++ b/chrome/public/assets/images/lights/huego.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + diff --git a/chrome/public/assets/images/lights/huegow.svg b/chrome/public/assets/images/lights/huegow.svg new file mode 100644 index 0000000..b3b0b88 --- /dev/null +++ b/chrome/public/assets/images/lights/huegow.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + diff --git a/chrome/public/assets/images/lights/lc_aura.svg b/chrome/public/assets/images/lights/lc_aura.svg new file mode 100644 index 0000000..9faf3b9 --- /dev/null +++ b/chrome/public/assets/images/lights/lc_aura.svg @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + + + + diff --git a/chrome/public/assets/images/lights/lc_auraw.svg b/chrome/public/assets/images/lights/lc_auraw.svg new file mode 100644 index 0000000..c125947 --- /dev/null +++ b/chrome/public/assets/images/lights/lc_auraw.svg @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + + + + diff --git a/chrome/public/assets/images/lights/lc_bloom.svg b/chrome/public/assets/images/lights/lc_bloom.svg new file mode 100644 index 0000000..a498b9a --- /dev/null +++ b/chrome/public/assets/images/lights/lc_bloom.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + + + + diff --git a/chrome/public/assets/images/lights/lc_bloomw.svg b/chrome/public/assets/images/lights/lc_bloomw.svg new file mode 100644 index 0000000..3dce9f7 --- /dev/null +++ b/chrome/public/assets/images/lights/lc_bloomw.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + + + + diff --git a/chrome/public/assets/images/lights/lc_iris.svg b/chrome/public/assets/images/lights/lc_iris.svg new file mode 100644 index 0000000..876b3d2 --- /dev/null +++ b/chrome/public/assets/images/lights/lc_iris.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + diff --git a/chrome/public/assets/images/lights/lc_irisw.svg b/chrome/public/assets/images/lights/lc_irisw.svg new file mode 100644 index 0000000..cdf472b --- /dev/null +++ b/chrome/public/assets/images/lights/lc_irisw.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + diff --git a/chrome/public/assets/images/lights/lightstrip.svg b/chrome/public/assets/images/lights/lightstrip.svg new file mode 100644 index 0000000..1d55b8e --- /dev/null +++ b/chrome/public/assets/images/lights/lightstrip.svg @@ -0,0 +1,45 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/chrome/public/assets/images/lights/lightstripw.svg b/chrome/public/assets/images/lights/lightstripw.svg new file mode 100644 index 0000000..fb32dab --- /dev/null +++ b/chrome/public/assets/images/lights/lightstripw.svg @@ -0,0 +1,45 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/chrome/public/assets/images/lights/storylight.svg b/chrome/public/assets/images/lights/storylight.svg new file mode 100644 index 0000000..d04a5db --- /dev/null +++ b/chrome/public/assets/images/lights/storylight.svg @@ -0,0 +1,42 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/chrome/public/assets/images/lights/storylightw.svg b/chrome/public/assets/images/lights/storylightw.svg new file mode 100644 index 0000000..8bc66a5 --- /dev/null +++ b/chrome/public/assets/images/lights/storylightw.svg @@ -0,0 +1,42 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/chrome/public/assets/images/logo.png b/chrome/public/assets/images/logo.png new file mode 100644 index 0000000..e384e77 Binary files /dev/null and b/chrome/public/assets/images/logo.png differ diff --git a/chrome/public/assets/images/missingArtwork.png b/chrome/public/assets/images/missingArtwork.png new file mode 100644 index 0000000..3cf2548 Binary files /dev/null and b/chrome/public/assets/images/missingArtwork.png differ diff --git a/chrome/public/assets/images/pressButtonBridge.png b/chrome/public/assets/images/pressButtonBridge.png new file mode 100644 index 0000000..e98ac23 Binary files /dev/null and b/chrome/public/assets/images/pressButtonBridge.png differ diff --git a/chrome/public/assets/images/sc-white-sm.png b/chrome/public/assets/images/sc-white-sm.png new file mode 100644 index 0000000..4c009dc Binary files /dev/null and b/chrome/public/assets/images/sc-white-sm.png differ diff --git a/chrome/public/assets/images/sc-white.png b/chrome/public/assets/images/sc-white.png new file mode 100644 index 0000000..e48ae8f Binary files /dev/null and b/chrome/public/assets/images/sc-white.png differ diff --git a/chrome/public/assets/images/soundcloudUrl.png b/chrome/public/assets/images/soundcloudUrl.png new file mode 100644 index 0000000..a2f173d Binary files /dev/null and b/chrome/public/assets/images/soundcloudUrl.png differ diff --git a/chrome/public/manifest.json b/chrome/public/manifest.json new file mode 100644 index 0000000..7eed707 --- /dev/null +++ b/chrome/public/manifest.json @@ -0,0 +1,28 @@ +{ + "manifest_version": 2, + "name": "Huegasm", + "description": "Huegasm is a free web application for managing and synchronizing your Philips Hue lights with the beat of your music.", + "version": "1.0", + "content_security_policy": "script-src https://connect.soundcloud.com 'self'; object-src 'self'", + "icons": { + "16": "16x16.png", + "48": "48x48.png", + "128": "128x128.png" + }, + "background": { + "page": "index.html" + }, + "browser_action": { + "default_icon": { + "16": "16x16.png", + "32": "32x32.png" + }, + "default_popup": "index.html", + "default_title": "Huegasm" + }, + "permissions": [ + "activeTab", + "background", + "https://ajax.googleapis.com/" + ] +} \ No newline at end of file diff --git a/chrome/vendor/dancer.js b/chrome/vendor/dancer.js new file mode 100644 index 0000000..72d2894 --- /dev/null +++ b/chrome/vendor/dancer.js @@ -0,0 +1,709 @@ +/* + * dancer - v0.4.0 - 2014-02-01 + * https://github.com/jsantell/dancer.js + * Copyright (c) 2014 Jordan Santell + * Licensed MIT + */ +(function() { + + var Dancer = function () { + this.audioAdapter = Dancer._getAdapter( this ); + this.events = {}; + this.sections = []; + this.bind( 'update', update ); + }; + + Dancer.version = 'X.X.X'; + Dancer.adapters = {}; + + Dancer.prototype = { + + load : function ( source, micBoost, useMic ) { + // Loading an Audio element + if ( source instanceof HTMLElement ) { + this.source = source; + // Loading an object with src, [codecs] + } else if(source instanceof EventTarget){ + this.source = source; + } else { + this.source = window.Audio ? new Audio() : {}; + this.source.src = Dancer._makeSupportedPath( source.src, source.codecs ); + } + + this.useMic = useMic === true; + this.boost = micBoost ? micBoost : 1; + this.audio = this.audioAdapter.load(this.source, this.useMic, this.boost); + + return this; + }, + + /* Controls */ + play : function () { + this.audioAdapter.play(); + return this; + }, + + pause : function () { + this.audioAdapter.pause(); + return this; + }, + + setVolume : function ( volume ) { + this.audioAdapter.setVolume( volume ); + return this; + }, + + setBoost : function ( boost ) { + this.audioAdapter.setBoost( boost ); + return this; + }, + + /* Actions */ + createKick : function ( options ) { + return new Dancer.Kick( this, options ); + }, + + bind : function ( name, callback ) { + if ( !this.events[ name ] ) { + this.events[ name ] = []; + } + this.events[ name ].push( callback ); + return this; + }, + + unbind : function ( name ) { + if ( this.events[ name ] ) { + delete this.events[ name ]; + } + return this; + }, + + trigger : function ( name ) { + var _this = this; + if ( this.events[ name ] ) { + this.events[ name ].forEach(function( callback ) { + callback.call( _this ); + }); + } + return this; + }, + + + /* Getters */ + + getVolume : function () { + return this.audioAdapter.getVolume(); + }, + + getProgress : function () { + return this.audioAdapter.getProgress(); + }, + + getTime : function () { + return this.audioAdapter.getTime(); + }, + + // Returns the magnitude of a frequency or average over a range of frequencies + getFrequency : function ( freq, endFreq ) { + var sum = 0; + if ( endFreq !== undefined ) { + for ( var i = freq; i <= endFreq; i++ ) { + sum += this.getSpectrum()[ i ]; + } + return sum / ( endFreq - freq + 1 ); + } else { + return this.getSpectrum()[ freq ]; + } + }, + + getWaveform : function () { + return this.audioAdapter.getWaveform(); + }, + + getSpectrum : function () { + return this.audioAdapter.getSpectrum(); + }, + + isLoaded : function () { + return this.audioAdapter.isLoaded; + }, + + isPlaying : function () { + return this.audioAdapter.isPlaying; + }, + + + /* Sections */ + + after : function ( time, callback ) { + var _this = this; + this.sections.push({ + condition : function () { + return _this.getTime() > time; + }, + callback : callback + }); + return this; + }, + + before : function ( time, callback ) { + var _this = this; + this.sections.push({ + condition : function () { + return _this.getTime() < time; + }, + callback : callback + }); + return this; + }, + + between : function ( startTime, endTime, callback ) { + var _this = this; + this.sections.push({ + condition : function () { + return _this.getTime() > startTime && _this.getTime() < endTime; + }, + callback : callback + }); + return this; + }, + + onceAt : function ( time, callback ) { + var + _this = this, + thisSection = null; + this.sections.push({ + condition : function () { + return _this.getTime() > time && !this.called; + }, + callback : function () { + callback.call( this ); + thisSection.called = true; + }, + called : false + }); + // Baking the section in the closure due to callback's this being the dancer instance + thisSection = this.sections[ this.sections.length - 1 ]; + return this; + } + }; + + function update () { + for (var i in this.sections) { + if (this.sections[i].condition && this.sections[i].condition() ) + this.sections[i].callback.call(this); + } + } + + window.Dancer = Dancer; +})(); + +(function ( Dancer ) { + + var CODECS = { + 'mp3' : 'audio/mpeg;', + 'ogg' : 'audio/ogg; codecs="vorbis"', + 'wav' : 'audio/wav; codecs="1"', + 'aac' : 'audio/mp4; codecs="mp4a.40.2"' + }, + audioEl = document.createElement( 'audio' ); + + Dancer.options = {}; + + Dancer.setOptions = function ( o ) { + for ( var option in o ) { + if ( o.hasOwnProperty( option ) ) { + Dancer.options[ option ] = o[ option ]; + } + } + }; + + Dancer.isSupported = function () { + if ( !window.Float32Array || !window.Uint32Array ) { + return null; + } else if ( !isUnsupportedSafari() && ( window.AudioContext || window.webkitAudioContext )) { + return 'webaudio'; + } else { + return ''; + } + }; + + Dancer.canPlay = function ( type ) { + var canPlay = audioEl.canPlayType; + return !!( + type.toLowerCase() === 'mp3' || + audioEl.canPlayType && + audioEl.canPlayType( CODECS[ type.toLowerCase() ] ).replace( /no/, '')); + }; + + Dancer.addPlugin = function ( name, fn ) { + if ( Dancer.prototype[ name ] === undefined ) { + Dancer.prototype[ name ] = fn; + } + }; + + Dancer._makeSupportedPath = function ( source, codecs ) { + if ( !codecs ) { return source; } + + for ( var i = 0; i < codecs.length; i++ ) { + if ( Dancer.canPlay( codecs[ i ] ) ) { + return source + '.' + codecs[ i ]; + } + } + return source; + }; + + Dancer._getAdapter = function ( instance ) { + switch ( Dancer.isSupported() ) { + case 'webaudio': + return new Dancer.adapters.webaudio( instance ); + default: + return null; + } + }; + + Dancer._getMP3SrcFromAudio = function ( audioEl ) { + var sources = audioEl.children; + if ( audioEl.src ) { return audioEl.src; } + for ( var i = sources.length; i--; ) { + if (( sources[ i ].type || '' ).match( /audio\/mpeg/ )) return sources[ i ].src; + } + return null; + }; + + // Browser detection is lame, but Safari 6 has Web Audio API, + // but does not support processing audio from a Media Element Source + // https://gist.github.com/3265344 + function isUnsupportedSafari () { + var + isApple = !!( navigator.vendor || '' ).match( /Apple/ ), + version = navigator.userAgent.match( /Version\/([^ ]*)/ ); + version = version ? parseFloat( version[ 1 ] ) : 0; + return isApple && version <= 6; + } + +})( window.Dancer ); + +(function ( undefined ) { + var Kick = function ( dancer, o ) { + o = o || {}; + this.dancer = dancer; + this.frequency = o.frequency !== undefined ? o.frequency : [ 0, 5 ]; + this.threshold = o.threshold !== undefined ? o.threshold : 0.3; + this.decay = o.decay !== undefined ? o.decay : 0.02; + this.onKick = o.onKick; + this.offKick = o.offKick; + this.isOn = false; + this.currentThreshold = this.threshold; + this.previousMag = 0; + this.canUseRatio = true; + this.canUseRatioHandle = null; + + var _this = this; + this.dancer.bind( 'update', function () { + _this.onUpdate(); + }); + }; + + Kick.prototype = { + on : function () { + this.isOn = true; + return this; + }, + off : function () { + this.isOn = false; + return this; + }, + + set : function ( o ) { + o = o || {}; + this.frequency = o.frequency !== undefined ? o.frequency : this.frequency; + this.threshold = o.threshold !== undefined ? o.threshold : this.threshold; + this.decay = o.decay !== undefined ? o.decay : this.decay; + this.onKick = o.onKick || this.onKick; + this.offKick = o.offKick || this.offKick; + }, + + onUpdate : function () { + if ( !this.isOn ) { return; } + + var magnitude = this.maxAmplitude(this.frequency); + + if (magnitude >= this.currentThreshold && magnitude >= this.threshold) { + this.currentThreshold = magnitude; + this.onKick && this.onKick.call(this.dancer, magnitude); + this.canUseRatio = false; + + if(this.canUseRatioHandle) { + clearTimeout(this.canUseRatioHandle); + this.canUseRatioHandle = null; + } + + var self = this; + this.canUseRatioHandle = setTimeout(function(){ + self.canUseRatio = true; + }, 5000); + } else { + if(magnitude/this.previousMag > this.threshold*5 && magnitude>0.1 && this.canUseRatio) { + this.onKick && this.onKick.call(this.dancer, magnitude, magnitude/this.previousMag); + } else { + this.offKick && this.offKick.call(this.dancer, magnitude); + } + + this.currentThreshold -= this.decay; + this.previousMag = (magnitude > 0) ? magnitude : 0.0001; + } + }, + maxAmplitude : function ( frequency ) { + var max = 0, fft = this.dancer.getSpectrum(); + + // Sloppy array check + if ( !frequency.length ) { + return frequency < fft.length ? + fft[ ~~frequency ] : + null; + } + + for ( var i = frequency[ 0 ], l = frequency[ 1 ]; i <= l; i++ ) { + if ( fft[ i ] > max ) { max = fft[ i ]; } + } + return max; + } + }; + + window.Dancer.Kick = Kick; +})(); + +(function() { + var + SAMPLE_SIZE = 2048, + SAMPLE_RATE = 44100; + + var adapter = function ( dancer ) { + var context; + + if('AudioContext' in window) { + context = new AudioContext(); + } else { + context = new webkitAudioContext(); + } + + this.dancer = dancer; + this.audio = new Audio(); + this.context = context; + }; + + adapter.prototype = { + + load : function (_source, useMic, boost) { + var _this = this; + this.audio = _source; + this.useMic = useMic; + this.boost = boost; + + this.isLoaded = false; + this.progress = 0; + + if(this.proc){ + this.proc.onaudioprocess = null; + delete this.proc; + } + + this.proc = this.context.createScriptProcessor( SAMPLE_SIZE / 2, 1, 1 ); + + this.proc.onaudioprocess = function ( e ) { + _this.update.call( _this, e ); + }; + + this.gain = this.context.createGain(); + + this.fft = new FFT( SAMPLE_SIZE / 2, SAMPLE_RATE, this.boost ); + this.signal = new Float32Array( SAMPLE_SIZE / 2 ); + + if ( this.audio.readyState < 3 ) { + this.audio.addEventListener( 'canplay', function () { + connectContext.call( _this ); + }); + } else { + connectContext.call( _this ); + } + + this.audio.addEventListener( 'progress', function ( e ) { + if ( e.currentTarget.duration && e.currentTarget.duration !== Infinity ) { + _this.progress = e.currentTarget.seekable.end( 0 ) / e.currentTarget.duration; + } + }); + + return this.audio; + }, + + play : function () { + this.audio.play(); + this.isPlaying = true; + }, + + pause : function () { + this.audio.pause(); + this.isPlaying = false; + }, + + setVolume : function ( volume ) { + this.gain.gain.value = volume; + }, + + setBoost : function( boost ){ + if(this.fft){ + this.fft.setBoost(boost); + } + + this.boost = boost; + }, + + getVolume : function () { + return this.gain.gain.value; + }, + + getProgress : function() { + return this.progress; + }, + + getWaveform : function () { + return this.signal; + }, + + getSpectrum : function () { + return this.fft.spectrum; + }, + + getTime : function () { + return this.audio.currentTime; + }, + + update : function ( e ) { + if ((!this.isPlaying || !this.isLoaded) && this.useMic !== true ) return; + + var + buffers = [], + channels = e.inputBuffer.numberOfChannels, + resolution = SAMPLE_SIZE / channels, + sum = function ( prev, curr ) { + return prev[ i ] + curr[ i ]; + }, i; + + for ( i = channels; i--; ) { + buffers.push( e.inputBuffer.getChannelData( i ) ); + } + + for ( i = 0; i < resolution; i++ ) { + this.signal[ i ] = channels > 1 ? + buffers.reduce( sum ) / channels : + buffers[ 0 ][ i ]; + } + + this.fft.forward( this.signal ); + this.dancer.trigger( 'update' ); + } + }; + + function connectContext () { + try { + if(this.useMic){ + this.source = this.context.createMediaStreamSource(this.audio); + } else { + this.source = this.context.createMediaElementSource(this.audio); + } + } catch (err) { + console.info('Dancer: '+ err); + return; + } + + this.source.connect(this.proc); + this.source.connect(this.gain); + this.gain.connect(this.context.destination); + this.proc.connect(this.context.destination); + + this.isLoaded = true; + this.progress = 1; + this.dancer.trigger( 'loaded' ); + } + + Dancer.adapters.webaudio = adapter; + +})(); + + +/* + * DSP.js - a comprehensive digital signal processing library for javascript + * + * Created by Corban Brook on 2010-01-01. + * Copyright 2010 Corban Brook. All rights reserved. + * + */ + +// Fourier Transform Module used by DFT, FFT, RFFT +function FourierTransform(bufferSize, sampleRate, boost) { + this.bufferSize = bufferSize; + this.sampleRate = sampleRate; + this.bandwidth = 2 / bufferSize * sampleRate / 2; + this.boost = boost ? boost : 1; + + this.spectrum = new Float32Array(bufferSize/2); + this.real = new Float32Array(bufferSize); + this.imag = new Float32Array(bufferSize); + + this.peakBand = 0; + this.peak = 0; + + /** + * Calculates the *middle* frequency of an FFT band. + * + * @param {Number} index The index of the FFT band. + * + * @returns The middle frequency in Hz. + */ + this.getBandFrequency = function(index) { + return this.bandwidth * index + this.bandwidth / 2; + }; + + this.setBoost = function(boost){ + this.boost = boost; + }; + + this.calculateSpectrum = function() { + var spectrum = this.spectrum, + real = this.real, + imag = this.imag, + boost = this.boost, + bSi = 2 / this.bufferSize, + sqrt = Math.sqrt, + rval, + ival, + mag; + + for (var i = 0, N = bufferSize/2; i < N; i++) { + rval = real[i]; + ival = imag[i]; + mag = bSi * sqrt(rval * rval + ival * ival); + + if (mag > this.peak) { + this.peakBand = i; + this.peak = mag; + } + + spectrum[i] = mag * boost; + } + }; +} + +/** + * FFT is a class for calculating the Discrete Fourier Transform of a signal + * with the Fast Fourier Transform algorithm. + * + * @param {Number} bufferSize The size of the sample buffer to be computed. Must be power of 2 + * @param {Number} sampleRate The sampleRate of the buffer (eg. 44100) + * @param {Number} boost The coefficient + * + * @constructor + */ +function FFT(bufferSize, sampleRate, boost) { + FourierTransform.call(this, bufferSize, sampleRate, boost); + + this.reverseTable = new Uint32Array(bufferSize); + + var limit = 1; + var bit = bufferSize >> 1; + + var i; + + while (limit < bufferSize) { + for (i = 0; i < limit; i++) { + this.reverseTable[i + limit] = this.reverseTable[i] + bit; + } + + limit = limit << 1; + bit = bit >> 1; + } + + this.sinTable = new Float32Array(bufferSize); + this.cosTable = new Float32Array(bufferSize); + + for (i = 0; i < bufferSize; i++) { + this.sinTable[i] = Math.sin(-Math.PI/i); + this.cosTable[i] = Math.cos(-Math.PI/i); + } +} + +/** + * Performs a forward transform on the sample buffer. + * Converts a time domain signal to frequency domain spectra. + * + * @param {Array} buffer The sample buffer. Buffer Length must be power of 2 + * + * @returns The frequency spectrum array + */ +FFT.prototype.forward = function(buffer) { + // Locally scope variables for speed up + var bufferSize = this.bufferSize, + cosTable = this.cosTable, + sinTable = this.sinTable, + reverseTable = this.reverseTable, + real = this.real, + imag = this.imag, + spectrum = this.spectrum; + + var k = Math.floor(Math.log(bufferSize) / Math.LN2); + + if (Math.pow(2, k) !== bufferSize) { throw "Invalid buffer size, must be a power of 2."; } + if (bufferSize !== buffer.length) { throw "Supplied buffer is not the same size as defined FFT. FFT Size: " + bufferSize + " Buffer Size: " + buffer.length; } + + var halfSize = 1, + phaseShiftStepReal, + phaseShiftStepImag, + currentPhaseShiftReal, + currentPhaseShiftImag, + off, + tr, + ti, + tmpReal, + i; + + for (i = 0; i < bufferSize; i++) { + real[i] = buffer[reverseTable[i]]; + imag[i] = 0; + } + + while (halfSize < bufferSize) { + //phaseShiftStepReal = Math.cos(-Math.PI/halfSize); + //phaseShiftStepImag = Math.sin(-Math.PI/halfSize); + phaseShiftStepReal = cosTable[halfSize]; + phaseShiftStepImag = sinTable[halfSize]; + + currentPhaseShiftReal = 1; + currentPhaseShiftImag = 0; + + for (var fftStep = 0; fftStep < halfSize; fftStep++) { + i = fftStep; + + while (i < bufferSize) { + off = i + halfSize; + tr = (currentPhaseShiftReal * real[off]) - (currentPhaseShiftImag * imag[off]); + ti = (currentPhaseShiftReal * imag[off]) + (currentPhaseShiftImag * real[off]); + + real[off] = real[i] - tr; + imag[off] = imag[i] - ti; + real[i] += tr; + imag[i] += ti; + + i += halfSize << 1; + } + + tmpReal = currentPhaseShiftReal; + currentPhaseShiftReal = (tmpReal * phaseShiftStepReal) - (currentPhaseShiftImag * phaseShiftStepImag); + currentPhaseShiftImag = (tmpReal * phaseShiftStepImag) + (currentPhaseShiftImag * phaseShiftStepReal); + } + + halfSize = halfSize << 1; + } + + return this.calculateSpectrum(); +}; diff --git a/mobile/package.json b/mobile/package.json index d6befd4..4160019 100644 --- a/mobile/package.json +++ b/mobile/package.json @@ -11,7 +11,6 @@ "start": "ember server", "build": "ember cordova:build --platform=android --environment=production --release", "build-test": "ember cordova:build --platform=android", - "test": "ember test", "cordova": "ember cdv:serve --platform=android" }, "engines": { diff --git a/web/package.json b/web/package.json index 27a1c00..7e5d052 100644 --- a/web/package.json +++ b/web/package.json @@ -9,8 +9,7 @@ }, "scripts": { "start": "ember server", - "build": "ember build --env=production", - "test": "ember test" + "build": "ember build --env=production" }, "engines": { "node": ">= 0.12.0"