How to display a random movie poster
#1
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>
TV Mosaic on Windows 10 as PVR Backend |  1 RaspberryPI 3 Client (LibreElec) | Amazon FireTV box | 5 Amazon FireTV sticks | FireTV Cube | 2 Nvidia Shield TV
Tuners: HD HomeRun 4 ATSC (OTA) | IPTV
Reply
#2
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>
TV Mosaic on Windows 10 as PVR Backend |  1 RaspberryPI 3 Client (LibreElec) | Amazon FireTV box | 5 Amazon FireTV sticks | FireTV Cube | 2 Nvidia Shield TV
Tuners: HD HomeRun 4 ATSC (OTA) | IPTV
Reply
#3
Hello , can you share your code? , i am try to build something like this.....your html code is not working...
Reply
 
Thread Rating:
  • 0 Vote(s) - 0 Average



Logout Mark Read Team Forum Stats Members Help
How to display a random movie poster00