Merge pull request #207 from JonnyWong16/update-metadata

Update rating key for missing items

data/interfaces/default/base.html

@@ -57,6 +57,18 @@ from plexpy import version
             </div>
             <div class="collapse navbar-collapse navbar-right" id="navbar-collapse-1">
                 <ul class="nav navbar-nav">
+                    <li>
+                        <form action="search" method="post" class="form" id="search_form">
+                            <div class="input-group">
+                                <span class="input-textbox">
+                                    <input type="text" class="form-control" name="search_query" id="search_query" aria-label="Search" placeholder="Search..."/>
+                                </span>
+                                <span class="input-group-btn">
+                                    <button class="btn btn-dark btn-inactive" type="submit" id="search_button"><i class="fa fa-search"></i></button>
+                                </span>
+                            </div>
+                        </form>
+                    </li>
                     % if title=="Home":
                         <li class="active"><a href="home"><i class="fa fa-lg fa-home"></i></a></li>
                     % else:
@@ -117,6 +129,28 @@ ${next.headerIncludes()}
         $('#updatebar').show();
     }
 </script>
+<script>
+    $('#search_form').submit(function (e) {
+        if ($('#search_query').hasClass('active') && $('#search_query').val().trim() != '') {
+            $.ajax({
+                type: 'post',
+                url: 'search',
+                data: { 'query': $('#search_query').val() }
+            })
+        } else {
+            e.preventDefault();
+            $('#search_button').removeClass('btn-inactive');
+            $('#search_query').clearQueue().val('').animate({ right: '0', width: '250px' }).addClass('active').focus();
+        }
+    })
+    $('#search_query').on('blur', function (e) {
+        if ($(this).val().trim() == '') {
+            $(this).delay(200).animate({ right: '-250px', width: '0' }, function () {
+                $('#search_button').addClass('btn-inactive');
+            }).removeClass('active');
+        }
+    });
+</script>
 ${next.javascriptIncludes()}
 </body>
 </html>

data/interfaces/default/css/plexpy.css

@@ -1246,11 +1246,39 @@ a:hover .summary-poster-face-track .summary-poster-face-overlay span {
     background-size: contain;
     height: 16px;
 }
+#children-list, #search-results-list {
+    position: relative;
+    z-index: 0;
+}
 .item-children-wrapper {
 }
+.item-children-section-title {
+    position: relative;
+    padding: 10px;
+    background-color: #2c2c2c;
+    border-bottom: 1px solid #3d3d3d;
+    border-top: 1px solid #282828;
+    height: 50px;
+    line-height: 22px;
+    padding: 13px 20px;
+    margin: 20px 0;
+}
+.item-children-section-title h4 {
+    position: relative;
+    margin: 0;
+    line-height: 22px;
+    color: #fff;
+    font-size: 16px;
+    text-align: center;
+    text-transform: uppercase;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
 .item-children-instance {
     list-style: none;
     margin: 0;
+    overflow: hidden;
 }
 .item-children-instance li {
     float: left;
@@ -1348,6 +1376,9 @@ a:hover .item-children-poster {
     text-align: left;
     clear: both;
 }
+.item-children-instance-text-wrapper h3.text-muted {
+    color: #777;
+}
 .item-children-list-item-odd {
     border-top: 0px solid #343434;
     border-bottom: 0px solid #343434;
@@ -1391,6 +1422,13 @@ a:hover .item-children-poster {
     width: 40px;
     margin-right: 20px;
 }
+#new_title h3 {
+    color: #F9AA03;
+    font-size: 14px;
+    line-height: 1.42857143;
+    font-weight: bold;
+    margin: 0;
+}
 .settings-alert {
     float: left;
     padding: 0;
@@ -2377,4 +2415,38 @@ a .home-platforms-instance-list-oval:hover,
     .dashboard-instance {
         width: 100%;
     }
+}
+
+#search_form {
+    width: 350px;
+    padding: 8px 15px;
+}
+#search_form span.input-textbox {
+    overflow: hidden;
+    width: 250px;
+    height: 34px;
+    display: inline-flex;
+    float: right;
+}
+#search_form #search_query {
+    width: 0;
+    height: 34px;
+    margin-top: 0;
+    float: right;
+    position: relative;
+    right: -250px;
+    border-radius: 3px 0 0 3px;
+}
+#search_form #search_query.active {
+    width: 250px;
+    right: 0px;
+}
+#search_form #search_button.btn-inactive {
+    background-color: #000;
+    border: 1px solid rgba(0,0,0,0);
+    -webkit-transition: background 0.3s;
+    -moz-transition: background 0.3s;
+    -ms-transition: background 0.3s;
+    -o-transition: background 0.3s;
+    transition: background 0.3s;
 }

data/interfaces/default/info.html

@@ -11,27 +11,40 @@ data :: Usable parameters (if not applicable for media type, blank value will be
 
 == Global keys ==
 rating_key              Returns the unique identifier for the media item.
-type                    Returns the type of media. Either 'movie', 'episode' or 'show' or 'season'.
+type                    Returns the type of media. Either 'movie', 'show', 'season', 'episode', 'artist', 'album', or 'track'.
 art                     Returns the location of the item's artwork
-title                   Returns the name of the episode, show, season or movie.
+title                   Returns the name of the movie, show, episode, artist, album, or track.
 duration                Returns the standard runtime of the media.
 content_rating          Returns the age rating for the media.
 summary                 Returns a brief description of the media plot.
-grandparent_title       Returns the name of the TV show.
-parent_index            Returns the season number of the TV show.
-index                   Returns the episode number.
+grandparent_title       Returns the name of the show, or artist.
+parent_index            Returns the index number of the season.
+index                   Returns the index number of the episode, or track.
 parent_thumb            Returns the location of the item's thumbnail. Use with pms_image_proxy.
 writers                 Returns an array of writers.
 thumb                   Returns the location of the item's thumbnail. Use with pms_image_proxy.
-parent_title            Returns the name of the TV show.
+parent_title            Returns the name of the show, or artist.
 rating                  Returns the 5 star rating value for the movie. Between 1 and 5.
-year                    Returns the release year of the movie.
+year                    Returns the release year of the movie, or show.
 genres                  Returns an array of genres.
 actors                  Returns an array of actors.
 directors               Returns an array of directors.
 studio                  Returns the name of the studio.
 originally_available_at Returns the air date of the item.
 
+query :: Usable parameters
+
+== Global keys ==
+query_string            Returns the string used for the search query.
+title                   Returns the name of the movie, episode, or track.
+parent_title            Returns the name of the album.
+grandparent_title       Returns the name of the show, or artist.
+media_index             Returns the index number of the episode, or track.
+parent_media_index      Returns the index number of the season.
+year                    Returns the release year of the movie, or show.
+media_type              Returns the type of media. Either 'movie', 'show', 'season', 'episode', 'artist', 'album', or 'track'.
+rating_key              Returns the unique identifier for the media item.
+
 DOCUMENTATION :: END
 </%doc>
 
@@ -261,7 +274,7 @@ DOCUMENTATION :: END
                         </div>
                     </div>
                     <div class='table-card-back'>
-                        <div id="children-list"></div>
+                        <div id="children-list"><i class="fa fa-refresh fa-spin"></i>&nbsp; Loading season list...</div>
                     </div>
                 </div>
                 % elif data['type'] == 'season':
@@ -272,7 +285,7 @@ DOCUMENTATION :: END
                         </div>
                     </div>
                     <div class='table-card-back'>
-                        <div id="children-list"></div>
+                        <div id="children-list"><i class="fa fa-refresh fa-spin"></i>&nbsp; Loading episode list...</div>
                     </div>
                 </div>
                 % elif data['type'] == 'artist':
@@ -283,7 +296,7 @@ DOCUMENTATION :: END
                         </div>
                     </div>
                     <div class='table-card-back'>
-                        <div id="children-list"></div>
+                        <div id="children-list"><i class="fa fa-refresh fa-spin"></i>&nbsp; Loading album list...</div>
                     </div>
                 </div>
                 % elif data['type'] == 'album':
@@ -294,7 +307,7 @@ DOCUMENTATION :: END
                         </div>
                     </div>
                     <div class='table-card-back'>
-                        <div id="children-list"></div>
+                        <div id="children-list"><i class="fa fa-refresh fa-spin"></i>&nbsp; Loading track list...</div>
                     </div>
                 </div>
                 % endif
@@ -361,11 +374,122 @@ DOCUMENTATION :: END
 % else:
 <div class="container-fluid">
     <div class="row">
-        <div class="col-md-10">
-            <h3>
-                Error retrieving item data. This media may not be available in the Plex Media Server database
-                anymore.
-            </h3>
+        <div class="summary-container">
+            <div class="summary-navbar">
+                <div class="col-md-12">
+                    <div class="summary-navbar-list">
+                        % if query:
+                        % if query['media_type'] == 'movie':
+                        <span>Movies</span>
+                        <span class="hidden-xs hidden-sm"><i class="fa fa-chevron-right"></i></span>
+                        <span>${query['title']}</span>
+                        % elif query['media_type'] == 'show':
+                        <span>TV Shows</span>
+                        <span class="hidden-xs hidden-sm"><i class="fa fa-chevron-right"></i></span>
+                        <span>${query['grandparent_title']}</span>
+                        % elif query['media_type'] == 'season':
+                        <span class="hidden-xs hidden-sm">TV Shows</span>
+                        <span class="hidden-xs hidden-sm"><i class="fa fa-chevron-right"></i></span>
+                        <span class="hidden-xs hidden-sm">${query['grandparent_title']}</span>
+                        <span class="hidden-xs hidden-sm"><i class="fa fa-chevron-right"></i></span>
+                        <span>Season ${query['parent_media_index']}</span>
+                        % elif query['media_type'] == 'episode':
+                        <span class="hidden-xs hidden-sm">TV Shows</span>
+                        <span class="hidden-xs hidden-sm"><i class="fa fa-chevron-right"></i></span>
+                        <span class="hidden-xs hidden-sm">${query['grandparent_title']}</span>
+                        <span class="hidden-xs hidden-sm"><i class="fa fa-chevron-right"></i></span>
+                        <span>Season ${query['parent_media_index']}</span>
+                        <span><i class="fa fa-chevron-right"></i></span>
+                        <span>Episode ${query['media_index']} - ${query['title']}</span>
+                        % elif query['media_type'] == 'artist':
+                        <span>Music</span>
+                        <span><i class="fa fa-chevron-right"></i></span>
+                        <span>${query['grandparent_title']}</span>
+                        % elif query['media_type'] == 'album':
+                        <span class="hidden-xs hidden-sm">Music</span>
+                        <span class="hidden-xs hidden-sm"><i class="fa fa-chevron-right"></i></span>
+                        <span>${query['grandparent_title']}</span>
+                        <span><i class="fa fa-chevron-right"></i></span>
+                        <span>${query['parent_title']}</span>
+                        % elif query['media_type'] == 'track':
+                        <span class="hidden-xs hidden-sm">Music</span>
+                        <span class="hidden-xs hidden-sm"><i class="fa fa-chevron-right"></i></span>
+                        <span class="hidden-xs hidden-sm">${query['grandparent_title']}</span>
+                        <span class="hidden-xs hidden-sm"><i class="fa fa-chevron-right"></i></span>
+                        <span>${query['parent_title']}</span>
+                        <span><i class="fa fa-chevron-right"></i></span>
+                        <span>Track ${query['media_index']} - ${query['title']}</span>
+                        % endif
+                        % endif
+                    </div>
+                </div>
+            </div>
+            <div class="summary-content-title-wrapper">
+                <div class="col-md-12">
+                    <h4 style="text-align: center; margin-bottom: 20px;">
+                        Error retrieving item metadata. This media item is not available in the Plex Media Server library.
+                    </h4>
+                    % if query:
+                    <h4 style="text-align: center; margin-bottom: 20px;">
+                        If the item has been moved, please select the correct match below to update the PlexPy database.
+                    </h4>
+                    % endif
+                </div>
+            </div>
+            <div class="summary-content-wrapper">
+                <div class='col-md-12'>
+                    % if query:
+                    <div class='table-card-header'>
+                        <div class="header-bar">
+                            <span>Search Results for <strong>${query['query_string']}</strong></span>
+                        </div>
+                    </div>
+                    <div class='table-card-back'>
+                        <div id="search-results-list"><i class="fa fa-refresh fa-spin"></i>&nbsp; Loading search results...</div>
+                    </div>
+                    <div class="modal fade" id="confirm-modal" tabindex="-1" role="dialog" aria-labelledby="confirm-modal">
+                        <div class="modal-dialog">
+                            <div class="modal-content">
+                                <div class="modal-header">
+                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="fa fa-remove"></i></button>
+                                    <h4 class="modal-title" id="myModalLabel">Confirm Update</h4>
+                                </div>
+                                <div class="modal-body" style="text-align: center;">
+                                    <p>Are you REALLY sure you want to replace
+                                    <p><strong>
+                                        % if query['media_type'] == 'movie':
+                                        ${query['title']}<br />${query['year']}
+                                        % elif query['media_type'] == 'show':
+                                        ${query['grandparent_title']}
+                                        % elif query['media_type'] == 'season':
+                                        ${query['grandparent_title']}<br />S${query['parent_media_index']}
+                                        % elif query['media_type'] == 'episode':
+                                        ${query['grandparent_title']}<br />${query['title']}<br />S${query['parent_media_index']} &middot; E${query['media_index']}
+                                        % elif query['media_type'] == 'artist':
+                                        ${query['grandparent_title']}
+                                        % elif query['media_type'] == 'album':
+                                        ${query['grandparent_title']}<br />${query['parent_title']}
+                                        % elif query['media_type'] == 'track':
+                                        ${query['grandparent_title']}<br />${query['title']}<br />${query['parent_title']}
+                                        % endif
+                                        </strong></p>
+                                    <p> with </p>
+                                    <p><span id="new_title"></span></p>
+                                    % if query['media_type'] != 'movie':
+                                    <p>All items for <strong>${query['grandparent_title']}</strong> will also be updated.</p>
+                                    % endif
+                                    <p>This is permanent and cannot be undone!</p>
+                                </div>
+                                <div class="modal-footer">
+                                    <button type="button" class="btn btn-dark" data-dismiss="modal">Cancel</button>
+                                    <button type="button" class="btn btn-danger btn-ok" data-dismiss="modal" id="confirm-update">Update</button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    % endif
+                </div>
+            </div>
         </div>
     </div>
 </div>
@@ -381,13 +505,6 @@ DOCUMENTATION :: END
 <script src="interfaces/default/js/moment-with-locale.js"></script>
 
 % if data:
-% if data['type'] == 'movie' or data['type'] == 'show' or data['type'] == 'episode':
-<script>
-    // Convert rating to 5 star rating type
-    var starRating = Math.round(${data['rating']} / 2);
-    $('#stars').attr('data-rateit-value', starRating);
-</script>
-% endif
 <script src="interfaces/default/js/tables/history_table.js"></script>
 % if data['type'] == 'show' or data['type'] == 'artist':
 <script>
@@ -488,10 +605,57 @@ DOCUMENTATION :: END
     });
 </script>
 % endif
+% if data['rating']:
+<script>
+    // Convert rating to 5 star rating type
+    var starRating = Math.round(${data['rating']} / 2);
+    $('#stars').attr('data-rateit-value', starRating);
+</script>
+% endif
 <script>
     $("#airdate").html(moment($("#airdate").text()).format('MMM DD, YYYY'));
     $("#runtime").html(millisecondsToMinutes($("#runtime").text(), true));
     $('div.art-face').animate({ opacity: 0.2 }, { duration: 1000 });
 </script>
+% elif query:
+<script>
+    $.ajax({
+        url: 'get_search_results_children',
+        type: "GET",
+        async: true,
+        data: {'query': "${query['query_string']}",
+               'media_type': "${query['media_type']}",
+               'season_index': "${query['parent_media_index']}"
+        },
+        complete: function(xhr, status) {
+        $("#search-results-list").html(xhr.responseText); }
+    });
+    $(document).on('click', '#search-results-list a', function (e) {
+        e.preventDefault();
+        var new_rating_key = $(this).attr("id");
+        var new_href = $(this).attr("href");
+
+        $('#new_title').html($(this).find('.item-children-instance-text-wrapper').html());
+
+        $('#confirm-modal').modal();
+        $('#confirm-modal').one('click', '#confirm-update', function () {
+            $(this).prop('disabled', true);
+            var msg = "<i class='fa fa-refresh fa-spin'></i>&nbspUpdating database..."
+            showMsg(msg, false, false, 0)
+
+            $.ajax({
+                url: 'update_history_rating_key',
+                data: { old_rating_key: "${query['rating_key']}",
+                    new_rating_key: new_rating_key,
+                    media_type: "${query['media_type']}"
+                    },
+                async: true,
+                success: function (data) {
+                    window.location.href = new_href;
+                }
+            });
+        });
+    });
+</script>
 % endif
 </%def>

data/interfaces/default/info_search_results_list.html

@@ -0,0 +1,224 @@
+<%doc>
+USAGE DOCUMENTATION :: PLEASE LEAVE THIS AT THE TOP OF THIS FILE
+
+For Mako templating syntax documentation please visit: http://docs.makotemplates.org/en/latest/
+
+Filename:           info_children_list.html
+Version:            0.1
+Variable names:     data [list]
+
+data :: Usable parameters
+
+== Global keys ==
+results_count           Returns the number of search results.
+results_list            Returns a dictionary of search result types.
+
+data['results_list'] :: Usable paramaters
+
+== media_type keys ==
+movie                   Returns an array of movie results
+show                    Returns an array of show results
+season                  Returns an array of season results
+episode                 Returns an array of episode results
+artist                  Returns an array of artist results
+album                   Returns an array of album results
+track                   Returns an array of track results
+
+data['results_list'][media_type] :: Usable paramaters
+
+== Global keys ==
+rating_key              Returns the unique identifier for the media item.
+type                    Returns the type of media. Either 'movie', 'show', 'season', 'episode', 'artist', 'album', or 'track'.
+art                     Returns the location of the item's artwork
+title                   Returns the name of the movie, show, episode, artist, album, or track.
+duration                Returns the standard runtime of the media.
+content_rating          Returns the age rating for the media.
+summary                 Returns a brief description of the media plot.
+grandparent_title       Returns the name of the show, or artist.
+parent_index            Returns the index number of the season.
+index                   Returns the index number of the episode, or track.
+parent_thumb            Returns the location of the item's thumbnail. Use with pms_image_proxy.
+writers                 Returns an array of writers.
+thumb                   Returns the location of the item's thumbnail. Use with pms_image_proxy.
+parent_title            Returns the name of the show, or artist.
+rating                  Returns the 5 star rating value for the movie. Between 1 and 5.
+year                    Returns the release year of the movie, or show.
+genres                  Returns an array of genres.
+actors                  Returns an array of actors.
+directors               Returns an array of directors.
+studio                  Returns the name of the studio.
+originally_available_at Returns the air date of the item.
+
+DOCUMENTATION :: END
+</%doc>
+
+% if data != None:
+% if data['results_count'] > 0:
+% if 'movie' in data['results_list'] and data['results_list']['movie']:
+<div class="item-children-wrapper">
+    <div class="item-children-section-title">
+        <h4>Movies</h4>
+    </div>
+    <ul class="item-children-instance list-unstyled">
+        % for child in data['results_list']['movie']:
+        <li>
+            <a href="info?item_id=${child['rating_key']}" id="${child['rating_key']}">
+                <div class="item-children-poster">
+                    <div class="item-children-poster-face season-poster" style="background-image: url(pms_image_proxy?img=${child['thumb']}&width=300&height=450);"></div>
+                </div>
+                <div class="item-children-instance-text-wrapper season-item">
+                    <h3 title="${child['title']}">${child['title']}</h3>
+                    <h3 class="text-muted">${child['year']}</h3>
+                </div>
+            </a>
+        </li>
+        % endfor
+    </ul>
+</div>
+% endif
+% if 'show' in data['results_list'] and data['results_list']['show']:
+<div class="item-children-wrapper">
+    <div class="item-children-section-title">
+        <h4>TV Shows</h4>
+    </div>
+    <ul class="item-children-instance list-unstyled">
+        % for child in data['results_list']['show']:
+        <li>
+            <a href="info?item_id=${child['rating_key']}" id="${child['rating_key']}">
+                <div class="item-children-poster">
+                    <div class="item-children-poster-face season-poster" style="background-image: url(pms_image_proxy?img=${child['thumb']}&width=300&height=450);"></div>
+                </div>
+                <div class="item-children-instance-text-wrapper season-item">
+                    <h3 title="${child['title']}">${child['title']}</h3>
+                    <h3 class="text-muted">${child['year']}</h3>
+                </div>
+            </a>
+        </li>
+        % endfor
+    </ul>
+</div>
+% endif
+% if 'season' in data['results_list'] and data['results_list']['season']:
+<div class="item-children-wrapper">
+    <div class="item-children-section-title">
+        <h4>Seasons</h4>
+    </div>
+    <ul class="item-children-instance list-unstyled">
+        % for child in data['results_list']['season']:
+        <li>
+            <a href="info?item_id=${child['rating_key']}" id="${child['rating_key']}">
+                <div class="item-children-poster">
+                    <div class="item-children-poster-face season-poster" style="background-image: url(pms_image_proxy?img=${child['thumb']}&width=300&height=450);"></div>
+                </div>
+                <div class="item-children-instance-text-wrapper season-item">
+                    <h3 title="${child['parent_title']}">${child['parent_title']}</h3>
+                    <h3 class="text-muted">S${child['index']}</h3>
+                </div>
+            </a>
+        </li>
+        % endfor
+    </ul>
+</div>
+% endif
+% if 'episode' in data['results_list'] and data['results_list']['episode']:
+<div class="item-children-wrapper">
+    <div class="item-children-section-title">
+        <h4>Episodes</h4>
+    </div>
+    <ul class="item-children-instance list-unstyled">
+        % for child in data['results_list']['episode']:
+        <li>
+            <a href="info?item_id=${child['rating_key']}" id="${child['rating_key']}">
+                <div class="item-children-poster">
+                    <div class="item-children-poster-face episode-poster" style="background-image: url(pms_image_proxy?img=${child['thumb']}&width=300&height=450);"></div>
+                </div>
+                <div class="item-children-instance-text-wrapper episode-item">
+                    <h3 title="${child['grandparent_title']}">${child['grandparent_title']}</h3>
+                    <h3 title="${child['title']}">${child['title']}</h3>
+                    <h3 class="text-muted">S${child['parent_index']} &middot; E${child['index']}</h3>
+                </div>
+            </a>
+        </li>
+        % endfor
+    </ul>
+</div>
+% endif
+% if 'artist' in data['results_list'] and data['results_list']['artist']:
+<div class="item-children-wrapper">
+    <div class="item-children-section-title">
+        <h4>Artists</h4>
+    </div>
+    <ul class="item-children-instance list-unstyled">
+        % for child in data['results_list']['artist']:
+        <li>
+            <a href="info?item_id=${child['rating_key']}" id="${child['rating_key']}">
+                <div class="item-children-poster">
+                    <div class="item-children-poster-face album-poster" style="background-image: url(pms_image_proxy?img=${child['thumb']}&width=300&height=300);"></div>
+                </div>
+                <div class="item-children-instance-text-wrapper album-item">
+                    <h3 title="${child['title']}">${child['title']}</h3>
+                </div>
+            </a>
+        </li>
+        % endfor
+    </ul>
+</div>
+% endif
+% if 'album' in data['results_list'] and data['results_list']['album']:
+<div class="item-children-wrapper">
+    <div class="item-children-section-title">
+        <h4>Albums</h4>
+    </div>
+    <ul class="item-children-instance list-unstyled">
+        % for child in data['results_list']['album']:
+        <li>
+            <a href="info?item_id=${child['rating_key']}" id="${child['rating_key']}">
+                <div class="item-children-poster">
+                    <div class="item-children-poster-face album-poster" style="background-image: url(pms_image_proxy?img=${child['thumb']}&width=300&height=300);"></div>
+                </div>
+                <div class="item-children-instance-text-wrapper album-item">
+                    <h3 title="${child['parent_title']}">${child['parent_title']}</h3>
+                    <h3 title="${child['title']}">${child['title']}</h3>
+                </div>
+            </a>
+        </li>
+        % endfor
+    </ul>
+</div>
+% endif
+% if 'track' in data['results_list'] and data['results_list']['track']:
+<div class="item-children-wrapper">
+    <div class="item-children-section-title">
+        <h4>Tracks</h4>
+    </div>
+    <ul class="item-children-instance list-unstyled">
+        % for child in data['results_list']['track']:
+        <li>
+            <a href="info?item_id=${child['rating_key']}" id="${child['rating_key']}">
+                <div class="item-children-poster">
+                    <div class="item-children-poster-face album-poster" style="background-image: url(pms_image_proxy?img=${child['parent_thumb']}&width=300&height=300);">
+                        <div class="item-children-card-overlay">
+                            <div class="item-children-overlay-text">
+                                Track ${child['index']}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="item-children-instance-text-wrapper album-item">
+                    <h3 title="${child['grandparent_title']}">${child['grandparent_title']}</h3>
+                    <h3 title="${child['title']}">${child['title']}</h3>
+                    <h3 title="${child['parent_title']}" class="text-muted">${child['parent_title']}</h3>
+                </div>
+            </a>
+        </li>
+        % endfor
+    </ul>
+</div>
+% endif
+% else:
+<div class="item-children-wrapper">
+    No search results found.
+</div>
+% endif
+% endif
+

data/interfaces/default/search.html

@@ -0,0 +1,41 @@
+<%inherit file="base.html"/>
+
+<%def name="headIncludes()">
+</%def>
+
+<%def name="headerIncludes()">
+</%def>
+
+<%def name="body()">
+<div class='container-fluid'>
+    <div class='table-card-header'>
+        <div class="header-bar">
+            <span><i class="fa fa-search"></i> Search Results 
+            % if query:
+            for <strong>${query}</strong>
+            % endif
+            </span>
+        </div>
+    </div>
+    <div class='table-card-back'>
+        <div id="search-results-list"><i class="fa fa-refresh fa-spin"></i>&nbsp; Loading search results...</div>
+    </div>
+</div>
+</%def>
+
+<%def name="javascriptIncludes()">
+<script>
+    $('#search_button').removeClass('btn-inactive');
+    $('#search_query').val('${query}').css({ right: '0', width: '250px' }).addClass('active');
+
+    $.ajax({
+        url: 'get_search_results_children',
+        type: "GET",
+        async: true,
+        data: {'query': "${query}"},
+        complete: function (xhr, status) {
+            $("#search-results-list").html(xhr.responseText);
+        }
+    });
+</script>
+</%def>