2019-09-20, 20:49
I have created a web page that I can use as a digital movie poster showing the currently playing movie poster. When nothing is playing I would like to display random movie posters from my library, but I can't figure out how to do it with VideoLibrary.GetMovies. Any help would be appreciated.
Below is the basic code to display the poster of the currently playing movie.
Below is the basic code to display the poster of the currently playing movie.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta charset="utf-8">
<meta name="mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, user-scalable=no">
<title>Movie Poster</title>
<style>
body, html {
height: 100%;
margin: 0;
}
#poster {
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: 100% 100%;
background-image: url("placeholder.png");
}
</style>
</head>
<body onload="startPoster()">
<script language="javascript" type="text/javascript">
function startPoster(){
var ws = new WebSocket('ws://192.168.1.100:9090/jsonrpc'); //IP address of your Kodi / libreELEC instance
var regex = /(http.*\w)/;
var contentType;
ws.onopen = function(event) {
send_message("Player.GetActivePlayers");
}
ws.onclose = function(){
// Try to reconnect in 20 seconds
setTimeout(function(){startPoster()}, 20000);
};
ws.onmessage = function(event) {
var j = JSON.parse(event.data);
if (j.id) // response
{
switch (j.id) {
case "Player.GetActivePlayers":
var r = j.result[0];
try {
if (r.type == 'video') {
contentType = 'video';
send_message("Player.GetItem", {
"properties": ["art"],
"playerid": r.playerid,
});
}
break;
}
catch(err) {
}
case "Player.GetItem":
var r = j.result.item;
console.log®
try {
if (contentType == 'video') {
if (r.type == "movie") {
document.getElementById("poster").style.backgroundImage = "url('" + regex.exec(decodeURIComponent(r.art["poster"]))[1] + "')";
} else if (r.type == "episode") {
document.getElementById("poster").style.backgroundImage = "url('" + regex.exec(decodeURIComponent(r.art["thumb"]))[1] + "')";
} else if (r.type == "unknown") {
document.getElementById("poster").style.backgroundImage = "url('" + regex.exec(decodeURIComponent(r.art["thumb"]))[1] + "')";
} else {
document.getElementById("poster").style.backgroundImage = "url('placeholder.png')";
}
}
break;
}
catch(err) {
}
}
} else // notification
{
switch (j.method) {
case "Player.OnAVStart":
send_message("Player.GetActivePlayers");
break;
/*case "Player.OnPlay":
send_message("Player.GetActivePlayers");
break;*/
case "Player.OnPause":
// add code for pause
break;
case "Player.OnStop":
// add code for random slideshow
document.getElementById("poster").style.backgroundImage = "url('placeholder.png')";
break;
}
}
}
function send_message(method, params) {
var msg = {
"jsonrpc": "2.0",
"method": method,
"id": method
};
if (params) {
msg.params = params;
}
ws.send(JSON.stringify(msg));
}
}
</script>
<div id="poster"></div>
</body>
</html>
