Login at Kodi Home

w84no1 · 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.

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>

w84no1 · 2019-09-23, 15:43

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 pause

            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>

0raid · 2019-10-22, 20:16

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

w84no1 · 2020-05-02, 17: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.

0raid · 2020-05-02, 17:51

(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!

w84no1 · 2020-05-02, 20:58

(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!! 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.