Renamed youtube.js to player.js and trying to get mobileplayer to work correctly

This commit is contained in:
Kasper Rynning-Tønnesen
2016-02-22 08:38:02 +01:00
parent 4891efecb0
commit fb9cf776b0
12 changed files with 145 additions and 136 deletions

View File

@@ -15,7 +15,7 @@ gulp.task('js', function () {
}); });
gulp.task('embed', function () { gulp.task('embed', function () {
gulp.src(['static/js/youtube.js', 'static/js/helpers.js', 'static/js/playercontrols.js', 'static/js/list.js', 'static/js/embed.js', '!static/js/nochan*', '!static/js/remotecontroller.js']) gulp.src(['static/js/player.js', 'static/js/helpers.js', 'static/js/playercontrols.js', 'static/js/list.js', 'static/js/embed.js', '!static/js/nochan*', '!static/js/remotecontroller.js'])
.pipe(uglify({ .pipe(uglify({
mangle: true, mangle: true,
compress: true, compress: true,

View File

@@ -1303,7 +1303,7 @@ nav ul li:hover, nav ul li.active {
} }
#player{ #player{
/*display:none;*/ display:none;
} }
.hide-on-small-only{ .hide-on-small-only{

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@@ -17,7 +17,7 @@ var Crypt = {
conf_pass = Crypt.decrypt(Crypt.create_cookie(chan.toLowerCase()), chan.toLowerCase()); conf_pass = Crypt.decrypt(Crypt.create_cookie(chan.toLowerCase()), chan.toLowerCase());
} }
Hostcontroller.change_enabled(conf_arr.remote); Hostcontroller.change_enabled(conf_arr.remote);
if(conf_arr["width"] != 100) Youtube.set_width(conf_arr["width"]); if(conf_arr["width"] != 100) Player.set_width(conf_arr["width"]);
}, },
decrypt: function(cookie, name){ decrypt: function(cookie, name){

View File

@@ -42,12 +42,12 @@ $(document).ready(function(){
}); });
Youtube.setup_youtube_listener(chan); Player.setup_youtube_listener(chan);
List.channel_listener(); List.channel_listener();
window.onYouTubeIframeAPIReady = Youtube.onYouTubeIframeAPIReady; window.onYouTubeIframeAPIReady = Player.onYouTubeIframeAPIReady;
Youtube.loadPlayer(); Player.loadPlayer();
Playercontrols.initSlider(); Playercontrols.initSlider();
}); });

View File

@@ -103,7 +103,7 @@ var Helper = {
socket.removeAllListeners() socket.removeAllListeners()
socket.disconnect(); socket.disconnect();
socket.connect(); socket.connect();
Youtube.setup_all_listeners(); Player.setup_all_listeners();
} }
lastSample = Date.now(); lastSample = Date.now();
setTimeout(Helper.sample, SAMPLE_RATE); setTimeout(Helper.sample, SAMPLE_RATE);

View File

@@ -27,7 +27,7 @@ var Hostcontroller = {
if(enabled){ if(enabled){
if(arr[0] == "volume"){ if(arr[0] == "volume"){
$("#volume").slider("value", arr[1]); $("#volume").slider("value", arr[1]);
Youtube.ytplayer.setVolume(arr[1]); Player.ytplayer.setVolume(arr[1]);
localStorage.setItem("volume", arr[1]); localStorage.setItem("volume", arr[1]);
Playercontrols.choose_button(arr[1], false); Playercontrols.choose_button(arr[1], false);
}else if(arr[0] == "channel"){ }else if(arr[0] == "channel"){
@@ -46,9 +46,9 @@ var Hostcontroller = {
window.history.pushState("object or string", "Title", "/"+chan.toLowerCase()); window.history.pushState("object or string", "Title", "/"+chan.toLowerCase());
}else if(arr[0] == "pause") }else if(arr[0] == "pause")
Youtube.ytplayer.pauseVideo() Player.ytplayer.pauseVideo()
else if(arr[0] == "play") else if(arr[0] == "play")
Youtube.ytplayer.playVideo(); Player.ytplayer.playVideo();
else if(arr[0] == "skip") else if(arr[0] == "skip")
List.skip(); List.skip();
} }

View File

@@ -28,6 +28,7 @@ var lazy_load = true;
var embed = false; var embed = false;
var autoplay = true; var autoplay = true;
var mobile_beginning;
var timeout_search; var timeout_search;
var id; var id;
var full_playlist; var full_playlist;
@@ -56,6 +57,7 @@ $().ready(function(){
function init(){ function init(){
mobile_beginning = window.mobilecheck();
window.onpopstate = function(e){ window.onpopstate = function(e){
onepage_load(); onepage_load();
@@ -69,7 +71,7 @@ function init(){
//setTimeout(function(){ //setTimeout(function(){
if(Youtube != undefined) Youtube.stopInterval= false; if(Player != undefined) Player.stopInterval= false;
//window.vote = List.vote; //window.vote = List.vote;
//window.submit = Search.submit; //window.submit = Search.submit;
//window.submitAndClose = Search.submitAndClose; //window.submitAndClose = Search.submitAndClose;
@@ -113,35 +115,43 @@ function init(){
}*/ }*/
socket = io.connect(''+add+':8880', connection_options); socket = io.connect(''+add+':8880', connection_options);
Youtube.setup_youtube_listener(chan); Player.setup_youtube_listener(chan);
Admin.admin_listener(); Admin.admin_listener();
List.channel_listener(); List.channel_listener();
socket.on("get_list", function(){ socket.on("get_list", function(){
//setTimeout(function(){ //setTimeout(function(){
socket.emit('list', chan.toLowerCase()) socket.emit('list', chan.toLowerCase())
//},1000); //},1000);
}); });
socket.on("suggested", function(params){ socket.on("suggested", function(params){
var single = true; var single = true;
if(params.id == undefined) if(params.id == undefined)
single = false; single = false;
//setTimeout(function(){ //setTimeout(function(){
Suggestions.catchUserSuggests(params, single); Suggestions.catchUserSuggests(params, single);
//}, 1000); //}, 1000);
}); });
socket.on("viewers", function(view)
{
viewers = view;
if(song_title !== undefined)
Player.getTitle(song_title, viewers);
});
if(/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream){ if(/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream){
document.getElementById("search").blur(); document.getElementById("search").blur();
Youtube.readyLooks(); Player.readyLooks();
}else{ }else{
Chat.setup_chat_listener(chan); Chat.setup_chat_listener(chan);
Chat.allchat_listener(); Chat.allchat_listener();
if(!window.mobilecheck()) Hostcontroller.host_listener(); if(!window.mobilecheck()) Hostcontroller.host_listener();
window.onYouTubeIframeAPIReady = Youtube.onYouTubeIframeAPIReady; window.onYouTubeIframeAPIReady = Player.onYouTubeIframeAPIReady;
Youtube.loadPlayer(); Player.loadPlayer();
$("#chat-btn").sideNav({ $("#chat-btn").sideNav({
menuWidth: 272, // Default is 240 menuWidth: 272, // Default is 240
@@ -266,7 +276,7 @@ $('input[class=conf]').change(function()
}); });
$("#clickme").click(function(){ $("#clickme").click(function(){
Youtube.ytplayer.playVideo(); Player.ytplayer.playVideo();
}); });
$('#listImport').on("submit", function(){ $('#listImport').on("submit", function(){
@@ -468,7 +478,7 @@ function onepage_load(){
$("#channel-load").css("display", "block"); $("#channel-load").css("display", "block");
window.scrollTo(0, 0); window.scrollTo(0, 0);
Youtube.stopInterval = true; Player.stopInterval = true;
Admin.display_logged_out(); Admin.display_logged_out();
Admin.beginning = true; Admin.beginning = true;
chan = ""; chan = "";
@@ -496,7 +506,7 @@ function onepage_load(){
$("meta[name=theme-color]").attr("content", "#2D2D2D"); $("meta[name=theme-color]").attr("content", "#2D2D2D");
Youtube.ytplayer.destroy(); Player.ytplayer.destroy();
$(".drag-target").remove(); $(".drag-target").remove();
$("#sidenav-overlay").remove(); $("#sidenav-overlay").remove();

View File

@@ -1,4 +1,4 @@
var Youtube = { var Player = {
loaded: true, loaded: true,
before_load: "", before_load: "",
@@ -10,7 +10,7 @@ var Youtube = {
{ {
socket.on("np", function(obj) socket.on("np", function(obj)
{ {
Youtube.loaded = false; Player.loaded = false;
if(obj.length == 0){ if(obj.length == 0){
@@ -19,7 +19,7 @@ var Youtube = {
if(!/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream) $("#player_overlay").toggleClass("hide"); if(!/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream) $("#player_overlay").toggleClass("hide");
try{ try{
Youtube.ytplayer.stopVideo(); Player.ytplayer.stopVideo();
}catch(e){} }catch(e){}
//List.importOldList(channel.toLowerCase()); //List.importOldList(channel.toLowerCase());
} }
@@ -36,6 +36,10 @@ var Youtube = {
seekTo = time - conf["startTime"]; seekTo = time - conf["startTime"];
song_title = obj[0][0]["title"]; song_title = obj[0][0]["title"];
if(mobile_beginning && window.mobilecheck() && seekTo == 0)
seekTo = 1;
if(full_playlist[0].id == video_id){ if(full_playlist[0].id == video_id){
List.song_change(full_playlist[0].added); List.song_change(full_playlist[0].added);
} }
@@ -43,45 +47,40 @@ var Youtube = {
try{ try{
Suggestions.fetchYoutubeSuggests(video_id); Suggestions.fetchYoutubeSuggests(video_id);
}catch(e){} }catch(e){}
Youtube.getTitle(song_title, viewers); Player.getTitle(song_title, viewers);
Youtube.setBGimage(video_id); Player.setBGimage(video_id);
//if(player_ready && !window.mobilecheck()) //if(player_ready && !window.mobilecheck())
if(player_ready && !/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream) if(player_ready && !window.MSStream)
{ {
try{ try{
if(Youtube.ytplayer.getVideoUrl().split('v=')[1] != video_id) if(Player.ytplayer.getVideoUrl().split('v=')[1] != video_id)
{ {
Youtube.ytplayer.loadVideoById(video_id); Player.ytplayer.loadVideoById(video_id);
Youtube.notifyUser(video_id, song_title); Player.notifyUser(video_id, song_title);
Youtube.ytplayer.seekTo(seekTo); Player.ytplayer.seekTo(seekTo);
if(paused) if(paused)
Youtube.ytplayer.pauseVideo(); Player.ytplayer.pauseVideo();
} }
if(!paused){ if(!paused){
Youtube.ytplayer.playVideo(); if(!mobile_beginning)
Youtube.durationSetter(); Player.ytplayer.playVideo();
Player.durationSetter();
mobile_beginning = false;
} }
if(Youtube.ytplayer.getDuration() > seekTo || Youtube.ytplayer.getDuration() == 0) if(Player.ytplayer.getDuration() > seekTo || Player.ytplayer.getDuration() == 0)
Youtube.ytplayer.seekTo(seekTo); Player.ytplayer.seekTo(seekTo);
Youtube.after_load = video_id; Player.after_load = video_id;
setTimeout(function(){Youtube.loaded = true;},500); setTimeout(function(){Player.loaded = true;},500);
}catch(e){Youtube.durationSetter();} }catch(e){Player.durationSetter();}
} }
else else
Youtube.getTitle(song_title, viewers); Player.getTitle(song_title, viewers);
} }
}); });
socket.on("viewers", function(view)
{
viewers = view;
if(song_title !== undefined)
Youtube.getTitle(song_title, viewers);
});
}, },
onPlayerStateChange: function(newState) { onPlayerStateChange: function(newState) {
@@ -98,7 +97,7 @@ var Youtube = {
case 1: case 1:
playing = true; playing = true;
if(beginning && window.mobilecheck()){ if(beginning && window.mobilecheck()){
Youtube.ytplayer.pauseVideo(); Player.ytplayer.pauseVideo();
beginning = false; beginning = false;
} }
if(!embed) Helper.addClass("#player_overlay", "hide"); if(!embed) Helper.addClass("#player_overlay", "hide");
@@ -141,63 +140,63 @@ var Youtube = {
if(newState.data == 5 || newState.data == 100 if(newState.data == 5 || newState.data == 100
|| newState.data == 101 || newState.data == 150) || newState.data == 101 || newState.data == 150)
{ {
/*if(Youtube.count == 2){ /*if(Player.count == 2){
Youtube.count = 0;*/ Player.count = 0;*/
/*console.log("Before: " + Youtube.before_load); /*console.log("Before: " + Player.before_load);
console.log("Now: " + video_id); console.log("Now: " + video_id);
console.log("After: " + Youtube.after_load); console.log("After: " + Player.after_load);
console.log(Youtube.before_load == Youtube.ytplayer.getVideoUrl);*/ console.log(Player.before_load == Player.ytplayer.getVideoUrl);*/
curr_playing = Youtube.ytplayer.getVideoUrl().replace("https://www.youtube.com/watch?v=", ""); curr_playing = Player.ytplayer.getVideoUrl().replace("https://www.youtube.com/watch?v=", "");
socket.emit("skip", {error: newState.data, id: video_id, pass: adminpass}); socket.emit("skip", {error: newState.data, id: video_id, pass: adminpass});
//console.log(video_id, Youtube.ytplayer.getVideoUrl(), Youtube.ytplayer.getPlayerState()); //console.log(video_id, Player.ytplayer.getVideoUrl(), Player.ytplayer.getPlayerState());
/*}else{ /*}else{
setTimeout(function(){ setTimeout(function(){
Youtube.ytplayer.loadVideoById(video_id); Player.ytplayer.loadVideoById(video_id);
Youtube.count ++; Player.count ++;
}, Math.floor((Math.random() * 100) + 1)); }, Math.floor((Math.random() * 100) + 1));
}*/ }*/
}else if(video_id !== undefined) }else if(video_id !== undefined)
Youtube.ytplayer.loadVideoById(video_id); Player.ytplayer.loadVideoById(video_id);
}, },
onPlayerReady: function(event) { onPlayerReady: function(event) {
$("#channel-load").css("display", "none"); $("#channel-load").css("display", "none");
try{ try{
beginning = true; beginning = true;
player_ready = true; player_ready = true;
if(!/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream) if(!/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream)
{ {
$("#player").css("opacity", "1"); $("#player").css("opacity", "1");
$("#controls").css("opacity", "1"); $("#controls").css("opacity", "1");
$(".playlist").css("opacity", "1"); $(".playlist").css("opacity", "1");
Youtube.ytplayer.loadVideoById(video_id); Player.ytplayer.loadVideoById(video_id);
if(autoplay && !window.mobilecheck()) Youtube.ytplayer.playVideo(); if(autoplay && !window.mobilecheck()) Player.ytplayer.playVideo();
Youtube.durationSetter(); Player.durationSetter();
if(embed){ if(embed){
setTimeout(function(){ setTimeout(function(){
Youtube.ytplayer.seekTo(seekTo); Player.ytplayer.seekTo(seekTo);
if(!autoplay){ if(!autoplay){
Youtube.ytplayer.pauseVideo(); Player.ytplayer.pauseVideo();
Playercontrols.play_pause_show(); Playercontrols.play_pause_show();
} }
}, 1000); }, 1000);
}else }else
Youtube.ytplayer.seekTo(seekTo); Player.ytplayer.seekTo(seekTo);
} }
Youtube.readyLooks(); Player.readyLooks();
Playercontrols.initYoutubeControls(Youtube.ytplayer); Playercontrols.initYoutubeControls(Player.ytplayer);
Playercontrols.initSlider(); Playercontrols.initSlider();
Youtube.ytplayer.setVolume(Crypt.get_volume()); Player.ytplayer.setVolume(Crypt.get_volume());
$(".video-container").removeClass("no-opacity"); $(".video-container").removeClass("no-opacity");
}catch(e){} }catch(e){}
}, },
readyLooks: function() readyLooks: function()
{ {
Youtube.setBGimage(video_id); Player.setBGimage(video_id);
}, },
setBGimage: function(id){ setBGimage: function(id){
@@ -243,7 +242,7 @@ var Youtube = {
socket.on("get_list", function(){ socket.on("get_list", function(){
socket.emit('list', chan.toLowerCase()); socket.emit('list', chan.toLowerCase());
}); });
Youtube.setup_youtube_listener(chan); Player.setup_youtube_listener(chan);
Admin.admin_listener(); Admin.admin_listener();
Chat.setup_chat_listener(chan); Chat.setup_chat_listener(chan);
Chat.allchat_listener(); Chat.allchat_listener();
@@ -251,13 +250,13 @@ var Youtube = {
}, },
onYouTubeIframeAPIReady: function() { onYouTubeIframeAPIReady: function() {
Youtube.ytplayer = new YT.Player('player', { Player.ytplayer = new YT.Player('player', {
videoId: video_id, videoId: video_id,
playerVars: { rel:"0", wmode:"transparent", controls: "0" , iv_load_policy: "3", theme:"light", color:"white"}, playerVars: { rel:"0", wmode:"transparent", controls: "0" , iv_load_policy: "3", theme:"light", color:"white"},
events: { events: {
'onReady': Youtube.onPlayerReady, 'onReady': Player.onPlayerReady,
'onStateChange': Youtube.onPlayerStateChange, 'onStateChange': Player.onPlayerStateChange,
'onError': Youtube.errorHandler 'onError': Player.errorHandler
} }
}); });
//Youtube.durationSetter(); //Youtube.durationSetter();
@@ -266,13 +265,13 @@ var Youtube = {
durationSetter: function() durationSetter: function()
{ {
try{ try{
duration = Youtube.ytplayer.getDuration(); duration = Player.ytplayer.getDuration();
}catch(e){duration = 0}; }catch(e){duration = 0};
if(duration != undefined){ if(duration != undefined){
try{ try{
dMinutes = Math.floor(duration / 60); dMinutes = Math.floor(duration / 60);
dSeconds = duration - dMinutes * 60; dSeconds = duration - dMinutes * 60;
currDurr = Youtube.ytplayer.getCurrentTime(); currDurr = Player.ytplayer.getCurrentTime();
if(currDurr > duration) if(currDurr > duration)
currDurr = duration; currDurr = duration;
minutes = Math.floor(currDurr / 60); minutes = Math.floor(currDurr / 60);
@@ -288,12 +287,12 @@ var Youtube = {
} }
} }
if(!Youtube.stopInterval) setTimeout(Youtube.durationSetter, 1000); if(!Player.stopInterval) setTimeout(Player.durationSetter, 1000);
}, },
loadPlayer: function() { loadPlayer: function() {
if($("script[src='https://www.youtube.com/iframe_api']")["length"] == 1){ if($("script[src='https://www.youtube.com/iframe_api']")["length"] == 1){
Youtube.onYouTubeIframeAPIReady(); Player.onYouTubeIframeAPIReady();
}else{ }else{
tag = document.createElement('script'); tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api"; tag.src = "https://www.youtube.com/iframe_api";

View File

@@ -52,16 +52,16 @@ var Playercontrols = {
play_pause: function() play_pause: function()
{ {
if(Youtube.ytplayer.getPlayerState() == 1) if(Player.ytplayer.getPlayerState() == 1)
{ {
Youtube.ytplayer.pauseVideo(); Player.ytplayer.pauseVideo();
if(window.mobilecheck() && !/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream){ if(window.mobilecheck() && !/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream){
document.getElementById("player").style.display = "none"; document.getElementById("player").style.display = "none";
$(".page-footer").toggleClass("padding-bottom-extra"); $(".page-footer").toggleClass("padding-bottom-extra");
} }
}else if(Youtube.ytplayer.getPlayerState() == 2 || Youtube.ytplayer.getPlayerState() == 0) }else if(Player.ytplayer.getPlayerState() == 2 || Player.ytplayer.getPlayerState() == 0)
{ {
Youtube.ytplayer.playVideo(); Player.ytplayer.playVideo();
if(window.mobilecheck() && !/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream){ if(window.mobilecheck() && !/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream){
document.getElementById("player").style.display = "block"; document.getElementById("player").style.display = "block";
$(".page-footer").toggleClass("padding-bottom-extra"); $(".page-footer").toggleClass("padding-bottom-extra");
@@ -84,33 +84,33 @@ var Playercontrols = {
changeQuality: function(wantedQ) changeQuality: function(wantedQ)
{ {
if(Youtube.ytplayer.getPlaybackQuality != wantedQ) if(Player.ytplayer.getPlaybackQuality != wantedQ)
{ {
Youtube.ytplayer.setPlaybackQuality(wantedQ); Player.ytplayer.setPlaybackQuality(wantedQ);
Youtube.ytplayer.getPlaybackQuality(); Player.ytplayer.getPlaybackQuality();
} }
$("#qS").toggleClass("hide"); $("#qS").toggleClass("hide");
}, },
mute_video: function() mute_video: function()
{ {
if(!Youtube.ytplayer.isMuted()) if(!Player.ytplayer.isMuted())
{ {
Playercontrols.choose_button(0, true); Playercontrols.choose_button(0, true);
Youtube.ytplayer.mute(); Player.ytplayer.mute();
}else }else
{ {
Youtube.ytplayer.unMute(); Player.ytplayer.unMute();
Playercontrols.choose_button(Youtube.ytplayer.getVolume(), false); Playercontrols.choose_button(Player.ytplayer.getVolume(), false);
} }
}, },
setVolume: function(vol) setVolume: function(vol)
{ {
Youtube.ytplayer.setVolume(vol); Player.ytplayer.setVolume(vol);
Playercontrols.choose_button(vol, false); Playercontrols.choose_button(vol, false);
if(Youtube.ytplayer.isMuted()) if(Player.ytplayer.isMuted())
Youtube.ytplayer.unMute(); Player.ytplayer.unMute();
}, },
choose_button: function(vol, mute) choose_button: function(vol, mute)
@@ -159,35 +159,35 @@ var Playercontrols = {
playPause: function() playPause: function()
{ {
state = Youtube.ytplayer.getPlayerState(); state = Player.ytplayer.getPlayerState();
button = document.getElementById("playpause"); button = document.getElementById("playpause");
if(state == 1) if(state == 1)
{ {
Youtube.ytplayer.pauseVideo(); Player.ytplayer.pauseVideo();
}else if(state == 2) }else if(state == 2)
{ {
Youtube.ytplayer.playVideo(); Player.ytplayer.playVideo();
} }
}, },
volumeOptions: function() volumeOptions: function()
{ {
if(Youtube.ytplayer.isMuted()) if(Player.ytplayer.isMuted())
{ {
Youtube.ytplayer.unMute(); Player.ytplayer.unMute();
vol = Youtube.ytplayer.getVolume(); vol = Player.ytplayer.getVolume();
$("#volume").slider("value", Youtube.ytplayer.getVolume()); $("#volume").slider("value", Player.ytplayer.getVolume());
} }
else else
{ {
Youtube.ytplayer.mute(); Player.ytplayer.mute();
$("#volume").slider("value", 0); $("#volume").slider("value", 0);
} }
}, },
hoverMute: function(foo) hoverMute: function(foo)
{ {
vol = Youtube.ytplayer.getVolume(); vol = Player.ytplayer.getVolume();
} }