From 8a64fc816a3f2b38bc3b2982ea2a0e405ef7226f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kasper=20Rynning-T=C3=B8nnesen?= Date: Sat, 5 May 2018 13:05:49 +0200 Subject: [PATCH] Fixes for chromecasting and embedded player --- server/public/assets/css/embed.css | 399 ++++++++++++++------------- server/public/assets/css/style.css | 2 +- server/public/assets/js/channel.js | 6 +- server/public/assets/js/embed.js | 12 +- server/public/assets/js/functions.js | 16 +- server/public/assets/js/list.js | 16 +- server/public/assets/js/listeners.js | 107 +++---- server/public/assets/js/player.js | 165 ++++++----- 8 files changed, 391 insertions(+), 332 deletions(-) diff --git a/server/public/assets/css/embed.css b/server/public/assets/css/embed.css index 57a87b29..4457907b 100755 --- a/server/public/assets/css/embed.css +++ b/server/public/assets/css/embed.css @@ -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{ diff --git a/server/public/assets/css/style.css b/server/public/assets/css/style.css index a8704be0..b1338081 100755 --- a/server/public/assets/css/style.css +++ b/server/public/assets/css/style.css @@ -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{ diff --git a/server/public/assets/js/channel.js b/server/public/assets/js/channel.js index c701b465..8f59e7a2 100644 --- a/server/public/assets/js/channel.js +++ b/server/public/assets/js/channel.js @@ -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; diff --git a/server/public/assets/js/embed.js b/server/public/assets/js/embed.js index c060a567..e84e7c25 100755 --- a/server/public/assets/js/embed.js +++ b/server/public/assets/js/embed.js @@ -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() { diff --git a/server/public/assets/js/functions.js b/server/public/assets/js/functions.js index 70c0d535..15626ed7 100644 --- a/server/public/assets/js/functions.js +++ b/server/public/assets/js/functions.js @@ -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(){ diff --git a/server/public/assets/js/list.js b/server/public/assets/js/list.js index ae95e987..84a0ebe7 100755 --- a/server/public/assets/js/list.js +++ b/server/public/assets/js/list.js @@ -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){ diff --git a/server/public/assets/js/listeners.js b/server/public/assets/js/listeners.js index 711db4ec..bcc046d4 100755 --- a/server/public/assets/js/listeners.js +++ b/server/public/assets/js/listeners.js @@ -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; } }); diff --git a/server/public/assets/js/player.js b/server/public/assets/js/player.js index 74254614..dd905108 100755 --- a/server/public/assets/js/player.js +++ b/server/public/assets/js/player.js @@ -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();