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

Updated receiver to work more properly with the current player, and added a picture

Browse Source
This commit is contained in:
Kasper Rynning-Tønnesen
2016-11-18 15:07:58 +01:00
parent 8854f1d687
commit 071744440d
11 changed files with 279 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
index.php
View File

@@ -181,6 +181,18 @@
<div id="player_overlay_text" class="valign center-align">
Waiting for Video
</div>
<div id="player_overlay_controls" class="valign-wrapper">
<div id="playpause-overlay" class="valign center-align">
<i id="play-overlay" class="mdi-av-play-arrow hide"></i>
<i id="pause-overlay" class="mdi-av-pause"></i>
</div>
<div id="volume-button-overlay">
<i id="v-mute-overlay" class="mdi-av-volume-off"></i>
<i id="v-low-overlay" class="mdi-av-volume-mute"></i>
<i id="v-medium-overlay" class="mdi-av-volume-down"></i>
<i id="v-full-overlay" class="mdi-av-volume-up"></i>
</div>
</div>
</div>
<div id="controls" class="noselect">
<div id="playpause">

28
receiver/index.html
View File

@@ -5,17 +5,43 @@
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="receiver.js"></script>
<style>
body{
background: black;
}
#player{
width: 100vw;
height: 100vh;
margin-left: -8px;
margin-top: -8px;
}
.center{
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
right: 0;
margin: auto;
text-align: center;
}
.lower_left{
position: absolute;
bottom: 0px;
width: 15%;
left: 0;
right: 0;
text-align: left;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="player"></div>
<img id="zoff-logo" class="center" src="squareicon_small.png" alt="logo">
<div id="player" class="hide"></div>
</div>
</body>
</html>

67
receiver/receiver.js
View File

@@ -1,3 +1,8 @@
var ytReady = false;
var videoId = null;
var seekTo = null;
var nextVideo = null;
cast.receiver.logger.setLevelValue(cast.receiver.LoggerLevel.DEBUG);
window.castReceiverManager = cast.receiver.CastReceiverManager.getInstance();
@@ -5,10 +10,27 @@ var customMessageBus = castReceiverManager.getCastMessageBus('urn:x-cast:zoff.no
customMessageBus.onMessage = function(event) {
switch(event.data.type){
case "loadVideoBy":
player.loadVideoById(event.data.videoId);
if(ytReady){
player.loadVideoById(event.data.videoId);
} else {
videoId = event.data.videoId;
}
break;
case "stopVideo":
player.stopVideo();
break;
case "pauseVideo":
player.pauseVideo();
break;
case "playVideo":
player.playVideo();
break;
case "seekTo":
player.seekTo(event.data.seekTo);
break;
case "nextVideo":
nextVideo = event.data.videoId;
break;
}
}
/**
@@ -68,33 +90,6 @@ window.addEventListener('load', function() {
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
});
ytMessages={
"getNextVideo": function(event) {
nextVideo=event.data.videoId;
},
"loadVideo": function(event) {
player.loadVideoById(event.data.videoId);
},
"stopCasting": function() {
endcast();
},
"playVideo": function() {
player.playVideo();
},
"pauseVideo": function() {
player.pauseVideo();
},
"stopVideo": function() {
player.stopVideo();
},
"seekTo": function(event) {
player.seekTo(event.data.seekTo)
},
"getStatus": function() {
channel.send({'event':'statusCheck','message':player.getPlayerState()});
}
};
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: 562,
@@ -108,12 +103,24 @@ function onYouTubeIframeAPIReady() {
}
function onPlayerReady() {
ytReady = true;
$("#player").toggleClass("hide");
$("#zoff-logo").toggleClass("center");
$("#zoff-logo").toggleClass("lower_left");
if(videoId){
player.loadVideoById(videoId);
player.playVideo();
if(seekTo){
player.seekTo(seekTo);
seekTo = null;
}
}
//channel.send({'event':'iframeApiReady','message':'ready'});
}
function onPlayerStateChange(event) {
//channel.send({'event':'stateChange','message':event.data});
if (event.data==YT.PlayerState.ENDED) {
endcast();
customMessageBus.broadcast({type: -1, videoId: videoId})
}
}

BIN
receiver/squareicon_small.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

11
static/css/style.css
View File

@@ -16,6 +16,17 @@
border:none !important;
}
#player_overlay_controls{
font-size:7rem;
width: 100%;
height: 100%;
}
#volume-button-overlay, #playpause-overlay{
display: inline-block;
margin: auto;
}
#pageButtons, #pageButtons a{
color:white !important;
}

2
static/dist/embed.min.js vendored
View File

File diff suppressed because one or more lines are too long

6
static/dist/main.min.js vendored
View File

File diff suppressed because one or more lines are too long

4
static/js/hostcontroller.js
View File

@@ -48,9 +48,9 @@ var Hostcontroller = {
window.history.pushState("object or string", "Title", "/"+chan.toLowerCase());
}else if(arr.type == "pause")
Player.player.pauseVideo();
Player.pauseVideo();
else if(arr.type == "play")
Player.player.playVideo();
Player.playVideo();
else if(arr.type == "skip")
List.skip();
}

57
static/js/listeners.js
View File

@@ -250,10 +250,13 @@ initializeCastApi = function() {
switch (event.sessionState) {
case cast.framework.SessionState.SESSION_STARTED:
castSession = cast.framework.CastContext.getInstance().getCurrentSession();
castSession.addMessageListner("urn:x-cast:zoff.no", chromecastListener)
window.castSession = cast.framework.CastContext.getInstance().getCurrentSession();
chromecastAvailable = true;
//castSession.sendMessage("urn:x-cast:zoff.no", {type: "loadVideo", videoId: video_id})
//cast.framework.CastSession(castSession);
castSession.sendMessage("urn:x-cast:zoff.no", {type: "loadVideo", videoId: video_id, seekTo: Player.player.getCurrentTime()})
hide_native(1);
$(".castButton").toggleClass("hide");
$(".castButton-active").toggleClass("hide");
break;
@@ -265,12 +268,48 @@ initializeCastApi = function() {
chromecastAvailable = false;
$(".castButton").toggleClass("hide");
$(".castButton-active").toggleClass("hide");
hide_native(0);
// Update locally as necessary
break;
}
});
};
window.hide_native = hide_native;
function hide_native(way){
if(way == 1){
$("#controls").toggleClass("hide");
Player.player.stopVideo();
Player.stopInterval = true;
$("#player").toggleClass("hide");
$("#player_overlay").toggleClass("hide");
//$("#player_overlay").css("display", "block");
$("#player_overlay").css("height", "100%");
$("#player_overlay_text").toggleClass("hide");
$("#player_overlay_controls").css("display", "inherit");
} else if(way == 0){
$("#controls").toggleClass("hide");
Player.player.playVideo();
Player.stopInterval = false;
Player.durationSetter();
$("#player").toggleClass("hide");
$("#player_overlay").toggleClass("hide");
$("#player_overlay").css("height", "100%");
$("#player_overlay_text").toggleClass("hide");
$("#player_overlay_controls").css("display", "none");
socket.emit('pos', {channel: chan.toLowerCase()});
}
}
function chromecastListener(event){
switch(event.data.type){
case -1:
socket.emit("end", {id: event.data.videoId, channel: chan.toLowerCase()});
break;
}
}
function setup_no_connection_listener(){
socket.on('connect_failed', function(){
Helper.log('Connection Failed');
@@ -404,6 +443,18 @@ $(document).keyup(function(e) {
}
});
$(document).on("click", "#playpause-overlay", function(){
if($("#play-overlay").hasClass("hide")){
Player.pauseVideo();
$("#play-overlay").toggleClass("hide");
$("#pause-overlay").toggleClass("hide");
} else if($("#pause-overlay").hasClass("hide")){
Player.playVideo();
$("#play-overlay").toggleClass("hide");
$("#pause-overlay").toggleClass("hide");
}
});
$(document).on("click", ".castButton-active", function(e){
e.preventDefault();
var castSession = cast.framework.CastContext.getInstance().getCurrentSession();
@@ -529,7 +580,7 @@ $(document).on("change", 'input[class=conf]', function()
});
$("#clickme").click(function(){
Player.player.playVideo();
Player.playVideo();
});
$(document).on("click", "#listExport", function(e){

78
static/js/player.js
View File

@@ -25,9 +25,9 @@ var Player = {
document.getElementById('song-title').innerHTML = "Empty channel. Add some songs!";
$("#player_overlay").height($("#player").height());
if(!window.MSStream) $("#player_overlay").toggleClass("hide");
if(!window.MSStream && !chromecastAvailable) $("#player_overlay").toggleClass("hide");
try{
Player.player.stopVideo();
Player.stopVideo();
}catch(e){}
//List.importOldList(channel.toLowerCase());
} else if(paused){
@@ -35,7 +35,7 @@ var Player = {
Player.getTitle(obj.np[0].title, viewers);
//Player.setBGimage(video_id);
Player.notifyUser(obj.np[0].id, obj.np[0].title);
Player.player.stopVideo();
Player.stopVideo();
}else if(!paused){
//Helper.log("gotten new song");
if(previous_video_id === undefined)
@@ -69,20 +69,20 @@ var Player = {
try{
if(Player.player.getVideoUrl().split('v=')[1] != video_id)
{
Player.player.loadVideoById(video_id);
Player.loadVideoById(video_id);
Player.notifyUser(video_id, song_title);
Player.player.seekTo(seekTo);
Player.seekTo(seekTo);
if(paused)
Player.player.pauseVideo();
Player.pauseVideo();
}
if(!paused){
if(!mobile_beginning)
Player.player.playVideo();
Player.playVideo();
if(!durationBegun)
Player.durationSetter();
}
if(Player.player.getDuration() > seekTo || Player.player.getDuration() === 0)
Player.player.seekTo(seekTo);
if(Player.player.getDuration() > seekTo || Player.player.getDuration() === 0 || chromecastAvailable)
Player.seekTo(seekTo);
Player.after_load = video_id;
if(!Player.loaded) setTimeout(function(){Player.loaded = true;},500);
@@ -113,17 +113,17 @@ var Player = {
case 0:
playing = false;
paused = false;
socket.emit("end", {id: video_id, channel: chan.toLowerCase()});
socket.emit("end", {id: video_id, channel: chan.toLowerCase()});
break;
case 1:
playing = true;
if(beginning && Helper.mobilecheck()){
Player.player.pauseVideo();
Player.pauseVideo();
beginning = false;
mobile_beginning = false;
}
if(!embed && window.location.pathname != "/") Helper.addClass("#player_overlay", "hide");
if(!embed && window.location.pathname != "/" && chromecastAvailable) Helper.addClass("#player_overlay", "hide");
if(window.location.pathname != "/"){
if(document.getElementById("play").className.split(" ").length == 1)
$("#play").toggleClass("hide");
@@ -152,6 +152,46 @@ var Player = {
}
},
playVideo: function(){
if(chromecastAvailable){
castSession.sendMessage("urn:x-cast:zoff.no", {type: "playVideo"});
} else {
Player.player.playVideo();
}
},
pauseVideo: function(){
if(chromecastAvailable){
castSession.sendMessage("urn:x-cast:zoff.no", {type: "pauseVideo"});
} else {
Player.player.pauseVideo();
}
},
seekTo: function(_seekTo){
if(chromecastAvailable){
castSession.sendMessage("urn:x-cast:zoff.no", {type: "seekTo", seekTo: _seekTo});
} else {
Player.player.seekTo(_seekTo);
}
},
loadVideoById: function(id){
if(chromecastAvailable){
castSession.sendMessage("urn:x-cast:zoff.no", {type: "loadVideoById", videoId: id});
} else {
Player.player.loadVideoById(id);
}
},
stopVideo: function(){
if(chromecastAvailable){
castSession.sendMessage("urn:x-cast:zoff.no", {type: "stopVideo"});
} else {
Player.player.stopVideo();
}
},
getTitle: function(titt, v)
{
@@ -188,12 +228,12 @@ var Player = {
/*}else{
setTimeout(function(){
Player.player.loadVideoById(video_id);
Player.loadVideoById(video_id);
Player.count ++;
}, Math.floor((Math.random() * 100) + 1));
}*/
}else if(video_id !== undefined)
Player.player.loadVideoById(video_id);
Player.loadVideoById(video_id);
},
onPlayerReady: function(event) {
@@ -206,21 +246,21 @@ var Player = {
$("#player").css("opacity", "1");
$("#controls").css("opacity", "1");
$(".playlist").css("opacity", "1");
Player.player.loadVideoById(video_id);
Player.loadVideoById(video_id);
if(autoplay && !Helper.mobilecheck())
Player.player.playVideo();
Player.playVideo();
if(!durationBegun)
Player.durationSetter();
if(embed){
setTimeout(function(){
Player.player.seekTo(seekTo);
Player.seekTo(seekTo);
if(!autoplay){
Player.player.pauseVideo();
Player.pauseVideo();
Playercontrols.play_pause_show();
}
}, 1000);
}else
Player.player.seekTo(seekTo);
Player.seekTo(seekTo);
}
Player.readyLooks();
Playercontrols.initYoutubeControls(Player.player);

106
static/js/playercontrols.js
View File

@@ -14,6 +14,8 @@ var Playercontrols = {
{
document.getElementById("volume-button").addEventListener("click", Playercontrols.mute_video);
document.getElementById("playpause").addEventListener("click", Playercontrols.play_pause);
document.getElementById("volume-button-overlay").addEventListener("click", Playercontrols.mute_video);
document.getElementById("playpause-overlay").addEventListener("click", Playercontrols.play_pause);
document.getElementById("fullscreen").addEventListener("click", Playercontrols.fullscreen);
},
@@ -54,7 +56,7 @@ var Playercontrols = {
if(Player.player.getPlayerState() == 1)
{
Player.player.pauseVideo();
Player.pauseVideo();
if(Helper.mobilecheck() && !/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream){
document.getElementById("player").style.display = "none";
$(".video-container").toggleClass("click-through");
@@ -62,7 +64,7 @@ var Playercontrols = {
}
} else if(Player.player.getPlayerState() == 2 || Player.player.getPlayerState() === 0)
{
Player.player.playVideo();
Player.playVideo();
if(Helper.mobilecheck() && !/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream){
document.getElementById("player").style.display = "block";
$(".video-container").toggleClass("click-through");
@@ -73,10 +75,14 @@ var Playercontrols = {
play_pause_show: function()
{
if(document.getElementById("pause").className.split(" ").length == 1)
if(document.getElementById("pause").className.split(" ").length == 1){
$("#pause").toggleClass("hide");
if(document.getElementById("play").className.split(" ").length == 2)
$("#pause-overlay").toggleClass("hide");
}
if(document.getElementById("play").className.split(" ").length == 2){
$("#play").toggleClass("hide");
$("#play-overlay").toggleClass("hide");
}
},
settings: function()
@@ -119,43 +125,75 @@ var Playercontrols = {
{
if(!mute){
if(vol >= 0 && vol <= 33){
if(document.getElementById("v-full").className.split(" ").length == 1)
if(document.getElementById("v-full").className.split(" ").length == 1){
$("#v-full").toggleClass("hide");
if(document.getElementById("v-medium").className.split(" ").length == 1)
$("#v-full-overlay").toggleClass("hide");
}
if(document.getElementById("v-medium").className.split(" ").length == 1){
$("#v-medium").toggleClass("hide");
if(document.getElementById("v-low").className.split(" ").length == 2)
$("#v-medium-overlay").toggleClass("hide");
}
if(document.getElementById("v-low").className.split(" ").length == 2){
$("#v-low").toggleClass("hide");
if(document.getElementById("v-mute").className.split(" ").length == 1)
$("#v-low-overlay").toggleClass("hide");
}
if(document.getElementById("v-mute").className.split(" ").length == 1){
$("#v-mute").toggleClass("hide");
$("#v-mute-overlay").toggleClass("hide");
}
}else if(vol >= 34 && vol <= 66){
if(document.getElementById("v-full").className.split(" ").length == 1)
if(document.getElementById("v-full").className.split(" ").length == 1){
$("#v-full").toggleClass("hide");
if(document.getElementById("v-medium").className.split(" ").length == 2)
$("#v-full-overlay").toggleClass("hide");
}
if(document.getElementById("v-medium").className.split(" ").length == 2){
$("#v-medium").toggleClass("hide");
if(document.getElementById("v-low").className.split(" ").length == 1)
$("#v-medium-overlay").toggleClass("hide");
}
if(document.getElementById("v-low").className.split(" ").length == 1){
$("#v-low").toggleClass("hide");
if(document.getElementById("v-mute").className.split(" ").length == 1)
$("#v-low-overlay").toggleClass("hide");
}
if(document.getElementById("v-mute").className.split(" ").length == 1){
$("#v-mute").toggleClass("hide");
$("#v-mute-overlay").toggleClass("hide");
}
}else if(vol >= 67 && vol <= 100){
if(document.getElementById("v-full").className.split(" ").length == 2)
if(document.getElementById("v-full").className.split(" ").length == 2){
$("#v-full").toggleClass("hide");
if(document.getElementById("v-medium").className.split(" ").length == 1)
$("#v-full-overlay").toggleClass("hide");
}
if(document.getElementById("v-medium").className.split(" ").length == 1){
$("#v-medium").toggleClass("hide");
if(document.getElementById("v-low").className.split(" ").length == 1)
$("#v-medium-overlay").toggleClass("hide");
}
if(document.getElementById("v-low").className.split(" ").length == 1){
$("#v-low").toggleClass("hide");
if(document.getElementById("v-mute").className.split(" ").length == 1)
$("#v-low-overlay").toggleClass("hide");
}
if(document.getElementById("v-mute").className.split(" ").length == 1){
$("#v-mute").toggleClass("hide");
$("#v-mute-overlay").toggleClass("hide");
}
}
}else
{
if(document.getElementById("v-full").className.split(" ").length == 1)
if(document.getElementById("v-full").className.split(" ").length == 1){
$("#v-full").toggleClass("hide");
if(document.getElementById("v-medium").className.split(" ").length == 1)
$("#v-full-overlay").toggleClass("hide");
}
if(document.getElementById("v-medium").className.split(" ").length == 1){
$("#v-medium").toggleClass("hide");
if(document.getElementById("v-low").className.split(" ").length == 1)
$("#v-medium-overlay").toggleClass("hide");
}
if(document.getElementById("v-low").className.split(" ").length == 1){
$("#v-low").toggleClass("hide");
if(document.getElementById("v-mute").className.split(" ").length == 2)
$("#v-low-overlay").toggleClass("hide");
}
if(document.getElementById("v-mute").className.split(" ").length == 2){
$("#v-mute").toggleClass("hide");
$("#v-mute-overlay").toggleClass("hide");
}
}
},
@@ -165,26 +203,28 @@ var Playercontrols = {
button = document.getElementById("playpause");
if(state == 1)
{
Player.player.pauseVideo();
Player.pauseVideo();
}else if(state == 2)
{
Player.player.playVideo();
Player.playVideo();
}
},
volumeOptions: function()
{
if(Player.player.isMuted())
{
Player.player.unMute();
vol = Player.player.getVolume();
$("#volume").slider("value", Player.player.getVolume());
}
else
{
Player.player.mute();
$("#volume").slider("value", 0);
}
if(!chromecastAvailable){
if(Player.player.isMuted())
{
Player.player.unMute();
vol = Player.player.getVolume();
$("#volume").slider("value", Player.player.getVolume());
}
else
{
Player.player.mute();
$("#volume").slider("value", 0);
}
}
},
hoverMute: function(foo)