Fixed issues with embedded player

This commit is contained in:
Kasper Rynning-Tønnesen
2018-05-04 17:15:04 +02:00
parent 3c87a148e1
commit fc7966a008
9 changed files with 84 additions and 89 deletions

View File

@@ -21,6 +21,20 @@
width: 50vw;
}
.soundcloud_info_container {
position: absolute;
bottom: 20px;
right: 0px;
padding-left: 20px;
display: flex;
align-items: center;
background: rgba(0,0,0,.7);
}
.soundcloud_info_container a {
margin: 0 10px;
}
.card {
cursor:pointer;
background-color: rgba(255, 255, 255, 0.04) !important;

View File

@@ -169,7 +169,7 @@ var Channel = {
Playercontrols.initSlider();
if(player_ready) {
Player.player.setVolume(Crypt.get_volume());
SC.Widget(Player.soundcloud_player).setVolume(Crypt.get_volume());
Player.soundcloud_player.setVolume(embed ? 1 : Crypt.get_volume() / 100);
}
Helper.removeClass(".video-container", "no-opacity");
var codeURL = "https://remote."+window.location.hostname+"/"+id;

View File

@@ -8,6 +8,9 @@ var startTime = 0;
var socket_connected = false;
var dynamicListeners = {};
var player_ready = false;
var empty_clear = false;
var fix_too_far = false;
var beginning = false;
var soundcloud_loading = false;
var firstLoad = "";
var list_html = document.getElementById("list-song-html").innerHTML;

View File

@@ -84,7 +84,7 @@ function hide_native(way) {
Helper.setHtml("#chromecast_text", "Playing on<br>" + castSession.La.friendlyName);
}
Player.player.setVolume(100);
SC.Widget(Player.soundcloud_player).setVolume(100);
Player.soundcloud_player.setVolume(1);
Helper.toggleClass("#player_overlay_text", "hide");
} else if(way == 0){
@@ -109,7 +109,7 @@ function hide_native(way) {
if(!Helper.mobilecheck()){
Player.player.setVolume(Crypt.get_volume());
Playercontrols.visualVolume(Crypt.get_volume());
SC.Widget(Player.soundcloud_player).setVolume(Crypt.get_volume());
Player.soundcloud_player.setVolume(embed ? 1 : Crypt.get_volume() / 100);
}
Helper.addClass("#player_overlay", "hide");
Helper.toggleClass("#player_overlay_text", "hide");

View File

@@ -38,7 +38,7 @@ var Hostcontroller = {
if(arr.type == "volume") {
Playercontrols.visualVolume(arr.value);
Player.setVolume(arr.value);
SC.Widget(Player.soundcloud_player).setVolume(arr.value);
Player.soundcloud_player.setVolume(arr.value / 100);
localStorage.setItem("volume", arr.value);
Playercontrols.choose_button(arr.value, false);
} else if(arr.type == "channel") {

View File

@@ -199,21 +199,8 @@ window.addEventListener("DOMContentLoaded", function() {
tag.onload = function() {
console.log("loaded script")
if(document.querySelectorAll("script[src='https://w.soundcloud.com/player/api.js']").length == 1) {
SC.Widget(Player.soundcloud_player);
} else {
tagS = document.createElement('script');
tagS.src = "https://w.soundcloud.com/player/api.js";
firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tagS, firstScriptTag);
tagS.setAttribute("async", true);
tagS.onload = function() {
if(firstLoad == "") {
firstLoad = "widget";
SC = SC;
}
tagSearch = document.createElement('script');
tagSearch.setAttribute("async", true);
tagSearch.src = "https://connect.soundcloud.com/sdk/sdk-3.3.0.js";
@@ -221,24 +208,15 @@ window.addEventListener("DOMContentLoaded", function() {
firstScriptTag.parentNode.insertBefore(tagSearch, firstScriptTag);
tagSearch.onload = function() {
if(firstLoad == "") {
firstLoad = "search";
_SC2 = SC;
} else {
_SC2 = SC;
SC = SC;
SC = _SC2;
}
console.log("loaded1")
window.SC = SC;
SC.initialize({
client_id: 'ed53fc01f248f15becddf8eb52cc91ef'
}, function() {
console.log("Loaded streamer");
});
}
}
}
}
}
if(Helper.mobilecheck()) {
socket.on("guid", function(msg) {

View File

@@ -7,7 +7,9 @@ var Player = {
stopInterval: false,
fireplace: "",
np: {},
soundcloud_player: undefined,
soundcloud_player: {
setVolume: function(val) {}
},
youtube_listener: function(obj) {
if(obj.np != undefined) {
@@ -64,7 +66,7 @@ var Player = {
// Play video/autoplay video
if(obj.np != undefined) {
Player.getTitle(song_title, viewers);
if(((embed && autplay) || !embed ) && !offline && !was_stopped) {
if(((embed && autoplay) || !embed ) && !offline && !was_stopped) {
console.log("loadVideoById \nwas_stopped=",was_stopped,"\noffline=",offline)
Player.loadVideoById(Player.np.id, duration, Player.np.start, Player.np.end);
} else {
@@ -253,7 +255,7 @@ var Player = {
Player.stopVideo();
if(_autoplay) was_stopped = false;
Helper.removeClass(document.getElementById("player_overlay"), "hide");
document.getElementById("player_overlay_text").innerText = "Loading SoundCloud";
//document.getElementById("player_overlay_text").innerText = "Loading SoundCloud";
Helper.css(document.getElementById("player_overlay"), "background-color", "#2d2d2d");
//if(Player.soundcloud_player) {
@@ -263,11 +265,11 @@ var Player = {
/*SC.Widget(Player.soundcloud_player).seekTo((seekTo) * 1000);
SC.Widget(Player.soundcloud_player).setVolume(embed ? 100 : Crypt.get_volume());*/
soundcloud_loading = false;
if(_autoplay) {
/*SC.Widget(Player.soundcloud_player).isPaused(function(paused) {
if(paused) SC.Widget(Player.soundcloud_player).play();
});*/
}
//Player.soundcloud_player.listenTo("/tracks/" + id);
/*SC.Widget(Player.soundcloud_player).getCurrentSound(function(sound) {
Helper.removeClass(".soundcloud_info_container", "hide");
@@ -301,8 +303,6 @@ var Player = {
Player.soundcloud_player.bind("pause", Player.soundcloudPause);
Player.soundcloud_player.bind("play", Player.soundcloudPlay);
window.player = player;
player.play().then(function(){
console.log(id);
SC.get('/tracks', {
ids: id
}).then(function(tracks) {
@@ -312,12 +312,16 @@ var Player = {
document.querySelector(".soundcloud_info_container .green").href = sound.purchase_url;
document.querySelector(".soundcloud_info_container .red").href = sound.user.permalink_url;
});
if(_autoplay) {
player.play().then(function(){
console.log(id);
Player.soundcloud_player.setVolume(embed ? 1 : Crypt.get_volume() / 100);
Player.soundcloud_player.seek((seekTo) * 1000);
console.log('Playback started!');
}).catch(function(e){
console.error('Playback rejected. Try calling play() from a user interaction.', e);
});
}
});
soundcloud_loading = true;
/*SC.Widget(Player.soundcloud_player).bind(SC.Widget.Events.FINISH, Player.soundcloudFinish);
@@ -972,12 +976,6 @@ var Player = {
//SC.Widget(Player.soundcloud_player);
//SC.Widget(Player.soundcloud_player).bind(SC.Widget.Events.READY, Player.soundcloudReady);
} else {
tagS = document.createElement('script');
tagS.src = "https://w.soundcloud.com/player/api.js";
firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tagS, firstScriptTag);
tagS.setAttribute("async", true);
tagSearch = document.createElement('script');
tagSearch.setAttribute("async", true);

View File

@@ -193,13 +193,11 @@ var Playercontrols = {
console.log("play pause here");
if(!chromecastAvailable){
if(videoSource == "soundcloud") {
SC.Widget(Player.soundcloud_player).isPaused(function(paused) {
if(paused) {
if(!Player.soundcloud_player.isPlaying()) {
Player.playVideo();
} else {
Player.pauseVideo();
}
});
} else {
if(Player.player.getPlayerState() == YT.PlayerState.PLAYING)
{
@@ -278,7 +276,7 @@ var Playercontrols = {
setVolume: function(vol) {
Player.setVolume(vol);
SC.Widget(Player.soundcloud_player).setVolume(vol);
Player.soundcloud_player.setVolume(vol / 1000);
Playercontrols.choose_button(vol, false);
if(Player.player.isMuted())
Player.player.unMute();
@@ -362,18 +360,15 @@ var Playercontrols = {
console.log("playpause", videoSource);
if(videoSource == "soundcloud") {
console.log("hello");
SC.Widget(Player.soundcloud_player).isPaused(function(paused) {
console.log(paused);
if(paused) {
if(!Player.soundcloud_player.isPlaying()) {
Helper.addClass("#play", "hide");
Helper.removeClass("#pause", "hide");
SC.Widget(Player.soundcloud_player).play();
Player.soundcloud_player.play();
} else {
Helper.removeClass("#play", "hide");
Helper.addClass("#pause", "hide");
SC.Widget(Player.soundcloud_player).pause();
Player.soundcloud_player.pause();
}
})
} else {
state = Player.player.getPlayerState();
button = document.getElementById("playpause");

View File

@@ -11,11 +11,18 @@
<div id="player-container">
<div id="player"></div>
<div id="player_overlay" class="hide valign-wrapper">
<div class="soundcloud_info_container hide">
<a href="#!" id="soundcloud_listen_link" target="_blank">
<img src="https://developers.soundcloud.com/assets/powered_by_large_white-9c2af6a93ad2b1c541f423d9e9045980.png" />
</a>
<a href="#!" class="btn green waves-effect waves-light" target="_blank">Buy</a>
<a href="#!" class="btn red waves-effect waves-light" target="_blank">Artist</a>
</div>
<div id="player_loader_container" class="hide valign-wrapper">
<div id="player_loader" class="preloader-wrapper large active valign">
{{> spinner}}
</div>
</div>
<div id="soundcloud_container">
<iframe width="100%" id="soundcloud_player" height="166" scrolling="no" frameborder="no" style="top: 0px; left:0px; visibility: hidden;z-index: -999;position: absolute;pointer-events: none;"
src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/undefined&amp;{ auto_play: false, buying:false, sharing:false, download:false, show_user:false, }">
</iframe>
</div>
<div id="zoffbutton" title="Visit the channel!"></div>
<div id="controls" class="noselect">