Emby Show and Movie Overview Webpage.

[Oratorian 41]

This little script creates an overview of all TV Shows and Movies in your Emby installation.

 

This was a playground script while testing the emby API.

It creates a small html file with all shows and movies
It includes a search bar

and you can switch between Table View (Shows all in an organized table), TV Shows only and Movies only.
It also downloads the primary picture of all shows if available into the folder img.
Shows can be clicked, and it will redirect you automatically to your emby with the shows overview.

Shows Only and Movies only look like this:


Table View looks like this:

 

In the header of the script you can define
 

Quote

EMBY_SERVER="http://localhost:8096"

API_KEY="<your api key from the emby server API settings page>"

SERVER_ID="<serverid>"

 

The serverid can be obtained in emby.
Visit your emby click any show or movie and look at the URL it looks like this
 

Quote

item?id=23750&serverId=12345678900987654321&context=home

webview.sh

Edited May 25, 2024 by Oratorian

[sh0rty 714]

@OratorianCould you make the artwork a bit smaller in TV Show and Movie view? And the possibility to remove the link to the Emby instance of the item would be cool for external people I could show the site.

[Oratorian 41]

I think I could add a setting for that in the generation script. Give me a few minutes. 

[Oratorian 41]

Done

You can set link generation on or off and you can choose the image width to be used in the css style, the height gets adjusted automatically.
Image width of 250 gives a good result, images are neither to small nor too big.

9 hours ago, shorty1483 said:

@OratorianCould you make the artwork a bit smaller in TV Show and Movie view? And the possibility to remove the link to the Emby instance of the item would be cool for external people I could show the site.

webview.sh

Edited June 9, 2024 by Oratorian

[Oratorian 41]

33 minutes ago, Oratorian said:

Done

You can set link generation on or off and you can choose the image width to be used in the css style, the height gets adjusted automatically.
Image width of 250 gives a good result, images are neither to small nor too big.

webview.sh 13.25 kB · 1 download

 

• Had to fix a bug in the searchbar that was depended on the links getting generated, searchbar is working again.
• The generated html file now has modifiable stylesheet. You will find it at the top on the media.html, you can adjust the style to your needs.

 

    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        h1 { color: #333; }
        .menu { margin-bottom: 20px; }
        .menu button { margin-right: 10px; padding: 10px; cursor: pointer; }
        .search-bar { margin-bottom: 20px; }
        .search-bar input { padding: 10px; width: 100%; box-sizing: border-box; }
        .shows, .movies { display: flex; flex-wrap: wrap; }
        .show, .movie { flex: 1 1 23%; display: flex; flex-direction: column; align-items: center; margin-bottom: 20px; padding: 10px; box-sizing: border-box; margin-right: 1%; }
        .show img, .movie img { width: 250px; height: auto; border: 1px solid #ddd; border-radius: 5px; }
        .show a, .movie a { text-decoration: none; color: #333; text-align: center; }
        .show a:hover, .movie a:hover { text-decoration: underline; }
        .show-title, .movie-title { width: 100%; color: #333; padding: 5px; box-sizing: border-box; text-align: center; font-weight: bold; min-height: 50px; display: flex; align-items: center; justify-content: center; }
        .table-view { display: none; width: 100%; border-collapse: collapse; }
        .table-view th, .table-view td { border: 1px solid #ddd; padding: 10px; text-align: left; }
    </style>

webview.sh

Edited June 9, 2024 by Oratorian

[sh0rty 714]

Thanks man, this is really sick and a feature al lot of people wanted in the past instead of the Excel or CSV export. Awesome work!

[Oratorian 41]

You can omit setting the serverid when you dont need links that redirect you to your emby.

 

I publish all my scripts on my github when I deem them ready to somehow have a workable state.

 

My Github Archive