emby 4.8

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.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){},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/chapterstab.js

@@ -0,0 +1 @@
+define(["exports","./basetab.js","./../modules/cardbuilder/cardbuilder.js","./../modules/common/playback/playbackmanager.js","./../modules/focusmanager.js","./../modules/layoutmanager.js"],function(_exports,_basetab,_cardbuilder,_playbackmanager,_focusmanager,_layoutmanager){function fetchItems(query){var item=this.currentOptions.displayItem,chapters=item.Chapters||[],videoStream=(((item.MediaSources||[])[0]||{}).MediaStreams||[]).filter(function(i){return"Video"===i.Type})[0]||{},aspect=null;videoStream.Width&&videoStream.Height&&(aspect=videoStream.Width/videoStream.Height);for(var i=0,length=chapters.length;i<length;i++){var chapter=chapters[i];chapter.Id=item.Id,chapter.Type=item.Type,chapter.ServerId=item.ServerId,chapter.MediaType=item.MediaType,chapter.PrimaryImageAspectRatio=aspect,null==chapter.ChapterIndex&&(chapter.ChapterIndex=i)}videoStream=(chapters=function(chapters){for(var list=[],i=0,length=chapters.length;i<length;i++){var chapter=chapters[i];chapter.MarkerType&&"Chapter"!==chapter.MarkerType||list.push(chapter)}return list}(chapters)).length;return query&&(chapters=chapters.slice(query.StartIndex||0),query.Limit)&&chapters.length>query.Limit&&(chapters.length=query.Limit),Promise.resolve({Items:chapters,TotalRecordCount:videoStream})}function ChaptersTab(view){_basetab.default.apply(this,arguments)}Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0,Object.assign(ChaptersTab.prototype,_basetab.default.prototype);ChaptersTab.prototype.loadTemplate=function(){var view=this.view;return view.innerHTML='\n                    <div is="emby-scroller" data-mousewheel="false" data-focusscroll="start" data-focusscrolloffset="-padding-inline-start" 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=fetchItems.bind(this),this.itemsContainer.getListOptions=function(items){return{renderer:_cardbuilder.default,options:{shape:"autooverflow",fields:["Name","ChapterTime"],multiSelect:!1,contextMenu:!1,playedButton:!1,ratingButton:!1,action:"custom",playAction:"custom",enableUserData:!1,draggable:!1,cardClass:"videoOsd-itemstab-card videoOsd-itemstab-card-twoline",defaultShape:"backdrop",allowBottomPadding:!1,background:"black",textLinks:!1,enableFocusScaling:!1},virtualScrollLayout:"horizontal-grid"}}.bind(this),this.itemsContainer.addEventListener("action-null",function(e){e=e.detail.item,_playbackmanager.default.seek(e.StartPositionTicks||0),this.closeTab()}.bind(this)),Promise.resolve()},ChaptersTab.prototype.scrollToCurrentItem=function(focus){this.paused||this.view.contains(document.activeElement)||(focus?_focusmanager.default.focus(this.itemsContainer):function(instance,focus){var currentIndex=instance.getCurrentIndex();console.log("scrolling to chapter index: "+currentIndex),instance.itemsContainer.scrollToIndex(currentIndex,{offset:"-padding-inline-start"},focus)}(this,focus))},ChaptersTab.prototype.onResume=function(options){var instance=this;return _basetab.default.prototype.onResume.apply(this,arguments).then(function(){var hasFocus=instance.itemsContainer.contains(document.activeElement);return instance.itemsContainer.resume(options).then(function(){instance.scrollToCurrentItem(hasFocus)})})},ChaptersTab.prototype.onItemUpdated=function(options){var instance,hasFocus;if(_basetab.default.prototype.onItemUpdated.apply(this,arguments),!this.paused)return hasFocus=(instance=this).itemsContainer.contains(document.activeElement),instance.itemsContainer.refreshItems().then(function(){instance.scrollToCurrentItem(hasFocus)})},ChaptersTab.prototype.onTimeUpdate=function(positionTicks,runtimeTicks){_basetab.default.prototype.onTimeUpdate.apply(this,arguments),this.paused||_layoutmanager.default.tv&&this.scrollToCurrentItem()},ChaptersTab.prototype.getCurrentIndex=function(){for(var chapters=this.currentOptions.displayItem.Chapters||[],positionTicks=this.positionTicks||0,i=0,length=chapters.length;i<length;i++)if(positionTicks<chapters[i].StartPositionTicks)return Math.max(0,i-1);return positionTicks?Math.max(chapters.length-1,0):0},ChaptersTab.prototype.onPause=function(){_basetab.default.prototype.onPause.apply(this,arguments),this.itemsContainer.pause()},ChaptersTab.prototype.destroy=function(){_basetab.default.prototype.destroy.apply(this,arguments),this.itemsContainer=null},_exports.default=ChaptersTab});

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){return _basetab.default.prototype.onResume.apply(this,arguments),(this.guideInstance||(this.guideInstance=new _guide.default({element:this.view,serverId:this.apiClient.serverId(),condensed:!0,channelAction:"play"}))).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}[dir=rtl]:root{--lyrics-transform-origin:right center}.lyricsScroller{-webkit-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:.6em 0;padding:.16em 1ch;font-size:190%;font-weight:600;line-height:1.2;text-align:start}.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:not(.lyricsItemTime){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)}.lyricsItemTime{font-size:55%;position:absolute;top:-1.4em;display:none}.lyricsItem-selected:not(:focus){color:inherit}.lyricsItem-selected .lyricsItemTime{display:block}@media all and (pointer:fine){.lyricsItem.listItem-hoverable:hover .lyricsItemTime{display:block}}.lyricsItem.listItem-tv:focus .lyricsItemTime{display:block}.lyricsItem-selected .listItemBodyText:not(.lyricsItemTime){-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"],function(_exports,_basetab,_cardbuilder,_usersettings,_globalize,_layoutmanager,_focusmanager){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);OnNowTab.prototype.loadTemplate=function(){var view=this.view;return view.innerHTML='\n                    <div is="emby-scroller" data-mousewheel="false" data-focusscroll="start" data-focusscrolloffset="-padding-inline-start" 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 apiClient=this.apiClient;return query=Object.assign({UserId:apiClient.getCurrentUserId(),IsAiring:!0,ImageTypeLimit:1,EnableImageTypes:"Primary,Thumb,Backdrop",Fields:"ProgramPrimaryImageAspectRatio",EnableUserData:!1,SortBy:"ChannelNumber,SortName"},query),_usersettings.default.addLiveTvChannelSortingToQuery(query,_globalize.default),apiClient.getLiveTvChannels(query)}.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",overlayPlayButton:!0,contextMenu:!1,multiSelect:!1,programsAsSeries:!1,showCurrentProgramImage:!0,defaultShape:"portrait",action:"play",cardClass:"videoOsd-itemstab-card videoOsd-itemstab-card-threeline",fields:["CurrentProgramName","CurrentProgramParentName","CurrentProgramTime"],allowBottomPadding:!1,defaultBackground:!0,textLinks:!1,enableFocusScaling:!1},virtualScrollLayout:"horizontal-grid"}}.bind(this),Promise.resolve()},OnNowTab.prototype.scrollToCurrentItem=function(focus){this.paused||this.itemsContainer.contains(document.activeElement)||(focus?_focusmanager.default.focus(this.itemsContainer):function(instance,focus){instance.itemsContainer.scrollToIndex(instance.getCurrentIndex(),{offset:"-padding-inline-start"},focus)}(this,focus))},OnNowTab.prototype.getCurrentIndex=function(){return 0},OnNowTab.prototype.onResume=function(options){var instance=this;return _basetab.default.prototype.onResume.apply(this,arguments).then(function(){var hasFocus=instance.itemsContainer.contains(document.activeElement);return instance.itemsContainer.resume(options).then(function(){instance.scrollToCurrentItem(hasFocus)})})},OnNowTab.prototype.onItemUpdated=function(options){var instance,hasFocus;if(_basetab.default.prototype.onItemUpdated.apply(this,arguments),!this.paused)return hasFocus=(instance=this).itemsContainer.contains(document.activeElement),instance.itemsContainer.refreshItems().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},_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/usersettings/usersettings.js"],function(_exports,_basetab,_cardbuilder,_connectionmanager,_itemmanager,_globalize,_usersettings){function onCardAction(e){var e=e.detail.item,apiClient=_connectionmanager.default.getApiClient(e);apiClient.getItem(apiClient.getCurrentUserId(),e.Id).then(function(item){return options={html: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" class="itemsContainer scrollSlider 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||[]).filter(function(p){return p.ServerId=serverId,"Person"!==p.Type&&(p.PersonType=p.Type,p.Type="Person"),!0})).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:_usersettings.default.enableVideoUnderUI()?null:"custom",enableUserData:!1,allowBottomPadding:!1,textLinks:!1,imageClass:null,enableFocusScaling:!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(){return instance.itemsContainer.resume(options)})},PeopleTab.prototype.onItemUpdated=function(options){if(_basetab.default.prototype.onItemUpdated.apply(this,arguments),!this.paused)return this.itemsContainer.refreshItems()},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.css

@@ -0,0 +1 @@
+.osdPlaylist-scroller{padding:0 3em;margin:0 -3em}.playlistIndexIndicatorImage{position:relative}.playlistIndexIndicatorImage:not(.playlistIndexIndicatorImage-paused)::after{background-size:contain;background-image:url(ani_equalizer_white.gif);background-position:center bottom;background-repeat:no-repeat;position:absolute;top:0;bottom:0;inset-inline-start:0;inset-inline-end:0;content:' '}@media not all and (orientation:landscape){.osdPlayQueue-autosmall{-webkit-padding-start:0!important;padding-inline-start:0!important;-webkit-mask-image:linear-gradient(to bottom,black 0%,black 90%,transparent 100%);padding-bottom:1em}}@media all and (orientation:landscape){.osdPlaylist-scrollSlider{-webkit-padding-start:0!important;padding-inline-start:0!important}}

videoosd/tvplayqueue.css

@@ -0,0 +1 @@
+.tvPlayQueueScroller{padding-top:3em!important;margin-top:-3em!important}.tvPlayQueueCard{width:30vw!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){options=(this.options=options).parent;!function(parent){parent.innerHTML='<div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale tvPlayQueueScroller" data-mousewheel="false" data-focusscroll="true"><div is="emby-itemscontainer" class="scrollSlider focuscontainer-x padded-left padded-right itemsContainer focusable" data-skipplaycommands="true" data-virtualscrolllayout="horizontal-grid"></div></div>'}(options),this.playlistElement=options.querySelector(".osdPlaylist"),this.itemsContainer=options.querySelector(".itemsContainer"),this.itemsContainer.fetchData=function(query){return this.empty||!this.currentPlayer?Promise.resolve({Items:[],TotalRecordCount:0}):_playbackmanager.default.getPlaylist(query||{},this.currentPlayer)}.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;itemsContainer&&(itemsContainer.refreshItems?itemsContainer.refreshItems():setTimeout(this.refreshItems.bind(this),100))},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.updateRepeatModeDisplay=function(repeatMode){},OsdPlayQueue.prototype.resume=function(options){return this.paused=!1,this.itemsContainer.resume?this.itemsContainer.resume():(this.itemsContainer.addEventListener("upgraded",function(e){e.target.resume(this)}.bind(options)),Promise.resolve())},OsdPlayQueue.prototype.destroy=function(){var options=this.options;options&&(options=options.parent)&&(options.innerHTML=""),this.options=null,this.currentPlayer=null,this.itemsContainer=null},_exports.default=OsdPlayQueue});

videoosd/videoosd.html

@@ -0,0 +1,228 @@
+<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 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="osdPlayQueue flex flex-direction-column hide osdContentSection" data-contentsection="playqueue"></div>
+
+        <div class="lyricsSection flex flex-direction-column hide osdContentSection" data-contentsection="lyrics"></div>
+
+        <div class="videoOsdBottom-maincontrols">
+
+            <div class="brightnessSliderContainer 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">&#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="emby-button" type="button" class="fab btnOsdMore btnOsdMore-title 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">
+
+                <div class="videoOsdVolumeControls hide 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" title="${Mute}" aria-label="${Mute}">
+                        <i class="md-icon osdIconButton-icon">&#xE050;</i>
+                    </button>
+
+                    <i class="md-icon osdVolumeDisplayIcon osdVolumeDisplayIcon-left secondaryText">&#xe04d;</i>
+
+                    <div class="videoOsdVolumeSliderWrapper flex-grow">
+                        <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 osdVolumeDisplayIcon osdVolumeDisplayIcon-right secondaryText">volume_up</i>
+                </div>
+
+                <button is="paper-icon-button-light" class="osdIconButton videoOsd-btnToggleLock videoOsd-btnLock 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 osdIconButton-icon">&#xE061;</i>
+                </button>
+
+                <button is="paper-icon-button-light" class="osdIconButton btnOsdRepeatMode 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 btnAudio hide videoOsd-hideWhenLocked" title="${Audio}" aria-label="${Audio}">
+                    <i class="md-icon osdIconButton-icon">&#xE3A1;</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">&#xE01C;</i>
+                </button>
+                <button is="paper-icon-button-light" class="osdIconButton btnVideoOsdSettings btnVideoOsdSettings-right hide videoOsd-hideWhenLocked" title="${Settings}" aria-label="${Settings}">
+                    <i class="largePaperIconButton 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 btnPip videoOsd-hideWhenLocked hide" title="${PictureInPicture}" aria-label="${PictureInPicture}">
+                    <i class="md-icon osdIconButton-icon">&#xE911;</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="videoOsdBottom-buttons flex align-items-flex-start flex-direction-row focuscontainer-x focusable videoOsd-hideWithOpenTab" data-focusabletype="autofocus">
+
+                <button is="paper-icon-button-light" class="osdIconButton btnPreviousTrack hide" title="${HeaderPreviousItem}" aria-label="${HeaderPreviousItem}">
+                    <i class="md-icon osdIconButton-icon">&#xE045;</i>
+                </button>
+
+                <div class="flex align-items-center flex-direction-row videoOsd-maintransportbuttons">
+                    <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 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 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 osdIconButton-icon">&#xE044;</i>
+                </button>
+            </div>
+
+            <div class="videoOsdBottom-contentbuttons videoOsd-hideWithOpenTab videoOsd-hideWhenLocked flex align-items-center justify-content-center flex-direction-row focuscontainer-x focusable hide" data-focusabletype="nearest">
+
+                <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">&#xec0b;</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 btnVideoOsdSettings btnVideoOsdSettings-transport hide" title="${Settings}" aria-label="${Settings}">
+                    <i class="largePaperIconButton md-icon osdIconButton-icon">&#xE8B8;</i>
+                </button>
+
+            </div>
+
+            <div is="emby-tabs" class="videoOsdBottom-tabs videoOsd-hideWhenLocked flex 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 secondaryText emby-button videoosd-tab-button hide" data-index="0">${Info}</button>
+                    <button type="button" is="emby-button" class="emby-tab-button button-link secondaryText emby-button videoosd-tab-button hide" data-index="1">${Chapters}</button>
+                    <button type="button" is="emby-button" class="emby-tab-button button-link secondaryText emby-button videoosd-tab-button hide" data-index="2">${HeaderCastCrew}</button>
+                    <button type="button" is="emby-button" class="emby-tab-button button-link secondaryText emby-button videoosd-tab-button hide" data-index="3">${HeaderOnNow}</button>
+                    <button type="button" is="emby-button" class="emby-tab-button button-link secondaryText emby-button videoosd-tab-button hide" data-index="4">${Guide}</button>
+
+                </div>
+                <button is="paper-icon-button-light" class="osdIconButton osdIconButton-icon btnCloseTabContent md-icon hide-mouse-idle-tv hide secondaryText" title="${Close}" aria-label="${Close}">
+                    &#xe5cf;
+                </button>
+            </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" style="padding-bottom:.5em;" 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>
+        </div>
+
+    </div>
+</div>