diff --git a/teslausb-www/html/index.html b/teslausb-www/html/index.html index 3b07c9dc..56bd7ee7 100755 --- a/teslausb-www/html/index.html +++ b/teslausb-www/html/index.html @@ -236,6 +236,20 @@ color: #000; z-index:11; } + + .navbar + div { + height: calc(100% - 50px); + } + .videoholder.layout6 { + grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); + grid-template-columns: auto auto auto; + justify-content: center; + } + .videoholder.layout6 .videogriditem { + height: 100%; + width: auto; + max-width: 100%; + } } /*hide music tab by default */ @@ -1105,6 +1119,14 @@ var rightpillarview = document.getElementById("rightpillarview"); var backview = document.getElementById("backview"); var videogrid = document.querySelector(".videoholder"); + + /* Reset flipped status to ensure clean state for non-mirrored layouts (3, 5, 6) */ + if (layout == 3 || layout == 5 || layout == 6) { + leftrepeaterview.classList.remove("flipped"); + rightrepeaterview.classList.remove("flipped"); + backview.classList.remove("flipped"); + } + if (layout == 1) { // mirrorleft-front-mirrorright on top, map-mirrorrear-info on bottom leftrepeaterview.classList.add("flipped"); @@ -1125,9 +1147,6 @@ videogrid.classList="videoholder layout4"; } else if (layout == 5) { // front on top, sides in middle, rear on bottom - leftrepeaterview.classList.remove("flipped"); - rightrepeaterview.classList.remove("flipped"); - backview.classList.remove("flipped"); videogrid.classList="videoholder layout5"; } else if (layout == 6) { // map-front-info on top, pillars on the side, repeaters and rear on bottom @@ -1135,9 +1154,6 @@ } else { layout = 3; // (default) map-front-info on top, right-rear-left on bottom - leftrepeaterview.classList.remove("flipped"); - rightrepeaterview.classList.remove("flipped"); - backview.classList.remove("flipped"); videogrid.classList="videoholder layout3"; } currentLayout = layout; @@ -1152,6 +1168,30 @@ item.classList.remove("selected"); } } + + if (typeof currentsequence !== 'undefined') { + setTimeout(function() { + for (var i=0; i < 6;i++) { + var v = videoelems[i]; + var c = canvaselems[i]; + + if (v.clientWidth > 0 && v.clientHeight > 0) { + c.width = v.clientWidth; + c.height = v.clientHeight; + } + + if (v.style.visibility == "hidden") { + var ctx = c.getContext("2d"); + if (v.classList.contains("flipped")) { + ctx.scale(-1, 1); + ctx.drawImage(v, 0, 0, -c.width, c.height); + } else { + ctx.drawImage(v, 0, 0, c.width, c.height); + } + } + } + }, 50); + } } function cycleLayout() {