styling changes, WIP chrome extension
This commit is contained in:
parent
34c6b56b60
commit
269cd57f02
31 changed files with 1372 additions and 1331 deletions
|
|
@ -10,7 +10,7 @@
|
||||||
<meta name="author" content="Egor Philippov">
|
<meta name="author" content="Egor Philippov">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1"> {{content-for 'head'}}
|
<meta name="viewport" content="width=device-width, initial-scale=1"> {{content-for 'head'}}
|
||||||
|
|
||||||
<link href='//fonts.googleapis.com/css?family=Slabo+27px|Open+Sans' rel='stylesheet' type='text/css'>
|
<link href='https://fonts.googleapis.com/css?family=Open+Sans|Raleway' rel='stylesheet' type='text/css'>
|
||||||
|
|
||||||
<link rel="stylesheet" integrity="" href="{{rootURL}}assets/vendor.css">
|
<link rel="stylesheet" integrity="" href="{{rootURL}}assets/vendor.css">
|
||||||
<link rel="stylesheet" integrity="" href="{{rootURL}}assets/huegasm.css"> {{content-for 'head-footer'}}
|
<link rel="stylesheet" integrity="" href="{{rootURL}}assets/huegasm.css"> {{content-for 'head-footer'}}
|
||||||
|
|
|
||||||
|
|
@ -59,23 +59,25 @@ export default Component.extend({
|
||||||
.done((result, status) => {
|
.done((result, status) => {
|
||||||
let bridgeFindStatus = 'fail';
|
let bridgeFindStatus = 'fail';
|
||||||
|
|
||||||
if (status === 'success' && result.length === 1) {
|
if (!this.isDestroyed) {
|
||||||
this.set('bridgeIp', result[0].internalipaddress);
|
if (status === 'success' && result.length === 1) {
|
||||||
chrome.storage.local.set({ 'bridgeIp': result[0].internalipaddress });
|
this.set('bridgeIp', result[0].internalipaddress);
|
||||||
bridgeFindStatus = 'success';
|
chrome.storage.local.set({ 'bridgeIp': result[0].internalipaddress });
|
||||||
} else if (result.length > 1) {
|
bridgeFindStatus = 'success';
|
||||||
let multipleBridgeIps = this.get('multipleBridgeIps');
|
} else if (result.length > 1) {
|
||||||
|
let multipleBridgeIps = this.get('multipleBridgeIps');
|
||||||
|
|
||||||
result.forEach(function (item) {
|
result.forEach(function (item) {
|
||||||
multipleBridgeIps.pushObject(item.internalipaddress);
|
multipleBridgeIps.pushObject(item.internalipaddress);
|
||||||
});
|
});
|
||||||
|
|
||||||
bridgeFindStatus = 'multiple';
|
bridgeFindStatus = 'multiple';
|
||||||
} else {
|
} else {
|
||||||
bridgeFindStatus = 'fail';
|
bridgeFindStatus = 'fail';
|
||||||
|
}
|
||||||
|
|
||||||
|
this.set('bridgeFindStatus', bridgeFindStatus);
|
||||||
}
|
}
|
||||||
|
|
||||||
this.set('bridgeFindStatus', bridgeFindStatus);
|
|
||||||
})
|
})
|
||||||
.fail(() => {
|
.fail(() => {
|
||||||
this.set('bridgeFindStatus', 'fail');
|
this.set('bridgeFindStatus', 'fail');
|
||||||
|
|
@ -99,7 +101,6 @@ export default Component.extend({
|
||||||
|
|
||||||
if (status === 'success' && !result[0].error) {
|
if (status === 'success' && !result[0].error) {
|
||||||
this.clearBridgePingIntervalHandle();
|
this.clearBridgePingIntervalHandle();
|
||||||
debugger;
|
|
||||||
chrome.storage.local.set({ 'bridgeUsername': result[0].success.username });
|
chrome.storage.local.set({ 'bridgeUsername': result[0].success.username });
|
||||||
this.set('bridgeUsername', result[0].success.username);
|
this.set('bridgeUsername', result[0].success.username);
|
||||||
}
|
}
|
||||||
|
|
@ -114,7 +115,9 @@ export default Component.extend({
|
||||||
|
|
||||||
clearBridgePingIntervalHandle() {
|
clearBridgePingIntervalHandle() {
|
||||||
clearInterval(this.get('bridgePingIntervalHandle'));
|
clearInterval(this.get('bridgePingIntervalHandle'));
|
||||||
this.set('bridgePingIntervalHandle', null);
|
if (!this.isDestroyed) {
|
||||||
|
this.set('bridgePingIntervalHandle', null);
|
||||||
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
actions: {
|
actions: {
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,7 @@
|
||||||
{{#if isAuthenticating}}
|
{{#if isAuthenticating}}
|
||||||
<p>
|
<p>
|
||||||
Your bridge IP is <b>{{bridgeIp}}</b>
|
Your bridge IP is <b>{{bridgeIp}}</b>
|
||||||
<br> Press the button on your bridge to authenticate this application.
|
<br> Press the button on your bridge to authenticate Huegasm.
|
||||||
</p>
|
</p>
|
||||||
{{else}}
|
{{else}}
|
||||||
<p>You failed to press the button in time. <a class="no-text-decoration" href="#" {{action 'retry'}}>RETRY</a></p>
|
<p>You failed to press the button in time. <a class="no-text-decoration" href="#" {{action 'retry'}}>RETRY</a></p>
|
||||||
|
|
@ -18,7 +18,7 @@
|
||||||
{{/unless}}
|
{{/unless}}
|
||||||
|
|
||||||
{{#if bridgeFindMultiple}}
|
{{#if bridgeFindMultiple}}
|
||||||
<p>Huegasm found multiple hue bridges. <br> Please select the one you want to use for this application.</p>
|
<p>Huegasm found multiple hue bridges. <br> Please select the one you want to use for Huegasm.</p>
|
||||||
|
|
||||||
<div id="bridge-button-group">
|
<div id="bridge-button-group">
|
||||||
{{#each multipleBridgeIps as |bridge|}}
|
{{#each multipleBridgeIps as |bridge|}}
|
||||||
|
|
|
||||||
|
|
@ -8,7 +8,7 @@ const {
|
||||||
isNone,
|
isNone,
|
||||||
$,
|
$,
|
||||||
inject: { service },
|
inject: { service },
|
||||||
run: { later, next }
|
run: { later, next, once }
|
||||||
} = Ember;
|
} = Ember;
|
||||||
|
|
||||||
export default Component.extend({
|
export default Component.extend({
|
||||||
|
|
@ -16,8 +16,6 @@ export default Component.extend({
|
||||||
classNameBindings: ['active::hidden'],
|
classNameBindings: ['active::hidden'],
|
||||||
elementId: 'music-tab',
|
elementId: 'music-tab',
|
||||||
|
|
||||||
dancer: null,
|
|
||||||
|
|
||||||
notify: service(),
|
notify: service(),
|
||||||
|
|
||||||
beatOptions: {
|
beatOptions: {
|
||||||
|
|
@ -32,11 +30,11 @@ export default Component.extend({
|
||||||
format: {
|
format: {
|
||||||
to: function (value) {
|
to: function (value) {
|
||||||
if (value === 0) {
|
if (value === 0) {
|
||||||
value = 'More';
|
value = 'High';
|
||||||
} else if (value === 0.25) {
|
} else if (value === 0.25) {
|
||||||
value = '';
|
value = '';
|
||||||
} else {
|
} else {
|
||||||
value = 'Less';
|
value = 'Low';
|
||||||
}
|
}
|
||||||
|
|
||||||
return value;
|
return value;
|
||||||
|
|
@ -75,10 +73,22 @@ export default Component.extend({
|
||||||
defaultValue: 0,
|
defaultValue: 0,
|
||||||
pips: {
|
pips: {
|
||||||
mode: 'values',
|
mode: 'values',
|
||||||
values: [1, 50, 100, 150, 200, 254],
|
values: [1, 63, 127, 190, 254],
|
||||||
density: 10,
|
density: 10,
|
||||||
format: {
|
format: {
|
||||||
to: function (value) { return value; },
|
to: function (value) {
|
||||||
|
if (value === 63) {
|
||||||
|
value = 25;
|
||||||
|
} else if (value === 127) {
|
||||||
|
value = 50;
|
||||||
|
} else if (value === 190) {
|
||||||
|
value = 75;
|
||||||
|
} else if (value === 254) {
|
||||||
|
value = 100;
|
||||||
|
}
|
||||||
|
|
||||||
|
return value;
|
||||||
|
},
|
||||||
from: function (value) { return value; }
|
from: function (value) { return value; }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -88,46 +98,48 @@ export default Component.extend({
|
||||||
threshold: 0.3,
|
threshold: 0.3,
|
||||||
hueRange: [0, 65535],
|
hueRange: [0, 65535],
|
||||||
brightnessRange: [1, 254],
|
brightnessRange: [1, 254],
|
||||||
oldThreshold: null,
|
|
||||||
|
|
||||||
lastLightBopIndex: 0,
|
lastLightBopIndex: 0,
|
||||||
|
|
||||||
playerBottomDisplayed: true,
|
|
||||||
audioStream: null,
|
|
||||||
dimmerOn: false,
|
|
||||||
|
|
||||||
colorloopMode: false,
|
colorloopMode: false,
|
||||||
flashingTransitions: 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,
|
|
||||||
songBeatPreferences: {},
|
songBeatPreferences: {},
|
||||||
usingBeatPreferences: false,
|
usingBeatPreferences: false,
|
||||||
oldBeatPrefCache: null,
|
oldBeatPrefCache: null,
|
||||||
firstVisit: true,
|
isListenining: false,
|
||||||
|
|
||||||
// noUiSlider connection specification
|
// noUiSlider connection specification
|
||||||
filledConnect: [true, false],
|
filledConnect: [true, false],
|
||||||
hueRangeConnect: [false, true, false],
|
hueRangeConnect: [false, true, false],
|
||||||
|
|
||||||
changePlayerControl(name, value) {
|
onConfigItemChanged: observer('threshold', 'flashingTransitions', 'colorloopMode', 'hueRange', 'brightnessRange', 'isListenining', function (wtf, name) {
|
||||||
this.set(name, value);
|
once(this, () => {
|
||||||
|
let value = this.get(name),
|
||||||
|
self = this;
|
||||||
|
|
||||||
if (name === 'threshold') {
|
this.set(name, value);
|
||||||
this.get('kick').set({ threshold: value });
|
|
||||||
}
|
|
||||||
|
|
||||||
let toSave = {};
|
if (name === 'isListenining' && value) {
|
||||||
toSave[name] = value;
|
chrome.runtime.sendMessage({ action: 'start-listening' }, function (response) {
|
||||||
chrome.storage.local.set(toSave);
|
if (response && response.error) {
|
||||||
},
|
self.get('notify').warning({ html: '<div class="alert alert-warning" role="alert">' + response.error + '</div>' });
|
||||||
|
|
||||||
|
self.set('isListenining', false);
|
||||||
|
chrome.storage.local.set({ isListenining: false });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
let toSave = {};
|
||||||
|
toSave[name] = value;
|
||||||
|
chrome.storage.local.set(toSave);
|
||||||
|
});
|
||||||
|
}),
|
||||||
|
|
||||||
|
simulateKick() {
|
||||||
|
this.speakerBump();
|
||||||
|
|
||||||
simulateKick(/*mag, ratioKickMag*/) {
|
|
||||||
let activeLights = this.get('activeLights'),
|
let activeLights = this.get('activeLights'),
|
||||||
lightsData = this.get('lightsData'),
|
lightsData = this.get('lightsData'),
|
||||||
color = null,
|
color = null,
|
||||||
|
|
@ -194,8 +206,9 @@ export default Component.extend({
|
||||||
later(this, function () {
|
later(this, function () {
|
||||||
this.set('paused', false);
|
this.set('paused', false);
|
||||||
}, 150);
|
}, 150);
|
||||||
|
},
|
||||||
|
|
||||||
//work the music beat area - simulate the speaker vibration by running a CSS animation on it
|
speakerBump() {
|
||||||
$('#beat-speaker-center-outer').velocity({ blur: 3 }, 100).velocity({ blur: 0 }, 100);
|
$('#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);
|
$('#beat-speaker-center-inner').velocity({ scale: 1.05 }, 100).velocity({ scale: 1 }, 100);
|
||||||
},
|
},
|
||||||
|
|
@ -203,76 +216,59 @@ export default Component.extend({
|
||||||
init() {
|
init() {
|
||||||
this._super(...arguments);
|
this._super(...arguments);
|
||||||
|
|
||||||
window.requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame;
|
chrome.storage.local.get('threshold', ({threshold}) => {
|
||||||
window.cancelAnimationFrame = window.cancelAnimationFrame || window.webkitCancelAnimationFrame || window.mozCancelAnimationFrame || window.msCancelAnimationFrame;
|
if (!isNone(threshold)) {
|
||||||
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
|
this.set('threshold', threshold);
|
||||||
|
}
|
||||||
let dancer = new Dancer(),
|
|
||||||
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
|
|
||||||
});
|
});
|
||||||
|
|
||||||
['threshold', 'playerBottomDisplayed', 'flashingTransitions', 'colorloopMode', 'hueRange', 'brightnessRange'].forEach((item) => {
|
chrome.storage.local.get('flashingTransitions', ({flashingTransitions}) => {
|
||||||
chrome.storage.local.get(item, ({itemVal}) => {
|
if (!isNone(flashingTransitions)) {
|
||||||
if (!isNone(itemVal)) {
|
this.set('flashingTransitions', flashingTransitions);
|
||||||
if (isNone(this.actions[item + 'Changed'])) {
|
}
|
||||||
this.set(item, itemVal);
|
});
|
||||||
} else {
|
|
||||||
this.send(item + 'Changed', itemVal);
|
chrome.storage.local.get('colorloopMode', ({colorloopMode}) => {
|
||||||
}
|
if (!isNone(colorloopMode)) {
|
||||||
}
|
this.set('colorloopMode', colorloopMode);
|
||||||
});
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
chrome.storage.local.get('hueRange', ({hueRange}) => {
|
||||||
|
if (!isNone(hueRange)) {
|
||||||
|
this.set('hueRange', hueRange);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
chrome.storage.local.get('brightnessRange', ({brightnessRange}) => {
|
||||||
|
if (!isNone(brightnessRange)) {
|
||||||
|
this.set('brightnessRange', brightnessRange);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
chrome.storage.local.get('isListenining', ({isListenining}) => {
|
||||||
|
if (!isNone(isListenining)) {
|
||||||
|
this.set('isListenining', isListenining);
|
||||||
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
didInsertElement() {
|
didInsertElement() {
|
||||||
this._super();
|
|
||||||
|
|
||||||
let self = this;
|
|
||||||
|
|
||||||
// prevent space/text selection when the user repeatedly clicks on the center
|
// prevent space/text selection when the user repeatedly clicks on the center
|
||||||
$('#beat-container').on('mousedown', '#beat-speaker-center-inner', function (event) {
|
$('#beat-container').on('mousedown', '#beat-speaker-center-inner', function (event) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
});
|
});
|
||||||
|
|
||||||
if (!this.get('playerBottomDisplayed')) {
|
|
||||||
$('#player-bottom').hide();
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
|
|
||||||
actions: {
|
actions: {
|
||||||
slideTogglePlayerBottom() {
|
toggleListening() {
|
||||||
let elem = this.$('#player-bottom');
|
this.toggleProperty('isListenining');
|
||||||
|
|
||||||
elem.velocity(elem.is(':visible') ? 'slideUp' : 'slideDown', { duration: 300 });
|
|
||||||
this.changePlayerControl('playerBottomDisplayed', !this.get('playerBottomDisplayed'));
|
|
||||||
},
|
|
||||||
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);
|
|
||||||
},
|
},
|
||||||
clickSpeaker() {
|
clickSpeaker() {
|
||||||
this.simulateKick(1);
|
this.simulateKick();
|
||||||
|
},
|
||||||
|
hideTooltip() {
|
||||||
|
$('.bootstrap-tooltip').tooltip('hide');
|
||||||
},
|
},
|
||||||
toggleDimmer() {
|
toggleDimmer() {
|
||||||
this.sendAction('toggleDimmer');
|
this.sendAction('toggleDimmer');
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,8 @@
|
||||||
<div id="slide-toggle" class="text-center pointer row" {{action "slideTogglePlayerBottom"}}>
|
<div id="fancy-button-wrapper">
|
||||||
<div class="col-xs-offset-5 col-xs-2">
|
<a href="#" class="fancy-button note {{if isListenining "active"}}" {{action "toggleListening"}}></a>
|
||||||
{{paper-icon beatDetectionAreaArrowIcon id="beat-detection-area-arrow-icon"}}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="player-bottom" class="row {{if dimmerOn "dimmerOn"}} {{if playerBottomDisplayed "display-flex"}}">
|
<div class="row {{if dimmerOn "dimmerOn"}}">
|
||||||
<div id="beat-area" class="col-sm-7 col-xs-12">
|
<div id="beat-area" class="col-sm-7 col-xs-12">
|
||||||
<div class="row" id="beat-option-row">
|
<div class="row" id="beat-option-row">
|
||||||
<div class="beat-option col-xs-4">
|
<div class="beat-option col-xs-4">
|
||||||
|
|
@ -14,7 +12,7 @@
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
{{range-slider start=hueRange orientation="vertical" step=beatOptions.hueRange.step range=beatOptions.hueRange.range connect=hueRangeConnect
|
{{range-slider start=hueRange orientation="vertical" step=beatOptions.hueRange.step range=beatOptions.hueRange.range connect=hueRangeConnect
|
||||||
on-change="hueRangeChanged" pips=beatOptions.hueRange.pips}}
|
on-change=(action (mut hueRange)) pips=beatOptions.hueRange.pips}}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="beat-option col-xs-4">
|
<div class="beat-option col-xs-4">
|
||||||
|
|
@ -24,7 +22,7 @@
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
{{range-slider start=brightnessRange orientation="vertical" step=beatOptions.brightnessRange.step range=beatOptions.brightnessRange.range
|
{{range-slider start=brightnessRange orientation="vertical" step=beatOptions.brightnessRange.step range=beatOptions.brightnessRange.range
|
||||||
on-change="brightnessRangeChanged" pips=beatOptions.brightnessRange.pips}}
|
on-change=(action (mut brightnessRange)) pips=beatOptions.brightnessRange.pips}}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="sensitivity-settings" class="beat-option col-xs-4">
|
<div id="sensitivity-settings" class="beat-option col-xs-4">
|
||||||
|
|
@ -33,8 +31,8 @@
|
||||||
Sensitivity
|
Sensitivity
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
{{range-slider start=threshold orientation="vertical" step=beatOptions.threshold.step range=beatOptions.threshold.range on-change="thresholdChanged"
|
{{range-slider start=threshold orientation="vertical" step=beatOptions.threshold.step range=beatOptions.threshold.range on-change=(action
|
||||||
pips=beatOptions.threshold.pips}}
|
(mut threshold)) pips=beatOptions.threshold.pips}}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="light-option" class="col-xs-12">
|
<div id="light-option" class="col-xs-12">
|
||||||
|
|
|
||||||
|
|
@ -21,12 +21,11 @@ body {
|
||||||
|
|
||||||
body > .ember-view {
|
body > .ember-view {
|
||||||
display: flex;
|
display: flex;
|
||||||
min-height: 100vh;
|
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
body, button {
|
body, button {
|
||||||
font-family: 'Slabo 27px', serif;
|
font-family: 'Raleway', sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
#huegasm {
|
#huegasm {
|
||||||
|
|
|
||||||
|
|
@ -31,7 +31,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
#bridge-finder {
|
#bridge-finder {
|
||||||
min-height: 500px;
|
|
||||||
.md-bar {
|
.md-bar {
|
||||||
background-color: $secondaryThemeColor !important;
|
background-color: $secondaryThemeColor !important;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,5 @@
|
||||||
#lights-tab {
|
#lights-tab {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin-top: 5vh;
|
|
||||||
.paper-icon {
|
.paper-icon {
|
||||||
line-height: 0.8 !important;
|
line-height: 0.8 !important;
|
||||||
}
|
}
|
||||||
|
|
@ -19,7 +18,6 @@
|
||||||
|
|
||||||
#hue-controls {
|
#hue-controls {
|
||||||
max-width: 1200px;
|
max-width: 1200px;
|
||||||
height: 90vh;
|
|
||||||
md-progress-circular {
|
md-progress-circular {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
|
|
@ -35,7 +33,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
#navigation {
|
#navigation {
|
||||||
padding: 15px 0 4vh;
|
padding: 10px 0 2vh;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
@ -44,13 +42,13 @@
|
||||||
text-align: right;
|
text-align: right;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: -10px;
|
top: -10px;
|
||||||
right: 10px;
|
right: -10px;
|
||||||
transform: scale(1.1);
|
transform: scale(1.1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.navigation-item {
|
.navigation-item {
|
||||||
font-size: 18px;
|
font-size: 20px;
|
||||||
padding: 0 10px 0 10px;
|
padding: 0 10px 0 10px;
|
||||||
&.active {
|
&.active {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
|
|
||||||
|
|
@ -58,7 +58,7 @@
|
||||||
.light-text {
|
.light-text {
|
||||||
width: 60px;
|
width: 60px;
|
||||||
word-wrap: break-word;
|
word-wrap: break-word;
|
||||||
padding: 0 10px;
|
padding: 0 7px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.light-text-content {
|
.light-text-content {
|
||||||
|
|
|
||||||
|
|
@ -8,87 +8,6 @@
|
||||||
margin-bottom: 20px;
|
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-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;
|
|
||||||
}
|
|
||||||
|
|
||||||
#beat-area {
|
#beat-area {
|
||||||
position: relative;
|
position: relative;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
@ -118,9 +37,10 @@
|
||||||
}
|
}
|
||||||
.option-description {
|
.option-description {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
font-size: 20px;
|
font-size: 18px;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
padding: 10px 0;
|
||||||
}
|
}
|
||||||
button {
|
button {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
|
|
@ -155,65 +75,6 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#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;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
#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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.keyboard-arrow-down {
|
|
||||||
font-size: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.visualizers-menu .paper-icon {
|
|
||||||
margin-left: 10px;
|
|
||||||
position: relative;
|
|
||||||
top: -4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.close {
|
.close {
|
||||||
font-size: 18px !important;
|
font-size: 18px !important;
|
||||||
color: rgb(51, 51, 51);
|
color: rgb(51, 51, 51);
|
||||||
|
|
@ -224,36 +85,66 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.ember-notify-default.ember-notify-cn {
|
#fancy-button-wrapper {
|
||||||
top: 0;
|
display: flex;
|
||||||
bottom: initial;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
#soundcloud-logo {
|
.fancy-button {
|
||||||
display: block;
|
background-image: -webkit-linear-gradient(top, #f4f1ee, #fff);
|
||||||
}
|
background-image: linear-gradient(top, #f4f1ee, #fff);
|
||||||
|
border-radius: 50%;
|
||||||
#soundcloud-logo-small {
|
box-shadow: 0px 8px 10px 0px rgba(0, 0, 0, .3), inset 0px 4px 1px 1px white, inset 0px -3px 1px 1px rgba(204,198,197,.5);
|
||||||
display: none;
|
float:left;
|
||||||
}
|
height: 90px;
|
||||||
|
margin: 0 30px 30px 0;
|
||||||
#soundcloud-tutorial {
|
position: relative;
|
||||||
width: 100%;
|
width: 90px;
|
||||||
}
|
-webkit-transition: all .1s linear;
|
||||||
|
transition: all .1s linear;
|
||||||
@media(max-width:1100px) {
|
&:after {
|
||||||
#soundcloud-logo {
|
color:#e9e6e4;
|
||||||
display: none;
|
content: "";
|
||||||
}
|
|
||||||
#soundcloud-logo-small {
|
|
||||||
display: block;
|
display: block;
|
||||||
|
font-size: 50px;
|
||||||
|
height: 30px;
|
||||||
|
text-decoration: none;
|
||||||
|
text-shadow: 0px -1px 1px #bdb5b4, 1px 1px 1px white;
|
||||||
|
position: absolute;
|
||||||
|
width: 30px;
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
background-image: -webkit-linear-gradient(top, #fff, #f4f1ee);
|
||||||
|
background-image: linear-gradient(top, #fff, #f4f1ee);
|
||||||
|
color:#0088cc;
|
||||||
|
}
|
||||||
|
&:active {
|
||||||
|
background-image: -webkit-linear-gradient(top, #efedec, #f7f4f4);
|
||||||
|
background-image: linear-gradient(top, #efedec, #f7f4f4);
|
||||||
|
box-shadow: 0 3px 5px 0 rgba(0,0,0,.4), inset 0px -3px 1px 1px rgba(204,198,197,.5);
|
||||||
|
&:after{
|
||||||
|
color:#dbd2d2;
|
||||||
|
text-shadow: 0px -1px 1px #bdb5b4, 0px 1px 1px white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.note {
|
||||||
|
&.active:after {
|
||||||
|
color: $secondaryThemeColor;
|
||||||
|
}
|
||||||
|
&:after{
|
||||||
|
content: "♪";
|
||||||
|
left: 32px;
|
||||||
|
top: 14px;
|
||||||
|
}
|
||||||
|
&:hover:after {
|
||||||
|
color: $secondaryThemeColor;
|
||||||
|
text-shadow: 0px 0px 6px $secondaryThemeColor;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media(min-width:767px) and (max-width:1200px) {
|
@media(min-width:767px) and (max-width:1200px) {
|
||||||
#add-new-music-label {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
#play-list-controls .paper-button {
|
#play-list-controls .paper-button {
|
||||||
border: 1px solid $whitish;
|
border: 1px solid $whitish;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
|
|
@ -289,10 +180,6 @@
|
||||||
.close {
|
.close {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
#save-beat-preferences-star {
|
|
||||||
right: 5px;
|
|
||||||
left: initial;
|
|
||||||
}
|
|
||||||
md-checkbox {
|
md-checkbox {
|
||||||
padding-right: 20px !important;
|
padding-right: 20px !important;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -18,6 +18,7 @@ md-checkbox .md-label {
|
||||||
}
|
}
|
||||||
|
|
||||||
.md-button {
|
.md-button {
|
||||||
|
font-size: 13px;
|
||||||
flex-direction: unset;
|
flex-direction: unset;
|
||||||
span {
|
span {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
@ -62,7 +63,7 @@ md-switch.md-default-theme.md-checked .md-thumb {
|
||||||
}
|
}
|
||||||
|
|
||||||
md-list-item {
|
md-list-item {
|
||||||
margin-bottom: 2vh;
|
margin-bottom: 1vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media(max-width:500px) {
|
@media(max-width:500px) {
|
||||||
|
|
|
||||||
|
|
@ -14,8 +14,6 @@ module.exports = function (defaults) {
|
||||||
destDir: '/fonts/bootstrap'
|
destDir: '/fonts/bootstrap'
|
||||||
});
|
});
|
||||||
|
|
||||||
app.import('vendor/dancer.js');
|
|
||||||
|
|
||||||
app.import('bower_components/bootstrap-sass/assets/javascripts/bootstrap/tooltip.js');
|
app.import('bower_components/bootstrap-sass/assets/javascripts/bootstrap/tooltip.js');
|
||||||
app.import('bower_components/velocity/velocity.js');
|
app.import('bower_components/velocity/velocity.js');
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,827 @@
|
||||||
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
|
'use strict';
|
||||||
if (request.action === 'start-listen') {
|
|
||||||
chrome.tabCapture.capture({
|
/*
|
||||||
audio: true,
|
* dancer - v0.4.0 - 2014-02-01
|
||||||
video: false
|
* https://github.com/jsantell/dancer.js
|
||||||
}, function (stream) {
|
* Copyright (c) 2014 Jordan Santell
|
||||||
console.log('stream', stream);
|
* Licensed MIT
|
||||||
//I can attach all my filter here...
|
*/
|
||||||
});
|
(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 <corbanbrook@gmail.com> 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();
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
chrome.storage.local.get('threshold', ({threshold}) => {
|
||||||
|
threshold = threshold || 0.3;
|
||||||
|
|
||||||
|
let dancer = new window.Dancer(),
|
||||||
|
paused = false,
|
||||||
|
simulateKick = (mag, ratioKickMag) => {
|
||||||
|
console.log('mag: ' + mag + ', ratioKickMag: ' + ratioKickMag);
|
||||||
|
},
|
||||||
|
kick = dancer.createKick({
|
||||||
|
threshold,
|
||||||
|
onKick: (mag, ratioKickMag) => {
|
||||||
|
if (paused === false) {
|
||||||
|
simulateKick(mag, ratioKickMag);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
kick.on();
|
||||||
|
|
||||||
|
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
|
||||||
|
if (request.action === 'start-listening') {
|
||||||
|
chrome.tabCapture.capture({
|
||||||
|
audio: true,
|
||||||
|
video: false
|
||||||
|
}, function (stream) {
|
||||||
|
let error = null;
|
||||||
|
|
||||||
|
if (!stream) {
|
||||||
|
error = chrome.runtime.lastError.message;
|
||||||
|
} else {
|
||||||
|
// let audio = new Audio();
|
||||||
|
// audio.src = URL.createObjectURL(stream);
|
||||||
|
// audio.crossOrigin = "anonymous";
|
||||||
|
//dancer.load(audio, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
sendResponse({ error });
|
||||||
|
|
||||||
|
return true;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return true;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// 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);
|
||||||
|
// }
|
||||||
709
chrome/vendor/dancer.js
vendored
709
chrome/vendor/dancer.js
vendored
|
|
@ -1,709 +0,0 @@
|
||||||
/*
|
|
||||||
* 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 <corbanbrook@gmail.com> 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();
|
|
||||||
};
|
|
||||||
|
|
@ -1,41 +1,42 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
||||||
<title>Huegasm</title>
|
|
||||||
<meta name="description" content="Huegasm is a free web application for managing and synchronizing your Philips Hue lights with the beat of your music.">
|
|
||||||
<meta name="keywords" content="huegasm,hue,philips hue,music player">
|
|
||||||
<meta name="author" content="Egor Philippov">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
|
|
||||||
{{content-for 'head'}}
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<title>Huegasm</title>
|
||||||
|
<meta name="description" content="Huegasm is a free web application for managing and synchronizing your Philips Hue lights with the beat of your music.">
|
||||||
|
<meta name="keywords" content="huegasm,hue,philips hue,music player">
|
||||||
|
<meta name="author" content="Egor Philippov">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1"> {{content-for 'head'}}
|
||||||
|
|
||||||
<link href='https://fonts.googleapis.com/css?family=Slabo+27px|Open+Sans' rel='stylesheet' type='text/css'>
|
<link href='https://fonts.googleapis.com/css?family=Open+Sans|Raleway' rel='stylesheet' type='text/css'>
|
||||||
|
|
||||||
<link rel="stylesheet" integrity="" href="assets/vendor.css">
|
<link rel="stylesheet" integrity="" href="assets/vendor.css">
|
||||||
<link rel="stylesheet" integrity="" href="assets/huegasm_mobile.css">
|
<link rel="stylesheet" integrity="" href="assets/huegasm_mobile.css"> {{content-for 'head-footer'}}
|
||||||
|
|
||||||
{{content-for 'head-footer'}}
|
<script src="https://connect.soundcloud.com/sdk/sdk-3.1.2.js"></script>
|
||||||
|
|
||||||
<script src="https://connect.soundcloud.com/sdk/sdk-3.1.2.js"></script>
|
<script>
|
||||||
|
(function (i, s, o, g, r, a, m) {
|
||||||
|
i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
|
||||||
|
(i[r].q = i[r].q || []).push(arguments)
|
||||||
|
}, i[r].l = 1 * new Date(); a = s.createElement(o),
|
||||||
|
m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
|
||||||
|
})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
|
||||||
|
|
||||||
<script>
|
ga('create', 'UA-69470561-1', 'auto');
|
||||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
ga('send', 'pageview');
|
||||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
</script>
|
||||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
</head>
|
||||||
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
|
|
||||||
|
|
||||||
ga('create', 'UA-69470561-1', 'auto');
|
<body>
|
||||||
ga('send', 'pageview');
|
{{content-for 'body'}}
|
||||||
</script>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
{{content-for 'body'}}
|
|
||||||
|
|
||||||
<script src="assets/vendor.js"></script>
|
<script src="assets/vendor.js"></script>
|
||||||
<script src="assets/huegasm_mobile.js"></script>
|
<script src="assets/huegasm_mobile.js"></script>
|
||||||
|
|
||||||
{{content-for 'body-footer'}}
|
{{content-for 'body-footer'}}
|
||||||
</body>
|
</body>
|
||||||
</html>
|
|
||||||
|
</html>
|
||||||
|
|
@ -5,7 +5,7 @@
|
||||||
<p class="bridge-finder-bottom">
|
<p class="bridge-finder-bottom">
|
||||||
{{#if isAuthenticating}}
|
{{#if isAuthenticating}}
|
||||||
Your bridge IP is <b>{{bridgeIp}}</b>
|
Your bridge IP is <b>{{bridgeIp}}</b>
|
||||||
<br> Press the button on your bridge to authenticate this application.
|
<br> Press the button on your bridge to authenticate Huegasm.
|
||||||
{{else}}
|
{{else}}
|
||||||
You failed to press the button in time. <a class="no-text-decoration" href="#" {{action 'retry'}}>RETRY</a>
|
You failed to press the button in time. <a class="no-text-decoration" href="#" {{action 'retry'}}>RETRY</a>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
|
|
@ -17,7 +17,7 @@
|
||||||
{{/unless}}
|
{{/unless}}
|
||||||
|
|
||||||
{{#if bridgeFindMultiple}}
|
{{#if bridgeFindMultiple}}
|
||||||
<p>Huegasm found multiple hue bridges. <br> Please select the one you want to use for this application.</p>
|
<p>Huegasm found multiple hue bridges. <br> Please select the one you want to use for Huegasm.</p>
|
||||||
|
|
||||||
<div id="bridge-button-group">
|
<div id="bridge-button-group">
|
||||||
{{#each multipleBridgeIps as |bridge|}}
|
{{#each multipleBridgeIps as |bridge|}}
|
||||||
|
|
|
||||||
|
|
@ -22,7 +22,7 @@ export default Mixin.create({
|
||||||
|
|
||||||
beatOptions: {
|
beatOptions: {
|
||||||
threshold: {
|
threshold: {
|
||||||
range: {min: 0, max: 0.5},
|
range: { min: 0, max: 0.5 },
|
||||||
step: 0.01,
|
step: 0.01,
|
||||||
defaultValue: 0.3,
|
defaultValue: 0.3,
|
||||||
pips: {
|
pips: {
|
||||||
|
|
@ -30,23 +30,23 @@ export default Mixin.create({
|
||||||
values: [0, 0.25, 0.5],
|
values: [0, 0.25, 0.5],
|
||||||
density: 10,
|
density: 10,
|
||||||
format: {
|
format: {
|
||||||
to: function ( value ) {
|
to: function (value) {
|
||||||
if(value === 0) {
|
if (value === 0) {
|
||||||
value = 'More';
|
value = 'High';
|
||||||
} else if(value === 0.25) {
|
} else if (value === 0.25) {
|
||||||
value = '';
|
value = '';
|
||||||
} else {
|
} else {
|
||||||
value = 'Less';
|
value = 'Low';
|
||||||
}
|
}
|
||||||
|
|
||||||
return value;
|
return value;
|
||||||
},
|
},
|
||||||
from: function ( value ) { return value; }
|
from: function (value) { return value; }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
hueRange: {
|
hueRange: {
|
||||||
range: {min: 0, max: 65535},
|
range: { min: 0, max: 65535 },
|
||||||
step: 1,
|
step: 1,
|
||||||
defaultValue: 0.3,
|
defaultValue: 0.3,
|
||||||
pips: {
|
pips: {
|
||||||
|
|
@ -54,10 +54,10 @@ export default Mixin.create({
|
||||||
values: [0, 25500, 46920, 65535],
|
values: [0, 25500, 46920, 65535],
|
||||||
density: 10,
|
density: 10,
|
||||||
format: {
|
format: {
|
||||||
to: function ( value ) {
|
to: function (value) {
|
||||||
if(value === 0 || value === 65535) {
|
if (value === 0 || value === 65535) {
|
||||||
value = 'Red';
|
value = 'Red';
|
||||||
} else if(value === 25500 ) {
|
} else if (value === 25500) {
|
||||||
value = 'Green';
|
value = 'Green';
|
||||||
} else {
|
} else {
|
||||||
value = 'Blue';
|
value = 'Blue';
|
||||||
|
|
@ -65,12 +65,12 @@ export default Mixin.create({
|
||||||
|
|
||||||
return value;
|
return value;
|
||||||
},
|
},
|
||||||
from: function ( value ) { return value; }
|
from: function (value) { return value; }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
brightnessRange: {
|
brightnessRange: {
|
||||||
range: {min: 1, max: 254},
|
range: { min: 1, max: 254 },
|
||||||
step: 1,
|
step: 1,
|
||||||
defaultValue: 0,
|
defaultValue: 0,
|
||||||
pips: {
|
pips: {
|
||||||
|
|
@ -78,8 +78,16 @@ export default Mixin.create({
|
||||||
values: [1, 50, 100, 150, 200, 254],
|
values: [1, 50, 100, 150, 200, 254],
|
||||||
density: 10,
|
density: 10,
|
||||||
format: {
|
format: {
|
||||||
to: function ( value ) { return value; },
|
to: function (value) {
|
||||||
from: function ( value ) { return value; }
|
if (value === 50) {
|
||||||
|
value = 20;
|
||||||
|
} else if (value === 100) {
|
||||||
|
value = 40;
|
||||||
|
} else {
|
||||||
|
value = 'Low';
|
||||||
|
}
|
||||||
|
},
|
||||||
|
from: function (value) { return value; }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -99,8 +107,6 @@ export default Mixin.create({
|
||||||
playerBottomDisplayed: true,
|
playerBottomDisplayed: true,
|
||||||
dragging: false,
|
dragging: false,
|
||||||
draggingOverPlayListArea: false,
|
draggingOverPlayListArea: false,
|
||||||
audioStream: null,
|
|
||||||
dimmerOn: false,
|
|
||||||
isShowingAddSoundCloudModal: false,
|
isShowingAddSoundCloudModal: false,
|
||||||
|
|
||||||
colorloopMode: false,
|
colorloopMode: false,
|
||||||
|
|
@ -133,26 +139,26 @@ export default Mixin.create({
|
||||||
SC_CLIENT_ID: 'aeec0034f58ecd85c2bd1deaecc41594',
|
SC_CLIENT_ID: 'aeec0034f58ecd85c2bd1deaecc41594',
|
||||||
scUserNotSupportedHtml: '<div class="alert alert-danger" role="alert">SoundCloud user URLs are not supported.</div>',
|
scUserNotSupportedHtml: '<div class="alert alert-danger" role="alert">SoundCloud user URLs are not supported.</div>',
|
||||||
tooManySoundCloudFuckUps: '<div class="alert alert-danger" role="alert">The SoundCloud API is not seving the audio properly. More details <a href="https://www.soundcloudcommunity.com/soundcloud/topics/some-soundcloud-cdn-hosted-tracks-dont-have-access-control-allow-origin-header" target="_blank" rel="noopener noreferrer">HERE</a>.</div>',
|
tooManySoundCloudFuckUps: '<div class="alert alert-danger" role="alert">The SoundCloud API is not seving the audio properly. More details <a href="https://www.soundcloudcommunity.com/soundcloud/topics/some-soundcloud-cdn-hosted-tracks-dont-have-access-control-allow-origin-header" target="_blank" rel="noopener noreferrer">HERE</a>.</div>',
|
||||||
notStreamableHtml(fileNames){
|
notStreamableHtml(fileNames) {
|
||||||
let html = '<div class="alert alert-danger" role="alert">The following file(s) could not be added because they are not allowed to be streamed:<br>' + fileNames.toString().replace(/,/g, '<br>') + '</div>';
|
let html = '<div class="alert alert-danger" role="alert">The following file(s) could not be added because they are not allowed to be streamed:<br>' + fileNames.toString().replace(/,/g, '<br>') + '</div>';
|
||||||
|
|
||||||
return html;
|
return html;
|
||||||
},
|
},
|
||||||
urlNotFoundHtml(url){
|
urlNotFoundHtml(url) {
|
||||||
return '<div class="alert alert-danger" role="alert">The URL ( ' + url + ' ) could not be resolved.</div>';
|
return '<div class="alert alert-danger" role="alert">The URL ( ' + url + ' ) could not be resolved.</div>';
|
||||||
},
|
},
|
||||||
failedToPlayFileHtml(fileName){
|
failedToPlayFileHtml(fileName) {
|
||||||
return '<div class="alert alert-danger" role="alert">Failed to play file ( ' + fileName + ' ).</div>';
|
return '<div class="alert alert-danger" role="alert">Failed to play file ( ' + fileName + ' ).</div>';
|
||||||
},
|
},
|
||||||
failedToDecodeFileHtml(fileName){
|
failedToDecodeFileHtml(fileName) {
|
||||||
return '<div class="alert alert-danger" role="alert">Failed to decode file ( ' + fileName + ' ).</div>';
|
return '<div class="alert alert-danger" role="alert">Failed to decode file ( ' + fileName + ' ).</div>';
|
||||||
},
|
},
|
||||||
|
|
||||||
scUrl: computed('playQueuePointer', 'playQueue.[]', function(){
|
scUrl: computed('playQueuePointer', 'playQueue.[]', function () {
|
||||||
let rtn = null,
|
let rtn = null,
|
||||||
currentSong = this.get('playQueue')[this.get('playQueuePointer')];
|
currentSong = this.get('playQueue')[this.get('playQueuePointer')];
|
||||||
|
|
||||||
if(currentSong && currentSong.scUrl){
|
if (currentSong && currentSong.scUrl) {
|
||||||
rtn = currentSong.scUrl;
|
rtn = currentSong.scUrl;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -161,11 +167,11 @@ export default Mixin.create({
|
||||||
|
|
||||||
playQueueEmpty: computed.empty('playQueue'),
|
playQueueEmpty: computed.empty('playQueue'),
|
||||||
playQueueNotEmpty: computed.notEmpty('playQueue'),
|
playQueueNotEmpty: computed.notEmpty('playQueue'),
|
||||||
playQueueMultiple: computed('playQueue.[]', function(){
|
playQueueMultiple: computed('playQueue.[]', function () {
|
||||||
return this.get('playQueue').length > 1;
|
return this.get('playQueue').length > 1;
|
||||||
}),
|
}),
|
||||||
|
|
||||||
seekPosition: computed('timeElapsed', 'timeTotal', function(){
|
seekPosition: computed('timeElapsed', 'timeTotal', function () {
|
||||||
let timeTotal = this.get('timeTotal'),
|
let timeTotal = this.get('timeTotal'),
|
||||||
timeElapsed = this.get('timeElapsed');
|
timeElapsed = this.get('timeElapsed');
|
||||||
|
|
||||||
|
|
@ -173,21 +179,21 @@ export default Mixin.create({
|
||||||
return 0;
|
return 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
return timeElapsed/timeTotal*100;
|
return timeElapsed / timeTotal * 100;
|
||||||
}),
|
}),
|
||||||
|
|
||||||
largeArtworkPic: computed('playQueuePointer', 'currentVisName', function(){
|
largeArtworkPic: computed('playQueuePointer', 'currentVisName', function () {
|
||||||
let pic = '',
|
let pic = '',
|
||||||
currentVisName = this.get('currentVisName'),
|
currentVisName = this.get('currentVisName'),
|
||||||
playQueuePointer = this.get('playQueuePointer'),
|
playQueuePointer = this.get('playQueuePointer'),
|
||||||
playQueue = this.get('playQueue');
|
playQueue = this.get('playQueue');
|
||||||
|
|
||||||
if(playQueuePointer !== -1 && currentVisName === 'None'){
|
if (playQueuePointer !== -1 && currentVisName === 'None') {
|
||||||
let song = playQueue[playQueuePointer];
|
let song = playQueue[playQueuePointer];
|
||||||
if(!isNone(song.picture)){
|
if (!isNone(song.picture)) {
|
||||||
pic = song.picture;
|
pic = song.picture;
|
||||||
|
|
||||||
if(song.scUrl){
|
if (song.scUrl) {
|
||||||
pic = pic.replace('67x67', '500x500');
|
pic = pic.replace('67x67', '500x500');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -196,91 +202,91 @@ export default Mixin.create({
|
||||||
return pic;
|
return pic;
|
||||||
}),
|
}),
|
||||||
|
|
||||||
repeatIcon: computed('repeat', function() {
|
repeatIcon: computed('repeat', function () {
|
||||||
if(this.get('repeat') === 2) {
|
if (this.get('repeat') === 2) {
|
||||||
return 'repeat-one';
|
return 'repeat-one';
|
||||||
}
|
}
|
||||||
|
|
||||||
return 'repeat';
|
return 'repeat';
|
||||||
}),
|
}),
|
||||||
|
|
||||||
playingIcon: computed('playing', function() {
|
playingIcon: computed('playing', function () {
|
||||||
if(this.get('playing')){
|
if (this.get('playing')) {
|
||||||
return 'pause';
|
return 'pause';
|
||||||
} else if(this.get('timeElapsed') === this.get('timeTotal') && this.get('timeTotal') !== 0){
|
} else if (this.get('timeElapsed') === this.get('timeTotal') && this.get('timeTotal') !== 0) {
|
||||||
return 'replay';
|
return 'replay';
|
||||||
} else {
|
} else {
|
||||||
return 'play-arrow';
|
return 'play-arrow';
|
||||||
}
|
}
|
||||||
}),
|
}),
|
||||||
|
|
||||||
playerAreaClickIcon: computed('playing', function() {
|
playerAreaClickIcon: computed('playing', function () {
|
||||||
if(this.get('playing')){
|
if (this.get('playing')) {
|
||||||
return 'play-arrow';
|
return 'play-arrow';
|
||||||
} else {
|
} else {
|
||||||
return 'pause';
|
return 'pause';
|
||||||
}
|
}
|
||||||
}),
|
}),
|
||||||
|
|
||||||
playListAreaClass: computed('dragging', 'draggingOverPlayListArea', 'dimmerOn', function(){
|
playListAreaClass: computed('dragging', 'draggingOverPlayListArea', 'dimmerOn', function () {
|
||||||
let classes = 'pointer';
|
let classes = 'pointer';
|
||||||
|
|
||||||
if(this.get('dragging')){
|
if (this.get('dragging')) {
|
||||||
classes += ' drag-here-highlight';
|
classes += ' drag-here-highlight';
|
||||||
}
|
}
|
||||||
|
|
||||||
if(this.get('draggingOverPlayListArea')){
|
if (this.get('draggingOverPlayListArea')) {
|
||||||
classes += ' dragging-over';
|
classes += ' dragging-over';
|
||||||
}
|
}
|
||||||
|
|
||||||
if(this.get('dimmerOn')){
|
if (this.get('dimmerOn')) {
|
||||||
classes += ' dimmerOn';
|
classes += ' dimmerOn';
|
||||||
}
|
}
|
||||||
|
|
||||||
return classes;
|
return classes;
|
||||||
}),
|
}),
|
||||||
|
|
||||||
dimmerOnClass: computed('dimmerOn', function(){
|
dimmerOnClass: computed('dimmerOn', function () {
|
||||||
return this.get('dimmerOn') ? 'dimmerOn' : null;
|
return this.get('dimmerOn') ? 'dimmerOn' : null;
|
||||||
}),
|
}),
|
||||||
|
|
||||||
repeatClass: computed('repeat', function(){
|
repeatClass: computed('repeat', function () {
|
||||||
return this.get('repeat') !== 0 ? 'player-control-icon active' : 'player-control-icon';
|
return this.get('repeat') !== 0 ? 'player-control-icon active' : 'player-control-icon';
|
||||||
}),
|
}),
|
||||||
|
|
||||||
shuffleClass: computed('shuffle', function(){
|
shuffleClass: computed('shuffle', function () {
|
||||||
return this.get('shuffle') ? 'player-control-icon active' : 'player-control-icon';
|
return this.get('shuffle') ? 'player-control-icon active' : 'player-control-icon';
|
||||||
}),
|
}),
|
||||||
|
|
||||||
beatDetectionAreaArrowIcon: computed('playerBottomDisplayed', function(){
|
beatDetectionAreaArrowIcon: computed('playerBottomDisplayed', function () {
|
||||||
if(!this.get('playerBottomDisplayed')){
|
if (!this.get('playerBottomDisplayed')) {
|
||||||
return 'keyboard-arrow-down';
|
return 'keyboard-arrow-down';
|
||||||
} else {
|
} else {
|
||||||
return 'keyboard-arrow-up';
|
return 'keyboard-arrow-up';
|
||||||
}
|
}
|
||||||
}),
|
}),
|
||||||
|
|
||||||
timeElapsedTxt: computed('timeElapsed', function(){
|
timeElapsedTxt: computed('timeElapsed', function () {
|
||||||
return this.formatTime(this.get('timeElapsed'));
|
return this.formatTime(this.get('timeElapsed'));
|
||||||
}),
|
}),
|
||||||
|
|
||||||
timeTotalTxt: computed('timeTotal', function() {
|
timeTotalTxt: computed('timeTotal', function () {
|
||||||
return this.formatTime(this.get('timeTotal'));
|
return this.formatTime(this.get('timeTotal'));
|
||||||
}),
|
}),
|
||||||
|
|
||||||
onPlayQueueChange: observer('playQueue.length', function(){
|
onPlayQueueChange: observer('playQueue.length', function () {
|
||||||
let playQueueLength = this.get('playQueue.length');
|
let playQueueLength = this.get('playQueue.length');
|
||||||
|
|
||||||
if(playQueueLength > this.get('oldPlayQueueLength')){
|
if (playQueueLength > this.get('oldPlayQueueLength')) {
|
||||||
run.once(this, ()=>{
|
run.once(this, () => {
|
||||||
run.next(this, function() {
|
run.next(this, function () {
|
||||||
$(`.track${playQueueLength-1}`).velocity('scroll', { container: $('#play-list-area'), duration: 200 });
|
$(`.track${playQueueLength - 1}`).velocity('scroll', { container: $('#play-list-area'), duration: 200 });
|
||||||
Ps.update(document.getElementById('play-list-area'));
|
Ps.update(document.getElementById('play-list-area'));
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
run.once(this, ()=>{
|
run.once(this, () => {
|
||||||
run.next(this, function() {
|
run.next(this, function () {
|
||||||
Ps.update(document.getElementById('play-list-area'));
|
Ps.update(document.getElementById('play-list-area'));
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
@ -289,17 +295,17 @@ export default Mixin.create({
|
||||||
this.set('oldPlayQueueLength', playQueueLength);
|
this.set('oldPlayQueueLength', playQueueLength);
|
||||||
}),
|
}),
|
||||||
|
|
||||||
onColorloopModeChange: observer('colorloopMode', 'playing', function(){
|
onColorloopModeChange: observer('colorloopMode', 'playing', function () {
|
||||||
this.set('colorLoopOn', this.get('playing') && this.get('colorloopMode'));
|
this.set('colorLoopOn', this.get('playing') && this.get('colorloopMode'));
|
||||||
}),
|
}),
|
||||||
|
|
||||||
onOptionChange: observer('flashingTransitions', 'playQueue.[]', 'playQueuePointer', 'colorloopMode', function(self, option){
|
onOptionChange: observer('flashingTransitions', 'playQueue.[]', 'playQueuePointer', 'colorloopMode', function (self, option) {
|
||||||
option = option.replace('.[]', '');
|
option = option.replace('.[]', '');
|
||||||
let value = this.get(option);
|
let value = this.get(option);
|
||||||
|
|
||||||
// can't really save local music
|
// can't really save local music
|
||||||
if(option === 'playQueue'){
|
if (option === 'playQueue') {
|
||||||
value = value.filter((song)=>{
|
value = value.filter((song) => {
|
||||||
return !song.url.startsWith('blob:');
|
return !song.url.startsWith('blob:');
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
@ -307,9 +313,9 @@ export default Mixin.create({
|
||||||
this.get('storage').set('huegasm.' + option, value);
|
this.get('storage').set('huegasm.' + option, value);
|
||||||
}),
|
}),
|
||||||
|
|
||||||
formatTime(time){
|
formatTime(time) {
|
||||||
return this.pad(Math.floor(time/60), 2) + ':' + this.pad(time%60, 2);
|
return this.pad(Math.floor(time / 60), 2) + ':' + this.pad(time % 60, 2);
|
||||||
},
|
},
|
||||||
|
|
||||||
pad(num, size){ return ('000000000' + num).substr(-size); }
|
pad(num, size) { return ('000000000' + num).substr(-size); }
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -26,7 +26,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
body, button {
|
body, button {
|
||||||
font-family: 'Slabo 27px', serif;
|
font-family: 'Raleway', sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
.alert {
|
.alert {
|
||||||
|
|
|
||||||
|
|
@ -33,7 +33,7 @@
|
||||||
text-align: right;
|
text-align: right;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 5px;
|
top: 5px;
|
||||||
right: 10px;
|
right: -10px;
|
||||||
transform: scale(1.1);
|
transform: scale(1.1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -51,7 +51,7 @@
|
||||||
.light-text {
|
.light-text {
|
||||||
width: 60px;
|
width: 60px;
|
||||||
word-wrap: break-word;
|
word-wrap: break-word;
|
||||||
padding: 0 10px;
|
padding: 0 7px;
|
||||||
&.light-inactive::before {
|
&.light-inactive::before {
|
||||||
left: 10px;
|
left: 10px;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -14,6 +14,7 @@ md-checkbox .md-label {
|
||||||
}
|
}
|
||||||
|
|
||||||
.md-button {
|
.md-button {
|
||||||
|
font-size: 13px;
|
||||||
flex-direction: unset;
|
flex-direction: unset;
|
||||||
span {
|
span {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
|
||||||
|
|
@ -1,67 +1,67 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
||||||
<title>Huegasm</title>
|
|
||||||
<meta name="description" content="Huegasm is a free web application for managing and synchronizing your Philips Hue lights with the beat of your music.">
|
|
||||||
<meta name="keywords" content="huegasm,hue,philips hue,lights,ambience,music player">
|
|
||||||
<meta name="author" content="Egor Philippov">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
|
|
||||||
<script type="application/ld+json">
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<title>Huegasm</title>
|
||||||
|
<meta name="description" content="Huegasm is a free web application for managing and synchronizing your Philips Hue lights with the beat of your music.">
|
||||||
|
<meta name="keywords" content="huegasm,hue,philips hue,lights,ambience,music player">
|
||||||
|
<meta name="author" content="Egor Philippov">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
|
||||||
|
<script type="application/ld+json">
|
||||||
{
|
{
|
||||||
"@context": "http://schema.org",
|
"@context": "http://schema.org",
|
||||||
"@type": "WebSite",
|
"@type": "WebSite",
|
||||||
"name": "Huegasm",
|
"name": "Huegasm",
|
||||||
"url": "http://www.huegasm.com/"
|
"url": "http://www.huegasm.com/"
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<!--Open graph meta tags -->
|
<!--Open graph meta tags -->
|
||||||
<meta property="og:title" content="Huegasm" />
|
<meta property="og:title" content="Huegasm" />
|
||||||
<meta property="og:type" content="website" />
|
<meta property="og:type" content="website" />
|
||||||
<meta property="og:site_name" content="Huegasm" />
|
<meta property="og:site_name" content="Huegasm" />
|
||||||
<meta property="og:url" content="http://www.huegasm.com/" />
|
<meta property="og:url" content="http://www.huegasm.com/" />
|
||||||
<meta property="og:image" content="/mstile-144x144.png" />
|
<meta property="og:image" content="/mstile-144x144.png" />
|
||||||
|
|
||||||
<link type="text/plain" rel="author" href="http://www.huegasm.com/humans.txt" />
|
<link type="text/plain" rel="author" href="http://www.huegasm.com/humans.txt" /> {{content-for 'head'}}
|
||||||
|
|
||||||
{{content-for 'head'}}
|
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Raleway" rel="stylesheet">
|
||||||
|
|
||||||
<link href='//fonts.googleapis.com/css?family=Slabo+27px|Open+Sans' rel='stylesheet' type='text/css'>
|
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
|
||||||
|
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
|
||||||
|
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
|
||||||
|
<link rel="manifest" href="/manifest.json">
|
||||||
|
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
|
||||||
|
<meta name="theme-color" content="#ffffff">
|
||||||
|
|
||||||
|
<link rel="stylesheet" integrity="" href="{{rootURL}}assets/vendor.css">
|
||||||
|
<link rel="stylesheet" integrity="" href="{{rootURL}}assets/huegasm.css"> {{content-for 'head-footer'}}
|
||||||
|
|
||||||
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
|
<script src="https://connect.soundcloud.com/sdk/sdk-3.1.2.js"></script>
|
||||||
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
|
|
||||||
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
|
|
||||||
<link rel="manifest" href="/manifest.json">
|
|
||||||
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
|
|
||||||
<meta name="theme-color" content="#ffffff">
|
|
||||||
|
|
||||||
<link rel="stylesheet" integrity="" href="{{rootURL}}assets/vendor.css">
|
<script>
|
||||||
<link rel="stylesheet" integrity="" href="{{rootURL}}assets/huegasm.css">
|
(function (i, s, o, g, r, a, m) {
|
||||||
|
i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
|
||||||
|
(i[r].q = i[r].q || []).push(arguments)
|
||||||
|
}, i[r].l = 1 * new Date(); a = s.createElement(o),
|
||||||
|
m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
|
||||||
|
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
|
||||||
|
|
||||||
{{content-for 'head-footer'}}
|
ga('create', 'UA-69470561-1', 'auto');
|
||||||
|
ga('send', 'pageview');
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
|
||||||
<script src="https://connect.soundcloud.com/sdk/sdk-3.1.2.js"></script>
|
<body>
|
||||||
|
{{content-for 'body'}}
|
||||||
|
|
||||||
<script>
|
<script src="{{rootURL}}assets/vendor.js"></script>
|
||||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
<script src="{{rootURL}}assets/huegasm.js"></script>
|
||||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
|
||||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
|
||||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
|
||||||
|
|
||||||
ga('create', 'UA-69470561-1', 'auto');
|
{{content-for 'body-footer'}}
|
||||||
ga('send', 'pageview');
|
</body>
|
||||||
</script>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
{{content-for 'body'}}
|
|
||||||
|
|
||||||
<script src="{{rootURL}}assets/vendor.js"></script>
|
</html>
|
||||||
<script src="{{rootURL}}assets/huegasm.js"></script>
|
|
||||||
|
|
||||||
{{content-for 'body-footer'}}
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -6,7 +6,7 @@
|
||||||
{{#if isAuthenticating}}
|
{{#if isAuthenticating}}
|
||||||
<p>
|
<p>
|
||||||
Your bridge IP is <b>{{bridgeIp}}</b>
|
Your bridge IP is <b>{{bridgeIp}}</b>
|
||||||
<br> Press the button on your bridge to authenticate this application.
|
<br> Press the button on your bridge to authenticate Huegasm.
|
||||||
</p>
|
</p>
|
||||||
{{else}}
|
{{else}}
|
||||||
<p>You failed to press the button in time. <a class="no-text-decoration" href="#" {{action 'retry'}}>RETRY</a></p>
|
<p>You failed to press the button in time. <a class="no-text-decoration" href="#" {{action 'retry'}}>RETRY</a></p>
|
||||||
|
|
@ -18,7 +18,7 @@
|
||||||
{{/unless}}
|
{{/unless}}
|
||||||
|
|
||||||
{{#if bridgeFindMultiple}}
|
{{#if bridgeFindMultiple}}
|
||||||
<p>Huegasm found multiple hue bridges. <br> Please select the one you want to use for this application.</p>
|
<p>Huegasm found multiple hue bridges. <br> Please select the one you want to use for Huegasm.</p>
|
||||||
|
|
||||||
<div id="bridge-button-group">
|
<div id="bridge-button-group">
|
||||||
{{#each multipleBridgeIps as |bridge|}}
|
{{#each multipleBridgeIps as |bridge|}}
|
||||||
|
|
|
||||||
|
|
@ -9,12 +9,12 @@ export default Component.extend({
|
||||||
tagName: 'footer',
|
tagName: 'footer',
|
||||||
classNames: ['footer'],
|
classNames: ['footer'],
|
||||||
|
|
||||||
year: computed(function(){
|
year: computed(function () {
|
||||||
return new Date().getFullYear();
|
return new Date().getFullYear();
|
||||||
}),
|
}),
|
||||||
|
|
||||||
actions: {
|
actions: {
|
||||||
toggleDimmer(){
|
toggleDimmer() {
|
||||||
this.sendAction();
|
this.sendAction();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -23,7 +23,7 @@ export default Mixin.create({
|
||||||
|
|
||||||
beatOptions: {
|
beatOptions: {
|
||||||
threshold: {
|
threshold: {
|
||||||
range: {min: 0, max: 0.5},
|
range: { min: 0, max: 0.5 },
|
||||||
step: 0.01,
|
step: 0.01,
|
||||||
defaultValue: 0.3,
|
defaultValue: 0.3,
|
||||||
pips: {
|
pips: {
|
||||||
|
|
@ -31,23 +31,23 @@ export default Mixin.create({
|
||||||
values: [0, 0.25, 0.5],
|
values: [0, 0.25, 0.5],
|
||||||
density: 10,
|
density: 10,
|
||||||
format: {
|
format: {
|
||||||
to: function ( value ) {
|
to: function (value) {
|
||||||
if(value === 0) {
|
if (value === 0) {
|
||||||
value = 'More';
|
value = 'High';
|
||||||
} else if(value === 0.25) {
|
} else if (value === 0.25) {
|
||||||
value = '';
|
value = '';
|
||||||
} else {
|
} else {
|
||||||
value = 'Less';
|
value = 'Low';
|
||||||
}
|
}
|
||||||
|
|
||||||
return value;
|
return value;
|
||||||
},
|
},
|
||||||
from: function ( value ) { return value; }
|
from: function (value) { return value; }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
hueRange: {
|
hueRange: {
|
||||||
range: {min: 0, max: 65535},
|
range: { min: 0, max: 65535 },
|
||||||
step: 1,
|
step: 1,
|
||||||
defaultValue: 0.3,
|
defaultValue: 0.3,
|
||||||
pips: {
|
pips: {
|
||||||
|
|
@ -55,10 +55,10 @@ export default Mixin.create({
|
||||||
values: [0, 25500, 46920, 65535],
|
values: [0, 25500, 46920, 65535],
|
||||||
density: 10,
|
density: 10,
|
||||||
format: {
|
format: {
|
||||||
to: function ( value ) {
|
to: function (value) {
|
||||||
if(value === 0 || value === 65535) {
|
if (value === 0 || value === 65535) {
|
||||||
value = 'Red';
|
value = 'Red';
|
||||||
} else if(value === 25500 ) {
|
} else if (value === 25500) {
|
||||||
value = 'Green';
|
value = 'Green';
|
||||||
} else {
|
} else {
|
||||||
value = 'Blue';
|
value = 'Blue';
|
||||||
|
|
@ -66,21 +66,33 @@ export default Mixin.create({
|
||||||
|
|
||||||
return value;
|
return value;
|
||||||
},
|
},
|
||||||
from: function ( value ) { return value; }
|
from: function (value) { return value; }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
brightnessRange: {
|
brightnessRange: {
|
||||||
range: {min: 1, max: 254},
|
range: { min: 1, max: 254 },
|
||||||
step: 1,
|
step: 1,
|
||||||
defaultValue: 0,
|
defaultValue: 0,
|
||||||
pips: {
|
pips: {
|
||||||
mode: 'values',
|
mode: 'values',
|
||||||
values: [1, 50, 100, 150, 200, 254],
|
values: [1, 63, 127, 190, 254],
|
||||||
density: 10,
|
density: 10,
|
||||||
format: {
|
format: {
|
||||||
to: function ( value ) { return value; },
|
to: function (value) {
|
||||||
from: function ( value ) { return value; }
|
if (value === 63) {
|
||||||
|
value = 25;
|
||||||
|
} else if (value === 127) {
|
||||||
|
value = 50;
|
||||||
|
} else if (value === 190) {
|
||||||
|
value = 75;
|
||||||
|
} else if (value === 254) {
|
||||||
|
value = 100;
|
||||||
|
}
|
||||||
|
|
||||||
|
return value;
|
||||||
|
},
|
||||||
|
from: function (value) { return value; }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -101,8 +113,6 @@ export default Mixin.create({
|
||||||
dragging: false,
|
dragging: false,
|
||||||
draggingOverPlayListArea: false,
|
draggingOverPlayListArea: false,
|
||||||
dragLeaveTimeoutHandle: null,
|
dragLeaveTimeoutHandle: null,
|
||||||
audioStream: null,
|
|
||||||
dimmerOn: false,
|
|
||||||
isShowingAddSoundCloudModal: false,
|
isShowingAddSoundCloudModal: false,
|
||||||
|
|
||||||
colorloopMode: false,
|
colorloopMode: false,
|
||||||
|
|
@ -136,26 +146,26 @@ export default Mixin.create({
|
||||||
SC_CLIENT_ID: 'aeec0034f58ecd85c2bd1deaecc41594',
|
SC_CLIENT_ID: 'aeec0034f58ecd85c2bd1deaecc41594',
|
||||||
scUserNotSupportedHtml: '<div class="alert alert-danger" role="alert">SoundCloud user URLs are not supported.</div>',
|
scUserNotSupportedHtml: '<div class="alert alert-danger" role="alert">SoundCloud user URLs are not supported.</div>',
|
||||||
tooManySoundCloudFuckUps: '<div class="alert alert-danger" role="alert">The SoundCloud API is not seving the audio properly. More details <a href="https://www.soundcloudcommunity.com/soundcloud/topics/some-soundcloud-cdn-hosted-tracks-dont-have-access-control-allow-origin-header" target="_blank" rel="noopener noreferrer">HERE</a>.</div>',
|
tooManySoundCloudFuckUps: '<div class="alert alert-danger" role="alert">The SoundCloud API is not seving the audio properly. More details <a href="https://www.soundcloudcommunity.com/soundcloud/topics/some-soundcloud-cdn-hosted-tracks-dont-have-access-control-allow-origin-header" target="_blank" rel="noopener noreferrer">HERE</a>.</div>',
|
||||||
notStreamableHtml(fileNames){
|
notStreamableHtml(fileNames) {
|
||||||
let html = '<div class="alert alert-danger" role="alert">The following file(s) could not be added because they are not allowed to be streamed:<br>' + fileNames.toString().replace(/,/g, '<br>') + '</div>';
|
let html = '<div class="alert alert-danger" role="alert">The following file(s) could not be added because they are not allowed to be streamed:<br>' + fileNames.toString().replace(/,/g, '<br>') + '</div>';
|
||||||
|
|
||||||
return html;
|
return html;
|
||||||
},
|
},
|
||||||
urlNotFoundHtml(url){
|
urlNotFoundHtml(url) {
|
||||||
return '<div class="alert alert-danger" role="alert">The URL ( ' + url + ' ) could not be resolved.</div>';
|
return '<div class="alert alert-danger" role="alert">The URL ( ' + url + ' ) could not be resolved.</div>';
|
||||||
},
|
},
|
||||||
failedToPlayFileHtml(fileName){
|
failedToPlayFileHtml(fileName) {
|
||||||
return '<div class="alert alert-danger" role="alert">Failed to play file ( ' + fileName + ' ).</div>';
|
return '<div class="alert alert-danger" role="alert">Failed to play file ( ' + fileName + ' ).</div>';
|
||||||
},
|
},
|
||||||
failedToDecodeFileHtml(fileName){
|
failedToDecodeFileHtml(fileName) {
|
||||||
return '<div class="alert alert-danger" role="alert">Failed to decode file ( ' + fileName + ' ).</div>';
|
return '<div class="alert alert-danger" role="alert">Failed to decode file ( ' + fileName + ' ).</div>';
|
||||||
},
|
},
|
||||||
|
|
||||||
scUrl: computed('playQueuePointer', 'playQueue.[]', function(){
|
scUrl: computed('playQueuePointer', 'playQueue.[]', function () {
|
||||||
let rtn = null,
|
let rtn = null,
|
||||||
currentSong = this.get('playQueue')[this.get('playQueuePointer')];
|
currentSong = this.get('playQueue')[this.get('playQueuePointer')];
|
||||||
|
|
||||||
if(currentSong && currentSong.scUrl){
|
if (currentSong && currentSong.scUrl) {
|
||||||
rtn = currentSong.scUrl;
|
rtn = currentSong.scUrl;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -164,11 +174,11 @@ export default Mixin.create({
|
||||||
|
|
||||||
playQueueEmpty: computed.empty('playQueue'),
|
playQueueEmpty: computed.empty('playQueue'),
|
||||||
playQueueNotEmpty: computed.notEmpty('playQueue'),
|
playQueueNotEmpty: computed.notEmpty('playQueue'),
|
||||||
playQueueMultiple: computed('playQueue.[]', function(){
|
playQueueMultiple: computed('playQueue.[]', function () {
|
||||||
return this.get('playQueue').length > 1;
|
return this.get('playQueue').length > 1;
|
||||||
}),
|
}),
|
||||||
|
|
||||||
seekPosition: computed('timeElapsed', 'timeTotal', function(){
|
seekPosition: computed('timeElapsed', 'timeTotal', function () {
|
||||||
let timeTotal = this.get('timeTotal'),
|
let timeTotal = this.get('timeTotal'),
|
||||||
timeElapsed = this.get('timeElapsed');
|
timeElapsed = this.get('timeElapsed');
|
||||||
|
|
||||||
|
|
@ -176,21 +186,21 @@ export default Mixin.create({
|
||||||
return 0;
|
return 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
return timeElapsed/timeTotal*100;
|
return timeElapsed / timeTotal * 100;
|
||||||
}),
|
}),
|
||||||
|
|
||||||
largeArtworkPic: computed('playQueuePointer', 'currentVisName', function(){
|
largeArtworkPic: computed('playQueuePointer', 'currentVisName', function () {
|
||||||
let pic = '',
|
let pic = '',
|
||||||
currentVisName = this.get('currentVisName'),
|
currentVisName = this.get('currentVisName'),
|
||||||
playQueuePointer = this.get('playQueuePointer'),
|
playQueuePointer = this.get('playQueuePointer'),
|
||||||
playQueue = this.get('playQueue');
|
playQueue = this.get('playQueue');
|
||||||
|
|
||||||
if(playQueuePointer !== -1 && currentVisName === 'None'){
|
if (playQueuePointer !== -1 && currentVisName === 'None') {
|
||||||
let song = playQueue[playQueuePointer];
|
let song = playQueue[playQueuePointer];
|
||||||
if(!isNone(song.picture)){
|
if (!isNone(song.picture)) {
|
||||||
pic = song.picture;
|
pic = song.picture;
|
||||||
|
|
||||||
if(song.scUrl){
|
if (song.scUrl) {
|
||||||
pic = pic.replace('67x67', '500x500');
|
pic = pic.replace('67x67', '500x500');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -199,73 +209,73 @@ export default Mixin.create({
|
||||||
return pic;
|
return pic;
|
||||||
}),
|
}),
|
||||||
|
|
||||||
repeatIcon: computed('repeat', function() {
|
repeatIcon: computed('repeat', function () {
|
||||||
if(this.get('repeat') === 2) {
|
if (this.get('repeat') === 2) {
|
||||||
return 'repeat-one';
|
return 'repeat-one';
|
||||||
}
|
}
|
||||||
|
|
||||||
return 'repeat';
|
return 'repeat';
|
||||||
}),
|
}),
|
||||||
|
|
||||||
playingIcon: computed('playing', function() {
|
playingIcon: computed('playing', function () {
|
||||||
if(this.get('playing')){
|
if (this.get('playing')) {
|
||||||
return 'pause';
|
return 'pause';
|
||||||
} else if(this.get('timeElapsed') === this.get('timeTotal') && this.get('timeTotal') !== 0){
|
} else if (this.get('timeElapsed') === this.get('timeTotal') && this.get('timeTotal') !== 0) {
|
||||||
return 'replay';
|
return 'replay';
|
||||||
} else {
|
} else {
|
||||||
return 'play-arrow';
|
return 'play-arrow';
|
||||||
}
|
}
|
||||||
}),
|
}),
|
||||||
|
|
||||||
playerAreaClickIcon: computed('playing', function() {
|
playerAreaClickIcon: computed('playing', function () {
|
||||||
if(this.get('playing')){
|
if (this.get('playing')) {
|
||||||
return 'play-arrow';
|
return 'play-arrow';
|
||||||
} else {
|
} else {
|
||||||
return 'pause';
|
return 'pause';
|
||||||
}
|
}
|
||||||
}),
|
}),
|
||||||
|
|
||||||
playListAreaClass: computed('dragging', 'draggingOverPlayListArea', 'dimmerOn', function(){
|
playListAreaClass: computed('dragging', 'draggingOverPlayListArea', 'dimmerOn', function () {
|
||||||
let classes = 'pointer';
|
let classes = 'pointer';
|
||||||
|
|
||||||
if(this.get('dragging')){
|
if (this.get('dragging')) {
|
||||||
classes += ' drag-here-highlight';
|
classes += ' drag-here-highlight';
|
||||||
}
|
}
|
||||||
|
|
||||||
if(this.get('draggingOverPlayListArea')){
|
if (this.get('draggingOverPlayListArea')) {
|
||||||
classes += ' dragging-over';
|
classes += ' dragging-over';
|
||||||
}
|
}
|
||||||
|
|
||||||
if(this.get('dimmerOn')){
|
if (this.get('dimmerOn')) {
|
||||||
classes += ' dimmerOn';
|
classes += ' dimmerOn';
|
||||||
}
|
}
|
||||||
|
|
||||||
return classes;
|
return classes;
|
||||||
}),
|
}),
|
||||||
|
|
||||||
dimmerOnClass: computed('dimmerOn', function(){
|
dimmerOnClass: computed('dimmerOn', function () {
|
||||||
return this.get('dimmerOn') ? 'dimmerOn' : null;
|
return this.get('dimmerOn') ? 'dimmerOn' : null;
|
||||||
}),
|
}),
|
||||||
|
|
||||||
volumeMutedClass: computed('volumeMuted', function(){
|
volumeMutedClass: computed('volumeMuted', function () {
|
||||||
let classes = 'player-control-icon volumeButton';
|
let classes = 'player-control-icon volumeButton';
|
||||||
|
|
||||||
if(this.get('volumeMuted')){
|
if (this.get('volumeMuted')) {
|
||||||
classes += ' active';
|
classes += ' active';
|
||||||
}
|
}
|
||||||
|
|
||||||
return classes;
|
return classes;
|
||||||
}),
|
}),
|
||||||
|
|
||||||
repeatClass: computed('repeat', function(){
|
repeatClass: computed('repeat', function () {
|
||||||
return this.get('repeat') !== 0 ? 'player-control-icon active' : 'player-control-icon';
|
return this.get('repeat') !== 0 ? 'player-control-icon active' : 'player-control-icon';
|
||||||
}),
|
}),
|
||||||
|
|
||||||
shuffleClass: computed('shuffle', function(){
|
shuffleClass: computed('shuffle', function () {
|
||||||
return this.get('shuffle') ? 'player-control-icon active' : 'player-control-icon';
|
return this.get('shuffle') ? 'player-control-icon active' : 'player-control-icon';
|
||||||
}),
|
}),
|
||||||
|
|
||||||
volumeIcon: computed('volumeMuted', 'volume', function() {
|
volumeIcon: computed('volumeMuted', 'volume', function () {
|
||||||
let volume = this.get('volume');
|
let volume = this.get('volume');
|
||||||
|
|
||||||
if (this.get('volumeMuted')) {
|
if (this.get('volumeMuted')) {
|
||||||
|
|
@ -279,29 +289,29 @@ export default Mixin.create({
|
||||||
}
|
}
|
||||||
}),
|
}),
|
||||||
|
|
||||||
beatDetectionAreaArrowIcon: computed('playerBottomDisplayed', function(){
|
beatDetectionAreaArrowIcon: computed('playerBottomDisplayed', function () {
|
||||||
if(!this.get('playerBottomDisplayed')){
|
if (!this.get('playerBottomDisplayed')) {
|
||||||
return 'keyboard-arrow-down';
|
return 'keyboard-arrow-down';
|
||||||
} else {
|
} else {
|
||||||
return 'keyboard-arrow-up';
|
return 'keyboard-arrow-up';
|
||||||
}
|
}
|
||||||
}),
|
}),
|
||||||
|
|
||||||
timeElapsedTxt: computed('timeElapsed', function(){
|
timeElapsedTxt: computed('timeElapsed', function () {
|
||||||
return this.formatTime(this.get('timeElapsed'));
|
return this.formatTime(this.get('timeElapsed'));
|
||||||
}),
|
}),
|
||||||
|
|
||||||
timeTotalTxt: computed('timeTotal', function() {
|
timeTotalTxt: computed('timeTotal', function () {
|
||||||
return this.formatTime(this.get('timeTotal'));
|
return this.formatTime(this.get('timeTotal'));
|
||||||
}),
|
}),
|
||||||
|
|
||||||
onPlayQueueChange: observer('playQueue.length', function(){
|
onPlayQueueChange: observer('playQueue.length', function () {
|
||||||
let playQueueLength = this.get('playQueue.length');
|
let playQueueLength = this.get('playQueue.length');
|
||||||
|
|
||||||
if(playQueueLength > this.get('oldPlayQueueLength')){
|
if (playQueueLength > this.get('oldPlayQueueLength')) {
|
||||||
run.once(this, ()=>{
|
run.once(this, () => {
|
||||||
run.next(this, function() {
|
run.next(this, function () {
|
||||||
$(`.track${playQueueLength-1}`).velocity('scroll', { container: $('#play-list-area'), duration: 200 });
|
$(`.track${playQueueLength - 1}`).velocity('scroll', { container: $('#play-list-area'), duration: 200 });
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
@ -309,17 +319,17 @@ export default Mixin.create({
|
||||||
this.set('oldPlayQueueLength', playQueueLength);
|
this.set('oldPlayQueueLength', playQueueLength);
|
||||||
}),
|
}),
|
||||||
|
|
||||||
onColorloopModeChange: observer('colorloopMode', 'playing', function(){
|
onColorloopModeChange: observer('colorloopMode', 'playing', function () {
|
||||||
this.set('colorLoopOn', this.get('playing') && this.get('colorloopMode'));
|
this.set('colorLoopOn', this.get('playing') && this.get('colorloopMode'));
|
||||||
}),
|
}),
|
||||||
|
|
||||||
onOptionChange: observer('flashingTransitions', 'playQueue.[]', 'playQueuePointer', 'colorloopMode', function(self, option){
|
onOptionChange: observer('flashingTransitions', 'playQueue.[]', 'playQueuePointer', 'colorloopMode', function (self, option) {
|
||||||
option = option.replace('.[]', '');
|
option = option.replace('.[]', '');
|
||||||
let value = this.get(option);
|
let value = this.get(option);
|
||||||
|
|
||||||
// can't really save local music
|
// can't really save local music
|
||||||
if(option === 'playQueue'){
|
if (option === 'playQueue') {
|
||||||
value = value.filter((song)=>{
|
value = value.filter((song) => {
|
||||||
return !song.url.startsWith('blob:');
|
return !song.url.startsWith('blob:');
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
@ -350,30 +360,30 @@ export default Mixin.create({
|
||||||
this.changeTooltipText(type, tooltipTxt);
|
this.changeTooltipText(type, tooltipTxt);
|
||||||
})),
|
})),
|
||||||
|
|
||||||
onVolumeMutedChange: on('init', observer('volumeMuted', function() {
|
onVolumeMutedChange: on('init', observer('volumeMuted', function () {
|
||||||
let tooltipTxt = 'Mute', type = 'volumeMuted',
|
let tooltipTxt = 'Mute', type = 'volumeMuted',
|
||||||
volumeMuted = this.get(type), dancer = this.get('dancer'),
|
volumeMuted = this.get(type), dancer = this.get('dancer'),
|
||||||
volume=0;
|
volume = 0;
|
||||||
|
|
||||||
if (volumeMuted) {
|
if (volumeMuted) {
|
||||||
tooltipTxt = 'Unmute';
|
tooltipTxt = 'Unmute';
|
||||||
volume = 0;
|
volume = 0;
|
||||||
} else {
|
} else {
|
||||||
volume = this.get('volume')/100;
|
volume = this.get('volume') / 100;
|
||||||
}
|
}
|
||||||
|
|
||||||
if(this.get('playing')){
|
if (this.get('playing')) {
|
||||||
dancer.setVolume(volume);
|
dancer.setVolume(volume);
|
||||||
}
|
}
|
||||||
|
|
||||||
this.changeTooltipText(type, tooltipTxt);
|
this.changeTooltipText(type, tooltipTxt);
|
||||||
})),
|
})),
|
||||||
|
|
||||||
onPrevChange: on('init', observer('timeElapsed', 'playQueueNotEmpty', 'playQueue.[]', function() {
|
onPrevChange: on('init', observer('timeElapsed', 'playQueueNotEmpty', 'playQueue.[]', function () {
|
||||||
if(this.get('playQueueNotEmpty')){
|
if (this.get('playQueueNotEmpty')) {
|
||||||
let tooltipTxt = 'Previous', type = 'prev';
|
let tooltipTxt = 'Previous', type = 'prev';
|
||||||
|
|
||||||
if(this.get('timeElapsed') > 5 || this.get('playQueue').length === 1) {
|
if (this.get('timeElapsed') > 5 || this.get('playQueue').length === 1) {
|
||||||
tooltipTxt = 'Replay';
|
tooltipTxt = 'Replay';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -386,7 +396,7 @@ export default Mixin.create({
|
||||||
|
|
||||||
if (this.get(type)) {
|
if (this.get(type)) {
|
||||||
tooltipTxt = 'Pause';
|
tooltipTxt = 'Pause';
|
||||||
} else if(this.get('timeElapsed') === this.get('timeTotal') && this.get('timeTotal') !== 0){
|
} else if (this.get('timeElapsed') === this.get('timeTotal') && this.get('timeTotal') !== 0) {
|
||||||
tooltipTxt = 'Replay';
|
tooltipTxt = 'Replay';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -399,14 +409,14 @@ export default Mixin.create({
|
||||||
//change the tooltip text for hover
|
//change the tooltip text for hover
|
||||||
$('#' + type + 'Tooltip').attr('data-original-title', text);
|
$('#' + type + 'Tooltip').attr('data-original-title', text);
|
||||||
|
|
||||||
if(isNone(this.get(type + 'TooltipTxt'))) {
|
if (isNone(this.get(type + 'TooltipTxt'))) {
|
||||||
this.set(type + 'TooltipTxt', text);
|
this.set(type + 'TooltipTxt', text);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
formatTime(time){
|
formatTime(time) {
|
||||||
return this.pad(Math.floor(time/60), 2) + ':' + this.pad(time%60, 2);
|
return this.pad(Math.floor(time / 60), 2) + ':' + this.pad(time % 60, 2);
|
||||||
},
|
},
|
||||||
|
|
||||||
pad(num, size){ return ('000000000' + num).substr(-size); }
|
pad(num, size) { return ('000000000' + num).substr(-size); }
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,86 +1,100 @@
|
||||||
<div class="row" id="step1">
|
<div class="row" id="step1">
|
||||||
<div id="player-area" class="col-sm-8 col-xs-12 {{if (eq "None" currentVisName) "display-icon"}}" {{action "playerAreaPlay"}}>
|
<div id="player-area" class="col-sm-8 col-xs-12 {{if (eq "None" currentVisName) "display-icon"}}" {{action "playerAreaPlay"}}>
|
||||||
<canvas id="visualization"></canvas>
|
<canvas id="visualization"></canvas>
|
||||||
|
|
||||||
<div id="artwork">
|
<div id="artwork">
|
||||||
<img src={{largeArtworkPic}}>
|
<img src= {{largeArtworkPic}}>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{{paper-icon playerAreaClickIcon id="play-notification"}}
|
{{paper-icon playerAreaClickIcon id="play-notification"}}
|
||||||
|
|
||||||
<div id="player-controls">
|
<div id="player-controls">
|
||||||
{{range-slider start=seekPosition min=0 max=100 connect=filledConnect id="seek-slider" on-change="seekChanged"}}
|
{{range-slider start=seekPosition min=0 max=100 connect=filledConnect id="seek-slider" on-change="seekChanged"}}
|
||||||
|
|
||||||
{{#if playQueueNotEmpty}}
|
{{#if playQueueNotEmpty}}
|
||||||
<span data-toggle="tooltip" data-placement="top" class="bootstrap-tooltip" id="prevTooltip"
|
<span data-toggle="tooltip" data-placement="top" class="bootstrap-tooltip" id="prevTooltip" data-title= {{prevTooltipTxt}}
|
||||||
data-title={{prevTooltipTxt}} {{action "previous"}}>{{paper-icon "skip-previous" class="player-control-icon"}}</span><!--
|
{{action "previous"}}>{{paper-icon "skip-previous" class="player-control-icon"}}</span>
|
||||||
-->{{/if}}<!--
|
<!--
|
||||||
--><span data-toggle="tooltip" data-placement="top" id="playingTooltip" class="bootstrap-tooltip"
|
-->
|
||||||
data-title={{playingTooltipTxt}} {{action "play"}}>{{paper-icon playingIcon class="player-control-icon"}}</span><!--
|
{{/if}}
|
||||||
-->{{#if playQueueMultiple}}<!--
|
<!--
|
||||||
--><span data-toggle="tooltip" data-placement="top" class="bootstrap-tooltip"
|
-->
|
||||||
data-title="Next" {{action "next" true}}>{{paper-icon "skip-next" action="" class="player-control-icon"}}</span><!--
|
<span data-toggle="tooltip" data-placement="top" id="playingTooltip" class="bootstrap-tooltip" data-title= {{playingTooltipTxt}}
|
||||||
-->{{/if}}<!--
|
{{action "play"}}>{{paper-icon playingIcon class="player-control-icon"}}</span>
|
||||||
--><span data-toggle="tooltip" data-placement="top" class="bootstrap-tooltip" id="volumeMutedTooltip"
|
<!--
|
||||||
data-title={{volumeMutedTooltipTxt}} {{action "volumeMutedChanged"}}>{{paper-icon icon=volumeIcon class=volumeMutedClass}}</span><!--
|
-->
|
||||||
|
{{#if playQueueMultiple}}
|
||||||
|
<!--
|
||||||
|
--><span data-toggle="tooltip" data-placement="top" class="bootstrap-tooltip" data-title="Next" {{action "next" true}}>{{paper-icon "skip-next" action="" class="player-control-icon"}}</span>
|
||||||
|
<!--
|
||||||
|
-->
|
||||||
|
{{/if}}
|
||||||
|
<!--
|
||||||
|
-->
|
||||||
|
<span data-toggle="tooltip" data-placement="top" class="bootstrap-tooltip hidden-xs" id="volumeMutedTooltip" data-title= {{volumeMutedTooltipTxt}}
|
||||||
|
{{action "volumeMutedChanged"}}>{{paper-icon icon=volumeIcon class=volumeMutedClass}}</span>
|
||||||
|
<!--
|
||||||
-->{{range-slider start=volume min=0 max=100 connect=filledConnect on-change="volumeChanged" id="volume-bar" class="hidden-xs"}}
|
-->{{range-slider start=volume min=0 max=100 connect=filledConnect on-change="volumeChanged" id="volume-bar" class="hidden-xs"}}
|
||||||
|
|
||||||
<div id="player-time-controls">{{timeElapsedTxt}} / {{timeTotalTxt}}</div>
|
<div id="player-time-controls">{{timeElapsedTxt}} / {{timeTotalTxt}}</div>
|
||||||
|
|
||||||
{{#paper-menu as |menu|}}
|
{{#paper-menu as |menu|}}
|
||||||
{{#menu.trigger}}
|
{{#menu.trigger}}
|
||||||
{{#paper-button iconButton=true}}
|
{{#paper-button iconButton=true}}
|
||||||
{{paper-icon "remove-red-eye" class="player-control-icon"}}
|
{{paper-icon "remove-red-eye" class="player-control-icon"}}
|
||||||
{{/paper-button}}
|
{{/paper-button}}
|
||||||
{{/menu.trigger}}
|
{{/menu.trigger}}
|
||||||
{{#menu.content width=2 as |content|}}
|
{{#menu.content width=2 as |content|}}
|
||||||
{{#each visNames as |name|}}
|
{{#each visNames as |name|}}
|
||||||
{{#content.menu-item onClick=(action "setVisName" name)}}
|
{{#content.menu-item onClick=(action "setVisName" name)}}
|
||||||
{{name}}
|
{{name}}
|
||||||
|
|
||||||
{{#if (eq currentVisName name)}}
|
{{#if (eq currentVisName name)}}
|
||||||
{{paper-icon "check" classNames=dimmerOnClass}}
|
{{paper-icon "check" classNames=dimmerOnClass}}
|
||||||
{{/if}}
|
{{/if}}
|
||||||
{{/content.menu-item}}
|
{{/content.menu-item}}
|
||||||
{{/each}}
|
{{/each}}
|
||||||
{{/menu.content}}
|
{{/menu.content}}
|
||||||
{{/paper-menu}}
|
{{/paper-menu}}
|
||||||
|
|
||||||
{{#if scUrl}}
|
{{#if scUrl}}
|
||||||
<a href={{scUrl}} class="sound-cloud-link"{{action "gotoSCURL" scUrl}}>
|
<a href= {{scUrl}} class="sound-cloud-link" {{action "gotoSCURL" scUrl}}>
|
||||||
<img src="assets/images/sc-white.png" id="soundcloud-logo" />
|
<img src="assets/images/sc-white.png" id="soundcloud-logo" />
|
||||||
<img src="assets/images/sc-white-sm.png" id="soundcloud-logo-small" />
|
<img src="assets/images/sc-white-sm.png" id="soundcloud-logo-small" />
|
||||||
</a>
|
</a>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="playlist" class="col-sm-4 col-xs-12">
|
<div id="playlist" class="col-sm-4 col-xs-12">
|
||||||
<input id="file-input" type="file" accept="audio/*" multiple="true"/>
|
<input id="file-input" type="file" accept="audio/*" multiple="true" />
|
||||||
|
|
||||||
<div id="play-list-controls">
|
<div id="play-list-controls">
|
||||||
{{#paper-menu as |menu|}}
|
{{#paper-menu as |menu|}}
|
||||||
{{#menu.trigger}}
|
{{#menu.trigger}}
|
||||||
{{#paper-button iconButton=false}}
|
{{#paper-button iconButton=false}}
|
||||||
{{paper-icon "playlist add" class="player-control-icon"}} <span id="add-new-music-label">Add new music</span>
|
{{paper-icon "playlist add" class="player-control-icon"}} <span id="add-new-music-label">Add new music</span>
|
||||||
{{/paper-button}}
|
{{/paper-button}}
|
||||||
{{/menu.trigger}}
|
{{/menu.trigger}}
|
||||||
{{#menu.content width=3 as |content|}}
|
{{#menu.content width=3 as |content|}}
|
||||||
{{#content.menu-item onClick="addLocalAudio"}}
|
{{#content.menu-item onClick="addLocalAudio" }}
|
||||||
{{paper-icon "attachment" class=shuffleClass}} Local file
|
{{paper-icon "attachment" class=shuffleClass}} Local file
|
||||||
{{/content.menu-item}}
|
{{/content.menu-item}}
|
||||||
{{#content.menu-item onClick="toggleIsShowingAddSoundCloudModal"}}
|
{{#content.menu-item onClick="toggleIsShowingAddSoundCloudModal" }}
|
||||||
{{paper-icon "cloud" class=shuffleClass}} SoundCloud
|
{{paper-icon "cloud" class=shuffleClass}} SoundCloud
|
||||||
{{/content.menu-item}}
|
{{/content.menu-item}}
|
||||||
{{/menu.content}}
|
{{/menu.content}}
|
||||||
{{/paper-menu}}
|
{{/paper-menu}}
|
||||||
|
|
||||||
<span data-toggle="tooltip" data-placement="top auto" class="bootstrap-tooltip" id="shuffleTooltip" data-title={{shuffleTooltipTxt}} {{action "shuffleChanged"}}>{{paper-icon "shuffle" class=shuffleClass}}</span>
|
<span data-toggle="tooltip" data-placement="top auto" class="bootstrap-tooltip" id="shuffleTooltip" data-title= {{shuffleTooltipTxt}}
|
||||||
<span data-toggle="tooltip" data-placement="top auto" class="bootstrap-tooltip" id="repeatTooltip" data-title={{repeatTooltipTxt}} {{action "repeatChanged"}}>{{paper-icon repeatIcon class=repeatClass}}</span>
|
{{action "shuffleChanged"}}>{{paper-icon "shuffle" class=shuffleClass}}</span>
|
||||||
<span data-toggle="tooltip" data-placement="top auto" class="bootstrap-tooltip hidden-xs" data-title="Clear playlist" {{action "clearPlaylist"}}>{{paper-icon "clear-all" class="player-control-icon"}}</span>
|
<span data-toggle="tooltip" data-placement="top auto" class="bootstrap-tooltip" id="repeatTooltip" data-title= {{repeatTooltipTxt}}
|
||||||
</div>
|
{{action "repeatChanged"}}>{{paper-icon repeatIcon class=repeatClass}}</span>
|
||||||
|
<span data-toggle="tooltip" data-placement="top auto" class="bootstrap-tooltip hidden-xs" data-title="Clear playlist" {{action "clearPlaylist"}}>{{paper-icon "clear-all" class="player-control-icon"}}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div id="play-list-area" class={{playListAreaClass}} {{action "addLocalAudio"}} {{action "playerListAreaDragOver" on="dragOver"}} {{action "playerListAreaDragLeave" on="dragLeave"}} {{action "dropFiles" on="drop"}}>
|
<div id="play-list-area" class= {{playListAreaClass}} {{action "addLocalAudio"}} {{action "playerListAreaDragOver" on="dragOver"}}
|
||||||
|
{{action "playerListAreaDragLeave" on="dragLeave"}} {{action "dropFiles" on="drop"}}>
|
||||||
{{#if (or playQueueEmpty dragging)}}
|
{{#if (or playQueueEmpty dragging)}}
|
||||||
<div id="dragHere">
|
<div id="dragHere">
|
||||||
{{#if dragging}}
|
{{#if dragging}}
|
||||||
|
|
@ -95,7 +109,7 @@
|
||||||
{{#each playQueue as |item index|}}
|
{{#each playQueue as |item index|}}
|
||||||
<div class="playlist-item pointer track{{index}} {{if (eq index playQueuePointer) "active"}} {{if dragging "hidden"}}" {{action "goToSong" index true bubbles=false}}>
|
<div class="playlist-item pointer track{{index}} {{if (eq index playQueuePointer) "active"}} {{if dragging "hidden"}}" {{action "goToSong" index true bubbles=false}}>
|
||||||
{{#if item.picture}}
|
{{#if item.picture}}
|
||||||
<img class="album-art" src={{item.picture}}>
|
<img class="album-art" src= {{item.picture}}>
|
||||||
{{else}}
|
{{else}}
|
||||||
<img class="album-art" src="assets/images/missingArtwork.png">
|
<img class="album-art" src="assets/images/missingArtwork.png">
|
||||||
{{/if}}
|
{{/if}}
|
||||||
|
|
@ -105,9 +119,9 @@
|
||||||
<div class="song-title">{{item.title}}</div>
|
<div class="song-title">{{item.title}}</div>
|
||||||
<div class="song-artist">
|
<div class="song-artist">
|
||||||
{{#if item.artistUrl}}
|
{{#if item.artistUrl}}
|
||||||
<a href="#" {{action "gotoURL" item.artistUrl bubbles=false}}>{{item.artist}}</a>
|
<a href="#" {{action "gotoURL" item.artistUrl bubbles=false}}>{{item.artist}}</a>
|
||||||
{{else}}
|
{{else}}
|
||||||
{{item.artist}}
|
{{item.artist}}
|
||||||
{{/if}}
|
{{/if}}
|
||||||
</div>
|
</div>
|
||||||
{{else}}
|
{{else}}
|
||||||
|
|
@ -115,10 +129,11 @@
|
||||||
{{/if}}
|
{{/if}}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<span data-toggle="tooltip" data-placement="top auto" data-title="Remove" data-container="body" class="audio-remove-button pointer bootstrap-tooltip" {{action "removeAudio" index bubbles=false}}>{{paper-icon "close" classNames="close"}}</span>
|
<span data-toggle="tooltip" data-placement="top auto" data-title="Remove" data-container="body" class="audio-remove-button pointer bootstrap-tooltip"
|
||||||
|
{{action "removeAudio" index bubbles=false}}>{{paper-icon "close" classNames="close"}}</span>
|
||||||
</div>
|
</div>
|
||||||
{{/each}}
|
{{/each}}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -131,44 +146,53 @@
|
||||||
<div id="player-bottom" class="row {{if dimmerOn "dimmerOn"}} {{if playerBottomDisplayed "display-flex"}}">
|
<div id="player-bottom" class="row {{if dimmerOn "dimmerOn"}} {{if playerBottomDisplayed "display-flex"}}">
|
||||||
<div id="beat-area" class="col-sm-7 col-xs-12">
|
<div id="beat-area" class="col-sm-7 col-xs-12">
|
||||||
{{#if usingBeatPreferences}}
|
{{#if usingBeatPreferences}}
|
||||||
<span data-toggle="tooltip" data-placement="top" data-title="Using the saved sensitivity preference from the last time you listened to this song" class="bootstrap-tooltip" id="save-beat-preferences-star">
|
<span data-toggle="tooltip" data-placement="top" data-title="Using the saved sensitivity preference from the last time you listened to this song"
|
||||||
{{paper-icon "star" class=dimmerOnClass}}
|
class="bootstrap-tooltip" id="save-beat-preferences-star">
|
||||||
</span>
|
{{paper-icon "star" class=dimmerOnClass}}
|
||||||
|
</span>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
|
|
||||||
<div class="row" id="beat-option-row">
|
<div class="row" id="beat-option-row">
|
||||||
<div class="beat-option col-xs-4">
|
<div class="beat-option col-xs-4">
|
||||||
<span data-toggle="tooltip" data-placement="top" data-title="The range of hues ( colors ) that the lights may change to on beat." class="option-description bootstrap-tooltip">
|
<span data-toggle="tooltip" data-placement="top" data-title="The range of hues ( colors ) that the lights may change to on beat."
|
||||||
|
class="option-description bootstrap-tooltip">
|
||||||
Hue Range
|
Hue Range
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
{{range-slider start=hueRange orientation="vertical" step=beatOptions.hueRange.step range=beatOptions.hueRange.range connect=hueRangeConnect on-change="hueRangeChanged" pips=beatOptions.hueRange.pips}}
|
{{range-slider start=hueRange orientation="vertical" step=beatOptions.hueRange.step range=beatOptions.hueRange.range connect=hueRangeConnect
|
||||||
|
on-change="hueRangeChanged" pips=beatOptions.hueRange.pips}}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="beat-option col-xs-4">
|
<div class="beat-option col-xs-4">
|
||||||
<span data-toggle="tooltip" data-placement="top" data-title="The minimum ( off-beat ) and maximum ( on-beat ) brightness of the lights" class="option-description bootstrap-tooltip">
|
<span data-toggle="tooltip" data-placement="top" data-title="The minimum ( off-beat ) and maximum ( on-beat ) brightness of the lights"
|
||||||
|
class="option-description bootstrap-tooltip">
|
||||||
Brightness Range
|
Brightness Range
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
{{range-slider start=brightnessRange orientation="vertical" step=beatOptions.brightnessRange.step range=beatOptions.brightnessRange.range on-change="brightnessRangeChanged" pips=beatOptions.brightnessRange.pips}}
|
{{range-slider start=brightnessRange orientation="vertical" step=beatOptions.brightnessRange.step range=beatOptions.brightnessRange.range
|
||||||
|
on-change="brightnessRangeChanged" pips=beatOptions.brightnessRange.pips}}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="sensitivity-settings" class="beat-option col-xs-4">
|
<div id="sensitivity-settings" class="beat-option col-xs-4">
|
||||||
<span data-toggle="tooltip" data-placement="top" data-title="The sensitivity of the beat detector ( more sensitivity results in more registered beats )" class="option-description bootstrap-tooltip">
|
<span data-toggle="tooltip" data-placement="top" data-title="The sensitivity of the beat detector ( more sensitivity results in more registered beats )"
|
||||||
|
class="option-description bootstrap-tooltip">
|
||||||
Sensitivity
|
Sensitivity
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
{{range-slider start=threshold orientation="vertical" step=beatOptions.threshold.step range=beatOptions.threshold.range on-change="thresholdChanged" pips=beatOptions.threshold.pips}}
|
{{range-slider start=threshold orientation="vertical" step=beatOptions.threshold.step range=beatOptions.threshold.range on-change="thresholdChanged"
|
||||||
|
pips=beatOptions.threshold.pips}}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="light-option" class="col-xs-12">
|
<div id="light-option" class="col-xs-12">
|
||||||
<span data-toggle="tooltip" data-placement="top auto" data-title="Quickly flash the lights on beat" class="bootstrap-tooltip" {{action "hideTooltip" on="mouseLeave"}}>
|
<span data-toggle="tooltip" data-placement="top auto" data-title="Quickly flash the lights on beat" class="bootstrap-tooltip"
|
||||||
|
{{action "hideTooltip" on="mouseLeave"}}>
|
||||||
{{paper-checkbox value=flashingTransitions onChange=(action (mut flashingTransitions)) label="Flashing Transitions"}}
|
{{paper-checkbox value=flashingTransitions onChange=(action (mut flashingTransitions)) label="Flashing Transitions"}}
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
<span data-toggle="tooltip" data-placement="top auto" data-title="Slowly cycle the lights through all the colors" class="bootstrap-tooltip" {{action "hideTooltip" on="mouseLeave"}}>
|
<span data-toggle="tooltip" data-placement="top auto" data-title="Slowly cycle the lights through all the colors" class="bootstrap-tooltip"
|
||||||
{{paper-checkbox value=colorloopMode onChange=(action (mut colorloopMode)) label="Colorloop"}}
|
{{action "hideTooltip" on="mouseLeave"}}>
|
||||||
</span>
|
{{paper-checkbox value=colorloopMode onChange=(action (mut colorloopMode)) label="Colorloop"}}
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -23,7 +23,7 @@ body > .ember-view {
|
||||||
}
|
}
|
||||||
|
|
||||||
body, button {
|
body, button {
|
||||||
font-family: 'Slabo 27px', serif;
|
font-family: 'Raleway', sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
#huegasm {
|
#huegasm {
|
||||||
|
|
@ -37,12 +37,17 @@ body, button {
|
||||||
.footer {
|
.footer {
|
||||||
margin: 0 auto 10px auto;
|
margin: 0 auto 10px auto;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 800px;
|
max-width: 1200px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-around;
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media(min-width:767px) {
|
||||||
|
.footer {
|
||||||
|
padding: 0 9%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer-text {
|
.footer-text {
|
||||||
|
|
|
||||||
|
|
@ -44,13 +44,13 @@
|
||||||
text-align: right;
|
text-align: right;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: -10px;
|
top: -10px;
|
||||||
right: 10px;
|
right: -10px;
|
||||||
transform: scale(1.1);
|
transform: scale(1.1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.navigation-item {
|
.navigation-item {
|
||||||
font-size: 18px;
|
font-size: 20px;
|
||||||
padding: 0 10px 0 10px;
|
padding: 0 10px 0 10px;
|
||||||
&.active {
|
&.active {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
|
|
||||||
|
|
@ -58,7 +58,7 @@
|
||||||
.light-text {
|
.light-text {
|
||||||
width: 60px;
|
width: 60px;
|
||||||
word-wrap: break-word;
|
word-wrap: break-word;
|
||||||
padding: 0 10px;
|
padding: 0 7px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.light-text-content {
|
.light-text-content {
|
||||||
|
|
|
||||||
|
|
@ -300,9 +300,10 @@
|
||||||
}
|
}
|
||||||
.option-description {
|
.option-description {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
font-size: 20px;
|
font-size: 18px;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
padding: 10px 0;
|
||||||
}
|
}
|
||||||
button {
|
button {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
|
|
@ -466,6 +467,12 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media(max-width: 950px) and (min-width:768px) {
|
||||||
|
.option-description {
|
||||||
|
height: 55px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// mobile overrides
|
// mobile overrides
|
||||||
@media(max-width:767px) {
|
@media(max-width:767px) {
|
||||||
div#player-bottom {
|
div#player-bottom {
|
||||||
|
|
|
||||||
|
|
@ -18,6 +18,7 @@ md-checkbox .md-label {
|
||||||
}
|
}
|
||||||
|
|
||||||
.md-button {
|
.md-button {
|
||||||
|
font-size: 13px;
|
||||||
flex-direction: unset;
|
flex-direction: unset;
|
||||||
span {
|
span {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
|
||||||
Reference in a new issue