diff --git a/app/index.html b/app/index.html index 840c533..b20695a 100644 --- a/app/index.html +++ b/app/index.html @@ -17,8 +17,8 @@ - - + + {{content-for 'head-footer'}} diff --git a/app/pods/components/music-tab/component.js b/app/pods/components/music-tab/component.js index 3783078..9601bd6 100644 --- a/app/pods/components/music-tab/component.js +++ b/app/pods/components/music-tab/component.js @@ -16,62 +16,17 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, { }.observes('active'), actions: { - search: function(){ - var q = $('#query').val(), doSearch = function(){ - var request = gapi.client.youtube.search.list({ - q: q, - part: 'snippet', - key: 'AIzaSyAkwv6RD184j6o5wRfblYWNlV_njt6RXIc' - }); - - request.execute(function(response) { - var str = JSON.stringify(response.result); - $('#search-container').html('
' + str + '
'); - }); - }; - if(!gapi.client.youtube){ - gapi.client.load('youtube', 'v3', doSearch); - } else { - doSearch(); - } - }, - useYoutubeAudio: function(){ - var audioStream = this.get('audioStream'); - - this.changePlayerControl('audioMode', 2); - - if(!Em.isNone(audioStream)){ - audioStream.stop(); - this.set('audioStream', null); - } - - var onPlayerReady = function(){ - console.log('ready'); - }, onPlayerStateChange = function(){ - console.log('onPlayerStateChange'); - }, onError = function(err){ - console.log('onError' + err.data); - }; - - var youtubePlayer = new YT.Player('playerArea', { - videoId: 'Mc8LjwZvxHw' - }); - - var audio = new Audio(), dancer = this.get('dancer'); - audio.src = "https://www.youtube.com/embed/Mc8LjwZvxHw?enablejsapi=1&origin=http%3A%2F%2Flocalhost%3A4200"; - dancer.load(audio); - dancer.play(); - - this.set('youtubePlayer', youtubePlayer); - document.title = 'Youtube - Huegasm'; - }, useLocalAudio: function(){ var audioStream = this.get('audioStream'); this.changePlayerControl('audioMode', 0); if(!Em.isNone(audioStream)){ audioStream.stop(); - this.set('audioStream', null); + + this.setProperties({ + audioStream: null, + playing: false + }); } if(this.get('playQueuePointer') !== -1) { @@ -82,7 +37,11 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, { document.title = 'Huegasm'; }, useMicAudio() { - this.startUsingMic(); + if(this.get('usingMicAudio')) { + this.send('useLocalAudio'); + } else { + this.startUsingMic(); + } }, slideTogglePlayerBottom(){ this.changePlayerControl('playerBottomDisplayed', !this.get('playerBottomDisplayed')); @@ -337,7 +296,7 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, { dancer.setVolume(0); }, (err) => { - if(err.name == 'DevicesNotFoundError'){ + if(err.name === 'DevicesNotFoundError'){ this.get('notify').alert({html: this.get('notFoundHtml')}); } @@ -559,9 +518,5 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, { event.preventDefault(); } }); - - if(this.get('audioMode') === 2){ - this.send('useYoutubeAudio'); - } } }); diff --git a/app/pods/components/music-tab/mixins/music-tab.js b/app/pods/components/music-tab/mixins/music-tab.js index 0ff5795..823a85e 100644 --- a/app/pods/components/music-tab/mixins/music-tab.js +++ b/app/pods/components/music-tab/mixins/music-tab.js @@ -78,11 +78,10 @@ export default Em.Mixin.create({ lastLightBopIndex: 0, usingMicSupported: true, - // 0 - local, 1 - mic, 2 - youtube + // 0 - local, 1 - mic, possibly more to come audioMode: 0, usingLocalAudio: Em.computed.equal('audioMode', 0), usingMicAudio: Em.computed.equal('audioMode', 1), - usingYoutubeAudio: Em.computed.equal('audioMode', 2), playerBottomDisplayed: false, dragging: false, @@ -118,7 +117,6 @@ export default Em.Mixin.create({ paused: false, // audio: playing or paused playing: false, - youtubePlayer: null, fadeOutNotification: false, speakerViewed: true, @@ -167,6 +165,14 @@ export default Em.Mixin.create({ } }, + micIcon: function () { + if (this.get('usingMicAudio')) { + return 'mic'; + } + + return 'mic-off'; + }.property('usingMicAudio'), + repeatIcon: function () { if (this.get('repeat') === 2) { return 'repeat-one'; @@ -207,10 +213,6 @@ export default Em.Mixin.create({ return this.get('usingMicAudio') ? 'playerControllIcon active' : 'playerControllIcon'; }.property('usingMicAudio'), - usingYoutubeAudioClass: function() { - return this.get('usingYoutubeAudio') ? 'playerControllIcon active' : 'playerControllIcon'; - }.property('usingYoutubeAudio'), - repeatClass: function () { return this.get('repeat') !== 0 ? 'playerControllIcon active' : 'playerControllIcon'; }.property('repeat'), @@ -320,9 +322,9 @@ export default Em.Mixin.create({ beatDetectionArrowIcon: function(){ if(!this.get('playerBottomDisplayed')){ - return 'angle-double-down'; + return 'keyboard-arrow-down'; } else { - return 'angle-double-up'; + return 'keyboard-arrow-up'; } }.property('playerBottomDisplayed'), diff --git a/app/pods/components/music-tab/template.hbs b/app/pods/components/music-tab/template.hbs index b4ed025..80606ef 100644 --- a/app/pods/components/music-tab/template.hbs +++ b/app/pods/components/music-tab/template.hbs @@ -1,15 +1,14 @@
- {{#if (or usingLocalAudio usingMicAudio)}} -
-
-
- {{#if usingLocalAudio}} - {{range-slider start=seekPosition min=0 max=100 id="seekSlider" slide="seekChanged"}} +
+
+
+ {{#if usingLocalAudio}} + {{range-slider start=seekPosition min=0 max=100 id="seekSlider" slide="seekChanged"}} - {{#if playQueueMultiple}} - {{paper-icon icon="skip-previous" class="playerControllIcon"}}{{/if}}{{paper-icon icon=playingIcon class="playerControllIcon"}}{{range-slider start=volume min=0 max=100 slide="volumeChanged" id="volumeBar"}} -
{{timeElapsedTxt}} / {{timeTotalTxt}}
- {{/if}} +
{{timeElapsedTxt}} / {{timeTotalTxt}}
+ {{/if}} - + {{paper-icon icon="remove-red-eye" class="playerControllIcon"}} @@ -32,185 +31,165 @@ data-title="Full screen" {{action "fullscreen"}}>{{paper-icon icon="fullscreen" class="playerControllIcon"}} -
- {{else}} -
-
- {{/if}} +
-
- +
+ -
+
+ {{#if usingLocalAudio}} + {{paper-icon icon="add" class="playerControllIcon"}} + {{paper-icon icon="shuffle" class=shuffleClass}} + {{paper-icon icon=repeatIcon class=repeatClass}} + {{/if}} - {{fa-icon "music" classNames=usingLocalAudioClass}} - {{fa-icon 'youtubeWorkaround' classNames=usingYoutubeAudioClass}} - {{#if usingMicSupported}} - {{fa-icon "microphone" classNames=usingMicAudioClass}} - {{/if}} - - {{#if usingLocalAudio}} - {{paper-icon icon="add" class="playerControllIcon"}} - {{paper-icon icon="shuffle" class=shuffleClass}} - {{paper-icon icon=repeatIcon class=repeatClass}} - {{/if}} -
- - {{#if usingMicAudio}} -
- {{paper-icon icon="mic"}} -
- {{else}} - {{#if usingLocalAudio}} -
- {{#if (or playQueueEmpty dragging)}} -
- {{#if dragging}} - Drag your music files here - {{else}} - Add your music files here - {{/if}} -
- {{paper-icon icon="library-music"}} - {{/if}} - - {{#each playQueue as |item index|}} -
- {{#if item.title}} - {{item.title}} -
{{item.artist}}
- {{else}} - {{item.filename}} - {{/if}} -
{{paper-icon icon="close"}}
-
- {{/each}} -
- {{else}} -
-
- -
-
-
- -
- {{/if}} + {{#if usingMicSupported}} + {{paper-icon icon=micIcon class=usingMicAudioClass}} {{/if}}
+ + {{#if usingMicAudio}} +
+ {{paper-icon icon="mic"}} +
+ {{else}} + {{#if usingLocalAudio}} +
+ {{#if (or playQueueEmpty dragging)}} +
+ {{#if dragging}} + Drag your music files here + {{else}} + Add your music files here + {{/if}} +
+ {{paper-icon icon="library-music"}} + {{/if}} + + {{#each playQueue as |item index|}} +
+ {{#if item.title}} + {{item.title}} +
{{item.artist}}
+ {{else}} + {{item.filename}} + {{/if}} +
{{paper-icon icon="close"}}
+
+ {{/each}} +
+ {{/if}} + {{/if}} +
-
- {{fa-icon beatDetectionArrowIcon}} -
-
- {{fa-icon beatDetectionArrowIcon}} -
+
+ {{paper-icon icon=beatDetectionArrowIcon}} +
{{#if playerBottomDisplayed}} -
-
-
-
-
{{threshold}}
- {{range-slider start=threshold orientation="vertical" step=beatOptions.threshold.step range=beatOptions.threshold.range slide="thresholdChanged" pips=beatOptions.threshold.pips}} - Max. Intensity -
- -
-
{{decay}}
- {{range-slider start=decay orientation="vertical" step=beatOptions.decay.step range=beatOptions.decay.range slide="decayChanged" pips=beatOptions.decay.pips}} - Decay Rate -
- -
-
[{{#each frequency as |item index|}}{{item}}{{#unless index}} - ,{{/unless}}{{/each}} - ] -
- {{range-slider start=frequency orientation="vertical" step=beatOptions.frequency.step range=beatOptions.frequency.range connect=true slide="frequencyChanged" pips=beatOptions.frequency.pips}} - Frequency Range -
- -
-
{{transitionTime}} sec
- {{range-slider start=transitionTime orientation="vertical" step=beatOptions.transitionTime.step range=beatOptions.transitionTime.range slide="transitionTimeChanged" pips=beatOptions.transitionTime.pips}} - Transition Time -
-
- -
-
- {{#paper-switch checked=randomTransition disabled=trial}}{{randomTransitionLabel}}{{/paper-switch}} -
-
- {{#paper-switch checked=onBeatBriAndColor disabled=trial}} {{onBeatBriAndColorLabel}}{{/paper-switch}} -
-
- -
- {{#paper-button raised=true warn=true action="defaultControls"}}Default{{/paper-button}} - {{#if usingLocalAudio}} - {{#paper-button raised=true action="saveSongSettings"}}Save Song Settings{{/paper-button}} - {{/if}} -
+
+
+
+
+
{{threshold}}
+ {{range-slider start=threshold orientation="vertical" step=beatOptions.threshold.step range=beatOptions.threshold.range slide="thresholdChanged" pips=beatOptions.threshold.pips}} + Max. Intensity
-
- {{#if speakerViewed}} -
-
-
-
-
-
-
-
- -
-
-
-
-
- {{else}} -
- {{#each beatHistory as |item|}} -

{{{item}}}

- {{/each}} -
- {{/if}} - - {{#paper-switch checked=speakerViewed}} {{speakerLabel}} {{/paper-switch}} +
+
{{decay}}
+ {{range-slider start=decay orientation="vertical" step=beatOptions.decay.step range=beatOptions.decay.range slide="decayChanged" pips=beatOptions.decay.pips}} + Decay Rate
+ +
+
[{{#each frequency as |item index|}}{{item}}{{#unless index}} + ,{{/unless}}{{/each}} + ] +
+ {{range-slider start=frequency orientation="vertical" step=beatOptions.frequency.step range=beatOptions.frequency.range connect=true slide="frequencyChanged" pips=beatOptions.frequency.pips}} + Frequency Range +
+ +
+
{{transitionTime}} sec
+ {{range-slider start=transitionTime orientation="vertical" step=beatOptions.transitionTime.step range=beatOptions.transitionTime.range slide="transitionTimeChanged" pips=beatOptions.transitionTime.pips}} + Transition Time +
+
+ +
+
+ {{#paper-switch checked=randomTransition disabled=trial}}{{randomTransitionLabel}}{{/paper-switch}} +
+
+ {{#paper-switch checked=onBeatBriAndColor disabled=trial}} {{onBeatBriAndColorLabel}}{{/paper-switch}} +
+
+ +
+ {{#paper-button raised=true warn=true action="defaultControls"}}Default{{/paper-button}} + {{#if usingLocalAudio}} + {{#paper-button raised=true action="saveSongSettings"}}Save Song Settings{{/paper-button}} + {{/if}} +
+ +
+ {{#if speakerViewed}} +
+
+
+
+
+
+
+
+ +
+
+
+
+
+ {{else}} +
+ {{#each beatHistory as |item|}} +

{{{item}}}

+ {{/each}} +
+ {{/if}} + + {{#paper-switch checked=speakerViewed}} {{speakerLabel}} {{/paper-switch}} +
+
{{/if}} {{ember-notify closeAfter=5000}} -
\ No newline at end of file + \ No newline at end of file diff --git a/app/styles/app.scss b/app/styles/app.scss index 9309ee6..5bc3ed1 100644 --- a/app/styles/app.scss +++ b/app/styles/app.scss @@ -1,6 +1,5 @@ @import 'ember-paper'; @import 'bower_components/bootstrap-sass/assets/stylesheets/_bootstrap'; -@import "bower_components/font-awesome/scss/font-awesome"; @import 'ember-modal-dialog/ember-modal-structure'; @import 'ember-modal-dialog/ember-modal-appearance'; @@ -147,6 +146,7 @@ md-progress-linear { } .bootstrapTooltip md-icon { + font-size: 22px; cursor: pointer; } @@ -401,21 +401,11 @@ md-toolbar { padding: 0; } -.zIndexTwo { - z-index: 2; -} - -.#{$fa-css-prefix}-youtubeWorkaround:before { - content: $fa-var-youtube-play; - font-size: 22px; -} - #slideToggle { color: $playerDefaultIconColor; background: #8C3E3E; z-index: 2; - div i { - font-size: 25px; + div md-icon { color: inherit !important; } } @@ -451,6 +441,12 @@ md-switch.md-default-theme.md-checked .md-thumb { } } +.pull-right.bootstrapTooltip { + .playerControllIcon { + margin: 0; + } +} + #playerTimeControls { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; @@ -461,15 +457,9 @@ md-switch.md-default-theme.md-checked .md-thumb { } .playerControllIcon { - cursor: pointer; color: $playerDefaultIconColor !important; transition-duration: 0.1s; - margin-right: 10px; -} - -i.playerControllIcon { - font-size: 20px; - margin-right: 12px; + margin-right: 5px; } .playerControllIcon.active { @@ -520,8 +510,7 @@ i.playerControllIcon { #playlist { height: $playerHeight; background-color: $playListBackgroundColor; - padding-left: 0.625em; - padding-right: 0.625em; + padding: 0 5px 0 5px; z-index: 2; } @@ -596,16 +585,15 @@ i.playerControllIcon { } #playListControls { - min-height: 35px; - margin-top: 10px; - padding-bottom: 10px; + min-height: 30px; + margin-top: 5px; border-bottom: 1px solid #3a3a3a; } #playListArea, #playAreaMic, #playAreaYoutube { background-color: white; width: 100%; - height: 333px; + height: 350px; margin: 10px auto 0 auto; border-radius: 5px; transition: 0.1s all ease-in-out; @@ -752,11 +740,12 @@ i.playerControllIcon { } #beatHistory { + border: 1px solid #C5C5C5; color: black; height: 300px; background-color: white; border-radius: 10px; - width: 90%; + width: 285px; margin: 0 auto 20px auto; overflow: auto; padding: 10px; diff --git a/bower.json b/bower.json index fc22663..e7ab49b 100644 --- a/bower.json +++ b/bower.json @@ -18,13 +18,10 @@ "matchMedia": "~0.2.0", "nouislider": "^8.0.1", "qunit": "~1.18.0", - "three.js": "~0.71.0", - "font-awesome": "~4.4.0" + "three.js": "~0.71.0" }, "resolutions": { "ember": "~2.0.2", - "jquery": "~2.1.4", - "ember-qunit": "0.4.9", - "qunit": "~1.18.0" + "jquery": "~2.1.4" } } diff --git a/package.json b/package.json index 297e588..d7914de 100644 --- a/package.json +++ b/package.json @@ -25,7 +25,6 @@ "ember-cli-babel": "^5.0.0", "ember-cli-content-security-policy": "0.4.0", "ember-cli-dependency-checker": "^1.0.0", - "ember-cli-font-awesome": "0.1.1", "ember-cli-htmlbars": "1.0.0", "ember-cli-htmlbars-inline-precompile": "^0.3.0", "ember-cli-ic-ajax": "0.2.1",