From b962611d670ec88e5d97966090234b47d5e14673 Mon Sep 17 00:00:00 2001 From: Egor Date: Tue, 13 Oct 2015 09:35:53 -0700 Subject: [PATCH] filtered beats, much better 'beat interval' slider, linking to artist's url --- app/pods/components/music-tab/component.js | 79 ++++++++++--------- .../components/music-tab/mixins/music-tab.js | 26 +++--- app/pods/components/music-tab/template.hbs | 26 +++--- app/styles/app.scss | 2 +- bower.json | 5 +- ember-cli-build.js | 2 + 6 files changed, 75 insertions(+), 65 deletions(-) diff --git a/app/pods/components/music-tab/component.js b/app/pods/components/music-tab/component.js index dad3243..f1af9fd 100644 --- a/app/pods/components/music-tab/component.js +++ b/app/pods/components/music-tab/component.js @@ -16,6 +16,9 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, { }.observes('active'), actions: { + gotoURL(URL){ + window.open(URL, '_blank'); + }, handleNewSoundCloudURL(URL){ SC.resolve(URL).then((resultObj)=>{ var processResult = (result)=>{ @@ -117,10 +120,10 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, { defaultControls(){ var beatOptions = this.get('beatOptions'); - this.changePlayerControl('threshold', beatOptions.threshold.defaultValue, true, true); - this.changePlayerControl('decay', beatOptions.decay.defaultValue, true, true); - this.changePlayerControl('frequency', beatOptions.frequency.defaultValue, true, true); - this.changePlayerControl('transitionTime', beatOptions.transitionTime.defaultValue, true, true); + this.changePlayerControl('threshold', beatOptions.threshold.defaultValue); + this.changePlayerControl('interval', beatOptions.interval.defaultValue); + this.changePlayerControl('frequency', beatOptions.frequency.defaultValue); + this.changePlayerControl('transitionTime', beatOptions.transitionTime.defaultValue); }, playerAreaPlay(){ if(Em.isEmpty(Em.$('#playerControls:hover')) && this.get('playQueuePointer') !== -1 ){ @@ -245,17 +248,17 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, { repeatChanged(value) { this.changePlayerControl('repeat', Em.isNone(value) ? (this.get('repeat') + 1) % 3 : value); }, - thresholdChanged(value) { - this.changePlayerControl('threshold', value, true); - }, transitionTimeChanged(value) { this.changePlayerControl('transitionTime', value); }, playerBottomDisplayedChanged(value) { this.changePlayerControl('playerBottomDisplayed', value); }, - decayChanged(value){ - this.changePlayerControl('decay', value, true); + thresholdChanged(value) { + this.changePlayerControl('threshold', value, true); + }, + intervalChanged(value){ + this.changePlayerControl('interval', value, true); }, frequencyChanged(value){ this.changePlayerControl('frequency', value, true); @@ -314,20 +317,17 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, { } }, - changePlayerControl(name, value, isOption, skipSaveBeatPrefs){ + changePlayerControl(name, value, saveBeatPrefs){ this.set(name, value); - if(isOption){ + if(saveBeatPrefs && this.get('usingLocalAudio') && this.get('playQueuePointer') !== -1){ + this.saveSongBeatPreferences(); + } + + if(name === 'frequency'){ var options = {}; options[name] = value; - if(this.get('usingLocalAudio') && this.get('playQueuePointer') !== -1 && skipSaveBeatPrefs !== true) { - this.saveSongBeatPreferences(); - } - - // filter the threshold manually - if(name !== 'threshold'){ - this.get('kick').set(options); - } + this.get('kick').set(options); } this.get('storage').set('huegasm.' + name, value); @@ -345,7 +345,7 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, { title = Em.isEmpty(song.artist) ? song.filename : song.artist + '-' + song.title, songBeatPreferences = this.get('songBeatPreferences'); - songBeatPreferences[title] = {threshold: this.get('threshold'), decay: this.get('decay'), frequency: this.get('frequency') }; + songBeatPreferences[title] = {threshold: this.get('threshold'), interval: this.get('interval'), frequency: this.get('frequency') }; this.set('usingBeatPreferences', true); this.get('storage').set('huegasm.songBeatPreferences', songBeatPreferences, { compress: true }); @@ -360,16 +360,16 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, { newOldBeatPrefCache = null; if(!Em.isNone(preference)) { // load existing beat prefs - newOldBeatPrefCache = {threshold: this.get('threshold'), decay: this.get('decay'), frequency: this.get('frequency') }; + newOldBeatPrefCache = {threshold: this.get('threshold'), interval: this.get('interval'), frequency: this.get('frequency') }; - this.changePlayerControl('threshold', preference.threshold, true, true); - this.changePlayerControl('decay', preference.decay, true, true); - this.changePlayerControl('frequency', preference.frequency, true, true); + this.changePlayerControl('threshold', preference.threshold); + this.changePlayerControl('interval', preference.interval); + this.changePlayerControl('frequency', preference.frequency); this.set('usingBeatPreferences', true); } else if(!Em.isNone(oldBeatPrefCache)) { // revert to using beat prefs before the remembered song - this.changePlayerControl('threshold', oldBeatPrefCache.threshold, true, true); - this.changePlayerControl('decay', oldBeatPrefCache.decay, true, true); - this.changePlayerControl('frequency', oldBeatPrefCache.frequency, true, true); + this.changePlayerControl('threshold', oldBeatPrefCache.threshold); + this.changePlayerControl('interval', oldBeatPrefCache.interval); + this.changePlayerControl('frequency', oldBeatPrefCache.frequency); this.set('usingBeatPreferences', false); } @@ -465,7 +465,8 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, { }, simulateKick(mag) { - var validBeat = (this.get('threshold') < mag); + var validBeat = (this.get('threshold') < mag), + beatInterval = this.get('interval'); if(validBeat){ var activeLights = this.get('activeLights'), @@ -515,15 +516,16 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, { stimulateLight(light, 254, color); setTimeout(stimulateLight, transitionTime + 50, light, 1); - - this.set('paused', true); - - setTimeout(function () { - self.set('paused', false); - }, 150); } } + if(beatInterval > 0 && validBeat){ + this.set('paused', true); + setTimeout(() => { + this.set('paused', false); + }, beatInterval * 1000); + } + //work the music beat area if(this.get('speakerViewed')){ if(validBeat){ @@ -537,7 +539,10 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, { maxSize = this.get('maxBeatHistorySize'), html = 'Beat intesity of ' + mag.toFixed(3) + ' at ' + this.get('timeElapsedTxt') + ''; - if(!validBeat && debugFiltered){ + if(!validBeat){ + if(!debugFiltered){ + return; + } html = '' + html + ' ( filtered ) '; } beatHistory.unshiftObjects(html); @@ -554,11 +559,9 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, { var dancer = new Dancer(), storage = new window.Locally.Store(), self = this, - decay = this.get('decay'), frequency = this.get('frequency'), kick = dancer.createKick({ threshold: this.beatOptions.threshold.range.min, - decay: decay, frequency: frequency, onKick: function (mag) { if (self.get('paused') === false) { @@ -601,7 +604,7 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, { this.set('usingMicSupported', false); } - ['volume', 'shuffle', 'repeat', 'volumeMuted', 'threshold', 'decay', 'frequency', 'speakerViewed', 'transitionTime', 'randomTransition', 'playerBottomDisplayed', 'onBeatBriAndColor', 'audioMode', 'dimmerEnabled', 'songBeatPreferences'].forEach(function (item) { + ['volume', 'shuffle', 'repeat', 'volumeMuted', 'threshold', 'interval', 'frequency', 'speakerViewed', 'transitionTime', 'randomTransition', 'playerBottomDisplayed', 'onBeatBriAndColor', 'audioMode', 'dimmerEnabled', 'songBeatPreferences', 'debugFiltered'].forEach(function (item) { if (!Em.isNone(storage.get('huegasm.' + item))) { var itemVal = storage.get('huegasm.' + item); diff --git a/app/pods/components/music-tab/mixins/music-tab.js b/app/pods/components/music-tab/mixins/music-tab.js index 4287361..f1350dc 100644 --- a/app/pods/components/music-tab/mixins/music-tab.js +++ b/app/pods/components/music-tab/mixins/music-tab.js @@ -20,10 +20,10 @@ export default Em.Mixin.create({ } } }, - decay: { - range: {min: 0, max: 0.1}, + interval: { + range: {min: 0, max: 0.5}, step: 0.01, - defaultValue: 0.02, + defaultValue: 0.15, pips: { mode: 'positions', values: [0,20,40,60,80,100], @@ -66,13 +66,13 @@ export default Em.Mixin.create({ transitionTime: 0.1, threshold: 0.3, - decay: 0.02, + interval: 0.15, frequency: [0,4], playQueuePointer: -1, playQueue: Em.A(), beatHistory: Em.A(), - maxBeatHistorySize: 100, + maxBeatHistorySize: 200, timeElapsed: 0, timeTotal: 0, lastLightBopIndex: 0, @@ -136,16 +136,23 @@ export default Em.Mixin.create({ }.property('playing'), speakerViewed: true, - debugFiltered: true, + debugFiltered: false, speakerLabel: function() { + this.get('storage').set('huegasm.speakerViewed', this.get('speakerViewed')); + if(this.get('speakerViewed')){ + this.get('beatHistory').clear(); return 'Speaker View'; } else { return 'Debug View'; } }.property('speakerViewed'), debugFilteredText: function(){ - if(this.get('debugFiltered')){ + var debugFiltered = this.get('debugFiltered'); + this.get('storage').set('huegasm.debugFiltered', debugFiltered); + Em.$('#beatHistory .filterBeat').css('display', debugFiltered === true ? 'inline' : 'none'); + + if(debugFiltered){ return 'View Filtered'; } else { return 'Hide Filtered'; @@ -280,11 +287,6 @@ export default Em.Mixin.create({ }); }.observes('dimmerOn'), - onSpeakerViewedChange: function(){ - this.get('storage').set('huegasm.speakerViewed', this.get('speakerViewed')); - this.get('beatHistory').clear(); - }.observes('speakerViewed'), - onOptionChange: function(self, option){ this.get('storage').set('huegasm.' + option, this.get(option)); }.observes('randomTransition', 'onBeatBriAndColor'), diff --git a/app/pods/components/music-tab/template.hbs b/app/pods/components/music-tab/template.hbs index be9d33d..3290aa8 100644 --- a/app/pods/components/music-tab/template.hbs +++ b/app/pods/components/music-tab/template.hbs @@ -73,7 +73,12 @@ class="playlistItem cursorPointer {{if (eq index playQueuePointer) "active"}} {{if dragging "hidden"}}" {{action "goToSong" index true bubbles=false}}> {{#if item.title}} {{item.title}} -
{{item.artist}}
+ {{#if item.artistUrl}} +
{{item.artist}}
 + {{else}} +
{{item.artist}}
+ {{/if}} + {{else}} {{item.filename}} {{/if}} @@ -102,31 +107,28 @@ {{/if}}
-
+
{{threshold}}
{{range-slider start=threshold orientation="vertical" step=beatOptions.threshold.step range=beatOptions.threshold.range slide="thresholdChanged" pips=beatOptions.threshold.pips}} - Treshold + Beat Threshold
-{{!--
-
{{decay}}
- {{range-slider start=decay orientation="vertical" step=beatOptions.decay.step range=beatOptions.decay.range slide="decayChanged" pips=beatOptions.decay.pips}} - Decay Rate +
{{interval}} sec
+ {{range-slider start=interval orientation="vertical" step=beatOptions.interval.step range=beatOptions.interval.range slide="intervalChanged" pips=beatOptions.interval.pips}} + Beat Interval
-{{/if}} - --}} -
+
[{{#each frequency as |item index|}}{{item}}{{#unless index}} ,{{/unless}}{{/each}} ]
{{range-slider start=frequency orientation="vertical" step=beatOptions.frequency.step range=beatOptions.frequency.range connect=true slide="frequencyChanged" pips=beatOptions.frequency.pips}} - Frequency Range + Frequency Range
-
+
{{transitionTime}} sec
{{range-slider start=transitionTime orientation="vertical" step=beatOptions.transitionTime.step range=beatOptions.transitionTime.range slide="transitionTimeChanged" pips=beatOptions.transitionTime.pips}} Transition Time diff --git a/app/styles/app.scss b/app/styles/app.scss index 18cfce4..9d4ab04 100644 --- a/app/styles/app.scss +++ b/app/styles/app.scss @@ -746,7 +746,7 @@ md-switch.md-default-theme.md-checked .md-thumb { height: 85%; background-color: white; border-radius: 10px; - width: 300px; + width: 290px; margin: 40px auto 0 auto; overflow: auto; padding: 10px; diff --git a/bower.json b/bower.json index 67470a9..6c62092 100644 --- a/bower.json +++ b/bower.json @@ -10,7 +10,9 @@ "ember-qunit": "0.4.9", "ember-qunit-notifications": "0.0.7", "ember-resolver": "~0.1.18", + "font-awesome": "~4.4.0", "hammerjs": "~2.0.4", + "intro.js": "~1.1.1", "JavaScript-ID3-Reader": "https://github.com/aadsm/JavaScript-ID3-Reader.git", "jquery": "~2.1.4", "jquery-mousewheel": "~3.1.13", @@ -19,8 +21,7 @@ "matchMedia": "~0.2.0", "nouislider": "^8.0.1", "qunit": "~1.18.0", - "three.js": "~0.72.0", - "font-awesome": "~4.4.0" + "three.js": "~0.72.0" }, "resolutions": { "ember": "~2.1.0", diff --git a/ember-cli-build.js b/ember-cli-build.js index f4273a1..a80d3fb 100644 --- a/ember-cli-build.js +++ b/ember-cli-build.js @@ -15,6 +15,8 @@ module.exports = function(defaults) { app.import('bower_components/jquery-mousewheel/jquery.mousewheel.js'); app.import('bower_components/three.js/three.js'); app.import('bower_components/locallyjs/dist/locally.min.js'); + app.import('bower_components/intro.js/intro.js'); + app.import('bower_components/intro.js/introjs.css'); // Use `app.import` to add additional libraries to the generated // output files.