47 |
139 |
140 |
141 |
142 |
182 |
192 |
193 |
194 |
--------------------------------------------------------------------------------
/demos/audio-angular.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
48 |
49 |
53 |
54 | 55 |
68 |
70 |
72 |
73 |
74 |
76 |
78 |
80 |
81 |
82 |
84 |
87 |
89 |
91 |
92 |
93 |
95 |
104 |
107 |
118 |
119 |
120 |
121 |
122 |
123 |
124 |
125 |
126 |
127 |
128 |
129 |
130 | 131 | 137 |
138 | <x-gif>
50 |The GIF tag the internet deserves
51 |View source on GitHub
52 |54 | 55 |
-
56 |
- Examples: 57 |
- {{ $index + 1 }} 58 | 59 |
Normal playback
66 |Something not look right? Post an issue on GitHub with the URL of the image
67 |<x-gif src="{{ trustedUrl() }}"></x-gif>
71 | Ping-pong
75 |<x-gif src="{{ trustedUrl() }}" ping-pong></x-gif>
79 | Speed
83 |<x-gif src="{{ trustedUrl() }}" speed="{{ gif.speed }}"></x-gif>
90 | Synced to Audio
94 |Loading beat data...
105 | <x-gif src="{{ trustedUrl() }}" synced></x-gif>
108 |
109 | Audio: Encom Part II by Daft Punk. CC0 1.0 Universal.
110 |
111 | Source:
112 | Archive.org
113 |
114 | Beat metadata provided by Echo Nest
115 |
See a full screen demo
117 |130 | 131 | 137 |
IMG
13 |
14 | X-GIF
16 | 17 | 18 | -------------------------------------------------------------------------------- /demos/bpm.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |20 |
15 |
18 |
21 |
24 |
14 | Click a gif to stop or start it
19 |Any of these dun broken?
21 |
63 |
186 |
187 |
240 |
257 |
258 |
259 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "x-gif",
3 | "version": "0.0.0",
4 | "description": "The GIF element the internet deserves",
5 | "main": "dist/x-gif.html",
6 | "readme": "README.md",
7 | "scripts": {
8 | "test": "echo \"Error: no test specified\" && exit 1"
9 | },
10 | "repository": {
11 | "type": "git",
12 | "url": "git://github.com/geelen/x-gif.git"
13 | },
14 | "author": "Glen Maddern",
15 | "license": "MIT",
16 | "bugs": {
17 | "url": "https://github.com/geelen/x-gif/issues"
18 | },
19 | "devDependencies": {
20 | "gulp": "~3.6.0",
21 | "gulp-sass": "~0.7.1",
22 | "gulp-concat": "~2.2.0",
23 | "gulp-autoprefixer": "0.0.6",
24 | "gulp-load-plugins": "~0.5.0",
25 | "gulp-plumber": "~0.5.6",
26 | "gulp-browserify": "~0.5.0",
27 | "gulp-ruby-sass": "~0.4.1",
28 | "gulp-connect": "~2.0.4",
29 | "es6ify": "~1.2.0",
30 | "gulp-uglify": "~0.3.1",
31 | "gulp-rename": "~1.2.0",
32 | "gulp-vulcanize": "~0.2.1"
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/src/exploder.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | import Gif from './gif.js';
4 | import StreamReader from './stream_reader.js';
5 | import { Promises } from './utils.js';
6 |
7 | var url = (URL && URL.createObjectURL) ? URL : webkitURL;
8 |
9 | var gifCache = new Map();
10 | export default class Exploder {
11 | constructor(file) {
12 | this.file = file;
13 | }
14 |
15 | load() {
16 | var cachedGifPromise = gifCache.get(this.file)
17 | if (cachedGifPromise) return cachedGifPromise;
18 |
19 | var gifPromise = Promises.xhrGet(this.file, '*/*', 'arraybuffer')
20 | .then(buffer => this.explode(buffer));
21 |
22 | gifCache.set(this.file, gifPromise);
23 | return gifPromise;
24 | }
25 |
26 | explode(buffer) {
27 | console.debug("EXPLODING " + this.file)
28 | return new Promise((resolve, reject) => {
29 | var frames = [],
30 | streamReader = new StreamReader(buffer);
31 |
32 | // Ensure this is an animated GIF
33 | if (streamReader.readAscii(6) != "GIF89a") {
34 | reject(Error("Not a GIF!"));
35 | return;
36 | }
37 |
38 | streamReader.skipBytes(4); // Height & Width
39 | if (streamReader.peekBit(1)) {
40 | streamReader.log("GLOBAL COLOR TABLE")
41 | var colorTableSize = streamReader.readByte() & 0x07;
42 | streamReader.log("GLOBAL COLOR TABLE IS " + 3 * Math.pow(2, colorTableSize + 1) + " BYTES")
43 | streamReader.skipBytes(2);
44 | streamReader.skipBytes(3 * Math.pow(2, colorTableSize + 1));
45 | } else {
46 | streamReader.log("NO GLOBAL COLOR TABLE")
47 | }
48 | // WE HAVE ENOUGH FOR THE GIF HEADER!
49 | var gifHeader = buffer.slice(0, streamReader.index);
50 |
51 | var spinning = true, expectingImage = false;
52 | while (spinning) {
53 |
54 | if (streamReader.isNext([0x21, 0xFF])) {
55 | streamReader.log("APPLICATION EXTENSION")
56 | streamReader.skipBytes(2);
57 | var blockSize = streamReader.readByte();
58 | streamReader.log(streamReader.readAscii(blockSize));
59 |
60 | if (streamReader.isNext([0x03, 0x01])) {
61 | // we cool
62 | streamReader.skipBytes(5)
63 | } else {
64 | streamReader.log("A weird application extension. Skip until we have 2 NULL bytes");
65 | while (!(streamReader.readByte() === 0 && streamReader.peekByte() === 0));
66 | streamReader.log("OK moving on")
67 | streamReader.skipBytes(1);
68 | }
69 | } else if (streamReader.isNext([0x21, 0xFE])) {
70 | streamReader.log("COMMENT EXTENSION")
71 | streamReader.skipBytes(2);
72 |
73 | while (!streamReader.isNext([0x00])) {
74 | var blockSize = streamReader.readByte();
75 | streamReader.log(streamReader.readAscii(blockSize));
76 | }
77 | streamReader.skipBytes(1); //NULL terminator
78 |
79 | } else if (streamReader.isNext([0x2c])) {
80 | streamReader.log("IMAGE DESCRIPTOR!");
81 | if (!expectingImage) {
82 | // This is a bare image, not prefaced with a Graphics Control Extension
83 | // so we should treat it as a frame.
84 | frames.push({ index: streamReader.index, delay: 0 });
85 | }
86 | expectingImage = false;
87 |
88 | streamReader.skipBytes(9);
89 | if (streamReader.peekBit(1)) {
90 | streamReader.log("LOCAL COLOR TABLE");
91 | var colorTableSize = streamReader.readByte() & 0x07;
92 | streamReader.log("LOCAL COLOR TABLE IS " + 3 * Math.pow(2, colorTableSize + 1) + " BYTES")
93 | streamReader.skipBytes(3 * Math.pow(2, colorTableSize + 1));
94 | } else {
95 | streamReader.log("NO LOCAL TABLE PHEW");
96 | streamReader.skipBytes(1);
97 | }
98 |
99 | streamReader.log("MIN CODE SIZE " + streamReader.readByte());
100 | streamReader.log("DATA START");
101 |
102 | while (!streamReader.isNext([0x00])) {
103 | var blockSize = streamReader.readByte();
104 | // streamReader.log("SKIPPING " + blockSize + " BYTES");
105 | streamReader.skipBytes(blockSize);
106 | }
107 | streamReader.log("DATA END");
108 | streamReader.skipBytes(1); //NULL terminator
109 | } else if (streamReader.isNext([0x21, 0xF9, 0x04])) {
110 | streamReader.log("GRAPHICS CONTROL EXTENSION!");
111 | // We _definitely_ have a frame. Now we're expecting an image
112 | var index = streamReader.index;
113 |
114 | streamReader.skipBytes(3);
115 | var disposalMethod = streamReader.readByte() >> 2;
116 | streamReader.log("DISPOSAL " + disposalMethod);
117 | var delay = streamReader.readByte() + streamReader.readByte() * 256;
118 | frames.push({ index: index, delay: delay, disposal: disposalMethod });
119 | streamReader.log("FRAME DELAY " + delay);
120 | streamReader.skipBytes(2);
121 | expectingImage = true;
122 | } else {
123 | var maybeTheEnd = streamReader.index;
124 | while (!streamReader.finished() && !streamReader.isNext([0x21, 0xF9, 0x04])) {
125 | streamReader.readByte();
126 | }
127 | if (streamReader.finished()) {
128 | streamReader.index = maybeTheEnd;
129 | streamReader.log("WE END");
130 | spinning = false;
131 | } else {
132 | streamReader.log("UNKNOWN DATA FROM " + maybeTheEnd);
133 | }
134 | }
135 | }
136 | var endOfFrames = streamReader.index;
137 |
138 | var gifFooter = buffer.slice(-1); //last bit is all we need
139 | for (var i = 0; i < frames.length; i++) {
140 | var frame = frames[i];
141 | var nextIndex = (i < frames.length - 1) ? frames[i + 1].index : endOfFrames;
142 | frame.blob = new Blob([ gifHeader, buffer.slice(frame.index, nextIndex), gifFooter ], {type: 'image/gif'});
143 | frame.url = url.createObjectURL(frame.blob);
144 | }
145 |
146 | resolve(new Gif(frames));
147 | })
148 | }
149 | }
150 |
--------------------------------------------------------------------------------
/src/gif.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | var defaultFrameDelay = 10;
4 |
5 | export default class Gif {
6 | constructor(frames) {
7 | this.frames = frames;
8 | this.length = 0;
9 | this.offsets = []
10 |
11 | frames.forEach((frame) => {
12 | this.offsets.push(this.length);
13 | this.length += (frame.delay || defaultFrameDelay);
14 | });
15 | }
16 |
17 | frameAt(fraction) {
18 | var offset = fraction * this.length;
19 | for (var i = 1, l = this.offsets.length; i < l; i++) {
20 | if (this.offsets[i] > offset) break;
21 | }
22 | return i - 1;
23 | }
24 | };
25 |
--------------------------------------------------------------------------------
/src/playback.js:
--------------------------------------------------------------------------------
1 | import Exploder from './exploder.js';
2 |
3 | // Private functions for setup
4 | function addClasses(element, frame) {
5 | element.classList.add('frame');
6 | if (frame.disposal == 2) element.classList.add('disposal-restore');
7 | }
8 | var createImage = function (frame) {
9 | var image = new Image();
10 | image.src = frame.url;
11 | addClasses(image, frame);
12 | return image;
13 | };
14 |
15 | export default class Playback {
16 | constructor(xgif, element, file, opts) {
17 | // Set up out instance variables
18 | this.xgif = xgif;
19 | this.element = element;
20 | this.onReady = opts.onReady;
21 | this.pingPong = opts.pingPong;
22 | this.fill = opts.fill;
23 | this.stopped = opts.stopped;
24 | this.snap = opts.snap;
25 | this.nTimes = opts.nTimes;
26 |
27 | this.ready = new Promise((resolve, reject) => {
28 | var exploder = new Exploder(file)
29 | exploder.load().then((gif) => {
30 | // Once we have the GIF data, add things to the DOM
31 | console.debug("Received " + gif.frames.length + " frames of gif " + file)
32 | this.gif = gif;
33 |
34 | this.element.innerHTML = "";
35 | var createFrameElement = createImage;//(this.fill) ? createDiv : createImage;
36 | gif.frames.map(createFrameElement)
37 | .forEach(this.element.appendChild, this.element);
38 |
39 | if (this.fill) requestAnimationFrame(this.scaleToFill.bind(this));
40 |
41 | resolve();
42 | });
43 | })
44 | }
45 |
46 | scaleToFill() {
47 | if (!(this.element.offsetWidth && this.element.offsetHeight)) {
48 | requestAnimationFrame(this.scaleToFill.bind(this));
49 | } else {
50 | var xScale = this.element.parentElement.offsetWidth / this.element.offsetWidth,
51 | yScale = this.element.parentElement.offsetHeight / this.element.offsetHeight;
52 |
53 | this.element.style.webkitTransform = "scale(" + 1.1 * Math.max(xScale, yScale) + ")";
54 | }
55 | }
56 |
57 | setFrame(fraction, repeatCount) {
58 | var frameNr = (this.pingPong && repeatCount % 2 >= 1) ? this.gif.frameAt(1 - fraction) : this.gif.frameAt(fraction);
59 | this.element.dataset['frame'] = frameNr;
60 | }
61 |
62 | start() {
63 | this.stopped = false;
64 | this.startTime = performance.now();
65 | if (this.animationLoop) this.animationLoop();
66 | }
67 |
68 | stop() {
69 | this.stopped = true;
70 | }
71 |
72 | startSpeed(speed) {
73 | this.speed = speed;
74 | this.animationLoop = () => {
75 | // Calculate where we are in the GIF
76 | var gifLength = 10 * this.gif.length / this.speed,
77 | duration = performance.now() - this.startTime,
78 | repeatCount = duration / gifLength,
79 | fraction = repeatCount % 1;
80 |
81 | // If it's time to stop, set ourselves to the right frame (based on nTimes)
82 | // and fire an event (which adds the 'stopped' attribute)
83 | if (this.nTimes && repeatCount >= this.nTimes) {
84 | this.setFrame(this.nTimes % 1 || 1.0, repeatCount);
85 | this.element.dispatchEvent(new CustomEvent('x-gif-finished'), true);
86 |
87 | // Otherwise continue playing as normal, and request another animationFrame
88 | } else {
89 | this.setFrame(fraction, repeatCount);
90 | if (!this.stopped) requestAnimationFrame(this.animationLoop);
91 | }
92 | }
93 |
94 | if (!this.stopped) this.start();
95 | }
96 |
97 | fromClock(beatNr, beatDuration, beatFraction) {
98 | // Always bias GIFs to speeding up rather than slowing down, it looks better.
99 | var speedup = 1.5,
100 | lengthInBeats = this.snap ? 1 : Math.max(1, Math.round((1 / speedup) * 10 * this.gif.length / beatDuration)),
101 | subBeat = beatNr % lengthInBeats,
102 | repeatCount = beatNr / lengthInBeats,
103 | subFraction = (beatFraction / lengthInBeats) + subBeat / lengthInBeats;
104 | this.setFrame(subFraction, repeatCount);
105 | }
106 |
107 | changeBpm(bpm) {
108 | this.beatLength = 60 * 1000 / bpm;
109 | }
110 |
111 | startBpm(bpm) {
112 | this.changeBpm(bpm);
113 | this.animationLoop = () => {
114 | var duration = performance.now() - this.startTime,
115 | beatNr = Math.floor(duration / this.beatLength),
116 | beatFraction = (duration % this.beatLength) / this.beatLength;
117 |
118 | this.fromClock(beatNr, this.beatLength, beatFraction);
119 |
120 | if (!this.stopped) requestAnimationFrame(this.animationLoop);
121 | }
122 |
123 | if (!this.stopped) this.start();
124 | }
125 | }
126 |
--------------------------------------------------------------------------------
/src/strategies.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | var Strategies = {
4 | speed: function () {
5 | this.playback.startSpeed(this.speed, this.context.getAttribute('n-times'));
6 | },
7 | hardBpm: function () {
8 | this.playback.startHardBpm(parseFloat(this.context.getAttribute('hard-bpm')));
9 | },
10 | bpm: function () {
11 | this.playback.startBpm(parseFloat(this.context.getAttribute('bpm')));
12 | },
13 | noop: function () {
14 | }
15 | };
16 |
17 | export default Strategies;
18 |
--------------------------------------------------------------------------------
/src/stream_reader.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | export default class StreamReader {
4 | constructor(arrayBuffer) {
5 | this.data = new Uint8Array(arrayBuffer);
6 | this.index = 0;
7 | this.log("TOTAL LENGTH: " + this.data.length);
8 | }
9 |
10 | finished() {
11 | return this.index >= this.data.length;
12 | }
13 |
14 | readByte() {
15 | return this.data[this.index++];
16 | }
17 |
18 | peekByte() {
19 | return this.data[this.index];
20 | }
21 |
22 | skipBytes(n) {
23 | this.index += n;
24 | }
25 |
26 | peekBit(i) {
27 | return !!(this.peekByte() & (1 << 8 - i));
28 | }
29 |
30 | readAscii(n) {
31 | var s = '';
32 | for (var i = 0; i < n; i++) {
33 | s += String.fromCharCode(this.readByte());
34 | }
35 | return s;
36 | }
37 |
38 | isNext(array) {
39 | for (var i = 0; i < array.length; i++) {
40 | if (array[i] !== this.data[this.index + i]) return false;
41 | }
42 | return true;
43 | }
44 |
45 | log(str) {
46 | // console.log(this.index + ": " + str);
47 | }
48 |
49 | error(str) {
50 | console.error(this.index + ": " + str);
51 | }
52 | }
53 |
--------------------------------------------------------------------------------
/src/utils.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | export var Promises = {
4 | xhrGet: (url, accept, responseType) => {
5 | return new Promise((resolve, reject) => {
6 | var loader = new XMLHttpRequest();
7 | loader.open('GET', url, true);
8 | loader.setRequestHeader("Accept", accept);
9 | loader.responseType = responseType;
10 | loader.onload = function() {
11 | // This is called even on 404 etc
12 | // so check the status
13 | if (this.status == 200) {
14 | // Resolve the promise with the response text
15 | resolve(this.response);
16 | }
17 | else {
18 | // Otherwise reject with the status text
19 | // which will hopefully be a meaningful error
20 | reject(Error(this.statusText));
21 | }
22 | };
23 |
24 | // Handle network errors
25 | loader.onerror = function() {
26 | reject(Error("Network Error"));
27 | };
28 | loader.send();
29 | })
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/src/x-gif.angular.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | import Playback from './playback.js';
4 | import Strategies from './strategies.js';
5 |
6 | angular.module('x-gif', [])
7 | // Angular strips the 'x' off
64 |
65 |
69 |
70 | 71 |
86 |
88 |
90 |
91 |
92 |
94 |
96 |
98 |
99 |
100 |
104 |
106 |
108 |
109 |
110 |
112 |
115 |
117 |
119 |
120 |
121 |
123 |
126 |
128 |
130 |
132 |
134 |
135 |
136 |
138 |
147 |
150 |
152 |
154 |
165 |
166 |
167 |
177 | 178 | 184 |
185 | <x-gif>
66 |The GIF tag the internet deserves
67 |View source on GitHub
68 |70 | 71 |
-
72 |
- Examples: 73 |
- {{ $index + 1 }} 74 | 75 |
Normal playback
82 | 83 |Something not look right? Post an 84 | issue on GitHub with the URL of the image
85 |<x-gif src="{{ trustedUrl() }}"></x-gif>
89 | Ping-pong
93 |<x-gif src="{{ trustedUrl() }}" ping-pong></x-gif>
97 | N-times
101 | 102 | {{ gif.nTimes }} 103 |<x-gif src="{{ trustedUrl() }}" n-times="{{ gif.nTimes }}"{{ nTimesIsStopped() }}></x-gif>
107 | Speed
111 |<x-gif src="{{ trustedUrl() }}" speed="{{ gif.speed }}"></x-gif>
118 | BPM
122 |<x-gif src="{{ trustedUrl() }}" bpm="{{ gif.bpm }}"></x-gif>
129 | <x-gif src="{{ trustedUrl() }}" bpm="{{ gif.bpm }}" snap></x-gif>
133 | Synced to Audio
137 |Loading beat data...
148 | <x-gif src="{{ trustedUrl() }}" synced></x-gif>
151 | <x-gif src="{{ trustedUrl() }}" synced snap></x-gif>
155 |
156 | Audio: Encom Part II by Daft Punk. CC0 1.0 Universal.
157 |
158 | Source:
159 | Archive.org
160 |
161 | Beat metadata provided by Echo Nest
162 |
See a full screen demo
164 |Stop-start
168 |<x-gif src="{{ trustedUrl() }}" stopped></x-gif>
169 | See demo
170 | 171 |Exploded
172 |<x-gif src="{{ trustedUrl() }}" exploded></x-gif>
173 | Explode the gif into its component frames (handy for debugging)
174 |See demo
175 | 176 |177 | 178 | 184 |
',
12 | link: function (scope, element, attrs) {
13 | var xGif = Object.create(attrs, {
14 | fire: {
15 | value: function (event) {
16 | console.log(event);
17 | }
18 | }
19 | });
20 |
21 | if (xGif.exploded != null) {
22 | xGif.playbackStrategy = 'noop'
23 | } else if (xGif.sync != null) {
24 | xGif.playbackStrategy = 'noop';
25 | } else if (xGif.hardBpm) {
26 | xGif.playbackStrategy = 'hardBpm';
27 | } else if (xGif.bpm) {
28 | xGif.playbackStrategy = 'bpm';
29 | } else {
30 | xGif.speed = xGif.speed || 1.0;
31 | xGif.playbackStrategy = 'speed';
32 | }
33 |
34 | attrs.$observe('src', function (src) {
35 | if (!src) return;
36 | var playbackStrategy = Strategies[xGif.playbackStrategy];
37 | xGif.playback = new Playback(xGif, element[0].querySelector('.x-gif__frames'), xGif.src, {
38 | pingPong: xGif.pingPong != null,
39 | fill: xGif.fill != null,
40 | stopped: xGif.stopped != null
41 | });
42 | xGif.playback.ready.then(playbackStrategy.bind(xGif));
43 | })
44 |
45 | attrs.$observe('speed', function (speed) {
46 | if (!speed) return;
47 | if (xGif.playback) xGif.playback.speed = speed;
48 | });
49 |
50 | element[0].clock = function (beatNr, beatDuration, beatFraction) {
51 | if (xGif.playback && xGif.playback.gif) xGif.playback.fromClock(beatNr, beatDuration, beatFraction);
52 | }
53 |
54 | element[0].relayout = function () {
55 | if (xGif.playback && xGif.fill != null) xGif.playback.scaleToFill();
56 | }
57 | }
58 | }
59 | });
60 |
--------------------------------------------------------------------------------
/src/x-gif.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
--------------------------------------------------------------------------------
/src/x-gif.js:
--------------------------------------------------------------------------------
1 | import Playback from './playback.js';
2 | import Strategies from './strategies.js';
3 |
4 | // Shim & native-safe ownerDocument lookup
5 | var owner = (document._currentScript || document.currentScript).ownerDocument;
6 |
7 | class XGifController {
8 | constructor(xgif) {
9 | this.xgif = xgif;
10 | this.setupComponent();
11 | this.srcChanged(this.xgif.getAttribute('src'))
12 | }
13 |
14 | setupComponent() {
15 | // Create a shadow root
16 | this.shadow = this.xgif.createShadowRoot();
17 |
18 | // stamp out our template in the shadow dom
19 | var template = owner.querySelector("#template").content.cloneNode(true);
20 | this.shadow.appendChild(template);
21 | }
22 |
23 | srcChanged(src) {
24 | if (!src) return;
25 | console.log("Loading " + src);
26 | this.playback = new Playback(this, this.shadow.querySelector('#frames'), src, this.xgif.options);
27 | this.playback.ready.then(() => {
28 | if (this.xgif.playbackMode == 'speed') {
29 | this.playback.startSpeed(this.xgif.speed);
30 | } else if (this.xgif.playbackMode == 'bpm') {
31 | this.playback.startBpm(this.xgif.bpm);
32 | }
33 | });
34 | }
35 |
36 | speedChanged(speed) {
37 | if (this.playback) this.playback.speed = speed;
38 | }
39 |
40 | bpmChanged(bpm) {
41 | if (this.playback) this.playback.changeBpm(bpm);
42 | }
43 |
44 | snapChanged(snap) {
45 | if (this.playback) this.playback.snap = snap;
46 | }
47 |
48 | nTimesChanged(nTimes) {
49 | if (this.playback) this.playback.nTimes = nTimes;
50 | }
51 |
52 | stoppedChanged(nowStop) {
53 | if (this.playback) {
54 | if (nowStop && !this.playback.stopped) {
55 | this.playback.stop();
56 | } else if (!nowStop && this.playback.stopped) {
57 | this.playback.start();
58 | }
59 | }
60 | }
61 |
62 | pingPongChanged(nowPingPong) {
63 | if (this.playback) this.playback.pingPong = nowPingPong;
64 | }
65 |
66 | clock(beatNr, beatDuration, beatFraction) {
67 | if (this.playback && this.playback.gif) {
68 | this.playback.fromClock(beatNr, beatDuration, beatFraction);
69 | }
70 | }
71 |
72 | relayout() {
73 | if (this.playback && this.xgif.options.fill) {
74 | this.playback.scaleToFill();
75 | }
76 | }
77 | }
78 |
79 | // Register the element in the document
80 | class XGif extends HTMLElement {
81 | createdCallback() {
82 | this.determinePlaybackMode()
83 | this.determinePlaybackOptions()
84 | this.addStoppedOnNTimesFinishing()
85 | this.controller = new XGifController(this);
86 | }
87 |
88 | determinePlaybackMode() {
89 | // We might not want x-gif to animate itself at all
90 | if (this.hasAttribute('exploded') || this.hasAttribute('sync')) {
91 | this.playbackMode = undefined;
92 | return;
93 | }
94 |
95 | // BPM Mode
96 | var maybeBPM = parseFloat(this.getAttribute('bpm'))
97 | if (!isNaN(maybeBPM)) {
98 | this.playbackMode = 'bpm';
99 | this.bpm = maybeBPM;
100 | return;
101 | }
102 |
103 | // Default to THE BUS THAT COULDNT SLOW DOWN mode
104 | var maybeSpeed = parseFloat(this.getAttribute('speed'))
105 | this.speed = isNaN(maybeSpeed) ? 1.0 : maybeSpeed;
106 | this.playbackMode = 'speed';
107 | }
108 |
109 | determinePlaybackOptions() {
110 | var maybeNtimes = parseFloat(this.getAttribute('n-times'))
111 | this.options = {
112 | stopped: this.hasAttribute('stopped'),
113 | fill: this.hasAttribute('fill'),
114 | nTimes: isNaN(maybeNtimes) ? null : maybeNtimes,
115 | snap: this.hasAttribute('snap'),
116 | pingPong: this.hasAttribute('ping-pong')
117 | }
118 | }
119 |
120 | attributeChangedCallback(attribute, oldVal, newVal) {
121 | if (attribute == "src") {
122 | this.controller.srcChanged(newVal)
123 | } else if (attribute == "speed") {
124 | this.determinePlaybackMode();
125 | this.controller.speedChanged(this.speed);
126 | } else if (attribute == "bpm") {
127 | this.determinePlaybackMode();
128 | this.controller.bpmChanged(this.bpm);
129 | } else if (attribute == "stopped") {
130 | this.determinePlaybackOptions();
131 | this.controller.stoppedChanged(this.options.stopped);
132 | } else if (attribute == "ping-pong") {
133 | this.determinePlaybackOptions();
134 | this.controller.pingPongChanged(this.options.pingPong);
135 | } else if (attribute == "snap") {
136 | this.determinePlaybackOptions();
137 | this.controller.snapChanged(this.options.snap);
138 | } else if (attribute == "n-times") {
139 | this.determinePlaybackOptions();
140 | this.controller.nTimesChanged(this.options.nTimes);
141 | }
142 | }
143 |
144 | clock(beatNr, beatDuration, beatFraction) {
145 | this.controller.clock(beatNr, beatDuration, beatFraction)
146 | }
147 |
148 | relayout() {
149 | this.controller.relayout();
150 | }
151 |
152 | addStoppedOnNTimesFinishing() {
153 | this.addEventListener('x-gif-finished', () => {
154 | this.setAttribute('stopped', '')
155 | })
156 | }
157 | }
158 |
159 | // Register our todo-item tag with the document
160 | document.registerElement('x-gif', XGif);
161 |
--------------------------------------------------------------------------------
/src/x-gif.polymer.js:
--------------------------------------------------------------------------------
1 | import Playback from './playback.js';
2 | import Strategies from './strategies.js';
3 |
4 | class XGif {
5 | ready() {
6 | if (this.exploded != null) {
7 | this.playbackStrategy = 'noop'
8 | } else if (this.sync != null) {
9 | this.playbackStrategy = 'noop';
10 | } else if (this['hard-bpm']) {
11 | this.playbackStrategy = 'hardBpm';
12 | } else if (this.bpm) {
13 | this.playbackStrategy = 'bpm';
14 | } else {
15 | this.speed = this.speed || 1.0;
16 | this.playbackStrategy = 'speed';
17 | }
18 | };
19 |
20 | srcChanged() {
21 | var playbackStrategy = Strategies[this.playbackStrategy];
22 | this.playback = new Playback(this, this.$.frames, this.src, {
23 | pingPong: this['ping-pong'] != null,
24 | fill: this.fill != null,
25 | stopped: this.stopped != null
26 | });
27 | this.playback.ready.then(playbackStrategy.bind(this));
28 | };
29 |
30 | speedChanged(oldVal, newVal) {
31 | if (this.playback) this.playback.speed = newVal;
32 | }
33 |
34 | stoppedChanged(oldVal, newVal) {
35 | var nowStop = newVal != null;
36 | if (this.playback && nowStop && !this.playback.stopped) {
37 | this.playback.stop();
38 | } else if (this.playback && !nowStop && this.playback.stopped) {
39 | this.playback.start();
40 | }
41 | }
42 |
43 | togglePingPong() {
44 | this['ping-pong'] = (this['ping-pong'] != null) ? null : true;
45 | if (this.playback) this.playback.pingPong = this['ping-pong'] != null;
46 | }
47 |
48 | clock(beatNr, beatDuration, beatFraction) {
49 | if (this.playback && this.playback.gif) this.playback.fromClock(beatNr, beatDuration, beatFraction);
50 | };
51 |
52 | relayout() {
53 | if (this.fill != null) this.playback.scaleToFill();
54 | }
55 | }
56 |
57 | Polymer('x-gif', new XGif());
58 |
--------------------------------------------------------------------------------
/src/x-gif.scss:
--------------------------------------------------------------------------------
1 | :host {
2 | display: inline-block;
3 | }
4 |
5 | #frames,
6 | .x-gif__frames {
7 | display: inline-block;
8 | position: relative;
9 |
10 | @for $i from 0 to 100 {
11 | &[data-frame="#{$i}"] {
12 | .frame:nth-child(n + #{2 + $i}) {
13 | opacity: 0;
14 | }
15 | .frame.disposal-restore:nth-child(#{1 + $i}) {
16 | opacity: 1;
17 | }
18 | }
19 | }
20 | }
21 |
22 | .frame {
23 | position: absolute;
24 | top: 0;
25 | left: 0;
26 | transform: translateZ(0);
27 |
28 | &:first-child {
29 | position: static;
30 | }
31 | &.disposal-restore {
32 | opacity: 0;
33 | }
34 |
35 | :host([exploded]) & {
36 | position: static;
37 | opacity: 1;
38 | }
39 | }
40 |
41 | x-gif {
42 | // display: none;
43 | }
44 |
45 | // Full Screen overrides
46 | @mixin fill-overrides {
47 | width: 100%;
48 | height: 100%;
49 |
50 | .frames-wrapper {
51 | width: 100%;
52 | height: 100%;
53 | display: flex;
54 | justify-content: center;
55 | align-items: center;
56 | overflow: hidden;
57 | }
58 |
59 | #frames,
60 | .x-gif__frames {
61 | transform-origin: 50% 50%;
62 | }
63 | }
64 |
65 | :host([fill]) {
66 | @include fill-overrides;
67 | }
68 |
69 | x-gif[fill] {
70 | @include fill-overrides;
71 | }
72 |
--------------------------------------------------------------------------------