diff --git a/copyparty/web/browser.css b/copyparty/web/browser.css index 4ac94081..d0c6f427 100644 --- a/copyparty/web/browser.css +++ b/copyparty/web/browser.css @@ -1492,6 +1492,7 @@ html.y #ops svg circle { padding: .2em .3em; font-size: medium; min-width: 3em; + margin-bottom: .5em; } .opview select { padding: .3em; @@ -1536,7 +1537,9 @@ input.eq_gain[type=range]{ color: var(--a); } input.eq_gain[type=text]{ - width: 1.5em; + width: 2em; + min-width: 0; + margin: 0 .15em .5em .15em; text-align: center; } input.drc_v, @@ -1560,13 +1563,6 @@ input.ssconf_v { padding: 0; } #au_ss, -#au_drc, -#au_eq { - display: block; - margin-top: .5em; - padding: 1.3em .3em; -} -#au_ss, #au_drc { padding: .4em .3em; } @@ -2486,6 +2482,9 @@ html.y #bbox-overlay figcaption a { margin: 0; padding: .5em; background: var(--ttlbar); + font-size: large; + font-weight: bold; + color: var(--fg); } #s_hor{ display: grid; @@ -2517,12 +2516,13 @@ html.y #bbox-overlay figcaption a { border: var(--bg-u5) solid 1px; border-top: 0; margin: -1.5em 0 1.5em 0; + overflow-x: scroll; } .setting:hover{ background: var(--bg-u3); } .s_desc{ - margin: .5em 0 0 0; + margin: 0 0 0 0; font-size: medium; color: var(--fg-weak); } @@ -3380,7 +3380,7 @@ html.d #treepar { -/* basically a phone layout */ +/* basically a mobile / phone layout */ @media (max-width: 50em){ body { margin: 1em; @@ -3419,6 +3419,13 @@ html.d #treepar { #ghead { margin: .5em; } + #s_hor { + display: block; + overflow-y: scroll; + } + #s_divider { + display: none; + } } @media (max-width: 32em) { #u2conf { diff --git a/copyparty/web/browser.html b/copyparty/web/browser.html index 62034f08..747e1109 100644 --- a/copyparty/web/browser.html +++ b/copyparty/web/browser.html @@ -174,7 +174,7 @@
-

+
diff --git a/copyparty/web/browser.js b/copyparty/web/browser.js index 28462aa8..010ebaaa 100644 --- a/copyparty/web/browser.js +++ b/copyparty/web/browser.js @@ -755,7 +755,6 @@ ebi('ops').innerHTML = ( '📂

+

' + '📝' + '📟' + - '🎺' + '⚙️' + (IE ? '' + L.ot_noie + '' : '') + '
' @@ -913,6 +912,62 @@ x.parentNode.insertBefore(mknod('div', null, })(); // config panel + +var musicSettings = ( + '

🎵 ' + L.ot_mp + '

' + + '' + + '' + + '
' + + + '

🐘 ' + L.ml_drc + '

' + + '

📊 ' + L.ml_eq + '

' + + '

🔇 ' + L.ml_ss + '

' + + ''); + ebi('op_cfg').innerHTML = ( '
\n' + '

✅ ' + L.cl_opts + '

\n' + @@ -935,6 +990,7 @@ ebi('op_cfg').innerHTML = ( ' \n' + @@ -1005,8 +1061,8 @@ ebi('op_cfg').innerHTML = ( ' \n' + '
\n' + '
\n' + + musicSettings + '

🎼 ' + L.cl_keytype + '

\n' + - (!MOBILE ? '

🖱️ ' + L.cl_rcm + '

' + L.cl_hidec + ' / ' : '') + '' + L.cl_reset + '
' ); @@ -1023,12 +1079,12 @@ ebi('op_cfg').innerHTML = ( var section = `

${sName}

`; for (var ii = 0; ii < subSettings.children.length; ii++){ var s = subSettings.children[ii]; - var tt = s.getAttribute('tt')?.replace(/\$N/g, "
"); + var info = tt.parse(s.getAttribute('tt')); s.removeAttribute('tt'); s.href = '#' + sId; section += `
` + s.outerHTML + - (tt?.length > 0 ? `

${tt}

` : '') + + (info?.length > 0 ? `

${info}

` : '') + '
'; } section += '
' @@ -1332,61 +1388,6 @@ ebi('hsortn').oninput = function (e) { var mpl = (function () { var have_mctl = 'mediaSession' in navigator && window.MediaMetadata; - ebi('op_player').innerHTML = ( - '

' + L.ot_mp + '

' + - '' + - '' + - '
' + - - '

' + L.ml_drc + '

' + - '

' + L.ml_eq + '

' + - '

' + L.ml_ss + '

' + - ''); - var r = { "pb_mode": (sread('pb_mode', ['loop', 'next', 'stop']) || 'next').split('-')[0], "os_ctl": bcfg_get('au_os_ctl', have_mctl) && have_mctl, @@ -1545,9 +1546,9 @@ var mpl = (function () { btns.push(btn); } if (!IPHONE) - btns[1].style.display = btns[2].style.display = 'none'; - btns[4].style.display = have_c2flac ? '' : 'none'; - btns[5].style.display = have_c2wav ? '' : 'none'; + btns[1].parentElement.style.display = btns[2].parentElement.style.display = 'none'; + btns[4].parentElement.style.display = have_c2flac ? '' : 'none'; + btns[5].parentElement.style.display = have_c2wav ? '' : 'none'; if (v) swrite('acode2', v); @@ -1559,9 +1560,9 @@ var mpl = (function () { clmod(btns[a], 'on', fmts[a] == v) r.ac2 = v; - ebi('ac_flac').setAttribute('tt', L.mt_cflac.split('"')[0].format(v)); - ebi('ac_aac').setAttribute('tt', L.mt_caac.split('"')[0].format(v)); - ebi('ac_oth').setAttribute('tt', L.mt_coth.split('"')[0].format(v)); + ebi('ac_flac').nextSibling.innerHTML = L.mt_cflac.split('"')[0].format(v); + ebi('ac_aac').nextSibling.innerHTML = L.mt_caac.split('"')[0].format(v); + ebi('ac_oth').nextSibling.innerHTML = L.mt_coth.split('"')[0].format(v); }; r.pp = function () { @@ -2865,8 +2866,10 @@ var afilt = (function () { for (var a = 0; a < r.bands.length; a++) gains[a + gains.length / 2].value = gains[a].value = r.gains[a].toFixed(1); - QS('input.eq_gain[band="amp"]').value = r.amp; - QS('input.eq_gain[band="chw"]').value = r.chw; + var amps = QSA('input.eq_gain[band="amp"]'); + amps[0].value = amps[1].value = r.amp; + var chws = QSA('input.eq_gain[band="chw"]'); + chws[0].value = chws[1].value = r.chw; }; r.stop = function () { @@ -3138,8 +3141,10 @@ var afilt = (function () { ebi('h_drc').textContent = f2f(r.drcn.reduction, 1); } - var html = [''], + ebi('audio_eq').innerHTML = '' + L.enable + + '

' + tt.parse(L.mt_eq) + '


'; + + var html = ['
', - '' + L.enable + '
'], h2 = [], h3 = [], h4 = [], h5 = []; var vs = []; @@ -3167,11 +3172,12 @@ var afilt = (function () { html += h3.join('\n') + ''; html += h4.join('\n') + ''; html += h5.join('\n') + '
'; - ebi('audio_eq').innerHTML = html; + ebi('audio_eq').innerHTML += html; + ebi('audio_drc').innerHTML = '' + L.enable + + '

' + tt.parse(L.mt_drc) + '


'; h2 = []; - html = ['
']; + html = ['
', - '' + L.enable + '
']; for (var a = 0; a < r.drch.length; a++) { html.push(''); @@ -3179,11 +3185,12 @@ var afilt = (function () { } html = html.join('\n') + ''; html += h2.join('\n') + '
' + r.drch[a] + '
'; - ebi('audio_drc').innerHTML = html; + ebi('audio_drc').innerHTML += html; + ebi('audio_ss').innerHTML = '' + L.enable + + '

' + tt.parse(L.mt_ss) + '


'; h2 = []; - html = ['
']; + html = ['
', - '' + L.enable + '
']; for (var a = 0; a < r.sscl.length; a++) { html.push('
"); + } + r.show = function () { clearTimeout(tev); if (r.skip) { @@ -1561,12 +1573,7 @@ var tt = (function () { if (!msg) return; - if (msg.startsWith('`')) { - var x = false; - msg = msg.slice(1); - while (msg.indexOf('`') + 1) - msg = msg.replace('`', (x = !x) ? '' : '') - } + r.el = this; var pos = this.getBoundingClientRect(), @@ -1583,7 +1590,7 @@ var tt = (function () { r.tt.style.left = '0'; r.tt.style.top = '0'; - r.tt.innerHTML = msg.replace(/\$N/g, "
"); + r.tt.innerHTML = r.parse(msg); r.el.addEventListener('mouseleave', r.hide); window.addEventListener('scroll', r.hide); clmod(r.tt, 'show', 1);