|
|
@@ -0,0 +1,114 @@
|
|
|
+"use strict";
|
|
|
+(() => {
|
|
|
+ function Show(parent, files, delay) {
|
|
|
+ this.index = 0;
|
|
|
+ this.elapsed = 0;
|
|
|
+ this.playing = true;
|
|
|
+ this.loaded = false;
|
|
|
+ this.list = [];
|
|
|
+ this.updated = Date.now();
|
|
|
+ this.delay = !isNaN(delay) ? delay : 3000;
|
|
|
+ this.parent = parent;
|
|
|
+ this.parent.innerHTML = '';
|
|
|
+ this.parent.appendChild(document.createElement('span'));
|
|
|
+ (async () => {
|
|
|
+ await this.parse(files);
|
|
|
+ window.requestAnimationFrame(() => { this.render(); });
|
|
|
+ window.addEventListener('keyup', (e) => {
|
|
|
+ if (!e.keyCode) return;
|
|
|
+ if (e.keyCode === 32) { this.toggle(); }
|
|
|
+ else if (e.keyCode === 37) { this.prev(); }
|
|
|
+ else if (e.keyCode === 39) { this.next(); }
|
|
|
+ }, false);
|
|
|
+ })();
|
|
|
+ };
|
|
|
+
|
|
|
+ Show.prototype.toggle = function() { this.playing = !this.playing; };
|
|
|
+
|
|
|
+ Show.prototype.next = function() {
|
|
|
+ if (!this.loaded) return;
|
|
|
+ if (++this.index >= this.list.length) this.index = 0;
|
|
|
+ this.elapsed = 0;
|
|
|
+ };
|
|
|
+
|
|
|
+ Show.prototype.prev = function() {
|
|
|
+ if (!this.loaded) return;
|
|
|
+ if (--this.index < 0) this.index = this.list.length-1; this.elapsed = 0;
|
|
|
+ };
|
|
|
+
|
|
|
+ Show.prototype.format = function(f, a) {
|
|
|
+ let start = f.indexOf('%');
|
|
|
+ if (f.length > start && f[start+1] === 's') {
|
|
|
+ return f.replace('%s', a);
|
|
|
+ } else if (f.length > start+3 && f[start+3] === 's') {
|
|
|
+ let c = String(f[start+1]);
|
|
|
+ let w = parseInt(f[start+2]);
|
|
|
+ let r = (a.length >= w) ? a : (new Array(w).join(c) + a).slice(-w);
|
|
|
+ return f.replace(f.slice(start, start+4), r);
|
|
|
+ }
|
|
|
+ return f;
|
|
|
+ };
|
|
|
+
|
|
|
+ Show.prototype.preload = async function(file, delay) {
|
|
|
+ const o = { p: file };
|
|
|
+ if (o.p.endsWith('.mp4') || o.p.endsWith('.webm') || o.p.endsWith('.ogg')) {
|
|
|
+ let e = document.createElement('video');
|
|
|
+ e.addEventListener('error', () => { this.list.splice(this.list.indexOf(o), 1); }, {once: true});
|
|
|
+ e.addEventListener('canplay', () => { o.d = (isNaN(delay) ? 1 : delay) * e.duration * 1000; o.e = e; }, {once: true});
|
|
|
+ e.muted = true;
|
|
|
+ e.loop = true;
|
|
|
+ e.src = o.p;
|
|
|
+ } else {
|
|
|
+ let e = document.createElement('img');
|
|
|
+ e.addEventListener('error', () => { this.list.splice(this.list.indexOf(o), 1); }, {once: true});
|
|
|
+ e.addEventListener('load', () => { o.e = e; }, {once: true});
|
|
|
+ o.d = isNaN(delay) ? this.delay : delay;
|
|
|
+ e.src = o.p;
|
|
|
+ }
|
|
|
+ this.list.push(o);
|
|
|
+ }
|
|
|
+
|
|
|
+ Show.prototype.parse = async function(files) {
|
|
|
+ if (!(files instanceof Array)) return;
|
|
|
+ files.map((o) => {
|
|
|
+ if (typeof o === 'string') {
|
|
|
+ this.preload(o);
|
|
|
+ } else if (o instanceof Object && !(o instanceof Array) && typeof o.file !== 'undefined' && typeof o.file === 'string') {
|
|
|
+ if (o.file.indexOf('%') > -1 && typeof o.range !== 'undefined' && o.range instanceof Array) {
|
|
|
+ if (o.range.length === 2 && !(isNaN(o.range[2]) && isNaN(o.range[1])) && parseInt(o.range[0]) < parseInt(o.range[1])) {
|
|
|
+ for (let i = parseInt(o.range[0]); i <= parseInt(o.range[1]); i++) {
|
|
|
+ this.preload(this.format(o.file, i), o.delay);
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ for (let i of o.range) {
|
|
|
+ this.preload(this.format(o.file, i), o.delay);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.preload(o.file, o.delay);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ };
|
|
|
+
|
|
|
+ Show.prototype.render = function() {
|
|
|
+ let d = Date.now();
|
|
|
+ if (this.loaded) {
|
|
|
+ let o = this.list[this.index];
|
|
|
+ let vid = (o.e.tagName == 'VIDEO') ? 'video' : 'natural';
|
|
|
+ o.e.className = (o.e[vid+'Width'] / o.e[vid+'Height'] < this.parent.clientWidth / this.parent.clientHeight) ? 'fillheight' : 'fillwidth';
|
|
|
+ if (this.parent.firstChild !== o.e) {
|
|
|
+ o.e.src = o.e.src;
|
|
|
+ this.parent.replaceChild(o.e, this.parent.firstChild);
|
|
|
+ if (vid === 'video') o.e.play();
|
|
|
+ }
|
|
|
+ if (this.playing && document.hasFocus() && (this.elapsed += (d - this.updated)) && this.elapsed >= o.d) this.next();
|
|
|
+ } else {
|
|
|
+ this.loaded = (this.list.length > 0) && this.list.every((l) => { return typeof l.e !== 'undefined'; });
|
|
|
+ }
|
|
|
+ s.updated = d;
|
|
|
+ window.requestAnimationFrame(() => { this.render(); });
|
|
|
+ }
|
|
|
+
|
|
|
+ window.Show = Show;
|
|
|
+})();
|
