first commit

videoosd/basetab.js

@@ -0,0 +1 @@
+define(["exports","./../modules/emby-apiclient/connectionmanager.js","./../modules/emby-apiclient/events.js"],function(_exports,_connectionmanager,_events){function BaseTab(view){this.view=view}Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0,BaseTab.prototype.loadTemplate=function(){return Promise.resolve()},BaseTab.prototype.onResume=function(options){var currentOptions,instance;return options.refresh||!(currentOptions=this.currentOptions)||options.displayItem===currentOptions.displayItem&&options.item===currentOptions.item||(options.refresh=!0),this.needsRefresh&&(options.refresh=!0),this.currentOptions=options,this.apiClient=_connectionmanager.default.getApiClient(options.item),this.paused=!1,this.templateLoaded?Promise.resolve():(instance=this).loadTemplate().then(function(){instance.templateLoaded=!0})},BaseTab.prototype.onPause=function(){this.paused=!0},BaseTab.prototype.onTimeUpdate=function(positionTicks,runtimeTicks){this.positionTicks=positionTicks},BaseTab.prototype.onItemUpdated=function(options){this.currentOptions=options,this.paused?this.needsRefresh=!0:this.refreshItem()},BaseTab.prototype.refreshItem=function(){this.needsRefresh=!1},BaseTab.prototype.closeTab=function(){_events.default.trigger(this,"closerequested")},BaseTab.prototype.destroy=function(){this.paused=null,this.view=null,this.currentOptions=null,this.apiClient=null,this.templateLoaded=null,this.positionTicks=null};_exports.default=BaseTab});

videoosd/chapters.js

@@ -0,0 +1 @@
+define(["exports","./../modules/listview/listview.js","./../modules/emby-elements/emby-scroller/emby-scroller.js","./../modules/emby-elements/emby-itemscontainer/emby-itemscontainer.js","./../modules/focusmanager.js"],function(_exports,_listview,_embyScroller,_embyItemscontainer,_focusmanager){function ChaptersRenderer(options){options=(this.options=options).parent,function(parent){parent.insertAdjacentHTML("afterbegin",'<div is="emby-scroller" class="flex flex-grow osdChapters-scroller osdChapers flex-direction-column hide osdContentSection osdContentSection-split osd-autofadesection padded-left padded-right" data-contentsection="chapters" data-mousewheel="true" data-horizontal="false" data-forcescrollbar="true" data-focusscroll="true"><div class="scrollSlider osdChapters-scrollSlider flex-grow flex-direction-column"><div is="emby-itemscontainer" class="flex-grow flex-direction-column vertical-list itemsContainer osdChaptersItemsContainer" data-virtualscrolllayout="vertical-grid"></div></div></div>'),parent.querySelector(".osdChapers")}(options),options=options.querySelector(".osdChaptersItemsContainer");options.fetchData=function(query){return this.getItemsInternal().then(function(items){var totalRecordCount=items.length;return{TotalRecordCount:totalRecordCount,Items:items}})}.bind(this),options.virtualChunkSize=30,options.getListOptions=function(items){return{renderer:_listview.default,options:{action:"seektoposition",playAction:"seektoposition",multiSelect:!1,contextMenu:!1,imagePlayButton:!0,mediaInfo:!1,enableSideMediaInfo:!1,enableUserDataButtons:!1,fields:["Name","ChapterTime"],moreButton:!1,highlight:!1,draggable:!1,draggableXActions:!1},virtualScrollLayout:"vertical-grid"}}.bind(this),this.itemsContainer=options,this.currentIndex=-1}Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0,ChaptersRenderer.prototype.getItemsInternal=function(){return Promise.resolve(this.currentChapters||[])},ChaptersRenderer.prototype.onPlaybackStopped=function(){},ChaptersRenderer.prototype.pause=function(){this.paused=!0,this.itemsContainer&&this.itemsContainer.pause&&this.itemsContainer.pause()},ChaptersRenderer.prototype.focus=function(){this.selectedElement&&_focusmanager.default.focus(this.selectedElement)},ChaptersRenderer.prototype.resume=function(options){this.paused=!1,this.itemsContainer.resume?this.itemsContainer.resume():this.itemsContainer.addEventListener("upgraded",function(e){e.target.resume(this)}.bind(options)),null!=this.currentTime&&this.onTimeUpdate(this.currentTime)},ChaptersRenderer.prototype.refreshEvents=function(events){this.itemsContainer.refreshItems()},ChaptersRenderer.prototype.updateItem=function(item,chapters){var changed=this.currentItem!==item;this.currentItem=item,this.currentChapters=chapters,changed&&this.itemsContainer.notifyRefreshNeeded(!0)},ChaptersRenderer.prototype.onTimeUpdate=function(positionTicks,runtimeTicks){this.currentTime=positionTicks,this.paused||this.itemsContainer},ChaptersRenderer.prototype.destroy=function(){var options=this.options;options&&(options=options.parent)&&(options.innerHTML="",options.classList.add("hide")),this.currentItem=null,this.currentChapters=null,this.currentTime=null,this.paused=null,this.options=null,this.itemsContainer=null,this.currentIndex=null,this.selectedElement=null};_exports.default=ChaptersRenderer});

videoosd/guidetab.js

@@ -0,0 +1 @@
+define(["exports","./basetab.js","./../modules/emby-elements/guide/guide.js"],function(_exports,_basetab,_guide){function GuideTab(view){_basetab.default.apply(this,arguments)}Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0,Object.assign(GuideTab.prototype,_basetab.default.prototype),GuideTab.prototype.onResume=function(options){var instance=this;return _basetab.default.prototype.onResume.apply(instance,arguments).then(function(){var hasFocus=instance.view.contains(document.activeElement),guideInstance=(guideInstance=instance.guideInstance)||(instance.guideInstance=new _guide.default({element:instance.view,serverId:instance.apiClient.serverId(),condensed:!0,dateButton:!1})),item=(options=options||{}).item||{};return options.scrollToChannelId="TvChannel"===item.Type?item.Id:null,options.focusOnScroll=hasFocus,options.scrollBehavior="instant",options.resetScroll=!0,guideInstance.resume(options)})},GuideTab.prototype.onPause=function(){_basetab.default.prototype.onPause.apply(this,arguments);var guideInstance=this.guideInstance;guideInstance&&guideInstance.pause()},GuideTab.prototype.destroy=function(){_basetab.default.prototype.destroy.apply(this,arguments);var guideInstance=this.guideInstance;guideInstance&&guideInstance.destroy(),this.guideInstance=null};_exports.default=GuideTab});

videoosd/lyrics.css

@@ -0,0 +1 @@
+:root{--lyrics-transform-origin:left center}.rtl:root{--lyrics-transform-origin:right center}.lyricsScroller{-webkit-mask-image:linear-gradient(to bottom,transparent 0%,black 5%,black 90%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0%,black 5%,black 90%,transparent 100%)}.osdLyricsItemsContainer{-webkit-padding-end:6ch!important;padding-inline-end:6ch!important}@media all and (orientation:landscape){.osdLyricsItemsContainer{-webkit-padding-start:0!important;padding-inline-start:0!important}}.lyricsItem{margin:.25em 0;padding:0;font-size:190%;font-weight:600;line-height:1.2;text-align:start}.lyricsItem .listItem-content{padding:.16em 1ch}.lyricsItem.listItem-focusscale:focus{-webkit-transform:none!important;transform:none!important;background:0 0!important}.lyricsItem .listItemBody{padding:0!important;min-height:initial!important;overflow:visible}.lyricsItem .listItemBodyText{white-space:normal!important;transition:-webkit-transform .5s ease-out;transition:transform .5s ease-out;-webkit-transform-origin:left center;transform-origin:left center;-webkit-transform-origin:var(--lyrics-transform-origin);transform-origin:var(--lyrics-transform-origin)}.lyricsItem-selected{color:inherit}.lyricsItem-selected .listItemBodyText{-webkit-transform:scale(1.06);transform:scale(1.06)}

videoosd/onnowtab.js

@@ -0,0 +1 @@
+define(["exports","./basetab.js","./../modules/cardbuilder/cardbuilder.js","./../modules/common/usersettings/usersettings.js","./../modules/common/globalize.js","./../modules/layoutmanager.js","./../modules/focusmanager.js","./../modules/common/inputmanager.js"],function(_exports,_basetab,_cardbuilder,_usersettings,_globalize,_layoutmanager,_focusmanager,_inputmanager){function fetchItems(query){var apiClient=this.apiClient;return query=Object.assign({UserId:apiClient.getCurrentUserId(),IsAiring:!0,ImageTypeLimit:1,EnableImageTypes:"Primary,Thumb,Backdrop",Fields:"ProgramPrimaryImageAspectRatio,PrimaryImageAspectRatio",EnableUserData:!1,SortBy:"ChannelNumber,SortName"},query),_usersettings.default.addLiveTvChannelSortingToQuery(query,_globalize.default),apiClient.getLiveTvChannels(query)}function OnNowTab(view){_basetab.default.apply(this,arguments)}Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0,Object.assign(OnNowTab.prototype,_basetab.default.prototype);var FocusScrollOffset="-padding-inline-start";function scrollToIndex(instance,index,focus,scrollBehavior){instance.itemsContainer.scrollToIndex(index,{offsetLeft:FocusScrollOffset,behavior:scrollBehavior},focus)}function triggerCommand(name,e){e={sourceElement:e.target,repeat:e.repeat,originalEvent:e};_inputmanager.default.trigger(name,e)}function onInputCommand(e){var detail=e.detail;switch(detail.command){case"channelup":triggerCommand("rtl"===document.dir?"left":"right",detail.originalEvent||e),e.preventDefault();break;case"channeldown":triggerCommand("rtl"===document.dir?"right":"left",detail.originalEvent||e),e.preventDefault()}}OnNowTab.prototype.loadTemplate=function(){var view=this.view;return view.innerHTML='\n                    <div is="emby-scroller" data-mousewheel="false" data-focusscroll="start" data-focusscrolloffset="'+FocusScrollOffset+'" class="padded-top-focusscale padded-bottom-focusscale">\n                        <div is="emby-itemscontainer" data-focusabletype="nearest" class="focusable focuscontainer-x scrollSlider itemsContainer videoosd-padded-left videoosd-padded-right" data-refreshinterval="300000" data-virtualscrolllayout="horizontal-grid"></div>\n                    </div>\n',this.itemsContainer=view.querySelector(".itemsContainer"),this.itemsContainer.fetchData=fetchItems.bind(this),this.itemsContainer.getListOptions=function(items){var forceBackdrop=!!_layoutmanager.default.tv;return{renderer:_cardbuilder.default,options:{preferThumb:forceBackdrop?null:"auto",inheritThumb:!1,shape:forceBackdrop?"backdrop":"auto",contextMenu:!1,multiSelect:!1,programsAsSeries:!1,showCurrentProgramImage:!0,defaultShape:"portrait",action:"play",cardClass:"videoOsd-itemstab-card videoOsd-itemstab-card-threeline",fields:["CurrentProgramName","CurrentProgramParentNameOrName","CurrentProgramTime"],allowBottomPadding:!1,defaultBackground:!0,textLinks:!1,enableFocusScaling:!1},virtualScrollLayout:"horizontal-grid"}}.bind(this),_inputmanager.default.on(this.itemsContainer,onInputCommand),Promise.resolve()},OnNowTab.prototype.scrollToCurrentItem=function(focus,scrollBehavior){this.paused||this.itemsContainer.contains(document.activeElement)||(focus?_focusmanager.default.focus(this.itemsContainer):function(instance,focus,scrollBehavior){var itemId,item=instance.item;item&&"TvChannel"===item.Type?(itemId=item.Id,-1!==(item=instance.itemsContainer.indexOfItemId(itemId))?scrollToIndex(instance,item,focus,scrollBehavior):fetchItems.call(instance,{Limit:0}).then(function(totalResult){totalResult.TotalRecordCount<=1?scrollToIndex(instance,0,focus,scrollBehavior):fetchItems.call(instance,{StartItemId:itemId,Limit:0}).then(function(result){result=result.TotalRecordCount?Math.max(totalResult.TotalRecordCount-result.TotalRecordCount,0):0;scrollToIndex(instance,result,focus,scrollBehavior)})})):scrollToIndex(instance,0,focus,scrollBehavior)}(this,focus,scrollBehavior))},OnNowTab.prototype.onResume=function(options){var instance=this;return _basetab.default.prototype.onResume.apply(this,arguments).then(function(){var optionsWithoutRefresh=Object.assign(Object.assign({},options),{refresh:!1}),hasFocus=instance.itemsContainer.contains(document.activeElement);return instance.itemsContainer.resume(optionsWithoutRefresh).then(function(){options.refresh?instance.refreshItem(options):instance.scrollToCurrentItem(hasFocus,"instant")})})},OnNowTab.prototype.refreshItem=function(options){_basetab.default.prototype.refreshItem.apply(this,arguments);var instance=this,hasFocus=instance.itemsContainer.contains(document.activeElement);return instance.itemsContainer.refreshItems(options).then(function(){instance.scrollToCurrentItem(hasFocus)})},OnNowTab.prototype.onPause=function(){_basetab.default.prototype.onPause.apply(this,arguments),this.itemsContainer.pause()},OnNowTab.prototype.destroy=function(){_basetab.default.prototype.destroy.apply(this,arguments),this.itemsContainer=null,this.item=null};_exports.default=OnNowTab});

videoosd/peopletab.js

@@ -0,0 +1 @@
+define(["exports","./basetab.js","./../modules/cardbuilder/cardbuilder.js","./../modules/emby-apiclient/connectionmanager.js","./../modules/common/itemmanager/itemmanager.js","./../modules/common/globalize.js","./../modules/common/appsettings.js"],function(_exports,_basetab,_cardbuilder,_connectionmanager,_itemmanager,_globalize,_appsettings){function onCardAction(e){var e=e.detail.item,apiClient=_connectionmanager.default.getApiClient(e);apiClient.getItem(apiClient.getCurrentUserId(),e.Id).then(function(item){return options={preFormattedText:item.Overview||"",confirmButton:!1,title:_itemmanager.default.getDisplayName(item),centerText:!1,confirmText:_globalize.default.translate("Close"),item:item},Emby.importModule("./modules/common/dialogs/alert.js").then(function(alert){return alert(options)});var options})}function PeopleTab(view){_basetab.default.apply(this,arguments)}Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0,Object.assign(PeopleTab.prototype,_basetab.default.prototype),PeopleTab.prototype.loadTemplate=function(){var view=this.view;return view.innerHTML='\n                    <div is="emby-scroller" data-mousewheel="false" data-focusscroll="true" class="padded-top-focusscale padded-bottom-focusscale">\n                        <div is="emby-itemscontainer" data-focusabletype="nearest" class="focusable focuscontainer-x scrollSlider itemsContainer videoosd-padded-left videoosd-padded-right" data-virtualscrolllayout="horizontal-grid"></div>\n                    </div>\n',this.itemsContainer=view.querySelector(".itemsContainer"),this.itemsContainer.fetchData=function(query){var item=this.currentOptions.displayItem,serverId=item.ServerId,totalRecordCount=(item=(item.People||[]).map(function(p){return(p=Object.assign({},p)).ServerId=serverId,"Person"!==p.Type&&(p.PersonType=p.Type,p.Type="Person"),p})).length;return query&&(item=item.slice(query.StartIndex||0),query.Limit)&&item.length>query.Limit&&(item.length=query.Limit),Promise.resolve({Items:item,TotalRecordCount:totalRecordCount})}.bind(this),this.itemsContainer.getListOptions=function(items){return{renderer:_cardbuilder.default,options:{shape:"portrait",cardLayout:!1,centerText:!0,sideFooter:!1,fields:["Name","PersonRole"],cardFooterAside:!1,showPersonRoleOrType:!0,multiSelect:!1,coverImage:!0,draggable:!1,contextMenu:!1,playedButton:!1,ratingButton:!1,cardClass:"videoOsd-itemstab-card videoOsd-itemstab-card-twoline",action:_appsettings.default.enableVideoUnderUI()?null:"custom",enableUserData:!1,allowBottomPadding:!1,textLinks:!1,imageClass:null,enableFocusScaling:!1,playQueueIndicator:!1},virtualScrollLayout:"horizontal-grid"}}.bind(this),this.itemsContainer.addEventListener("action-null",onCardAction.bind(this)),Promise.resolve()},PeopleTab.prototype.onResume=function(options){var instance=this;return _basetab.default.prototype.onResume.apply(this,arguments).then(function(){var optionsWithoutRefresh=Object.assign(Object.assign({},options),{refresh:!1});return instance.itemsContainer.resume(optionsWithoutRefresh).then(function(){options.refresh&&instance.refreshItem(options)})})},PeopleTab.prototype.refreshItem=function(options){_basetab.default.prototype.refreshItem.apply(this,arguments),this.itemsContainer.refreshItems(options)},PeopleTab.prototype.onPause=function(){_basetab.default.prototype.onPause.apply(this,arguments),this.itemsContainer.pause()},PeopleTab.prototype.destroy=function(){_basetab.default.prototype.destroy.apply(this,arguments),this.itemsContainer=null};_exports.default=PeopleTab});

videoosd/playqueue.js

@@ -0,0 +1 @@
+define(["exports","./../modules/common/playback/playbackmanager.js","./../modules/listview/listview.js","./../modules/emby-elements/emby-scroller/emby-scroller.js","./../modules/emby-elements/emby-button/paper-icon-button-light.js","./../modules/emby-elements/emby-itemscontainer/emby-itemscontainer.js"],function(_exports,_playbackmanager,_listview,_embyScroller,_paperIconButtonLight,_embyItemscontainer){function OsdPlayQueue(options){(this.options=options).parent=function(parent){return parent.insertAdjacentHTML("afterbegin",'<div is="emby-scroller" class="osdPlayQueue flex flex-grow osdPlaylist-scroller osdPlaylist flex-direction-column hide osdContentSection osdContentSection-split osd-autofadesection padded-left padded-right" data-contentsection="playqueue" data-mousewheel="true" data-horizontal="false" data-forcescrollbar="true" data-focusscroll="true"><div class="scrollSlider osdPlaylist-scrollSlider flex-grow flex-direction-column"><div is="emby-itemscontainer" class="flex-grow flex-direction-column vertical-list itemsContainer osdPlaylistItemsContainer" data-skipplaycommands="true" data-dragreorder="true" data-virtualscrolllayout="vertical-grid"></div></div></div>'),parent.querySelector(".osdPlayQueue")}(options.parent);var parent=options.parent;this.playlistElement=options.parent,this.itemsContainer=parent.querySelector(".itemsContainer"),this.itemsContainer.fetchData=function(query){var player=this.currentPlayer;return this.empty||!player?Promise.resolve({Items:[],TotalRecordCount:0}):_playbackmanager.default.getPlaylist(query||{},player)}.bind(this),this.itemsContainer.afterRefresh=function(){this.setScrollToTrack=!0,this.scrollToTrack&&(this.scrollToTrack=null,this.scrollCurrentTrackToTop())}.bind(this),this.itemsContainer.getListOptions=function(items){return{renderer:_listview.default,options:{smallIcon:!0,action:"setplaylistindex",playAction:"setplaylistindex",fields:["Name","ParentName"],enableUserDataButtons:!1,moreButton:!1,removeFromPlayQueueButton:!0,dragReorder:!0,autoHideBorderOnTouch:!0,hideMoreButtonOnTouch:!0,autoMoveParentName:!0,buttonCommands:["removefromplayqueue"]},virtualScrollLayout:"vertical-list"}}.bind(this),this.itemsContainer.scrollResizeObserver=!0,this.itemsContainer.addEventListener("itemdrop",function(e){e.preventDefault();var newIndex=e.detail.newIndex,e=e.detail.items[0].PlaylistItemId;_playbackmanager.default.movePlaylistItem(e,newIndex,this.currentPlayer)}.bind(this))}Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0,OsdPlayQueue.prototype.scrollCurrentTrackToTop=function(){var itemsContainer,index=_playbackmanager.default.getCurrentPlaylistIndex(this.currentPlayer);-1!==index&&(itemsContainer=this.playlistElement.querySelector(".itemsContainer"))&&itemsContainer.scrollToIndex(index,{behavior:"instant",skipWhenVisibleY:!0},!1)},OsdPlayQueue.prototype.setPausedState=function(paused){},OsdPlayQueue.prototype.updatePlaylist=function(player,playlistItemId,playlistIndex,playlistLength){this.currentPlayer=player,!1!==this.setScrollToTrack&&(this.scrollToTrack=!0),this.empty=!playlistLength,this.refreshItems()},OsdPlayQueue.prototype.onPlaybackStopped=function(){this.empty=!0,this.refreshItems()},OsdPlayQueue.prototype.refreshItems=function(){var itemsContainer=this.itemsContainer;if(itemsContainer)return itemsContainer.waitForCustomElementUpgrade().then(function(){itemsContainer.refreshItems()})},OsdPlayQueue.prototype.onPlaylistItemMoved=function(player,e,info){this.itemsContainer.refreshItems()},OsdPlayQueue.prototype.onPlaylistItemRemoved=function(player,e,info){this.itemsContainer.refreshItems()},OsdPlayQueue.prototype.pause=function(){this.paused=!0,this.itemsContainer.pause&&this.itemsContainer.pause()},OsdPlayQueue.prototype.resume=function(options){this.paused=!1;var itemsContainer=this.itemsContainer;return itemsContainer.waitForCustomElementUpgrade().then(function(){itemsContainer.resume(options)})},OsdPlayQueue.prototype.destroy=function(){var options=this.options;options&&(options=options.parent)&&options.remove(),this.options=null,this.currentPlayer=null,this.itemsContainer=null,this.playlistElement=null};_exports.default=OsdPlayQueue});

videoosd/playqueuetab.js

@@ -0,0 +1 @@
+define(["exports","./basetab.js","./../modules/cardbuilder/cardbuilder.js","./../modules/layoutmanager.js","./../modules/common/playback/playbackmanager.js"],function(_exports,_basetab,_cardbuilder,_layoutmanager,_playbackmanager){function PlayQueueTab(view){_basetab.default.apply(this,arguments)}Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0,Object.assign(PlayQueueTab.prototype,_basetab.default.prototype);var FocusScrollOffset="-padding-inline-start";function scrollToCurrent(instance,focus,scrollBehavior){var _instance$currentOpti=null==(_instance$currentOpti=instance.currentOptions)?void 0:_instance$currentOpti.currentPlayer;!function(instance,index,focus,scrollBehavior){instance.itemsContainer.scrollToIndex(index,{offsetLeft:FocusScrollOffset,behavior:scrollBehavior},focus)}(instance,_playbackmanager.default.getCurrentPlaylistIndex(_instance$currentOpti),focus,scrollBehavior)}PlayQueueTab.prototype.loadTemplate=function(){var view=this.view;return view.innerHTML='\n                    <div is="emby-scroller" data-mousewheel="false" data-focusscroll="start" data-focusscrolloffset="'+FocusScrollOffset+'" class="padded-top-focusscale padded-bottom-focusscale">\n                        <div is="emby-itemscontainer" data-focusabletype="nearest" class="focusable focuscontainer-x scrollSlider itemsContainer videoosd-padded-left videoosd-padded-right" data-refreshinterval="300000" data-virtualscrolllayout="horizontal-grid"></div>\n                    </div>\n',this.itemsContainer=view.querySelector(".itemsContainer"),this.itemsContainer.fetchData=function(query){var _this$currentOptions=null==(_this$currentOptions=this.currentOptions)?void 0:_this$currentOptions.currentPlayer;return _this$currentOptions?_playbackmanager.default.getPlaylist(query||{},_this$currentOptions):Promise.resolve({Items:[],TotalRecordCount:0})}.bind(this),this.itemsContainer.getListOptions=function(items){var forceBackdrop=!!_layoutmanager.default.tv;return{renderer:_cardbuilder.default,options:{preferThumb:forceBackdrop?null:"auto",inheritThumb:!1,shape:forceBackdrop?"backdrop":"auto",contextMenu:!1,multiSelect:!1,action:"setplaylistindex",playAction:"setplaylistindex",cardClass:"videoOsd-itemstab-card videoOsd-itemstab-card-threeline",fields:["ParentName","Name"],allowBottomPadding:!1,defaultBackground:!0,textLinks:!1,enableFocusScaling:!1},virtualScrollLayout:"horizontal-grid"}}.bind(this),Promise.resolve()},PlayQueueTab.prototype.scrollToCurrentItem=function(focus,scrollBehavior){this.paused||this.itemsContainer.contains(document.activeElement)||scrollToCurrent(this,focus,scrollBehavior)},PlayQueueTab.prototype.onResume=function(options){var instance=this;return _basetab.default.prototype.onResume.apply(this,arguments).then(function(){var optionsWithoutRefresh=Object.assign(Object.assign({},options),{refresh:!1}),hasFocus=instance.itemsContainer.contains(document.activeElement);return instance.itemsContainer.resume(optionsWithoutRefresh).then(function(){options.refresh?instance.refreshItem(options):instance.scrollToCurrentItem(hasFocus,"instant")})})},PlayQueueTab.prototype.refreshItem=function(options){_basetab.default.prototype.refreshItem.apply(this,arguments);var instance=this,hasFocus=instance.itemsContainer.contains(document.activeElement);return instance.itemsContainer.refreshItems(options).then(function(){instance.scrollToCurrentItem(hasFocus)})},PlayQueueTab.prototype.onPause=function(){_basetab.default.prototype.onPause.apply(this,arguments),this.itemsContainer.pause()},PlayQueueTab.prototype.destroy=function(){_basetab.default.prototype.destroy.apply(this,arguments),this.itemsContainer=null};_exports.default=PlayQueueTab});

videoosd/tvplayqueue.css

@@ -0,0 +1 @@
+.tvPlayQueueScroller{padding-top:3em!important;margin-top:-3em!important}.tvPlayQueueCard{width:30vw!important}.tvPlayQueueCard.squareCard{width:26vw!important}.tvPlayQueueCard.portraitCard{width:20vw!important}.activePlaylistCardBox:not(.paused) .cardText:last-child::before{background-size:contain;background-image:url("ani_equalizer_white.gif");background-position:center bottom;background-repeat:no-repeat;position:absolute;content:' ';z-index:999999999999;height:1.7em;width:1.7em;-webkit-margin-start:-1.9em;margin-inline-start:-1.9em;margin-top:-.4em}

videoosd/tvplayqueue.js

@@ -0,0 +1 @@
+define(["exports","./../modules/common/playback/playbackmanager.js","./../modules/cardbuilder/cardbuilder.js"],function(_exports,_playbackmanager,_cardbuilder){function scrollOrFocus(instance,focus){var playlistIndex=_playbackmanager.default.getCurrentPlaylistIndex(instance.currentPlayer);instance.itemsContainer.scrollToIndex(playlistIndex=-1===playlistIndex?0:playlistIndex,{},focus)}function OsdPlayQueue(options){(this.options=options).parent=function(parent){return parent.insertAdjacentHTML("afterbegin",'<div is="emby-scroller" class="osdPlayQueue padded-left padded-right flex flex-grow hide osdContentSection padded-top-focusscale padded-bottom-focusscale tvPlayQueueScroller" data-mousewheel="false" data-focusscroll="center" data-contentsection="playqueue"><div is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer focusable" data-skipplaycommands="true" data-virtualscrolllayout="horizontal-grid"></div></div>'),parent.querySelector(".tvPlayQueueScroller")}(options.parent);options=options.parent;this.itemsContainer=options.querySelector(".itemsContainer"),this.itemsContainer.fetchData=function(query){var player=this.currentPlayer;return this.empty||!player?Promise.resolve({Items:[],TotalRecordCount:0}):_playbackmanager.default.getPlaylist(query||{},player)}.bind(this),this.itemsContainer.getListOptions=function(items){return{renderer:_cardbuilder.default,options:{action:"setplaylistindex",playAction:"setplaylistindex",shape:"autooverflow",fields:["ParentName","Name","ProductionYear"],lines:2,centerText:!0,cardLayout:!1,cardClass:"tvPlayQueueCard",playQueueIndicator:!0,allowBottomPadding:!1},virtualScrollLayout:"horizontal-grid"}}.bind(this),this.itemsContainer.afterRefresh=function(){var focus=this.itemsContainer.contains(document.activeElement);scrollOrFocus(this,focus)}.bind(this),this.itemsContainer.focus=function(){scrollOrFocus(this,!0)}.bind(this),this.itemsContainer.scrollResizeObserver=!0}Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0,require(["css!videoosd/tvplayqueue.css"]),OsdPlayQueue.prototype.setPausedState=function(paused){var elem=this.options.parent.querySelector(".activePlaylistCardBox");elem&&(paused?elem.classList.add("paused"):elem.classList.remove("paused"))},OsdPlayQueue.prototype.updatePlaylist=function(player,playlistItemId,playlistIndex,playlistLength){this.currentPlayer=player,this.empty=!playlistLength,this.refreshItems()},OsdPlayQueue.prototype.onPlaybackStopped=function(){this.empty=!0,this.refreshItems()},OsdPlayQueue.prototype.refreshItems=function(){var itemsContainer=this.itemsContainer;if(itemsContainer)return itemsContainer.waitForCustomElementUpgrade().then(function(){itemsContainer.refreshItems()})},OsdPlayQueue.prototype.onPlaylistItemMoved=function(player,e,info){this.itemsContainer.refreshItems()},OsdPlayQueue.prototype.onPlaylistItemRemoved=function(player,e,info){this.itemsContainer.refreshItems()},OsdPlayQueue.prototype.pause=function(){this.paused=!0,this.itemsContainer.pause&&this.itemsContainer.pause()},OsdPlayQueue.prototype.resume=function(options){this.paused=!1;var itemsContainer=this.itemsContainer;return itemsContainer.waitForCustomElementUpgrade().then(function(){itemsContainer.resume(options)})},OsdPlayQueue.prototype.destroy=function(){var options=this.options;options&&(options=options.parent)&&options.remove(),this.options=null,this.currentPlayer=null,this.itemsContainer=null};_exports.default=OsdPlayQueue});

videoosd/videoosd.html

@@ -0,0 +1,252 @@
+<div class="view flex flex-direction-column">
+
+    <div class="videoOsd-ratingInfo padded-top-page hide">
+        <div class="videoOsd-ratingText">
+
+        </div>
+    </div>
+
+    <h1 class="osd-rew-animationtext osd-transport-animationtext">
+    </h1>
+    <h1 class="osd-ff-animationtext osd-transport-animationtext">
+    </h1>
+
+    <div class="skipIntroContainer hide focuscontainer-x">
+
+        <button type="button" is="emby-button" class="raised btnSkipIntro nobackdropfilter osd-raisedbutton">${HeaderSkipIntro}</button>
+    </div>
+
+    <div class="upNextContainer hide focuscontainer-x">
+
+        <button type="button" is="emby-button" class="raised btnHideUpNext nobackdropfilter osd-raisedbutton">${HeaderKeepWatching}</button>
+
+        <button type="button" is="emby-button" class="raised btnPlayNextFromUpNext nobackdropfilter osd-raisedbutton">
+            <div class="btnPlayNextFromUpNext-inner">
+                <div class="btnPlayNextFromUpNext-progress"></div>
+                <i class="md-icon md-icon-fill button-icon button-icon-left">&#xe037;</i>
+                <span class="btnPlayNextFromUpNext-text">${HeaderNextEpisode}</span>
+            </div>
+        </button>
+    </div>
+
+    <div class="videoOsdBottom flex videoOsdBottom-hidden hide">
+
+        <div class="lyricsSection flex flex-direction-column hide osdContentSection" data-contentsection="lyrics" style="overflow:hidden;"></div>
+
+        <div class="videoOsdBottom-maincontrols focuscontainer-down">
+
+            <div class="brightnessSliderContainer hidepointerfine videoOsd-hideWithOpenTab videoOsd-hideWhenLocked">
+
+                <i class="md-icon videoOsdBrightnessIcon">&#xe518;</i>
+
+                <div class="sliderContainer emby-slider-container-vertical flex-grow">
+                    <input is="emby-slider" type="range" step="1" min="0" max="100" value="100" class="videoOsdBrightnessSlider" tabindex="-1" orient="vertical" data-hoverthumb="true" />
+                </div>
+            </div>
+
+            <div is="emby-itemscontainer" class="osdPosterContainer flex flex-direction-column">
+            </div>
+
+            <div class="videoOsdUnlockControls hide">
+
+                <button is="emby-button" class="videoOsd-btnToggleLock videoOsd-btnUnlock1 hide videoOsd-btnToggleLock-bg fab videoOsd-customFont-x2" title="${Lock}" aria-label="${Lock}">
+                    <i class="md-icon fab-icon">&#xe897;</i>
+                </button>
+                <button is="emby-button" class="videoOsd-btnToggleLock videoOsd-btnUnlock2 hide videoOsd-btnToggleLock-bg raised raised-mini videoOsd-customFont-x2" title="${HeaderUnlockControls}" aria-label="${HeaderUnlockControls}">
+                    <i class="md-icon button-icon button-icon-left">&#xe898;</i>
+                    <span>${HeaderUnlockControls}</span>
+                </button>
+                <h1 style="margin:1rem 0 .5rem;">${HeaderScreenLocked}</h1>
+                <div class="secondaryText" style="margin: 0; font-weight: 600;">${HeaderTapToUnlock}</div>
+            </div>
+
+            <div class="flex flex-direction-column videoOsdText videoOsd-hideWithOpenTab videoOsd-hideWhenLocked">
+
+                <div class="videoOsdParentTitleContainer flex align-items-center">
+                    <h3 class="videoOsdParentTitle videoOsdParentTitle-small"></h3>
+                    <h1 class="videoOsdParentTitle videoOsdParentTitle-large hide"></h1>
+
+                    <button is="paper-icon-button-light" type="button" class="btnOsdMore btnOsdMore-title hidepointerfine hide" title="${More}" aria-label="${More}">
+                        <i class="md-icon">&#xe5d3;</i>
+                    </button>
+                </div>
+
+                <div class="flex videoOsdSecondaryText secondaryText flex-wrap-wrap">
+                    <h3 class="videoOsdTitle"></h3>
+                    <h3 class="videoOsdThirdTitle hide"></h3>
+
+                    <div class="flex align-items-center videoOsdSecondaryMediaInfo mediaInfoItems">
+                    </div>
+                </div>
+            </div>
+            <div class="flex flex-shrink-zero justify-content-flex-end flex-wrap-wrap videoOsdBottom-buttons-topright videoOsd-hideWithOpenTab videoOsd-hideWhenLocked focuscontainer-x focusable" data-focusabletype="nearest">
+
+                <button is="paper-icon-button-light" class="osdIconButton btnNextTrackTopRight hide hidepointerfine" title="${HeaderNextItem}" aria-label="${HeaderNextItem}">
+                    <i class="md-icon md-icon-fill osdIconButton-icon">&#xe044;</i>
+                </button>
+
+                <button is="paper-icon-button-light" class="osdIconButton videoOsd-btnToggleLock videoOsd-btnLock hidepointerfine hide" title="${Lock}" aria-label="${Lock}">
+                    <i class="md-icon osdIconButton-icon">&#xe897;</i>
+                </button>
+
+                <button is="paper-icon-button-light" class="osdIconButton btnRecord hide videoOsd-hideWhenLocked" title="${Record}" aria-label="${Record}">
+                    <i class="md-icon md-icon-fill osdIconButton-icon">&#xe061;</i>
+                </button>
+
+                <button is="paper-icon-button-light" class="osdIconButton btnOsdShuffle btnOsdShuffle-topright toggleButton hide videoOsd-hideWhenLocked" title="${Shuffle}" aria-label="${Shuffle}">
+                    <i class="md-icon osdIconButton-icon toggleButtonIcon">&#xe043;</i>
+                </button>
+
+                <button is="paper-icon-button-light" class="osdIconButton btnOsdRepeatMode btnOsdRepeatMode-topright toggleButton hide videoOsd-hideWhenLocked" title="${HeaderRepeatMode}" aria-label="${HeaderRepeatMode}">
+                    <i class="md-icon osdIconButton-icon toggleButtonIcon">&#xe040;</i>
+                </button>
+                <button is="paper-icon-button-light" class="osdIconButton btnSubtitles hide videoOsd-hideWhenLocked" title="${Subtitles}" aria-label="${Subtitles}">
+                    <i class="md-icon osdIconButton-icon subtitleIcon"></i>
+                </button>
+
+                <button is="paper-icon-button-light" class="osdIconButton btnAudio hide videoOsd-hideWhenLocked" title="${Audio}" aria-label="${Audio}">
+                    <i class="md-icon osdIconButton-icon audioIcon" style="border: .1em solid currentColor; border-radius: 100%; font-size: 1.26em; margin:.11em;"></i>
+                </button>
+
+                <button is="paper-icon-button-light" class="osdIconButton btnPlaybackSpeed hide" title="${PlaybackSpeed}" aria-label="${PlaybackSpeed}">
+                    <i class="md-icon osdIconButton-icon toggleButtonIcon">&#xe9e4;</i>
+                </button>
+
+                <button is="paper-icon-button-light" class="osdIconButton btnVideoOsdSettings btnVideoOsdSettings-right hide videoOsd-hideWhenLocked" title="${Settings}" aria-label="${Settings}">
+                    <i class="md-icon osdIconButton-icon">&#xe8B8;</i>
+                </button>
+
+                <button is="paper-icon-button-light" type="button" class="osdIconButton paper-icon-button-light btnOsdMore btnOsdMore-bottom hide videoOsd-hideWhenLocked" title="${More}" aria-label="${More}">
+                    <i class="md-icon osdIconButton-icon">more_horiz</i>
+                </button>
+                <button is="paper-icon-button-light" class="osdIconButton btnFullscreen videoOsd-hideWhenLocked hide" title="${Fullscreen}" aria-label="${Fullscreen}">
+                    <i class="md-icon osdIconButton-icon">&#xe5D0;</i>
+                </button>
+            </div>
+
+            <div class="flex flex-direction-row align-items-center justify-content-center videoOsdPositionContainer videoOsdPositionContainer-vertical videoOsd-hideWithOpenTab videoOsd-hideWhenLocked">
+                <div class="flex align-items-center videoOsdPositionText flex-shrink-zero secondaryText"></div>
+                <div class="sliderContainer videoOsdPositionSliderContainer flex-grow" style="margin: 0 .75em 0;">
+                    <input type="range" step=".01" min="0" max="100" value="0" is="emby-slider" class="videoOsdPositionSlider autofocus" data-defaultinputhandling="false" data-hoverthumb="true" />
+                </div>
+                <div class="flex align-items-center videoOsd-audioInfo flex-shrink-zero secondaryText"></div>
+                <div class="flex align-items-center videoOsdDurationText flex-shrink-zero secondaryText"></div>
+            </div>
+
+            <div class="videoOsd-belowtransportbuttons flex focusable focuscontainer-x videoOsd-hideWithOpenTab" data-focusabletype="autofocus">
+                <div class="videoOsdBottom-buttons flex align-items-flex-start flex-direction-row">
+
+                    <button is="paper-icon-button-light" class="osdIconButton btnPreviousTrack hide" title="${HeaderPreviousItem}" aria-label="${HeaderPreviousItem}">
+                        <i class="md-icon md-icon-fill osdIconButton-icon">&#xe045;</i>
+                    </button>
+
+                    <div class="flex align-items-center flex-direction-row videoOsd-maintransportbuttons videoOsd-hideWhenLocked">
+                        <button is="paper-icon-button-light" class="osdIconButton btnRewind hide" title="${Rewind}" aria-label="${Rewind}">
+                            <i class="md-icon osdIconButton-icon btnRewindIcon">&#xe042;</i>
+                        </button>
+
+                        <button is="paper-icon-button-light" class="osdIconButton videoOsd-btnPause autofocus">
+                            <i class="md-icon md-icon-fill osdIconButton-icon autortl">&#xe037;</i>
+                        </button>
+
+                        <button is="paper-icon-button-light" class="osdIconButton btnVideoOsd-stop btnVideoOsd-stop-center hide" title="${Stop}" aria-label="${Stop}">
+                            <i class="md-icon md-icon-fill osdIconButton-icon">&#xe047;</i>
+                        </button>
+
+                        <button is="paper-icon-button-light" class="osdIconButton btnOsdFastForward hide" title="${FastForward}" aria-label="${FastForward}">
+                            <i class="md-icon osdIconButton-icon btnOsdFastForwardIcon">&#xe042;</i>
+                        </button>
+                    </div>
+
+                    <button is="paper-icon-button-light" class="osdIconButton btnNextTrack hide" title="${HeaderNextItem}" aria-label="${HeaderNextItem}">
+                        <i class="md-icon md-icon-fill osdIconButton-icon">&#xe044;</i>
+                    </button>
+                </div>
+
+                <div class="videoOsdVolumeControls videoOsdVolumeControls-bottom hide osdForceHide videoOsd-hideWhenLocked flex flex-direction-row align-items-center hide-mouse-idle-tv" style="position:relative;">
+                    <button is="paper-icon-button-light" class="osdIconButton buttonMute flex-shrink-zero btnMuteOSD-remotecontrol" title="${Mute}" aria-label="${Mute}">
+                        <i class="md-icon osdIconButton-icon">&#xe050;</i>
+                    </button>
+
+                    <i class="md-icon md-icon-fill osdVolumeDisplayIcon osdVolumeDisplayIcon-left secondaryText">&#xe04d;</i>
+
+                    <div class="videoOsdVolumeSliderWrapper videoOsdVolumeSliderWrapper-bottom flex-grow videoOsdVolumeSliderWrapper-customfont">
+                        <div class="sliderContainer flex-grow">
+                            <input is="emby-slider" type="range" step="1" min="0" max="100" value="0" class="videoOsdVolumeSlider" tabindex="-1" data-hoverthumb="true" />
+                        </div>
+                    </div>
+
+                    <i class="md-icon md-icon-fill osdVolumeDisplayIcon osdVolumeDisplayIcon-right secondaryText">&#xe050;</i>
+                </div>
+
+                <div class="videoOsdBottom-contentbuttons videoOsd-hideWhenLocked flex align-items-center justify-content-center flex-direction-row hide">
+
+                    <button is="paper-icon-button-light" class="osdIconButton btnChapters hide toggleButton osdContentSectionToggleButton" data-contentsection="chapters" title="${Chapters}" aria-label="${Chapters}">
+                        <i class="md-icon osdIconButton-icon toggleButtonIcon osdContentSectionToggleButtonIcon chaptersIcon"></i>
+                    </button>
+
+                    <button is="paper-icon-button-light" class="osdIconButton btnLyrics hide toggleButton osdContentSectionToggleButton" data-contentsection="lyrics" title="${Lyrics}" aria-label="${Lyrics}">
+                        <i class="md-icon osdIconButton-icon toggleButtonIcon osdContentSectionToggleButtonIcon lyricsIcon"></i>
+                    </button>
+
+                    <button is="paper-icon-button-light" class="osdIconButton btnPlayQueue toggleButton toggleButton-active osdContentSectionToggleButton" data-contentsection="playqueue" title="${HeaderPlayQueue}" aria-label="${HeaderPlayQueue}">
+                        <i class="md-icon osdIconButton-icon toggleButtonIcon toggleButtonIcon-active osdContentSectionToggleButtonIcon autortl">&#xe241;</i>
+                    </button>
+
+                    <button is="paper-icon-button-light" class="osdIconButton btnOsdShuffle btnOsdShuffle-bottom toggleButton hide" title="${Shuffle}" aria-label="${Shuffle}">
+                        <i class="md-icon osdIconButton-icon toggleButtonIcon">&#xe043;</i>
+                    </button>
+
+                    <button is="paper-icon-button-light" class="osdIconButton btnOsdRepeatMode btnOsdRepeatMode-bottom toggleButton hide" title="${HeaderRepeatMode}" aria-label="${HeaderRepeatMode}">
+                        <i class="md-icon osdIconButton-icon toggleButtonIcon">&#xe040;</i>
+                    </button>
+
+                    <button is="paper-icon-button-light" class="osdIconButton btnVideoOsdSettings btnVideoOsdSettings-transport hide" title="${Settings}" aria-label="${Settings}">
+                        <i class="md-icon osdIconButton-icon">&#xe8B8;</i>
+                    </button>
+
+                </div>
+            </div>
+
+            <div is="emby-tabs" class="videoOsdBottom-tabs videoOsd-hideWhenLocked flex flex-grow flex-direction-row align-items-center focuscontainer-x hide padded-top-focusscale padded-bottom-focusscale" data-index="-1">
+
+                <div class="flex videoosd-tabsslider">
+
+                    <button type="button" is="emby-button" class="emby-tab-button button-link button-link-color-inherit emby-button videoosd-tab-button videoosd-tab-button-info hide" data-index="0">${Info}</button>
+                    <button type="button" is="emby-button" class="emby-tab-button button-link button-link-color-inherit emby-button videoosd-tab-button videoosd-tab-button-chapters hide" data-index="1">${Chapters}</button>
+                    <button type="button" is="emby-button" class="emby-tab-button button-link button-link-color-inherit emby-button videoosd-tab-button hide" data-index="2">${HeaderCastCrew}</button>
+                    <button type="button" is="emby-button" class="emby-tab-button button-link button-link-color-inherit emby-button videoosd-tab-button hide" data-index="3">${UpNext}</button>
+                    <button type="button" is="emby-button" class="emby-tab-button button-link button-link-color-inherit emby-button videoosd-tab-button hide" data-index="4">${HeaderOnNow}</button>
+                    <button type="button" is="emby-button" class="emby-tab-button button-link button-link-color-inherit emby-button videoosd-tab-button hide" data-index="5">${Guide}</button>
+
+                </div>
+            </div>
+
+            <div class="videoosd-tabcontainers videoOsd-hideWhenLocked hide videoosd-tabcontainers-hidden flex">
+                <div class="videoosd-tab flex flex-direction-row flex-grow videoosd-infotab videoosd-padded-left videoosd-padded-right videoosd-tabBackground padded-top padded-bottom" data-index="0">
+                </div>
+
+                <div class="videoosd-tab videoosd-itemstab flex-grow focuscontainer-x" data-index="1">
+
+                </div>
+
+                <div class="videoosd-tab videoosd-itemstab flex-grow focuscontainer-x" data-index="2">
+
+                </div>
+
+                <div class="videoosd-tab videoosd-itemstab flex-grow focuscontainer-x" data-index="3">
+
+                </div>
+
+                <div class="videoosd-tab flex-grow focuscontainer-x videoosd-guidetab" data-index="4">
+
+                </div>
+
+                <div class="videoosd-tab flex-grow focuscontainer-x videoosd-guidetab" data-index="5">
+
+                </div>
+            </div>
+        </div>
+
+    </div>
+</div>

videoosd/videoosd_nontv.css

@@ -0,0 +1 @@
+@media all and (orientation:portrait){.brightnessSliderContainer{display:none!important}}@media not all and (orientation:landscape){.osd-autofadesection{-webkit-mask-image:linear-gradient(to bottom,black 0%,black 90%,transparent 100%);mask-image:linear-gradient(to bottom,black 0%,black 90%,transparent 100%);padding-bottom:1em}}

videoosd/videoosd_tv.css

@@ -0,0 +1 @@
+.osdPosterContainer{max-height:calc(100% - 12em)}