@braccato/core 0.1.3 → 0.1.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +13 -13
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -396,11 +396,11 @@ function wt(t, e) {
|
|
|
396
396
|
;
|
|
397
397
|
t.skipScrollsDecayTimes = t.skipScrollsDecayTimes.slice(a), t.skipScrolls -= a, t.skipScrolls < 1 && (t.skipScrolls = 1);
|
|
398
398
|
}
|
|
399
|
-
const U = "braccato--animating", j = "braccato--pre-animating",
|
|
399
|
+
const U = "braccato--animating", j = "braccato--pre-animating", q = "braccato--paused", et = "braccato--active", Mt = "braccato--user-scrolling", xt = 0.5, Ct = 0.5, Et = 0.62, At = 0.37, Lt = 150, Y = /* @__PURE__ */ new Map();
|
|
400
400
|
function kt(t) {
|
|
401
401
|
return t ? t.endsWith("ms") ? Number.parseFloat(t.slice(0, -2)) : t.endsWith("s") ? Number.parseFloat(t.slice(0, -1)) * 1e3 : 0 : 0;
|
|
402
402
|
}
|
|
403
|
-
function
|
|
403
|
+
function W(t, e) {
|
|
404
404
|
let a = Y.get(e);
|
|
405
405
|
return a === void 0 && (a = kt(getComputedStyle(t).getPropertyValue(e)), Y.set(e, a)), a;
|
|
406
406
|
}
|
|
@@ -438,8 +438,8 @@ function Nt(t, e) {
|
|
|
438
438
|
const x = i ? a - n : 0;
|
|
439
439
|
r += x / 1e3;
|
|
440
440
|
const { lines: g, container: v, syncType: P } = s;
|
|
441
|
-
P === "richsync" ? r +=
|
|
442
|
-
const L = r +
|
|
441
|
+
P === "richsync" ? r += W(v, "--braccato-richsync-timing-offset") / 1e3 : r += W(v, "--braccato-timing-offset") / 1e3;
|
|
442
|
+
const L = r + W(v, "--braccato-scroll-timing-offset") / 1e3, w = c.getBoundingClientRect().height;
|
|
443
443
|
let u = c.scrollTop;
|
|
444
444
|
const _ = [], E = [];
|
|
445
445
|
let A = h;
|
|
@@ -455,17 +455,17 @@ function Nt(t, e) {
|
|
|
455
455
|
const Z = [l, ...l.parts];
|
|
456
456
|
if (i) {
|
|
457
457
|
for (const O of Z)
|
|
458
|
-
O.element.classList.remove(
|
|
458
|
+
O.element.classList.remove(q);
|
|
459
459
|
l.isAnimating = !1;
|
|
460
460
|
} else
|
|
461
461
|
for (const O of Z)
|
|
462
|
-
O.animationStartTimeMs > a ? (O.element.classList.remove(U), O.element.classList.remove(j)) : O.element.classList.add(
|
|
462
|
+
O.animationStartTimeMs > a ? (O.element.classList.remove(U), O.element.classList.remove(j)) : O.element.classList.add(q);
|
|
463
463
|
}
|
|
464
464
|
l.isAnimating || E.push(l);
|
|
465
465
|
} else if (l.isSelected) {
|
|
466
466
|
const z = [l, ...l.parts];
|
|
467
467
|
for (const R of z)
|
|
468
|
-
R.element.style.setProperty("--braccato-swipe-delay", ""), R.element.style.setProperty("--braccato-anim-delay", ""), R.element.classList.remove(U), R.element.classList.remove(j), R.element.classList.remove(
|
|
468
|
+
R.element.style.setProperty("--braccato-swipe-delay", ""), R.element.style.setProperty("--braccato-anim-delay", ""), R.element.classList.remove(U), R.element.classList.remove(j), R.element.classList.remove(q), R.animationStartTimeMs = Number.POSITIVE_INFINITY;
|
|
469
469
|
l.isSelected = !1, l.isAnimating = !1;
|
|
470
470
|
}
|
|
471
471
|
}
|
|
@@ -474,7 +474,7 @@ function Nt(t, e) {
|
|
|
474
474
|
const l = [S, ...S.parts];
|
|
475
475
|
for (const b of l) {
|
|
476
476
|
const N = r - b.time;
|
|
477
|
-
b.element.classList.remove(U), b.element.classList.remove(
|
|
477
|
+
b.element.classList.remove(U), b.element.classList.remove(q), b.element.style.setProperty("--braccato-swipe-delay", `${-N - b.duration * 0.1}s`), b.element.style.setProperty("--braccato-anim-delay", `${-N}s`), b.element.classList.add(j);
|
|
478
478
|
}
|
|
479
479
|
}
|
|
480
480
|
rt(E[0].element);
|
|
@@ -496,7 +496,7 @@ function Nt(t, e) {
|
|
|
496
496
|
if (a > y.nextScrollAllowedTime) {
|
|
497
497
|
if (y.queuedScroll = !1, o && Math.abs(u - M) > 2) {
|
|
498
498
|
v.style.transitionTimingFunction = "", v.style.transitionProperty = "", v.style.transitionDuration = "";
|
|
499
|
-
const T =
|
|
499
|
+
const T = W(v, "transition-duration");
|
|
500
500
|
v.style.transition = "none", v.style.transform = `translate(0px, ${-(u - M)}px)`, rt(v), v.style.transition = "", v.style.transform = "translate(0px, 0px)", y.nextScrollAllowedTime = T + a + 20;
|
|
501
501
|
}
|
|
502
502
|
u = M, y.scrollPos = u, c.scrollTop = u, y.skipScrolls += 1, y.skipScrollsDecayTimes.push(a + 2e3);
|
|
@@ -508,7 +508,7 @@ const Rt = /[\p{Script=Arabic}\p{Script=Hebrew}\p{Script=Syriac}\p{Script=Thaana
|
|
|
508
508
|
function Pt(t) {
|
|
509
509
|
return Rt.test(t);
|
|
510
510
|
}
|
|
511
|
-
const zt = "braccato--line", Ot = "braccato--word", Ft = "braccato--break", B = "braccato-background-lyric", at = "braccato-rtl", Ut = "braccato-zero-dur-animate",
|
|
511
|
+
const zt = "braccato--line", Ot = "braccato--word", Ft = "braccato--break", B = "braccato-background-lyric", at = "braccato-rtl", Ut = "braccato-zero-dur-animate", qt = "braccato--romanized", Wt = "braccato--translated";
|
|
512
512
|
function H(t, e) {
|
|
513
513
|
const a = document.createElement("span");
|
|
514
514
|
a.classList.add(Ft), a.style.order = String(e), t.appendChild(a);
|
|
@@ -586,13 +586,13 @@ function $t(t, e, a = {}) {
|
|
|
586
586
|
}))), x.every((g) => g.durationMs === 0) || (s = "richsync"), it(x, h, m, r), H(m, 1), m.dataset.time = String(h.time), m.dataset.duration = String(h.duration), m.dataset.lineNumber = String(p), m.style.setProperty("--braccato-duration", `${f.durationMs}ms`), f.agent && (m.dataset.agent = f.agent), f.romanization) {
|
|
587
587
|
H(m, 4);
|
|
588
588
|
const g = document.createElement("div");
|
|
589
|
-
g.classList.add(
|
|
589
|
+
g.classList.add(qt), g.style.order = "5", f.timedRomanization && f.timedRomanization.length > 0 && !o ? it(f.timedRomanization, h, g, r) : g.textContent = `
|
|
590
590
|
${f.romanization}`, m.appendChild(g);
|
|
591
591
|
}
|
|
592
592
|
if (f.translation) {
|
|
593
593
|
H(m, 6);
|
|
594
594
|
const g = document.createElement("div");
|
|
595
|
-
g.classList.add(
|
|
595
|
+
g.classList.add(Wt), g.style.order = "7", g.textContent = `
|
|
596
596
|
${f.translation.text}`, m.appendChild(g);
|
|
597
597
|
}
|
|
598
598
|
c.push(h), e.appendChild(m);
|
|
@@ -607,7 +607,7 @@ ${f.translation.text}`, m.appendChild(g);
|
|
|
607
607
|
container: e
|
|
608
608
|
};
|
|
609
609
|
}
|
|
610
|
-
const jt = ":host{display:block;overflow-y:auto;position:relative;container-type:size;scrollbar-width:none}:host::-webkit-scrollbar{display:none}:host(:has(.braccato--user-scrolling)){scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.15) transparent}:host(:has(.braccato--user-scrolling))::-webkit-scrollbar{display:block;width:6px}:host(:has(.braccato--user-scrolling))::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:3px}:host(:has(.braccato--user-scrolling))::-webkit-scrollbar-track{background:transparent}.braccato-container{font-family:var(--braccato-font-family);font-size:var(--braccato-font-size);font-weight:var(--braccato-font-weight);isolation:isolate;line-height:var(--braccato-line-height);position:relative;z-index:1;transition:transform var(--braccato-scroll-duration) var(--braccato-scroll-timing-function) 0s;padding-top:2rem;padding-bottom:
|
|
610
|
+
const jt = ":host{display:block;overflow-y:auto;position:relative;container-type:size;scrollbar-width:none}:host::-webkit-scrollbar{display:none}:host(:has(.braccato--user-scrolling)){scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.15) transparent}:host(:has(.braccato--user-scrolling))::-webkit-scrollbar{display:block;width:6px}:host(:has(.braccato--user-scrolling))::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:3px}:host(:has(.braccato--user-scrolling))::-webkit-scrollbar-track{background:transparent}.braccato-container{font-family:var(--braccato-font-family);font-size:var(--braccato-font-size);font-weight:var(--braccato-font-weight);isolation:isolate;line-height:var(--braccato-line-height);position:relative;z-index:1;transition:transform var(--braccato-scroll-duration) var(--braccato-scroll-timing-function) 0s;padding-top:2rem;padding-bottom:var(--braccato-padding-bottom)}.braccato-container>div{cursor:pointer;padding:var(--braccato-padding) 0;transform-origin:left center;word-break:break-word;transition:filter calc(var(--braccato-duration) / 3) .4s,opacity calc(var(--braccato-duration) / 2) .166s,transform .166s var(--braccato-anim-delay, 0s)}.braccato-container:has(.braccato--active):not(.braccato--user-scrolling)>div:not(.braccato--active):not(.braccato--active~div){opacity:.33;filter:blur(2.5px)}.braccato-container>div.braccato--active{opacity:1;filter:blur(0px)}.braccato-container>div.braccato--active~div{opacity:.66;filter:blur(0px)}.braccato-container>.braccato--animating{opacity:1!important;filter:blur(0px)!important}.braccato-container>div:hover{opacity:1!important;filter:blur(0px)!important;transform:scale(var(--braccato-hover-scale, 1.01));transition:all .3s ease}.braccato--active{cursor:default}:not(.braccato-background-lyric){order:0}.braccato-background-lyric{order:2}.braccato--line>span>span.braccato-background-lyric{font-size:.675em;font-weight:400}.braccato--line{transform:scale(var(--braccato-scale));transition-property:transform;transition-duration:var(--braccato-scale-transition-duration);transition-timing-function:ease;display:flex;flex-flow:row wrap;align-items:start;align-content:flex-start;padding-left:.25em;padding-right:.25em;box-sizing:border-box}.braccato--line.braccato--animating{transform:scale(var(--braccato-active-scale));transition-delay:var(--braccato-anim-delay)}.braccato--line>span{color:var(--braccato-inactive-color);display:inline-block;white-space:pre-wrap}.braccato--word{white-space:pre;display:inline-block;transform:translateY(0);position:relative}.braccato--line.braccato--pre-animating,.braccato--line.braccato--pre-animating .braccato--word{will-change:transform}.braccato--break{flex-basis:100%;height:0}.braccato--word.braccato--animating{animation:braccato-wobble var(--braccato-wobble-duration) forwards ease;animation-delay:var(--braccato-anim-delay);animation-play-state:running}.braccato--word.braccato--animating.braccato--paused{animation-play-state:paused}.braccato--word:after{position:absolute;content:attr(data-content);top:-2rem;left:-2rem;white-space:pre-wrap;padding:2rem;pointer-events:none;color:transparent;box-sizing:content-box;width:100%;background-image:linear-gradient(90deg,var(--braccato-active-color) calc(100% * var(--lyric-transition-amount-start) - 4rem * var(--lyric-transition-amount-start) + 2rem),#00000000 calc(100% * var(--lyric-transition-amount-end) - 4rem * var(--lyric-transition-amount-end) + 2rem + 1px));opacity:0;--lyric-transition-amount-start: -.2;--lyric-transition-amount-end: -.1;--braccato-glow-color: color(display-p3 1 1 1 / .0001);transition:--lyric-transition-amount-start 1s linear 1000s,--lyric-transition-amount-end 1s linear 1000s,opacity .5s ease;-webkit-background-clip:text;background-clip:text}.braccato--word[data-long-word]:after{--braccato-glow-color: color(display-p3 1 1 1 / 1)}.braccato--word.braccato--pre-animating:not(.braccato--animating):after{transition:none;--lyric-transition-amount-start: -.2;--lyric-transition-amount-end: -.1;opacity:0}.braccato--word.braccato--pre-animating:not(.braccato--animating):not(.braccato-zero-dur-animate):after{opacity:1}.braccato--word.braccato--animating:after{opacity:1;animation:braccato-glow max(calc(var(--braccato-duration) * 1.2),1.2s) forwards ease;animation-delay:var(--braccato-anim-delay);animation-play-state:running;--lyric-transition-amount-start: 1.4;--lyric-transition-amount-end: 1.5;transition-property:--lyric-transition-amount-start,--lyric-transition-amount-end,opacity;transition-duration:calc(var(--braccato-duration) * 1.6),calc(var(--braccato-duration) * 1.6),var(--braccato-highlight-fade-in-duration);transition-timing-function:linear,linear,ease;transition-delay:var(--braccato-swipe-delay),var(--braccato-swipe-delay),var(--braccato-anim-delay)}.braccato--word.braccato--animating.braccato--paused:after{transition-duration:100000000s,100000000s,100000000s;--lyric-transition-amount-start: 10;--lyric-transition-amount-end: 10;opacity:.5;animation-play-state:paused}.braccato--translated,.braccato--romanized{display:block;font-size:var(--braccato-translated-font-size);font-weight:var(--braccato-translated-font-weight);font-family:var(--braccato-translated-font-family);color:var(--braccato-translated-color);white-space:normal;line-height:1.1;margin-top:8px}.braccato--romanized>span{color:var(--braccato-inactive-color);display:inline-block;white-space:pre-wrap}.braccato--romanized{width:fit-content;font-size:calc(var(--braccato-translated-font-size) / 1.25);background:#ffffff0d;padding:.375rem .75rem;border:1px solid rgba(255,255,255,.1);border-radius:1rem}.braccato-rtl{direction:rtl}.braccato-rtl.braccato--word:after{background-image:linear-gradient(270deg,var(--braccato-active-color) calc(100% * var(--lyric-transition-amount-start) - 4rem * var(--lyric-transition-amount-start) + 2rem),#00000000 calc(100% * var(--lyric-transition-amount-end) - 4rem * var(--lyric-transition-amount-end) + 2rem + 1px))}.braccato--line[data-agent=v2],.braccato--line[data-agent=v3]{justify-content:flex-end;text-align:right;transform-origin:right center!important}.braccato--line[data-agent=v1000]{justify-content:center;text-align:center;transform-origin:center center!important}.braccato--spacer{padding:0;margin:0}.braccato-autoscroll-btn{font-family:var(--braccato-font-family);position:absolute;display:block;font-size:1.75rem;font-weight:600;white-space:normal;line-height:1.1;width:fit-content;background:#ffffff0d;padding:.5rem 1rem;border:1px solid rgba(255,255,255,.1);border-radius:1rem;color:#fff;left:50%;transform:translate(-50%,2em);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);pointer-events:auto;cursor:pointer;-webkit-user-select:none;user-select:none;z-index:100;transition:opacity .15s linear .05s,transform .2s cubic-bezier(.5,1,.89,1)}.braccato-autoscroll-btn[hidden]{transition:opacity .1s linear,transform .15s ease-in;opacity:0;pointer-events:none;transform:translate(-50%,-3em)}@keyframes braccato-wobble{0%{transform:translateY(0)}to{transform:translateY(-.0375em)}}@keyframes braccato-glow{0%{filter:drop-shadow(0 0 .8rem var(--braccato-glow-color))}to{filter:drop-shadow(0 0 0rem var(--braccato-glow-color))}}", Ht = ':host{--braccato-text-color: color(display-p3 1 1 1 / 1);--braccato-glow-color: color(display-p3 1 1 1 / .5);--braccato-active-color: var(--braccato-text-color);--braccato-inactive-color: color( from var(--braccato-text-color) display-p3 r g b / var(--braccato-inactive-opacity, .3) );--braccato-active-opacity: 1;--braccato-inactive-opacity: .3;--braccato-richsync-timing-offset: .15s;--braccato-timing-offset: .115s;--braccato-scroll-timing-offset: .5s;--braccato-font-family: "Satoshi", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--braccato-font-size: 3rem;--braccato-font-weight: 600;--braccato-line-height: 1.333;--braccato-translated-font-size: 2rem;--braccato-translated-font-weight: 600;--braccato-translated-font-family: var(--braccato-font-family);--braccato-translated-color: color(display-p3 1 1 1 / var(--braccato-translated-opacity, .6));--braccato-scale-transition-duration: .166s;--braccato-highlight-fade-in-duration: .33s;--braccato-highlight-fade-out-duration: .5s;--braccato-wobble-duration: 1s;--braccato-padding: 1.25rem;--braccato-padding-bottom: 50cqh;--braccato-scale: .95;--braccato-active-scale: 1;--braccato-scroll-duration: .75s;--braccato-scroll-timing-function: cubic-bezier(.86, 0, .07, 1)}';
|
|
611
611
|
var Gt = Object.defineProperty, I = (t, e, a, r) => {
|
|
612
612
|
for (var i = void 0, o = t.length - 1, n; o >= 0; o--)
|
|
613
613
|
(n = t[o]) && (i = n(e, a, i) || i);
|