Progress:

Duration:

{componentState.duration}s

{#if componentState.segment}

Segment:

{componentState.segment[0]} -- {componentState.segment[1]}

{/if}

Current frame:

{componentState.currentFrame}/{componentState.totalFrames}

Speed:

{componentState.speed}

Autoplay:

{componentState.autoplay}

Loop:

{componentState.loop} {componentState.loop ? `(Loop count: ${componentState.loopCount})` : ''}

Mode:

{componentState.mode}

Layout:

{JSON.stringify(componentState.layout)}

{#if Object.keys(componentState.allMarkers).length}

All markers:

{componentState.allMarkers}

{/if} {#if componentState.marker}

Active marker:

{componentState.marker}

{/if} {#if componentState.allThemes.length}

All themes:

{componentState.allThemes.join(', ')}

{/if} {#if componentState.activeThemeId}

Active theme ID:

{componentState.activeThemeId}

{/if}

isPaused:

{componentState.isPaused}

isPlaying:

{componentState.isPlaying}

isStopped:

{componentState.isStopped}

isLoaded:

{componentState.isLoaded}

isFrozen:

{componentState.isFrozen}