lone-cloud/huegasm
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

introjs theme, use ember.run.later instead of settimeout, minor fixes

Browse source
This commit is contained in:
Egor 2016-12-25 23:15:19 -08:00
parent adda6fa593
commit cff499a288
22 changed files with 75 additions and 234 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
mobile/app/pods/components/bridge-finder/component.js
View file

@ -6,6 +6,7 @@ const {
computed,
on,
isNone,
run: { later },
$
} = Ember;
@ -152,7 +153,9 @@ export default Component.extend({
type: 'POST'
}).fail(() => {
this.set('manualBridgeIpNotFound', true);
setTimeout(() => { this.set('manualBridgeIpNotFound', false); }, 5000);
later(this, function() {
this.set('manualBridgeIpNotFound', false);
}, 5000);
}).then(() => {
this.set('bridgeIp', manualBridgeIp);
});

29
mobile/app/pods/components/hue-controls/component.js
View file

@ -7,6 +7,7 @@ const {
isNone,
run,
inject,
run: { later },
$
} = Ember;
@ -76,7 +77,7 @@ export default Component.extend({
if(!this.get('trial')) {
this.updateLightData();
this.set('lightsDataIntervalHandle', setInterval(this.updateLightData.bind(this), 2000));
setInterval(this.updateLightData.bind(this), 2000);
}
if (!isNone(storage.get('huegasm.dimmerOn'))) {
@ -88,10 +89,22 @@ export default Component.extend({
this.set('selectedTab', this.get('storage').get('huegasm.selectedTab'));
}
// document.addEventListener('deviceready', () => {
// cordova.plugins.backgroundMode.setDefaults({
// silent: true
// });
//
// cordova.plugins.backgroundMode.enable();
// }, false);
document.addEventListener('backbutton', () => {
let index = (this.get('selectedTab') + 1) % this.tabList.length;
this.set('selectedTab', index);
this.get('storage').set('huegasm.selectedTab', index);
if(this.get('isShowingAddSoundCloudModal')){
this.set('isShowingAddSoundCloudModal', false);
} else {
let index = (this.get('selectedTab') + 1) % this.tabList.length;
this.set('selectedTab', index);
this.get('storage').set('huegasm.selectedTab', index);
}
}, false);
document.addEventListener('pause', () => {
@ -111,7 +124,9 @@ export default Component.extend({
this.get('notify').warning({html: '<div class="alert alert-warning" role="alert">Error retrieving data from your lights. Yikes.</div>'});
this.set('displayFailure', false);
setTimeout(()=>{ this.set('displayFailure', true); }, 30000);
later(this, function() {
this.set('displayFailure', true);
}, 30000);
}
};
@ -215,6 +230,10 @@ export default Component.extend({
]
});
intro.onexit(() => {
$('body').velocity('scroll', { duration: 200 });
});
// it's VERY ugly but it works... the jQuery massacre :'(
intro.onchange((element) => {
if(element.id === '' || element.id === 'music-tab' || element.id === 'playlist' || element.id === 'player-area' || element.id === 'beat-option-row' || element.id === 'beat-option-button-group' || element.id === 'beat-container' || element.id === 'using-mic-audio-tooltip' || element.nodeName === 'MD-MENU'){

2
mobile/app/pods/components/hue-controls/template.hbs
View file

@ -34,7 +34,7 @@
{{lights-tab active=(eq selectedTab 0) apiURL=apiURL lightsData=lightsData activeLights=activeLights syncLight=syncLight trial=trial colorLoopOn=colorLoopOn dimmerOn=dimmerOn playing=playing pauseLightUpdates=pauseLightUpdates}}
{{music-tab active=(eq selectedTab 1) apiURL=apiURL lightsData=lightsData activeLights=activeLights pauseLightUpdates=pauseLightUpdates dimmerOn=dimmerOn playing=playing storage=storage colorLoopOn=colorLoopOn action="startIntro"}}
{{music-tab active=(eq selectedTab 1) apiURL=apiURL lightsData=lightsData activeLights=activeLights pauseLightUpdates=pauseLightUpdates dimmerOn=dimmerOn playing=playing storage=storage colorLoopOn=colorLoopOn isShowingAddSoundCloudModal=isShowingAddSoundCloudModal action="startIntro"}}
{{else}}
{{paper-progress-circular diameter=100}}
{{/if}}

5
mobile/app/pods/components/lights-tab/component.js
View file

@ -5,6 +5,7 @@ const {
observer,
computed,
on,
run: { later },
$
} = Ember;
@ -207,11 +208,11 @@ export default Component.extend({
for (let key in lightsData) {
if (lightsData.hasOwnProperty(key)) {
setTimeout(updateLight, 2000, key);
later(this, updateLight, key, 2000);
}
}
setTimeout(()=>{this.onColorLoopOnChange();}, 2000);
later(this, this.onColorLoopOnChange, 2000);
clearInterval(this.get('strobeOnInervalHandle'));
}

3
mobile/app/pods/components/music-tab/add-soundcloud-sound-modal/component.js
View file

@ -6,6 +6,7 @@ const {
computed,
isEmpty,
isNone,
run: { later },
$
} = Ember;
@ -15,7 +16,7 @@ export default Component.extend({
onIsShowingModalChange: observer('isShowingModal', function(){
if(this.get('isShowingModal')){
this.set('url', null);
setTimeout(()=>{
later(this, function() {
$('md-input-container input').focus();
}, 500);
}

108
mobile/app/pods/components/music-tab/component.js
View file

@ -8,31 +8,10 @@ const {
isEmpty,
isNone,
$,
run
run: { later, next }
} = Ember;
export default Component.extend(helperMixin, visualizerMixin, {
onAmbienceModeChange: observer('ambienceMode', 'playing', function(){
if(this.get('ambienceMode') && this.get('playing')) {
this.set('ambienceModeHandle', setInterval(()=> {this.doAmbienceLightChange();}, 5000));
this.setProperties({
'colorloopMode': false,
'flashingTransitions': false
});
} else if(this.get('ambienceModeHandle')) {
this.get('activeLights').forEach((light)=>{
$.ajax(this.get('apiURL') + '/lights/' + light + '/state', {
data: JSON.stringify({'on': true}),
contentType: 'application/json',
type: 'PUT'
});
});
clearInterval(this.get('ambienceModeHandle'));
this.set('ambienceModeHandle', null);
}
}),
updatePageTitle: observer('playQueuePointer', function(){
let title = 'Huegasm',
playQueuePointer = this.get('playQueuePointer'),
@ -104,70 +83,6 @@ export default Component.extend(helperMixin, visualizerMixin, {
this.set('oldBeatPrefCache', newOldBeatPrefCache);
},
doAmbienceLightChange(justOneLight){
let activeLights = this.get('activeLights'),
lightsData = this.get('lightsData'),
workedLights = this.get('ambienceWorkedLights'),
hueRange = this.get('hueRange'),
ambienceWorkedLightsHandles = this.get('ambienceWorkedLightsHandles'),
lightOff = (light)=>{
if(this.get('ambienceMode') && this.get('playing')){
$.ajax(this.get('apiURL') + '/lights/' + light + '/state', {
data: JSON.stringify({'on': false, 'transitiontime': 20}),
contentType: 'application/json',
type: 'PUT'
});
}
},
lights = [],
transitionTime = Math.floor(Math.random()*20),
iterations = justOneLight ? 1 : activeLights.length/2;
// pick some random lights
for(let i=0; i < iterations; i++){
let l = activeLights[Math.floor(Math.random()*activeLights.length)];
if(!lights.includes(l) && !workedLights.includes(l)){
lights.push(l);
workedLights.push(l);
} else if(justOneLight && workedLights.length !== activeLights.length){ // work a light if we only need one
while(workedLights.includes(l)){
l = activeLights[Math.floor(Math.random()*activeLights.length)];
}
lights.push(l);
workedLights.push(l);
}
}
lights.forEach((light)=>{
let options = {'hue': Math.floor(Math.random()*(hueRange[1] - hueRange[0] + 1)+hueRange[0]), 'bri': Math.floor(Math.random()*200) + 1, 'transitiontime': transitionTime};
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'
});
// stop the light from turning off
if(ambienceWorkedLightsHandles[light]){
clearTimeout(ambienceWorkedLightsHandles[light]);
delete ambienceWorkedLightsHandles[light];
}
// turn the light off after it's been idle for a while
ambienceWorkedLightsHandles[light] = setTimeout(()=>{
lightOff(light);
workedLights.removeObject(light);
delete ambienceWorkedLightsHandles[light];
}, transitionTime * 100 + 1000);
});
},
clearCurrentAudio(resetPointer) {
let dancer = this.get('dancer');
@ -216,7 +131,7 @@ export default Component.extend(helperMixin, visualizerMixin, {
},
timeToBriOff = 100;
if(activeLights.length > 0 && !this.get('ambienceMode')){
if(activeLights.length > 0){
let lastLightBopIndex = this.get('lastLightBopIndex'),
lightBopIndex,
brightnessOnBeat = 254,
@ -245,17 +160,13 @@ export default Component.extend(helperMixin, visualizerMixin, {
}
stimulateLight(light, brightnessOnBeat, color);
setTimeout(stimulateLight, timeToBriOff, light, 1);
later(this, stimulateLight, light, 1, timeToBriOff);
}
this.set('paused', true);
setTimeout(() => {
later(this, function(){{
this.set('paused', false);
}, 150);
if(this.get('ambienceMode') && activeLights.length > 0){
this.doAmbienceLightChange(true);
}
}}, 150);
//work the music beat area - simulate the speaker vibration by running a CSS animation on it
$('#beat-speaker-center-outer').velocity({blur: 3}, 100).velocity({blur: 0}, 100);
@ -287,8 +198,7 @@ export default Component.extend(helperMixin, visualizerMixin, {
kick: kick
});
['shuffle', 'repeat', 'threshold', 'playerBottomDisplayed', 'audioMode', 'songBeatPreferences', 'firstVisit', 'currentVisName', 'playQueue', 'playQueuePointer', 'flashingTransitions', 'colorloopMode', 'ambienceMode', 'hueRange'].forEach((item)=>{
['shuffle', 'repeat', 'threshold', 'playerBottomDisplayed', 'audioMode', 'songBeatPreferences', 'firstVisit', 'currentVisName', 'playQueue', 'playQueuePointer', 'flashingTransitions', 'colorloopMode', 'hueRange'].forEach((item)=>{
if (!isNone(storage.get('huegasm.' + item))) {
let itemVal = storage.get('huegasm.' + item);
@ -305,7 +215,9 @@ export default Component.extend(helperMixin, visualizerMixin, {
});
document.addEventListener('pause', () => {
this.get('dancer').pause();
if(this.get('playing')){
this.send('play');
}
}, false);
},
@ -501,7 +413,7 @@ export default Component.extend(helperMixin, visualizerMixin, {
}
if(scrollToSong){
run.next(this, ()=>{
next(this, ()=>{
$('.track'+index).velocity('scroll', { container: $('#play-list-area'), duration: 200 });
});
}

7
mobile/app/pods/components/music-tab/mixins/helpers.js
View file

@ -82,14 +82,11 @@ export default Mixin.create({
playerBottomDisplayed: true,
dragging: false,
draggingOverPlayListArea: false,
dragLeaveTimeoutHandle: null,
ambienceModeHandle: null,
audioStream: null,
dimmerOn: false,
isShowingAddSoundCloudModal: false,
colorloopMode: false,
ambienceMode: false,
flashingTransitions: false,
// 0 - no repeat, 1 - repeat all, 2 - repeat one
@ -105,8 +102,6 @@ export default Mixin.create({
oldBeatPrefCache: null,
storage: null,
firstVisit: true,
ambienceWorkedLights: [],
ambienceWorkedLightsHandles: {},
soundCloudFuckUps: 0,
maxSoundCloudFuckUps: 3,
@ -256,7 +251,7 @@ export default Mixin.create({
this.set('colorLoopOn', this.get('playing') && this.get('colorloopMode'));
}),
onOptionChange: observer('flashingTransitions', 'playQueue.[]', 'playQueuePointer', 'colorloopMode', 'ambienceMode', function(self, option){
onOptionChange: observer('flashingTransitions', 'playQueue.[]', 'playQueuePointer', 'colorloopMode', function(self, option){
option = option.replace('.[]', '');
this.get('storage').set('huegasm.' + option, this.get(option));
}),

5
mobile/app/styles/introjs.scss
View file

@ -1,13 +1,8 @@
.introjs-overlay {
background: $blackish;
}
#settings.introjs-fixParent {
position: inherit !important;
}
.introjs-tooltip {
color: $blackish;
width: 300px;
}

1
mobile/bower.json
View file

@ -5,7 +5,6 @@
"bootstrap-sass": "^3.3.5",
"ember": "^2.10.0",
"ember-cli-shims": "^0.1.0",
"ember-load-initializers": "^0.5.1",
"ember-qunit-notifications": "0.1.0",
"hammer.js": "^2.0.8",
"intro.js": "^2.1.0",

2
mobile/config/environment.js
View file

@ -4,7 +4,7 @@ module.exports = function(environment) {
var ENV = {
modulePrefix: 'huegasm_mobile',
podModulePrefix: 'huegasm_mobile/pods',
environment: environment,
environment,
rootURL: '',
locationType: 'hash',
EmberENV: {

1
mobile/ember-cli-build.js
View file

@ -8,6 +8,7 @@ module.exports = function(defaults) {
app.import('bower_components/intro.js/intro.js');
app.import('bower_components/intro.js/introjs.css');
app.import('bower_components/intro.js/themes/introjs-nassim.css');
app.import('bower_components/JavaScript-ID3-Reader/dist/id3-minimized.js');
app.import('bower_components/locallyjs/dist/locally.min.js');
app.import('bower_components/velocity/velocity.js');

4
mobile/ember-cordova/cordova/config.xml
View file

@ -1,5 +1,5 @@
<?xml version='1.0' encoding='utf-8'?>
<widget id="com.nidratech.huegasm" version="1.1.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<widget id="com.nidratech.huegasm" version="1.2.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>Huegasm</name>
<description>
Huegasm is a free web application for managing and synchronizing your Philips Hue lights with the beat of your music.
@ -89,4 +89,6 @@
</platform>
<engine name="android" spec="~5.2.2" />
<preference name="ShowSplashScreenSpinner" value="false" />
<!--<plugin name="cordova-plugin-background-mode" spec="~0.6.5" />-->
<!--<plugin name="de.schchr.cordova.plugin.timers" spec="https://github.com/schchr/cordova-plugin-timers" />-->
</widget>

5
web/app/pods/components/bridge-finder/component.js
View file

@ -6,6 +6,7 @@ const {
computed,
on,
isNone,
run: { later },
$
} = Ember;
@ -142,7 +143,9 @@ export default Component.extend({
type: 'POST'
}).fail(() => {
this.set('manualBridgeIpNotFound', true);
setTimeout(() => { this.set('manualBridgeIpNotFound', false); }, 5000);
later(this, function(){
this.set('manualBridgeIpNotFound', false);
}, 5000);
}).then(() => {
this.set('bridgeIp', manualBridgeIp);
});

14
web/app/pods/components/hue-controls/component.js
View file

@ -6,7 +6,7 @@ const {
computed,
isEmpty,
isNone,
run,
run: { later },
inject,
$
} = Ember;
@ -76,7 +76,7 @@ export default Component.extend({
if(!this.get('trial')) {
this.updateLightData();
this.set('lightsDataIntervalHandle', setInterval(this.updateLightData.bind(this), 2000));
setInterval(this.updateLightData.bind(this), 2000);
}
if (!isNone(this.get('storage').get('huegasm.selectedTab'))) {
@ -92,7 +92,9 @@ export default Component.extend({
this.get('notify').warning({html: '<div class="alert alert-warning" role="alert">Error retrieving data from your lights. Yikes.</div>'});
this.set('displayFailure', false);
setTimeout(()=>{ this.set('displayFailure', true); }, 30000);
later(this, function() {
this.set('displayFailure', true);
}, 30000);
}
};
@ -198,6 +200,10 @@ export default Component.extend({
]
});
intro.onexit(() => {
$('body').velocity('scroll', { duration: 200 });
});
intro.onchange((element) => {
if(element.id === '' || element.id === 'music-tab' || element.id === 'playlist' || element.id === 'player-area' || element.id === 'beat-option-row' || element.id === 'beat-option-button-group' || element.id === 'beat-container' || element.id === 'using-mic-audio-tooltip' || element.nodeName === 'MD-MENU'){
$('.navigation-item').eq(1).click();
@ -221,7 +227,7 @@ export default Component.extend({
$('.introjs-nextbutton').click();
}
run.later(this, function() {
later(this, function() {
$('.introjs-tooltip').velocity('scroll', { offset: -100 });
}, 500);
}).start();

5
web/app/pods/components/lights-tab/component.js
View file

@ -5,6 +5,7 @@ const {
observer,
computed,
on,
run: { later },
$
} = Ember;
@ -208,11 +209,11 @@ export default Component.extend({
for (let key in lightsData) {
if (lightsData.hasOwnProperty(key)) {
setTimeout(updateLight, 2000, key);
later(this, updateLight, key, 2000);
}
}
setTimeout(()=>{this.onColorLoopOnChange();}, 2000);
later(this, this.onColorLoopOnChange, 2000);
clearInterval(this.get('strobeOnInervalHandle'));
}

3
web/app/pods/components/music-tab/add-soundcloud-sound-modal/component.js
View file

@ -6,6 +6,7 @@ const {
computed,
isEmpty,
isNone,
run: { later },
$
} = Ember;
@ -15,7 +16,7 @@ export default Component.extend({
onIsShowingModalChange: observer('isShowingModal', function(){
if(this.get('isShowingModal')){
this.set('url', null);
setTimeout(()=>{
later(function(){
$('md-input-container input').focus();
}, 500);
}

97
web/app/pods/components/music-tab/component.js
View file

@ -8,31 +8,10 @@ const {
isEmpty,
isNone,
$,
run
run: { later, next }
} = Ember;
export default Component.extend(helperMixin, visualizerMixin, {
onAmbienceModeChange: observer('ambienceMode', 'playing', function(){
if(this.get('ambienceMode') && this.get('playing')) {
this.set('ambienceModeHandle', setInterval(()=> {this.doAmbienceLightChange();}, 5000));
this.setProperties({
'colorloopMode': false,
'flashingTransitions': false
});
} else if(this.get('ambienceModeHandle')) {
this.get('activeLights').forEach((light)=>{
$.ajax(this.get('apiURL') + '/lights/' + light + '/state', {
data: JSON.stringify({'on': true}),
contentType: 'application/json',
type: 'PUT'
});
});
clearInterval(this.get('ambienceModeHandle'));
this.set('ambienceModeHandle', null);
}
}),
updatePageTitle: observer('playQueuePointer', function(){
let title = 'Huegasm',
playQueuePointer = this.get('playQueuePointer'),
@ -104,70 +83,6 @@ export default Component.extend(helperMixin, visualizerMixin, {
this.set('oldBeatPrefCache', newOldBeatPrefCache);
},
doAmbienceLightChange(justOneLight){
let activeLights = this.get('activeLights'),
lightsData = this.get('lightsData'),
workedLights = this.get('ambienceWorkedLights'),
hueRange = this.get('hueRange'),
ambienceWorkedLightsHandles = this.get('ambienceWorkedLightsHandles'),
lightOff = (light)=>{
if(this.get('ambienceMode') && this.get('playing')){
$.ajax(this.get('apiURL') + '/lights/' + light + '/state', {
data: JSON.stringify({'on': false, 'transitiontime': 20}),
contentType: 'application/json',
type: 'PUT'
});
}
},
lights = [],
transitionTime = Math.floor(Math.random()*20),
iterations = justOneLight ? 1 : activeLights.length/2;
// pick some random lights
for(let i=0; i < iterations; i++){
let l = activeLights[Math.floor(Math.random()*activeLights.length)];
if(!lights.includes(l) && !workedLights.includes(l)){
lights.push(l);
workedLights.push(l);
} else if(justOneLight && workedLights.length !== activeLights.length){ // work a light if we only need one
while(workedLights.includes(l)){
l = activeLights[Math.floor(Math.random()*activeLights.length)];
}
lights.push(l);
workedLights.push(l);
}
}
lights.forEach((light)=>{
let options = {'hue': Math.floor(Math.random()*(hueRange[1] - hueRange[0] + 1)+hueRange[0]), 'bri': Math.floor(Math.random()*200) + 1, 'transitiontime': transitionTime};
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'
});
// stop the light from turning off
if(ambienceWorkedLightsHandles[light]){
clearTimeout(ambienceWorkedLightsHandles[light]);
delete ambienceWorkedLightsHandles[light];
}
// turn the light off after it's been idle for a while
ambienceWorkedLightsHandles[light] = setTimeout(()=>{
lightOff(light);
workedLights.removeObject(light);
delete ambienceWorkedLightsHandles[light];
}, transitionTime * 100 + 1000);
});
},
clearCurrentAudio(resetPointer) {
let dancer = this.get('dancer');
@ -259,18 +174,14 @@ export default Component.extend(helperMixin, visualizerMixin, {
}
stimulateLight(light, brightnessOnBeat, color);
setTimeout(stimulateLight, timeToBriOff, light, 1);
later(this, stimulateLight, light, 1, timeToBriOff);
}
this.set('paused', true);
setTimeout(() => {
later(this, function(){
this.set('paused', false);
}, 150);
if(this.get('ambienceMode') && activeLights.length > 0){
this.doAmbienceLightChange(true);
}
//work the music beat area - simulate the speaker vibration by running a CSS animation on it
$('#beat-speaker-center-outer').velocity({blur: 3}, 100).velocity({blur: 0}, 100);
$('#beat-speaker-center-inner').velocity({scale: 1.05}, 100).velocity({scale: 1}, 100);
@ -537,7 +448,7 @@ export default Component.extend(helperMixin, visualizerMixin, {
if(scrollToSong){
// this is just a bad workaround to make sure that the track has been rendered to the playlist
run.next(this, ()=>{
next(this, ()=>{
$('.track'+index).velocity('scroll', { container: $('#play-list-area'), duration: 200 });
});
}

4
web/app/pods/components/music-tab/mixins/helpers.js
View file

@ -85,13 +85,11 @@ export default Mixin.create({
dragging: false,
draggingOverPlayListArea: false,
dragLeaveTimeoutHandle: null,
ambienceModeHandle: null,
audioStream: null,
dimmerOn: false,
isShowingAddSoundCloudModal: false,
colorloopMode: false,
ambienceMode: false,
flashingTransitions: false,
// 0 - no repeat, 1 - repeat all, 2 - repeat one
@ -108,8 +106,6 @@ export default Mixin.create({
oldBeatPrefCache: null,
storage: null,
firstVisit: true,
ambienceWorkedLights: [],
ambienceWorkedLightsHandles: {},
soundCloudFuckUps: 0,
maxSoundCloudFuckUps: 3,

2
web/app/styles/hue-controls.scss
View file

@ -46,7 +46,7 @@
z-index: 3;
text-align: right;
position: absolute;
top: 5px;
top: -10px;
right: 10px;
transform: scale(1.1);
}

5
web/app/styles/introjs.scss
View file

@ -1,13 +1,8 @@
.introjs-overlay {
background: $blackish;
}
#settings.introjs-fixParent {
position: inherit !important;
}
.introjs-tooltip {
color: $blackish;
width: 300px;
}

1
web/bower.json
View file

@ -5,7 +5,6 @@
"bootstrap-sass": "^3.3.5",
"ember": "^2.10.0",
"ember-cli-shims": "^0.1.0",
"ember-load-initializers": "0.5.1",
"ember-qunit-notifications": "0.1.0",
"hammer.js": "^2.0.8",
"intro.js": "^2.1.0",

1
web/ember-cli-build.js
View file

@ -9,6 +9,7 @@ module.exports = function(defaults) {
app.import('bower_components/bootstrap-sass/assets/javascripts/bootstrap/tooltip.js');
app.import('bower_components/intro.js/intro.js');
app.import('bower_components/intro.js/introjs.css');
app.import('bower_components/intro.js/themes/introjs-nassim.css');
app.import('bower_components/JavaScript-ID3-Reader/dist/id3-minimized.js');
app.import('bower_components/jquery-mousewheel/jquery.mousewheel.js');
app.import('bower_components/locallyjs/dist/locally.min.js');