# [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.

The files array has two accepted formats:

- A string
- An object

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

When given an object it looks at four potential properties:

- file (the name, which may include string substitution formatting)
- delay (to override the parent, or used as a multiplier for videos or gifs)
- range (used to iterate over a numeric range or hard-coded array of substitutions)
- latency (used for gif and video with delay as an optional multiplier)

The string format substitution works with two options:

- direct replacement of `%s`
- left-padded (eg. `%03s` creating `001`, `002`, `003`, etc...)

_A file name can contain multiple substitutions and multiple formats, all of them will be recursively processed._

The `range` is an array with a start and end for a numeric loop, or raw values that can be numbers or strings.

This system supports video files with the extensions of `mp4`, `webm`, and `ogg`.  _Due to browser limitations videos are treated as muted by default._

When the file is a video or ends in `.gif`, an attempt will be made to extract the duration of the video or animated gif, and an updated value will be set to `latency`.  _If `delay` was provided, it will be treated as a multiplier._

The system attempts to preload up to 40% (or +-5) of the next and previous files which should prevent stutter when rendering.

Simple operations are exposed to allow manipulation:

- `toggle()` - change play state
- `next()` - go to the next image
- `previous()` - go to the previous image

**If the target window is not active, the rendering operation will be paused.**


### gifDuration bypass

Security on browsers may prevent `gifDuration` from being calculated when loading local files　without a web server.

To resolve this you can set `security.fileuri.strict_origin_policy` to `false` in firefox, or launch google chrome with the `--allow-file-access-from-files` flag.

_Another option would be to set the `latency` property manually._