refactor(legacy): remove unused waveform related code (#3003)
Co-authored-by: Thomas Göttgens <tgoettgens@mail.com> Co-authored-by: Kyle Robbertze <paddatrapper@users.noreply.github.com>
This commit is contained in:
Thomas Göttgens
GitHub
parent
a556b73d2a
commit
064c435b09
8 changed files with 62 additions and 1146 deletions
|
|
@ -4,19 +4,14 @@ var wavesurfer = [];
|
|||
|
||||
window.addEventListener("load",()=>{
|
||||
let op=window.inputKnobsOptions||{};
|
||||
op.knobWidth=op.knobWidth||op.knobDiameter||64;
|
||||
op.knobHeight=op.knobHeight||op.knobDiameter||64;
|
||||
op.sliderWidth=op.sliderWidth||op.sliderDiameter||128;
|
||||
op.sliderHeight=op.sliderHeight||op.sliderDiameter||20;
|
||||
op.switchWidth=op.switchWidth||op.switchDiameter||24;
|
||||
op.switchHeight=op.switchHeight||op.switchDiameter||24;
|
||||
op.fgcolor=op.fgcolor||"#f00";
|
||||
op.bgcolor=op.bgcolor||"#000";
|
||||
op.knobMode=op.knobMode||"linear";
|
||||
op.sliderMode=op.sliderMode||"relative";
|
||||
let styles=document.createElement("style");
|
||||
styles.innerHTML=
|
||||
`input[type=range].input-knob,input[type=range].input-slider{
|
||||
`input[type=range].input-slider{
|
||||
-webkit-appearance:none;
|
||||
-moz-appearance:none;
|
||||
border:none;
|
||||
|
|
@ -28,52 +23,24 @@ window.addEventListener("load",()=>{
|
|||
background-color:transparent;
|
||||
touch-action:none;
|
||||
}
|
||||
input[type=range].input-knob{
|
||||
width:${op.knobWidth}px; height:${op.knobHeight}px;
|
||||
}
|
||||
input[type=range].input-slider{
|
||||
width:${op.sliderWidth}px; height:${op.sliderHeight}px;
|
||||
}
|
||||
input[type=range].input-knob::-webkit-slider-thumb,input[type=range].input-slider::-webkit-slider-thumb{
|
||||
input[type=range].input-slider::-webkit-slider-thumb{
|
||||
-webkit-appearance:none;
|
||||
opacity:0;
|
||||
}
|
||||
input[type=range].input-knob::-moz-range-thumb,input[type=range].input-slider::-moz-range-thumb{
|
||||
input[type=range].input-slider::-moz-range-thumb{
|
||||
-moz-appearance:none;
|
||||
height:0;
|
||||
border:none;
|
||||
}
|
||||
input[type=range].input-knob::-moz-range-track,input[type=range].input-slider::-moz-range-track{
|
||||
input[type=range].input-slider::-moz-range-track{
|
||||
-moz-appearance:none;
|
||||
height:0;
|
||||
border:none;
|
||||
}
|
||||
input[type=checkbox].input-switch,input[type=radio].input-switch {
|
||||
width:${op.switchWidth}px;
|
||||
height:${op.switchHeight}px;
|
||||
-webkit-appearance:none;
|
||||
-moz-appearance:none;
|
||||
background-size:100% 200%;
|
||||
background-position:0% 0%;
|
||||
background-repeat:no-repeat;
|
||||
border:none;
|
||||
border-radius:0;
|
||||
background-color:transparent;
|
||||
}
|
||||
input[type=checkbox].input-switch:checked,input[type=radio].input-switch:checked {
|
||||
background-position:0% 100%;
|
||||
}`;
|
||||
document.head.appendChild(styles);
|
||||
let makeKnobFrames=(fr,fg,bg)=>{
|
||||
let r=
|
||||
`<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="${fr*64}" viewBox="0 0 64 ${fr*64}" preserveAspectRatio="none">
|
||||
<defs><g id="K"><circle cx="32" cy="32" r="30" fill="${bg}"/>
|
||||
<line x1="32" y1="28" x2="32" y2="7" stroke-linecap="round" stroke-width="6" stroke="${fg}"/></g></defs>
|
||||
<use xlink:href="#K" transform="rotate(-135,32,32)"/>`;
|
||||
for(let i=1;i<fr;++i)
|
||||
r+=`<use xlink:href="#K" transform="translate(0,${64*i}) rotate(${-135+270*i/fr},32,32)"/>`;
|
||||
return r+"</svg>";
|
||||
}
|
||||
let makeHSliderFrames=(fr,fg,bg,w,h)=>{
|
||||
let r=
|
||||
`<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="${w}" height="${fr*h}" viewBox="0 0 ${w} ${fr*h}" preserveAspectRatio="none">
|
||||
|
|
@ -85,46 +52,6 @@ input[type=checkbox].input-switch:checked,input[type=radio].input-switch:checked
|
|||
}
|
||||
return r+"</svg>";
|
||||
}
|
||||
let makeVSliderFrames=(fr,fg,bg,w,h)=>{
|
||||
let r=
|
||||
`<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="${w}" height="${fr*h}" viewBox="0 0 ${w} ${fr*h}" preserveAspectRatio="none">
|
||||
<defs><rect id="B" x="0" y="0" width="${w}" height="${h}" rx="${w/2}" ry="${w/2}" fill="${bg}"/>
|
||||
<circle id="K" x="0" y="0" r="${w/2*0.9}" fill="${fg}"/></defs>`;
|
||||
for(let i=0;i<fr;++i){
|
||||
r+=`<use xlink:href="#B" transform="translate(0,${h*i})"/>`;
|
||||
r+=`<use xlink:href="#K" transform="translate(${w/2} ${h*(i+1)-w/2-i*(h-w)/100})"/>`;
|
||||
}
|
||||
return r+"</svg>";
|
||||
}
|
||||
let initSwitches=(el)=>{
|
||||
let w,h,d,fg,bg;
|
||||
if(el.inputKnobs)
|
||||
return;
|
||||
el.inputKnobs={};
|
||||
el.refresh=()=>{
|
||||
let src=el.getAttribute("data-src");
|
||||
d=+el.getAttribute("data-diameter");
|
||||
let st=document.defaultView.getComputedStyle(el,null);
|
||||
w=parseFloat(el.getAttribute("data-width")||d||st.width);
|
||||
h=parseFloat(el.getAttribute("data-height")||d||st.height);
|
||||
bg=el.getAttribute("data-bgcolor")||op.bgcolor;
|
||||
fg=el.getAttribute("data-fgcolor")||op.fgcolor;
|
||||
el.style.width=w+"px";
|
||||
el.style.height=h+"px";
|
||||
if(src)
|
||||
el.style.backgroundImage="url("+src+")";
|
||||
else {
|
||||
let minwh=Math.min(w,h);
|
||||
let svg=
|
||||
`<svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${h*2}" viewBox="0 0 ${w} ${h*2}" preserveAspectRatio="none">
|
||||
<g><rect fill="${bg}" x="1" y="1" width="${w-2}" height="${h-2}" rx="${minwh*0.25}" ry="${minwh*0.25}"/>
|
||||
<rect fill="${bg}" x="1" y="${h+1}" width="${w-2}" height="${h-2}" rx="${minwh*0.25}" ry="${minwh*0.25}"/>
|
||||
<circle fill="${fg}" cx="${w*0.5}" cy="${h*1.5}" r="${minwh*0.25}"/></g></svg>`;
|
||||
el.style.backgroundImage="url(data:image/svg+xml;base64,"+btoa(svg)+")";
|
||||
}
|
||||
};
|
||||
el.refresh();
|
||||
};
|
||||
let initKnobs=(el)=>{
|
||||
let w,h,d,fg,bg;
|
||||
if(el.inputKnobs){
|
||||
|
|
@ -140,22 +67,9 @@ input[type=checkbox].input-switch:checked,input[type=radio].input-switch:checked
|
|||
bg=el.getAttribute("data-bgcolor")||op.bgcolor;
|
||||
fg=el.getAttribute("data-fgcolor")||op.fgcolor;
|
||||
ik.sensex=ik.sensey=200;
|
||||
if(el.className.indexOf("input-knob")>=0)
|
||||
ik.itype="k";
|
||||
else{
|
||||
if(w>=h){
|
||||
ik.itype="h";
|
||||
ik.sensex=w-h;
|
||||
ik.sensey=Infinity;
|
||||
el.style.backgroundSize="auto 100%";
|
||||
}
|
||||
else{
|
||||
ik.itype="v";
|
||||
ik.sensex="Infinity";
|
||||
ik.sensey=h-w;
|
||||
el.style.backgroundSize="100% auto";
|
||||
}
|
||||
}
|
||||
ik.sensex=w-h;
|
||||
ik.sensey=Infinity;
|
||||
el.style.backgroundSize="auto 100%";
|
||||
el.style.width=w+"px";
|
||||
el.style.height=h+"px";
|
||||
ik.frameheight=h;
|
||||
|
|
@ -169,18 +83,11 @@ input[type=checkbox].input-switch:checked,input[type=radio].input-switch:checked
|
|||
ik.sprites=0;
|
||||
if(ik.sprites>=1)
|
||||
el.style.backgroundSize=`100% ${(ik.sprites+1)*100}%`;
|
||||
else if(ik.itype!="k"){
|
||||
el.style.backgroundColor=bg;
|
||||
el.style.borderRadius=Math.min(w,h)*0.25+"px";
|
||||
}
|
||||
el.style.backgroundColor=bg;
|
||||
el.style.borderRadius=Math.min(w,h)*0.25+"px";
|
||||
}
|
||||
else{
|
||||
let svg;
|
||||
switch(ik.itype){
|
||||
case "k": svg=makeKnobFrames(101,fg,bg); break;
|
||||
case "h": svg=makeHSliderFrames(101,fg,bg,w,h); break;
|
||||
case "v": svg=makeVSliderFrames(101,fg,bg,w,h); break;
|
||||
}
|
||||
let svg=makeHSliderFrames(101,fg,bg,w,h);
|
||||
ik.sprites=100;
|
||||
el.style.backgroundImage="url(data:image/svg+xml;base64,"+btoa(svg)+")";
|
||||
el.style.backgroundSize=`100% ${(ik.sprites+1)*100}%`;
|
||||
|
|
@ -209,12 +116,7 @@ input[type=checkbox].input-switch:checked,input[type=radio].input-switch:checked
|
|||
let rc=el.getBoundingClientRect();
|
||||
let cx=(rc.left+rc.right)*0.5,cy=(rc.top+rc.bottom)*0.5;
|
||||
let dx=ev.clientX,dy=ev.clientY;
|
||||
let da=Math.atan2(ev.clientX-cx,cy-ev.clientY);
|
||||
if(ik.itype=="k"&&op.knobMode=="circularabs"){
|
||||
dv=ik.valrange.min+(da/Math.PI*0.75+0.5)*(ik.valrange.max-ik.valrange.min);
|
||||
el.setValue(dv);
|
||||
}
|
||||
if(ik.itype!="k"&&op.sliderMode=="abs"){
|
||||
if(op.sliderMode=="abs"){
|
||||
dv=(ik.valrange.min+ik.valrange.max)*0.5+((dx-cx)/ik.sensex-(dy-cy)/ik.sensey)*(ik.valrange.max-ik.valrange.min);
|
||||
el.setValue(dv);
|
||||
}
|
||||
|
|
@ -235,40 +137,10 @@ input[type=checkbox].input-switch:checked,input[type=radio].input-switch:checked
|
|||
if(ev.touches)
|
||||
ev = ev.touches[0];
|
||||
let dx=ev.clientX-ik.dragfrom.x,dy=ev.clientY-ik.dragfrom.y;
|
||||
let da=Math.atan2(ev.clientX-cx,cy-ev.clientY);
|
||||
switch(ik.itype){
|
||||
case "k":
|
||||
switch(op.knobMode){
|
||||
case "linear":
|
||||
dv=(dx/ik.sensex-dy/ik.sensey)*(ik.valrange.max-ik.valrange.min);
|
||||
if(ev.shiftKey)
|
||||
dv*=0.2;
|
||||
el.setValue(ik.dragfrom.v+dv);
|
||||
break;
|
||||
case "circularabs":
|
||||
if(!ev.shiftKey){
|
||||
dv=ik.valrange.min+(da/Math.PI*0.75+0.5)*(ik.valrange.max-ik.valrange.min);
|
||||
el.setValue(dv);
|
||||
break;
|
||||
}
|
||||
case "circularrel":
|
||||
if(da>ik.dragfrom.a+Math.PI) da-=Math.PI*2;
|
||||
if(da<ik.dragfrom.a-Math.PI) da+=Math.PI*2;
|
||||
da-=ik.dragfrom.a;
|
||||
dv=da/Math.PI/1.5*(ik.valrange.max-ik.valrange.min);
|
||||
if(ev.shiftKey)
|
||||
dv*=0.2;
|
||||
el.setValue(ik.dragfrom.v+dv);
|
||||
}
|
||||
break;
|
||||
case "h":
|
||||
case "v":
|
||||
dv=(dx/ik.sensex-dy/ik.sensey)*(ik.valrange.max-ik.valrange.min);
|
||||
if(ev.shiftKey)
|
||||
dv*=0.2;
|
||||
el.setValue(ik.dragfrom.v+dv);
|
||||
break;
|
||||
}
|
||||
dv=(dx/ik.sensex-dy/ik.sensey)*(ik.valrange.max-ik.valrange.min);
|
||||
if(ev.shiftKey)
|
||||
dv*=0.2;
|
||||
el.setValue(ik.dragfrom.v+dv);
|
||||
};
|
||||
ik.pointerup=()=>{
|
||||
document.removeEventListener("mousemove",ik.pointermove);
|
||||
|
|
@ -300,19 +172,8 @@ input[type=checkbox].input-switch:checked,input[type=radio].input-switch:checked
|
|||
let v=(el.value-ik.valrange.min)/(ik.valrange.max-ik.valrange.min);
|
||||
if(ik.sprites>=1)
|
||||
el.style.backgroundPosition="0px "+(-((v*ik.sprites)|0)*ik.frameheight)+"px";
|
||||
else{
|
||||
switch(ik.itype){
|
||||
case "k":
|
||||
el.style.transform="rotate("+(270*v-135)+"deg)";
|
||||
break;
|
||||
case "h":
|
||||
el.style.backgroundPosition=((w-h)*v)+"px 0px";
|
||||
break;
|
||||
case "v":
|
||||
el.style.backgroundPosition="0px "+(h-w)*(1-v)+"px";
|
||||
break;
|
||||
}
|
||||
}
|
||||
else
|
||||
el.style.backgroundPosition=((w-h)*v)+"px 0px";
|
||||
ik.valueold=el.value;
|
||||
}
|
||||
};
|
||||
|
|
@ -325,13 +186,9 @@ input[type=checkbox].input-switch:checked,input[type=radio].input-switch:checked
|
|||
el.addEventListener("click",function (event){ event.stopPropagation(); });
|
||||
}
|
||||
let refreshque=()=>{
|
||||
let elem=document.querySelectorAll("input.input-knob,input.input-slider");
|
||||
let elem=document.querySelectorAll("input.input-slider");
|
||||
for(let i=0;i<elem.length;++i)
|
||||
procque.push([initKnobs,elem[i]]);
|
||||
elem=document.querySelectorAll("input[type=checkbox].input-switch,input[type=radio].input-switch");
|
||||
for(let i=0;i<elem.length;++i){
|
||||
procque.push([initSwitches,elem[i]]);
|
||||
}
|
||||
}
|
||||
let procque=[];
|
||||
refreshque();
|
||||
|
|
@ -497,7 +354,7 @@ function secondaryLabelInterval(pxPerSec) {
|
|||
}
|
||||
|
||||
|
||||
function renderWaveform(track_id, selector_id, url, cuein, cueout, gain_level, default_gain) {
|
||||
function renderWaveform(track_id, selector_id, url, cuein, cueout) {
|
||||
|
||||
var trackid = "t"+track_id;
|
||||
var a = cuein.split(':'); // split it at the colons
|
||||
|
|
@ -613,15 +470,5 @@ function renderWaveform(track_id, selector_id, url, cuein, cueout, gain_level, d
|
|||
//Volume to Gain deciSteps(gainNum(gain_level))
|
||||
eTrack.setVolume(0.6);
|
||||
|
||||
document.querySelector("#volume-"+ track_id).value = eTrack.getVolume();
|
||||
|
||||
var volumeInput = document.querySelector("#volume-"+ track_id);
|
||||
|
||||
var onChangeVolume = function (e) {
|
||||
//eTrack.setVolume(e.target.value);
|
||||
};
|
||||
volumeInput.addEventListener('input', onChangeVolume);
|
||||
volumeInput.addEventListener('change', onChangeVolume);
|
||||
|
||||
return eTrack;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue