Kodi Community Forum
How to display a random movie poster - Printable Version

+- Kodi Community Forum (https://forum.kodi.tv)
+-- Forum: Development (https://forum.kodi.tv/forumdisplay.php?fid=32)
+--- Forum: Kodi Application (https://forum.kodi.tv/forumdisplay.php?fid=93)
+---- Forum: JSON-RPC (https://forum.kodi.tv/forumdisplay.php?fid=174)
+---- Thread: How to display a random movie poster (/showthread.php?tid=347409)

How to display a random movie poster - w84no1 - 2019-09-20

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>


RE: How to display a random movie poster - w84no1 - 2019-09-23

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>


RE: How to display a random movie poster - 0raid - 2019-10-22

Hello , can you share your code? , i am try to build something like this.....your html code is not working...

RE: How to display a random movie poster - w84no1 - 2020-05-02

(2019-10-22, 20:16)0raid Wrote: Hello , can you share your code? , i am try to build something like this.....your html code is not working...

I see that you got my code to work in your Movienow app.  You could at least have given me some credit, lol!  Anyway, nice app. I have some ideas that I have been working on if you would like to add them to the app.

RE: How to display a random movie poster - 0raid - 2020-05-02

(2020-05-02, 17:02)w84no1 Wrote:
(2019-10-22, 20:16)0raid Wrote: Hello , can you share your code? , i am try to build something like this.....your html code is not working...

I see that you got my code to work in your Movienow app.  You could at least have given me some credit, lol!  Anyway, nice app. I have some ideas that I have been working on if you would like to add them to the app. 
i have change the code A lot to make it work!! Smile sure! register to the website and send me a private message , i am open to new features and suggestions!

RE: How to display a random movie poster - w84no1 - 2020-05-02

(2020-05-02, 17:51)0raid Wrote:
(2020-05-02, 17:02)w84no1 Wrote:
(2019-10-22, 20:16)0raid Wrote: Hello , can you share your code? , i am try to build something like this.....your html code is not working...

I see that you got my code to work in your Movienow app.  You could at least have given me some credit, lol!  Anyway, nice app. I have some ideas that I have been working on if you would like to add them to the app.  
i have change the code A lot to make it work!! Smile sure! register to the website and send me a private message , i am open to new features and suggestions! 
I created an account, will send you a message shortly.