youtube integration and stuff
This commit is contained in:
Egor
parent
8d54843996
commit
72571567fe
9 changed files with 139 additions and 61 deletions
|
|
@ -17,6 +17,8 @@
|
|||
<link rel="stylesheet" href="assets/vendor.css">
|
||||
<link rel="stylesheet" href="assets/huegasm.css">
|
||||
|
||||
<script async src="https://apis.google.com/js/client.js"></script>
|
||||
|
||||
{{content-for 'head-footer'}}
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import Em from 'ember';
|
||||
|
||||
export default Em.Component.extend({
|
||||
classNames: ['container-fluid'],
|
||||
classNames: ['container'],
|
||||
elementId: 'hueControls',
|
||||
|
||||
bridgeIp: null,
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
{{/each}}
|
||||
</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 class="bootstrapTooltip" data-toggle="tooltip" data-placement="bottom auto" data-title="Light Groups" {{action "toggleGroupControl"}}>{{paper-icon icon="group"}}</span>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import Em from 'ember';
|
||||
|
||||
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'],
|
||||
|
||||
activeLights: [],
|
||||
|
|
@ -44,6 +44,8 @@ export default Em.Component.extend({
|
|||
self = this,
|
||||
xy = this.rgbToXy(rgb[0], rgb[1], rgb[2]);
|
||||
|
||||
this.set('colorLoopOn', false);
|
||||
|
||||
this.get('activeLights').forEach(function (light) {
|
||||
Em.$.ajax(self.get('apiURL') + '/lights/' + light + '/state', {
|
||||
data: JSON.stringify({"xy": xy}),
|
||||
|
|
@ -63,17 +65,39 @@ export default Em.Component.extend({
|
|||
return "toggleColorpicker";
|
||||
}.property('trial'),
|
||||
|
||||
colorLoopOn: function(){
|
||||
var lightsData = this.get('lightsData');
|
||||
// COLOR LOOP related stuff
|
||||
colorLoopOn: false,
|
||||
colorLoopDependenciesChanged: function(){
|
||||
var lightsData = this.get('lightsData'), newValue;
|
||||
|
||||
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';
|
||||
});
|
||||
}.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
|
||||
lightsOn: function(){
|
||||
|
|
@ -120,24 +144,7 @@ export default Em.Component.extend({
|
|||
}
|
||||
}.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(){
|
||||
var lightsData = this.get('lightsData'), lightsBrightnessSystem = false, lightsBrightness = this.get('lightsBrightness'), activeLights = this.get('activeLights'), self = this;
|
||||
|
|
|
|||
|
|
@ -3,8 +3,9 @@ import musicControlMixin from './mixins/music-tab';
|
|||
import visualizerMixin from './mixins/visualizer';
|
||||
|
||||
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'],
|
||||
elementId: 'musicTab',
|
||||
|
||||
onActiveChange: function(){
|
||||
if(this.get('active')){
|
||||
|
|
@ -15,6 +16,25 @@ 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('<pre>' + str + '</pre>');
|
||||
});
|
||||
};
|
||||
if(!gapi.client.youtube){
|
||||
gapi.client.load('youtube', 'v3', doSearch);
|
||||
} else {
|
||||
doSearch();
|
||||
}
|
||||
},
|
||||
useYoutubeAudio: function(){
|
||||
var audioStream = this.get('audioStream');
|
||||
|
||||
|
|
@ -25,6 +45,20 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
|
|||
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';
|
||||
},
|
||||
useLocalAudio: function(){
|
||||
|
|
@ -224,9 +258,11 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
|
|||
audioModeChanged(value){
|
||||
if(value === 1) {
|
||||
this.startUsingMic();
|
||||
} else if(value === 2){
|
||||
this.send('useYoutubeAudio');
|
||||
} else {
|
||||
this.send('useLocalAudio');
|
||||
}
|
||||
|
||||
this.set('audioMode', value);
|
||||
},
|
||||
clickSpeaker(){
|
||||
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
|
||||
Em.$('#beatSpeakerContainer').on('mousedown', '#beatSpeakerCenter', function(event) {
|
||||
Em.$('#beatSpeakerContainer').on('mousedown', '#beatSpeakerCenterInner', function(event) {
|
||||
event.preventDefault();
|
||||
});
|
||||
|
||||
|
|
@ -519,5 +555,9 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
|
|||
event.preventDefault();
|
||||
}
|
||||
});
|
||||
|
||||
window.onYouTubeIframeAPIReady = function() {
|
||||
debugger;
|
||||
};
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -118,7 +118,7 @@ export default Em.Mixin.create({
|
|||
paused: false,
|
||||
// audio: playing or paused
|
||||
playing: false,
|
||||
|
||||
youtubePlayer: null,
|
||||
fadeOutNotification: false,
|
||||
|
||||
speakerViewed: true,
|
||||
|
|
@ -300,7 +300,7 @@ export default Em.Mixin.create({
|
|||
|
||||
if (this.get(type)) {
|
||||
tooltipTxt = 'Pause';
|
||||
} else if(this.get('timeElapsed') === this.get('timeTotal')){
|
||||
} else if(this.get('timeElapsed') === this.get('timeTotal') && this.get('timeTotal') !== 0){
|
||||
tooltipTxt = 'Replay';
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
<div class="row">
|
||||
{{#if (or usingLocalAudio usingMicAudio)}}
|
||||
<div id="playerArea" class="col-sm-8 col-xs-12" {{action "playerAreaPlay"}}>
|
||||
<div id="playNotification"
|
||||
class="material-icons {{if fadeOutNotification "fadeOut"}} {{if playing "play-arrow" "pause"}}"></div>
|
||||
|
|
@ -6,7 +7,6 @@
|
|||
{{#if usingLocalAudio}}
|
||||
{{range-slider start=seekPosition min=0 max=100 id="seekSlider" slide="seekChanged"}}
|
||||
|
||||
|
||||
{{#if playQueueMultiple}}
|
||||
<span data-toggle="tooltip" data-placement="top" class="bootstrapTooltip" id="prevTooltip"
|
||||
data-title={{prevTooltipTxt}} {{action "previous"}}>{{paper-icon icon="skip-previous" class="playerControllIcon"}}</span><!--
|
||||
|
|
@ -24,7 +24,6 @@
|
|||
<div id="playerTimeControls">{{timeElapsedTxt}} / {{timeTotalTxt}}</div>
|
||||
{{/if}}
|
||||
|
||||
{{#if (or useLocalAudio useMicAudio)}}
|
||||
<span class="pull-right">
|
||||
<span data-toggle="tooltip" data-placement="top" class="bootstrapTooltip"
|
||||
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"}}
|
||||
</span>
|
||||
</span>
|
||||
{{/if}}
|
||||
</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">
|
||||
<input id="fileInput" type="file" accept="audio/*" multiple="true"/>
|
||||
|
|
@ -44,12 +47,12 @@
|
|||
|
||||
<span data-toggle="tooltip" data-placement="bottom auto" class="bootstrapTooltip"
|
||||
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}}
|
||||
<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}}
|
||||
<span data-toggle="tooltip" data-placement="bottom auto" class="bootstrapTooltip"
|
||||
data-title="Play Youtube" {{action "useYoutubeAudio"}}>{{fa-icon 'youtubeWorkaround' classNames=usingYoutubeAudioClass}}</span>
|
||||
|
||||
{{#if usingLocalAudio}}
|
||||
<span data-toggle="tooltip" data-placement="bottom auto" data-title="Add new music"
|
||||
|
|
@ -96,29 +99,31 @@
|
|||
{{/each}}
|
||||
</div>
|
||||
{{else}}
|
||||
<div id="playAreaYoutube">
|
||||
YOUTUBE
|
||||
<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>
|
||||
</div>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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}}
|
||||
</div>
|
||||
<div class="col-xs-3">
|
||||
<div class="col-xs-3 zIndexTwo">
|
||||
{{fa-icon beatDetectionArrowIcon}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{#if playerBottomDisplayed}}
|
||||
<div id="playerBottom" class="row">
|
||||
<div id="beatArea" class="col-sm-8 col-xs-12">
|
||||
<div id="vertDivider" class="visible-lg visible-md"></div>
|
||||
|
||||
<div id="beatArea" class="col-lg-8 col-xs-12">
|
||||
<div class="row">
|
||||
<div class="beatOption col-xs-3">
|
||||
<div class="text-center">{{threshold}}</div>
|
||||
|
|
@ -179,7 +184,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div id="beatContainer" class="col-sm-4 col-xs-12">
|
||||
<div id="beatContainer" class="col-lg-4 col-xs-12">
|
||||
{{#if speakerViewed}}
|
||||
<div class="bezel">
|
||||
<div class="rivet1"></div>
|
||||
|
|
@ -209,4 +214,5 @@
|
|||
</div>
|
||||
{{/if}}
|
||||
|
||||
{{ember-notify closeAfter=5000}}
|
||||
{{ember-notify closeAfter=5000}}
|
||||
<div id="dimmer" class="{{if playing "show"}}"></div>
|
||||
|
|
@ -398,6 +398,14 @@ md-toolbar {
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
#musicTab{
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.zIndexTwo {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.#{$fa-css-prefix}-youtubeWorkaround:before {
|
||||
content: $fa-var-youtube-play;
|
||||
font-size: 22px;
|
||||
|
|
@ -406,6 +414,7 @@ md-toolbar {
|
|||
#slideToggle {
|
||||
color: $playerDefaultIconColor;
|
||||
background-color: $playerBottomBackground;
|
||||
z-index: 2;
|
||||
div i {
|
||||
font-size: 25px;
|
||||
color: inherit !important;
|
||||
|
|
@ -501,6 +510,8 @@ i.playerControllIcon {
|
|||
height: $playerHeight;
|
||||
background-color: black;
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
#playerArea:hover #playerControls {
|
||||
|
|
@ -512,6 +523,7 @@ i.playerControllIcon {
|
|||
background-color: $playListBackgroundColor;
|
||||
padding-left: 0.625em;
|
||||
padding-right: 0.625em;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
#playerArea * .noUi-origin {
|
||||
|
|
@ -672,6 +684,7 @@ i.playerControllIcon {
|
|||
}
|
||||
|
||||
#beatArea {
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
|
@ -708,11 +721,13 @@ i.playerControllIcon {
|
|||
color: white;
|
||||
background-color: $playerBottomBackground;
|
||||
width: 100%;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
#beatContainer {
|
||||
vertical-align: middle;
|
||||
padding: 0;
|
||||
padding: 0 10px;
|
||||
z-index: 2;
|
||||
md-switch {
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
|
|
@ -738,15 +753,6 @@ i.playerControllIcon {
|
|||
}
|
||||
}
|
||||
|
||||
#vertDivider {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 25%;
|
||||
width: 2px;
|
||||
height: 50%;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
#beatHistory {
|
||||
color: black;
|
||||
height: 300px;
|
||||
|
|
@ -904,7 +910,7 @@ $vibrateblur1:1px;
|
|||
}
|
||||
.vibrateInner{
|
||||
-webkit-animation: vibrate 0.25s linear 1;
|
||||
animation: vibrate 0.1s linear 1;
|
||||
animation: vibrate 0.15s linear 1;
|
||||
}
|
||||
#beatSpeakerCenterOuter {
|
||||
@extend %base;
|
||||
|
|
@ -923,7 +929,7 @@ $vibrateblur1:1px;
|
|||
}
|
||||
.vibrateOuter {
|
||||
-webkit-animation: vibrate1 0.25s linear 1;
|
||||
animation: vibrate1 0.1s linear 1;
|
||||
animation: vibrate1 0.15s linear 1;
|
||||
}
|
||||
.bezel {
|
||||
@extend %base;
|
||||
|
|
@ -932,7 +938,7 @@ $vibrateblur1:1px;
|
|||
width: $bezelsize;
|
||||
position: relative;
|
||||
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 {
|
||||
@extend %rivet;
|
||||
|
|
@ -974,3 +980,20 @@ $vibrateblur1:1px;
|
|||
bottom: 17%;
|
||||
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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,14 +21,14 @@ module.exports = function(environment) {
|
|||
|
||||
contentSecurityPolicy: {
|
||||
'default-src': "'none'",
|
||||
'script-src': "'self'",
|
||||
'script-src': "'self' apis.google.com 'unsafe-inline'",
|
||||
'font-src': "'self' fonts.gstatic.com",
|
||||
'connect-src': "'self' *",
|
||||
'img-src': "'self' data:",
|
||||
'media-src': "'self' blob:",
|
||||
'style-src': "'self' 'unsafe-inline' fonts.googleapis.com",
|
||||
'object-src': "'self'",
|
||||
'frame-src': "'self'"
|
||||
'frame-src': "'self' accounts.google.com content.googleapis.com www.youtube.com"
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
|||
Reference in a new issue