diff --git a/share/web_surfaces/builtin/mixer/expand.svg b/share/web_surfaces/builtin/mixer/expand.svg new file mode 100644 index 0000000000..387024b95d --- /dev/null +++ b/share/web_surfaces/builtin/mixer/expand.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + diff --git a/share/web_surfaces/builtin/mixer/index.html b/share/web_surfaces/builtin/mixer/index.html index 4b725d6ae0..621e343dec 100644 --- a/share/web_surfaces/builtin/mixer/index.html +++ b/share/web_surfaces/builtin/mixer/index.html @@ -7,6 +7,7 @@ + diff --git a/share/web_surfaces/builtin/mixer/js/main.js b/share/web_surfaces/builtin/mixer/js/main.js index 79d43abcfb..f339574a7a 100644 --- a/share/web_surfaces/builtin/mixer/js/main.js +++ b/share/web_surfaces/builtin/mixer/js/main.js @@ -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(); })(); diff --git a/share/web_surfaces/builtin/mixer/main.css b/share/web_surfaces/builtin/mixer/main.css index 74062bc398..47928937b3 100644 --- a/share/web_surfaces/builtin/mixer/main.css +++ b/share/web_surfaces/builtin/mixer/main.css @@ -26,6 +26,23 @@ div { justify-content: center; } +#fullscreen { + position: fixed; + z-index: 10; + top: 16px; + right: 12px; + width: 24px; + height: 24px; + opacity: 0.5; + outline: none; + border: none; + background: none; + background-size: contain; + background-repeat: no-repeat; + background-position: center; + background-image: url('expand.svg'); +} + #mixer { display: flex; flex-direction: row; @@ -40,7 +57,7 @@ div { display: flex; flex-direction: column; align-items: center; - min-width: 150px; + min-width: 200px; } .strip-meter-fader { diff --git a/share/web_surfaces/builtin/transport/main.js b/share/web_surfaces/builtin/transport/main.js index 83378b0ccd..f1b6ae9447 100644 --- a/share/web_surfaces/builtin/transport/main.js +++ b/share/web_surfaces/builtin/transport/main.js @@ -76,7 +76,7 @@ import ArdourClient from '/shared/ardour.js'; dom.fullscreen.addEventListener(touchOrClick, requestFullscreen); document.addEventListener(fullscreenChange, (e) => { - const fullscreen = document.fullScreen || document.webkitIsFullScreen; + const fullscreen = document.fullscreen || document.webkitIsFullScreen; dom.fullscreen.style.display = fullscreen ? 'none' : 'inline'; }); } else {