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

youtube integration and stuff

Browse source
This commit is contained in:
lone-cloud 2015-10-05 01:19:16 -07:00
parent 6c82d0f273
commit 7fd759cd4e
9 changed files with 139 additions and 61 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/index.html
View file

@ -17,6 +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 async src="https://apis.google.com/js/client.js"></script>
{{content-for 'head-footer'}} {{content-for 'head-footer'}}
</head> </head>
<body> <body>

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

@ -1,7 +1,7 @@
import Em from 'ember'; import Em from 'ember';
export default Em.Component.extend({ export default Em.Component.extend({
classNames: ['container-fluid'], classNames: ['container'],
elementId: 'hueControls', elementId: 'hueControls',
bridgeIp: null, bridgeIp: null,

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

@ -6,7 +6,7 @@
{{/each}} {{/each}}
</div> </div>
<div id="settings" class="col-lg-2 col-sm-2 col-xs-3"> <div id="settings" class="col-xs-3">
<span id="groupMenu" class="settingsItem groupMenu {{if groupControlDisplayed 'on'}}"> <span id="groupMenu" class="settingsItem groupMenu {{if groupControlDisplayed 'on'}}">
<span class="bootstrapTooltip" data-toggle="tooltip" data-placement="bottom auto" data-title="Light Groups" {{action "toggleGroupControl"}}>{{paper-icon icon="group"}}</span> <span class="bootstrapTooltip" data-toggle="tooltip" data-placement="bottom auto" data-title="Light Groups" {{action "toggleGroupControl"}}>{{paper-icon icon="group"}}</span>

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

@ -1,7 +1,7 @@
import Em from 'ember'; import Em from 'ember';
export default Em.Component.extend({ export default Em.Component.extend({
classNames: ['col-lg-4', 'col-lg-offset-4', 'col-sm-6', 'col-sm-offset-3', 'col-xs-12'], classNames: ['col-lg-4', 'col-lg-offset-4', 'col-md-6', 'col-md-offset-3', 'col-xs-12'],
classNameBindings: ['active::hidden'], classNameBindings: ['active::hidden'],
activeLights: [], activeLights: [],
@ -44,6 +44,8 @@ export default Em.Component.extend({
self = this, self = this,
xy = this.rgbToXy(rgb[0], rgb[1], rgb[2]); xy = this.rgbToXy(rgb[0], rgb[1], rgb[2]);
this.set('colorLoopOn', false);
this.get('activeLights').forEach(function (light) { this.get('activeLights').forEach(function (light) {
Em.$.ajax(self.get('apiURL') + '/lights/' + light + '/state', { Em.$.ajax(self.get('apiURL') + '/lights/' + light + '/state', {
data: JSON.stringify({"xy": xy}), data: JSON.stringify({"xy": xy}),
@ -63,17 +65,39 @@ export default Em.Component.extend({
return "toggleColorpicker"; return "toggleColorpicker";
}.property('trial'), }.property('trial'),
colorLoopOn: function(){ // COLOR LOOP related stuff
var lightsData = this.get('lightsData'); colorLoopOn: false,
colorLoopDependenciesChanged: function(){
var lightsData = this.get('lightsData'), newValue;
if(this.get('strobeOn')){ if(this.get('strobeOn')){
return false; newValue = false;
} else {
newValue = this.get('activeLights').some(function(light) {
return lightsData[light].state.effect === 'colorloop';
});
} }
return this.get('activeLights').some(function(light) { this.set('colorLoopOn', newValue);
}.observes('lightsData.@each.state.effect', 'activeLights.[]', 'strobeOn'),
onColorLoopOnChange: function(){
var lightsData = this.get('lightsData'), activeLights = this.get('activeLights'), colorLoopsOn = this.get('colorLoopOn'), self = this;
var colorLoopsOnSystem = activeLights.some(function(light) {
return lightsData[light].state.effect === 'colorloop'; return lightsData[light].state.effect === 'colorloop';
}); });
}.property('lightsData.@each.state.effect', 'activeLights.[]', 'strobeOn'),
// if the internal lights state is different than the one from lightsData ( user manually toggled the switch ), send the request to change the bulbs state
if(colorLoopsOn !== colorLoopsOnSystem){
activeLights.forEach(function (light) {
Em.$.ajax(self.get('apiURL') + '/lights/' + light + '/state', {
data: JSON.stringify({"effect": colorLoopsOn ? 'colorloop' : 'none'}),
contentType: 'application/json',
type: 'PUT'
});
});
}
}.observes('colorLoopOn'),
// determines whether the lights are on/off for the lights switch // determines whether the lights are on/off for the lights switch
lightsOn: function(){ lightsOn: function(){
@ -120,24 +144,7 @@ export default Em.Component.extend({
} }
}.observes('lightsOn'), }.observes('lightsOn'),
onColorLoopOnChange: function(){
var lightsData = this.get('lightsData'), activeLights = this.get('activeLights'), colorLoopsOn = this.get('colorLoopOn'), self = this;
var colorLoopsOnSystem = activeLights.some(function(light) {
return lightsData[light].state.effect === 'colorloop';
});
// if the internal lights state is different than the one from lightsData ( user manually toggled the switch ), send the request to change the bulbs state
if(colorLoopsOn !== colorLoopsOnSystem){
activeLights.forEach(function (light) {
Em.$.ajax(self.get('apiURL') + '/lights/' + light + '/state', {
data: JSON.stringify({"effect": colorLoopsOn ? 'colorloop' : 'none'}),
contentType: 'application/json',
type: 'PUT'
});
});
}
}.observes('colorLoopOn'),
onBrightnessChanged: function(){ onBrightnessChanged: function(){
var lightsData = this.get('lightsData'), lightsBrightnessSystem = false, lightsBrightness = this.get('lightsBrightness'), activeLights = this.get('activeLights'), self = this; var lightsData = this.get('lightsData'), lightsBrightnessSystem = false, lightsBrightness = this.get('lightsBrightness'), activeLights = this.get('activeLights'), self = this;

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

@ -3,8 +3,9 @@ import musicControlMixin from './mixins/music-tab';
import visualizerMixin from './mixins/visualizer'; import visualizerMixin from './mixins/visualizer';
export default Em.Component.extend(musicControlMixin, visualizerMixin, { export default Em.Component.extend(musicControlMixin, visualizerMixin, {
classNames: ['col-lg-8', 'col-lg-offset-2', 'col-sm-10', 'col-sm-offset-1', 'col-xs-12'], classNames: ['col-lg-10', 'col-lg-offset-1', 'col-xs-12'],
classNameBindings: ['active::hidden'], classNameBindings: ['active::hidden'],
elementId: 'musicTab',
onActiveChange: function(){ onActiveChange: function(){
if(this.get('active')){ if(this.get('active')){
@ -15,6 +16,25 @@ 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(){ useYoutubeAudio: function(){
var audioStream = this.get('audioStream'); var audioStream = this.get('audioStream');
@ -25,6 +45,20 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
this.set('audioStream', null); this.set('audioStream', null);
} }
var onPlayerReady = function(){
console.log('ready');
}, onPlayerStateChange = function(){
console.log('onPlayerStateChange');
};
//var youtubePlayer = new YT.Player('ytplayer', {
// events: {
// 'onReady': onPlayerReady,
// 'onStateChange': onPlayerStateChange
// }
//});
//
//this.set('youtubePlayer', youtubePlayer);
document.title = 'Youtube - Huegasm'; document.title = 'Youtube - Huegasm';
}, },
useLocalAudio: function(){ useLocalAudio: function(){
@ -224,9 +258,11 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
audioModeChanged(value){ audioModeChanged(value){
if(value === 1) { if(value === 1) {
this.startUsingMic(); this.startUsingMic();
} else if(value === 2){
this.send('useYoutubeAudio');
} else {
this.send('useLocalAudio');
} }
this.set('audioMode', value);
}, },
clickSpeaker(){ clickSpeaker(){
this.simulateKick(1); this.simulateKick(1);
@ -501,7 +537,7 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
}); });
// prevent space/text selection when the user repeatedly clicks on the center // prevent space/text selection when the user repeatedly clicks on the center
Em.$('#beatSpeakerContainer').on('mousedown', '#beatSpeakerCenter', function(event) { Em.$('#beatSpeakerContainer').on('mousedown', '#beatSpeakerCenterInner', function(event) {
event.preventDefault(); event.preventDefault();
}); });
@ -519,5 +555,9 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
event.preventDefault(); event.preventDefault();
} }
}); });
window.onYouTubeIframeAPIReady = function() {
debugger;
};
} }
}); });

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

@ -118,7 +118,7 @@ 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,
@ -300,7 +300,7 @@ export default Em.Mixin.create({
if (this.get(type)) { if (this.get(type)) {
tooltipTxt = 'Pause'; tooltipTxt = 'Pause';
} else if(this.get('timeElapsed') === this.get('timeTotal')){ } else if(this.get('timeElapsed') === this.get('timeTotal') && this.get('timeTotal') !== 0){
tooltipTxt = 'Replay'; tooltipTxt = 'Replay';
} }

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

@ -1,4 +1,5 @@
<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>
@ -6,7 +7,6 @@
{{#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><!--
@ -24,7 +24,6 @@
<div id="playerTimeControls">{{timeElapsedTxt}} / {{timeTotalTxt}}</div> <div id="playerTimeControls">{{timeElapsedTxt}} / {{timeTotalTxt}}</div>
{{/if}} {{/if}}
{{#if (or useLocalAudio useMicAudio)}}
<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"}}
@ -33,9 +32,13 @@
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>
{{/if}}
</div> </div>
</div> </div>
{{else}}
<div id="playerArea" class="col-sm-8 col-xs-12">
<iframe id="ytplayer" type="text/html" src="//www.youtube.com/embed/?listType=user_uploads&list=MrSuicideSheep" frameborder="0" allowfullscreen></iframe>
</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"/>
@ -44,12 +47,12 @@
<span data-toggle="tooltip" data-placement="bottom auto" class="bootstrapTooltip" <span data-toggle="tooltip" data-placement="bottom auto" class="bootstrapTooltip"
data-title="Play local audio files" {{action "useLocalAudio"}}>{{fa-icon "music" classNames=usingLocalAudioClass}}</span> data-title="Play local audio files" {{action "useLocalAudio"}}>{{fa-icon "music" classNames=usingLocalAudioClass}}</span>
<span data-toggle="tooltip" data-placement="bottom auto" class="bootstrapTooltip"
data-title="Play Youtube" {{action "useYoutubeAudio"}}>{{fa-icon 'youtubeWorkaround' classNames=usingYoutubeAudioClass}}</span>
{{#if usingMicSupported}} {{#if usingMicSupported}}
<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"}}>{{fa-icon "microphone" classNames=usingMicAudioClass}}</span> data-title="Listen to audio through mic" {{action "useMicAudio"}}>{{fa-icon "microphone" classNames=usingMicAudioClass}}</span>
{{/if}} {{/if}}
<span data-toggle="tooltip" data-placement="bottom auto" class="bootstrapTooltip"
data-title="Play Youtube" {{action "useYoutubeAudio"}}>{{fa-icon 'youtubeWorkaround' classNames=usingYoutubeAudioClass}}</span>
{{#if usingLocalAudio}} {{#if usingLocalAudio}}
<span data-toggle="tooltip" data-placement="bottom auto" data-title="Add new music" <span data-toggle="tooltip" data-placement="bottom auto" data-title="Add new music"
@ -96,29 +99,31 @@
{{/each}} {{/each}}
</div> </div>
{{else}} {{else}}
<div id="playAreaYoutube"> <div id="playAreaYoutube">
YOUTUBE <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> </div>
{{/if}} {{/if}}
{{/if}} {{/if}}
</div> </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"> <div class="col-xs-offset-3 col-xs-3 zIndexTwo">
{{fa-icon beatDetectionArrowIcon}} {{fa-icon beatDetectionArrowIcon}}
</div> </div>
<div class="col-xs-3"> <div class="col-xs-3 zIndexTwo">
{{fa-icon beatDetectionArrowIcon}} {{fa-icon beatDetectionArrowIcon}}
</div> </div>
</div> </div>
{{#if playerBottomDisplayed}} {{#if playerBottomDisplayed}}
<div id="playerBottom" class="row"> <div id="playerBottom" class="row">
<div id="beatArea" class="col-sm-8 col-xs-12"> <div id="beatArea" class="col-lg-8 col-xs-12">
<div id="vertDivider" class="visible-lg visible-md"></div>
<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>
@ -179,7 +184,7 @@
</div> </div>
</div> </div>
<div id="beatContainer" class="col-sm-4 col-xs-12"> <div id="beatContainer" class="col-lg-4 col-xs-12">
{{#if speakerViewed}} {{#if speakerViewed}}
<div class="bezel"> <div class="bezel">
<div class="rivet1"></div> <div class="rivet1"></div>
@ -209,4 +214,5 @@
</div> </div>
{{/if}} {{/if}}
{{ember-notify closeAfter=5000}} {{ember-notify closeAfter=5000}}
<div id="dimmer" class="{{if playing "show"}}"></div>

49
app/styles/app.scss
View file

@ -398,6 +398,14 @@ md-toolbar {
margin: 0; margin: 0;
} }
#musicTab{
padding: 0;
}
.zIndexTwo {
z-index: 2;
}
.#{$fa-css-prefix}-youtubeWorkaround:before { .#{$fa-css-prefix}-youtubeWorkaround:before {
content: $fa-var-youtube-play; content: $fa-var-youtube-play;
font-size: 22px; font-size: 22px;
@ -406,6 +414,7 @@ md-toolbar {
#slideToggle { #slideToggle {
color: $playerDefaultIconColor; color: $playerDefaultIconColor;
background-color: $playerBottomBackground; background-color: $playerBottomBackground;
z-index: 2;
div i { div i {
font-size: 25px; font-size: 25px;
color: inherit !important; color: inherit !important;
@ -501,6 +510,8 @@ i.playerControllIcon {
height: $playerHeight; height: $playerHeight;
background-color: black; background-color: black;
display: inline-block; display: inline-block;
padding: 0;
z-index: 2;
} }
#playerArea:hover #playerControls { #playerArea:hover #playerControls {
@ -512,6 +523,7 @@ i.playerControllIcon {
background-color: $playListBackgroundColor; background-color: $playListBackgroundColor;
padding-left: 0.625em; padding-left: 0.625em;
padding-right: 0.625em; padding-right: 0.625em;
z-index: 2;
} }
#playerArea * .noUi-origin { #playerArea * .noUi-origin {
@ -672,6 +684,7 @@ i.playerControllIcon {
} }
#beatArea { #beatArea {
z-index: 2;
position: relative; position: relative;
} }
@ -708,11 +721,13 @@ i.playerControllIcon {
color: white; color: white;
background-color: $playerBottomBackground; background-color: $playerBottomBackground;
width: 100%; width: 100%;
z-index: 2;
} }
#beatContainer { #beatContainer {
vertical-align: middle; vertical-align: middle;
padding: 0; padding: 0 10px;
z-index: 2;
md-switch { md-switch {
bottom: 0; bottom: 0;
position: absolute; position: absolute;
@ -738,15 +753,6 @@ i.playerControllIcon {
} }
} }
#vertDivider {
position: absolute;
right: 0;
top: 25%;
width: 2px;
height: 50%;
background-color: white;
}
#beatHistory { #beatHistory {
color: black; color: black;
height: 300px; height: 300px;
@ -904,7 +910,7 @@ $vibrateblur1:1px;
} }
.vibrateInner{ .vibrateInner{
-webkit-animation: vibrate 0.25s linear 1; -webkit-animation: vibrate 0.25s linear 1;
animation: vibrate 0.1s linear 1; animation: vibrate 0.15s linear 1;
} }
#beatSpeakerCenterOuter { #beatSpeakerCenterOuter {
@extend %base; @extend %base;
@ -923,7 +929,7 @@ $vibrateblur1:1px;
} }
.vibrateOuter { .vibrateOuter {
-webkit-animation: vibrate1 0.25s linear 1; -webkit-animation: vibrate1 0.25s linear 1;
animation: vibrate1 0.1s linear 1; animation: vibrate1 0.15s linear 1;
} }
.bezel { .bezel {
@extend %base; @extend %base;
@ -932,7 +938,7 @@ $vibrateblur1:1px;
width: $bezelsize; width: $bezelsize;
position: relative; position: relative;
background-color: #A8A8A8; background-color: #A8A8A8;
box-shadow: 0 0 60px rgba(0, 0, 0, 0.8), inset 3px 3px 10px rgba(0, 0, 0, 0.8), 0 0 2px rgba(0, 0, 0, 0.8), inset 0 0 30px -5px rgba(0, 0, 0, 0.8); box-shadow: 0 0 10px rgba(0, 0, 0, 0.8), inset 3px 3px 10px rgba(0, 0, 0, 0.8), 0 0 2px rgba(0, 0, 0, 0.8), inset 0 0 30px -5px rgba(0, 0, 0, 0.8);
} }
.rivet1 { .rivet1 {
@extend %rivet; @extend %rivet;
@ -974,3 +980,20 @@ $vibrateblur1:1px;
bottom: 17%; bottom: 17%;
right: 13.5%; right: 13.5%;
} }
#ytplayer{
display: block;
width: 100%;
height: 100%
}
#dimmer {
position: fixed;
width: 100%;
height: 100%;
background: black;
opacity: 0.7;
top: 0;
left: 0;
display: none;
}

4
config/environment.js
View file

@ -21,14 +21,14 @@ module.exports = function(environment) {
contentSecurityPolicy: { contentSecurityPolicy: {
'default-src': "'none'", 'default-src': "'none'",
'script-src': "'self'", 'script-src': "'self' apis.google.com 'unsafe-inline'",
'font-src': "'self' fonts.gstatic.com", 'font-src': "'self' fonts.gstatic.com",
'connect-src': "'self' *", 'connect-src': "'self' *",
'img-src': "'self' data:", 'img-src': "'self' data:",
'media-src': "'self' blob:", 'media-src': "'self' blob:",
'style-src': "'self' 'unsafe-inline' fonts.googleapis.com", 'style-src': "'self' 'unsafe-inline' fonts.googleapis.com",
'object-src': "'self'", 'object-src': "'self'",
'frame-src': "'self'" 'frame-src': "'self' accounts.google.com content.googleapis.com www.youtube.com"
} }
}; };