├── .eslintrc
├── .gitignore
├── LICENSE.md
├── README.md
├── SUMMARY.md
├── dist
    └── build.min.js
├── docs
    ├── api.md
    ├── events.md
    ├── examples.md
    ├── format.md
    ├── intro.md
    ├── props.md
    ├── utilities.md
    └── vdom.md
├── index.js
├── lib
    ├── Channels.js
    ├── Diaporama.js
    ├── DiaporamaFormatError.js
    ├── DiaporamaRenderingCanvas
    │   ├── Post.js
    │   ├── SegmentGlslTransition.js
    │   ├── SegmentKenBurnsWebGL.js
    │   ├── StoreTransitions.js
    │   └── index.js
    ├── DiaporamaRenderingDOM
    │   ├── SegmentDomTransition.js
    │   ├── SegmentKenBurnsDOM.js
    │   └── index.js
    ├── MediaLoader.js
    ├── SegmentKenBurns.js
    ├── SegmentSlide2d.js
    ├── SegmentTimeline.js
    ├── TimeInterval.js
    ├── WebGLDetector.js
    ├── findTransitionByName.js
    ├── forEachSlide2dImage.js
    ├── globals
    │   └── localize.js
    ├── hashResource.js
    ├── index.js
    ├── mix.js
    └── noop.js
├── package.json
└── test
    ├── 01.js
    ├── 02.js
    ├── 03.js
    ├── 04.js
    ├── 05.js
    ├── 06.js
    ├── 07.js
    ├── 08.js
    ├── 09.js
    ├── 10.js
    ├── mock.js
    └── test.js


/.eslintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |     "rules": {
 3 |         "indent": [
 4 |             2,
 5 |             2
 6 |         ],
 7 |         "quotes": [
 8 |             2,
 9 |             "double"
10 |         ],
11 |         "linebreak-style": [
12 |             2,
13 |             "unix"
14 |         ],
15 |         "semi": [
16 |             2,
17 |             "always"
18 |         ]
19 |     },
20 |     "env": {
21 |         "node": true,
22 |         "browser": true
23 |     },
24 |     "extends": "eslint:recommended"
25 | }
26 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | _book
3 | 
4 | 


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
1 | ## ISC License
2 | 
3 | Copyright (c) 2015 Gaëtan Renaudeau <renaudeau.gaetan@gmail.com>
4 | 
5 | Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.
6 | 
7 | THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
8 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ![](https://cloud.githubusercontent.com/assets/211411/7667405/7e5c14f0-fc06-11e4-8a96-8b3297728e28.png) Diaporama
 2 | =========
 3 | Diaporama is an image/video/content slideshow engine providing high quality animation effects including [Kenburns](https://github.com/gre/kenburns) effect and [GLSL Transitions](https://github.com/gre/glsl-transition).
 4 | 
 5 | [![](https://nodei.co/npm/diaporama.png)](https://www.npmjs.com/package/diaporama)
 6 | 
 7 | **[-> DEMO <-](http://greweb.me/diaporama/)**
 8 | 
 9 | Related Projects
10 | ---------------
11 | 
12 | - **[`diaporama-maker`](https://github.com/gre/diaporama-maker): application to create Diaporama slideshows.**
13 | - [`diaporama-react`](https://github.com/glslio/diaporama-react): Use React with Diaporama.
14 | - [`kenburns`](http://github.com/gre/kenburns): KenBurns effect for the Web.
15 | - [`glsl-transition`](https://github.com/glslio/glsl-transition): Perform a GLSL Transition.
16 | - [`slide2d`](https://github.com/gre/slide2d): Express vectorial content in JSON using canvas2d directives.
17 | 
18 | 
19 | Diaporama Key features
20 | ------------
21 | 
22 | - **Minimal and unopinionated library**. *Diaporama* focuses on rendering the slideshow. Up to you to hook it to any event (window resize, touch events, keyboard,...) based on your needs.
23 | - **Responsive**: *Diaporama* works with any resolution and any ratio. The original image ratios are always preserved (crop to fit).
24 | - **Simple [API](docs/api.md)**. the Diaporama API mimic the HTML5 Video API for a better learning curve. You can set some [Properties](docs/props.md) and the library will always be in sync with your changes (and update efficiently with the minimal changes). There is also [Events](docs/events.md).
25 | - [Easily interoperable with Virtual DOM library](docs/vdom.md).
26 | - **Videos** support. allowing to define multiple video formats and image fallback.
27 | - **[Kenburns](https://github.com/gre/kenburns) effect** on images with configurable animation from/to and easing function.
28 | - Customizable **transition effects** using GLSL Transitions created on [GLSL.io](http://transitions.glsl.io/) (or your own)
29 | - **Works everywhere**. *Diaporama* is implemented with WebGL (hardware accelerated) but also have DOM fallback.
30 | - The slideshow is described in a [JSON format](docs/format.md).
31 | - **Retina-ready**. By default, the library use `devicePixelRatio` as canvas resolution. N.B.: This has a cost in term of performance, so if you want you can just give `1`. You can also responsively adapt it based on the canvas area.
32 | - **Texts, Images and Shapes** support – using [slide2d](https://github.com/gre/slide2d) which exposes everything Canvas can do.
33 | 
34 | Gitbooks Full Documentation
35 | ------------
36 | 
37 | [**https://gre.gitbooks.io/diaporama/content/**](https://gre.gitbooks.io/diaporama/content/)
38 | 
39 | 
40 | Current state of browser support
41 | -----------
42 | 
43 | Diaporama should be widely supported by browsers (desktop and mobile). If WebGL is not supported by the browser/hardware, it fallbacks properly to DOM implementation (an opacity transition is used).
44 | 
45 | Here are the current browsers I've been testing on
46 | 
47 | - Firefox (Mac, Linux)
48 | - Chrome (Mac, Chromium Linux, Windows)
49 | - Safari (Mac)
50 | - IE 11
51 | - iOS Safari
52 | - Android Chrome
53 |   - Support for Videos is broken (will display black): `<video>` drawing in Android Chrome is broken: https://code.google.com/p/chromium/issues/detail?id=174642
54 | 


--------------------------------------------------------------------------------
/SUMMARY.md:
--------------------------------------------------------------------------------
 1 | # Summary
 2 | 
 3 | * [Getting Started](docs/intro.md)
 4 | * [API Overview](docs/api.md)
 5 | * [JSON Diaporama Format](docs/format.md)
 6 | * [Diaporama Properties](docs/props.md)
 7 | * [Diaporama Events](docs/events.md)
 8 | * [Using with Virtual DOM](docs/vdom.md)
 9 | * [Diaporama by Examples](docs/examples.md)
10 | * [Global utilities](docs/utilities.md)
11 | 


--------------------------------------------------------------------------------
/docs/api.md:
--------------------------------------------------------------------------------
 1 | API overview
 2 | ===
 3 | 
 4 | See also [Diaporama by Examples](examples.md).
 5 | 
 6 | ### Create a Diaporama
 7 | 
 8 | ```javascript
 9 | var diaporama = Diaporama(container, data, props)
10 | ```
11 | 
12 | - **`container` (DOM Element)** *(required)* : you must provide an (empty) DOM element container in which the Diaporama will be created.
13 | - **`data` (Object)** : data of the diaporama (e.g; extracted from a `diaporama.json`), The format is described in [JSON Data Format](format.md).
14 | - **`props` (Object)** : initial properties of the Diaporama. (`data` can also be passed in this object – in that case you can give `props` as second parameter).
15 | 
16 | ### Properties:
17 | 
18 | > **N.B.:** Every properties initially defined in **props** can also be accessed or set on a `diaporama` instance and the diaporama will always keep things synchronized based on your changes. *(Diaporama uses JavaScript's `defineProperties`)*
19 | 
20 | - `loop` (boolean)
21 | - `autoplay` (boolean)
22 | - `data` (object)
23 | - `width` (number in pixels)
24 | - `height` (number in pixels)
25 | - `resolution` (number)
26 | - `currentTime` (number in milliseconds)
27 | - `slide` (number)
28 | - `playbackRate` (number)
29 | - `paused` (boolean)
30 | - `duration` (number in milliseconds, read-only)
31 | - `renderingMode` (read-only)
32 | - `networkTimeout` (number in milliseconds)
33 | - `currentRenderState` (read-only)
34 | - `timeBuffered` (read-only)
35 | 
36 | **For more details on each property, See [Diaporama Properties](#diaporama-properties) section.**
37 | 
38 | ### Methods:
39 | 
40 | *Diaporama* has a few helper methods usually on top of Properties:
41 | 
42 | - `play()` : set `paused` to false.
43 | - `pause()` : set `paused` to true.
44 | - `next([duration])` : set `currentTime` to the time of the next slide. If duration is provided, there is a transition to go to the next slide time.
45 | - `prev([duration])` : set `currentTime` to the time of the previous slide. If duration is provided, there is a transition to go to the previous slide time.
46 | - `jump(slideIndex, [duration])` : set `currentTime` to jump to a specific slide by its index.  If duration is provided, there is a transition to go to the requested slide time.
47 | - `feed(observable, opts)`: give an observable (stream) to feed the diaporama timeline over time. The observed values can be a slide OR an array of slides. *Note: an observable has a `subscribe(onNext,onError,onCompleted)` method that returns a disposable (with a `dispose()` function). You can use RxJS with `feed()`.*
48 | 
49 | ### Events:
50 | 
51 | *Diaporama* have events that let you watch and react on changes:
52 | 
53 | 
54 |   - `canplay`, `canplaythrough`, `load`, `progress`
55 |   - `destroy`
56 |   - `error`
57 |   - `resize`
58 |   - `play`, `pause`
59 |   - `render`
60 |   - `ended`
61 |   - `transition`, `transitionEnd`
62 |   - `slide`, `slideEnd`
63 | 
64 | 
65 | > The `diaporama` object is an `EventEmitter` so it haves the same API: `on`, `once`, `removeListener`,... Refer to [Event Emitter](https://nodejs.org/api/events.html) documentation.
66 | 
67 | **For more details on Events, See [Diaporama Events](events.md) section.**
68 | 


--------------------------------------------------------------------------------
/docs/events.md:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | ## Events
 4 | 
 5 | ### Loading events
 6 | 
 7 |   - `canplay`: the first image of the diaporama is loaded.
 8 |   - `canplaythrough`: there is enough images loaded to probably not having the slideshow to pause during the play.
 9 |   - `load`: all the images are loaded, the diaporama is fully ready.
10 |   - `progress` **{timeBuffered, loaded, total}**: triggered recurrently during load time.
11 | 
12 | ### Diaporama Lifecycle
13 |   - `destroy`: Diaporama is about to destroy.
14 |   - `error` **e** : an Error occured.
15 |   - `resize` **w** **h**: a resize occured.
16 |   - `play`: diaporama has started.
17 |   - `pause`: diaporama has stopped.
18 |   - `ended`: diaporama reach the end (only occurs if no loop).
19 |   - `transition` **transitionObject**: a transition has started.
20 |   - `transitionEnd` **transitionObject**: a transition has ended.
21 |   - `slide` **slideObject**: a new slide has started.
22 |   - `slideEnd` **slideObject**: a slide has ended.
23 |   - `seeked` **currentTime** **renderStatus**: a manual set of currentTime has been rendered.
24 |   - `ratechange` **playbackRate**: playbackRate has been changed.
25 |   - `render` **currentTime** **renderStatus**: an event triggered everytime a render is performed (be careful with this event, do not do intensive work). `renderStatus` can be on of: `Diaporama.RENDER_EMPTY`, `Diaporama.RENDER_WAITING`, `Diaporama.RENDER_PLAYING`.
26 |   - `data` **data**: data have changed.
27 | 


--------------------------------------------------------------------------------
/docs/examples.md:
--------------------------------------------------------------------------------
1 | 
2 | # Diaporama by Examples
3 | 
4 | - [http://greweb.me/diaporama-example1/](http://greweb.me/diaporama-example1/)
5 | - [http://greweb.me/diaporama-example2/](http://greweb.me/diaporama-example2/)
6 | - [http://greweb.me/gl-slideshow-example/](http://greweb.me/gl-slideshow-example/)
7 | - [http://greweb.me/diaporama-videos-example/](http://greweb.me/diaporama-videos-example/)
8 | 


--------------------------------------------------------------------------------
/docs/format.md:
--------------------------------------------------------------------------------
  1 | 
  2 | # JSON Description Format
  3 | 
  4 | The most interesting part of Diaporama is that the slideshow is described in a concise JSON.
  5 | 
  6 | > In the following documentation, we are going to describe the JSON format using pseudo-JSON where values are replaced by the expected type.
  7 | - **`"key": T`** means that the property "key" is of type T.
  8 | - **`T[]`** describes an Array of T.
  9 | - **`"key": T?`** means that the property "key" is optional.
 10 | - `T`, when not a JavaScript type, is a type alias that is described later in the document.
 11 | - **`Object<Key, Value>`** or **`Object<Value>`** describes a JavaScript object that have type Key as key (String if not precised) and Value as value.
 12 | - **`A | B`**: the type is either A or B.
 13 | 
 14 | > Other constraints are not formally documented but explain in English.
 15 | 
 16 | ## The Format
 17 | 
 18 | ```json
 19 | {
 20 |   "timeline": TimelineItem[],
 21 |   "resources": Object<ResourceRef, Resource>?,
 22 |   "transitions": GlslTransitionDefinition[]?
 23 | }
 24 | ```
 25 | 
 26 | - **`timeline`** is a list of timeline items, ordered from the first to the last slide of the slideshow. (a timeline item can have text content, image, video,...)
 27 | - **`resources`** allows to define once the URLs of the diaporama resources (images, videos). They can be referenced by `ResourceRef`.
 28 | - **`transitions`** defines all the transitions used for the Diaporama between the timeline items. They are referenced by `"name"` from `timeline`. You might directly use [`glsl-transitions`](https://github.com/glslio/glsl-transitions) collection (or a subset of it).
 29 | 
 30 | ### TimelineItem
 31 | 
 32 | ```json
 33 | TimelineImageItem | TimelineVideoItem | TimelineCanvasItem
 34 | ```
 35 | 
 36 | #### TimelineImageItem
 37 | 
 38 | > defines an image slide.
 39 | 
 40 | ```json
 41 | {
 42 |   "image": String,
 43 |   "duration": Number,
 44 |   "kenburns": KenBurns?,
 45 |   "transitionNext": GlslTransition?
 46 | }
 47 | ```
 48 | 
 49 | - **`image`** describes the URL to an Image. Cross Domain images are supported as soon as the hosting server implement CORS properly (this is the case for *imgur* for instance).
 50 | - **`duration`** is given in milliseconds. This duration doesn't includes the potential `transitionNext.duration`.
 51 | - **`kenburns`** configure the kenburns (or cropping) effect. If not defined, the Image is cropped to the biggest possible rectangle preserving the ratio.
 52 | - **`transitionNext`** defines the transition to use when moving to the next item. A transition between 2 slides cross-fade the animations of those 2 slides, it means that kenburns effect will continue to move during that transition.
 53 | 
 54 | #### TimelineVideoItem
 55 | 
 56 | > defines a video slide.
 57 | 
 58 | ```json
 59 | {
 60 |   "video": VideoResource | ResourceRef[VideoResource],
 61 |   "position": Number?,
 62 |   "volume": Number?,
 63 |   "playbackRate": Number?,
 64 |   "loop": Boolean?,
 65 |   "duration": Number,
 66 |   "kenburns": KenBurns?,
 67 |   "transitionNext": GlslTransition?
 68 | }
 69 | ```
 70 | - **`video`** describes the URL of the video or multiple URLs if using different video formats. You can also define an image as a fallback. You can use `ResourceRef`
 71 | - **`position`** is a time in milliseconds to start the video at (default is `0`, which means the video start at the beginning).
 72 | - **`volume`** is the audio volume to use when playing the video. (default is `0`, which means the video is muted)
 73 | - **`playbackRate`** is the playbackRate to play the video. Normal speed is `1` (default).
 74 | - **`loop`** is a boolean to describe if the video should loop or stop at the end (default is `true`).
 75 | - **`duration`** is given in milliseconds. It defines how long the video should be run.
 76 | - **`kenburns`** configure the kenburns (or cropping) effect. If not defined, the video is cropped to the biggest possible rectangle preserving the ratio.
 77 | - **`transitionNext`** defines the transition to use when moving to the next item. A transition between 2 slides cross-fade the animations of those 2 slides, it means that kenburns effect will continue to move during that transition.
 78 | 
 79 | ### TimelineSlide2dItem
 80 | 
 81 | > defines a content slide.
 82 | 
 83 | ```json
 84 | {
 85 |   "slide2d": Slide2d,
 86 |   "duration": Number,
 87 |   "transitionNext": GlslTransition?
 88 | }
 89 | ```
 90 | 
 91 | - **`slide2d`**: the content described in a simple DSL on top of Canvas 2D to describe text slide content (but also any shapes that you can possibly do using Canvas 2D). See Slide2d type for more info.
 92 | - **`duration`** is given in milliseconds.
 93 | - **`transitionNext`** defines the transition to use when moving to the next item. A transition between 2 slides cross-fade the animations of those 2 slides, it means that kenburns effect will continue to move during that transition.
 94 | 
 95 | > N.B.: A `TimelineSlide2dItem` is designed to be scalable to any resolution.
 96 | 
 97 | ### ResourceRef[T]
 98 | 
 99 | a String identifier that reference a resource of type T defined in `resources`.
100 | 
101 | ### Resource
102 | 
103 | ```json
104 | VideoResource | ImageResource
105 | ```
106 | 
107 | ### VideoResource
108 | 
109 | ```json
110 | String | Object<Mimetype, URL>
111 | ```
112 | 
113 | If a String is provided, it is the video URL.
114 | An Object allows to define different video formats: the key of the object is the video format mimetype, the value is the video URL.
115 | 
116 | If you provide an image, it will be used as a fallback (if the video doesn't load, if not supported by the browser for instance).
117 | 
118 | Example:
119 | 
120 | ```json
121 | {
122 |   "video/webm": "video.webm",
123 |   "video/mp4": "video.mp4",
124 |   "image/png": "video.fallback.png"
125 | }
126 | ```
127 | 
128 | ### KenBurns
129 | 
130 | ```json
131 | "kenburns": {
132 |   "from": KenBurnsCrop,
133 |   "to":   KenBurnsCrop,
134 |   "easing": Easing?
135 | }
136 | ```
137 | 
138 | A KenBurns effect moves between two crop area (from -> to) following an easing.
139 | 
140 | #### KenBurnsCrop
141 | 
142 | ```json
143 | [ Number, [Number, Number] ]
144 | ```
145 | 
146 | A KenBurnsCrop describes a crop area in an image.
147 | The format is: `[ zoomRatio, [xCenter, yCenter] ]`.
148 | 
149 | For more information about this, please refer to [`kenburns` Documentation](https://github.com/gre/kenburns#utility-to-compute-the-cropping-rectangle).
150 | 
151 | ### GlslTransition
152 | 
153 | ```json
154 | {
155 |   "name": String,
156 |   "duration": Number,
157 |   "easing": Easing?,
158 |   "uniforms": Object?
159 | }
160 | ```
161 | 
162 | - **`name`** references a `GlslTransitionDefinition` defined in the root `"transitions"` property.
163 | - **`duration`** is given in milliseconds.
164 | - **`uniforms`** provides all uniforms to customize for the current transition.
165 | 
166 | ### Easing
167 | 
168 | ```json
169 | [ Number, Number, Number, Number ]
170 | ```
171 | 
172 | **Easing** is an array containing the 2 handle positions of the bezier easing. They are defined in this order: `[ x1, y1, x2, y2 ]`. When an easing is optional, a linear fallback easing is used (identity).
173 | 
174 | 
175 | ### GlslTransitionDefinition
176 | 
177 | This statically defines a GlslTransition.
178 | 
179 | The easiest way to get a GlslTransition is to use
180 | [`glsl-transitions`](https://github.com/glslio/glsl-transitions) which contains all GLSL Transitions that has been created on GLSL.io.
181 | 
182 | Here is the mandatory minimal format for Diaporama to work correctly:
183 | 
184 | ```javascript
185 | {
186 |   "name" : String,
187 |   "glsl" : String,
188 |   "uniforms" : Object?
189 | }
190 | ```
191 | 
192 | - `name` should uniquely identify the transition (by name).
193 | - `glsl` is a fragment shader that valids the glsl-transition requirements: it must have following uniforms: `texture2D from, to; float progress; vec2 resolution;`.
194 | - `uniforms` are default values for custom transition uniforms. A transition might not have any uniforms in input.
195 | 
196 | #### Slide2d
197 | 
198 | ```json
199 | {
200 |   "background": String,
201 |   "size": [ Number, Number ],
202 |   "draws": (Object|Array)[]
203 | }
204 | ```
205 | 
206 | - `draws` are an array of Canvas2D draw instructions. Instructions are executed sequentially.
207 | - `size` is a reference dimension (`[ width, height ]`) related to the `draws` defined.
208 | 
209 | **For more information on the format, please look at [Slide2D API](https://github.com/gre/slide2d).**
210 | 
211 | The drawing rectangle where the shapes are drawn is the biggest rectangle that preserves the ratio of dimension `size`.
212 | 
213 | Important: **ratio is preserved**, **draws are vectorial**, **no draws that fits in the `size` are cropped** BUT consequently the drawing rectangle **IS NOT** the full viewport size.
214 | 
215 | **Example:**
216 | 
217 | ```json
218 | "slide2d": {
219 |   "background": "#EDA",
220 |   "size": [ 800, 600 ],
221 |   "draws": [
222 |     { "font": "bold 80px sans-serif", "fillStyle": "#000", "textBaseline": "middle", "textAlign": "center" },
223 |     [ "fillText", "This is Text", 400, 300 ]
224 |   ]
225 | }
226 | ```
227 | 


--------------------------------------------------------------------------------
/docs/intro.md:
--------------------------------------------------------------------------------
 1 | Getting Started
 2 | ===============
 3 | 
 4 | There are two ways to create a diaporama:
 5 | - The recommended way: use `diaporama-maker`, a graphical slideshow editor.
 6 | - The programmer way: write your own `diaporama.json` (see [JSON Format](docs/format.md)).
 7 | 
 8 | ## Using Diaporama Maker
 9 | 
10 | The simplest way to create a diaporama is to use the Diaporama Maker.
11 | `diaporama-maker` is an WYSIWYG editor that creates your `diaporama.json` without
12 | having to write a single line of it. You can also generate a complete *ZIP Archive*
13 | that contains the diaporama ready to be deployed (The archive includes an `index.html` file that runs the diaporama in fullscreen).
14 | 
15 | ![](https://camo.githubusercontent.com/24978a582c5230b1f033a7565d8942053999535d/687474703a2f2f692e696d6775722e636f6d2f4f45594d526a782e6a7067)
16 | 
17 | ### Install Diaporama Maker
18 | 
19 | ```javascript
20 | npm install --save diaporama-maker
21 | ```
22 | 
23 | You can then start it using
24 | ```
25 | diaporama folder_with_photos
26 | ```
27 | 
28 | ## Use Diaporama programmatically
29 | 
30 | If the ZIP Archive created by Diaporama Maker isn't enough for you,
31 | you can run a Diaporama programmatically.
32 | 
33 | ### NPM
34 | 
35 | You can install `diaporama` as a NPM dependency (to use with Browserify / ...):
36 | ```
37 | npm install --save diaporama
38 | ```
39 | 
40 | You can import Diaporama using:
41 | ```javascript
42 | var Diaporama = require("diaporama");
43 | ```
44 | 
45 | ### Standalone build
46 | 
47 | You can also download the library using the standalone build. (JavaScript file containing the library)
48 | 
49 | [Download HEAD build](https://raw.githubusercontent.com/gre/diaporama/master/dist/build.min.js)
50 | 
51 | You can now uses Diaporama which is in
52 | ```
53 | window.Diaporama
54 | ```
55 | 
56 | 
57 | **To learn how to use `Diaporama` programmatically, jump to [API Overview](api.md) section.**
58 | 


--------------------------------------------------------------------------------
/docs/props.md:
--------------------------------------------------------------------------------
  1 | Diaporama Properties
  2 | ====================
  3 | 
  4 | Every properties can be passed at instanciation time, properties then get attached to the instance. **Properties reflect the Diaporama current state.**
  5 | 
  6 | At any time you can **get** AND **set** these properties.
  7 | This is the main way to interact with a Diaporama. It makes the API very simple to use.
  8 | 
  9 | The Diaporama consistency is guaranteed when you set properties *(thanks to JavaScript's `defineProperties`)*.
 10 | However, the value **is not guaranteed** to be instantly changed: for performance reasons, most of property changes are scheduled to the next rendering frame.
 11 | 
 12 | 
 13 | ### `loop` (boolean)
 14 | 
 15 | This property defines the need to loop the diaporama. If set to true, the diaporama is looping.
 16 | Looping means that when the diaporama reaches the last slide,
 17 | it will not *"end"* but will continue by starting again the diaporama from the first slide.
 18 | 
 19 | ### `autoplay` (boolean)
 20 | 
 21 | This property, if true, means that the diaporama will starts as soon as possible.
 22 | It watches the `canplaythrough` events in order to start the diaporama when it is likely
 23 | to have enough images loaded to play the diaporama without pauses.
 24 | 
 25 | ### `data` (object)
 26 | 
 27 | This property reflects the Diaporama Data, object described by the [JSON Diaporama Format](./format.md).
 28 | 
 29 | ### `width` (number in pixels)
 30 | 
 31 | This property reflects the current `width` of the Diaporama.
 32 | 
 33 | Diaporama width can dynamically changes.
 34 | 
 35 | ### `height` (number in pixels)
 36 | 
 37 | This property reflects the current `height` of the Diaporama.
 38 | 
 39 | Diaporama height can dynamically changes.
 40 | 
 41 | ### `resolution` (number)
 42 | 
 43 | This property defines the *device pixel ratio*.
 44 | By default it is set to `window.devicePixelRatio` (recommended).
 45 | On Retina devices, `devicePixelRatio` is `2.0`.
 46 | 
 47 | A more advanced usage is to degrade the `resolution` when the `width * height` area is important.
 48 | 
 49 | **Advanced Usage Example:**
 50 | ```javascript
 51 | var threshold = 1024 * 512;
 52 | window.addEventListener("resize", function resize () {
 53 |   var w = window.innerWidth;
 54 |   var h = window.innerHeight;
 55 |   diaporama.width = w;
 56 |   diaporama.height = h;
 57 |   // heuristic to degrade the quality for high resolutions
 58 |   diaporama.resolution = Math.min(window.devicePixelRatio||1, Math.ceil((threshold) / (w * h)));
 59 | });
 60 | ```
 61 | 
 62 | ### `currentTime` (number in milliseconds)
 63 | 
 64 | This property exposes the current time of the diaporama **in milliseconds**.
 65 | A diaporama has a static timelapse defined by the `timeline` field of the format.
 66 | Setting the currentTime to a same time will always result to the same rendering.
 67 | 
 68 | When the diaporama is running, the currentTime is constantly updated.
 69 | 
 70 | Setting the currentTime makes the diaporama jump to a specific time position – like in a Video.
 71 | 
 72 | ### `slide` (number)
 73 | 
 74 | The current timeline slide index of the diaporama.
 75 | Setting the value will cause the Diaporama to jump in time, but only if the slide changes.
 76 | 
 77 | ### `playbackRate` (number)
 78 | 
 79 | This property defines the speed at which the diaporama is played.
 80 | By default, speed is `1.0` which is the normal speed
 81 | (duration=1000 will be one second of real time).
 82 | 
 83 | - With a speed < 1.0, the diaporama runs slower.
 84 | - With a speed > 1.0, the diaporama runs faster.
 85 | 
 86 | ### `paused` (boolean)
 87 | 
 88 | This property is `true` when the diaporama is running, `false` otherwise.
 89 | Setting it will play or pause the diaporama (or do nothing if it doesn't change).
 90 | 
 91 | ### `duration` (number in milliseconds, read-only)
 92 | 
 93 | This property is **read-only**. You cannot set it.
 94 | 
 95 | It gives you the current duration of the diaporama **in milliseconds**.
 96 | 
 97 | ### `renderingMode` (read-only)
 98 | 
 99 | This property can **ONLY** be set once at instantiation.
100 | 
101 | It defines the preferred rendering mode to use.
102 | `webgl` is used by default and is the recommanded mode.
103 | `dom` can also be defined to force the DOM rendering.
104 | However keep in mind that DOM rendering is designed to be a fallback to make
105 | diaporama works everywhere. It doesn't (and can't) implement all diaporama features
106 | (transitions are all fallback to a simple fade transition).
107 | 
108 | ### `networkTimeout` (number in milliseconds)
109 | 
110 | This property can **ONLY** be set once at instantiation.
111 | 
112 | Define the maximum time in milliseconds to wait for loading each resource (images, videos).
113 | 
114 | ### `currentRenderState` (read-only)
115 | 
116 | Represents the current rendering state (does the rendering succeed or awaiting some resource to load).
117 | It can be one of following value:
118 | 
119 | `Diaporama.RENDER_EMPTY`: no rendering has been made or there is nothing to render.
120 | `Diaporama.RENDER_WAITING`: The rendering is incomplete. It is awaiting resource to load.
121 | `Diaporama.RENDER_PLAYING`: The rendering is complete.
122 | 
123 | ### `timeBuffered` (read-only)
124 | 
125 | The current most reachable time (after this time, the diaporama will block because resources are not loaded yet).
126 | 


--------------------------------------------------------------------------------
/docs/utilities.md:
--------------------------------------------------------------------------------
 1 | # Global utilities
 2 | 
 3 | Diaporama also provide *Global Utilities*.
 4 | 
 5 | These are functions that can be used outside to simplify work to do with Diaporama.
 6 | 
 7 | ## `Diaporama.localize(diaporamaData, localizeURL)`
 8 | 
 9 | This will mutate your `diaporamaData` to resolve all URLs with a given localizeURL function.
10 | localizeURL will basically will be mapped over all URLs in the diaporama data.
11 | 
12 | If a string is given in localizeURL, it will be used as a prefix to the URL.
13 | 


--------------------------------------------------------------------------------
/docs/vdom.md:
--------------------------------------------------------------------------------
 1 | # Using with Virtual DOM
 2 | 
 3 | **Diaporama is easily interoperable with Virtual DOM libraries.**
 4 | 
 5 | Diaporama is designed to be performant and that each property changes have the minimal impact (if a property doesn't change, nothing happens).
 6 | 
 7 | 
 8 | ## React
 9 | 
10 | [`diaporama-react`](https://github.com/glslio/diaporama-react) defines Diaporama for React.
11 | 
12 | ## Other Virtual DOM libraries
13 | 
14 | What you essentially have to do is to instanciate a Diaporama "on mount", to destroy() it "on unmount", and to affect properties to any props changes.
15 | 
16 | You can inspire from [`diaporama-react`](https://github.com/glslio/diaporama-react).
17 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | module.exports = require("./lib");
2 | 


--------------------------------------------------------------------------------
/lib/Channels.js:
--------------------------------------------------------------------------------
 1 | 
 2 | // values ordered with priority (lowest are displayed when there is multiple running channels)
 3 | module.exports = {
 4 |   TRANSITION: 0,
 5 |   KENBURNS: [ 1, 2, 3 ],
 6 |   SLIDE2D: [ 4, 5, 6 ],
 7 | 
 8 |   sort: function channelSort (a, b) {
 9 |     return a - b;
10 |   }
11 | };
12 | 


--------------------------------------------------------------------------------
/lib/Diaporama.js:
--------------------------------------------------------------------------------
   1 | var raf = require("raf");
   2 | var EventEmitter = require("events").EventEmitter;
   3 | var assign = require("object-assign");
   4 | var BezierEasing = require("bezier-easing");
   5 | var croissant = require("croissant");
   6 | var MediaLoader = require("./MediaLoader");
   7 | var hash = require("./hashResource");
   8 | var Channels = require("./Channels");
   9 | var findTransitionByName = require("./findTransitionByName");
  10 | var DiaporamaRenderingCanvas = require("./DiaporamaRenderingCanvas");
  11 | var DiaporamaRenderingDOM = require("./DiaporamaRenderingDOM");
  12 | var SegmentTimeline = require("./SegmentTimeline");
  13 | var TimeInterval = require("./TimeInterval");
  14 | var DiaporamaFormatError = require("./DiaporamaFormatError");
  15 | var WebGLDetector = require("./WebGLDetector");
  16 | var forEachSlide2dImage = require("./forEachSlide2dImage");
  17 | 
  18 | var RENDER_EMPTY = 0,
  19 |   RENDER_WAITING = 1,
  20 |   RENDER_PLAYING = 2;
  21 | 
  22 | function sortSegment (a, b) {
  23 |   return Channels.sort(a[1].channel, b[1].channel);
  24 | }
  25 | 
  26 | var webglDetector;
  27 | 
  28 | function guessMode (mode) {
  29 |   if (!webglDetector) {
  30 |     webglDetector = new WebGLDetector();
  31 |   }
  32 |   if (!mode) {
  33 |     mode = webglDetector.supported() ? "webgl" : "dom";
  34 |   }
  35 |   else if (mode==="webgl" || mode==="canvas") {
  36 |     if (webglDetector.supported()) {
  37 |       return "webgl";
  38 |     }
  39 |     else {
  40 |       return null;
  41 |     }
  42 |   }
  43 |   return mode;
  44 | }
  45 | 
  46 | function createRendering (media, container, background, mode) {
  47 |   switch (mode) {
  48 |   case "webgl":
  49 |     return new DiaporamaRenderingCanvas(media, container, background);
  50 |   case "dom":
  51 |     return new DiaporamaRenderingDOM(media, container, background);
  52 |   }
  53 |   return null;
  54 | }
  55 | 
  56 | var slideEase = BezierEasing(0.4, 0, 0.8, 1);
  57 | function slidingEasing (from, to, time, duration, initialPlaybackRate) {
  58 |   var p = slideEase(time / duration) + time * initialPlaybackRate / (to - from);
  59 |   return from + (to - from) * Math.max(0, Math.min(p, 1));
  60 | }
  61 | 
  62 | function Diaporama (container, data, opts) {
  63 |   // Validate arguments
  64 |   if (!(this instanceof Diaporama))
  65 |     return new Diaporama(container, data, opts);
  66 | 
  67 |   if (!container || !container.nodeType)
  68 |     throw new Error("Diaporama: a DOM container is required.");
  69 | 
  70 |   // opts can be given at 2nd argument. We detect it if there is a "data" field.
  71 |   if (data && !opts && data.data) {
  72 |     opts = data;
  73 |     data = null;
  74 |   }
  75 |   if (!opts) {
  76 |     opts = {};
  77 |   }
  78 | 
  79 |   // Initial private state
  80 |   this._segments = [];
  81 |   this._runningSegments = [];
  82 |   this._renderingMode = guessMode(opts.renderingMode);
  83 |   if (!this._renderingMode) {
  84 |     throw new Error("No rendering is suitable for renderingMode="+opts.renderingMode);
  85 |   }
  86 |   var media = new MediaLoader(
  87 |     croissant.fallbackBlack(
  88 |       croissant.timeout(
  89 |         croissant.loader,
  90 |         opts.networkTimeout || 60000)));
  91 |   this._rendering = createRendering(media, container, opts.backgroundColor || this._backgroundColor, this._renderingMode);
  92 | 
  93 |   // Delete handled options that are not possible to set.
  94 |   delete opts.renderingMode;
  95 |   delete opts.backgroundColor;
  96 |   this._handleResize = this._handleResize.bind(this);
  97 |   this._handleRender = this._handleRender.bind(this);
  98 |   this.node = container;
  99 | 
 100 |   // Opts
 101 |   for (var k in opts) {
 102 |     this[k] = opts[k];
 103 |   }
 104 |   if (data) this.data = data;
 105 | 
 106 |   if (this._width === null || this._height === null) // Hack.. needed?
 107 |     this.fitToContainer();
 108 | 
 109 |   var self = this;
 110 |   this.once("canplay", function () {
 111 |     self.renderNow();
 112 |   });
 113 |   this.once("canplaythrough", function () {
 114 |     if (self._autoplay) {
 115 |       self._start();
 116 |     }
 117 |     else {
 118 |       self._requestRender();
 119 |     }
 120 |   });
 121 | 
 122 |   this._requestResize();
 123 | }
 124 | 
 125 | Diaporama.prototype = assign({}, EventEmitter.prototype, {
 126 | 
 127 |   /// PUBLIC API
 128 | 
 129 |   destroy: function () {
 130 |     if (this._destroyed) return;
 131 |     this._destroyed = true;
 132 |     this.emit("destroy");
 133 |     this.removeAllListeners();
 134 |     if (this._feedSubscription) {
 135 |       this._feedSubscription.dispose();
 136 |     }
 137 |     if (this._stopCurrentDiaporamaLoading) {
 138 |       this._stopCurrentDiaporamaLoading();
 139 |       this._stopCurrentDiaporamaLoading = null;
 140 |     }
 141 |     this._stop();
 142 |     this._destroySegments(this._segments);
 143 |     this._rendering.destroy();
 144 |   },
 145 | 
 146 |   play: function () {
 147 |     this.paused = false;
 148 |   },
 149 | 
 150 |   pause: function () {
 151 |     this.paused = true;
 152 |   },
 153 | 
 154 |   next: function (duration) {
 155 |     var i = this._slideIndexForTime(
 156 |       this._slidingTarget ?
 157 |       this._slidingTarget.to :
 158 |       this._currentTime);
 159 |     if (i === -1) return;
 160 |     i ++;
 161 |     if (i >= this._slideTimes.length) {
 162 |       if (this._loop && !this._feeded) {
 163 |         i = 0;
 164 |       }
 165 |       else {
 166 |         return;
 167 |       }
 168 |     }
 169 |     this._slideToTime(this._slideTimes[i], duration, true);
 170 |   },
 171 | 
 172 |   prev: function (duration) {
 173 |     var i = this._slideIndexForTime(
 174 |       this._slidingTarget ?
 175 |       this._slidingTarget.to :
 176 |       this._currentTime);
 177 |     if (i === -1) return;
 178 |     i --;
 179 |     if (i < 0) {
 180 |       if (this._loop && !this._feeded) {
 181 |         i = this._slideTimes.length - 1;
 182 |       }
 183 |       else {
 184 |         return;
 185 |       }
 186 |     }
 187 |     this._slideToTime(this._slideTimes[i], duration, false);
 188 |   },
 189 | 
 190 |   jump: function (slideIndex, duration) {
 191 |     if (typeof slideIndex !== "number") throw new Error("Diaporama#jump requires the slide index number.");
 192 |     if (slideIndex < 0 || slideIndex >= this._slideTimes.length) return; // out of bound
 193 |     var i = this._slideIndexForTime(this._currentTime);
 194 |     if (i === slideIndex) return; // Already current slide
 195 |     this._slideToTime(this._slideTimes[slideIndex], duration);
 196 |   },
 197 | 
 198 |   fitToContainer: function () {
 199 |     var container = this.node;
 200 |     var bound = container.getBoundingClientRect();
 201 |     this._width = bound.width;
 202 |     this._height = bound.height;
 203 |     this._requestResize();
 204 |   },
 205 | 
 206 |   feed: function (observable, opts) {
 207 |     var self = this;
 208 |     if (self._feeded) throw new Error("feed can only work once at a time.");
 209 |     if (!opts) opts={};
 210 |     var freeSlideBehind = opts.freeSlideBehind || Infinity;
 211 |     self._feeded = true;
 212 |     self._feedSubscription = observable.subscribe(function (newContent) {
 213 |       var data = self.data;
 214 |       var slide = self.slide;
 215 |       var timeline = data.timeline.concat(newContent);
 216 |       var toFree = slide - freeSlideBehind;
 217 |       if (toFree > 0) {
 218 |         var d = 0;
 219 |         for (var i=0; i<toFree; i++) {
 220 |           var s = timeline[i];
 221 |           d += (s.duration||0) + (s.transitionNext && s.transitionNext.duration || 0);
 222 |         }
 223 |         timeline.splice(0, toFree);
 224 |         self.currentTime -= d;
 225 |       }
 226 |       self.data = assign({}, data, {
 227 |         timeline: timeline
 228 |       });
 229 |     }, function (error) {
 230 |       self.emit("error", error);
 231 |       self._feeded = false;
 232 |     }, function () {
 233 |       self._feeded = false;
 234 |     });
 235 | 
 236 |     return self._feedSubscription;
 237 |   },
 238 | 
 239 |   // PRIVATE initial defaults
 240 |   _playbackRate: 1,
 241 |   _loop: false,
 242 |   _autoplay: false,
 243 |   _paused: true,
 244 |   _width: null,
 245 |   _height: null,
 246 |   _resolution: window.devicePixelRatio || 1,
 247 |   _currentTime: 0,
 248 |   _duration: 0,
 249 |   _backgroundColor: [0,0,0],
 250 |   _timeBuffered: 0,
 251 |   _feeded: false,
 252 | 
 253 |   // PRIVATE initial state
 254 |   _curLoop: null,
 255 |   _startLoopId: 0,
 256 |   _needResize: null,
 257 |   _needRender: null,
 258 |   _slidingTarget: null,
 259 | 
 260 |   // PRIVATE methods
 261 | 
 262 |   _loadMedia: function () {
 263 |     if (this._stopCurrentDiaporamaLoading) {
 264 |       this._stopCurrentDiaporamaLoading();
 265 |       this._stopCurrentDiaporamaLoading = null;
 266 |     }
 267 |     var self = this;
 268 |     self._timeBuffered = 0;
 269 | 
 270 |     var rendering = this._rendering;
 271 |     var media = rendering.media;
 272 |     var toload = {};
 273 |     var ready = [];
 274 | 
 275 |     function addSrc (src) {
 276 |       var key = hash(src);
 277 |       if (!(key in toload))
 278 |         toload[key] = src;
 279 |     }
 280 | 
 281 |     this._data.timeline.forEach(function (item) {
 282 |       if (item.video) {
 283 |         var video = self._resolve(item.video, "video");
 284 |         addSrc(video);
 285 |       }
 286 |       else if (item.image)
 287 |         addSrc({ "image": item.image });
 288 |       else if (item.slide2d)
 289 |         forEachSlide2dImage(item.slide2d.draws, function (src) {
 290 |           addSrc({ "image": src });
 291 |         });
 292 |     });
 293 | 
 294 |     var _canplay;
 295 |     function canplay () {
 296 |       if (_canplay) return;
 297 |       _canplay = 1;
 298 |       self.emit("canplay");
 299 |       self._requestRender();
 300 |     }
 301 | 
 302 |     var _canplaythrough;
 303 |     function canplaythrough () {
 304 |       if (_canplaythrough) return;
 305 |       _canplaythrough = 1;
 306 |       self.emit("canplaythrough");
 307 |       self._requestRender();
 308 |     }
 309 | 
 310 |     function load () {
 311 |       self.emit("load");
 312 |       self._requestRender();
 313 |     }
 314 | 
 315 |     if (Object.keys(toload).length === 0) {
 316 |       setTimeout(function() {
 317 |         self._computeTimeBuffered();
 318 |         canplay();
 319 |         canplaythrough();
 320 |         load();
 321 |       }, 0);
 322 |       return;
 323 |     }
 324 | 
 325 |     var loadStart = Date.now();
 326 | 
 327 |     function watch () {
 328 |       self._requestRender();
 329 |       self._computeTimeBuffered();
 330 | 
 331 |       var timeBuffered = self.timeBuffered;
 332 | 
 333 |       self.emit("progress", {
 334 |         timeBuffered: timeBuffered,
 335 |         loaded: ready.length,
 336 |         total: Object.keys(toload).length
 337 |       });
 338 | 
 339 |       if (ready.length === Object.keys(toload).length) {
 340 |         canplay();
 341 |         canplaythrough();
 342 |         load();
 343 |         unbind();
 344 |       }
 345 |       else {
 346 |         if (!_canplay && timeBuffered > 0) {
 347 |           canplay();
 348 |         }
 349 | 
 350 |         if (_canplay && !_canplaythrough) {
 351 |           // Heuristic to trigger the canplaythrough (FIXME very naive)
 352 |           var totalDuration = self.duration;
 353 |           var playbackRate = self.playbackRate;
 354 |           var elapsed = Date.now() - loadStart;
 355 |           if (timeBuffered - 4000 > playbackRate * elapsed &&
 356 |             0.8 * ready.length / Object.keys(toload).length > playbackRate * elapsed / totalDuration) {
 357 |             canplaythrough();
 358 |           }
 359 |         }
 360 |       }
 361 |     }
 362 | 
 363 |     function onLoad (src) {
 364 |       if (!(hash(src) in toload)) return; // Don't care about this guy
 365 |       ready.push(src);
 366 |       watch();
 367 |     }
 368 | 
 369 |     function onError (src, error) {
 370 |       self.emit("error", new Error("Failure to load "+src), error);
 371 |       unbind();
 372 |     }
 373 | 
 374 |     setTimeout(watch, 0);
 375 |     var interval = setInterval(watch, 200);
 376 | 
 377 |     function unbind () {
 378 |       media.removeListener("load", onLoad);
 379 |       media.removeListener("error", onError);
 380 |       clearInterval(interval);
 381 |     }
 382 |     media.on("load", onLoad);
 383 |     media.on("error", onError);
 384 |     for (var key in toload) {
 385 |       media.load(toload[key]);
 386 |     }
 387 | 
 388 |     this._stopCurrentDiaporamaLoading = unbind;
 389 |   },
 390 | 
 391 |   _loadTransitions: function () {
 392 |     var store = this._rendering.transitions;
 393 |     if (!store) return;
 394 |     var transitionsDataset = this._data.transitions || {};
 395 |     this._data.timeline.forEach(function (item) {
 396 |       var name = item.transitionNext && item.transitionNext.name;
 397 |       if (name && !store.has(name)) {
 398 |         var transitionObject = findTransitionByName(name, transitionsDataset);
 399 |         if (transitionObject) {
 400 |           store.set(name, transitionObject);
 401 |         }
 402 |       }
 403 |     });
 404 |   },
 405 | 
 406 |   _requestResize: function () {
 407 |     if (this._needResize !== null) return; // already pending request
 408 |     this._needResize = raf(this._handleResize);
 409 |   },
 410 | 
 411 |   _handleResize: function () {
 412 |     if (this._needResize === null) return;
 413 |     this._needResize = null;
 414 |     this._resize();
 415 |   },
 416 | 
 417 |   _resize: function () {
 418 |     if (this._destroyed) return;
 419 |     var w = this._width, h = this._height, resolution = this._resolution;
 420 |     this._rendering.resize(w, h, resolution);
 421 |     for (var i = 0; i < this._runningSegments.length; ++i) {
 422 |       this._runningSegments[i][1].resize(w, h, resolution);
 423 |     }
 424 |     this.emit("resize", w, h);
 425 |     this._requestRender();
 426 |   },
 427 | 
 428 |   _destroySegments: function (segs) {
 429 |     var segment;
 430 |     while ( (segment = segs.pop()) ) {
 431 |       if (segment[1].destroy) segment[1].destroy();
 432 |     }
 433 |   },
 434 | 
 435 |   _computeTimelineSegments: function () {
 436 |     // FIXME TODO For now we don't do "diff", we will just trash and recreate everything for now.
 437 |     // we should do that AT LEAST for _runningSegments, to not leave() them if it has just changed in position / duration
 438 |     var segment;
 439 |     while ( (segment = this._runningSegments.pop()) ) {
 440 |       var evtLeave = segment[1].leave();
 441 |       if (evtLeave) this.emit.apply(this, evtLeave); // The events here will be ugly until we have a proper diff implementation
 442 |     }
 443 | 
 444 |     this._destroySegments(this._segments);
 445 | 
 446 |     var loop = this.loop;
 447 |     var diaporama = this._data;
 448 |     var tlength = diaporama.timeline.length;
 449 | 
 450 |     var t = 0;
 451 |     var lastTransitionDuration = 0;
 452 |     var slideTimes = [];
 453 |     var segments = [];
 454 |     var transitions = [];
 455 |     // Iterate over elements to generate element segments and prepare transition infos in transitions
 456 |     for (var i = 0; i < tlength; i++) {
 457 |       slideTimes.push(t);
 458 | 
 459 |       var item = assign({}, diaporama.timeline[i]);
 460 |       var duration = item.duration || 0;
 461 |       var tnext = item.transitionNext;
 462 |       var tnextDuration = tnext && tnext.duration || 0;
 463 | 
 464 |       var channelIndex = i === tlength-1 ? 2 : ( i % 2 );
 465 |       if (item.video || item.image) {
 466 |         if (item.video)
 467 |           item.video = this._resolve(item.video, "video");
 468 |         if (item.image)
 469 |           item.image = this._resolve(item.image, "image");
 470 |         segment = new this._rendering.SegmentKenBurns(Channels.KENBURNS[channelIndex], item, this);
 471 |       }
 472 |       else if (item.slide2d) {
 473 |         segment = new this._rendering.SegmentSlide2d(Channels.SLIDE2D[channelIndex], item);
 474 |       }
 475 |       else {
 476 |         throw new DiaporamaFormatError("timeline item can't be understood as a segment.", item);
 477 |       }
 478 | 
 479 |       segments.push([
 480 |         new TimeInterval(
 481 |           t - lastTransitionDuration,
 482 |           !loop && i===tlength-1 ? t + duration : t + duration + tnextDuration),
 483 |         segment
 484 |       ]);
 485 |       lastTransitionDuration = tnextDuration;
 486 |       t += duration;
 487 | 
 488 |       if (tnextDuration) {
 489 |         transitions.push({
 490 |           interval: new TimeInterval(t, t + tnextDuration),
 491 |           index: i
 492 |         });
 493 |         t += tnextDuration;
 494 |       }
 495 |     }
 496 |     var dur = t - lastTransitionDuration;
 497 | 
 498 |     var transitionsSegments = [];
 499 | 
 500 |     for (var k = 0; k < transitions.length; ++k) {
 501 |       var tr = transitions[k];
 502 |       var index = tr.index;
 503 |       var j = index+1 < diaporama.timeline.length ? index+1 : 0;
 504 |       var segmentFrom = segments[index][1];
 505 |       var segmentTo = segments[j][1];
 506 |       var next = diaporama.timeline[index].transitionNext;
 507 |       if (j!==0 || loop) {
 508 |         transitionsSegments.push([
 509 |           tr.interval,
 510 |           new this._rendering.SegmentTransition(Channels.TRANSITION, next, segmentFrom, segmentTo)
 511 |         ]);
 512 |       }
 513 |     }
 514 | 
 515 |     if (loop && segments.length) {
 516 |       // in loop-mode we create a final segment that render the first slide
 517 |       // in order to have a seamless slideshow.
 518 |       var firstSegment = segments[0][1];
 519 |       var timeInterval = new TimeInterval(dur, dur+lastTransitionDuration);
 520 |       var seg = Object.create(SegmentTimeline.prototype);
 521 |       assign(seg, firstSegment);
 522 |       // methods to proxy
 523 |       ["ready", "resize", "toString"].forEach(function (key) {
 524 |         seg[key] = firstSegment[key].bind(firstSegment);
 525 |       });
 526 |       // enter and leave should not return events (silently)
 527 |       ["enter", "leave"].forEach(function (key) {
 528 |         seg[key] = function () {
 529 |           firstSegment[key].apply(firstSegment, arguments);
 530 |         };
 531 |       });
 532 |       // render will always render at t=0
 533 |       seg.render = function () {
 534 |         return firstSegment.render(0, timeInterval);
 535 |       };
 536 |       segments.push([
 537 |         timeInterval,
 538 |         seg
 539 |       ]);
 540 |     }
 541 | 
 542 |     segments = transitionsSegments.concat(segments);
 543 |     segments.sort(sortSegment);
 544 | 
 545 |     this._slideTimes = slideTimes;
 546 |     this._segments = segments;
 547 |     this._duration = dur;
 548 |     this._lastTransitionDuration = lastTransitionDuration;
 549 |   },
 550 | 
 551 |   _slideIndexForTime: function (t) {
 552 |     var slideTimes = this._slideTimes;
 553 |     if (!slideTimes) return -1;
 554 |     t = this._normalizeTime(t);
 555 |     var slideTimesLength = slideTimes.length;
 556 |     for (var i=0; i<slideTimesLength; ++i) {
 557 |       if (t < slideTimes[i])
 558 |         return i-1;
 559 |     }
 560 |     return slideTimesLength-1;
 561 |   },
 562 | 
 563 |   // direction: undefined mean no direction. true: right, false: left
 564 |   _slideToTime: function (to, duration, direction) {
 565 |     var from = this._currentTime;
 566 |     if (to===from) return;
 567 |     if (this._loop && !this._feeded) {
 568 |       var loopDuration = this.duration;
 569 |       var cur = Math.abs(to - from);
 570 |       var aft = Math.abs(to + loopDuration - from);
 571 |       var bef = Math.abs(to - loopDuration - from);
 572 |       if (direction === undefined) {
 573 |         // Find the closest 'to' assuming loop is enabled
 574 |         if (aft < cur || bef < cur) {
 575 |           if (aft < bef)
 576 |             to += loopDuration;
 577 |           else
 578 |             to -= loopDuration;
 579 |         }
 580 |       }
 581 |       else {
 582 |         if (direction) {
 583 |           if (aft < cur)
 584 |             to += loopDuration;
 585 |         }
 586 |         else {
 587 |           if (bef < cur)
 588 |             to -= loopDuration;
 589 |         }
 590 |       }
 591 |     }
 592 |     if (this.paused || !duration) {
 593 |       this._currentTime = to;
 594 |       this._requestRender();
 595 |     }
 596 |     else {
 597 |       var playbackRate = this._playbackRate;
 598 |       this._slidingTarget = {
 599 |         from: from,
 600 |         to: to,
 601 |         startTime: null, // will be set in the render loop
 602 |         duration: duration,
 603 |         initialPlaybackRate: (to>from) === (playbackRate>0) ? playbackRate : 0
 604 |       };
 605 |     }
 606 |   },
 607 | 
 608 |   /**
 609 |    * Use only if you programmatically need to retrieve the result of properties changes now!
 610 |    */
 611 |   renderNow: function () {
 612 |     this._needRender = true;
 613 |     this._handleRender();
 614 |   },
 615 | 
 616 |   _requestRender: function () {
 617 |     if (this._curLoop !== null) return; // We skip if there is a loop because it is useful to render otherwise.
 618 |     if (this._needRender !== null) return; // already pending request
 619 |     this._needRender = raf(this._handleRender);
 620 |   },
 621 | 
 622 |   _handleRender: function () {
 623 |     if (this._needRender === null) return;
 624 |     this._needRender = null;
 625 |     this._render();
 626 |   },
 627 | 
 628 |   _normalizeTime: function (t) {
 629 |     var duration = this.duration;
 630 |     if (!this._loop || this._feeded) {
 631 |       return Math.max(0, Math.min(t, duration));
 632 |     }
 633 |     else {
 634 |       if (!duration) return 0;
 635 |       return (t+duration) % duration;
 636 |     }
 637 |   },
 638 | 
 639 |   _render: function () {
 640 |     if (this._destroyed) return;
 641 |     var rendering = this._rendering;
 642 |     this._handleResize();
 643 |     var segments = this._segments;
 644 |     if (segments.length===0) {
 645 |       rendering.render(0, []);
 646 |       this.emit("render", 0, RENDER_EMPTY);
 647 |       return RENDER_EMPTY;
 648 |     }
 649 |     var currentTime = this._normalizeTime(this._currentTime);
 650 |     var runningSegments = this._runningSegments;
 651 |     var notReady = false;
 652 | 
 653 |     var i, segment;
 654 |     var entering = [], leaving = [];
 655 |     var seglen = segments.length;
 656 |     var segsInTime = 0;
 657 |     for (i=0; i<seglen; ++i) {
 658 |       segment = segments[i];
 659 |       var runningIndex = runningSegments.indexOf(segment);
 660 |       var running = runningIndex !== -1;
 661 |       if (segment[0].timeInside(currentTime)) {
 662 |         segsInTime ++;
 663 |         if (!running) {
 664 |           if (!segment[1].ready(rendering)) {
 665 |             notReady = true;
 666 |             continue;
 667 |           }
 668 |           runningSegments.push(segment);
 669 |           entering.push(segment[1]);
 670 |         }
 671 |       }
 672 |       else {
 673 |         if (running) {
 674 |           runningSegments.splice(runningIndex, 1);
 675 |           leaving.push(segment[1]);
 676 |         }
 677 |       }
 678 |     }
 679 |     runningSegments.sort(sortSegment);
 680 | 
 681 |     for (i=leaving.length-1; i>=0; i--) {
 682 |       segment = leaving[i];
 683 |       var evtLeave = segment.leave();
 684 |       if (evtLeave) this.emit.apply(this, evtLeave);
 685 |     }
 686 |     for (i=entering.length-1; i>=0; i--) {
 687 |       segment = entering[i];
 688 |       var evt = segment.enter(rendering);
 689 |       if (evt) this.emit.apply(this, evt);
 690 |     }
 691 | 
 692 |     if (currentTime === 0 || runningSegments.length > 0) {
 693 |       if (this._rendering.render(currentTime, runningSegments)) {
 694 |         notReady = true;
 695 |       }
 696 |     }
 697 |     var state = segsInTime > 0 ?
 698 |       (notReady ? RENDER_WAITING : RENDER_PLAYING) :
 699 |       RENDER_EMPTY;
 700 | 
 701 |     this._currentRenderState = state;
 702 |     this.emit("render", currentTime, state);
 703 |     if (this._userJump) {
 704 |       this._userJump = false;
 705 |       this.emit("seeked", currentTime, state);
 706 |     }
 707 |     return state;
 708 |   },
 709 | 
 710 |   _start: function () {
 711 |     var self = this;
 712 |     var loopId = ++this._startLoopId;
 713 |     var last;
 714 |     this._curLoop = raf(function loop (t) {
 715 |       if (self._startLoopId !== loopId) return;
 716 |       raf(loop);
 717 |       if (!last) {
 718 |         // First tick
 719 |         last = t;
 720 |         self.emit("play");
 721 |       }
 722 |       var dt = t - last;
 723 |       last = t;
 724 |       var state = self._render();
 725 |       if (state === RENDER_EMPTY) {
 726 |         if (self._feeded) return;
 727 |         if (self.loop) {
 728 |           self.currentTime = 0;
 729 |         }
 730 |         else {
 731 |           self._stop(true);
 732 |         }
 733 |       }
 734 |       else if (state === RENDER_PLAYING) {
 735 |         var slidingTarget = self._slidingTarget;
 736 |         if (slidingTarget !== null) {
 737 |           if (slidingTarget.startTime===null) slidingTarget.startTime = t;
 738 |           var relativeTime = t - slidingTarget.startTime;
 739 |           var to = slidingEasing(slidingTarget.from, slidingTarget.to, relativeTime, slidingTarget.duration, slidingTarget.initialPlaybackRate);
 740 |           if (Math.abs(slidingTarget.to - to) < 10 || relativeTime >= slidingTarget.duration) {
 741 |             self._currentTime = slidingTarget.to;
 742 |             self._slidingTarget = null;
 743 |           }
 744 |           else {
 745 |             self._currentTime = to;
 746 |           }
 747 |         }
 748 |         else {
 749 |           self._currentTime = self._normalizeTime(self._currentTime + dt * self._playbackRate);
 750 |         }
 751 |       }
 752 |     });
 753 |   },
 754 | 
 755 |   _stop: function (endReached) {
 756 |     this._startLoopId++;
 757 |     if (this._slidingTarget) {
 758 |       this.currentTime = this._slidingTarget.endAt;
 759 |       this._slidingTarget = null;
 760 |     }
 761 |     if (this._curLoop !== null) {
 762 |       raf.cancel(this._curLoop);
 763 |       this._curLoop = null;
 764 |       this.emit("pause");
 765 |       if (endReached) this.emit("ended");
 766 |     }
 767 |   },
 768 | 
 769 |   _resolve: function (descr, mime) {
 770 |     var data = this.data;
 771 | 
 772 |     descr = typeof descr === "string" &&
 773 |       data &&
 774 |       data.resources &&
 775 |       descr in data.resources &&
 776 |       data.resources[descr] ||
 777 |       descr;
 778 | 
 779 |     if (typeof descr === "string") {
 780 |       var obj = {};
 781 |       obj[mime] = descr;
 782 |       descr = obj;
 783 |     }
 784 | 
 785 |     return descr;
 786 |   },
 787 | 
 788 |   _computeTimeBuffered: function () {
 789 |     if (!this._data) return this._timeBuffered = 0;
 790 |     var rendering = this._rendering;
 791 |     var segments = this._segments;
 792 |     var seglen = segments.length;
 793 |     var unreachables = [];
 794 |     for (var i=0; i<seglen; ++i) {
 795 |       var segment = segments[i];
 796 |       if (!segment[1].ready(rendering)) {
 797 |         unreachables.push(segment[0].startT);
 798 |       }
 799 |     }
 800 |     if (unreachables.length > 0) return this._timeBuffered = Math.min.apply(Math, unreachables);
 801 |     return this._timeBuffered = this.duration;
 802 |   }
 803 | 
 804 | });
 805 | 
 806 | // Public fields
 807 | 
 808 | Object.defineProperties(Diaporama.prototype, {
 809 | 
 810 |   loop: {
 811 |     set: function (value) {
 812 |       var loop = !!value;
 813 |       if (this._loop !== loop) {
 814 |         this._loop = loop;
 815 |         if (this._data) {
 816 |           this._computeTimelineSegments(this._data);
 817 |           this._computeTimeBuffered();
 818 |           this._requestRender();
 819 |         }
 820 |       }
 821 |     },
 822 |     get: function () {
 823 |       return this._loop;
 824 |     }
 825 |   },
 826 | 
 827 |   autoplay: {
 828 |     set: function (autoplay) {
 829 |       this._autoplay = autoplay;
 830 |     },
 831 |     get: function () {
 832 |       return this._autoplay;
 833 |     }
 834 |   },
 835 | 
 836 |   data: {
 837 |     set: function (data) {
 838 |       var prev = this._data;
 839 |       if (prev === data) return;
 840 |       this._currentRenderState = RENDER_WAITING;
 841 |       this._data = data;
 842 |       this._computeTimelineSegments(prev);
 843 |       this._loadTransitions();
 844 |       this._loadMedia();
 845 |       this._requestRender();
 846 |       this.emit("data", data);
 847 |     },
 848 |     get: function () {
 849 |       return this._data;
 850 |     }
 851 |   },
 852 | 
 853 |   resolution: {
 854 |     set: function (resolution) {
 855 |       if (resolution !== this._resolution) {
 856 |         this._resolution = resolution;
 857 |         this._requestResize();
 858 |       }
 859 |     },
 860 |     get: function () {
 861 |       return this._resolution;
 862 |     }
 863 |   },
 864 | 
 865 |   width: {
 866 |     set: function (width) {
 867 |       if (width !== this._width) {
 868 |         this._width = width;
 869 |         this._requestResize();
 870 |       }
 871 |     },
 872 |     get: function () {
 873 |       return this._width;
 874 |     }
 875 |   },
 876 | 
 877 |   height: {
 878 |     set: function (height) {
 879 |       if (height !== this._height) {
 880 |         this._height = height;
 881 |         this._requestResize();
 882 |       }
 883 |     },
 884 |     get: function () {
 885 |       return this._height;
 886 |     }
 887 |   },
 888 | 
 889 |   currentTime: {
 890 |     set: function (t) {
 891 |       if (t === this._currentTime) return;
 892 |       this._userJump = true;
 893 |       this._currentTime = this._normalizeTime(t);
 894 |       this._requestRender();
 895 |     },
 896 |     get: function () {
 897 |       return this._currentTime;
 898 |     }
 899 |   },
 900 | 
 901 |   playbackRate: {
 902 |     set: function (playbackRate) {
 903 |       if (this._playbackRate === playbackRate) return;
 904 |       this._playbackRate = playbackRate;
 905 |       this.emit("ratechange", playbackRate);
 906 |     },
 907 |     get: function () {
 908 |       return this._playbackRate;
 909 |     }
 910 |   },
 911 | 
 912 |   slide: {
 913 |     set: function (slide) {
 914 |       var current = this._slideIndexForTime(this._currentTime);
 915 |       if (current === slide) return;
 916 |       this.jump(slide);
 917 |     },
 918 |     get: function () {
 919 |       return this._slideIndexForTime(this._currentTime);
 920 |     }
 921 |   },
 922 | 
 923 |   paused: {
 924 |     set: function (paused) {
 925 |       var _paused = this._curLoop === null;
 926 |       if (paused !== _paused) {
 927 |         if (paused) this._stop();
 928 |         else this._start();
 929 |       }
 930 |     },
 931 |     get: function () {
 932 |       return this._curLoop === null;
 933 |     }
 934 |   },
 935 | 
 936 |   duration: {
 937 |     get: function () {
 938 |       var duration = this._duration || 0;
 939 |       if (this._loop && !this._feeded)
 940 |         return duration + (this._lastTransitionDuration||0);
 941 |       else
 942 |         return duration;
 943 |     },
 944 |     set: function () {
 945 |       throw new Error("Diaporama: duration is a read-only value.");
 946 |     }
 947 |   },
 948 | 
 949 |   slides: {
 950 |     get: function () {
 951 |       var data = this._data;
 952 |       return data && data.timeline && data.timeline.length || 0;
 953 |     },
 954 |     set: function () {
 955 |       throw new Error("Diaporama: slides is a read-only value.");
 956 |     }
 957 |   },
 958 | 
 959 |   renderingMode: {
 960 |     get: function () {
 961 |       return this._renderingMode;
 962 |     },
 963 |     set: function () {
 964 |       throw new Error("Diaporama: setting renderingMode afterwards is not supported.");
 965 |     }
 966 |   },
 967 | 
 968 |   backgroundColor: {
 969 |     get: function () {
 970 |       return this._backgroundColor;
 971 |     },
 972 |     set: function () {
 973 |       throw new Error("Diaporama: setting backgroundColor afterwards is not supported.");
 974 |     }
 975 |   },
 976 | 
 977 |   currentRenderState: {
 978 |     get: function () {
 979 |       return this._currentRenderState;
 980 |     },
 981 |     set: function () {
 982 |       throw new Error("Diaporama: currentRenderState is a read-only value.");
 983 |     }
 984 |   },
 985 | 
 986 |   timeBuffered: {
 987 |     get: function () {
 988 |       return this._timeBuffered;
 989 |     },
 990 |     set: function () {
 991 |       throw new Error("Diaporama: timeBuffered is a read-only value.");
 992 |     }
 993 |   }
 994 | 
 995 | });
 996 | 
 997 | Diaporama.RENDER_EMPTY = RENDER_EMPTY;
 998 | Diaporama.RENDER_WAITING = RENDER_WAITING;
 999 | Diaporama.RENDER_PLAYING = RENDER_PLAYING;
1000 | 
1001 | module.exports = Diaporama;
1002 | 


--------------------------------------------------------------------------------
/lib/DiaporamaFormatError.js:
--------------------------------------------------------------------------------
 1 | 
 2 | function DiaporamaFormatError (msg, data) {
 3 |   var temp = Error.call(this, msg);
 4 |   this.name = temp.name = "DiaporamaFormatError";
 5 |   this.stack = temp.stack;
 6 |   this.message = temp.message;
 7 |   this.data = data;
 8 | }
 9 | DiaporamaFormatError.prototype = Object.create(Error.prototype, {
10 |   constructor: {
11 |     value: DiaporamaFormatError,
12 |     writable: true,
13 |     configurable: true
14 |   }
15 | });
16 | 
17 | module.exports = DiaporamaFormatError;
18 | 


--------------------------------------------------------------------------------
/lib/DiaporamaRenderingCanvas/Post.js:
--------------------------------------------------------------------------------
 1 | var createShader = require("gl-shader");
 2 | var ndarray = require("ndarray");
 3 | var createTexture = require("gl-texture2d");
 4 | 
 5 | var VERT = [
 6 |   "attribute vec2 position;",
 7 |   "varying vec2 uv;",
 8 |   "void main() {",
 9 |   "gl_Position = vec4(position,0.0,1.0);",
10 |   "uv = 0.5 * (position+1.0);",
11 |   "}"
12 | ].join("");
13 | 
14 | var FRAG = [
15 |   "precision mediump float;",
16 |   "uniform sampler2D buffer;",
17 |   "varying vec2 uv;",
18 |   "void main() {",
19 |   "gl_FragColor = texture2D(buffer, uv);",
20 |   "}"
21 | ].join("");
22 | 
23 | function Post (gl, bgColor) {
24 |   this.gl = gl;
25 |   this.shader = createShader(gl, VERT, FRAG);
26 |   this.buffer = gl.createBuffer();
27 |   gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
28 |   gl.bufferData(
29 |     gl.ARRAY_BUFFER,
30 |     new Float32Array([
31 |       -1.0, -1.0,
32 |       1.0, -1.0,
33 |       -1.0,  1.0,
34 |       -1.0,  1.0,
35 |       1.0, -1.0,
36 |       1.0,  1.0]),
37 |     gl.STATIC_DRAW);
38 | 
39 |   var rgba = bgColor.concat([ 1 ]);
40 |   this.background = createTexture(gl, ndarray(new Float32Array(rgba.concat(rgba).concat(rgba).concat(rgba)), [ 2, 2, 4 ]));
41 | }
42 | 
43 | Post.prototype = {
44 |   dispose: function () {
45 |     this.gl.deleteBuffer(this.buffer);
46 |     this.background.dispose();
47 |     this.shader.dispose();
48 |   },
49 |   renderTexture: function (texture) {
50 |     var gl = this.gl;
51 |     var shader = this.shader;
52 |     shader.bind();
53 |     gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
54 |     shader.attributes.position.pointer();
55 |     shader.uniforms.buffer = texture.bind();
56 |     gl.drawArrays(gl.TRIANGLES, 0, 6);
57 |   },
58 |   renderFBO: function (fbo) {
59 |     this.renderTexture(fbo.color[0]);
60 |   },
61 |   renderEmpty: function () {
62 |     this.renderTexture(this.background);
63 |   }
64 | };
65 | 
66 | module.exports = Post;
67 | 


--------------------------------------------------------------------------------
/lib/DiaporamaRenderingCanvas/SegmentGlslTransition.js:
--------------------------------------------------------------------------------
 1 | var assign = require("object-assign");
 2 | var BezierEasing = require("bezier-easing");
 3 | var SegmentTimeline = require("../SegmentTimeline");
 4 | 
 5 | function SegmentTransition (renderChannel, data, segmentFrom, segmentTo) {
 6 |   SegmentTimeline.call(this, renderChannel, data);
 7 |   this.segmentFrom = segmentFrom;
 8 |   this.segmentTo = segmentTo;
 9 |   this._p = 0;
10 | }
11 | 
12 | SegmentTransition.prototype = assign({}, SegmentTimeline.prototype, {
13 |   toString: function () {
14 |     return "SegmentTransition("+this.channel+","+this.segmentFrom.channel+"~>"+this.segmentTo.channel+")";
15 |   },
16 | 
17 |   ready: function (ctx) {
18 |     return this.segmentFrom.ready(ctx) &&
19 |            this.segmentTo.ready(ctx) &&
20 |            (!this.data.name || ctx.transitions.has(this.data.name));
21 |   },
22 | 
23 |   enter: function (ctx) {
24 |     var transitionNext = this.data;
25 |     var transition = ctx.transitions.getOrFade(transitionNext.name);
26 |     var gl = ctx.getChannelContext(this.channel);
27 |     this.gl = gl;
28 |     this.from = function () {
29 |       return ctx.getChannel(this.segmentFrom.channel);
30 |     };
31 |     this.to = function () {
32 |       return ctx.getChannel(this.segmentTo.channel);
33 |     };
34 | 
35 |     // ^ FIXME need to verify that channel has been rendered with latest frame?
36 |     this.uniforms = assign({}, transition.uniforms, transitionNext.uniforms || {});
37 |     this.duration = transitionNext.duration || 1000;
38 |     this.easing = BezierEasing.apply(null, transitionNext.easing || [0, 0, 1, 1]);
39 |     this.t = transition.t;
40 |     return [ "transition", this.data, this.segmentFrom.data, this.segmentTo.data ];
41 |   },
42 | 
43 |   resize: function () {
44 |     this.t.render(this._p, this.from(), this.to(), this.uniforms);
45 |   },
46 | 
47 |   leave: function () {
48 |     return [ "transitionEnd", this.data, this.segmentFrom.data, this.segmentTo.data ];
49 |   },
50 | 
51 |   render: function (currentTime, interval) {
52 |     var p = this._p = this.easing(interval.interpolate(currentTime));
53 |     this.t.render(p, this.from(), this.to(), this.uniforms);
54 |   }
55 | });
56 | 
57 | module.exports = SegmentTransition;
58 | 


--------------------------------------------------------------------------------
/lib/DiaporamaRenderingCanvas/SegmentKenBurnsWebGL.js:
--------------------------------------------------------------------------------
 1 | var assign = require("object-assign");
 2 | var createTexture = require("gl-texture2d");
 3 | var SegmentKenBurns = require("../SegmentKenBurns");
 4 | 
 5 | function SegmentKenBurnsWebGL (renderChannel, data, diaporama) {
 6 |   SegmentKenBurns.call(this, renderChannel, data, diaporama);
 7 | }
 8 | 
 9 | SegmentKenBurnsWebGL.prototype = assign({}, SegmentKenBurns.prototype, {
10 | 
11 |   enter: function (ctx) {
12 |     //this.getSize = ctx.getSize.bind(ctx);
13 |     var size = this.getMediaSize();
14 |     var res = SegmentKenBurns.prototype.enter.apply(this, arguments);
15 |     this.texture = createTexture(ctx.gl, [size.width, size.height]);
16 |     this.texture.minFilter = this.texture.magFilter = ctx.gl.LINEAR;
17 |     if (this.image) this.texture.setPixels(this.image);
18 |     return res;
19 |   },
20 | 
21 |   leave: function () {
22 |     this.texture.dispose();
23 |     return SegmentKenBurns.prototype.leave.apply(this, arguments);
24 |   },
25 | 
26 |   draw: function (imageOrVideo, bound) {
27 |     if (this.video) this.texture.setPixels(imageOrVideo);
28 |     this.kenburns.render(this.texture, bound);
29 |   }
30 | 
31 | });
32 | 
33 | module.exports = SegmentKenBurnsWebGL;
34 | 


--------------------------------------------------------------------------------
/lib/DiaporamaRenderingCanvas/StoreTransitions.js:
--------------------------------------------------------------------------------
 1 | var createGlslTransition = require("glsl-transition");
 2 | var GlslTransitionFade = require("glsl-transition-fade");
 3 | 
 4 | function StoreTransitions (transitionContext) {
 5 |   this.gl = transitionContext;
 6 |   this.ts = {};
 7 |   this.set("fade", GlslTransitionFade);
 8 | }
 9 | 
10 | StoreTransitions.prototype = {
11 |   destroy: function () {
12 |     for (var t in this.ts) {
13 |       this.ts[t].t.dispose();
14 |     }
15 |     this.ts = null;
16 |   },
17 | 
18 |   has: function (name) {
19 |     return (name in this.ts);
20 |   },
21 | 
22 |   set: function (name, transition) {
23 |     // TODO: schedule that asynchronously
24 |     var t = createGlslTransition(this.gl, transition.glsl);
25 |     this.ts[name] = {
26 |       t: t,
27 |       uniforms: transition.uniforms || {}
28 |     };
29 |   },
30 | 
31 |   get: function (name) {
32 |     return this.ts[name];
33 |   },
34 | 
35 |   getOrFade: function (name) {
36 |     return name && this.ts[name] || this.ts.fade;
37 |   }
38 | };
39 | 
40 | module.exports = StoreTransitions;
41 | 


--------------------------------------------------------------------------------
/lib/DiaporamaRenderingCanvas/index.js:
--------------------------------------------------------------------------------
  1 | var KenBurns = require("kenburns-webgl");
  2 | var Slide2d = require("slide2d");
  3 | var createFBO = require("gl-fbo");
  4 | var createTexture = require("gl-texture2d");
  5 | var Post = require("./Post");
  6 | var SegmentTransition = require("./SegmentGlslTransition");
  7 | var SegmentKenBurns = require("./SegmentKenBurnsWebGL");
  8 | var SegmentSlide2d = require("../SegmentSlide2d");
  9 | var StoreTransitions = require("./StoreTransitions");
 10 | var Channels = require("../Channels");
 11 | 
 12 | function DiaporamaRenderingCanvas (media, container, bgColor) {
 13 |   this.media = media;
 14 |   this._container = container;
 15 |   this.bg = bgColor.concat([ 1 ]);
 16 |   this._canvas = null;
 17 |   this._canvases = {};
 18 |   this._textures = {};
 19 |   this._ctxs = {};
 20 |   this._fbos = {};
 21 |   this._currentChannel = null;
 22 |   var shape = this.shape = [ 1, 1 ];
 23 | 
 24 |   var resolveImage = media.getImageResolver();
 25 | 
 26 |   var canvas = document.createElement("canvas");
 27 |   var gl = canvas.getContext("webgl");
 28 |   gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
 29 |   this.gl = gl;
 30 | 
 31 |   this._post = new Post(gl, bgColor);
 32 | 
 33 |   var fbo = createFBO(gl, shape);
 34 |   this._attachContext(Channels.TRANSITION, gl, fbo);
 35 | 
 36 |   Channels.KENBURNS.forEach(function (c) {
 37 |     var fbo = createFBO(gl, shape);
 38 |     var ctx = new KenBurns(gl);
 39 |     this._attachContext(c, ctx, fbo);
 40 |   }, this);
 41 | 
 42 |   Channels.SLIDE2D.forEach(function (c) {
 43 |     var canvas = document.createElement("canvas");
 44 |     var ctx = canvas.getContext("2d");
 45 |     this._canvases[c] = canvas;
 46 |     var texture = createTexture(gl, canvas);
 47 |     texture.minFilter = texture.magFilter = gl.LINEAR;
 48 |     this._textures[c] = texture;
 49 |     this._attachContext(c, Slide2d(ctx, resolveImage));
 50 |   }, this);
 51 | 
 52 |   this._container.appendChild(this._canvas = canvas);
 53 |   this.transitions = new StoreTransitions(this.getChannelContext(Channels.TRANSITION));
 54 | }
 55 | 
 56 | DiaporamaRenderingCanvas.prototype = {
 57 |   SegmentTransition: SegmentTransition,
 58 |   SegmentKenBurns: SegmentKenBurns,
 59 |   SegmentSlide2d: SegmentSlide2d,
 60 | 
 61 |   destroy: function () {
 62 |     this.media.destroy();
 63 |     this.transitions.destroy();
 64 |     for (var k in this._ctxs) {
 65 |       var ctx = this._ctxs[k];
 66 |       if (ctx.destroy) ctx.destroy();
 67 |       else if (ctx.dispose) ctx.dispose();
 68 |     }
 69 |     for (var f in this._fbos) {
 70 |       this._fbos[f].dispose();
 71 |     }
 72 |     for (var t in this._textures) {
 73 |       this._textures[t].dispose();
 74 |     }
 75 |     this._post.dispose();
 76 |     this._fbos = null;
 77 |     this._canvas = null;
 78 |     this._canvases = null;
 79 |     this._ctxs = null;
 80 |     this._post = null;
 81 |     this._currentChannel = null;
 82 |   },
 83 | 
 84 |   getSize: function () {
 85 |     var shape = this.shape;
 86 |     return {
 87 |       width: shape[0],
 88 |       height: shape[1]
 89 |     };
 90 |   },
 91 | 
 92 |   resize: function (w, h, resolution) {
 93 |     var W = w * resolution, H = h * resolution;
 94 |     var shape = this.shape = [ W, H ];
 95 |     var canvas = this._canvas;
 96 |     var container = this._container;
 97 |     canvas.style.width = w + "px";
 98 |     canvas.style.height = h + "px";
 99 |     canvas.width = W;
100 |     canvas.height = H;
101 |     container.style.width = w + "px";
102 |     container.style.height = h + "px";
103 |     for (var c in this._canvases) {
104 |       var canv = this._canvases[c];
105 |       canv.width = W;
106 |       canv.height = H;
107 |     }
108 |     for (var f in this._fbos)
109 |       this._fbos[f].shape = shape;
110 |     for (var t in this._textures)
111 |       this._textures[t].shape = shape;
112 |   },
113 | 
114 |   getChannel: function (c) {
115 |     var fbo = this._fbos[c];
116 |     if (fbo) {
117 |       return fbo.color[0];
118 |     }
119 |     else {
120 |       var canvas = this._canvases[c];
121 |       var texture = this._textures[c];
122 |       var gl = this.gl;
123 |       gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
124 |       // TODO: define a SegmentSlide2dWebGL refinement which do this only when _render
125 |       texture.setPixels(canvas);
126 |       gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
127 |       return texture;
128 |     }
129 |   },
130 | 
131 |   getChannelContext: function (c) {
132 |     return this._ctxs[c];
133 |   },
134 | 
135 |   switchChannel: function (c) {
136 |     this._currentChannel = c;
137 |   },
138 | 
139 |   _attachContext: function (c, ctx, fbo) {
140 |     this._ctxs[c] = ctx;
141 |     if (fbo) this._fbos[c] = fbo;
142 |   },
143 | 
144 |   preparePostRender: function () {
145 |     var gl = this.gl;
146 |     var bg = this.bg;
147 |     var shape = this.shape;
148 |     gl.bindFramebuffer(gl.FRAMEBUFFER, null);
149 |     gl.viewport(0, 0, shape[0], shape[1]);
150 |     gl.clearColor.apply(gl, bg);
151 |     gl.clear(gl.COLOR_BUFFER_BIT);
152 |   },
153 | 
154 |   render: function (currentTime, runningSegments) {
155 |     var notReady = false;
156 |     if (runningSegments.length > 0) {
157 |       var channel;
158 |       for (var s = runningSegments.length-1; s >= 0; s--) {
159 |         var seg = runningSegments[s];
160 |         var segment = seg[1];
161 |         var interval = seg[0];
162 |         channel = segment.channel;
163 |         var fbo = this._fbos[segment.channel];
164 |         if (fbo) fbo.bind();
165 |         if (segment.render(currentTime, interval)) {
166 |           notReady = true;
167 |         }
168 |       }
169 |       this.preparePostRender();
170 |       this._post.renderTexture(this.getChannel(channel));
171 |     }
172 |     else {
173 |       this.preparePostRender();
174 |       this._post.renderEmpty();
175 |     }
176 |     return notReady;
177 |   }
178 | };
179 | 
180 | 
181 | module.exports = DiaporamaRenderingCanvas;
182 | 


--------------------------------------------------------------------------------
/lib/DiaporamaRenderingDOM/SegmentDomTransition.js:
--------------------------------------------------------------------------------
 1 | var assign = require("object-assign");
 2 | var BezierEasing = require("bezier-easing");
 3 | var SegmentTimeline = require("../SegmentTimeline");
 4 | 
 5 | function SegmentTransition (renderChannel, data, segmentFrom, segmentTo) {
 6 |   SegmentTimeline.call(this, renderChannel, data);
 7 |   this.segmentFrom = segmentFrom;
 8 |   this.segmentTo = segmentTo;
 9 | }
10 | 
11 | SegmentTransition.prototype = assign({}, SegmentTimeline.prototype, {
12 |   toString: function () {
13 |     return "SegmentTransition("+this.channel+","+this.segmentFrom.channel+"~>"+this.segmentTo.channel+")";
14 |   },
15 | 
16 |   ready: function (ctx) {
17 |     return this.segmentFrom.ready(ctx) &&
18 |            this.segmentTo.ready(ctx);
19 |   },
20 | 
21 |   enter: function (ctx) {
22 |     var transitionNext = this.data;
23 |     var from = ctx.getChannel(this.segmentFrom.channel);
24 |     var to = ctx.getChannel(this.segmentTo.channel);
25 |     var container = ctx.getChannel(this.channel);
26 |     from.style.position = "absolute";
27 |     from.style.top = 0;
28 |     from.style.left = 0;
29 |     to.style.position = "absolute";
30 |     to.style.top = 0;
31 |     to.style.left = 0;
32 |     container.appendChild(to);
33 |     container.appendChild(from);
34 |     // FIXME: this seems to produce a small lag here. We might find another way to touch less DOM.
35 |     this.container = container;
36 |     this.from = from;
37 |     this.to = to;
38 |     this.duration = transitionNext.duration || 1000;
39 |     this.easing = BezierEasing.apply(null, transitionNext.easing || [0, 0, 1, 1]);
40 |     return [ "transition", transitionNext, this.segmentFrom.data, this.segmentTo.data ];
41 |   },
42 | 
43 |   resize: function () {
44 |   },
45 | 
46 |   leave: function () {
47 |     this.container.removeChild(this.from);
48 |     this.container.removeChild(this.to);
49 |     this.from.style.opacity = 1;
50 |     this.to.style.opacity = 1;
51 |     return [ "transitionEnd", this.data, this.segmentFrom.data, this.segmentTo.data ];
52 |   },
53 | 
54 |   render: function (currentTime, interval) {
55 |     var progress = this.easing(interval.interpolate(currentTime));
56 |     this.from.style.opacity = 1-progress;
57 |   }
58 | });
59 | 
60 | module.exports = SegmentTransition;
61 | 


--------------------------------------------------------------------------------
/lib/DiaporamaRenderingDOM/SegmentKenBurnsDOM.js:
--------------------------------------------------------------------------------
 1 | var assign = require("object-assign");
 2 | var SegmentKenBurns = require("../SegmentKenBurns");
 3 | 
 4 | function SegmentKenBurnsDOM (renderChannel, data, diaporama) {
 5 |   SegmentKenBurns.call(this, renderChannel, data, diaporama);
 6 | }
 7 | 
 8 | SegmentKenBurnsDOM.prototype = assign({}, SegmentKenBurns.prototype, {
 9 | 
10 |   enter: function (ctx) {
11 |     this.div = ctx.getChannel(this.channel);
12 |     this.getSize = ctx.getSize.bind(ctx);
13 |     return SegmentKenBurns.prototype.enter.apply(this, arguments);
14 |   },
15 | 
16 |   draw: function (image, bound) {
17 |     this.kenburns.draw(image, bound);
18 |   }
19 | 
20 | });
21 | 
22 | 
23 | 
24 | module.exports = SegmentKenBurnsDOM;
25 | 


--------------------------------------------------------------------------------
/lib/DiaporamaRenderingDOM/index.js:
--------------------------------------------------------------------------------
  1 | var KenBurnsDOM = require("kenburns-dom");
  2 | var Slide2d = require("slide2d");
  3 | 
  4 | var Channels = require("../Channels");
  5 | var SegmentTransition = require("./SegmentDomTransition");
  6 | var SegmentKenBurns = require("./SegmentKenBurnsDOM");
  7 | var SegmentSlide2d = require("../SegmentSlide2d");
  8 | 
  9 | function DiaporamaRenderingDOM (media, container, bgColor) {
 10 |   this.media = media;
 11 |   this._container = container;
 12 |   var curPos = this._container.style.position;
 13 |   if (!curPos || curPos==="static")
 14 |     this._container.style.position = "relative";
 15 |   this._container.style.backgroundColor = "rgb("+bgColor.map(function(v) { return ~~(v*255); })+")";
 16 |   this._nodes = {};
 17 |   this._ctxs = {};
 18 |   this.createDOM();
 19 |   this.resolveImage = media.getImageResolver();
 20 | }
 21 | 
 22 | DiaporamaRenderingDOM.prototype = {
 23 |   SegmentTransition: SegmentTransition,
 24 |   SegmentKenBurns: SegmentKenBurns,
 25 |   SegmentSlide2d: SegmentSlide2d,
 26 | 
 27 |   destroy: function () {
 28 |     this._setChild(null);
 29 |     this.media.destroy();
 30 |     for (var k in this._ctxs) {
 31 |       if (this._ctxs[k].destroy) {
 32 |         this._ctxs[k].destroy();
 33 |       }
 34 |     }
 35 |     this._nodes = null;
 36 |     this._ctxs = null;
 37 |   },
 38 | 
 39 |   resize: function (w, h, resolution) {
 40 |     this._w = w;
 41 |     this._h = h;
 42 |     var W = w * resolution, H = h * resolution;
 43 |     for (var k in this._nodes) {
 44 |       var el = this._nodes[k];
 45 |       el.style.width = w + "px";
 46 |       el.style.height = h + "px";
 47 |       if (el.nodeName === "CANVAS") {
 48 |         el.width = W;
 49 |         el.height = H;
 50 |       }
 51 |     }
 52 |     this._container.style.width = w + "px";
 53 |     this._container.style.height = h + "px";
 54 |   },
 55 | 
 56 |   getSize: function () {
 57 |     return {
 58 |       width: this._w,
 59 |       height: this._h
 60 |     };
 61 |   },
 62 | 
 63 |   getChannel: function (c) {
 64 |     return this._nodes[c];
 65 |   },
 66 | 
 67 |   getChannelContext: function (c) {
 68 |     return this._ctxs[c];
 69 |   },
 70 | 
 71 |   switchChannel: function (c) {
 72 |     if (c !== this._c) {
 73 |       this._c = c;
 74 |       this._setChild(this._nodes[c]);
 75 |     }
 76 |   },
 77 | 
 78 |   render: function (currentTime, runningSegments) {
 79 |     var notReady = false;
 80 |     if (runningSegments.length > 0) {
 81 |       for (var s = runningSegments.length-1; s >= 0; s--) {
 82 |         var seg = runningSegments[s];
 83 |         var segment = seg[1];
 84 |         var interval = seg[0];
 85 |         if (segment.render(currentTime, interval)) {
 86 |           notReady = true;
 87 |         }
 88 |       }
 89 |       this.switchChannel(runningSegments[0][1].channel);
 90 |     }
 91 |     else {
 92 |       this.switchChannel(null);
 93 |     }
 94 |     return notReady;
 95 |   },
 96 | 
 97 |   createDOM: function () {
 98 |     var resolveImage = this.resolveImage;
 99 |     var div = document.createElement("div");
100 |     this._attachChannel(Channels.TRANSITION, div, div);
101 | 
102 |     Channels.KENBURNS.forEach(function (c) {
103 |       var div = document.createElement("div");
104 |       var ctx = new KenBurnsDOM(div);
105 |       ctx.getViewport = this.getSize.bind(this);
106 |       this._attachChannel(c, div, ctx);
107 |     }, this);
108 | 
109 |     Channels.SLIDE2D.forEach(function (c) {
110 |       var canvas = document.createElement("canvas");
111 |       var ctx = canvas.getContext("2d");
112 |       this._attachChannel(c, canvas, Slide2d(ctx, resolveImage));
113 |     }, this);
114 | 
115 |   },
116 | 
117 |   _attachChannel: function (channel, node, ctx) {
118 |     this._nodes[channel] = node;
119 |     this._ctxs[channel] = ctx;
120 |   },
121 | 
122 |   _setChild: function (c) {
123 |     var elt = this._container;
124 |     var child = elt.children[0];
125 |     if (child) elt.removeChild(child);
126 |     if (c) elt.appendChild(c);
127 |   }
128 | };
129 | 
130 | 
131 | module.exports = DiaporamaRenderingDOM;
132 | 


--------------------------------------------------------------------------------
/lib/MediaLoader.js:
--------------------------------------------------------------------------------
 1 | var assign = require("object-assign");
 2 | var EventEmitter = require("events").EventEmitter;
 3 | var hash = require("./hashResource");
 4 | 
 5 | /*
 6 | A wrapper on top of loader, that:
 7 |  - cache results
 8 |  - maximize parallel loading
 9 |  - provide events
10 | */
11 | function MediaLoader (loader, parallelThreshold) {
12 |   this.loader = loader;
13 |   this.resources = {};
14 |   this._loading = {};
15 |   this._threshold = parallelThreshold || 3;
16 |   this._queue = [];
17 | }
18 | 
19 | MediaLoader.prototype = assign({}, EventEmitter.prototype, {
20 |   destroy: function () {
21 |     this.removeAllListeners();
22 |     this.resources = {};
23 |     for (var k in this._loading) {
24 |       this._loading[k]();
25 |     }
26 |     this._loading = {};
27 |     this._queue = [];
28 | 
29 |     this._imageResolver = function (url) {
30 |       var res = this.get(url);
31 |       return res && res.image || null;
32 |     }.bind(this);
33 |   },
34 | 
35 |   // TODO Split the semantic of "hasPending" and "hasReady". same for StoreTransitions
36 |   has: function (descr) {
37 |     return (hash(descr) in this.resources);
38 |   },
39 | 
40 |   get: function (descr) {
41 |     return this.resources[hash(descr)];
42 |   },
43 | 
44 |   load: function (descr) {
45 |     if (Object.keys(this._loading).length >= this._threshold)
46 |       this._queue.push(descr);
47 |     else
48 |       this._load(descr);
49 |   },
50 | 
51 |   getImageResolver: function () {
52 |     return this._imageResolver;
53 |   },
54 | 
55 |   _load: function (descr) {
56 |     var key = hash(descr);
57 |     if (key in this._loading) return; // Already pending
58 |     var self = this;
59 |     this._take(descr, this.loader(descr, function (res) {
60 |       if (self._release(descr)) {
61 |         self.resources[key] = res;
62 |         self.emit("load", descr, res);
63 |       }
64 |     }, function (err) {
65 |       self.emit("error", descr, err);
66 |     }));
67 |   },
68 | 
69 |   _take: function (descr, loadMeta) {
70 |     this._loading[hash(descr)] = loadMeta;
71 |   },
72 | 
73 |   _release: function (descr) {
74 |     var key = hash(descr);
75 |     if (key in this._loading) {
76 |       delete this._loading[key];
77 |       if (this._queue.length > 0)
78 |         this._load(this._queue.shift());
79 |       return true;
80 |     }
81 |     else {
82 |       return false;
83 |     }
84 |   }
85 | 
86 | });
87 | 
88 | module.exports = MediaLoader;
89 | 


--------------------------------------------------------------------------------
/lib/SegmentKenBurns.js:
--------------------------------------------------------------------------------
  1 | var assign = require("object-assign");
  2 | var SegmentTimeline = require("./SegmentTimeline");
  3 | 
  4 | var rectClamp = require("rect-clamp");
  5 | var rectCrop = require("rect-crop");
  6 | var rectMix = require("rect-mix");
  7 | var BezierEasing = require("bezier-easing");
  8 | var hash = require("./hashResource");
  9 | 
 10 | var firstInstanceKey = "__skb_fi";
 11 | 
 12 | function SegmentKenBurns (renderChannel, data, diaporama) {
 13 |   SegmentTimeline.call(this, renderChannel, data);
 14 |   this.diaporama = diaporama;
 15 |   this.outOfSync = false;
 16 |   this.syncing = false;
 17 |   this.video = null;
 18 |   this.image = null;
 19 |   this.opts = assign({
 20 |     position: 0,
 21 |     volume: 0,
 22 |     playbackRate: 1,
 23 |     loop: false
 24 |   }, data);
 25 | 
 26 |   this.onVideoSeeked = this.onVideoSeeked.bind(this);
 27 |   this.onDiaporamaPause = this.onDiaporamaPause.bind(this);
 28 |   this.onDiaporamaPlay = this.onDiaporamaPlay.bind(this);
 29 |   this.onDiaporamaRateChange = this.onDiaporamaRateChange.bind(this);
 30 |   this.onDiaporamaSeeked = this.onDiaporamaSeeked.bind(this);
 31 | 
 32 |   this.resKey = hash(data.video || data.image);
 33 | 
 34 |   if (!diaporama[firstInstanceKey]) diaporama[firstInstanceKey] = {};
 35 |   if (!diaporama[firstInstanceKey][this.resKey]) {
 36 |     this.isFirstInstance = true;
 37 |     diaporama[firstInstanceKey][this.resKey] = true;
 38 |   }
 39 | }
 40 | 
 41 | SegmentKenBurns.prototype = assign({}, SegmentTimeline.prototype, {
 42 |   toString: function () {
 43 |     return "SegmentKenBurns("+this.channel+")";
 44 |   },
 45 | 
 46 |   destroy: function () {
 47 |     if (this.isFirstInstance) {
 48 |       // release the media, for the next time
 49 |       delete this.diaporama[firstInstanceKey][this.resKey];
 50 |     }
 51 |     else {
 52 |       // the resource is not from media, we can free it
 53 |       if (this._res) this._res();
 54 |     }
 55 |     this._res = null;
 56 |   },
 57 | 
 58 |   _computeVideoMeta: function () {
 59 |     var video = this.video;
 60 |     this.videoDuration = video.duration;
 61 |     this.videoSize = {
 62 |       width: video.videoWidth,
 63 |       height: video.videoHeight
 64 |     };
 65 |   },
 66 | 
 67 |   _setRes: function (result) {
 68 |     if (result.video) {
 69 |       this.video = result.video;
 70 |       this._computeVideoMeta();
 71 |     }
 72 |     else if (result.image) {
 73 |       this.image = result.image;
 74 |     }
 75 |   },
 76 | 
 77 |   _load: function (ctx) {
 78 |     var media = ctx.media;
 79 |     var data = this.data;
 80 |     if (this._loadHandled) return;
 81 |     if (this.isFirstInstance) {
 82 |       var res = media.get(data.image || data.video);
 83 |       if (res) {
 84 |         this._loadHandled = true;
 85 |         this._setRes(res);
 86 |       }
 87 |       return;
 88 |     }
 89 |     this._loadHandled = true;
 90 |     this._res = media.loader(data.video || data.image, this._setRes.bind(this));
 91 |   },
 92 | 
 93 |   ready: function (ctx) {
 94 |     this._load(ctx);
 95 |     return this.image || this.video;
 96 |   },
 97 | 
 98 |   getMediaSize: function () {
 99 |     return this.image || this.videoSize;
100 |   },
101 | 
102 |   enter: function (ctx) {
103 |     this.outOfSync = true;
104 |     this.syncing = false;
105 |     this.getSize = ctx.getSize.bind(ctx);
106 |     var item = this.data;
107 |     var video = this.video;
108 |     var image = this.image;
109 |     var opts = this.opts;
110 |     var size = this.getMediaSize();
111 | 
112 |     if (video) {
113 |       video.loop = opts.loop;
114 |       video.volume = opts.volume;
115 |       video.playbackRate = this.getPlaybackRate();
116 | 
117 |       video.addEventListener("seeked", this.onVideoSeeked);
118 |       this.diaporama.on("pause", this.onDiaporamaPause);
119 |       this.diaporama.on("play", this.onDiaporamaPlay);
120 |       this.diaporama.on("ratechange", this.onDiaporamaRateChange);
121 |       this.diaporama.on("seeked", this.onDiaporamaSeeked);
122 |     }
123 | 
124 |     var kenburns = ctx.getChannelContext(this.channel);
125 |     this.kenburns = kenburns;
126 |     var from = rectCrop.largest;
127 |     var to = rectCrop.largest;
128 |     if (item.kenburns) {
129 |       if (item.kenburns.from) from = rectCrop.apply(null, item.kenburns.from);
130 |       if (item.kenburns.to) to = rectCrop.apply(null, item.kenburns.to);
131 |     }
132 |     this.from = from;
133 |     this.to = to;
134 | 
135 |     this.easing = BezierEasing.apply(null, item.kenburns && item.kenburns.easing || [0, 0, 1, 1]);
136 |     this.viewport = [ 0, 0, size.width, size.height ];
137 | 
138 |     this.computeBounds();
139 |     if (kenburns.runStart) kenburns.runStart(video || image);
140 | 
141 |     return [ "slide", item ];
142 |   },
143 | 
144 |   leave: function () {
145 |     var video = this.video;
146 |     if (video) {
147 |       video.pause();
148 |       video.removeEventListener("seeked", this.onVideoSeeked);
149 |       this.diaporama.removeListener("pause", this.onDiaporamaPause);
150 |       this.diaporama.removeListener("play", this.onDiaporamaPlay);
151 |       this.diaporama.removeListener("ratechange", this.onDiaporamaRateChange);
152 |       this.diaporama.removeListener("seeked", this.onDiaporamaSeeked);
153 |     }
154 | 
155 |     var kenburns = this.kenburns;
156 |     if (kenburns.runEnd) kenburns.runEnd();
157 |     return [ "slideEnd", this.data ];
158 |   },
159 | 
160 |   resize: function () {
161 |     this.computeBounds();
162 |   },
163 | 
164 |   getPlaybackRate: function () {
165 |     return this.opts.playbackRate * this.diaporama.playbackRate;
166 |   },
167 | 
168 |   computeCurrentTime: function (relativeTime) {
169 |     var opts = this.opts;
170 |     var playbackRate = this.getPlaybackRate();
171 |     return ((opts.position + relativeTime * playbackRate) / 1000) % this.videoDuration;
172 |   },
173 | 
174 |   onDiaporamaRateChange: function () {
175 |     this.video.playbackRate = this.getPlaybackRate();
176 |     // this.outOfSync = true; // NOTE: we are not syncing to not create video jumps
177 |   },
178 | 
179 |   onDiaporamaSeeked: function () {
180 |     this.outOfSync = true;
181 |   },
182 | 
183 |   onDiaporamaPause: function () {
184 |     this.outOfSync = true;
185 |     this.video.pause();
186 |   },
187 | 
188 |   onDiaporamaPlay: function () {
189 |     this.outOfSync = true;
190 |   },
191 | 
192 |   onVideoSeeked: function () {
193 |     this.syncing = false;
194 |     this.diaporama._requestRender();
195 |   },
196 | 
197 |   setVideoTime: function (t) {
198 |     this.video.currentTime = t;
199 |   },
200 | 
201 |   getCurrentTimeDiff: function (currentTime) {
202 |     var video = this.video;
203 |     var dur = this.videoDuration;
204 |     var diff = Math.abs((currentTime - video.currentTime + dur) % dur);
205 |     return diff;
206 |   },
207 | 
208 |   render: function (t, interval) {
209 |     var p = this.easing(interval.interpolate(t));
210 |     var video = this.video;
211 |     var image = this.image;
212 | 
213 |     if (video) {
214 |       var currentTime = this.computeCurrentTime(interval.relative(t));
215 |       var diaporamaPaused = this.diaporama.paused;
216 |       var diff = this.getCurrentTimeDiff(currentTime);
217 | 
218 |       if (diaporamaPaused) {
219 |         if (diff > 0.01) {
220 |           this.setVideoTime(currentTime);
221 |         }
222 |       }
223 |       else if (!this.syncing) {
224 |         if (this.outOfSync) {
225 |           this.outOfSync = false;
226 |           this.syncing = true;
227 |           this.startSyncingTime = Date.now();
228 |           this.setVideoTime(currentTime);
229 | 
230 |           if (diaporamaPaused !== video.paused) {
231 |             if (diaporamaPaused)
232 |               video.pause();
233 |             else
234 |               video.play();
235 |           }
236 |         }
237 |         else {
238 |           // WORKAROUND:
239 |           // If the video.paused is STILL not in sync,
240 |           // force the currentTime (e.g: iPhone / iPad doesn't allow to .play())
241 |           if (diaporamaPaused !== video.paused) {
242 |             this.setVideoTime(currentTime);
243 |           }
244 |         }
245 |       }
246 |     }
247 | 
248 |     var bound = rectMix(this.fromCropBound, this.toCropBound, p);
249 |     bound = rectClamp(bound, this.viewport);
250 |     this.draw(video || image, bound);
251 | 
252 |     return this.syncing && Date.now()-this.startSyncingTime > 300;
253 |   },
254 | 
255 |   cropBound: function (crop) {
256 |     var bnds = crop(this.getSize(), this.getMediaSize());
257 |     bnds = rectClamp(bnds, this.viewport);
258 |     return bnds;
259 |   },
260 | 
261 |   computeBounds: function () {
262 |     this.fromCropBound = this.cropBound(this.from);
263 |     this.toCropBound = this.cropBound(this.to);
264 |   }
265 | 
266 | });
267 | 
268 | module.exports = SegmentKenBurns;
269 | 


--------------------------------------------------------------------------------
/lib/SegmentSlide2d.js:
--------------------------------------------------------------------------------
 1 | var assign = require("object-assign");
 2 | var SegmentTimeline = require("./SegmentTimeline");
 3 | var forEachSlide2dImage = require("./forEachSlide2dImage");
 4 | 
 5 | function SegmentSlide2d (renderChannel, data) {
 6 |   SegmentTimeline.call(this, renderChannel, data);
 7 |   this.imgs = [];
 8 |   forEachSlide2dImage(data.slide2d.draws, this.imgs.push, this.imgs);
 9 |   this._needRender = false;
10 | }
11 | 
12 | SegmentSlide2d.prototype = assign({}, SegmentTimeline.prototype, {
13 |   toString: function () {
14 |     return "SegmentSlide2d("+this.channel+")";
15 |   },
16 | 
17 |   ready: function (ctx) {
18 |     for (var i=0; i<this.imgs.length; ++i) {
19 |       if (!ctx.media.has({ image: this.imgs[i] })) {
20 |         return false;
21 |       }
22 |     }
23 |     return true;
24 |   },
25 | 
26 |   enter: function (ctx) {
27 |     this._needRender = true;
28 |     this.ctx = ctx.getChannelContext(this.channel);
29 |     return [ "slide", this.data ];
30 |   },
31 | 
32 |   resize: function () {
33 |     this._needRender = true;
34 |   },
35 | 
36 |   leave: function () {
37 |     return [ "slideEnd", this.data ];
38 |   },
39 | 
40 |   render: function () {
41 |     if (this._needRender) {
42 |       this._needRender = false;
43 |       this.ctx.render(this.data.slide2d);
44 |     }
45 |   }
46 | 
47 | });
48 | 
49 | module.exports = SegmentSlide2d;
50 | 


--------------------------------------------------------------------------------
/lib/SegmentTimeline.js:
--------------------------------------------------------------------------------
 1 | 
 2 | var noop = require("./noop");
 3 | 
 4 | function SegmentTimeline (renderChannel, data) {
 5 |   this.channel = renderChannel;
 6 |   this.data = data;
 7 | }
 8 | 
 9 | SegmentTimeline.prototype = {
10 |   toString: function () {
11 |     return "SegmentTimeline("+this.channel+")";
12 |   },
13 |   ready: function(){ return true; },
14 |   enter: noop,
15 |   leave: noop,
16 |   render: noop,
17 |   resize: noop
18 | };
19 | 
20 | module.exports = SegmentTimeline;
21 | 


--------------------------------------------------------------------------------
/lib/TimeInterval.js:
--------------------------------------------------------------------------------
 1 | var mix = require("./mix");
 2 | 
 3 | function TimeInterval (startT, endT) {
 4 |   this.startT = startT;
 5 |   this.endT = endT;
 6 | }
 7 | 
 8 | TimeInterval.prototype = {
 9 |   toString: function () {
10 |     return "TimeInterval("+this.startT+","+this.endT+")";
11 |   },
12 |   clone: function () {
13 |     return new TimeInterval(this.startT, this.endT);
14 |   },
15 |   add: function (scalar) {
16 |     this.startT += scalar;
17 |     this.endT += scalar;
18 |   },
19 |   timeInside: function (t) {
20 |     return this.startT <= t && t < this.endT;
21 |   },
22 |   interpolate: function (t) {
23 |     return mix(this.startT, this.endT, t);
24 |   },
25 |   relative: function (t) {
26 |     return t - this.startT;
27 |   }
28 | };
29 | 
30 | module.exports = TimeInterval;
31 | 


--------------------------------------------------------------------------------
/lib/WebGLDetector.js:
--------------------------------------------------------------------------------
 1 | var webglew = require("webglew");
 2 | 
 3 | function WebGLDetector () {
 4 |   this.canvas = document.createElement("canvas");
 5 |   this.canvas.addEventListener("webglcontextlost", function (e) {
 6 |     e.preventDefault();
 7 |     this.gl = null;
 8 |   }.bind(this), false);
 9 | }
10 | 
11 | WebGLDetector.prototype = {
12 |   supported: function () {
13 |     if (!this.gl) {
14 |       this.gl = this.canvas.getContext("webgl");
15 |     }
16 |     if (!this.gl) return false;
17 |     var ext = webglew(this.gl);
18 |     return ext.OES_texture_float;
19 |   }
20 | };
21 | 
22 | module.exports = WebGLDetector;
23 | 


--------------------------------------------------------------------------------
/lib/findTransitionByName.js:
--------------------------------------------------------------------------------
1 | 
2 | module.exports = function findTransitionByName (name, Transitions) {
3 |   for (var i=0; i<Transitions.length; ++i) {
4 |     if (Transitions[i].name.toLowerCase() === name.toLowerCase()) {
5 |       return Transitions[i];
6 |     }
7 |   }
8 | };
9 | 


--------------------------------------------------------------------------------
/lib/forEachSlide2dImage.js:
--------------------------------------------------------------------------------
 1 | 
 2 | module.exports = function forEachSlide2dImage (draws, cb, ctx) {
 3 |   draws.forEach(function (op) {
 4 |     if (op instanceof Array) {
 5 |       if (typeof op[0] === "object")
 6 |         forEachSlide2dImage(op, cb, ctx);
 7 |       else if (op[0]==="drawImage")
 8 |         cb.call(ctx, op[1]);
 9 |     }
10 |   });
11 | };
12 | 


--------------------------------------------------------------------------------
/lib/globals/localize.js:
--------------------------------------------------------------------------------
 1 | 
 2 | function localizeObject (obj, localizeURL) {
 3 |   switch (typeof obj) {
 4 |   case "string":
 5 |     return localizeURL(obj);
 6 | 
 7 |   case "object":
 8 |     if (obj instanceof Array) {
 9 |       return obj.map(function (item) {
10 |         return localizeObject(item, localizeURL);
11 |       });
12 |     }
13 |     var clone = {};
14 |     for (var k in obj) {
15 |       clone[k] = localizeObject(obj[k], localizeURL);
16 |     }
17 |     return clone;
18 | 
19 |   default:
20 |     return obj;
21 |   }
22 | }
23 | 
24 | function localizeSlide2dDraws (draws, localizeURL) {
25 |   draws.forEach(function (op) {
26 |     if (op instanceof Array) {
27 |       if (typeof op[0] === "object")
28 |         localizeSlide2dDraws(op, localizeURL);
29 |       else if (op[0]==="drawImage") {
30 |         op[1] = localizeURL(op[1]);
31 |       }
32 |     }
33 |   });
34 | }
35 | 
36 | module.exports = function (diaporamaData, localizeURL) {
37 |   if (!diaporamaData) return;
38 |   if (typeof localizeURL === "string") {
39 |     var prefix = localizeURL;
40 |     localizeURL = function (url) {
41 |       return prefix + url;
42 |     };
43 |   }
44 |   if (diaporamaData.resources) {
45 |     diaporamaData.resources = localizeObject(diaporamaData.resources, localizeURL);
46 |   }
47 |   diaporamaData.timeline.forEach(function (item) {
48 |     if (item.image) {
49 |       item.image = localizeObject(item.image, localizeURL);
50 |     }
51 |     if (item.video) {
52 |       item.video = diaporamaData.resources[item.video] || localizeObject(item.video, localizeURL);
53 |     }
54 |     if (item.slide2d) {
55 |       localizeSlide2dDraws(item.slide2d.draws, localizeURL);
56 |     }
57 |   });
58 | };
59 | 


--------------------------------------------------------------------------------
/lib/hashResource.js:
--------------------------------------------------------------------------------
1 | module.exports = function (descr) {
2 |   return JSON.stringify(descr);
3 | };
4 | 


--------------------------------------------------------------------------------
/lib/index.js:
--------------------------------------------------------------------------------
1 | var Diaporama = require("./Diaporama");
2 | Diaporama.localize = require("./globals/localize");
3 | module.exports = Diaporama;
4 | 


--------------------------------------------------------------------------------
/lib/mix.js:
--------------------------------------------------------------------------------
1 | 
2 | module.exports = function mix (min, max, value) {
3 |   return Math.max(0, Math.min(1, (value-min)/(max-min)));
4 | };
5 | 


--------------------------------------------------------------------------------
/lib/noop.js:
--------------------------------------------------------------------------------
1 | module.exports = function(){};
2 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "diaporama",
 3 |   "version": "2.2.0",
 4 |   "description": "Diaporama is an image slideshow engine providing high quality animation effects including Kenburns Effect and GLSL Transitions.",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "testling",
 8 |     "build": "mkdir -p dist; browserify index.js --s Diaporama | derequire | uglifyjs --preamble '/**\n  * diaporama '$(npm view diaporama version)'\n  * Gaëtan Renaudeau <renaudeau.gaetan@gmail.com> – https://github.com/gre/diaporama\n  */' -m -c > dist/build.min.js"
 9 |   },
10 |   "testling": {
11 |     "browsers": [
12 |       "ie/latest",
13 |       "firefox/latest",
14 |       "chrome/latest",
15 |       "safari/latest"
16 |     ],
17 |     "files": "test/*.js"
18 |   },
19 |   "repository": {
20 |     "type": "git",
21 |     "url": "http://github.com/gre/diaporama"
22 |   },
23 |   "author": "",
24 |   "license": "ISC",
25 |   "bugs": {
26 |     "url": "https://github.com/gre/diaporama/issues"
27 |   },
28 |   "homepage": "https://github.com/gre/diaporama",
29 |   "dependencies": {
30 |     "bezier-easing": "^0.4.4",
31 |     "croissant": "^0.2.0",
32 |     "gl-fbo": "^2.0.3",
33 |     "gl-shader": "^4.0.1",
34 |     "gl-texture2d": "^2.0.8",
35 |     "glsl-transition": "^1.0.0",
36 |     "glsl-transition-fade": "^1.0.0",
37 |     "kenburns-dom": "^1.1.1",
38 |     "kenburns-webgl": "^2.0.0",
39 |     "ndarray": "^1.0.16",
40 |     "object-assign": "^2.0.0",
41 |     "raf": "^2.0.4",
42 |     "rect-clamp": "0.0.0",
43 |     "rect-crop": "0.0.0",
44 |     "rect-mix": "0.0.0",
45 |     "slide2d": "^1.1.0",
46 |     "webglew": "^1.0.5"
47 |   },
48 |   "devDependencies": {
49 |     "browserify": "^9.0.3",
50 |     "derequire": "^2.0.0",
51 |     "eslint": "git://github.com/gre/eslint.git",
52 |     "q": "^1.2.0",
53 |     "tape": "^4.0.0",
54 |     "testling": "^1.7.1",
55 |     "uglify-js": "^2.4.17"
56 |   }
57 | }
58 | 


--------------------------------------------------------------------------------
/test/01.js:
--------------------------------------------------------------------------------
 1 | var Q = require("q");
 2 | var test = require("./test");
 3 | 
 4 | test("01: empty diaporama",
 5 | {
 6 |   timeline: []
 7 | },
 8 | {
 9 |   width: 190,
10 |   height: 99,
11 |   resolution: 2,
12 |   paused: false,
13 |   autoplay: true,
14 |   loop: false
15 | },
16 | function (t, api, diaporama) {
17 |   t.equal(diaporama.loop, false);
18 |   t.equal(diaporama.autoplay, true);
19 |   t.equal(diaporama.data.timeline.length, 0);
20 |   t.equal(diaporama.width, 190);
21 |   t.equal(diaporama.height, 99);
22 |   t.equal(diaporama.resolution, 2);
23 |   t.equal(diaporama.currentTime, 0);
24 |   t.equal(diaporama.playbackRate, 1);
25 |   t.equal(diaporama.duration, 0);
26 |   return Q.delay(200).then(function () {
27 |     t.equal(diaporama.duration, 0);
28 |     t.equal(diaporama.currentTime, 0);
29 |     t.equal(diaporama.loop, false);
30 |     t.equal(diaporama.autoplay, true);
31 |     t.equal(diaporama.paused, true, "After some time, the diaporama should pause because loop is disabled.");
32 |   });
33 | });
34 | 


--------------------------------------------------------------------------------
/test/02.js:
--------------------------------------------------------------------------------
 1 | var Q = require("q");
 2 | var test = require("./test");
 3 | var IMAGES = require("./mock").IMAGES;
 4 | 
 5 | test("02: simple diaporama with 2 images, no loop",
 6 | {
 7 | timeline: IMAGES.slice(0, 2).map(function (src) {
 8 |     return {
 9 |       image: src,
10 |       duration: 2000,
11 |       kenburns: {
12 |         from: [0.8, [0.5,0.5]],
13 |         to: [1, [0.5,0.5]],
14 |         easing: [ 0, 0.1, 0.9, 1 ]
15 |       },
16 |       transitionNext: {
17 |         duration: 1000
18 |       }
19 |     };
20 |   })
21 | },
22 | {
23 |   width: 200,
24 |   height: 150,
25 |   autoplay: true,
26 |   loop: false
27 | },
28 | function (t, api, diaporama) {
29 |   t.equal(diaporama.duration, 5000);
30 |   return api.wait("canplaythrough")
31 |   .then(function () {
32 |     return Q.all([
33 |       Q.delay(1000).then(function () {
34 |         t.ok(Math.abs(diaporama.currentTime - 1000) < 200, "at 1s: should be around currentTime=1000");
35 |         t.equal(diaporama.paused, false);
36 |       }),
37 |       Q.delay(4500).then(function() {
38 |         t.ok(Math.abs(diaporama.currentTime - 4500) < 200, "at 4.5s: should be around currentTime=4500");
39 |         t.equal(diaporama.paused, false, "at 4.5s: still running");
40 |       }),
41 |       Q.delay(5500).then(function () {
42 |         t.ok(diaporama.currentTime, 5000);
43 |         t.equal(diaporama.paused, true, "at 5.5s: should have stopped");
44 |       })
45 |     ]);
46 |   });
47 | });
48 | 


--------------------------------------------------------------------------------
/test/03.js:
--------------------------------------------------------------------------------
 1 | var test = require("./test");
 2 | var IMAGES = require("./mock").IMAGES;
 3 | 
 4 | test("03: diaporama, 5 images, loop",
 5 | {
 6 | timeline:
 7 |   IMAGES.map(function (src, i) {
 8 |     if (i % 2 === 0)
 9 |       return {
10 |         image: src,
11 |         duration: 100,
12 |         transitionNext: { duration: 100 }
13 |       };
14 |     else
15 |       return {
16 |         image: src,
17 |         duration: 100
18 |       };
19 |   })
20 | },
21 | {
22 |   width: 600,
23 |   height: 50,
24 |   autoplay: false,
25 |   loop: true
26 | },
27 | function (t, api, diaporama) {
28 |   var evts = api.recordEvents();
29 |   var countGreater = api.countGreater;
30 |   return api.wait("load")
31 |   .then(function () {
32 |     evts.expect({
33 |       canplay: 1,
34 |       canplaythrough: 1,
35 |       load: 1
36 |     }, "load event");
37 |   })
38 |   .delay(200)
39 |   .then(function () {
40 |     t.equal(diaporama.paused, true, "diaporama has not auto started");
41 |     diaporama.play();
42 |     diaporama.pause();
43 |   })
44 |   .delay(100)
45 |   .then(function () {
46 |     t.equal(diaporama.paused, true, "diaporama has not auto started");
47 |     diaporama.play();
48 |   })
49 |   .delay(4000)
50 |   .then(function () {
51 |     t.equal(diaporama.paused, false, "diaporama is still running.");
52 |     diaporama.destroy();
53 |     diaporama.destroy();
54 |     diaporama.destroy();
55 |   })
56 |   .then(function () {
57 |     var minimalSlideCount = 16;
58 |     evts.expect({
59 |       canplay: 1,
60 |       canplaythrough: 1,
61 |       load: 1,
62 |       error: 0,
63 |       progress: countGreater(0),
64 |       render: countGreater(40),
65 |       destroy: 1,
66 |       resize: api.countLower(2),
67 |       play: 1,
68 |       pause: 1,
69 |       ended: 0,
70 |       transition: countGreater(minimalSlideCount/2),
71 |       transitionEnd: countGreater(minimalSlideCount/2),
72 |       slide: countGreater(minimalSlideCount),
73 |       slideEnd: countGreater(minimalSlideCount)
74 |     }, "final");
75 |   });
76 | });
77 | 


--------------------------------------------------------------------------------
/test/04.js:
--------------------------------------------------------------------------------
 1 | var test = require("./test");
 2 | var IMAGES = require("./mock").IMAGES;
 3 | 
 4 | test("04: diaporama loop",
 5 | {
 6 |   timeline:
 7 |     IMAGES.slice(0, 2).map(function(src){
 8 |       return {
 9 |         image: src,
10 |         duration: 500
11 |       };
12 |     })
13 | },
14 | {
15 |   width: 190,
16 |   height: 99,
17 |   autoplay: false,
18 |   loop: false
19 | },
20 | function (t, api, diaporama) {
21 |   var evts = api.recordEvents();
22 |   return api.wait("load")
23 |   .then(function () {
24 |     evts.expect({
25 |       play: 0
26 |     }, "no played yet");
27 |     diaporama.play();
28 |   })
29 |   .delay(500)
30 |   .then(function(){
31 |     t.equal(diaporama.paused, false, "Diaporama is running");
32 |   })
33 |   .delay(500)
34 |   .delay(100) // security
35 |   .then(function(){
36 |     t.equal(diaporama.paused, true, "Diaporama has ended");
37 |     evts.expect({
38 |       ended: 1
39 |     }, "ended event");
40 |     diaporama.currentTime = 0;
41 |     diaporama.loop = true;
42 |     diaporama.play();
43 |   })
44 |   .then(function() {
45 |     t.equal(diaporama.paused, false, "Diaporama is running again");
46 |   })
47 |   .delay(2500)
48 |   .then(function() {
49 |     t.equal(diaporama.paused, false, "Diaporama is still running");
50 |   });
51 | });
52 | 


--------------------------------------------------------------------------------
/test/05.js:
--------------------------------------------------------------------------------
 1 | var test = require("./test");
 2 | var IMAGES = require("./mock").IMAGES;
 3 | 
 4 | test("05: diaporama resize",
 5 | {
 6 |   timeline:
 7 |     IMAGES.slice(0, 2).map(function(src){
 8 |       return {
 9 |         image: src,
10 |         duration: 500
11 |       };
12 |     })
13 | },
14 | {
15 |   width: 190,
16 |   height: 99,
17 |   autoplay: false,
18 |   loop: false
19 | },
20 | function (t, api, diaporama) {
21 |   var evts = api.recordEvents();
22 |   var resizes = 0;
23 |   return api.wait("load")
24 |   .then(function() {
25 |     resizes = evts.get().resize;
26 |     diaporama.width = 399;
27 |     diaporama.height = 399;
28 |     diaporama.width = 400;
29 |     diaporama.height = 400;
30 |     t.equal(diaporama.width, 400, "width is set");
31 |     t.equal(diaporama.height, 400, "height is set");
32 |     diaporama.width = 401;
33 |     diaporama.height = 401;
34 |     diaporama.height = 400;
35 |     diaporama.height = 400;
36 |     diaporama.width = 400;
37 |   })
38 |   .delay(100)
39 |    .then(function () {
40 |      var before = resizes;
41 |      resizes = evts.get().resize;
42 |      t.equal(resizes - before, 1, "only one resize event happened");
43 |      diaporama.width = diaporama.width;
44 |      diaporama.height = diaporama.height;
45 |    })
46 |    .delay(100)
47 |   .then(function () {
48 |     var before = resizes;
49 |     resizes = evts.get().resize;
50 |     t.equal(resizes - before, 0, "no resize event happened");
51 |   });
52 | });
53 | 


--------------------------------------------------------------------------------
/test/06.js:
--------------------------------------------------------------------------------
 1 | var test = require("./test");
 2 | var IMAGES = require("./mock").IMAGES;
 3 | 
 4 | test("06: check slide2d, fade, kenburns",
 5 | {
 6 |   timeline: [
 7 |     {
 8 |       duration: 1000,
 9 |       slide2d: {
10 |         background: "#F00",
11 |         size: [1000, 500],
12 |         draws: [
13 |           { fillStyle: "#0FF" },
14 |           [ "beginPath" ],
15 |           [ "moveTo", 0, 0 ],
16 |           [ "lineTo", 1000, 500 ],
17 |           [ "lineTo", 0, 500 ],
18 |           [ "fill" ]
19 |         ]
20 |       },
21 |       transitionNext: {
22 |         duration: 1000
23 |       }
24 |     },
25 |     {
26 |       duration: 1000,
27 |       image: IMAGES[0],
28 |       transitionNext: {
29 |         duration: 1000
30 |       },
31 |       kenburns: {
32 |         from: [ 0.1, [0, 0] ],
33 |         to: [ 1, [0.5, 0.5] ]
34 |       }
35 |     }
36 |   ]
37 | },
38 | {
39 |   width: 256,
40 |   height: 256,
41 |   resolution: 1,
42 |   autoplay: false,
43 |   renderingMode: "canvas"
44 | },
45 | function (t, api) {
46 |   return api.wait("load")
47 |   .then(api.renderAt.bind(null, 0))
48 |   .then(function(){
49 |     api.assertPixel(2, 50, [255, 0, 0, 255 ]);
50 |     api.assertPixel(2, 70, [0, 255, 255, 255 ]);
51 |   })
52 |   .then(api.renderAt.bind(null, 1500))
53 |   .then(function () {
54 |     api.assertPixel(2, 50, [ 238, 98, 79, 255 ]);
55 |     api.assertPixel(2, 70, [ 105, 230, 213, 255 ]);
56 |   })
57 |   .then(api.renderAt.bind(null, 2500))
58 |   .then(function () {
59 |     api.assertPixel(2, 50, [ 59, 49, 56, 255 ]);
60 |     api.assertPixel(2, 70, [ 49, 42, 47, 255 ]);
61 |   });
62 | });
63 | 


--------------------------------------------------------------------------------
/test/07.js:
--------------------------------------------------------------------------------
 1 | var test = require("./test");
 2 | var IMAGES = require("./mock").IMAGES;
 3 | 
 4 | test("07: DOM rendering fallback",
 5 | {
 6 |   timeline: [
 7 |     {
 8 |       duration: 1000,
 9 |       slide2d: {
10 |         background: "#F00",
11 |         size: [1000, 500],
12 |         draws: [
13 |           { fillStyle: "#0FF" },
14 |           [ "beginPath" ],
15 |           [ "moveTo", 0, 0 ],
16 |           [ "lineTo", 500, 250 ],
17 |           [ "lineTo", 0, 500 ],
18 |           [ "fill" ]
19 |         ]
20 |       },
21 |       transitionNext: {
22 |         duration: 1000
23 |       }
24 |     },
25 |     {
26 |       duration: 1000,
27 |       image: IMAGES[0],
28 |       transitionNext: {
29 |         duration: 1000
30 |       }
31 |     }
32 |   ]
33 | }, {
34 |   width: 200,
35 |   height: 100,
36 |   resolution: 2,
37 |   paused: true,
38 |   autoplay: false,
39 |   loop: false,
40 |   renderingMode: "dom"
41 | },
42 | function (t, api, diaporama) {
43 |   function nodeName (el) {
44 |     return el.nodeName;
45 |   }
46 |   function currentlyHaveNodes (required, forbidden) {
47 |     var nodes = api.centerElements().map(nodeName);
48 |     try {
49 |       (required||[]).forEach(function (n) {
50 |         if (nodes.indexOf(n) === -1)
51 |           throw new Error(n+" must be visible. nodes="+nodes);
52 |       });
53 |       (forbidden||[]).forEach(function (n) {
54 |         if (nodes.indexOf(n) !== -1)
55 |           throw new Error(n+" must not be visible. nodes="+nodes);
56 |       });
57 |     } catch (e) {
58 |       return e;
59 |     }
60 |   }
61 | 
62 |   return api.wait("load")
63 |   .then(diaporama.play.bind(diaporama))
64 |   .delay(500)
65 |   .then(function () {
66 |     api.assertTime(500);
67 |     t.error(currentlyHaveNodes(["CANVAS"], ["IMG"]), "canvas");
68 |   })
69 |   .delay(1000)
70 |   .then(function () {
71 |     api.assertTime(1500);
72 |     t.error(currentlyHaveNodes(["CANVAS", "IMG"]), "transition");
73 |   })
74 |   .delay(1000)
75 |   .then(function () {
76 |     api.assertTime(2500);
77 |     t.error(currentlyHaveNodes(["IMG"], ["CANVAS"]), "image");
78 |   });
79 | });
80 | 


--------------------------------------------------------------------------------
/test/08.js:
--------------------------------------------------------------------------------
 1 | var test = require("./test");
 2 | var IMAGES = require("./mock").IMAGES;
 3 | 
 4 | test("08: supports data update",
 5 | {
 6 |   timeline: []
 7 | },
 8 | {
 9 |   width: 200,
10 |   height: 200,
11 |   loop: true
12 | },
13 | function (t, api, diaporama) {
14 | 
15 |   t.equal(diaporama.duration, 0);
16 |   t.equal(diaporama.data.timeline.length, 0);
17 |   diaporama.data = {
18 |     timeline: [
19 |       {
20 |         image: IMAGES[0],
21 |         duration: 1337
22 |       }
23 |     ]
24 |   };
25 |   t.equal(diaporama.duration, 1337);
26 |   t.equal(diaporama.data.timeline.length, 1);
27 | 
28 |   return api.wait("load").then(function () {
29 |     diaporama.data = {
30 |       timeline: [
31 |         {
32 |           image: IMAGES[0],
33 |           duration: 1337,
34 |           transitionNext: {
35 |             duration: 1000
36 |           }
37 |         }
38 |       ]
39 |     };
40 |     t.equal(diaporama.duration, 2337);
41 |     t.equal(diaporama.data.timeline.length, 1);
42 |     diaporama.loop = false;
43 |     t.equal(diaporama.loop, false);
44 |     t.equal(diaporama.duration, 1337);
45 |     t.equal(diaporama.data.timeline.length, 1);
46 |     return api.wait("load");
47 |   })
48 |   .then(function() {
49 |     diaporama.data = {
50 |       timeline: [
51 |         {
52 |           image: IMAGES[0],
53 |           duration: 1337,
54 |           transitionNext: {
55 |             duration: 1000
56 |           },
57 |           kenburns: {
58 |             from: [ 0.1, [0, 0] ],
59 |             to: [ 1, [0.5, 0.5] ]
60 |           }
61 |         },
62 |         {
63 |           duration: 2000,
64 |           slide2d: {
65 |             background: "white",
66 |             size: [ 100, 100 ],
67 |             draws: []
68 |           }
69 |         }
70 |       ]
71 |     };
72 |     t.equal(diaporama.duration, 4337);
73 |     t.equal(diaporama.data.timeline.length, 2);
74 |   });
75 | });
76 | 


--------------------------------------------------------------------------------
/test/09.js:
--------------------------------------------------------------------------------
 1 | var test = require("./test");
 2 | var IMAGES = require("./mock").IMAGES;
 3 | 
 4 | test("09: prev(), next(), jump(slideIndex)",
 5 | {
 6 |   timeline: [
 7 |     {
 8 |       image: IMAGES[0],
 9 |       duration: 100,
10 |       transitionNext: {
11 |         duration: 200
12 |       },
13 |       kenburns: {
14 |         from: [ 0.1, [0, 0] ],
15 |         to: [ 1, [0.5, 0.5] ]
16 |       }
17 |     },
18 |     {
19 |       duration: 300,
20 |       slide2d: {
21 |         background: "white",
22 |         size: [ 100, 100 ],
23 |         draws: []
24 |       }
25 |     },
26 |     {
27 |       image: IMAGES[0],
28 |       duration: 400,
29 |       transitionNext: {
30 |         duration: 500
31 |       },
32 |       kenburns: {
33 |         from: [ 0.1, [0, 0] ],
34 |         to: [ 1, [0.5, 0.5] ]
35 |       }
36 |     }
37 |   ]
38 | },
39 | {
40 |   width: 200,
41 |   height: 200,
42 |   loop: true,
43 |   autostart: false
44 | },
45 | function (t, api, diaporama) {
46 |   return api.wait("load")
47 |   .then(function() {
48 |     api.assertTime(0);
49 |     diaporama.next();
50 |     api.assertTime(300);
51 |     diaporama.next();
52 |     api.assertTime(600);
53 |     diaporama.next();
54 |     api.assertTime(0);
55 |     diaporama.prev();
56 |     api.assertTime(600);
57 |     diaporama.prev();
58 |     api.assertTime(300);
59 |     diaporama.jump(0);
60 |     api.assertTime(0);
61 |     diaporama.jump(2);
62 |     api.assertTime(600);
63 |     diaporama.loop = false;
64 |     api.assertTime(600);
65 |     diaporama.next();
66 |     api.assertTime(600);
67 |     diaporama.prev();
68 |     api.assertTime(300);
69 |     diaporama.prev();
70 |     api.assertTime(0);
71 |     diaporama.prev();
72 |     api.assertTime(0);
73 |   });
74 | });
75 | 


--------------------------------------------------------------------------------
/test/10.js:
--------------------------------------------------------------------------------
  1 | var test = require("./test");
  2 | var IMAGES = require("./mock").IMAGES;
  3 | 
  4 | test("10: prev(duration), next(duration)",
  5 | {
  6 |   timeline: [
  7 |     {
  8 |       image: IMAGES[0],
  9 |       duration: 100,
 10 |       transitionNext: {
 11 |         duration: 200
 12 |       },
 13 |       kenburns: {
 14 |         from: [ 0.1, [0, 0] ],
 15 |         to: [ 1, [0.5, 0.5] ]
 16 |       }
 17 |     },
 18 |     {
 19 |       image: IMAGES[0],
 20 |       duration: 100,
 21 |       transitionNext: {
 22 |         duration: 200
 23 |       },
 24 |       kenburns: {
 25 |         from: [ 0.1, [0, 0] ],
 26 |         to: [ 1, [0.5, 0.5] ]
 27 |       }
 28 |     },
 29 |     {
 30 |       image: IMAGES[0],
 31 |       duration: 100,
 32 |       transitionNext: {
 33 |         duration: 200
 34 |       },
 35 |       kenburns: {
 36 |         from: [ 0.1, [0, 0] ],
 37 |         to: [ 1, [0.5, 0.5] ]
 38 |       }
 39 |     },
 40 |     {
 41 |       image: IMAGES[0],
 42 |       duration: 100,
 43 |       transitionNext: {
 44 |         duration: 200
 45 |       },
 46 |       kenburns: {
 47 |         from: [ 0.1, [0, 0] ],
 48 |         to: [ 1, [0.5, 0.5] ]
 49 |       }
 50 |     },
 51 |     {
 52 |       duration: 300,
 53 |       transitionNext: {
 54 |         duration: 200
 55 |       },
 56 |       slide2d: {
 57 |         background: "white",
 58 |         size: [ 100, 100 ],
 59 |         draws: []
 60 |       }
 61 |     }
 62 |   ]
 63 | },
 64 | {
 65 |   width: 200,
 66 |   height: 200,
 67 |   loop: true,
 68 |   autostart: false
 69 | },
 70 | function (t, api, diaporama) {
 71 |   return api.wait("load")
 72 |   .then(function () {
 73 |     diaporama.play();
 74 |     api.assertTime(0);
 75 |     diaporama.next(300);
 76 |     api.assertTime(0);
 77 |     setTimeout(function () {
 78 |       api.assertTime(150);
 79 |     }, 150);
 80 |   })
 81 |   .delay(300)
 82 |   .then(function () {
 83 |     api.assertTime(300);
 84 |     diaporama.currentTime = 0;
 85 |   })
 86 |   .then(function () {
 87 |     api.assertTime(0);
 88 |     diaporama.next(300);
 89 |     diaporama.next(300);
 90 |     diaporama.next(300);
 91 |     diaporama.next(300);
 92 |   })
 93 |   .delay(300)
 94 |   .then(function () {
 95 |     api.assertTime(1200);
 96 |     diaporama.currentTime = 0;
 97 |   })
 98 |   .then(function () {
 99 |     api.assertTime(0);
100 |     diaporama.next(300);
101 |   })
102 |   .delay(10)
103 |   .then(function () {
104 |     diaporama.next(300);
105 |   })
106 |   .delay(10)
107 |   .then(function () {
108 |     diaporama.next(300);
109 |   })
110 |   .delay(10)
111 |   .then(function () {
112 |     diaporama.next(300);
113 |   })
114 |   .delay(300)
115 |   .then(function () {
116 |     api.assertTime(1200);
117 |     diaporama.currentTime = 1200;
118 |   })
119 |   .delay(10)
120 |   .then(function () {
121 |     api.assertTime(1200);
122 |     diaporama.next(300);
123 |   })
124 |   .delay(10)
125 |   .then(function () {
126 |     diaporama.next(300);
127 |   })
128 |   .delay(300)
129 |   .then(function () {
130 |     t.equal(diaporama.paused, false, "the diaporama is not paused");
131 |     console.log(diaporama.currentTime);
132 |   });
133 | });
134 | 


--------------------------------------------------------------------------------
/test/mock.js:
--------------------------------------------------------------------------------
1 | exports.IMAGES = [
2 |   "http://i.imgur.com/MQtLWbD.jpg",
3 |   "http://i.imgur.com/N8a9CkZ.jpg",
4 |   "http://i.imgur.com/adCmISK.jpg",
5 |   "http://i.imgur.com/MyyS4vK.jpg",
6 |   "http://i.imgur.com/fhNYTX4.jpg"
7 | ];
8 | 


--------------------------------------------------------------------------------
/test/test.js:
--------------------------------------------------------------------------------
  1 | var test = require("tape");
  2 | var Diaporama = require("..");
  3 | var Q = require("q");
  4 | 
  5 | var current;
  6 | function destroy () {
  7 |   if (current) {
  8 |     document.body.removeChild(current.div);
  9 |     current.diaporama.destroy();
 10 |     current = null;
 11 |   }
 12 | }
 13 | function create (data, options) {
 14 |   destroy();
 15 |   var div = document.createElement("div");
 16 |   div.style.position = "fixed";
 17 |   div.style.top = 0;
 18 |   div.style.left = 0;
 19 |   document.body.appendChild(div);
 20 |   var diaporama = Diaporama(div, data, options);
 21 |   current = { div: div, diaporama: diaporama };
 22 |   return diaporama;
 23 | }
 24 | 
 25 | function countValue (expected) {
 26 |   return function (value, t, key, msg) {
 27 |     t.equal(value, expected, (msg ? msg+": " : "")+key+" should be exactly "+expected);
 28 |   };
 29 | }
 30 | function countGreater (bound) {
 31 |   return function (value, t, key) {
 32 |     t.ok(value > bound, key+": "+value+" should be greater than "+bound);
 33 |   };
 34 | }
 35 | function countLower (bound) {
 36 |   return function (value, t, key) {
 37 |     t.ok(value < bound, key+": "+value+" should be lower than "+bound);
 38 |   };
 39 | }
 40 | function recordEvents (t) {
 41 |   var diaporama = current.diaporama;
 42 |   var events = {
 43 |     canplay: 0,
 44 |     canplaythrough: 0,
 45 |     load: 0,
 46 |     progress: 0,
 47 |     render: 0,
 48 |     destroy: 0,
 49 |     error: 0,
 50 |     resize: 0,
 51 |     play: 0,
 52 |     pause: 0,
 53 |     ended: 0,
 54 |     transition: 0,
 55 |     transitionEnd: 0,
 56 |     slide: 0,
 57 |     slideEnd: 0
 58 |   };
 59 |   var eventsKeys = Object.keys(events);
 60 |   eventsKeys.forEach(function (k) {
 61 |     diaporama.on(k, function () {
 62 |       events[k] ++;
 63 |     });
 64 |   });
 65 |   function copy (keys) {
 66 |     var snap = {};
 67 |     (keys||Object.keys(events)).forEach(function (k) {
 68 |       snap[k] = events[k];
 69 |     });
 70 |     return snap;
 71 |   }
 72 | 
 73 |   return {
 74 |     get: copy,
 75 |     expect: function (expected, msg) {
 76 |       var keys = Object.keys(expected);
 77 |       var snap = copy(keys);
 78 |       console.log("# "+msg);
 79 |       keys.forEach(function (k) {
 80 |         var e = expected[k];
 81 |         if (typeof e === "number")
 82 |           e = countValue(e);
 83 |         e(snap[k], t, k);
 84 |       });
 85 |     }
 86 |   };
 87 | }
 88 | 
 89 | function allElementsFromPoint (x, y, stop) {
 90 |   var res = [];
 91 |   var displays = [];
 92 |   var ele = document.elementFromPoint(x,y);
 93 |   while(ele && ele !== stop && ele.tagName !== "BODY" && ele.tagName !== "HTML"){
 94 |     res.push(ele);
 95 |     displays.push(ele.style.display);
 96 |     ele.style.display = "none";
 97 |     ele = document.elementFromPoint(x,y);
 98 |   }
 99 |   for(var i = 0; i < res.length; i++){
100 |     res[i].style.display = displays[i];
101 |   }
102 |   return res;
103 | }
104 | function centerElements () {
105 |   var div = current.div;
106 |   var rect = div.getBoundingClientRect();
107 |   return allElementsFromPoint(
108 |     rect.left + rect.width / 2,
109 |     rect.top + rect.height / 2,
110 |     div);
111 | }
112 | function assertTime (t, time) {
113 |   var diaporama = current.diaporama;
114 |   t.ok(Math.abs(diaporama.currentTime - time) < 200 , "time should be around "+time+". currentTime="+diaporama.currentTime);
115 | }
116 | 
117 | function wait (event) {
118 |   var d = Q.defer();
119 |   current.diaporama.once(event, d.resolve);
120 |   current.diaporama.once("error", d.reject);
121 |   return d.promise;
122 | }
123 | 
124 | function renderAt (t) {
125 |   current.diaporama.currentTime = t;
126 |   current.diaporama.renderNow(); // lazy version for now ...
127 |   return Q.resolve(t);
128 |   /*
129 |   if (current.diaporama.currentTime === t) {
130 |     return Q.resolve(t);
131 |   }
132 |   var promise = wait("render");
133 |   current.diaporama.currentTime = t;
134 |   return promise;
135 |   */
136 | }
137 | 
138 | function capturePixel (x, y) {
139 |   var gl = current.diaporama._rendering.gl;
140 |   var pixel = new Uint8Array(4);
141 |   gl.readPixels(x, y, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, pixel);
142 |   return pixel;
143 | }
144 | 
145 | function colorDiff (a, b) {
146 |   var diff = 0;
147 |   for (var i=0; i<4; ++i) {
148 |     diff += Math.pow(a[i]-b[i], 2);
149 |   }
150 |   return Math.sqrt(diff);
151 | }
152 | 
153 | function colorMatches (a, b) {
154 |   return colorDiff(a, b) < 8;
155 | }
156 | 
157 | function assertPixel (t, x, y, expected, msg) {
158 |   var pixel = capturePixel(x, y);
159 |   t.ok(colorMatches(pixel, expected), (!msg ? "" : msg+": ")+"pixel at "+[x,y]+" should be "+expected);
160 | }
161 | 
162 | function assertProps (t, expected, msg) {
163 |   var diaporama = current.diaporama;
164 |   var keys = Object.keys(expected);
165 |   var values = keys.map(function (k) {
166 |     return diaporama[k];
167 |   });
168 |   console.log("# "+msg);
169 |   keys.map(function (k, i) {
170 |     t.equal(values[i], expected[k], "diaporama."+k+" must be "+expected[k]);
171 |   });
172 | }
173 | 
174 | module.exports = function (description, data, options, f) {
175 |   if (arguments.length !== 4) throw new Error("usage: description data options f");
176 |   test(description, function (t) {
177 |     var diaporama = create(data, options);
178 |     var api = {
179 |       countGreater: countGreater,
180 |       countLower: countLower,
181 |       countValue: countValue,
182 |       capturePixel: capturePixel,
183 |       assertPixel: assertPixel.bind(null, t),
184 |       renderAt: renderAt,
185 |       wait: wait,
186 |       recordEvents: recordEvents.bind(null, t),
187 |       centerElements: centerElements,
188 |       assertTime: assertTime.bind(null, t),
189 |       assertProps: assertProps.bind(null, t)
190 |     };
191 |     Q.fcall(f, t, api, diaporama).then(function () {
192 |       destroy();
193 |     }).done(t.end);
194 |   });
195 | };
196 | 


--------------------------------------------------------------------------------