{
lyricClick(index);
}}
on:touchend={() => {
clickMask.style.backgroundColor = 'transparent';
}}
on:touchstart={() => {
clickMask.style.backgroundColor = 'rgba(255,255,255,.3)';
}}
style="transform: translate3d({positionX}px, {positionY}px, 0); transition-property: text-shadow;
transition-duration: 0.36s; transition-timing-function: ease-out;
transform-origin: center left; font-family: LyricFont, sans-serif;"
>
{#if debugMode}
{index}: duration: {(line.end - line.start).toFixed(3)}, {line.start.toFixed(3)}~{line.end.toFixed(3)}
{/if}
{#if line.words !== undefined && line.words.length > 0}
{#each line.words as word}
{#if word.word}
{#each word.word.split('') as chr, i}
(word.endTime - word.startTime) * (i / word.word.length) + word.startTime
? 'opacity-100 text-glow'
: 'opacity-35') + ' inline-block ' +
(((word.endTime - word.startTime) > 0.6) ? '' : 'duration-200')}
style={((word.endTime - word.startTime) < 0.3) ? '' :
`transition-duration: ${(word.endTime - word.startTime) / 1.3}s;`}
>
{chr}
{/each}
{/if}
{/each}
{:else}
{line.text}
{/if}
{#if line.translation}
{line.translation}
{/if}