show/show.js

'use strict';
(() => {
	function Show(parent, files, delay) {
		this.index = 0;
		this.elapsed = 0;
		this.playing = true;
		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.index >= this.list.length) this.index = 0;
		this.elapsed = 0;
	};

	Show.prototype.prev = function() {
		if (--this.index < 0) this.index = this.list.length-1;
		this.elapsed = 0;
	};

	Show.prototype.format = function(f, a) {
		f = f.replaceAll('%s', a);
		for (let start = f.indexOf('%'); f.length > start+3 && f[start+3] === 's'; ) {
			let c = String(f[start+1]);
			let w = parseInt(f[start+2]);
			let r = (String(a).length >= w) ? a : (new Array(w).join(c)).concat(a).slice(-w);
			f = 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')) {
			o.e = document.createElement('video');
			o.e.addEventListener('error', () => { this.list.splice(this.list.indexOf(o), 1); }, {once: true});
			o.e.addEventListener('canplay', () => { o.d = (isNaN(delay) ? 1 : delay) * o.e.duration * 1000; }, {once: true});
			o.e.muted = true;
			o.e.loop = true;
			o.e.src = o.p;
		} else {
			o.e = document.createElement('img');
			o.e.addEventListener('error', () => { this.list.splice(this.list.indexOf(o), 1); }, {once: true});
			o.d = isNaN(delay) ? this.delay : delay;
			o.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() {
		if (!this.list.length) return;
		let d = Date.now();
		let o = this.list[this.index];
		let vid = (o.e.tagName == 'VIDEO') ? 'video' : 'natural';
		if (o.e.src === this.parent.firstChild.src) o.e.className = this.parent.firstChild.className = (o.e[vid+'Width'] / o.e[vid+'Height'] < this.parent.clientWidth / this.parent.clientHeight) ? 'fillheight' : 'fillwidth';
		if (this.parent.firstChild !== o.e && !o.loading) {
			o.loading = true;
			let parent = this.parent;
			o.e.addEventListener(vid === 'video' ? 'canplay' : 'load', () => {
				if (vid === 'video') {
					parent.replaceChild(o.e, parent.firstChild);
				} else if (vid === 'natural' && parent.firstChild.tagName === 'VIDEO') {
					parent.replaceChild(document.createElement('img'), parent.firstChild);
				}
				if (parent.firstChild.tagName === 'IMG') parent.firstChild.src = o.p;
				if (vid === 'video') o.e.play();
				delete o.loading
			}, {once: true});
			let tmp = o.e.src; o.e.src = ''; o.e.src = tmp;
		}
		if (this.playing && document.hasFocus() && (this.elapsed += (d - this.updated)) && this.elapsed >= o.d) this.next();
		s.updated = d;
		window.requestAnimationFrame(() => { this.render(); });
	}

	window.Show = Show;
})();