diff --git a/dashboard-ui/css/remotecontrol.css b/dashboard-ui/css/remotecontrol.css new file mode 100644 index 0000000000..524ff84329 --- /dev/null +++ b/dashboard-ui/css/remotecontrol.css @@ -0,0 +1,95 @@ +#remoteControlFlyout { + width: 300px; + min-height: 400px; +} + +.playMenuOptions { + max-height: 200px; + overflow-y: auto; + border: 1px solid #aaa; +} + +.tblRemoteControl { + width: 100%; + border-spacing: 0; + border-collapse: collapse; +} + + .tblRemoteControl tbody tr:hover { + background: #ddd; + } + + .tblRemoteControl td { + padding: 2px 5px; + border-top: 1px solid #ccc; + text-align: left; + } + + .tblRemoteControl th { + padding: 2px 5px; + text-align: left; + } + + .tblRemoteControl th:first-child, .tblRemoteControl td:first-child { + padding-left: 0; + padding-right: 0; + } + +.tblRemoteControlNoHeader tr:first-child td { + border-top: 0; +} + +.tdSelectPlayTime, .tdSelectItem { + vertical-align: middle!important; + width: 30px; +} + +.tdRemoteControlImage { + width: 100px; +} + +.tblRemoteControl img { + height: 50px; +} + +@media all and (max-width: 400px) { + .nowPlayingCell { + display: none; + } +} + +@media all and (min-height: 500px) { + #remoteControlFlyout { + min-height: 450px; + } +} + +@media all and (min-height: 600px) { + #remoteControlFlyout { + min-height: 500px; + } +} + +@media all and (min-height: 800px) { + .playMenuOptions { + max-height: 300px; + } +} + +@media all and (min-width: 500px) { + #remoteControlFlyout { + width: 450px; + } +} + +@media all and (min-width: 600px) { + #remoteControlFlyout { + width: 550px; + } +} + +@media all and (min-width: 700px) { + #remoteControlFlyout { + width: 650px; + } +} diff --git a/dashboard-ui/scripts/Itemdetailpage.js b/dashboard-ui/scripts/Itemdetailpage.js index 2c19c85239..6b7f4d4a59 100644 --- a/dashboard-ui/scripts/Itemdetailpage.js +++ b/dashboard-ui/scripts/Itemdetailpage.js @@ -866,7 +866,15 @@ $('#btnRemote', page).on('click', function () { - RemoteControl.showMenu(page, currentItem); + RemoteControl.showMenu({ + + item: currentItem, + context: getContext(currentItem), + + themeSongs: $('#themeSongsCollapsible:visible', page).length > 0, + + themeVideos: $('#themeVideosCollapsible:visible', page).length > 0 + }); }); }).on('pageshow', "#itemDetailPage", function () { diff --git a/dashboard-ui/scripts/itembynamedetailpage.js b/dashboard-ui/scripts/itembynamedetailpage.js index 4869388769..4efb475087 100644 --- a/dashboard-ui/scripts/itembynamedetailpage.js +++ b/dashboard-ui/scripts/itembynamedetailpage.js @@ -470,7 +470,7 @@ $('#btnRemote', page).on('click', function () { - RemoteControl.showMenu(page, currentItem, getParameterByName('context') || ''); + RemoteControl.showMenu({ item: currentItem, context: getParameterByName('context') || '' }); }); }).on('pageshow', "#itemByNameDetailPage", function () { diff --git a/dashboard-ui/scripts/remotecontrol.js b/dashboard-ui/scripts/remotecontrol.js index 7291818a02..c040f8d527 100644 --- a/dashboard-ui/scripts/remotecontrol.js +++ b/dashboard-ui/scripts/remotecontrol.js @@ -1,23 +1,42 @@ (function (window, document, $) { - function showMenu(page, item, context, sessionsPromise, usersPromise) { + function showMenu(options, sessionsPromise, usersPromise) { + + var playFromRendered; + var trailersRendered; + var specialFeaturesRendered; + var themeVideosRendered; + var themeSongsRendered; + + var item = options.item; var html = '