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

no youtube integration :(

Browse source
This commit is contained in:
lone-cloud 2015-10-06 12:58:33 -07:00
parent 6d95b8c666
commit df720cd978
7 changed files with 196 additions and 275 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
app/index.html
View file

@ -17,8 +17,8 @@
<link rel="stylesheet" href="assets/vendor.css"> <link rel="stylesheet" href="assets/vendor.css">
<link rel="stylesheet" href="assets/huegasm.css"> <link rel="stylesheet" href="assets/huegasm.css">
<script src="http://apis.google.com/js/client.js"></script> <!--<script src="//apis.google.com/js/client.js"></script>-->
<script src="http://www.youtube.com/iframe_api"></script> <!--<script src="//www.youtube.com/iframe_api"></script>-->
{{content-for 'head-footer'}} {{content-for 'head-footer'}}
</head> </head>

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

@ -16,62 +16,17 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
}.observes('active'), }.observes('active'),
actions: { 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('<pre>' + str + '</pre>');
});
};
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(){ useLocalAudio: function(){
var audioStream = this.get('audioStream'); var audioStream = this.get('audioStream');
this.changePlayerControl('audioMode', 0); this.changePlayerControl('audioMode', 0);
if(!Em.isNone(audioStream)){ if(!Em.isNone(audioStream)){
audioStream.stop(); audioStream.stop();
this.set('audioStream', null);
this.setProperties({
audioStream: null,
playing: false
});
} }
if(this.get('playQueuePointer') !== -1) { if(this.get('playQueuePointer') !== -1) {
@ -82,7 +37,11 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
document.title = 'Huegasm'; document.title = 'Huegasm';
}, },
useMicAudio() { useMicAudio() {
this.startUsingMic(); if(this.get('usingMicAudio')) {
this.send('useLocalAudio');
} else {
this.startUsingMic();
}
}, },
slideTogglePlayerBottom(){ slideTogglePlayerBottom(){
this.changePlayerControl('playerBottomDisplayed', !this.get('playerBottomDisplayed')); this.changePlayerControl('playerBottomDisplayed', !this.get('playerBottomDisplayed'));
@ -337,7 +296,7 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
dancer.setVolume(0); dancer.setVolume(0);
}, },
(err) => { (err) => {
if(err.name == 'DevicesNotFoundError'){ if(err.name === 'DevicesNotFoundError'){
this.get('notify').alert({html: this.get('notFoundHtml')}); this.get('notify').alert({html: this.get('notFoundHtml')});
} }
@ -559,9 +518,5 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
event.preventDefault(); event.preventDefault();
} }
}); });
if(this.get('audioMode') === 2){
this.send('useYoutubeAudio');
}
} }
}); });

20
app/pods/components/music-tab/mixins/music-tab.js
View file

@ -78,11 +78,10 @@ export default Em.Mixin.create({
lastLightBopIndex: 0, lastLightBopIndex: 0,
usingMicSupported: true, usingMicSupported: true,
// 0 - local, 1 - mic, 2 - youtube // 0 - local, 1 - mic, possibly more to come
audioMode: 0, audioMode: 0,
usingLocalAudio: Em.computed.equal('audioMode', 0), usingLocalAudio: Em.computed.equal('audioMode', 0),
usingMicAudio: Em.computed.equal('audioMode', 1), usingMicAudio: Em.computed.equal('audioMode', 1),
usingYoutubeAudio: Em.computed.equal('audioMode', 2),
playerBottomDisplayed: false, playerBottomDisplayed: false,
dragging: false, dragging: false,
@ -118,7 +117,6 @@ export default Em.Mixin.create({
paused: false, paused: false,
// audio: playing or paused // audio: playing or paused
playing: false, playing: false,
youtubePlayer: null,
fadeOutNotification: false, fadeOutNotification: false,
speakerViewed: true, 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 () { repeatIcon: function () {
if (this.get('repeat') === 2) { if (this.get('repeat') === 2) {
return 'repeat-one'; return 'repeat-one';
@ -207,10 +213,6 @@ export default Em.Mixin.create({
return this.get('usingMicAudio') ? 'playerControllIcon active' : 'playerControllIcon'; return this.get('usingMicAudio') ? 'playerControllIcon active' : 'playerControllIcon';
}.property('usingMicAudio'), }.property('usingMicAudio'),
usingYoutubeAudioClass: function() {
return this.get('usingYoutubeAudio') ? 'playerControllIcon active' : 'playerControllIcon';
}.property('usingYoutubeAudio'),
repeatClass: function () { repeatClass: function () {
return this.get('repeat') !== 0 ? 'playerControllIcon active' : 'playerControllIcon'; return this.get('repeat') !== 0 ? 'playerControllIcon active' : 'playerControllIcon';
}.property('repeat'), }.property('repeat'),
@ -320,9 +322,9 @@ export default Em.Mixin.create({
beatDetectionArrowIcon: function(){ beatDetectionArrowIcon: function(){
if(!this.get('playerBottomDisplayed')){ if(!this.get('playerBottomDisplayed')){
return 'angle-double-down'; return 'keyboard-arrow-down';
} else { } else {
return 'angle-double-up'; return 'keyboard-arrow-up';
} }
}.property('playerBottomDisplayed'), }.property('playerBottomDisplayed'),

331
app/pods/components/music-tab/template.hbs
View file

@ -1,15 +1,14 @@
<div class="row"> <div class="row">
{{#if (or usingLocalAudio usingMicAudio)}} <div id="playerArea" class="col-sm-8 col-xs-12" {{action "playerAreaPlay"}}>
<div id="playerArea" class="col-sm-8 col-xs-12" {{action "playerAreaPlay"}}> <div id="playNotification"
<div id="playNotification" class="material-icons {{if fadeOutNotification "fadeOut"}} {{if playing "play-arrow" "pause"}}"></div>
class="material-icons {{if fadeOutNotification "fadeOut"}} {{if playing "play-arrow" "pause"}}"></div> <div id="playerControls">
<div id="playerControls"> {{#if usingLocalAudio}}
{{#if usingLocalAudio}} {{range-slider start=seekPosition min=0 max=100 id="seekSlider" slide="seekChanged"}}
{{range-slider start=seekPosition min=0 max=100 id="seekSlider" slide="seekChanged"}}
{{#if playQueueMultiple}} {{#if playQueueMultiple}}
<span data-toggle="tooltip" data-placement="top" class="bootstrapTooltip" id="prevTooltip" <span data-toggle="tooltip" data-placement="top" class="bootstrapTooltip" id="prevTooltip"
data-title={{prevTooltipTxt}} {{action "previous"}}>{{paper-icon icon="skip-previous" class="playerControllIcon"}}</span><!-- data-title={{prevTooltipTxt}} {{action "previous"}}>{{paper-icon icon="skip-previous" class="playerControllIcon"}}</span><!--
-->{{/if}}<!-- -->{{/if}}<!--
--><span data-toggle="tooltip" data-placement="top" id="playingTooltip" class="bootstrapTooltip" --><span data-toggle="tooltip" data-placement="top" id="playingTooltip" class="bootstrapTooltip"
data-title={{playingTooltipTxt}} {{action "play"}}>{{paper-icon icon=playingIcon class="playerControllIcon"}}</span><!-- data-title={{playingTooltipTxt}} {{action "play"}}>{{paper-icon icon=playingIcon class="playerControllIcon"}}</span><!--
@ -21,10 +20,10 @@
data-title={{volumeMutedTooltipTxt}} {{action "volumeMutedChanged"}}>{{paper-icon icon=volumeClass class="playerControllIcon volumeButton"}}</span><!-- data-title={{volumeMutedTooltipTxt}} {{action "volumeMutedChanged"}}>{{paper-icon icon=volumeClass class="playerControllIcon volumeButton"}}</span><!--
-->{{range-slider start=volume min=0 max=100 slide="volumeChanged" id="volumeBar"}} -->{{range-slider start=volume min=0 max=100 slide="volumeChanged" id="volumeBar"}}
<div id="playerTimeControls">{{timeElapsedTxt}} / {{timeTotalTxt}}</div> <div id="playerTimeControls">{{timeElapsedTxt}} / {{timeTotalTxt}}</div>
{{/if}} {{/if}}
<span class="pull-right"> <span class="pull-right">
<span data-toggle="tooltip" data-placement="top" class="bootstrapTooltip" <span data-toggle="tooltip" data-placement="top" class="bootstrapTooltip"
data-title="Visualizations" {{action "toggleVisualizations"}}>{{paper-icon icon="remove-red-eye" class="playerControllIcon"}} data-title="Visualizations" {{action "toggleVisualizations"}}>{{paper-icon icon="remove-red-eye" class="playerControllIcon"}}
</span> </span>
@ -32,185 +31,165 @@
data-title="Full screen" {{action "fullscreen"}}>{{paper-icon icon="fullscreen" class="playerControllIcon"}} data-title="Full screen" {{action "fullscreen"}}>{{paper-icon icon="fullscreen" class="playerControllIcon"}}
</span> </span>
</span> </span>
</div>
</div> </div>
{{else}} </div>
<div id="playerArea" class="col-sm-8 col-xs-12">
</div>
{{/if}}
<div id="playlist" class="col-sm-4 col-xs-12"> <div id="playlist" class="col-sm-4 col-xs-12">
<input id="fileInput" type="file" accept="audio/*" multiple="true"/> <input id="fileInput" type="file" accept="audio/*" multiple="true"/>
<div id="playListControls"> <div id="playListControls">
{{#if usingLocalAudio}}
<span data-toggle="tooltip" data-placement="bottom auto" data-title="Add new music"
class="pull-right bootstrapTooltip" {{action "addAudio"}}>{{paper-icon icon="add" class="playerControllIcon"}}</span>
<span data-toggle="tooltip" data-placement="bottom auto" class="bootstrapTooltip"
id="shuffleTooltip"
data-title={{shuffleTooltipTxt}} {{action "shuffleChanged"}}>{{paper-icon icon="shuffle" class=shuffleClass}}</span>
<span data-toggle="tooltip" data-placement="bottom auto" class="bootstrapTooltip"
id="repeatTooltip"
data-title={{repeatTooltipTxt}} {{action "repeatChanged"}}>{{paper-icon icon=repeatIcon class=repeatClass}}</span>
{{/if}}
<span data-toggle="tooltip" data-placement="bottom auto" class="bootstrapTooltip" {{#if usingMicSupported}}
data-title="Play local audio files" {{action "useLocalAudio"}}>{{fa-icon "music" classNames=usingLocalAudioClass}}</span> <span data-toggle="tooltip" data-placement="bottom auto" class="bootstrapTooltip"
<span data-toggle="tooltip" data-placement="bottom auto" class="bootstrapTooltip" data-title="Listen to audio through mic" {{action "useMicAudio"}}>{{paper-icon icon=micIcon class=usingMicAudioClass}}</span>
data-title="Play Youtube" {{action "useYoutubeAudio"}}>{{fa-icon 'youtubeWorkaround' classNames=usingYoutubeAudioClass}}</span>
{{#if usingMicSupported}}
<span data-toggle="tooltip" data-placement="bottom auto" class="bootstrapTooltip"
data-title="Listen to audio through mic" {{action "useMicAudio"}}>{{fa-icon "microphone" classNames=usingMicAudioClass}}</span>
{{/if}}
{{#if usingLocalAudio}}
<span data-toggle="tooltip" data-placement="bottom auto" data-title="Add new music"
class="pull-right bootstrapTooltip" {{action "addAudio"}}>{{paper-icon icon="add" class="playerControllIcon"}}</span>
<span data-toggle="tooltip" data-placement="bottom auto" class="pull-right bootstrapTooltip"
id="shuffleTooltip"
data-title={{shuffleTooltipTxt}} {{action "shuffleChanged"}}>{{paper-icon icon="shuffle" class=shuffleClass}}</span>
<span data-toggle="tooltip" data-placement="bottom auto" class="pull-right bootstrapTooltip"
id="repeatTooltip"
data-title={{repeatTooltipTxt}} {{action "repeatChanged"}}>{{paper-icon icon=repeatIcon class=repeatClass}}</span>
{{/if}}
</div>
{{#if usingMicAudio}}
<div id="playAreaMic">
{{paper-icon icon="mic"}}
</div>
{{else}}
{{#if usingLocalAudio}}
<div id="playListArea"
class={{playListAreaClass}} {{action "playListAreaAddAudio"}} {{action "playListAreaDragOver" on="dragOver"}} {{action "playListAreaDragLeave" on="dragLeave"}} {{action "dropFiles" on="drop"}}>
{{#if (or playQueueEmpty dragging)}}
<div id="dragHere">
{{#if dragging}}
Drag your music files here
{{else}}
Add your music files here
{{/if}}
</div>
{{paper-icon icon="library-music"}}
{{/if}}
{{#each playQueue as |item index|}}
<div class="playlistItem cursorPointer {{if (eq index playQueuePointer) "active"}} {{if dragging "hidden"}}" {{action "goToSong" index true bubbles=false}}>
{{#if item.title}}
{{item.title}}
<div class="songArtist">{{item.artist}}</div>
{{else}}
{{item.filename}}
{{/if}}
<div data-toggle="tooltip" data-placement="bottom auto" data-title="Remove from playlist"
class="audioRemoveButton cursorPointer bootstrapTooltip" {{action "removeAudio" index bubbles=false}}>{{paper-icon icon="close"}}</div>
</div>
{{/each}}
</div>
{{else}}
<div id="playAreaYoutube">
<div id="buttons">
<label> <input id="query" value='cats' type="text"/><button id="search-button" {{action "search"}}>Search</button></label>
</div>
<div id="search-container">
</div>
</div>
{{/if}}
{{/if}} {{/if}}
</div> </div>
{{#if usingMicAudio}}
<div id="playAreaMic">
{{paper-icon icon="mic"}}
</div>
{{else}}
{{#if usingLocalAudio}}
<div id="playListArea"
class={{playListAreaClass}} {{action "playListAreaAddAudio"}} {{action "playListAreaDragOver" on="dragOver"}} {{action "playListAreaDragLeave" on="dragLeave"}} {{action "dropFiles" on="drop"}}>
{{#if (or playQueueEmpty dragging)}}
<div id="dragHere">
{{#if dragging}}
Drag your music files here
{{else}}
Add your music files here
{{/if}}
</div>
{{paper-icon icon="library-music"}}
{{/if}}
{{#each playQueue as |item index|}}
<div
class="playlistItem cursorPointer {{if (eq index playQueuePointer) "active"}} {{if dragging "hidden"}}" {{action "goToSong" index true bubbles=false}}>
{{#if item.title}}
{{item.title}}
<div class="songArtist">{{item.artist}}</div>
{{else}}
{{item.filename}}
{{/if}}
<div data-toggle="tooltip" data-placement="bottom auto" data-title="Remove from playlist"
class="audioRemoveButton cursorPointer bootstrapTooltip" {{action "removeAudio" index bubbles=false}}>{{paper-icon icon="close"}}</div>
</div>
{{/each}}
</div>
{{/if}}
{{/if}}
</div>
</div> </div>
<div id="slideToggle" class="text-center cursorPointer row" {{action "slideTogglePlayerBottom"}}> <div id="slideToggle" class="text-center cursorPointer row" {{action "slideTogglePlayerBottom"}}>
<div class="col-xs-offset-3 col-xs-3 zIndexTwo"> <div class="col-xs-offset-5 col-xs-2">
{{fa-icon beatDetectionArrowIcon}} {{paper-icon icon=beatDetectionArrowIcon}}
</div> </div>
<div class="col-xs-3 zIndexTwo">
{{fa-icon beatDetectionArrowIcon}}
</div>
</div> </div>
{{#if playerBottomDisplayed}} {{#if playerBottomDisplayed}}
<div id="playerBottom" class="row"> <div id="playerBottom" class="row">
<div id="beatArea" class="col-lg-8 col-xs-12"> <div id="beatArea" class="col-lg-8 col-xs-12">
<div class="row"> <div class="row">
<div class="beatOption col-xs-3"> <div class="beatOption col-xs-3">
<div class="text-center">{{threshold}}</div> <div class="text-center">{{threshold}}</div>
{{range-slider start=threshold orientation="vertical" step=beatOptions.threshold.step range=beatOptions.threshold.range slide="thresholdChanged" pips=beatOptions.threshold.pips}} {{range-slider start=threshold orientation="vertical" step=beatOptions.threshold.step range=beatOptions.threshold.range slide="thresholdChanged" pips=beatOptions.threshold.pips}}
<span data-toggle="tooltip" data-placement="bottom auto" <span data-toggle="tooltip" data-placement="bottom auto"
data-title="Maximum intensity of the sound that may be registered as a beat" data-title="Maximum intensity of the sound that may be registered as a beat"
class="optionDescription bootstrapTooltip">Max. Intensity</span> class="optionDescription bootstrapTooltip">Max. Intensity</span>
</div>
<div class="beatOption col-xs-3">
<div class="text-center">{{decay}}</div>
{{range-slider start=decay orientation="vertical" step=beatOptions.decay.step range=beatOptions.decay.range slide="decayChanged" pips=beatOptions.decay.pips}}
<span data-toggle="tooltip" data-placement="bottom auto"
data-title="The rate at which the previously registered beat's intensity is reduced to find the next beat"
class="optionDescription bootstrapTooltip">Decay Rate</span>
</div>
<div class="beatOption col-xs-3">
<div class="text-center">[{{#each frequency as |item index|}}{{item}}{{#unless index}}
,{{/unless}}{{/each}}
]
</div>
{{range-slider start=frequency orientation="vertical" step=beatOptions.frequency.step range=beatOptions.frequency.range connect=true slide="frequencyChanged" pips=beatOptions.frequency.pips}}
<span data-toggle="tooltip" data-placement="bottom auto"
data-title="The frequency range of sound to listen on for the beat"
class="optionDescription bootstrapTooltip">Frequency Range</span>
</div>
<div class="beatOption col-xs-3">
<div class="text-center">{{transitionTime}} sec</div>
{{range-slider start=transitionTime orientation="vertical" step=beatOptions.transitionTime.step range=beatOptions.transitionTime.range slide="transitionTimeChanged" pips=beatOptions.transitionTime.pips}}
<span data-toggle="tooltip" data-placement="bottom auto"
data-title="The time it takes for a light to change color or brightness"
class="optionDescription bootstrapTooltip">Transition Time</span>
</div>
</div>
<div id="beatOptionButtonGroup" class="row">
<div class="beatOption col-xs-6">
{{#paper-switch checked=randomTransition disabled=trial}}<span data-toggle="tooltip"
data-placement="bottom auto"
data-title="The transition order of lights on beat"
class="optionDescription bootstrapTooltip">{{randomTransitionLabel}}</span>{{/paper-switch}}
</div>
<div class="beatOption col-xs-6">
{{#paper-switch checked=onBeatBriAndColor disabled=trial}}<span data-toggle="tooltip"
data-placement="bottom auto"
data-title="The properties of the lights to change on beat"
class="optionDescription bootstrapTooltip"> {{onBeatBriAndColorLabel}}</span>{{/paper-switch}}
</div>
</div>
<div id="playerButtonGroup" class="row">
{{#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}}
</div>
</div> </div>
<div id="beatContainer" class="col-lg-4 col-xs-12"> <div class="beatOption col-xs-3">
{{#if speakerViewed}} <div class="text-center">{{decay}}</div>
<div class="bezel"> {{range-slider start=decay orientation="vertical" step=beatOptions.decay.step range=beatOptions.decay.range slide="decayChanged" pips=beatOptions.decay.pips}}
<div class="rivet2"></div> <span data-toggle="tooltip" data-placement="bottom auto"
<div class="rivet3"></div> data-title="The rate at which the previously registered beat's intensity is reduced to find the next beat"
<div class="rivet4"></div> class="optionDescription bootstrapTooltip">Decay Rate</span>
<div class="rivet5"></div>
<div class="rivet6"></div>
<div class="rivet7"></div>
<div class="rivet8"></div>
<div id="beatSpeakerCenterOuter">
<div id="beatSpeakerCenterInner" class="cursorPointer" {{action "clickSpeaker"}}>
</div>
</div>
</div>
{{else}}
<div id="beatHistory">
{{#each beatHistory as |item|}}
<p>{{{item}}}</p>
{{/each}}
</div>
{{/if}}
{{#paper-switch checked=speakerViewed}} {{speakerLabel}} {{/paper-switch}}
</div> </div>
<div class="beatOption col-xs-3">
<div class="text-center">[{{#each frequency as |item index|}}{{item}}{{#unless index}}
,{{/unless}}{{/each}}
]
</div>
{{range-slider start=frequency orientation="vertical" step=beatOptions.frequency.step range=beatOptions.frequency.range connect=true slide="frequencyChanged" pips=beatOptions.frequency.pips}}
<span data-toggle="tooltip" data-placement="bottom auto"
data-title="The frequency range of sound to listen on for the beat"
class="optionDescription bootstrapTooltip">Frequency Range</span>
</div>
<div class="beatOption col-xs-3">
<div class="text-center">{{transitionTime}} sec</div>
{{range-slider start=transitionTime orientation="vertical" step=beatOptions.transitionTime.step range=beatOptions.transitionTime.range slide="transitionTimeChanged" pips=beatOptions.transitionTime.pips}}
<span data-toggle="tooltip" data-placement="bottom auto"
data-title="The time it takes for a light to change color or brightness"
class="optionDescription bootstrapTooltip">Transition Time</span>
</div>
</div>
<div id="beatOptionButtonGroup" class="row">
<div class="beatOption col-xs-6">
{{#paper-switch checked=randomTransition disabled=trial}}<span data-toggle="tooltip"
data-placement="bottom auto"
data-title="The transition order of lights on beat"
class="optionDescription bootstrapTooltip">{{randomTransitionLabel}}</span>{{/paper-switch}}
</div>
<div class="beatOption col-xs-6">
{{#paper-switch checked=onBeatBriAndColor disabled=trial}}<span data-toggle="tooltip"
data-placement="bottom auto"
data-title="The properties of the lights to change on beat"
class="optionDescription bootstrapTooltip"> {{onBeatBriAndColorLabel}}</span>{{/paper-switch}}
</div>
</div>
<div id="playerButtonGroup" class="row">
{{#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}}
</div>
</div> </div>
<div id="beatContainer" class="col-lg-4 col-xs-12">
{{#if speakerViewed}}
<div class="bezel">
<div class="rivet2"></div>
<div class="rivet3"></div>
<div class="rivet4"></div>
<div class="rivet5"></div>
<div class="rivet6"></div>
<div class="rivet7"></div>
<div class="rivet8"></div>
<div id="beatSpeakerCenterOuter">
<div id="beatSpeakerCenterInner" class="cursorPointer" {{action "clickSpeaker"}}>
</div>
</div>
</div>
{{else}}
<div id="beatHistory">
{{#each beatHistory as |item|}}
<p>{{{item}}}</p>
{{/each}}
</div>
{{/if}}
{{#paper-switch checked=speakerViewed}} {{speakerLabel}} {{/paper-switch}}
</div>
</div>
{{/if}} {{/if}}
{{ember-notify closeAfter=5000}} {{ember-notify closeAfter=5000}}
<div id="dimmer" class="{{if playing "show"}}"></div> <!--<div id="dimmer" class="{{if playing "show"}}"></div>-->

41
app/styles/app.scss
View file

@ -1,6 +1,5 @@
@import 'ember-paper'; @import 'ember-paper';
@import 'bower_components/bootstrap-sass/assets/stylesheets/_bootstrap'; @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-structure';
@import 'ember-modal-dialog/ember-modal-appearance'; @import 'ember-modal-dialog/ember-modal-appearance';
@ -147,6 +146,7 @@ md-progress-linear {
} }
.bootstrapTooltip md-icon { .bootstrapTooltip md-icon {
font-size: 22px;
cursor: pointer; cursor: pointer;
} }
@ -401,21 +401,11 @@ md-toolbar {
padding: 0; padding: 0;
} }
.zIndexTwo {
z-index: 2;
}
.#{$fa-css-prefix}-youtubeWorkaround:before {
content: $fa-var-youtube-play;
font-size: 22px;
}
#slideToggle { #slideToggle {
color: $playerDefaultIconColor; color: $playerDefaultIconColor;
background: #8C3E3E; background: #8C3E3E;
z-index: 2; z-index: 2;
div i { div md-icon {
font-size: 25px;
color: inherit !important; color: inherit !important;
} }
} }
@ -451,6 +441,12 @@ md-switch.md-default-theme.md-checked .md-thumb {
} }
} }
.pull-right.bootstrapTooltip {
.playerControllIcon {
margin: 0;
}
}
#playerTimeControls { #playerTimeControls {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px; font-size: 14px;
@ -461,15 +457,9 @@ md-switch.md-default-theme.md-checked .md-thumb {
} }
.playerControllIcon { .playerControllIcon {
cursor: pointer;
color: $playerDefaultIconColor !important; color: $playerDefaultIconColor !important;
transition-duration: 0.1s; transition-duration: 0.1s;
margin-right: 10px; margin-right: 5px;
}
i.playerControllIcon {
font-size: 20px;
margin-right: 12px;
} }
.playerControllIcon.active { .playerControllIcon.active {
@ -520,8 +510,7 @@ i.playerControllIcon {
#playlist { #playlist {
height: $playerHeight; height: $playerHeight;
background-color: $playListBackgroundColor; background-color: $playListBackgroundColor;
padding-left: 0.625em; padding: 0 5px 0 5px;
padding-right: 0.625em;
z-index: 2; z-index: 2;
} }
@ -596,16 +585,15 @@ i.playerControllIcon {
} }
#playListControls { #playListControls {
min-height: 35px; min-height: 30px;
margin-top: 10px; margin-top: 5px;
padding-bottom: 10px;
border-bottom: 1px solid #3a3a3a; border-bottom: 1px solid #3a3a3a;
} }
#playListArea, #playAreaMic, #playAreaYoutube { #playListArea, #playAreaMic, #playAreaYoutube {
background-color: white; background-color: white;
width: 100%; width: 100%;
height: 333px; height: 350px;
margin: 10px auto 0 auto; margin: 10px auto 0 auto;
border-radius: 5px; border-radius: 5px;
transition: 0.1s all ease-in-out; transition: 0.1s all ease-in-out;
@ -752,11 +740,12 @@ i.playerControllIcon {
} }
#beatHistory { #beatHistory {
border: 1px solid #C5C5C5;
color: black; color: black;
height: 300px; height: 300px;
background-color: white; background-color: white;
border-radius: 10px; border-radius: 10px;
width: 90%; width: 285px;
margin: 0 auto 20px auto; margin: 0 auto 20px auto;
overflow: auto; overflow: auto;
padding: 10px; padding: 10px;

7
bower.json
View file

@ -18,13 +18,10 @@
"matchMedia": "~0.2.0", "matchMedia": "~0.2.0",
"nouislider": "^8.0.1", "nouislider": "^8.0.1",
"qunit": "~1.18.0", "qunit": "~1.18.0",
"three.js": "~0.71.0", "three.js": "~0.71.0"
"font-awesome": "~4.4.0"
}, },
"resolutions": { "resolutions": {
"ember": "~2.0.2", "ember": "~2.0.2",
"jquery": "~2.1.4", "jquery": "~2.1.4"
"ember-qunit": "0.4.9",
"qunit": "~1.18.0"
} }
} }

1
package.json
View file

@ -25,7 +25,6 @@
"ember-cli-babel": "^5.0.0", "ember-cli-babel": "^5.0.0",
"ember-cli-content-security-policy": "0.4.0", "ember-cli-content-security-policy": "0.4.0",
"ember-cli-dependency-checker": "^1.0.0", "ember-cli-dependency-checker": "^1.0.0",
"ember-cli-font-awesome": "0.1.1",
"ember-cli-htmlbars": "1.0.0", "ember-cli-htmlbars": "1.0.0",
"ember-cli-htmlbars-inline-precompile": "^0.3.0", "ember-cli-htmlbars-inline-precompile": "^0.3.0",
"ember-cli-ic-ajax": "0.2.1", "ember-cli-ic-ajax": "0.2.1",