diff --git a/dashboard-ui/css/mediaplayer-video.css b/dashboard-ui/css/mediaplayer-video.css index 4d57cad8ee..254ec63cab 100644 --- a/dashboard-ui/css/mediaplayer-video.css +++ b/dashboard-ui/css/mediaplayer-video.css @@ -167,6 +167,10 @@ overflow-x: auto; } +.tabScenes, .tabCast { + display: flex; +} + #videoPlayer .nowPlayingText { font-weight: normal; margin: 0 0 0 1em; diff --git a/dashboard-ui/css/nowplayingbar.css b/dashboard-ui/css/nowplayingbar.css index 150d755261..cd3069903d 100644 --- a/dashboard-ui/css/nowplayingbar.css +++ b/dashboard-ui/css/nowplayingbar.css @@ -11,11 +11,6 @@ max-width: 130px; } -.mediaButton.infoButton { - width: 34px; - height: 34px; -} - .mediaButton.active { color: #52B54B; } diff --git a/dashboard-ui/scripts/mediaplayer-video.js b/dashboard-ui/scripts/mediaplayer-video.js index 477e8a803b..04010e67b1 100644 --- a/dashboard-ui/scripts/mediaplayer-video.js +++ b/dashboard-ui/scripts/mediaplayer-video.js @@ -413,7 +413,24 @@ var elem = mediaControls.querySelector('.nowPlayingTabs'); elem.innerHTML = getNowPlayingTabsHtml(item.CurrentProgram || item); - ImageLoader.lazyChildren(elem); + + var tabCast = elem.querySelector('.tabCast'); + if (tabCast) { + require(['peoplecardbuilder'], function (peoplecardbuilder) { + + peoplecardbuilder.buildPeopleCards((item.CurrentProgram || item).People || [], { + itemsContainer: tabCast, + coverImage: true, + serverId: ApiClient.serverId(), + width: 160, + shape: 'portrait' + }); + ImageLoader.lazyChildren(elem); + }); + } + else { + ImageLoader.lazyChildren(elem); + } function onTabButtonClick() { if (!this.classList.contains('selectedNowPlayingTabButton')) { @@ -540,55 +557,6 @@ if (item.People && item.People.length) { html += '
'; }