mirror of
https://github.com/9001/copyparty.git
synced 2026-06-19 04:32:26 -06:00
alternate audio progress bar
This commit is contained in:
Til Schmitter
parent
dc9dca7444
commit
91a60c9b84
|
|
@ -804,9 +804,6 @@ html.y #files span.fsz_P { font-weight: bold }
|
|||
border-bottom: .1em solid #777\9;
|
||||
margin-right: 1em\9;
|
||||
}
|
||||
#path a:first-child {
|
||||
padding-left: .8em;
|
||||
}
|
||||
#path i {
|
||||
width: 1.05em;
|
||||
height: 1.05em;
|
||||
|
|
@ -1320,45 +1317,77 @@ html.y #widget.open {
|
|||
top: -.6em;
|
||||
padding: .4em .3em;
|
||||
}
|
||||
#trackname {
|
||||
font-size: small;
|
||||
font-weight: bold;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
#progbar {
|
||||
display: none;
|
||||
}
|
||||
#progbar.vis {
|
||||
display: block;
|
||||
}
|
||||
#altprogbar {
|
||||
display: none;
|
||||
grid-template-columns: max-content auto max-content
|
||||
}
|
||||
#altprogbar.vis {
|
||||
display: grid;
|
||||
}
|
||||
#txtpos,
|
||||
#txtsongend {
|
||||
font-size: small;
|
||||
color: var(--fg-weak);
|
||||
margin: .2em;
|
||||
}
|
||||
#sliderpos {
|
||||
width: 100%;
|
||||
}
|
||||
#barpos,
|
||||
#barbuf {
|
||||
position: absolute;
|
||||
bottom: auto;
|
||||
left: 9.8em;
|
||||
top: .4em;
|
||||
height: 1.6em;
|
||||
border-radius: 9em;
|
||||
width: calc(100% - 21em);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
#barbuf {
|
||||
background: var(--mp-b-bg);
|
||||
z-index: 21;
|
||||
}
|
||||
#barpos {
|
||||
box-shadow: -.03em -.03em .7em rgba(0,0,0,0.5) inset;
|
||||
z-index: 22;
|
||||
}
|
||||
#pctl {
|
||||
position: absolute;
|
||||
top: .2em;
|
||||
left: .7em;
|
||||
accent-color: var(--a);
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: max-content max-content max-content 20% auto max-content max-content max-content;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
margin-right: .5em;
|
||||
}
|
||||
#pctl a {
|
||||
display: inline-block;
|
||||
font-size: 1.25em;
|
||||
width: 1.1em;
|
||||
height: 1.2em;
|
||||
#pctl .icon {
|
||||
font-size: 1em;
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
text-align: center;
|
||||
border-radius: .3em;
|
||||
}
|
||||
#pctl .btn {
|
||||
font-size: 1em;
|
||||
padding: 0;
|
||||
opacity: .4;
|
||||
}
|
||||
#pctl .btn.on {
|
||||
opacity: 1;
|
||||
}
|
||||
#pvol {
|
||||
position: absolute;
|
||||
top: .4em;
|
||||
right: 1em;
|
||||
height: 1.6em;
|
||||
border-radius: 9em;
|
||||
max-width: 9em;
|
||||
width: calc(100% - 10.5em);
|
||||
width: 100%;
|
||||
background: rgba(0,0,0,0.2);
|
||||
}
|
||||
.vbar {
|
||||
|
|
@ -1382,14 +1411,11 @@ html.y #widget.open {
|
|||
#widget.cmp #wtgrid, #widget.cmp #wtgrid2 {
|
||||
display: none;
|
||||
}
|
||||
#widget.cmp #pctl {
|
||||
#widget.cmp #pctl .icon {
|
||||
top: 0;
|
||||
left: 0;
|
||||
font-size: .75em;
|
||||
}
|
||||
#widget.cmp #pctl a {
|
||||
margin: 0;
|
||||
}
|
||||
#widget.cmp #barpos,
|
||||
#widget.cmp #barbuf {
|
||||
height: 1.6em;
|
||||
|
|
@ -1559,6 +1585,7 @@ input.ssconf_v {
|
|||
#audio_drc table,
|
||||
#audio_eq table {
|
||||
border-collapse: collapse;
|
||||
accent-color: var(--a);
|
||||
}
|
||||
#audio_drc td,
|
||||
#audio_eq td,
|
||||
|
|
@ -1726,7 +1753,6 @@ html {
|
|||
text-wrap-mode: wrap;
|
||||
white-space-collapse: preserve;
|
||||
position: relative;
|
||||
top: -.12em;
|
||||
}
|
||||
html.c .btn,
|
||||
html.a .btn {
|
||||
|
|
@ -3099,8 +3125,9 @@ html.a #path {
|
|||
border-radius: .3em;
|
||||
}
|
||||
html.d #pctl,
|
||||
html.e #pctl,
|
||||
html.b #pctl {
|
||||
left: .5em;
|
||||
margin-left: .5em;
|
||||
}
|
||||
html.d #ops,
|
||||
html.c #ops,
|
||||
|
|
@ -3844,7 +3871,8 @@ html.e #srv_info {
|
|||
align-items: center;
|
||||
}
|
||||
html.e .overlay_plus {
|
||||
margin-top: -1em;
|
||||
margin-top: -.3em;
|
||||
text-shadow: none;
|
||||
}
|
||||
html.e #spaceUsed_bar {
|
||||
background: var(--ttlbar);
|
||||
|
|
@ -4430,7 +4458,7 @@ html.e #detree {
|
|||
position: absolute;
|
||||
align-self: end;
|
||||
right: 0;
|
||||
bottom: .1em;
|
||||
bottom: 0;
|
||||
font-size: medium;
|
||||
}
|
||||
#acc_settings:hover{
|
||||
|
|
@ -4470,8 +4498,9 @@ html.e #detree {
|
|||
|
||||
.overlay_plus{
|
||||
position: absolute;
|
||||
margin: -1.7em 0 0 .8em;
|
||||
margin: -.5em 0 0 .8em;
|
||||
color: var(--fg);
|
||||
text-shadow: -1px 1px 1px #000;
|
||||
}
|
||||
|
||||
.gridViewIcon,
|
||||
|
|
@ -4519,4 +4548,3 @@ html.e #detree {
|
|||
.on ::before{
|
||||
border-color: var(--btn-1h-fg);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -171,8 +171,8 @@
|
|||
<div id="rcm" tabindex="0"></div>
|
||||
|
||||
|
||||
<div id="cfg" class="overlaybg" tt="">
|
||||
<div id="s_outside"></div>
|
||||
<div id="cfg" class="overlaybg">
|
||||
<div id="s_outside" tt=""></div>
|
||||
<div id="s_content">
|
||||
<a id="s_header" href="#s_nav"></a>
|
||||
<div id="s_hor">
|
||||
|
|
|
|||
|
|
@ -752,8 +752,8 @@ ebi('ops').innerHTML = (
|
|||
(have_del ? '<a href="#" id="opa_del" data-perm="write" data-dest="unpost" tt="' + L.ot_unpost + '">🧯</a>' : '') +
|
||||
'<a href="#" id="opa_up" data-dest="up2k">🚀</a>' +
|
||||
'<a href="#" id="opa_bup" data-perm="write" data-dest="bup" tt="' + L.ot_bup + '">🎈</a>' +
|
||||
'<a href="#" id="opa_mkd" data-perm="write" data-dest="mkdir" tt="' + L.ot_mkdir + '">📂 <p class="overlay_plus">+</p></a>' +
|
||||
'<a href="#" id="opa_md" data-perm="read write" data-dest="new_md" tt="' + L.ot_md + '">📝</a>' +
|
||||
'<a href="#" id="opa_mkd" data-perm="write" data-dest="mkdir" tt="' + L.ot_mkdir + '"><p class="overlay_plus">+</p>📂</a>' +
|
||||
'<a href="#" id="opa_md" data-perm="read write" data-dest="new_md" tt="' + L.ot_md + '"><div><p class="overlay_plus">+</p>📝</div></a>' +
|
||||
'<a href="#" id="opa_msg" data-dest="msg" tt="' + L.ot_msg + '">📟</a>' +
|
||||
'<a href="#" id="opa_cfg" data-dest="cfg" tt="' + L.ot_cfg + '">⚙️</a>' +
|
||||
(IE ? '<span id="noie">' + L.ot_noie + '</span>' : '') +
|
||||
|
|
@ -762,6 +762,15 @@ ebi('ops').innerHTML = (
|
|||
|
||||
|
||||
// media player
|
||||
|
||||
// svg from https://www.svgrepo.com/collection/iconcino-interface-icons/8
|
||||
var svg_box = '<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">';
|
||||
var svg_options = 'stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"';
|
||||
var svg_prev = svg_box + '<path d="M8 6V18M11.4761 12.7809L16.3753 16.7002C17.0301 17.2241 18 16.7579 18 15.9194V8.08062C18 7.24212 17.0301 6.77595 16.3753 7.29976L11.4761 11.2191C10.9757 11.6195 10.9757 12.3805 11.4761 12.7809Z" ' + svg_options + '/></svg>';
|
||||
var svg_next = svg_box + '<path d="M17 6V18M13.5239 12.7809L8.6247 16.7002C7.96993 17.2241 7 16.7579 7 15.9194V8.08062C7 7.24212 7.96993 6.77595 8.6247 7.29976L13.5239 11.2191C14.0243 11.6195 14.0243 12.3805 13.5239 12.7809Z" ' + svg_options + '/></svg>';
|
||||
var svg_play = svg_box + '<path fill-rule="evenodd" clip-rule="evenodd" d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z" ' + svg_options + '/><path fill-rule="evenodd" clip-rule="evenodd" d="M10.4706 8.78431C9.80448 8.42906 9 8.91175 9 9.66667V14.3333C9 15.0883 9.80448 15.5709 10.4706 15.2157L15.6728 12.4412C16.0257 12.2529 16.0257 11.7471 15.6728 11.5588L10.4706 8.78431Z" ' + svg_options + '/></svg>'
|
||||
var svg_pause = svg_box + '<path d="M10 9V15M14 9V15M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z" ' + svg_options + '/></svg>'
|
||||
|
||||
ebi('widget').innerHTML = (
|
||||
'<div id="wtoggle">' +
|
||||
'<span id="wfs"></span>' +
|
||||
|
|
@ -789,10 +798,24 @@ ebi('widget').innerHTML = (
|
|||
' href="#" id="wtico">♫</a>' +
|
||||
'</div>' +
|
||||
'<div id="widgeti">' +
|
||||
' <div id="pctl"><a href="#" id="bprev" tt="' + L.wt_prev + '"><p class="vbar">|</p>◀</a><a href="#" id="bplay" tt="' + L.wt_play + '">▶</a><a href="#" id="bnext" tt="' + L.wt_next + '">▶<p class="vbar">|</p></a></div>' +
|
||||
' <div style="display flex"><canvas id="barpos"></canvas>' +
|
||||
' <canvas id="barbuf"></canvas></div>' +
|
||||
' <canvas id="pvol" width="288" height="38"></canvas>' +
|
||||
' <div id="pctl">' +
|
||||
' <a href="#" id="bprev" class="icon" tt="' + L.wt_prev + '">' + svg_prev + '</a>' +
|
||||
' <a href="#" id="bplay" class="icon" tt="' + L.wt_play + '">' + svg_play + '</a>' +
|
||||
' <a href="#" id="bnext" class="icon" tt="' + L.wt_next + '">' + svg_next + '</a>' +
|
||||
' <a id="trackname"></a>' +
|
||||
' <div id="progbar" style="position: relative; height: 100%;">' +
|
||||
' <canvas id="barbuf"></canvas>' +
|
||||
' <canvas id="barpos"></canvas>' +
|
||||
' </div>' +
|
||||
' <div id="altprogbar" class="vis">' +
|
||||
' <a id="txtpos">0:00</a>' +
|
||||
' <input type="range" min="0" max="1" step="0.001" value="0" id="sliderpos"></input>' +
|
||||
' <a id="txtsongend"/>0:00</a>' +
|
||||
' </div>' +
|
||||
' <a href="#" class="tgl btn" id="cyclebtn_loopmode" tt="' + L.mt_loop + '$N' + L.mt_mloop + '">🔁</a>' +
|
||||
' <a href="#" class="tgl btn" id="au_shuf" tt="' + L.mt_shuf + '">🔀</a>' +
|
||||
' <div><canvas id="pvol" width="210" height="40"></canvas></div>' +
|
||||
' </div>' +
|
||||
'</div>' +
|
||||
'<div id="np_inf">' +
|
||||
' <img id="np_img" />' +
|
||||
|
|
@ -917,7 +940,6 @@ var musicSettings = (
|
|||
'<div><h3>🎵 ' + L.ot_mp + '</h3><div>' +
|
||||
'<a href="#" class="tgl btn" id="au_loop" tt="' + L.mt_loop + '">🔂</a>' +
|
||||
'<a href="#" class="tgl btn" id="au_one" tt="' + L.mt_one + '</a>' +
|
||||
'<a href="#" class="tgl btn" id="au_shuf" tt="' + L.mt_shuf + '">🔀</a>' +
|
||||
'<a href="#" class="tgl btn" id="au_aplay" tt="' + L.mt_aplay + '</a>' +
|
||||
'<a href="#" class="tgl btn" id="au_preload" tt="' + L.mt_preload + '</a>' +
|
||||
'<a href="#" class="tgl btn" id="au_prescan" tt="' + L.mt_prescan + '</a>' +
|
||||
|
|
@ -1160,7 +1182,9 @@ ebi('rcm').innerHTML = (
|
|||
if (v)
|
||||
ops[a].href = '#v=' + v;
|
||||
}
|
||||
ebi('acc_settings').onclick = function(e){
|
||||
|
||||
// settings
|
||||
ebi('acc_settings').onclick = ebi('opa_cfg').onclick = function(e){
|
||||
modalopen('cfg')
|
||||
e.stopPropagation();
|
||||
};
|
||||
|
|
@ -1214,6 +1238,14 @@ function goto(dest) {
|
|||
clmod(obj[a], 'vis');
|
||||
|
||||
if (dest) {
|
||||
var rewritten = ['cfg', 'mkdir', 'new_md'];
|
||||
if(rewritten.includes(dest)){
|
||||
if(dest == 'cfg')
|
||||
clmod(ebi('cfg'), 'vis', true);
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
var lnk = QS('#ops>a[data-dest=' + dest + ']'),
|
||||
nps = lnk.getAttribute('data-perm');
|
||||
|
||||
|
|
@ -1227,10 +1259,6 @@ function goto(dest) {
|
|||
if (!has(perms, 'read') && !has(perms, 'write') && (dest == 'up2k'))
|
||||
return;
|
||||
|
||||
if(dest == 'cfg'){
|
||||
clmod(ebi(dest), 'vis', 1);
|
||||
return;
|
||||
}
|
||||
clmod(ebi('op_' + dest), 'act', 1);
|
||||
clmod(lnk, 'act', 1);
|
||||
|
||||
|
|
@ -1421,7 +1449,20 @@ var mpl = (function () {
|
|||
});
|
||||
bcfg_bind(r, 'waves', 'au_waves', true, function (v) {
|
||||
if (!v) pbar.unwave();
|
||||
r.selectprogbar();
|
||||
});
|
||||
r.selectprogbar =function(){
|
||||
if (r.waves){
|
||||
clmod(ebi('progbar'), 'vis', true)
|
||||
clmod(ebi('altprogbar'), 'vis', false)
|
||||
}
|
||||
else{
|
||||
clmod(ebi('progbar'), 'vis', false)
|
||||
clmod(ebi('altprogbar'), 'vis', true)
|
||||
}
|
||||
}
|
||||
r.selectprogbar();
|
||||
|
||||
bcfg_bind(r, 'os_seek', 'au_os_seek', !IPHONE, announce);
|
||||
bcfg_bind(r, 'osd_cv', 'au_osd_cv', true, announce);
|
||||
bcfg_bind(r, 'clip', 'au_npclip', false, function (v) {
|
||||
|
|
@ -1474,6 +1515,42 @@ var mpl = (function () {
|
|||
draw_pb_mode();
|
||||
}
|
||||
|
||||
ebi('cyclebtn_loopmode').onclick = function(){
|
||||
if(r.pb_mode == 'loop'){
|
||||
// #3: folder loop was set, switch to none / next folder
|
||||
r.pb_mode = 'next';
|
||||
}
|
||||
else if(clgot(ebi('au_loop'), 'on')) {
|
||||
// #2: single loop was set, switch to folder loop
|
||||
ebi('au_loop').click();
|
||||
r.pb_mode = 'loop';
|
||||
}
|
||||
else {
|
||||
// #1: no loop set, click single loop btn
|
||||
ebi('au_loop').click();
|
||||
}
|
||||
swrite('pb_mode', r.pb_mode);
|
||||
draw_pb_mode();
|
||||
drawLoopStatus();
|
||||
}
|
||||
|
||||
function drawLoopStatus(){
|
||||
var btn = ebi('cyclebtn_loopmode');
|
||||
if(r.pb_mode == 'loop'){
|
||||
btn.innerHTML = '🔁';
|
||||
clmod(btn, 'on', true);
|
||||
}
|
||||
else if(clgot(ebi('au_loop'), 'on')) {
|
||||
btn.innerHTML = '🔂';
|
||||
clmod(btn, 'on', true);
|
||||
}
|
||||
else {
|
||||
btn.innerHTML = '🔁';
|
||||
clmod(btn, 'on', false);
|
||||
}
|
||||
}
|
||||
drawLoopStatus();
|
||||
|
||||
function set_tint() {
|
||||
var tint = icfg_get('pb_tint', 0);
|
||||
if (!tint)
|
||||
|
|
@ -1979,7 +2056,7 @@ var widget = (function () {
|
|||
r.paused = function (paused) {
|
||||
if (was_paused != paused) {
|
||||
was_paused = paused;
|
||||
ebi('bplay').innerHTML = paused ? '▶' : '⏸';
|
||||
ebi('bplay').innerHTML = paused ? svg_play : svg_pause;
|
||||
}
|
||||
};
|
||||
r.setvis = function () {
|
||||
|
|
@ -2264,6 +2341,11 @@ var pbar = (function () {
|
|||
t2 = s2ms(apos),
|
||||
x = sm * apos;
|
||||
|
||||
ebi('txtpos').innerHTML = t2;
|
||||
ebi('txtsongend').innerHTML = t1;
|
||||
if(adur > 0)
|
||||
ebi('sliderpos').value = apos / adur;
|
||||
|
||||
if (w && html_txt != t2) {
|
||||
ebi('np_pos').textContent = html_txt = t2;
|
||||
if (mpl.os_ctl)
|
||||
|
|
@ -2348,7 +2430,7 @@ var vbar = (function () {
|
|||
ctx.fillStyle = grad2; ctx.fillRect(0, 0, w, h);
|
||||
ctx.fillStyle = grad1; ctx.fillRect(0, 0, w * mp.vol, h);
|
||||
|
||||
var vt = 'volume ' + Math.floor(mp.vol * 100),
|
||||
var vt = Math.floor(mp.vol * 100) + '%',
|
||||
tw = ctx.measureText(vt).width,
|
||||
x = w * mp.vol - tw - 8,
|
||||
li = dy;
|
||||
|
|
@ -2581,6 +2663,13 @@ function mpause(e) {
|
|||
|
||||
seek_au_mul(x * 1.0 / rect.width);
|
||||
};
|
||||
ebi('sliderpos').oninput = function(){
|
||||
if (!mp.au) {
|
||||
play(0, true);
|
||||
return mp.fade_in();
|
||||
}
|
||||
seek_au_mul(this.value);
|
||||
}
|
||||
|
||||
if (!TOUCH) {
|
||||
bar.onwheel = function (e) {
|
||||
|
|
@ -3308,7 +3397,9 @@ function play(tid, is_ev, seek) {
|
|||
mp.au.src = mp.au.rsrc = url;
|
||||
}
|
||||
|
||||
mp.au.osrc = mp.tracks[tid];
|
||||
mp.au.osrc = decodeURI(mp.tracks[tid].split('/').pop());
|
||||
ebi('trackname').innerHTML = mp.au.osrc;
|
||||
ebi('trackname').setAttribute('tt', mp.au.osrc);
|
||||
afilt.apply();
|
||||
|
||||
setTimeout(function () {
|
||||
|
|
@ -3361,6 +3452,7 @@ function play(tid, is_ev, seek) {
|
|||
pbar.unwave();
|
||||
if (mpl.waves)
|
||||
pbar.loadwaves(url.replace(/\bth=(opus|mp3)&/, '') + '&th=p');
|
||||
mpl.selectprogbar();
|
||||
|
||||
mpss.go();
|
||||
mpui.progress_updater();
|
||||
|
|
@ -6428,6 +6520,14 @@ var ahotkeys = function (e) {
|
|||
// search
|
||||
var search_ui = (function () {
|
||||
var sconf = [
|
||||
[
|
||||
L.s_fn,
|
||||
["name", "name", L.s_f1, "15", ".exe$"]
|
||||
],
|
||||
[
|
||||
L.s_rd,
|
||||
["path", "path", L.s_r1, "30", "windows -system32"]
|
||||
],
|
||||
[
|
||||
L.s_sz,
|
||||
["szl", "sz_min", L.s_s1, "14", ""],
|
||||
|
|
@ -6438,14 +6538,6 @@ var search_ui = (function () {
|
|||
["dtl", "dt_min", L.s_d1, "14", "1997-08-15, 01:00"],
|
||||
["dtu", "dt_max", L.s_d2, "14", "2020"]
|
||||
],
|
||||
[
|
||||
L.s_rd,
|
||||
["path", "path", L.s_r1, "30", "windows -system32"]
|
||||
],
|
||||
[
|
||||
L.s_fn,
|
||||
["name", "name", L.s_f1, "15", ".exe$"]
|
||||
],
|
||||
[
|
||||
L.s_ta,
|
||||
["tags", "tags", L.s_t1, "30", "^irui$"]
|
||||
|
|
@ -7931,7 +8023,7 @@ var treectl = (function () {
|
|||
onresize();
|
||||
}
|
||||
|
||||
ebi('treeToggleBtn').tt = L.tt_entree;
|
||||
ebi('treeToggleBtn').setAttribute('tt', L.tt_entree);
|
||||
|
||||
ebi('treeToggleBtn').onclick = r.toggleTree;
|
||||
ebi('visdir').onclick = tree_scrollto;
|
||||
|
|
@ -9800,6 +9892,16 @@ var rcm = (function () {
|
|||
input.focus();
|
||||
}
|
||||
|
||||
// new file
|
||||
ebi('opa_md').onclick = function(){
|
||||
mktemp();
|
||||
}
|
||||
|
||||
// new file
|
||||
ebi('opa_mkd').onclick = function(){
|
||||
mktemp(true);
|
||||
}
|
||||
|
||||
var opts = QSA('#rcm a');
|
||||
for (var i = 0; i < opts.length; i++) {
|
||||
opts[i].onclick = function(e) {
|
||||
|
|
|
|||
Loading…
Reference in a new issue