mirror of
https://github.com/Ardour/ardour.git
synced 2025-12-13 10:06:33 +01:00
WS: Add a fullscreen toggle to the mixer demo
This commit is contained in:
parent
0b71764f44
commit
75338ad4c5
5 changed files with 76 additions and 2 deletions
|
|
@ -25,6 +25,8 @@ import { createRootContainer, Container, Label, DiscreteKnob, LinearKnob,
|
|||
const ardour = new ArdourClient();
|
||||
|
||||
async function main () {
|
||||
setupFullscreenButton();
|
||||
|
||||
const root = await createRootContainer();
|
||||
|
||||
ardour.mixer.on('ready', () => {
|
||||
|
|
@ -36,6 +38,7 @@ import { createRootContainer, Container, Label, DiscreteKnob, LinearKnob,
|
|||
mixer.id = 'mixer';
|
||||
mixer.appendTo(root);
|
||||
|
||||
// left flexbox padding
|
||||
mixer.appendChild(new Container());
|
||||
|
||||
for (const strip of ardour.mixer.strips) {
|
||||
|
|
@ -45,6 +48,7 @@ import { createRootContainer, Container, Label, DiscreteKnob, LinearKnob,
|
|||
createStrip(strip, container);
|
||||
}
|
||||
|
||||
// right flexbox padding
|
||||
mixer.appendChild(new Container());
|
||||
});
|
||||
|
||||
|
|
@ -113,6 +117,33 @@ import { createRootContainer, Container, Label, DiscreteKnob, LinearKnob,
|
|||
widget.bindTo(param, 'value');
|
||||
}
|
||||
|
||||
function setupFullscreenButton () {
|
||||
const doc = document.documentElement,
|
||||
button = document.getElementById('fullscreen'),
|
||||
touchOrClick = ('ontouchstart' in doc) ? 'touchstart' : 'click';
|
||||
|
||||
let requestFullscreen = null, fullscreenChange = null;
|
||||
|
||||
if ('requestFullscreen' in doc) {
|
||||
requestFullscreen = doc.requestFullscreen.bind(doc);
|
||||
fullscreenChange = 'fullscreenchange';
|
||||
} else if ('webkitRequestFullscreen' in doc) {
|
||||
requestFullscreen = doc.webkitRequestFullscreen.bind(doc);
|
||||
fullscreenChange = 'webkitfullscreenchange';
|
||||
}
|
||||
|
||||
if (requestFullscreen && fullscreenChange) {
|
||||
button.addEventListener(touchOrClick, requestFullscreen);
|
||||
|
||||
document.addEventListener(fullscreenChange, (e) => {
|
||||
const fullscreen = document.fullscreen || document.webkitIsFullScreen;
|
||||
button.style.display = fullscreen ? 'none' : 'inline';
|
||||
});
|
||||
} else {
|
||||
button.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
main();
|
||||
|
||||
})();
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue