KevinMidboe/zoff
1
0
Fork 0
mirror of https://github.com/KevinMidboe/zoff.git synced 2025-10-29 18:00:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fixes for chromecasting and embedded player

Browse Source
This commit is contained in:
Kasper Rynning-Tønnesen
2018-05-05 13:05:49 +02:00
parent d4e3a8afde
commit 8a64fc816a
8 changed files with 391 additions and 332 deletions
Download Patch File Download Diff File Expand all files Collapse all files

399
server/public/assets/css/embed.css
View File

@@ -1,9 +1,9 @@
.card-image{ .card-image{
height: 100px; height: 100px;
width: 100px; width: 100px;
background-position: center; background-position: center;
background-size: 180%; background-size: 180%;
height: 100% !important; height: 100% !important;
} }
.side_away { .side_away {
@@ -13,30 +13,37 @@
transition: all .3s !important; transition: all .3s !important;
} }
#player_loader_container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
}
#player_overlay { #player_overlay {
position: absolute; position: absolute;
height: calc(100% - 32px); height: calc(100% - 32px);
top: 0px; top: 0px;
left: 0px; left: 0px;
width: 50vw; width: 50vw;
} }
.soundcloud_info_container { .soundcloud_info_container {
position: absolute; position: absolute;
bottom: 20px; bottom: 20px;
right: 0px; right: 0px;
padding-left: 20px; padding-left: 20px;
display: flex; display: flex;
align-items: center; align-items: center;
background: rgba(0,0,0,.7); background: rgba(0,0,0,.7);
} }
.soundcloud_info_container a { .soundcloud_info_container a {
margin: 0 10px; margin: 0 10px;
} }
.card { .card {
cursor:pointer; cursor:pointer;
background-color: rgba(255, 255, 255, 0.04) !important; background-color: rgba(255, 255, 255, 0.04) !important;
} }
@@ -50,12 +57,12 @@
} }
.noselect { .noselect {
-webkit-touch-callout: none; -webkit-touch-callout: none;
-webkit-user-select: none; -webkit-user-select: none;
-khtml-user-select: none; -khtml-user-select: none;
-moz-user-select: none; -moz-user-select: none;
-ms-user-select: none; -ms-user-select: none;
user-select: none; user-select: none;
} }
.video_only { .video_only {
@@ -93,7 +100,7 @@
} }
.list-song { .list-song {
background-color: rgba(255, 255, 255, 0.04) !important; background-color: rgba(255, 255, 255, 0.04) !important;
} }
#list-song-html { #list-song-html {
@@ -101,7 +108,7 @@
} }
#song-title{ #song-title{
display:none; display:none;
} }
#zoffchannel{ #zoffchannel{
@@ -109,36 +116,36 @@
} }
.list-image, .list-suggested-image{ .list-image, .list-suggested-image{
width: 34%; width: 34%;
height: 66px; height: 66px;
float: left; float: left;
} }
.list-image:after { .list-image:after {
-webkit-transition: all .3s; -webkit-transition: all .3s;
transition: all .3s; transition: all .3s;
font-family: "Material Icons"; font-family: "Material Icons";
content: "thumb_up"; content: "thumb_up";
speak: none; speak: none;
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
font-variant: normal; font-variant: normal;
text-transform: none; text-transform: none;
text-rendering: auto; text-rendering: auto;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
color: white; color: white;
font-size: -webkit-xxx-large; font-size: -webkit-xxx-large;
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
top: 0; top: 0;
left: 0; left: 0;
background: rgba(0,0,0,0.8); background: rgba(0,0,0,0.8);
opacity: 0; opacity: 0;
/* transition: all .1s ease; */ /* transition: all .1s ease; */
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.list-suggested-image:after { .list-suggested-image:after {
@@ -162,36 +169,36 @@
} }
.vote-container:hover .list-image:after, .add-suggested:hover .list-suggested-image:after { .vote-container:hover .list-image:after, .add-suggested:hover .list-suggested-image:after {
opacity:1; opacity:1;
} }
.vote-span{ .vote-span{
opacity: 0.7; opacity: 0.7;
padding: 0 0 0 10px; padding: 0 0 0 10px;
color:white !important; color:white !important;
} }
.list-song{ .list-song{
background-color: rgba(255, 255, 255, 0.04); background-color: rgba(255, 255, 255, 0.04);
color:white; color:white;
font:12px Arial,sans-serif; font:12px Arial,sans-serif;
-webkit-transition:height .3s; -webkit-transition:height .3s;
-moz-transition:height .3s; -moz-transition:height .3s;
-o-transition:height .3s; -o-transition:height .3s;
transition:height .3s; transition:height .3s;
height:66px; height:66px;
width: 100%; width: 100%;
} }
.list-song .card-content{padding:0;} .list-song .card-content{padding:0;}
.list-title{ .list-title{
font-size:13px !important; font-size:13px !important;
display:block; display:block;
color:white;font-size:1em; color:white;font-size:1em;
text-align:left; text-align:left;
padding: 0 10px 0 10px; padding: 0 10px 0 10px;
line-height: 2.6rem; line-height: 2.6rem;
} }
.card-image{cursor:pointer} .card-image{cursor:pointer}
.card{ .card{
@@ -202,8 +209,8 @@
} }
#playlist{ #playlist{
/*background-color:grey;*/ /*background-color:grey;*/
height:100vh; height:100vh;
width:50vw; width:50vw;
overflow:hidden; overflow:hidden;
} }
@@ -211,14 +218,14 @@
#zoffbutton{ #zoffbutton{
cursor:pointer; cursor:pointer;
position: absolute; position: absolute;
bottom: 35px; bottom: 35px;
left: 10px; left: 10px;
background-image: url('/assets/images/z.svg'); background-image: url('/assets/images/z.svg');
width: 50px; width: 50px;
height: 50px; height: 50px;
background-position: center; background-position: center;
background-size: 135%; background-size: 135%;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
.progress{background-color:rgba(0,0,0,0) !important;} .progress{background-color:rgba(0,0,0,0) !important;}
@@ -232,11 +239,11 @@
background: inherit; background: inherit;
position: relative; position: relative;
opacity:0; opacity:0;
height:32px; height:32px;
width:50vw; width:50vw;
color:white; color:white;
margin-top:-5px; margin-top:-5px;
} }
#playpause, #duration, #volume-button #playpause, #duration, #volume-button
@@ -253,7 +260,7 @@
#playpause:hover, #volume-button:hover, #fullscreen:hover #playpause:hover, #volume-button:hover, #fullscreen:hover
{ {
color:rgba(255,255,255,0.5); color:rgba(255,255,255,0.5);
} }
#fullscreen #fullscreen
@@ -286,166 +293,166 @@
.ui-slider-vertical { .ui-slider-vertical {
width: .8em; width: .8em;
height: 100px; height: 100px;
} }
.ui-slider { .ui-slider {
position: relative; position: relative;
text-align: left; text-align: left;
} }
.ui-slider-vertical .ui-slider-range-min { .ui-slider-vertical .ui-slider-range-min {
bottom: 0; bottom: 0;
} }
.ui-slider-vertical .ui-slider-range { .ui-slider-vertical .ui-slider-range {
left: 0; left: 0;
width: 100%; width: 100%;
border-radius: 0px !important; border-radius: 0px !important;
} }
.ui-slider .ui-slider-range { .ui-slider .ui-slider-range {
position: absolute; position: absolute;
z-index: 1; z-index: 1;
font-size: .7em; font-size: .7em;
display: block; display: block;
border: 0; border: 0;
background-position: 0 0; background-position: 0 0;
} }
.ui-slider-vertical .ui-slider-handle { .ui-slider-vertical .ui-slider-handle {
left: -.3em; left: -.3em;
margin-left: 0; margin-left: 0;
margin-bottom: -.6em; margin-bottom: -.6em;
} }
.ui-slider .ui-slider-handle { .ui-slider .ui-slider-handle {
position: absolute; position: absolute;
z-index: 2; z-index: 2;
width: 1.2em; width: 1.2em;
height: 1.2em; height: 1.2em;
cursor: default; cursor: default;
-ms-touch-action: none; -ms-touch-action: none;
touch-action: none; touch-action: none;
} }
.ui-slider-horizontal .ui-slider-range-min { .ui-slider-horizontal .ui-slider-range-min {
left: 0; left: 0;
} }
.ui-slider-horizontal .ui-slider-range { .ui-slider-horizontal .ui-slider-range {
top: 0; top: 0;
height: 100%; height: 100%;
} }
.ui-slider .ui-slider-range { .ui-slider .ui-slider-range {
position: absolute; position: absolute;
z-index: 1; z-index: 1;
font-size: .7em; font-size: .7em;
display: block; display: block;
border: 0; border: 0;
background-position: 0 0; background-position: 0 0;
} }
.ui-slider-horizontal .ui-slider-handle { .ui-slider-horizontal .ui-slider-handle {
top: -.3em; top: -.3em;
margin-left: -.6em; margin-left: -.6em;
} }
#volume { #volume {
border-radius: 10px; border-radius: 10px;
cursor:pointer; cursor:pointer;
float:left; float:left;
position: relative; position: relative;
left: 10px; left: 10px;
margin: 13px auto; margin: 13px auto;
height:5px; height:5px;
width: 75px; width: 75px;
/*background-color:rgba(0, 0, 0, 0.5);*/ /*background-color:rgba(0, 0, 0, 0.5);*/
background:rgba(0, 0, 0, 0.5) 50% 50% repeat-x; background:rgba(0, 0, 0, 0.5) 50% 50% repeat-x;
border: none; border: none;
outline: none; outline: none;
/*border-radius: 2px;*/ /*border-radius: 2px;*/
} }
#volume.vertical { #volume.vertical {
border-radius: 0px; border-radius: 0px;
} }
#volume .volume-slid { #volume .volume-slid {
border-radius: 10px; border-radius: 10px;
background: white; background: white;
height: 5px; height: 5px;
width: 0%; width: 0%;
} }
#volume .volume-slid.vertical { #volume .volume-slid.vertical {
width: 100%; width: 100%;
height: 0%; height: 0%;
border-radius: 0px; border-radius: 0px;
bottom: 0px; bottom: 0px;
position: absolute; position: absolute;
} }
#volume .volume-handle { #volume .volume-handle {
height: 15px; height: 15px;
width: 15px; width: 15px;
background: white; background: white;
border-radius: 15px; border-radius: 15px;
border: 1px solid lightgrey; border: 1px solid lightgrey;
margin-top: -9.75px; margin-top: -9.75px;
position: absolute; position: absolute;
left: 0%; left: 0%;
margin-left: -5.75px; margin-left: -5.75px;
transition: background 0.2s ease, box-shadow 0.2s ease; transition: background 0.2s ease, box-shadow 0.2s ease;
} }
#volume .volume-handle.vertical { #volume .volume-handle.vertical {
bottom: 0%; bottom: 0%;
display: none; display: none;
} }
#volume .volume-handle.ui-state-active { #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); box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.01), 0 0 0 7px rgba(255,255,255,0.3);
position: absolute; position: absolute;
width: 14px; width: 14px;
height: 14px; height: 14px;
border-radius: 21px; border-radius: 21px;
background: #dadada; background: #dadada;
} }
#toast-container{ #toast-container{
left:2%; left:2%;
cursor:pointer; cursor:pointer;
width:70vw; width:70vw;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: baseline; align-items: baseline;
/*pointer-events:none;*/ /*pointer-events:none;*/
} }
.toast { .toast {
word-break: normal; word-break: normal;
cursor: pointer; cursor: pointer;
} }
.play .play
{ {
background-size: auto; background-size: auto;
width: 55px; width: 55px;
height: 27px; height: 27px;
} }
.pause .pause
{ {
background-size: auto; background-size: auto;
width: 55px; width: 55px;
height: 27px; height: 27px;
} }
.hide .hide
{ {
display:none !important; display:none !important;
} }
#bar #bar
{ {
height:100%; height:100%;
background-color:rgba(0,0,0,0.5); background-color:rgba(0,0,0,0.5);
} }
html { html {
@@ -482,24 +489,24 @@ html {
} }
.prev_page_hide, .prev_page, .first_page, .first_page_hide{ .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{ .next_page_hide, .next_page, .last_page, .last_page_hide{
padding:0 0px; padding:0 0px;
display: flex; display: flex;
} }
.first_page, .first_page_hide { .first_page, .first_page_hide {
padding: 0 0 0 10px; padding: 0 0 0 10px;
} }
.last_page, .last_page_hide { .last_page, .last_page_hide {
padding: 0 10px 0 0; padding: 0 10px 0 0;
} }
body { body {
background: #2d2d2d; background: #2d2d2d;
} }
.vote-container { .vote-container {
@@ -509,17 +516,17 @@ body {
.card-duration { .card-duration {
border-top-right-radius: 4px; border-top-right-radius: 4px;
position: absolute; position: absolute;
bottom: 0px; bottom: 0px;
left: 0px; left: 0px;
background: rgba(0,0,0,.7); background: rgba(0,0,0,.7);
color: white; color: white;
padding: 0 5px; padding: 0 5px;
} }
/* /*
.last_page, .last_page_hide, .first_page, .first_page_hide{ .last_page, .last_page_hide, .first_page, .first_page_hide{
display: none !important; display: none !important;
} }
*/ */
#wrapper{ #wrapper{

2
server/public/assets/css/style.css
View File

@@ -234,7 +234,7 @@ margin: auto;
#playing_on #chromecast_text{ #playing_on #chromecast_text{
font-size: 20px; font-size: 20px;
padding-left: 8px; padding-left: 55px;
} }
.prev_page, .next_page, .last_page, .first_page{ .prev_page, .next_page, .last_page, .first_page{

6
server/public/assets/js/channel.js
View File

@@ -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(!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()){ if(document.querySelectorAll("#alreadychannel").length === 0 || Helper.mobilecheck()){
setup_youtube_listener(); setup_now_playing_listener();
get_list_listener(); get_list_listener();
setup_suggested_listener(); setup_suggested_listener();
if(!client) { if(!client) {
@@ -349,8 +349,8 @@ var Channel = {
total = total * e.clientX; total = total * e.clientX;
if(!chromecastAvailable){ 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); dMinutes = Math.floor(duration / 60);
dSeconds = duration - dMinutes * 60; dSeconds = duration - dMinutes * 60;
currDurr = total; currDurr = total;

12
server/public/assets/js/embed.js
View File

@@ -8,6 +8,7 @@ var startTime = 0;
var socket_connected = false; var socket_connected = false;
var dynamicListeners = {}; var dynamicListeners = {};
var player_ready = false; var player_ready = false;
var previousSoundcloud;
var empty_clear = false; var empty_clear = false;
var fix_too_far = false; var fix_too_far = false;
var beginning = false; var beginning = false;
@@ -52,6 +53,11 @@ var Crypt = {
} }
}; };
SC.initialize({
client_id: 'ed53fc01f248f15becddf8eb52cc91ef'
}, function() {
});
function receiveMessage(event) { function receiveMessage(event) {
if(event.data == "parent") { if(event.data == "parent") {
window.parentWindow = event.source; window.parentWindow = event.source;
@@ -116,7 +122,7 @@ window.addEventListener("DOMContentLoaded", function() {
}); });
setup_host_initialization(); setup_host_initialization();
setup_youtube_listener(); setup_now_playing_listener();
setup_list_listener(); setup_list_listener();
window.onYouTubeIframeAPIReady = Player.onYouTubeIframeAPIReady; window.onYouTubeIframeAPIReady = Player.onYouTubeIframeAPIReady;
@@ -144,8 +150,8 @@ function setup_host_initialization() {
socket.on("id", Hostcontroller.host_listener); socket.on("id", Hostcontroller.host_listener);
} }
function setup_youtube_listener() { function setup_now_playing_listener() {
socket.on("np", Player.youtube_listener); socket.on("np", Player.now_playing_listener);
} }
function setup_list_listener() { function setup_list_listener() {

16
server/public/assets/js/functions.js
View File

@@ -54,7 +54,11 @@ function hide_native(way) {
Helper.toggleClass("#duration", "hide"); Helper.toggleClass("#duration", "hide");
Helper.toggleClass("#fullscreen", "hide"); Helper.toggleClass("#fullscreen", "hide");
try{ try{
Player.player.stopVideo(); if(videoSource == "youtube") {
Player.player.stopVideo();
} else if(videoSource == "soundcloud") {
Player.soundcloud_player.pause();
}
} catch(e){} } catch(e){}
Player.stopInterval = true; Player.stopInterval = true;
if(Helper.mobilecheck()){ if(Helper.mobilecheck()){
@@ -102,7 +106,11 @@ function hide_native(way) {
Helper.toggleClass("#duration", "hide"); Helper.toggleClass("#duration", "hide");
Helper.toggleClass("#fullscreen", "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; Player.stopInterval = false;
duration = Player.player.getDuration(); duration = Player.player.getDuration();
Player.durationSetter(); Player.durationSetter();
@@ -427,8 +435,8 @@ function setup_no_connection_listener(){
}); });
} }
function setup_youtube_listener(){ function setup_now_playing_listener(){
socket.on("np", Player.youtube_listener); socket.on("np", Player.now_playing_listener);
} }
function get_list_listener(){ function get_list_listener(){

16
server/public/assets/js/list.js
View File

@@ -22,19 +22,19 @@ var List = {
prev_chan_list = chan; prev_chan_list = chan;
List.populate_list(msg.playlist); List.populate_list(msg.playlist);
if(full_playlist.length > 0) { 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){ } else if(offline && prev_chan_list == chan && full_playlist != undefined && !msg.shuffled){
List.populate_list(full_playlist, true); List.populate_list(full_playlist, true);
if(full_playlist.length > 0) { 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; break;
case "added": case "added":
List.added_song(msg.value); List.added_song(msg.value);
if(full_playlist.length > 0) { 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 = [];
found_array_index = 0; found_array_index = 0;
@@ -48,7 +48,7 @@ var List = {
if(!offline){ if(!offline){
List.voted_song(msg.value, msg.time); List.voted_song(msg.value, msg.time);
if(full_playlist.length > 0) { 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 = [];
@@ -58,7 +58,7 @@ var List = {
if((offline && msg.offline_change) || !offline) { if((offline && msg.offline_change) || !offline) {
if(window.location.pathname != "/") List.song_change(msg.time, msg.remove); if(window.location.pathname != "/") List.song_change(msg.time, msg.remove);
if(full_playlist.length > 0) { 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 = [];
found_array_index = 0; found_array_index = 0;
@@ -72,7 +72,7 @@ var List = {
if(window.location.pathname != "/") List.song_change_prev(msg.time); if(window.location.pathname != "/") List.song_change_prev(msg.time);
if(full_playlist.length > 0) { 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 = [];
found_array_index = 0; found_array_index = 0;
@@ -443,7 +443,7 @@ var List = {
} }
} }
full_playlist.splice(List.getIndexOfSong(deleted), 1); 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) { } catch(err) {
@@ -461,7 +461,7 @@ var List = {
Helper.css(nextToChange, "display", "inline-flex"); Helper.css(nextToChange, "display", "inline-flex");
Helper.css(nextToChange, "height", List.element_height + "px"); 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){ if(full_playlist.length < 2){

107
server/public/assets/js/listeners.js
View File

@@ -40,6 +40,7 @@ if(window.location.hostname == "localhost" || window.location.hostname == "clien
var zoff_api_token = "AhmC4Yg2BhaWPZBXeoWK96DAiAVfbou8TUG2IXtD3ZQ="; var zoff_api_token = "AhmC4Yg2BhaWPZBXeoWK96DAiAVfbou8TUG2IXtD3ZQ=";
} }
var retry_frontpage; var retry_frontpage;
var previousSoundcloud;
var chromecast_specs_sent = false; var chromecast_specs_sent = false;
var dragging = false; var dragging = false;
var user_auth_started = false; var user_auth_started = false;
@@ -274,60 +275,64 @@ initializeCastApi = function() {
]); ]);
switch (event.sessionState) { switch (event.sessionState) {
case cast.framework.SessionState.SESSION_STARTED: case cast.framework.SessionState.SESSION_STARTED:
castSession = cast.framework.CastContext.getInstance().getCurrentSession(); castSession = cast.framework.CastContext.getInstance().getCurrentSession();
castSession.addMessageListener("urn:x-cast:zoff.me", chromecastListener) 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.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'); //chrome.cast.Image('https://img.youtube.com/vi/'+video_id+'/mqdefault.jpg');
chromecastAvailable = true; chromecastAvailable = true;
paused = false; paused = false;
mobile_beginning = false; mobile_beginning = false;
var _seekTo; var _seekTo;
try{ try{
_seekTo = Player.player.getCurrentTime(); if(videoSource == "youtube") {
} catch(event){ _seekTo = Player.player.getCurrentTime();
_seekTo = seekTo; } else if(videoSource == "soundcloud") {
} _seekTo = Player.soundcloud_player.currentTime() / 1000;
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}) } 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) { if(Helper.mobilecheck() && !chromecast_specs_sent) {
socket.emit("get_id"); socket.emit("get_id");
} }
hide_native(1); hide_native(1);
if(Helper.mobilecheck()) { if(Helper.mobilecheck()) {
Player.playVideo(); Player.playVideo();
} }
Helper.css("#channel-load", "display", "none"); Helper.css("#channel-load", "display", "none");
Helper.addClass('.castButton', 'castButton-white-active'); Helper.addClass('.castButton', 'castButton-white-active');
Helper.css("#playpause", "visibility", "visible"); Helper.css("#playpause", "visibility", "visible");
Helper.css("#playpause", "pointer-events", "all"); Helper.css("#playpause", "pointer-events", "all");
break; break;
case cast.framework.SessionState.SESSION_RESUMED: case cast.framework.SessionState.SESSION_RESUMED:
castSession = cast.framework.CastContext.getInstance().getCurrentSession(); castSession = cast.framework.CastContext.getInstance().getCurrentSession();
castSession.addMessageListener("urn:x-cast:zoff.me", chromecastListener); 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.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'); //chrome.cast.Image('https://img.youtube.com/vi/'+video_id+'/mqdefault.jpg');
chromecastAvailable = true; chromecastAvailable = true;
paused = false; paused = false;
mobile_beginning = false; mobile_beginning = false;
var _seekTo; var _seekTo;
try{ try{
_seekTo = Player.player.getCurrentTime(); _seekTo = Player.player.getCurrentTime();
} catch(event){ } catch(event){
_seekTo = seekTo; _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: "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}) 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); hide_native(1);
Helper.css("#channel-load", "display", "none"); Helper.css("#channel-load", "display", "none");
Helper.addClass('.castButton', 'castButton-white-active'); Helper.addClass('.castButton', 'castButton-white-active');
Helper.css("#playpause", "visibility", "visible"); Helper.css("#playpause", "visibility", "visible");
Helper.css("#playpause", "pointer-events", "all"); Helper.css("#playpause", "pointer-events", "all");
break; break;
case cast.framework.SessionState.SESSION_ENDED: case cast.framework.SessionState.SESSION_ENDED:
chromecastAvailable = false; chromecastAvailable = false;
hide_native(0); hide_native(0);
break; break;
} }
}); });

165
server/public/assets/js/player.js
View File

@@ -11,26 +11,51 @@ var Player = {
setVolume: function(val) {} setVolume: function(val) {}
}, },
youtube_listener: function(obj) { now_playing_listener: function(obj) {
if(obj.np != undefined) { if(obj.np != undefined) {
video_id = obj.np[0].id; if(offline && (video_id == "" || video_id == undefined)){
Player.np = { video_id = obj.np[0].id;
id: video_id, Player.np = obj.np[0];
start: obj.np[0].start, Player.np.start = obj.np[0].start;
end: obj.np[0].end, Player.np.end = obj.np[0].end;
duration: obj.np[0].duration, Player.np.duration = obj.np[0].duration;
};
if(!obj.np[0].hasOwnProperty("start")) { if(!obj.np[0].hasOwnProperty("start")) {
Player.np.start = 0; Player.np.start = 0;
} }
if(!obj.np[0].hasOwnProperty("end")) { if(!obj.np[0].hasOwnProperty("end")) {
Player.np.end = Player.np.duration; 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 { } else {
Player.np = { Player.np = {
id: "", id: "",
@@ -54,19 +79,20 @@ var Player = {
} }
} }
if(obj.conf != undefined) { if(obj.conf != undefined) {
conf = obj.conf[0]; 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 // 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); 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]) Helper.log(["loadVideoById \nwas_stopped="+was_stopped+"\noffline="+offline])
Player.loadVideoById(Player.np.id, duration, Player.np.start, Player.np.end); Player.loadVideoById(Player.np.id, duration, Player.np.start, Player.np.end);
} else { } else {
@@ -257,45 +283,50 @@ var Player = {
if(seekTo == undefined) seekTo = 0; if(seekTo == undefined) seekTo = 0;
soundcloud_loading = false; soundcloud_loading = false;
var _autoAdd = "false"; var _autoAdd = "false";
if(_autoplay) {
_autoAdd = "true";
Helper.removeClass("#player_loader_container", "hide");
}
try { try {
if(SC == null || !SC.stream) return; if(SC == null || !SC.stream) return;
} catch(e) { } catch(e) {
return; return;
} }
SC.stream("/tracks/" + id).then(function(player){ if(previousSoundcloud != id) {
Player.soundcloud_player = player; previousSoundcloud = id;
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) { if(_autoplay) {
player.play().then(function(){ _autoAdd = "true";
Player.soundcloud_player.setVolume(embed ? 1 : Crypt.get_volume() / 100); Helper.removeClass("#player_loader_container", "hide");
Player.soundcloud_player.seek((seekTo) * 1000);
}).catch(function(e){
});
} }
}); 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; soundcloud_loading = true;
if(start == undefined) start = 0; if(start == undefined) start = 0;
if(seekTo == undefined) seekTo = 0; if(seekTo == undefined) seekTo = 0;
if(_autoplay) was_stopped = false; if(_autoplay) was_stopped = false;
try { 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) { } catch(e) {
console.log("Woops this seems to be the first song in the channel. This will be fixed.. soon.. we think.."); 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; else s = Player.np.start;
if(end) e = end; if(end) e = end;
else e = Player.np.end; else e = Player.np.end;
Suggestions.fetchYoutubeSuggests(id); if(!embed) {
Suggestions.fetchYoutubeSuggests(id);
}
if(chromecastAvailable){ 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.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'); chrome.cast.Image('https://img.youtube.com/vi/'+id+'/mqdefault.jpg');
} else { } else {
@@ -363,7 +396,9 @@ var Player = {
else s = Player.np.start; else s = Player.np.start;
if(end) e = end; if(end) e = end;
else e = Player.np.end; else e = Player.np.end;
Suggestions.fetchYoutubeSuggests(id); if(!embed) {
Suggestions.fetchYoutubeSuggests(id);
}
if(videoSource == "soundcloud") { if(videoSource == "soundcloud") {
try { try {
Player.player.stopVideo(); Player.player.stopVideo();
@@ -414,6 +449,7 @@ var Player = {
time = (new Date()).getTime(); time = (new Date()).getTime();
song_title = next_song.title; song_title = next_song.title;
duration = next_song.duration; duration = next_song.duration;
videoSource = next_song.hasOwnProperty("source") ? next_song.source : "youtube";
var start; var start;
var end; var end;
if(next_song.hasOwnProperty("start")) start = next_song.start; if(next_song.hasOwnProperty("start")) start = next_song.start;
@@ -421,12 +457,10 @@ var Player = {
if(next_song.hasOwnProperty("end")) end = next_song.end; if(next_song.hasOwnProperty("end")) end = next_song.end;
else end = duration; else end = duration;
Player.np = { Player.np = next_song;
id: video_id, Player.np.start = start;
start: start, Player.np.end = end;
end: end, Player.np.duration = duration;
duration: duration,
};
Player.getTitle(song_title, viewers); Player.getTitle(song_title, viewers);
//Player.setBGimage(video_id); //Player.setBGimage(video_id);
@@ -450,6 +484,7 @@ var Player = {
time = (new Date()).getTime(); time = (new Date()).getTime();
song_title = next_song.title; song_title = next_song.title;
duration = next_song.duration; duration = next_song.duration;
videoSource = next_song.hasOwnProperty("source") ? next_song.source : "youtube";
var start; var start;
var end; var end;
if(next_song.hasOwnProperty("start")) start = next_song.start; if(next_song.hasOwnProperty("start")) start = next_song.start;
@@ -457,12 +492,10 @@ var Player = {
if(next_song.hasOwnProperty("end")) end = next_song.end; if(next_song.hasOwnProperty("end")) end = next_song.end;
else end = duration; else end = duration;
Player.np = { Player.np = next_song;
id: video_id, Player.np.start = start;
start: start, Player.np.end = end;
end: end, Player.np.duration = duration;
duration: duration,
};
Player.getTitle(song_title, viewers); Player.getTitle(song_title, viewers);
//Player.setBGimage(video_id); //Player.setBGimage(video_id);
@@ -480,7 +513,7 @@ var Player = {
sendNext: function(obj){ sendNext: function(obj){
if(chromecastAvailable){ 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) { if(embed) {
@@ -734,7 +767,7 @@ var Player = {
setup_all_listeners: function() { setup_all_listeners: function() {
get_list_listener(); get_list_listener();
setup_youtube_listener(); setup_now_playing_listener();
setup_admin_listener(); setup_admin_listener();
setup_chat_listener(); setup_chat_listener();
setup_list_listener(); setup_list_listener();