This topic explains how to provide a custom overlay for your MediaPlayer app. You can use the overlay to provide additional information or extra ways for a user to interact with your app. One example of when you should use a custom overlay is when you want to add several custom commands to the MediaPlayer transport control bar. By default the transport control bar only has room for a few additional buttons. If you want to add additional controls, you should group controls that serve a similar purpose and add a button that brings up an overlay with these controls. The button should indicate what the additional controls do. For example, you could add a settings button that creates an overlay with several settings that the user can change. From a design point of view, it's not recommended to create a generic button that simply pulls up more buttons.
This example also adds a new button to the transport control bar. When this button is pressed, an overlay appears which provides more information about the current media. In this example, the provided information is static, but you could easily update it based on the current media.
This section of code should be placed in your stylesheet. This defines the overlay and both its hidden and shown layouts.
<style>
body {
height: 100%;
width: 100%;
}
.visible-moreinfo {
background-color: #111;
border: 1px solid white;
display: inline;
left: 50px;
padding: 24px;
position: absolute;
top: 30px;
bottom: 250px;
width: 300px;
}
.hidden-moreinfo {
display: none;
}
</style>
<div id="moreInformationPanel" class="hidden-moreinfo">
<h1>Media Title</h1>
<p>
Here is some information about the media that is currently playing.
You could provide a description of the media, or perhaps some highlights
and information about what your app does in relation to the current media.
</p>
</div>
This section of the code goes in your script file. We need to add our custom button and then provide an event handler to display or hide the additional information overlay when the button is pressed.
JavaScript
function handleMoreInformationClick() {
// If the information panel is hidden, then display it and vice versa
if (moreInformationPanel.classList.contains("hidden-moreinfo")) {
moreInformationPanel.classList.remove("hidden-moreinfo");
moreInformationPanel.classList.add("visible-moreinfo");
WinJS.UI.Animation.enterContent(moreInformationPanel, { top: "12px", left: "0px", rtlflip: true });
} else {
moreInformationPanel.remove("visible-moreinfo");
moreInformationPanel.classList.add("hidden-moreinfo");
WinJS.UI.Animation.enterContent(moreInformationPanel, { top: "12px", left: "0px", rtlflip: true });
}
}
// Get the MediaPlayer
var mediaPlayer = document.getElementById("myMediaPlayer").tvControl;
// Create the new button
var moreCommandsButton = document.createElement("button");
// Create the new button
var moreInformationButton = document.createElement("button");
// Create the icon and voice attributes
// This example uses the more provided icon. You can either use one of
// the icons provided or create your own.
var iconAttribute = document.createElement("span");
iconAttribute.classList.add("win-mediaplayer-icon win-mediaplayer-moreicon");
var voiceAttribute = document.createElement("span");
// Add the class and attributes to the button
moreInformationButton.appendChild(iconAttribute);
// Retrieve a button on the transport control bar.
var rewindButton = mediaPlayer.element.querySelector(".tv-mediaplayer-rewindbutton");
// Add this button as a new child - this will add it after the last button
rewindButton.parentNode.appendChild(moreInformationButton);
// Add an event listener for the "click" event.
moreInformationButton.addEventListener("click", handleMoreInformationClick, false);