blob: ebdb973f61592eb3e7dda67a094a2196cb652bf5 [file] [log] [blame]
<!DOCTYPE html>
<html>
<head>
<style>
#captionWindow {
position: absolute;
bottom: 10px;
text-align: center;
padding: 25px;
}
</style>
</head>
<body>
<div id="captionWindow">
<span id="caption">Captions will look like this</span>
<span id="captionsDisabled" style="visibility:hidden;color:white">Captions are disabled</span>
</div>
</body>
<script>
// Ignore characterEdgeStyle attribute because it is currently unsupported by Cobalt.
//
// Ignore fontFamily, backgroundOpacity, fontOpacity, and windowOpacity attributes because
// they require lengthy conversion (and will likely be provided if the other attributes are).
let settings = navigator.systemCaptionSettings;
console.log(settings);
let setCaptionStyle = (elementId, cssProperty, state, captionStyle) => {
if (state == "set" || state == "override") {
document.getElementById(elementId).style[cssProperty] = captionStyle;
}
}
if (settings.isEnabled) {
setCaptionStyle("caption", "backgroundColor", settings.backgroundColorState, settings.backgroundColor);
setCaptionStyle("caption", "color", settings.fontColorState, settings.fontColor);
setCaptionStyle("caption", "fontSize", settings.fontSizeState, `${settings.fontSize}px`);
setCaptionStyle("captionWindow", "backgroundColor", settings.windowColorState, settings.windowColor);
} else {
document.getElementById("captionsDisabled").style.visibility = "visible";
document.getElementById("caption").style.visibility = "hidden";
}
</script>
</html>