{#if showInfoTop}
{name}
{singer}
{/if}
{#if !showInfoTop}
{name}
{singer}
{/if}
{formatDuration(progress)}
{ userAdjustingProgress.set(true); }} on:mousemove={(e) => { if ($userAdjustingProgress) { adjustDisplayProgress(e.offsetX / progressBar.getBoundingClientRect().width); } }} on:mouseup={(e) => { const offsetX = e.offsetX; progressBarOnClick(e); // Q: why it needs delay? // A: I do not know. setTimeout(()=> { userAdjustingProgress.set(false); progressBarMouseUp(offsetX); }, 50); }} role="slider" tabindex="0" >
{formatDuration(duration)}
clickPlay()} on:focus={null} on:mouseleave={(e) => { e.currentTarget.style.backgroundColor = ''; }} on:mouseover={(e) => { e.currentTarget.style.backgroundColor = 'rgba(0, 0, 0, 0.2)'; }} on:touchend={(e) => { e.preventDefault(); e.currentTarget.style.backgroundColor = ''; e.currentTarget.style.scale = '1'; clickPlay(); }} on:touchstart={(e) => { e.preventDefault(); e.currentTarget.style.backgroundColor = 'rgba(0, 0, 0, 0.2)'; e.currentTarget.style.scale = '0.8'; }} style="filter: drop-shadow( 0 4px 8px rgba(0, 0, 0, 0.12) );" >
volumeBarOnChange(e)} on:keydown on:keyup on:mousedown={() => { userAdjustingVolume = true; }} on:mousemove={(e) => { if (userAdjustingVolume) { volumeBarOnChange(e); } }} on:mouseup={() => { userAdjustingVolume = false; }} on:touchend={(e) => { e.preventDefault(); userAdjustingVolume = false; }} on:touchmove={(e) => { e.preventDefault(); userAdjustingVolume = true; if (userAdjustingVolume) { volumeBarChangeTouch(e); } }} on:touchstart={(e) => { if (e.cancelable) { e.preventDefault(); } userAdjustingVolume = true; }} role="slider" tabindex="0" >
