Kodi Community Forum

Full Version: How to display a random movie poster
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
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.
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 pauseHuh
            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>
I have made some progress. I have it show nothing if Kodi is not playing anything when the page is viewed. Once something is playing, it shows the poster and "Now Showing", when you stop it, it loads a random poster from the Kodi library and says "Available in Movie Library" and changes every 30 seconds.  Next step is to play custom posters if it can't connect to Kodi.

Images

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>    
    <link href="https://fonts.googleapis.com/css?family=Orbitron&display=swap" rel="stylesheet">
    <style>
        body, html {
            height: 100%;
            margin: 0;
            background-color: black;
        }

        #poster {
            /* Full height */
            height: calc(100% - 38px); 

            /* Center and scale the image nicely */
            background-position: center;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            background-color: black;
        }
        #bottom_banner {
            position: absolute;
            bottom: 0;
            background-color: rgba(255, 255, 255, 0.4);
            width: 100%;
            text-align: center;
        }
            #bottom_banner p {
                font-size: 25px;
                margin: 5px;
                color: white;
                font-family: 'Orbitron', sans-serif;
            }
    </style>
</head>
<body  onload="startPoster()">
<script language="javascript" type="text/javascript">

var mySlideShow = null;

function startPoster(){
    var ws = new WebSocket('ws://localhost: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": ["title", "album", "artist", "season", "episode", "duration", "showtitle", "tvshowid", "file", "fanart", "streamdetails", "art"],
                    "playerid": r.playerid,
                  });
                } 
                break;
            }
            catch(err) {
            
            }
          case "Player.GetItem":
            var r = j.result.item;
            console.log®

            try {
                if (contentType == 'video') {
                    document.getElementById("poster").style.backgroundImage = "url('" + regex.exec(decodeURIComponent(r.art["poster"]))[1] + "')";
                } 
                break;
            }
            catch(err) {

            }
          case "VideoLibrary.GetMovies":
            var r = j.result.limits;
            var numMaxVideoID = r.total - 1;
            var randVideoID = randomIntFromInterval(0, numMaxVideoID);
            console.log(randVideoID)
                
            send_message("VideoLibrary.GetMovieDetails", {
                "properties": ["mpaa", "tagline", "art"],
                "movieid": randVideoID
            });     

          case "VideoLibrary.GetMovieDetails":
            try {
                var r = j.result.moviedetails;
                console.log®
            
                document.getElementById("poster").style.backgroundImage = "url('" + regex.exec(decodeURIComponent(r.art["poster"]))[1] + "')";
            }
            catch(err) {

            }
        }
      } else // notification
      {
        switch (j.method) {
          case "Player.OnAVStart":
            endSlideShow();
            send_message("Player.GetActivePlayers");
              document.getElementById("banner_text").innerHTML = 'Now Showing';
              break;
          case "Player.OnPause":
            // add code for pauseHuh
            break;
          case "Player.OnStop":
            // add code for random slideshow
            send_message("VideoLibrary.GetMovies");
            mySlideShow = setInterval(startSlideShow, 30000);
            document.getElementById("banner_text").innerHTML = 'Available in Movie Library';
            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));
    }
    
    function randomIntFromInterval(min, max) { // min and max included 
        return Math.floor(Math.random() * (max - min + 1) + min);
    }
    
    function startSlideShow() {
        send_message("VideoLibrary.GetMovies");
    }
    
    function endSlideShow() {
        clearInterval(mySlideShow);
        mySlideShow = 0;
    }
}
</script>
<div id="poster"></div>
<div id="bottom_banner"><p id="banner_text">Nothing to Show</p></div>
</body>
</html>
Hello , can you share your code? , i am try to build something like this.....your html code is not working...