I am having a slight issue adapting my extension to dynamically adapt to the currently available space.
My extension has the ability to be resized/moved around the window in which case I need the ability to detect when the extension is offscreen/too big and resize accordingly however it seems that the “displayResolution” parameter only gives correct resolution when in the following mode (16:9 non-theatre-mode.
I have a simple setup currently which consists of the following:
- html page consists of a single (div id=“test”) set to an initial width/height of 0
- javascript listening for displayResolution changes.
javascript:
let resolution = {
height: 1080,
width: 2560
};
window.Twitch.ext.onContext(function (context, contextFields) {
const resSplit = / ?x ?(.+)/;
if (contextFields.includes("displayResolution")) {
let resSplit = context["displayResolution"].split(resSplit);
resolution.width = parseInt(resSplit[0]);
resolution.height = parseInt(resSplit[1]);
console.log("Twitch \"displayResolution\" context: " + context["displayResolution"]);
updateGUI();
}
});
let updateGUI = function () {
let boundingBox = {
"width": resolution.width - (10 + 20), // (10+20) is the padding for left/right of the exstension which is removed.
"height": resolution.height - (105 + 230), // (105 + 230) is the padding for top/bottom of the exstension which is removed.
"left": 10,
"top": 105
}
console.log("exstension available size after acounting for padding: " + boundingBox["width"] + "x" + boundingBox["height"]);
$("#testdiv").css(boundingBox);
}
for a 16:9 window such as 1920x1080 without theatre mode I get the following console logs:
Twitch "displayResolution" context: 1442x749
exstension available size after acounting for padding: 1412x414
As you can see from the above the pink-area (background-color of the div) and chrome highlighting in blue the offscreen portion of the div, which from just eyeballing it seems to be the size of the combined left/right black bars of the stream, but that’s just a guess.
for a 16:9 window 1920x1080 theatre mode enabled I get the following output (which seems to give the correct reported resolution).
Twitch "displayResolution" context: 1580,922,
exstension available size after acounting for padding: 1550x587
The same happens if i minimise chat and use theatre mode (twitch reports a full width of 1920 which doesn’t seem to take into account the black bars to the left and right of the player.)
does anyone have any suggestions on how to get the correct resolution of available area?