youtube is a harsh mistress
This commit is contained in:
parent
6fa6763613
commit
6d95b8c666
5 changed files with 39 additions and 24 deletions
|
|
@ -17,7 +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>
|
||||
<script src="http://apis.google.com/js/client.js"></script>
|
||||
<script src="http://www.youtube.com/iframe_api"></script>
|
||||
|
||||
{{content-for 'head-footer'}}
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -49,16 +49,20 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
|
|||
console.log('ready');
|
||||
}, onPlayerStateChange = function(){
|
||||
console.log('onPlayerStateChange');
|
||||
}, onError = function(err){
|
||||
console.log('onError' + err.data);
|
||||
};
|
||||
|
||||
//var youtubePlayer = new YT.Player('ytplayer', {
|
||||
// events: {
|
||||
// 'onReady': onPlayerReady,
|
||||
// 'onStateChange': onPlayerStateChange
|
||||
// }
|
||||
//});
|
||||
//
|
||||
//this.set('youtubePlayer', youtubePlayer);
|
||||
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(){
|
||||
|
|
@ -258,10 +262,10 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
|
|||
audioModeChanged(value){
|
||||
if(value === 1) {
|
||||
this.startUsingMic();
|
||||
} else if(value === 2){
|
||||
this.send('useYoutubeAudio');
|
||||
} else {
|
||||
} else if(value === 3) {
|
||||
this.send('useLocalAudio');
|
||||
} else {
|
||||
this.set('audioMode', value);
|
||||
}
|
||||
},
|
||||
clickSpeaker(){
|
||||
|
|
@ -556,8 +560,8 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
|
|||
}
|
||||
});
|
||||
|
||||
window.onYouTubeIframeAPIReady = function() {
|
||||
debugger;
|
||||
};
|
||||
if(this.get('audioMode') === 2){
|
||||
this.send('useYoutubeAudio');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -36,7 +36,6 @@
|
|||
</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}}
|
||||
|
||||
|
|
@ -187,7 +186,6 @@
|
|||
<div id="beatContainer" class="col-lg-4 col-xs-12">
|
||||
{{#if speakerViewed}}
|
||||
<div class="bezel">
|
||||
<div class="rivet1"></div>
|
||||
<div class="rivet2"></div>
|
||||
<div class="rivet3"></div>
|
||||
<div class="rivet4"></div>
|
||||
|
|
|
|||
|
|
@ -412,7 +412,7 @@ md-toolbar {
|
|||
|
||||
#slideToggle {
|
||||
color: $playerDefaultIconColor;
|
||||
background: darkgrey;
|
||||
background: #8C3E3E;
|
||||
z-index: 2;
|
||||
div i {
|
||||
font-size: 25px;
|
||||
|
|
@ -603,7 +603,7 @@ i.playerControllIcon {
|
|||
}
|
||||
|
||||
#playListArea, #playAreaMic, #playAreaYoutube {
|
||||
background-color: lighten($playListBackgroundColor, 20%);
|
||||
background-color: white;
|
||||
width: 100%;
|
||||
height: 333px;
|
||||
margin: 10px auto 0 auto;
|
||||
|
|
@ -685,6 +685,7 @@ i.playerControllIcon {
|
|||
#beatArea {
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
#beatArea * .noUi-target {
|
||||
|
|
@ -692,8 +693,9 @@ i.playerControllIcon {
|
|||
}
|
||||
|
||||
#beatArea * .noUi-base, #beatArea * .noUi-background {
|
||||
background-color: #3F3F3F;
|
||||
background-color: #ADADAD;
|
||||
cursor: pointer;
|
||||
border: 1px solid #797979;
|
||||
}
|
||||
|
||||
#beatArea * .noUi-vertical {
|
||||
|
|
@ -747,9 +749,6 @@ i.playerControllIcon {
|
|||
|
||||
#playerButtonGroup {
|
||||
margin-top: 10px;
|
||||
button {
|
||||
box-shadow: 5px 0 15px 5px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
#beatHistory {
|
||||
|
|
@ -996,3 +995,16 @@ $vibrateblur1:1px;
|
|||
left: 0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.noUi-value-vertical {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.noUi-vertical .noUi-handle {
|
||||
border: 1px solid #A3A0A0;
|
||||
width: 26px;
|
||||
}
|
||||
|
||||
.noUi-vertical .noUi-handle:after, .noUi-vertical .noUi-handle:before{
|
||||
background: grey;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ module.exports = function(environment) {
|
|||
|
||||
contentSecurityPolicy: {
|
||||
'default-src': "'none'",
|
||||
'script-src': "'self' apis.google.com 'unsafe-inline'",
|
||||
'script-src': "'self' apis.google.com www.youtube.com s.ytimg.com 'unsafe-inline'",
|
||||
'font-src': "'self' fonts.gstatic.com",
|
||||
'connect-src': "'self' *",
|
||||
'img-src': "'self' data:",
|
||||
|
|
|
|||
Reference in a new issue