mirror of
https://github.com/KevinMidboe/zoff.git
synced 2025-10-29 18:00:23 +00:00
Fixes for chromecasting and embedded player
This commit is contained in:
Kasper Rynning-Tønnesen
@@ -1,9 +1,9 @@
|
||||
.card-image{
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
background-position: center;
|
||||
background-size: 180%;
|
||||
height: 100% !important;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
background-position: center;
|
||||
background-size: 180%;
|
||||
height: 100% !important;
|
||||
}
|
||||
|
||||
.side_away {
|
||||
@@ -13,30 +13,37 @@
|
||||
transition: all .3s !important;
|
||||
}
|
||||
|
||||
#player_loader_container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#player_overlay {
|
||||
position: absolute;
|
||||
height: calc(100% - 32px);
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 50vw;
|
||||
position: absolute;
|
||||
height: calc(100% - 32px);
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
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);
|
||||
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;
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.card {
|
||||
cursor:pointer;
|
||||
cursor:pointer;
|
||||
background-color: rgba(255, 255, 255, 0.04) !important;
|
||||
}
|
||||
|
||||
@@ -50,12 +57,12 @@
|
||||
}
|
||||
|
||||
.noselect {
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.video_only {
|
||||
@@ -93,7 +100,7 @@
|
||||
}
|
||||
|
||||
.list-song {
|
||||
background-color: rgba(255, 255, 255, 0.04) !important;
|
||||
background-color: rgba(255, 255, 255, 0.04) !important;
|
||||
}
|
||||
|
||||
#list-song-html {
|
||||
@@ -101,7 +108,7 @@
|
||||
}
|
||||
|
||||
#song-title{
|
||||
display:none;
|
||||
display:none;
|
||||
}
|
||||
|
||||
#zoffchannel{
|
||||
@@ -109,36 +116,36 @@
|
||||
}
|
||||
|
||||
.list-image, .list-suggested-image{
|
||||
width: 34%;
|
||||
height: 66px;
|
||||
float: left;
|
||||
width: 34%;
|
||||
height: 66px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.list-image:after {
|
||||
-webkit-transition: all .3s;
|
||||
transition: all .3s;
|
||||
font-family: "Material Icons";
|
||||
content: "thumb_up";
|
||||
speak: none;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
text-rendering: auto;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
color: white;
|
||||
font-size: -webkit-xxx-large;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: rgba(0,0,0,0.8);
|
||||
opacity: 0;
|
||||
/* transition: all .1s ease; */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
-webkit-transition: all .3s;
|
||||
transition: all .3s;
|
||||
font-family: "Material Icons";
|
||||
content: "thumb_up";
|
||||
speak: none;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
text-rendering: auto;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
color: white;
|
||||
font-size: -webkit-xxx-large;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: rgba(0,0,0,0.8);
|
||||
opacity: 0;
|
||||
/* transition: all .1s ease; */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.list-suggested-image:after {
|
||||
@@ -162,36 +169,36 @@
|
||||
}
|
||||
|
||||
.vote-container:hover .list-image:after, .add-suggested:hover .list-suggested-image:after {
|
||||
opacity:1;
|
||||
opacity:1;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.vote-span{
|
||||
opacity: 0.7;
|
||||
padding: 0 0 0 10px;
|
||||
color:white !important;
|
||||
opacity: 0.7;
|
||||
padding: 0 0 0 10px;
|
||||
color:white !important;
|
||||
}
|
||||
|
||||
.list-song{
|
||||
background-color: rgba(255, 255, 255, 0.04);
|
||||
color:white;
|
||||
font:12px Arial,sans-serif;
|
||||
-webkit-transition:height .3s;
|
||||
-moz-transition:height .3s;
|
||||
-o-transition:height .3s;
|
||||
transition:height .3s;
|
||||
height:66px;
|
||||
width: 100%;
|
||||
background-color: rgba(255, 255, 255, 0.04);
|
||||
color:white;
|
||||
font:12px Arial,sans-serif;
|
||||
-webkit-transition:height .3s;
|
||||
-moz-transition:height .3s;
|
||||
-o-transition:height .3s;
|
||||
transition:height .3s;
|
||||
height:66px;
|
||||
width: 100%;
|
||||
}
|
||||
.list-song .card-content{padding:0;}
|
||||
.list-title{
|
||||
font-size:13px !important;
|
||||
display:block;
|
||||
color:white;font-size:1em;
|
||||
text-align:left;
|
||||
padding: 0 10px 0 10px;
|
||||
line-height: 2.6rem;
|
||||
font-size:13px !important;
|
||||
display:block;
|
||||
color:white;font-size:1em;
|
||||
text-align:left;
|
||||
padding: 0 10px 0 10px;
|
||||
line-height: 2.6rem;
|
||||
}
|
||||
.card-image{cursor:pointer}
|
||||
.card{
|
||||
@@ -202,8 +209,8 @@
|
||||
}
|
||||
|
||||
#playlist{
|
||||
/*background-color:grey;*/
|
||||
height:100vh;
|
||||
/*background-color:grey;*/
|
||||
height:100vh;
|
||||
width:50vw;
|
||||
overflow:hidden;
|
||||
}
|
||||
@@ -211,14 +218,14 @@
|
||||
#zoffbutton{
|
||||
cursor:pointer;
|
||||
position: absolute;
|
||||
bottom: 35px;
|
||||
left: 10px;
|
||||
background-image: url('/assets/images/z.svg');
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-position: center;
|
||||
background-size: 135%;
|
||||
background-repeat: no-repeat;
|
||||
bottom: 35px;
|
||||
left: 10px;
|
||||
background-image: url('/assets/images/z.svg');
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-position: center;
|
||||
background-size: 135%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.progress{background-color:rgba(0,0,0,0) !important;}
|
||||
@@ -232,11 +239,11 @@
|
||||
background: inherit;
|
||||
|
||||
position: relative;
|
||||
opacity:0;
|
||||
height:32px;
|
||||
width:50vw;
|
||||
color:white;
|
||||
margin-top:-5px;
|
||||
opacity:0;
|
||||
height:32px;
|
||||
width:50vw;
|
||||
color:white;
|
||||
margin-top:-5px;
|
||||
}
|
||||
|
||||
#playpause, #duration, #volume-button
|
||||
@@ -253,7 +260,7 @@
|
||||
|
||||
#playpause:hover, #volume-button:hover, #fullscreen:hover
|
||||
{
|
||||
color:rgba(255,255,255,0.5);
|
||||
color:rgba(255,255,255,0.5);
|
||||
}
|
||||
|
||||
#fullscreen
|
||||
@@ -286,166 +293,166 @@
|
||||
|
||||
|
||||
.ui-slider-vertical {
|
||||
width: .8em;
|
||||
height: 100px;
|
||||
width: .8em;
|
||||
height: 100px;
|
||||
}
|
||||
.ui-slider {
|
||||
position: relative;
|
||||
text-align: left;
|
||||
position: relative;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.ui-slider-vertical .ui-slider-range-min {
|
||||
bottom: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
.ui-slider-vertical .ui-slider-range {
|
||||
left: 0;
|
||||
width: 100%;
|
||||
border-radius: 0px !important;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
border-radius: 0px !important;
|
||||
}
|
||||
.ui-slider .ui-slider-range {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
font-size: .7em;
|
||||
display: block;
|
||||
border: 0;
|
||||
background-position: 0 0;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
font-size: .7em;
|
||||
display: block;
|
||||
border: 0;
|
||||
background-position: 0 0;
|
||||
}
|
||||
|
||||
.ui-slider-vertical .ui-slider-handle {
|
||||
left: -.3em;
|
||||
margin-left: 0;
|
||||
margin-bottom: -.6em;
|
||||
left: -.3em;
|
||||
margin-left: 0;
|
||||
margin-bottom: -.6em;
|
||||
}
|
||||
.ui-slider .ui-slider-handle {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
width: 1.2em;
|
||||
height: 1.2em;
|
||||
cursor: default;
|
||||
-ms-touch-action: none;
|
||||
touch-action: none;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
width: 1.2em;
|
||||
height: 1.2em;
|
||||
cursor: default;
|
||||
-ms-touch-action: none;
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
.ui-slider-horizontal .ui-slider-range-min {
|
||||
left: 0;
|
||||
left: 0;
|
||||
}
|
||||
.ui-slider-horizontal .ui-slider-range {
|
||||
top: 0;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.ui-slider .ui-slider-range {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
font-size: .7em;
|
||||
display: block;
|
||||
border: 0;
|
||||
background-position: 0 0;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
font-size: .7em;
|
||||
display: block;
|
||||
border: 0;
|
||||
background-position: 0 0;
|
||||
}
|
||||
|
||||
.ui-slider-horizontal .ui-slider-handle {
|
||||
top: -.3em;
|
||||
margin-left: -.6em;
|
||||
top: -.3em;
|
||||
margin-left: -.6em;
|
||||
}
|
||||
#volume {
|
||||
border-radius: 10px;
|
||||
cursor:pointer;
|
||||
float:left;
|
||||
position: relative;
|
||||
left: 10px;
|
||||
margin: 13px auto;
|
||||
height:5px;
|
||||
width: 75px;
|
||||
/*background-color:rgba(0, 0, 0, 0.5);*/
|
||||
background:rgba(0, 0, 0, 0.5) 50% 50% repeat-x;
|
||||
border: none;
|
||||
outline: none;
|
||||
/*border-radius: 2px;*/
|
||||
border-radius: 10px;
|
||||
cursor:pointer;
|
||||
float:left;
|
||||
position: relative;
|
||||
left: 10px;
|
||||
margin: 13px auto;
|
||||
height:5px;
|
||||
width: 75px;
|
||||
/*background-color:rgba(0, 0, 0, 0.5);*/
|
||||
background:rgba(0, 0, 0, 0.5) 50% 50% repeat-x;
|
||||
border: none;
|
||||
outline: none;
|
||||
/*border-radius: 2px;*/
|
||||
}
|
||||
|
||||
#volume.vertical {
|
||||
border-radius: 0px;
|
||||
border-radius: 0px;
|
||||
}
|
||||
|
||||
#volume .volume-slid {
|
||||
border-radius: 10px;
|
||||
background: white;
|
||||
height: 5px;
|
||||
width: 0%;
|
||||
border-radius: 10px;
|
||||
background: white;
|
||||
height: 5px;
|
||||
width: 0%;
|
||||
}
|
||||
|
||||
#volume .volume-slid.vertical {
|
||||
width: 100%;
|
||||
height: 0%;
|
||||
border-radius: 0px;
|
||||
bottom: 0px;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 0%;
|
||||
border-radius: 0px;
|
||||
bottom: 0px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
#volume .volume-handle {
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
background: white;
|
||||
border-radius: 15px;
|
||||
border: 1px solid lightgrey;
|
||||
margin-top: -9.75px;
|
||||
position: absolute;
|
||||
left: 0%;
|
||||
margin-left: -5.75px;
|
||||
transition: background 0.2s ease, box-shadow 0.2s ease;
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
background: white;
|
||||
border-radius: 15px;
|
||||
border: 1px solid lightgrey;
|
||||
margin-top: -9.75px;
|
||||
position: absolute;
|
||||
left: 0%;
|
||||
margin-left: -5.75px;
|
||||
transition: background 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
#volume .volume-handle.vertical {
|
||||
bottom: 0%;
|
||||
display: none;
|
||||
bottom: 0%;
|
||||
display: none;
|
||||
}
|
||||
#volume .volume-handle.ui-state-active {
|
||||
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.01), 0 0 0 7px rgba(255,255,255,0.3);
|
||||
position: absolute;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 21px;
|
||||
background: #dadada;
|
||||
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.01), 0 0 0 7px rgba(255,255,255,0.3);
|
||||
position: absolute;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 21px;
|
||||
background: #dadada;
|
||||
}
|
||||
|
||||
#toast-container{
|
||||
left:2%;
|
||||
cursor:pointer;
|
||||
width:70vw;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: baseline;
|
||||
/*pointer-events:none;*/
|
||||
left:2%;
|
||||
cursor:pointer;
|
||||
width:70vw;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: baseline;
|
||||
/*pointer-events:none;*/
|
||||
}
|
||||
|
||||
.toast {
|
||||
word-break: normal;
|
||||
cursor: pointer;
|
||||
word-break: normal;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.play
|
||||
{
|
||||
background-size: auto;
|
||||
width: 55px;
|
||||
height: 27px;
|
||||
background-size: auto;
|
||||
width: 55px;
|
||||
height: 27px;
|
||||
}
|
||||
|
||||
.pause
|
||||
{
|
||||
background-size: auto;
|
||||
width: 55px;
|
||||
height: 27px;
|
||||
background-size: auto;
|
||||
width: 55px;
|
||||
height: 27px;
|
||||
}
|
||||
|
||||
.hide
|
||||
{
|
||||
display:none !important;
|
||||
display:none !important;
|
||||
}
|
||||
|
||||
#bar
|
||||
{
|
||||
height:100%;
|
||||
background-color:rgba(0,0,0,0.5);
|
||||
height:100%;
|
||||
background-color:rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
html {
|
||||
@@ -482,24 +489,24 @@ html {
|
||||
}
|
||||
|
||||
.prev_page_hide, .prev_page, .first_page, .first_page_hide{
|
||||
padding:0 1px;
|
||||
padding:0 1px;
|
||||
}
|
||||
|
||||
.next_page_hide, .next_page, .last_page, .last_page_hide{
|
||||
padding:0 0px;
|
||||
display: flex;
|
||||
padding:0 0px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.first_page, .first_page_hide {
|
||||
padding: 0 0 0 10px;
|
||||
padding: 0 0 0 10px;
|
||||
}
|
||||
|
||||
.last_page, .last_page_hide {
|
||||
padding: 0 10px 0 0;
|
||||
padding: 0 10px 0 0;
|
||||
}
|
||||
|
||||
body {
|
||||
background: #2d2d2d;
|
||||
background: #2d2d2d;
|
||||
}
|
||||
|
||||
.vote-container {
|
||||
@@ -509,17 +516,17 @@ body {
|
||||
|
||||
.card-duration {
|
||||
border-top-right-radius: 4px;
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
background: rgba(0,0,0,.7);
|
||||
color: white;
|
||||
padding: 0 5px;
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
background: rgba(0,0,0,.7);
|
||||
color: white;
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
/*
|
||||
.last_page, .last_page_hide, .first_page, .first_page_hide{
|
||||
display: none !important;
|
||||
display: none !important;
|
||||
}
|
||||
*/
|
||||
#wrapper{
|
||||
|
||||
@@ -234,7 +234,7 @@ margin: auto;
|
||||
|
||||
#playing_on #chromecast_text{
|
||||
font-size: 20px;
|
||||
padding-left: 8px;
|
||||
padding-left: 55px;
|
||||
}
|
||||
|
||||
.prev_page, .next_page, .last_page, .first_page{
|
||||
|
||||
@@ -151,7 +151,7 @@ var Channel = {
|
||||
if(!Helper.mobilecheck() && (document.querySelectorAll("#alreadychannel").length === 0 || !Hostcontroller.old_id || document.getElementById("code-text").innerText.toUpperCase() == "ABBADUR")) setup_host_initialization();
|
||||
|
||||
if(document.querySelectorAll("#alreadychannel").length === 0 || Helper.mobilecheck()){
|
||||
setup_youtube_listener();
|
||||
setup_now_playing_listener();
|
||||
get_list_listener();
|
||||
setup_suggested_listener();
|
||||
if(!client) {
|
||||
@@ -349,8 +349,8 @@ var Channel = {
|
||||
total = total * e.clientX;
|
||||
|
||||
if(!chromecastAvailable){
|
||||
Player.player.seekTo(total + Player.np.start);
|
||||
|
||||
if(videoSource == "youtube") Player.player.seekTo(total + Player.np.start);
|
||||
else if(videoSource == "soundcloud") Player.soundcloud_player.seek((total + Player.np.start) * 1000);
|
||||
dMinutes = Math.floor(duration / 60);
|
||||
dSeconds = duration - dMinutes * 60;
|
||||
currDurr = total;
|
||||
|
||||
@@ -8,6 +8,7 @@ var startTime = 0;
|
||||
var socket_connected = false;
|
||||
var dynamicListeners = {};
|
||||
var player_ready = false;
|
||||
var previousSoundcloud;
|
||||
var empty_clear = false;
|
||||
var fix_too_far = false;
|
||||
var beginning = false;
|
||||
@@ -52,6 +53,11 @@ var Crypt = {
|
||||
}
|
||||
};
|
||||
|
||||
SC.initialize({
|
||||
client_id: 'ed53fc01f248f15becddf8eb52cc91ef'
|
||||
}, function() {
|
||||
});
|
||||
|
||||
function receiveMessage(event) {
|
||||
if(event.data == "parent") {
|
||||
window.parentWindow = event.source;
|
||||
@@ -116,7 +122,7 @@ window.addEventListener("DOMContentLoaded", function() {
|
||||
});
|
||||
|
||||
setup_host_initialization();
|
||||
setup_youtube_listener();
|
||||
setup_now_playing_listener();
|
||||
setup_list_listener();
|
||||
|
||||
window.onYouTubeIframeAPIReady = Player.onYouTubeIframeAPIReady;
|
||||
@@ -144,8 +150,8 @@ function setup_host_initialization() {
|
||||
socket.on("id", Hostcontroller.host_listener);
|
||||
}
|
||||
|
||||
function setup_youtube_listener() {
|
||||
socket.on("np", Player.youtube_listener);
|
||||
function setup_now_playing_listener() {
|
||||
socket.on("np", Player.now_playing_listener);
|
||||
}
|
||||
|
||||
function setup_list_listener() {
|
||||
|
||||
@@ -54,7 +54,11 @@ function hide_native(way) {
|
||||
Helper.toggleClass("#duration", "hide");
|
||||
Helper.toggleClass("#fullscreen", "hide");
|
||||
try{
|
||||
Player.player.stopVideo();
|
||||
if(videoSource == "youtube") {
|
||||
Player.player.stopVideo();
|
||||
} else if(videoSource == "soundcloud") {
|
||||
Player.soundcloud_player.pause();
|
||||
}
|
||||
} catch(e){}
|
||||
Player.stopInterval = true;
|
||||
if(Helper.mobilecheck()){
|
||||
@@ -102,7 +106,11 @@ function hide_native(way) {
|
||||
|
||||
Helper.toggleClass("#duration", "hide");
|
||||
Helper.toggleClass("#fullscreen", "hide");
|
||||
Player.player.playVideo();
|
||||
if(videoSource == "youtube") {
|
||||
Player.player.playVideo();
|
||||
} else if(videoSource == "soundcloud") {
|
||||
Player.soundcloud_player.play();
|
||||
}
|
||||
Player.stopInterval = false;
|
||||
duration = Player.player.getDuration();
|
||||
Player.durationSetter();
|
||||
@@ -427,8 +435,8 @@ function setup_no_connection_listener(){
|
||||
});
|
||||
}
|
||||
|
||||
function setup_youtube_listener(){
|
||||
socket.on("np", Player.youtube_listener);
|
||||
function setup_now_playing_listener(){
|
||||
socket.on("np", Player.now_playing_listener);
|
||||
}
|
||||
|
||||
function get_list_listener(){
|
||||
|
||||
@@ -22,19 +22,19 @@ var List = {
|
||||
prev_chan_list = chan;
|
||||
List.populate_list(msg.playlist);
|
||||
if(full_playlist.length > 0) {
|
||||
Player.sendNext({title: full_playlist[0].title, videoId: full_playlist[0].id});
|
||||
Player.sendNext({title: full_playlist[0].title, videoId: full_playlist[0].id, source: full_playlist[0].source, thumbnail: full_playlist[0].thumbnail});
|
||||
}
|
||||
} else if(offline && prev_chan_list == chan && full_playlist != undefined && !msg.shuffled){
|
||||
List.populate_list(full_playlist, true);
|
||||
if(full_playlist.length > 0) {
|
||||
Player.sendNext({title: full_playlist[0].title, videoId: full_playlist[0].id});
|
||||
Player.sendNext({title: full_playlist[0].title, videoId: full_playlist[0].id, source: full_playlist[0].source, thumbnail: full_playlist[0].thumbnail});
|
||||
}
|
||||
}
|
||||
break;
|
||||
case "added":
|
||||
List.added_song(msg.value);
|
||||
if(full_playlist.length > 0) {
|
||||
Player.sendNext({title: full_playlist[0].title, videoId: full_playlist[0].id});
|
||||
Player.sendNext({title: full_playlist[0].title, videoId: full_playlist[0].id, source: full_playlist[0].source, thumbnail: full_playlist[0].thumbnail});
|
||||
}
|
||||
found_array = [];
|
||||
found_array_index = 0;
|
||||
@@ -48,7 +48,7 @@ var List = {
|
||||
if(!offline){
|
||||
List.voted_song(msg.value, msg.time);
|
||||
if(full_playlist.length > 0) {
|
||||
Player.sendNext({title: full_playlist[0].title, videoId: full_playlist[0].id});
|
||||
Player.sendNext({title: full_playlist[0].title, videoId: full_playlist[0].id, source: full_playlist[0].source, thumbnail: full_playlist[0].thumbnail});
|
||||
}
|
||||
}
|
||||
found_array = [];
|
||||
@@ -58,7 +58,7 @@ var List = {
|
||||
if((offline && msg.offline_change) || !offline) {
|
||||
if(window.location.pathname != "/") List.song_change(msg.time, msg.remove);
|
||||
if(full_playlist.length > 0) {
|
||||
Player.sendNext({title: full_playlist[0].title, videoId: full_playlist[0].id});
|
||||
Player.sendNext({title: full_playlist[0].title, videoId: full_playlist[0].id, source: full_playlist[0].source, thumbnail: full_playlist[0].thumbnail});
|
||||
}
|
||||
found_array = [];
|
||||
found_array_index = 0;
|
||||
@@ -72,7 +72,7 @@ var List = {
|
||||
|
||||
if(window.location.pathname != "/") List.song_change_prev(msg.time);
|
||||
if(full_playlist.length > 0) {
|
||||
Player.sendNext({title: full_playlist[0].title, videoId: full_playlist[0].id});
|
||||
Player.sendNext({title: full_playlist[0].title, videoId: full_playlist[0].id, source: full_playlist[0].source, thumbnail: full_playlist[0].thumbnail});
|
||||
}
|
||||
found_array = [];
|
||||
found_array_index = 0;
|
||||
@@ -443,7 +443,7 @@ var List = {
|
||||
}
|
||||
}
|
||||
full_playlist.splice(List.getIndexOfSong(deleted), 1);
|
||||
Player.sendNext({title: full_playlist[0].title, videoId: full_playlist[0].id});
|
||||
Player.sendNext({title: full_playlist[0].title, videoId: full_playlist[0].id, source: full_playlist[0].source, thumbnail: full_playlist[0].thumbnail});
|
||||
//}
|
||||
|
||||
} catch(err) {
|
||||
@@ -461,7 +461,7 @@ var List = {
|
||||
Helper.css(nextToChange, "display", "inline-flex");
|
||||
Helper.css(nextToChange, "height", List.element_height + "px");
|
||||
}
|
||||
Player.sendNext({title: full_playlist[0].title, videoId: full_playlist[0].id});
|
||||
Player.sendNext({title: full_playlist[0].title, videoId: full_playlist[0].id, source: full_playlist[0].source, thumbnail: full_playlist[0].thumbnail});
|
||||
}
|
||||
}
|
||||
if(full_playlist.length < 2){
|
||||
|
||||
@@ -40,6 +40,7 @@ if(window.location.hostname == "localhost" || window.location.hostname == "clien
|
||||
var zoff_api_token = "AhmC4Yg2BhaWPZBXeoWK96DAiAVfbou8TUG2IXtD3ZQ=";
|
||||
}
|
||||
var retry_frontpage;
|
||||
var previousSoundcloud;
|
||||
var chromecast_specs_sent = false;
|
||||
var dragging = false;
|
||||
var user_auth_started = false;
|
||||
@@ -274,60 +275,64 @@ initializeCastApi = function() {
|
||||
]);
|
||||
switch (event.sessionState) {
|
||||
case cast.framework.SessionState.SESSION_STARTED:
|
||||
castSession = cast.framework.CastContext.getInstance().getCurrentSession();
|
||||
castSession.addMessageListener("urn:x-cast:zoff.me", chromecastListener)
|
||||
chrome.cast.media.GenericMediaMetadata({metadataType: 0, title:song_title, image: 'https://img.youtube.com/vi/'+video_id+'/mqdefault.jpg', images: ['https://img.youtube.com/vi/'+video_id+'/mqdefault.jpg']});
|
||||
//chrome.cast.Image('https://img.youtube.com/vi/'+video_id+'/mqdefault.jpg');
|
||||
chromecastAvailable = true;
|
||||
paused = false;
|
||||
mobile_beginning = false;
|
||||
var _seekTo;
|
||||
try{
|
||||
_seekTo = Player.player.getCurrentTime();
|
||||
} catch(event){
|
||||
_seekTo = seekTo;
|
||||
}
|
||||
castSession.sendMessage("urn:x-cast:zoff.me", {type: "loadVideo", start: Player.np.start, end: Player.np.end, videoId: video_id, seekTo: _seekTo, channel: chan.toLowerCase(), source: videoSource})
|
||||
castSession.sendMessage("urn:x-cast:zoff.me", {type: "nextVideo", videoId: full_playlist[0].id, title: full_playlist[0].title, source: full_playlist[0].source})
|
||||
castSession = cast.framework.CastContext.getInstance().getCurrentSession();
|
||||
castSession.addMessageListener("urn:x-cast:zoff.me", chromecastListener)
|
||||
chrome.cast.media.GenericMediaMetadata({metadataType: 0, title:song_title, image: 'https://img.youtube.com/vi/'+video_id+'/mqdefault.jpg', images: ['https://img.youtube.com/vi/'+video_id+'/mqdefault.jpg']});
|
||||
//chrome.cast.Image('https://img.youtube.com/vi/'+video_id+'/mqdefault.jpg');
|
||||
chromecastAvailable = true;
|
||||
paused = false;
|
||||
mobile_beginning = false;
|
||||
var _seekTo;
|
||||
try{
|
||||
if(videoSource == "youtube") {
|
||||
_seekTo = Player.player.getCurrentTime();
|
||||
} else if(videoSource == "soundcloud") {
|
||||
_seekTo = Player.soundcloud_player.currentTime() / 1000;
|
||||
}
|
||||
} catch(event){
|
||||
_seekTo = seekTo;
|
||||
}
|
||||
castSession.sendMessage("urn:x-cast:zoff.me", {type: "loadVideo", start: Player.np.start, end: Player.np.end, videoId: video_id, seekTo: _seekTo, channel: chan.toLowerCase(), source: videoSource, thumbnail: Player.np.thumbnail})
|
||||
castSession.sendMessage("urn:x-cast:zoff.me", {type: "nextVideo", videoId: full_playlist[0].id, title: full_playlist[0].title, source: full_playlist[0].source, thumbnail: full_playlist[0].thumbnail})
|
||||
|
||||
if(Helper.mobilecheck() && !chromecast_specs_sent) {
|
||||
socket.emit("get_id");
|
||||
}
|
||||
hide_native(1);
|
||||
if(Helper.mobilecheck()) {
|
||||
Player.playVideo();
|
||||
}
|
||||
Helper.css("#channel-load", "display", "none");
|
||||
Helper.addClass('.castButton', 'castButton-white-active');
|
||||
Helper.css("#playpause", "visibility", "visible");
|
||||
Helper.css("#playpause", "pointer-events", "all");
|
||||
break;
|
||||
if(Helper.mobilecheck() && !chromecast_specs_sent) {
|
||||
socket.emit("get_id");
|
||||
}
|
||||
hide_native(1);
|
||||
if(Helper.mobilecheck()) {
|
||||
Player.playVideo();
|
||||
}
|
||||
Helper.css("#channel-load", "display", "none");
|
||||
Helper.addClass('.castButton', 'castButton-white-active');
|
||||
Helper.css("#playpause", "visibility", "visible");
|
||||
Helper.css("#playpause", "pointer-events", "all");
|
||||
break;
|
||||
case cast.framework.SessionState.SESSION_RESUMED:
|
||||
castSession = cast.framework.CastContext.getInstance().getCurrentSession();
|
||||
castSession.addMessageListener("urn:x-cast:zoff.me", chromecastListener);
|
||||
chrome.cast.media.GenericMediaMetadata({metadataType: 0, title:song_title, image: 'https://img.youtube.com/vi/'+video_id+'/mqdefault.jpg', images: ['https://img.youtube.com/vi/'+video_id+'/mqdefault.jpg']});
|
||||
//chrome.cast.Image('https://img.youtube.com/vi/'+video_id+'/mqdefault.jpg');
|
||||
chromecastAvailable = true;
|
||||
paused = false;
|
||||
mobile_beginning = false;
|
||||
var _seekTo;
|
||||
try{
|
||||
_seekTo = Player.player.getCurrentTime();
|
||||
} catch(event){
|
||||
_seekTo = seekTo;
|
||||
}
|
||||
castSession.sendMessage("urn:x-cast:zoff.me", {type: "loadVideo", start: Player.np.start, end: Player.np.end, videoId: video_id, seekTo: _seekTo, channel: chan.toLowerCase(), source: videoSource})
|
||||
castSession.sendMessage("urn:x-cast:zoff.me", {type: "nextVideo", videoId: full_playlist[0].id, title: full_playlist[0].title, source: full_playlist[0].source})
|
||||
hide_native(1);
|
||||
Helper.css("#channel-load", "display", "none");
|
||||
Helper.addClass('.castButton', 'castButton-white-active');
|
||||
Helper.css("#playpause", "visibility", "visible");
|
||||
Helper.css("#playpause", "pointer-events", "all");
|
||||
break;
|
||||
castSession = cast.framework.CastContext.getInstance().getCurrentSession();
|
||||
castSession.addMessageListener("urn:x-cast:zoff.me", chromecastListener);
|
||||
chrome.cast.media.GenericMediaMetadata({metadataType: 0, title:song_title, image: 'https://img.youtube.com/vi/'+video_id+'/mqdefault.jpg', images: ['https://img.youtube.com/vi/'+video_id+'/mqdefault.jpg']});
|
||||
//chrome.cast.Image('https://img.youtube.com/vi/'+video_id+'/mqdefault.jpg');
|
||||
chromecastAvailable = true;
|
||||
paused = false;
|
||||
mobile_beginning = false;
|
||||
var _seekTo;
|
||||
try{
|
||||
_seekTo = Player.player.getCurrentTime();
|
||||
} catch(event){
|
||||
_seekTo = seekTo;
|
||||
}
|
||||
castSession.sendMessage("urn:x-cast:zoff.me", {type: "loadVideo", start: Player.np.start, end: Player.np.end, videoId: video_id, seekTo: _seekTo, channel: chan.toLowerCase(), source: videoSource, thumbnail: Player.np.thumbnail})
|
||||
castSession.sendMessage("urn:x-cast:zoff.me", {type: "nextVideo", videoId: full_playlist[0].id, title: full_playlist[0].title, source: full_playlist[0].source, thumbnail: full_playlist[0].thumbnail})
|
||||
hide_native(1);
|
||||
Helper.css("#channel-load", "display", "none");
|
||||
Helper.addClass('.castButton', 'castButton-white-active');
|
||||
Helper.css("#playpause", "visibility", "visible");
|
||||
Helper.css("#playpause", "pointer-events", "all");
|
||||
break;
|
||||
case cast.framework.SessionState.SESSION_ENDED:
|
||||
chromecastAvailable = false;
|
||||
hide_native(0);
|
||||
break;
|
||||
chromecastAvailable = false;
|
||||
hide_native(0);
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
@@ -11,26 +11,51 @@ var Player = {
|
||||
setVolume: function(val) {}
|
||||
},
|
||||
|
||||
youtube_listener: function(obj) {
|
||||
now_playing_listener: function(obj) {
|
||||
if(obj.np != undefined) {
|
||||
video_id = obj.np[0].id;
|
||||
Player.np = {
|
||||
id: video_id,
|
||||
start: obj.np[0].start,
|
||||
end: obj.np[0].end,
|
||||
duration: obj.np[0].duration,
|
||||
};
|
||||
if(offline && (video_id == "" || video_id == undefined)){
|
||||
video_id = obj.np[0].id;
|
||||
Player.np = obj.np[0];
|
||||
Player.np.start = obj.np[0].start;
|
||||
Player.np.end = obj.np[0].end;
|
||||
Player.np.duration = obj.np[0].duration;
|
||||
|
||||
if(!obj.np[0].hasOwnProperty("start")) {
|
||||
Player.np.start = 0;
|
||||
}
|
||||
if(!obj.np[0].hasOwnProperty("start")) {
|
||||
Player.np.start = 0;
|
||||
}
|
||||
|
||||
if(!obj.np[0].hasOwnProperty("end")) {
|
||||
Player.np.end = Player.np.duration;
|
||||
if(!obj.np[0].hasOwnProperty("end")) {
|
||||
Player.np.end = Player.np.duration;
|
||||
}
|
||||
if(obj.conf != undefined) {
|
||||
conf = obj.conf[0];
|
||||
}
|
||||
time = obj.time;
|
||||
seekTo = 0 + Player.np.start;
|
||||
startTime = time - conf.startTime;
|
||||
song_title = obj.np[0].title;
|
||||
duration = obj.np[0].duration;
|
||||
videoSource = obj.np[0].hasOwnProperty("source") ? obj.np[0].source : "youtube";
|
||||
Player.getTitle(song_title, viewers);
|
||||
Player.loadVideoById(Player.np.id, duration, Player.np.start, Player.np.end);
|
||||
} else {
|
||||
video_id = obj.np[0].id;
|
||||
Player.np = obj.np[0];
|
||||
Player.np.start = obj.np[0].start;
|
||||
Player.np.end = obj.np[0].end;
|
||||
Player.np.duration = obj.np[0].duration;
|
||||
|
||||
if(!obj.np[0].hasOwnProperty("start")) {
|
||||
Player.np.start = 0;
|
||||
}
|
||||
|
||||
if(!obj.np[0].hasOwnProperty("end")) {
|
||||
Player.np.end = Player.np.duration;
|
||||
}
|
||||
song_title = obj.np[0].title;
|
||||
duration = obj.np[0].duration;
|
||||
videoSource = obj.np[0].hasOwnProperty("source") ? obj.np[0].source : "youtube";
|
||||
}
|
||||
song_title = obj.np[0].title;
|
||||
duration = obj.np[0].duration;
|
||||
videoSource = obj.np[0].hasOwnProperty("source") ? obj.np[0].source : "youtube";
|
||||
} else {
|
||||
Player.np = {
|
||||
id: "",
|
||||
@@ -54,19 +79,20 @@ var Player = {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
if(obj.conf != undefined) {
|
||||
conf = obj.conf[0];
|
||||
time = obj.time;
|
||||
startTime = time - conf.startTime;
|
||||
} else {
|
||||
time = 0;
|
||||
startTime = 0;
|
||||
}
|
||||
time = obj.time;
|
||||
seekTo = (time - conf.startTime) + Player.np.start;
|
||||
startTime = time - conf.startTime;
|
||||
|
||||
|
||||
// Play video/autoplay video
|
||||
if(obj.np != undefined) {
|
||||
if(obj.np != undefined && !offline) {
|
||||
seekTo = (time - conf.startTime) + Player.np.start;
|
||||
Player.getTitle(song_title, viewers);
|
||||
if(((embed && autoplay) || !embed ) && !offline && !was_stopped) {
|
||||
if(((embed && autoplay) || !embed) && !was_stopped) {
|
||||
Helper.log(["loadVideoById \nwas_stopped="+was_stopped+"\noffline="+offline])
|
||||
Player.loadVideoById(Player.np.id, duration, Player.np.start, Player.np.end);
|
||||
} else {
|
||||
@@ -257,45 +283,50 @@ var Player = {
|
||||
if(seekTo == undefined) seekTo = 0;
|
||||
soundcloud_loading = false;
|
||||
var _autoAdd = "false";
|
||||
if(_autoplay) {
|
||||
_autoAdd = "true";
|
||||
Helper.removeClass("#player_loader_container", "hide");
|
||||
}
|
||||
try {
|
||||
if(SC == null || !SC.stream) return;
|
||||
} catch(e) {
|
||||
return;
|
||||
}
|
||||
SC.stream("/tracks/" + id).then(function(player){
|
||||
Player.soundcloud_player = player;
|
||||
Player.soundcloud_player.bind("finish", Player.soundcloudFinish);
|
||||
Player.soundcloud_player.bind("pause", Player.soundcloudPause);
|
||||
Player.soundcloud_player.bind("play", Player.soundcloudPlay);
|
||||
window.player = player;
|
||||
SC.get('/tracks', {
|
||||
ids: id
|
||||
}).then(function(tracks) {
|
||||
var sound = tracks[0];
|
||||
Helper.removeClass(".soundcloud_info_container", "hide");
|
||||
document.querySelector("#soundcloud_listen_link").href = sound.permalink_url;
|
||||
document.querySelector(".soundcloud_info_container .green").href = sound.user.permalink_url;
|
||||
//document.querySelector(".soundcloud_info_container .red").href = sound.user.permalink_url;
|
||||
});
|
||||
if(previousSoundcloud != id) {
|
||||
previousSoundcloud = id;
|
||||
if(_autoplay) {
|
||||
player.play().then(function(){
|
||||
Player.soundcloud_player.setVolume(embed ? 1 : Crypt.get_volume() / 100);
|
||||
Player.soundcloud_player.seek((seekTo) * 1000);
|
||||
}).catch(function(e){
|
||||
});
|
||||
_autoAdd = "true";
|
||||
Helper.removeClass("#player_loader_container", "hide");
|
||||
}
|
||||
});
|
||||
SC.stream("/tracks/" + id).then(function(player){
|
||||
Player.soundcloud_player = player;
|
||||
Player.soundcloud_player.bind("finish", Player.soundcloudFinish);
|
||||
Player.soundcloud_player.bind("pause", Player.soundcloudPause);
|
||||
Player.soundcloud_player.bind("play", Player.soundcloudPlay);
|
||||
window.player = player;
|
||||
SC.get('/tracks', {
|
||||
ids: id
|
||||
}).then(function(tracks) {
|
||||
var sound = tracks[0];
|
||||
Helper.removeClass(".soundcloud_info_container", "hide");
|
||||
document.querySelector("#soundcloud_listen_link").href = sound.permalink_url;
|
||||
document.querySelector(".soundcloud_info_container .green").href = sound.user.permalink_url;
|
||||
//document.querySelector(".soundcloud_info_container .red").href = sound.user.permalink_url;
|
||||
});
|
||||
if(_autoplay) {
|
||||
player.play().then(function(){
|
||||
Player.soundcloud_player.setVolume(embed ? 1 : Crypt.get_volume() / 100);
|
||||
Player.soundcloud_player.seek((seekTo) * 1000);
|
||||
}).catch(function(e){
|
||||
});
|
||||
}
|
||||
});
|
||||
} else {
|
||||
player.seek(seekTo * 1000);
|
||||
}
|
||||
soundcloud_loading = true;
|
||||
if(start == undefined) start = 0;
|
||||
if(seekTo == undefined) seekTo = 0;
|
||||
|
||||
if(_autoplay) was_stopped = false;
|
||||
try {
|
||||
Helper.css(document.getElementById("player_overlay"), "background", "url('" + full_playlist[full_playlist.length - 1].thumbnail + "')");
|
||||
Helper.css(document.getElementById("player_overlay"), "background", "url('" + Player.np.thumbnail + "')");
|
||||
} catch(e) {
|
||||
console.log("Woops this seems to be the first song in the channel. This will be fixed.. soon.. we think..");
|
||||
}
|
||||
@@ -313,9 +344,11 @@ var Player = {
|
||||
else s = Player.np.start;
|
||||
if(end) e = end;
|
||||
else e = Player.np.end;
|
||||
Suggestions.fetchYoutubeSuggests(id);
|
||||
if(!embed) {
|
||||
Suggestions.fetchYoutubeSuggests(id);
|
||||
}
|
||||
if(chromecastAvailable){
|
||||
castSession.sendMessage("urn:x-cast:zoff.me", {start: s, end: e, type: "loadVideo", videoId: id, channel: chan.toLowerCase(), source: videoSource});
|
||||
castSession.sendMessage("urn:x-cast:zoff.me", {start: s, end: e, type: "loadVideo", videoId: id, channel: chan.toLowerCase(), source: videoSource, thumbnail: Player.np.thumbnail});
|
||||
chrome.cast.media.GenericMediaMetadata({metadataType: 0, title:song_title, image: 'https://img.youtube.com/vi/'+id+'/mqdefault.jpg', images: ['https://img.youtube.com/vi/'+id+'/mqdefault.jpg']});
|
||||
chrome.cast.Image('https://img.youtube.com/vi/'+id+'/mqdefault.jpg');
|
||||
} else {
|
||||
@@ -363,7 +396,9 @@ var Player = {
|
||||
else s = Player.np.start;
|
||||
if(end) e = end;
|
||||
else e = Player.np.end;
|
||||
Suggestions.fetchYoutubeSuggests(id);
|
||||
if(!embed) {
|
||||
Suggestions.fetchYoutubeSuggests(id);
|
||||
}
|
||||
if(videoSource == "soundcloud") {
|
||||
try {
|
||||
Player.player.stopVideo();
|
||||
@@ -414,6 +449,7 @@ var Player = {
|
||||
time = (new Date()).getTime();
|
||||
song_title = next_song.title;
|
||||
duration = next_song.duration;
|
||||
videoSource = next_song.hasOwnProperty("source") ? next_song.source : "youtube";
|
||||
var start;
|
||||
var end;
|
||||
if(next_song.hasOwnProperty("start")) start = next_song.start;
|
||||
@@ -421,12 +457,10 @@ var Player = {
|
||||
if(next_song.hasOwnProperty("end")) end = next_song.end;
|
||||
else end = duration;
|
||||
|
||||
Player.np = {
|
||||
id: video_id,
|
||||
start: start,
|
||||
end: end,
|
||||
duration: duration,
|
||||
};
|
||||
Player.np = next_song;
|
||||
Player.np.start = start;
|
||||
Player.np.end = end;
|
||||
Player.np.duration = duration;
|
||||
|
||||
Player.getTitle(song_title, viewers);
|
||||
//Player.setBGimage(video_id);
|
||||
@@ -450,6 +484,7 @@ var Player = {
|
||||
time = (new Date()).getTime();
|
||||
song_title = next_song.title;
|
||||
duration = next_song.duration;
|
||||
videoSource = next_song.hasOwnProperty("source") ? next_song.source : "youtube";
|
||||
var start;
|
||||
var end;
|
||||
if(next_song.hasOwnProperty("start")) start = next_song.start;
|
||||
@@ -457,12 +492,10 @@ var Player = {
|
||||
if(next_song.hasOwnProperty("end")) end = next_song.end;
|
||||
else end = duration;
|
||||
|
||||
Player.np = {
|
||||
id: video_id,
|
||||
start: start,
|
||||
end: end,
|
||||
duration: duration,
|
||||
};
|
||||
Player.np = next_song;
|
||||
Player.np.start = start;
|
||||
Player.np.end = end;
|
||||
Player.np.duration = duration;
|
||||
|
||||
Player.getTitle(song_title, viewers);
|
||||
//Player.setBGimage(video_id);
|
||||
@@ -480,7 +513,7 @@ var Player = {
|
||||
|
||||
sendNext: function(obj){
|
||||
if(chromecastAvailable){
|
||||
castSession.sendMessage("urn:x-cast:zoff.me", {type: "nextVideo", title: obj.title, videoId: obj.videoId, source: obj.source});
|
||||
castSession.sendMessage("urn:x-cast:zoff.me", {type: "nextVideo", title: obj.title, videoId: obj.videoId, source: obj.source, thumbnail: obj.thumbnail});
|
||||
}
|
||||
|
||||
if(embed) {
|
||||
@@ -734,7 +767,7 @@ var Player = {
|
||||
|
||||
setup_all_listeners: function() {
|
||||
get_list_listener();
|
||||
setup_youtube_listener();
|
||||
setup_now_playing_listener();
|
||||
setup_admin_listener();
|
||||
setup_chat_listener();
|
||||
setup_list_listener();
|
||||
|
||||
Reference in New Issue
Block a user