The preview bar, the guard and diagnostics

The preview bar plays, steps, scrubs, checks and renders a composition in the browser. The guard positions CSS animations at each seek and warns about determinism hazards, and every Kinetic error and warning carries a KN code listed here by range.

The preview bar

The preview bar is a strip fixed to the bottom of the window, outside the composition root. It drives Kinetic's clock, or the runtime's player when one is on the page (Rendering through HyperFrames).

Any of these mounts it after load.

• ?preview on the page's URL.
• data-preview on the extension's script tag.
• config({ preview: true }).

config({ preview: false }) removes it. The bar never mounts with embed in the URL, where the page shows the composition alone (Embedding), or while a renderer is capturing. When the bar is asked for, Kinetic also fits the stage to the window (the fit option of config()).

The guard

The guard has a CSS-animation catch-up, which runs in every build, and diagnostics for determinism hazards, which run in development builds.

CSS-animation catch-up

In every build, after each seek's flush and before the frame is captured, Kinetic positions every CSS animation under a scene that is not paused, since the runtime pauses the ones it seeks.

• It sets currentTime to the time since the start of the nearest [data-start] element, then pauses the animation, and it does so on every later seek.
• With no runtime on the page it positions all of them, so a scrub in a plain tab shows what a render captures.
• An animation on an element created after load, such as a list row, is positioned the same way, so a CSS animation needs no warning and gets none.

Development diagnostics

Development builds watch the window between a seek's arrival and its capture, and warn once per code. The warnings for KN-140, KN-141, KN-142 and KN-145 include the line in your code that made the call, and a call made by the framework or the runtime is ignored. Each has an entry in the error codes reference.

Diagnostics

Kinetic's codes carry the prefix KN and are grouped by range, and each code has an entry on the error codes page.

Warnings and errors

• Warnings print as [KN-140] ... through console.warn and exist in development builds only. With a development build of WildflowerJS they print through wildflower.diagnostic(), which adds a Docs line and keeps each one in wildflower.diagnostics beside the framework's own.
• Errors are thrown on every build as Error objects with the code in error.code, apart from the readiness failures, which print to the console and reject ready().

try {
    await wildflower.kinetic.render({ audioBitrate: -1 });
} catch (error) {
    error.code;      // 'KN-100'
    error.message;   // '[KN-100] render({ audioBitrate })', then the explanation or a link
}

In the development build an error's message goes on to say what is wrong and how to fix it. The production build's message carries the code, where the error came from, such as render({ audioBitrate }), and a link to the code's entry, so build with kinetic.wf.js and look a production error up by its code.

Clips, steps and transitions

Eighteen development warnings cover a page that runs and still shows or plays something other than what its author wrote. Each prints once per clip, track, input, scene, or step, and KN-137, KN-158, KN-202, and KN-205 once per page.

• KN-114 is a clip whose start or end falls between two frames, checked on each seek. The message gives the clip, the attribute, its value and the two nearest frame times.
• KN-118 is a data-step element that is no step, having no id or no data-start, two steps with one id, a step inside another step, or two steps that start together (Steps). The message gives the step's element, and each of its problems prints once.
• KN-118 is also a first step that starts after 0, or a step that starts at or past the composition's end, which go() holds on the last frame.
• KN-157 is step() for an id no data-step element has, or an until or follow target whose store does not exist at readiness (Interactive mode). The message gives the step or scene and the path.
• KN-157 is also a wait longer than the step's range, which is clamped, or a settings entry that starts after 0 in the first step that scripts its path.
• KN-158 is a page with steps that the preview bar alone put in video mode under config({ mode: 'auto' }), so the lesson plays as a video and its controls stop working (Interactive mode). For the lesson, remove data-preview, or call config({ mode: 'interactive' }).
• KN-159 is a read of a key that a keyframes entry's style object does not have, such as this.rise.translateY when rise has several tracks and translateY is folded into transform (Keyframes). The message gives the scene, the entry, its keys, and the key read.
• KN-115 is a data-clip-transition, data-clip-enter or data-clip-exit that Kinetic cannot apply, and KN-116 a data-clip-transition that overlaps no sibling clip or more than one, both checked on each seek. The message gives the clip, the attribute, its value and what is wrong with it, and the clip is left without the transition.
• KN-115 is also a luma, halftone or dissolve transition on a clip that holds elements while its own box is empty, so nothing of it shows during the transition.
• KN-156 is a property a transition wrote that a binding or a scene's root: block wrote again on the same clip during the same seek, or that page code wrote between two seeks inside the window. The message gives the clip and the property.

Tracks, inputs, media and render

• KN-122 is a track on a length property such as width that gives numbers with no unit, checked when the scene is defined or when styleAt() or interpolate() first reads the track. The message gives the scene, the keyframes entry and the property.
• KN-123 is a spring segment that its next keyframe cuts off while the spring is more than 2% of the distance between the keyframes from rest, checked at the same points. The message gives the segment's times, how far from rest the spring is in the track's unit, and how long the spring takes to come within 2% of rest.
• KN-134 is an input whose default differs from the one data-composition-variables declares, which is the one the scene reads. The message gives the scene, the input and both defaults.
• KN-136 is an audio clip with loop, autoplay or controls, which Kinetic does not apply. It is also a data-remap that is not applied, because Kinetic cannot read it or its ease overshoots, and a data-playback-rate beside a data-remap. The message gives the clip and the attributes.
• KN-139 is a footage clip with autoplay, controls, loop or data-automation, which Kinetic does not apply, with neither muted nor data-has-audio="true" or with both, or with a data-playback-rate outside 0.1 to 10, which is clamped. The message gives the clip and each attribute, with a suggestion for each.
• KN-139 is also a footage clip with no length written whose media start is at or past the end of its file, so it is never shown.
• KN-139 is also a footage clip's data-remap that is not applied, because Kinetic cannot read it, its ease overshoots, or the HyperFrames runtime on the page drives the clip, and a data-playback-rate beside a data-remap.
• KN-137 is level() or spectrum() read after a decode that found no audio clip, so the read is 0.
• KN-202 is a render whose sound is Opus because the browser cannot encode AAC.
• KN-205 is a render with a shutter while a runtime's player drives the clock, which rounds each seek to its own frames, so the shutter is not applied (Rendering through HyperFrames).
• KN-191 is an effect or a drawing whose WebGL context the browser lost, so it draws nothing until the context is restored. The message gives the canvas, and for an effect the kind.
• KN-192 is a render with a finish while effects and drawings hold 16 WebGL contexts, so the finish's own makes Chrome drop the oldest, and that layer can come out blank.