# [show](https://git.caseydelorme.com/cdelorme/show)

A system for rendering sequences of various media, including images and videos.

It leverages `addEventListener` for preloading, and `requestAnimationFrame` for real-time rendering.

_This is an optimized and simplified replacement for [jslideshow](https://github.com/cdelorme/jslideshow)._


## usage

The [`demo.html`](demo.html) included demonstrates full screen styles, importing, and loading a set of files.

A new instance of `Show` accepts three parameters:

- parent element to insert the slideshow
- array of files in two different formats
- default duration or delay per displayed media

The parent element will have its children replaced.

There are two formats for files.

- A string
- An object

The string is treated verbatim and assigned the default delay value.

The only required value is `file`.

The object format supports an optional `delay` as an override.

If you are working with a group of files then the `range` array property is useful.

As an array it supports two numbers as minimum and maximum, or a set of string substitutes.

When `range` is present the `file` property will be treated as as "format string", which supports these formats:

- a direct string replacement (eg. `%s`)
- a left pad (eg. `%03s` creating `001`, `002`, `003`, etc)

_Substitution only supports individual characters not whole patterns, but they do **not** need to be numbers._

**If the file is a video it will substitute the default `delay` for the video duration, otherwise it will treat the delay as a multiplier allowing the video to loop a specified number of times.**

This system supports video files with the extensions `mp4`, `webm`, and `ogg`.  _Due to browser behavior (namely Google Chrome), videos will be muted._

The system preloads all files and beings playing automatically.

It provides a `toggle()` function to change its state.

If the target window is not the active window the loop will be halted.