Add Live TV metadata to activity card

data/interfaces/default/current_activity_instance.html

@@ -96,7 +96,13 @@ DOCUMENTATION :: END
                 <div id="poster-${sk}-bg" class="dashboard-activity-poster" style="background-image: url(pms_image_proxy?img=${data['parent_thumb']}&width=300&height=300&opacity=60&background=282828&blur=3&fallback=cover&refresh=true);"></div>
                 % endif
                 % if data['live'] == 1:
+                    % if data['grandparent_thumb'].startswith('http'):
+                    <div id="poster-${sk}" class="dashboard-activity-poster" style="background-image: url(${data['grandparent_thumb']});"></div>
+                    % elif data['grandparent_thumb']:
+                    <div id="poster-${sk}" class="dashboard-activity-poster" style="background-image: url(pms_image_proxy?img=${data['grandparent_thumb']}&width=300&height=450&fallback=poster&refresh=true);"></div>
+                    % else:
                     <div id="poster-${sk}" class="dashboard-activity-poster" style="background-image: url(images/poster-live.png);"></div>
+                    % endif
                 % elif data['channel_stream'] == 0:
                     % if data['media_type'] == 'movie':
                     <a id="poster-url-${sk}" href="${href}" title="${data['title']}">
@@ -377,7 +383,7 @@ DOCUMENTATION :: END
         <div class="dashboard-activity-progress">
             <div class="dashboard-activity-progress-bar">
                 % if data['live'] == 1:
-                <div id="progress-bar-${sk}" class="progress-bar" style="width: 100%" data-toggle="tooltip" title="Stream Progress Live">Live</div>
+                <div id="progress-bar-${sk}" class="progress-bar" style="width: 100%" data-state="live" data-toggle="tooltip" title="Stream Progress Live">Live</div>
                 % else:
                 <div id="buffer-bar-${sk}" class="buffer-bar" style="width: ${data['transcode_progress']}%" data-toggle="tooltip" title="Transcoder Progress ${data['transcode_progress']}%">${data['transcode_progress']}%</div>
                 <div id="progress-bar-${sk}" class="progress-bar" style="width: ${data['progress_percent']}%" data-last_view_offset="${data['view_offset']}" data-view_offset="${data['view_offset']}" data-stream_duration="${data['stream_duration']}" data-state="${data['state']}" data-toggle="tooltip" title="Stream Progress ${data['progress_percent']}%">${data['progress_percent']}%</div>
@@ -400,7 +406,16 @@ DOCUMENTATION :: END
                 % endif
             </div>
             <div class="dashboard-activity-metadata-title">
-                % if data['channel_stream'] == 0:
+                % if data['live'] == 1:
+                    % if data['media_type'] == 'movie':
+                    <span title="${data['title']}">${data['title']}</span>
+                    % elif data['media_type'] == 'episode':
+                    <span title="${data['grandparent_title']}">${data['grandparent_title']}</span>
+                    - <span title="${data['title']}">${data['title']}</span>
+                    % else:
+                    <span title="${data['title']}">${data['title']}</span>
+                    % endif
+                % elif data['channel_stream'] == 0:
                     % if data['media_type'] == 'movie':
                     <a href="${href}" title="${data['title']}">${data['title']}</a>
                     % elif data['media_type'] == 'episode':
@@ -425,7 +440,7 @@ DOCUMENTATION :: END
             </div>
         </div>
         <div class="dashboard-activity-metadata-subtitle-container">
-            % if data['live'] == 1:
+            % if data['live'] == 1 and data['media_type'] == 'clip':
             <div id="media-type-${sk}" class="dashboard-activity-metadata-media_type-icon" title="Plex Live TV">
                 <i class="fa fa-fw fa-television"></i>&nbsp;
             </div>
@@ -449,8 +464,20 @@ DOCUMENTATION :: END
             </div>
             % endif
             <div class="dashboard-activity-metadata-subtitle">
-                % if data['live'] == 1:
+                % if data['live']:
+                    % if data['media_type'] == 'movie':
+                    <span title="${data['year']}" class="sub-heading">${data['year']}</span>
+                    % elif data['media_type'] == 'episode':
+                    <span title="Season ${data['parent_media_index']}" class="sub-heading">S${data['parent_media_index']}</span>
+                    &middot; <span title="Episode ${data['media_index']}" class="sub-heading">E${data['media_index']}</span>
+                    % else:
                     <span title="Plex Live TV" class="sub-heading">Plex Live TV</span>
+                    % endif
+                    % if data['channel_identifier']:
+                    <span class="thumb-tooltip" data-toggle="popover" data-img="${data['channel_thumb']}" data-height="40" data-width="40">
+                        <span title="${data['channel_call_sign']} ${data['channel_identifier']}" class="sub-heading">(${data['channel_call_sign']} ${data['channel_identifier']})</span>
+                    </span>
+                    % endif
                 % elif data['channel_stream'] == 0:
                     % if data['media_type'] == 'movie':
                     <span title="${data['year']}" class="sub-heading">${data['year']}</span>

data/interfaces/default/index.html

@@ -543,10 +543,12 @@
                         // Update the progress bars, percent - 3 because of 3px padding-right
                         $('#buffer-bar-' + key).width(parseInt(s.transcode_progress) - 3 + '%').html(s.transcode_progress + '%')
                             .attr('data-original-title', 'Transcoder Progress ' + s.transcode_progress + '%');
-                        var progress_bar = $('#progress-bar-' + key);
-                        progress_bar.data('state', s.state);
-                        if (progress_bar.data('last_view_offset') !== s.view_offset) {
-                            progress_bar.data('last_view_offset', s.view_offset).data('view_offset', s.view_offset);
+                        if (s.live !== 1) {
+                            var progress_bar = $('#progress-bar-' + key);
+                            progress_bar.data('state', s.state);
+                            if (progress_bar.data('last_view_offset') !== s.view_offset) {
+                                progress_bar.data('last_view_offset', s.view_offset).data('view_offset', s.view_offset);
+                            }
                         }
 
                         // Add temporary class so we know which instances are still active
@@ -593,6 +595,17 @@
 
                 $('#activity-instance-' + session_key + ' .dashboard-activity-info-scroller').scrollbar();
                 $('#activity-instance-' + session_key + ' [data-toggle=tooltip]').tooltip({ container: 'body', placement: 'right', delay: 50 });
+                $('#activity-instance-' + session_key + ' [data-toggle=popover]').popover({
+                    html: true,
+                    container: 'body',
+                    trigger: 'hover',
+                    placement: 'right',
+                    delay: 50,
+                    template: '<div class="popover history-thumbnail-popover" role="tooltip"><div class="arrow" style="top: 50%;"></div><div class="popover-content"></div></div>',
+                    content: function () {
+                        return '<div class="history-thumbnail" style="background-image: url(' + $(this).data('img') + '); height: ' + $(this).data('height') + 'px; width: ' + $(this).data('width') + 'px; padding: 3px;" />';
+                    }
+                });
                 $('#terminate-button-' + session_key).tooltip('destroy').tooltip({ container: 'body', placement: 'left', delay: 50 });
                 lockScroll('#activity-instance-' + session_key + ' .dashboard-activity-info-scroller');