morethanwords
4 years ago
27 changed files with 845 additions and 1341 deletions
@ -0,0 +1,123 @@
@@ -0,0 +1,123 @@
|
||||
import { isInDOM, $rootScope, cancelEvent } from "../lib/utils"; |
||||
import appDownloadManager, { Progress } from "../lib/appManagers/appDownloadManager"; |
||||
|
||||
export default class ProgressivePreloader { |
||||
public preloader: HTMLDivElement; |
||||
private circle: SVGCircleElement; |
||||
|
||||
//private tempID = 0;
|
||||
private detached = true; |
||||
|
||||
private fileName: string; |
||||
public controller: AbortController; |
||||
|
||||
constructor(elem?: Element, private cancelable = true) { |
||||
this.preloader = document.createElement('div'); |
||||
this.preloader.classList.add('preloader-container'); |
||||
|
||||
this.preloader.innerHTML = ` |
||||
<div class="you-spin-me-round"> |
||||
<svg xmlns="http://www.w3.org/2000/svg" class="preloader-circular" viewBox="25 25 50 50"> |
||||
<circle class="preloader-path-new" cx="50" cy="50" r="23" fill="none" stroke-miterlimit="10"/> |
||||
</svg> |
||||
</div>`;
|
||||
|
||||
if(cancelable) { |
||||
this.preloader.innerHTML += ` |
||||
<svg xmlns="http://www.w3.org/2000/svg" class="preloader-close" viewBox="0 0 20 20"> |
||||
<line x1="0" y1="20" x2="20" y2="0" stroke-width="2" stroke-linecap="round"></line> |
||||
<line x1="0" y1="0" x2="20" y2="20" stroke-width="2" stroke-linecap="round"></line> |
||||
</svg>`;
|
||||
} else { |
||||
this.preloader.classList.add('preloader-swing'); |
||||
} |
||||
|
||||
this.circle = this.preloader.firstElementChild.firstElementChild.firstElementChild as SVGCircleElement; |
||||
|
||||
if(elem) { |
||||
this.attach(elem); |
||||
} |
||||
|
||||
if(this.cancelable) { |
||||
this.preloader.addEventListener('click', (e) => { |
||||
cancelEvent(e); |
||||
this.detach(); |
||||
|
||||
if(!this.fileName) { |
||||
return; |
||||
} |
||||
|
||||
const download = appDownloadManager.getDownload(this.fileName); |
||||
if(download && download.controller && !download.controller.signal.aborted) { |
||||
download.controller.abort(); |
||||
} |
||||
}); |
||||
} |
||||
} |
||||
|
||||
downloadProgressHandler = (details: Progress) => { |
||||
if(details.done >= details.total) { |
||||
this.detach(); |
||||
} |
||||
|
||||
//console.log('preloader download', promise, details);
|
||||
let percents = details.done / details.total * 100; |
||||
this.setProgress(percents); |
||||
}; |
||||
|
||||
public attach(elem: Element, reset = true, fileName?: string, append = true) { |
||||
this.fileName = fileName; |
||||
if(this.fileName) { |
||||
const download = appDownloadManager.getDownload(fileName); |
||||
download.promise.catch(() => { |
||||
this.detach(); |
||||
}); |
||||
|
||||
appDownloadManager.addProgressCallback(this.fileName, this.downloadProgressHandler); |
||||
} |
||||
|
||||
this.detached = false; |
||||
window.requestAnimationFrame(() => { |
||||
if(this.detached) return; |
||||
this.detached = false; |
||||
|
||||
elem[append ? 'append' : 'prepend'](this.preloader); |
||||
|
||||
if(this.cancelable && reset) { |
||||
this.setProgress(0); |
||||
} |
||||
}); |
||||
} |
||||
|
||||
public detach() { |
||||
this.detached = true; |
||||
|
||||
if(this.preloader.parentElement) { |
||||
window.requestAnimationFrame(() => { |
||||
if(!this.detached) return; |
||||
this.detached = true; |
||||
|
||||
if(this.preloader.parentElement) { |
||||
this.preloader.parentElement.removeChild(this.preloader); |
||||
} |
||||
}); |
||||
} |
||||
} |
||||
|
||||
public setProgress(percents: number) { |
||||
if(!isInDOM(this.circle)) { |
||||
return; |
||||
} |
||||
|
||||
if(percents == 0) { |
||||
this.circle.style.strokeDasharray = ''; |
||||
return; |
||||
} |
||||
|
||||
try { |
||||
let totalLength = this.circle.getTotalLength(); |
||||
//console.log('setProgress', (percents / 100 * totalLength));
|
||||
this.circle.style.strokeDasharray = '' + Math.max(5, percents / 100 * totalLength) + ', 200'; |
||||
} catch(err) {} |
||||
} |
||||
} |
||||
@ -1,326 +0,0 @@
@@ -1,326 +0,0 @@
|
||||
/* |
||||
* Copyright (c) 2018-present, Evgeny Nadymov |
||||
* |
||||
* This source code is licensed under the GPL v.3.0 license found in the |
||||
* LICENSE file in the root directory of this source tree. |
||||
*/ |
||||
|
||||
// @ts-ignore
|
||||
//import MP4Box from 'mp4box/dist/mp4box.all.min';
|
||||
import { logger, LogLevels } from './logger'; |
||||
|
||||
export default class MP4Source { |
||||
private mp4file: any; |
||||
private nextBufferStart = 0; |
||||
private mediaSource: MediaSource = null; |
||||
private ready = false; |
||||
private bufferedTime = 40; |
||||
|
||||
private beforeMoovBufferSize = 32 * 1024; |
||||
private moovBufferSize = 512 * 1024; |
||||
private bufferSize = 512 * 1024; |
||||
private seekBufferSize = 256 * 1024; |
||||
|
||||
private currentBufferSize = this.beforeMoovBufferSize; |
||||
private nbSamples = 10; |
||||
private expectedSize: number; |
||||
|
||||
private seeking = false; |
||||
private loading = false; |
||||
private url: string; |
||||
|
||||
private log = logger('MP4'/* , LogLevels.error */); |
||||
|
||||
//public onLoadBuffer: (offset: number)
|
||||
|
||||
constructor(private video: {duration: number, video: {expected_size: number}}, private getBufferAsync: (start: number, end: number) => Promise<ArrayBuffer>) { |
||||
this.expectedSize = this.video.video.expected_size; |
||||
|
||||
this.init(video.duration); |
||||
} |
||||
|
||||
init(videoDuration: number) { |
||||
const mediaSource = new MediaSource(); |
||||
mediaSource.addEventListener('sourceopen', () => { |
||||
this.log('[MediaSource] sourceopen start', this.mediaSource, this); |
||||
|
||||
if(this.mediaSource.sourceBuffers.length > 0) return; |
||||
|
||||
//const mp4File = MP4Box.createFile();
|
||||
const mp4File = (window as any).MP4Box.createFile(); |
||||
mp4File.onMoovStart = () => { |
||||
this.log('[MP4Box] onMoovStart'); |
||||
this.currentBufferSize = this.moovBufferSize; |
||||
}; |
||||
|
||||
mp4File.onError = (error: Error) => { |
||||
this.log('[MP4Box] onError', error); |
||||
}; |
||||
|
||||
mp4File.onReady = (info: any) => { |
||||
this.log('[MP4Box] onReady', info); |
||||
this.ready = true; |
||||
this.currentBufferSize = this.bufferSize; |
||||
const { isFragmented, timescale, fragment_duration, duration } = info; |
||||
|
||||
if(!fragment_duration && !duration) { |
||||
this.mediaSource.duration = videoDuration; |
||||
this.bufferedTime = videoDuration; |
||||
} else { |
||||
this.mediaSource.duration = isFragmented |
||||
? fragment_duration / timescale |
||||
: duration / timescale; |
||||
} |
||||
|
||||
this.initializeAllSourceBuffers(info); |
||||
}; |
||||
|
||||
mp4File.onSegment = (id: number, sb: any, buffer: ArrayBuffer, sampleNum: number, is_last: boolean) => { |
||||
const isLast = (sampleNum + this.nbSamples) > sb.nb_samples; |
||||
|
||||
this.log('[MP4Box] onSegment', id, buffer, `${sampleNum}/${sb.nb_samples}`, isLast, sb.timestampOffset, mediaSource, is_last); |
||||
|
||||
sb.segmentIndex++; |
||||
sb.pendingAppends.push({ id, buffer, sampleNum, is_last: isLast }); |
||||
|
||||
this.onUpdateEnd(sb, true, false); |
||||
}; |
||||
|
||||
this.mp4file = mp4File; |
||||
this.log('[MediaSource] sourceopen end', this, this.mp4file); |
||||
|
||||
this.loadNextBuffer(); |
||||
}); |
||||
|
||||
mediaSource.addEventListener('sourceended', () => { |
||||
this.log('[MediaSource] sourceended', mediaSource.readyState); |
||||
//this.getBufferAsync = null;
|
||||
}); |
||||
|
||||
mediaSource.addEventListener('sourceclose', () => { |
||||
this.log('[MediaSource] sourceclose', mediaSource.readyState); |
||||
//this.getBufferAsync = null;
|
||||
}); |
||||
|
||||
this.mediaSource = mediaSource; |
||||
} |
||||
|
||||
private onInitAppended(sb: any) { |
||||
sb.sampleNum = 0; |
||||
sb.addEventListener('updateend', () => this.onUpdateEnd(sb, true, true)); |
||||
/* In case there are already pending buffers we call onUpdateEnd to start appending them*/ |
||||
this.onUpdateEnd(sb, false, true); |
||||
|
||||
// @ts-ignore
|
||||
this.mediaSource.pendingInits--; |
||||
// @ts-ignore
|
||||
if(this.mediaSource.pendingInits === 0) { |
||||
this.log('onInitAppended start!'); |
||||
this.mp4file.start(); |
||||
|
||||
if(this.expectedSize > this.bufferSize) { |
||||
this.nextBufferStart = this.bufferSize; |
||||
} else { |
||||
return; |
||||
} |
||||
|
||||
/* setInterval(() => { |
||||
this.loadNextBuffer(); |
||||
}, 1e3); */ |
||||
this.loadNextBuffer(); |
||||
} |
||||
}; |
||||
|
||||
private onUpdateEnd(sb: any, isNotInit: boolean, isEndOfAppend: boolean) { |
||||
//console.this.log('onUpdateEnd', sb, isNotInit, isEndOfAppend, sb.sampleNum, sb.is_last);
|
||||
if(isEndOfAppend === true) { |
||||
if(sb.sampleNum) { |
||||
this.mp4file.releaseUsedSamples(sb.id, sb.sampleNum); |
||||
delete sb.sampleNum; |
||||
} |
||||
|
||||
if(sb.is_last) { |
||||
this.log('onUpdateEnd', sb, isNotInit, isEndOfAppend, sb.sampleNum, sb.is_last); |
||||
this.mediaSource.endOfStream(); |
||||
} |
||||
} |
||||
|
||||
if(this.mediaSource.readyState === "open" && sb.updating === false && sb.pendingAppends.length > 0) { |
||||
const obj = sb.pendingAppends.shift(); |
||||
this.log("MSE - SourceBuffer #"+sb.id, "Appending new buffer, pending: "+sb.pendingAppends.length); |
||||
sb.sampleNum = obj.sampleNum; |
||||
sb.is_last = obj.is_last; |
||||
sb.appendBuffer(obj.buffer); |
||||
} |
||||
} |
||||
|
||||
private initializeAllSourceBuffers(info: any) { |
||||
for(let i = 0; i < info.tracks.length; i++) { |
||||
this.addSourceBuffer(info.tracks[i]); |
||||
} |
||||
|
||||
this.initializeSourceBuffers(); |
||||
} |
||||
|
||||
private initializeSourceBuffers() { |
||||
const initSegs = this.mp4file.initializeSegmentation(); |
||||
this.log('[MP4Box] initializeSegmentation', initSegs); |
||||
|
||||
for(let i = 0; i < initSegs.length; i++) { |
||||
const sb: any = initSegs[i].user; |
||||
if(i === 0) { |
||||
// @ts-ignore
|
||||
this.mediaSource.pendingInits = 0; |
||||
} |
||||
|
||||
let onInitAppended = () => { |
||||
if(this.mediaSource.readyState === "open") { |
||||
sb.removeEventListener('updateend', onInitAppended); |
||||
this.onInitAppended(sb); |
||||
} |
||||
}; |
||||
|
||||
sb.addEventListener('updateend', onInitAppended); |
||||
sb.appendBuffer(initSegs[i].buffer); |
||||
sb.segmentIndex = 0; |
||||
|
||||
// @ts-ignore
|
||||
this.mediaSource.pendingInits++; |
||||
} |
||||
} |
||||
|
||||
private addSourceBuffer(track: {id: number, codec: string, type: 'video', nb_samples: number}) { |
||||
const file = this.mp4file; |
||||
const ms = this.mediaSource; |
||||
if(!track) return; |
||||
|
||||
const { id, codec, type: trackType, nb_samples } = track; |
||||
const mime = `video/mp4; codecs="${codec}"`; |
||||
this.log('mimetype:', mime); |
||||
if(!MediaSource.isTypeSupported(mime)) { |
||||
this.log('[addSourceBuffer] not supported', mime); |
||||
return; |
||||
} |
||||
|
||||
const sb: any = ms.addSourceBuffer(mime); |
||||
sb.id = id; |
||||
sb.pendingAppends = []; |
||||
sb.nb_samples = nb_samples; |
||||
file.setSegmentOptions(id, sb, { nbSamples: this.nbSamples }); |
||||
|
||||
this.log('[addSourceBuffer] add', id, codec, trackType, sb); |
||||
sb.addEventListener("error", (e: Event) => { |
||||
this.log("MSE SourceBuffer #" + id, e); |
||||
}); |
||||
} |
||||
|
||||
stop() { |
||||
this.mp4file.stop(); |
||||
this.mp4file = null; |
||||
this.getBufferAsync = null; |
||||
} |
||||
|
||||
getURL() { |
||||
return this.url ?? (this.url = URL.createObjectURL(this.mediaSource)); |
||||
} |
||||
|
||||
seek(currentTime: number/* , buffered: any */) { |
||||
const seekInfo: {offset: number, time: number} = this.mp4file.seek(currentTime, true); |
||||
this.nextBufferStart = seekInfo.offset; |
||||
|
||||
const loadNextBuffer = true; |
||||
/* let loadNextBuffer = buffered.length === 0; |
||||
for(let i = 0; i < buffered.length; i++) { |
||||
const start = buffered.start(i); |
||||
const end = buffered.end(i); |
||||
|
||||
if(start <= currentTime && currentTime + this.bufferedTime > end) { |
||||
loadNextBuffer = true; |
||||
break; |
||||
} |
||||
} */ |
||||
|
||||
this.log('[player] onSeeked', loadNextBuffer, currentTime, seekInfo, this.nextBufferStart); |
||||
if(loadNextBuffer) { |
||||
this.loadNextBuffer(true); |
||||
} |
||||
|
||||
return seekInfo.offset; |
||||
} |
||||
|
||||
timeUpdate(currentTime: number, duration: number, buffered: any) { |
||||
//return;
|
||||
|
||||
const ranges = []; |
||||
for(let i = 0; i < buffered.length; i++) { |
||||
ranges.push({ start: buffered.start(i), end: buffered.end(i)}) |
||||
} |
||||
|
||||
let loadNextBuffer = buffered.length === 0; |
||||
let hasRange = false; |
||||
for(let i = 0; i < buffered.length; i++) { |
||||
const start = buffered.start(i); |
||||
const end = buffered.end(i); |
||||
|
||||
if (start <= currentTime && currentTime <= end) { |
||||
hasRange = true; |
||||
if (end < duration && currentTime + this.bufferedTime > end) { |
||||
loadNextBuffer = true; |
||||
break; |
||||
} |
||||
} |
||||
} |
||||
|
||||
if(!hasRange) { |
||||
loadNextBuffer = true; |
||||
} |
||||
|
||||
this.log('[player] timeUpdate', loadNextBuffer, currentTime, duration, JSON.stringify(ranges)); |
||||
if(loadNextBuffer) { |
||||
this.loadNextBuffer(); |
||||
} |
||||
} |
||||
|
||||
async loadNextBuffer(seek = false) { |
||||
const { nextBufferStart, loading, currentBufferSize, mp4file } = this; |
||||
this.log('[player] loadNextBuffer', nextBufferStart === undefined, loading, !mp4file); |
||||
if(!mp4file) return; |
||||
if(nextBufferStart === undefined) return; |
||||
if(loading) return; |
||||
|
||||
//return;
|
||||
|
||||
this.loading = true; |
||||
let bufferSize = seek ? this.seekBufferSize : this.bufferSize; |
||||
if(nextBufferStart + bufferSize > this.expectedSize) { |
||||
bufferSize = this.expectedSize - nextBufferStart; |
||||
} |
||||
const nextBuffer = await this.getBufferAsync(nextBufferStart, nextBufferStart + bufferSize); |
||||
// @ts-ignore
|
||||
nextBuffer.fileStart = nextBufferStart; |
||||
|
||||
const end = (nextBuffer.byteLength !== bufferSize)/* || (nextBuffer.byteLength === this.expectedSize) */; |
||||
|
||||
this.log('[player] loadNextBuffer start', nextBuffer.byteLength, nextBufferStart, end); |
||||
if(nextBuffer.byteLength) { |
||||
this.nextBufferStart = mp4file.appendBuffer(nextBuffer/* , end */); |
||||
} else { |
||||
this.nextBufferStart = undefined; |
||||
} |
||||
|
||||
if(end) { |
||||
this.log('[player] loadNextBuffer flush'); |
||||
this.mp4file.flush(); |
||||
} |
||||
|
||||
this.log('[player] loadNextBuffer stop', nextBuffer.byteLength, nextBufferStart, this.nextBufferStart); |
||||
|
||||
this.loading = false; |
||||
if(!this.ready || !end) { |
||||
this.log('[player] loadNextBuffer next'); |
||||
this.loadNextBuffer(); |
||||
} |
||||
} |
||||
} |
||||
|
||||
(window as any).MP4Source = MP4Source; |
||||
@ -0,0 +1,115 @@
@@ -0,0 +1,115 @@
|
||||
import { $rootScope } from "../utils"; |
||||
import apiManager from "../mtproto/mtprotoworker"; |
||||
|
||||
export type Download = {promise: Promise<Blob>, controller: AbortController}; |
||||
export type Progress = {done: number, fileName: string, total: number, offset: number}; |
||||
export type ProgressCallback = (details: Progress) => void; |
||||
|
||||
export class AppDownloadManager { |
||||
private downloads: {[fileName: string]: Download} = {}; |
||||
private progress: {[fileName: string]: Progress} = {}; |
||||
private progressCallbacks: {[fileName: string]: Array<ProgressCallback>} = {}; |
||||
|
||||
constructor() { |
||||
$rootScope.$on('download_progress', (e) => { |
||||
const details = e.detail as {done: number, fileName: string, total: number, offset: number}; |
||||
this.progress[details.fileName] = details; |
||||
|
||||
const callbacks = this.progressCallbacks[details.fileName]; |
||||
if(callbacks) { |
||||
callbacks.forEach(callback => callback(details)); |
||||
} |
||||
}); |
||||
} |
||||
|
||||
public download(fileName: string, url: string) { |
||||
if(this.downloads.hasOwnProperty(fileName)) return this.downloads[fileName]; |
||||
|
||||
const controller = new AbortController(); |
||||
const promise = fetch(url, {signal: controller.signal}) |
||||
.then(res => res.blob()) |
||||
.catch(err => { // Только потому что event.request.signal не работает в SW, либо я кривой?
|
||||
if(err.name === 'AbortError') { |
||||
//console.log('Fetch aborted');
|
||||
apiManager.cancelDownload(fileName); |
||||
delete this.downloads[fileName]; |
||||
delete this.progress[fileName]; |
||||
delete this.progressCallbacks[fileName]; |
||||
} else { |
||||
//console.error('Uh oh, an error!', err);
|
||||
} |
||||
|
||||
throw err; |
||||
}); |
||||
|
||||
//console.log('Will download file:', fileName, url);
|
||||
|
||||
promise.finally(() => { |
||||
delete this.progressCallbacks[fileName]; |
||||
}); |
||||
|
||||
return this.downloads[fileName] = {promise, controller}; |
||||
} |
||||
|
||||
public getDownload(fileName: string) { |
||||
return this.downloads[fileName]; |
||||
} |
||||
|
||||
public addProgressCallback(fileName: string, callback: ProgressCallback) { |
||||
const progress = this.progress[fileName]; |
||||
(this.progressCallbacks[fileName] ?? (this.progressCallbacks[fileName] = [])).push(callback); |
||||
|
||||
if(progress) { |
||||
callback(progress); |
||||
} |
||||
} |
||||
|
||||
private createDownloadAnchor(url: string, onRemove?: () => void) { |
||||
const a = document.createElement('a'); |
||||
a.href = url; |
||||
|
||||
a.style.position = 'absolute'; |
||||
a.style.top = '1px'; |
||||
a.style.left = '1px'; |
||||
|
||||
document.body.append(a); |
||||
|
||||
try { |
||||
var clickEvent = document.createEvent('MouseEvents'); |
||||
clickEvent.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); |
||||
a.dispatchEvent(clickEvent); |
||||
} catch (e) { |
||||
console.error('Download click error', e); |
||||
try { |
||||
a.click(); |
||||
} catch (e) { |
||||
window.open(url as string, '_blank'); |
||||
} |
||||
} |
||||
|
||||
setTimeout(() => { |
||||
a.remove(); |
||||
onRemove && onRemove(); |
||||
}, 100); |
||||
} |
||||
|
||||
/* public downloadToDisc(fileName: string, url: string) { |
||||
this.createDownloadAnchor(url); |
||||
|
||||
return this.download(fileName, url); |
||||
} */ |
||||
|
||||
public downloadToDisc(fileName: string, url: string) { |
||||
const download = this.download(fileName, url); |
||||
download.promise.then(blob => { |
||||
const objectURL = URL.createObjectURL(blob); |
||||
this.createDownloadAnchor(objectURL, () => { |
||||
URL.revokeObjectURL(objectURL); |
||||
}); |
||||
}); |
||||
|
||||
return download; |
||||
} |
||||
} |
||||
|
||||
export default new AppDownloadManager(); |
||||
File diff suppressed because one or more lines are too long
@ -1,461 +0,0 @@
@@ -1,461 +0,0 @@
|
||||
import { isInDOM } from "./utils"; |
||||
|
||||
let convert = (value: number) => { |
||||
return Math.round(Math.min(Math.max(value, 0), 1) * 255); |
||||
}; |
||||
|
||||
type RLottiePlayerListeners = 'firstFrame' | 'enterFrame'; |
||||
|
||||
export class RLottiePlayer { |
||||
public static reqId = 0; |
||||
|
||||
public reqId = 0; |
||||
public curFrame: number; |
||||
public worker: QueryableWorker; |
||||
public el: HTMLElement; |
||||
public width: number; |
||||
public height: number; |
||||
|
||||
public listeners: Partial<{ |
||||
[k in RLottiePlayerListeners]: (res: any) => void |
||||
}> = {}; |
||||
public listenerResults: Partial<{ |
||||
[k in RLottiePlayerListeners]: any |
||||
}> = {}; |
||||
|
||||
public canvas: HTMLCanvasElement; |
||||
public context: CanvasRenderingContext2D; |
||||
|
||||
public paused = false; |
||||
public direction = 1; |
||||
public speed = 1; |
||||
public autoplay = true; |
||||
|
||||
constructor({el, width, height, worker}: { |
||||
el: HTMLElement, |
||||
width: number, |
||||
height: number, |
||||
worker: QueryableWorker |
||||
}) { |
||||
this.reqId = ++RLottiePlayer['reqId']; |
||||
this.el = el; |
||||
this.width = width; |
||||
this.height = height; |
||||
this.worker = worker; |
||||
} |
||||
|
||||
public addListener(name: RLottiePlayerListeners, callback: (res?: any) => void) { |
||||
if(this.listenerResults.hasOwnProperty(name)) return Promise.resolve(this.listenerResults[name]); |
||||
this.listeners[name] = callback; |
||||
} |
||||
|
||||
public setListenerResult(name: RLottiePlayerListeners, value?: any) { |
||||
this.listenerResults[name] = value; |
||||
if(this.listeners[name]) { |
||||
this.listeners[name](value); |
||||
} |
||||
} |
||||
|
||||
private sendQuery(methodName: string, ...args: any[]) { |
||||
this.worker.sendQuery(methodName, this.reqId, ...args); |
||||
} |
||||
|
||||
public loadFromData(json: any) { |
||||
this.sendQuery('loadFromData', json, this.width, this.height, { |
||||
paused: this.paused, |
||||
direction: this.direction, |
||||
speed: this.speed |
||||
}); |
||||
} |
||||
|
||||
public play() { |
||||
this.sendQuery('play'); |
||||
this.paused = false; |
||||
} |
||||
|
||||
public pause() { |
||||
this.sendQuery('pause'); |
||||
this.paused = true; |
||||
} |
||||
|
||||
public stop() { |
||||
this.sendQuery('stop'); |
||||
this.paused = true; |
||||
} |
||||
|
||||
public restart() { |
||||
this.sendQuery('restart'); |
||||
} |
||||
|
||||
public setSpeed(speed: number) { |
||||
this.sendQuery('setSpeed', speed); |
||||
} |
||||
|
||||
public setDirection(direction: number) { |
||||
this.direction = direction; |
||||
this.sendQuery('setDirection', direction); |
||||
} |
||||
|
||||
public destroy() { |
||||
lottieLoader.onDestroy(this.reqId); |
||||
this.sendQuery('destroy'); |
||||
} |
||||
|
||||
private attachPlayer() { |
||||
this.canvas = document.createElement('canvas'); |
||||
this.canvas.width = this.width; |
||||
this.canvas.height = this.height; |
||||
|
||||
//this.el.appendChild(this.canvas);
|
||||
this.context = this.canvas.getContext('2d'); |
||||
} |
||||
|
||||
public renderFrame(frame: Uint8ClampedArray, frameNo: number) { |
||||
if(!this.listenerResults.hasOwnProperty('firstFrame')) { |
||||
this.attachPlayer(); |
||||
this.el.appendChild(this.canvas); |
||||
|
||||
this.setListenerResult('firstFrame'); |
||||
} |
||||
|
||||
this.context.putImageData(new ImageData(frame, this.width, this.height), 0, 0); |
||||
this.setListenerResult('enterFrame', frameNo); |
||||
} |
||||
} |
||||
|
||||
class QueryableWorker { |
||||
private worker: Worker; |
||||
private listeners: {[name: string]: (...args: any[]) => void} = {}; |
||||
|
||||
constructor(url: string, private defaultListener: (data: any) => void = () => {}, onError?: (error: any) => void) { |
||||
this.worker = new Worker(url); |
||||
if(onError) { |
||||
this.worker.onerror = onError; |
||||
} |
||||
|
||||
this.worker.onmessage = (event) => { |
||||
if(event.data instanceof Object && |
||||
event.data.hasOwnProperty('queryMethodListener') && |
||||
event.data.hasOwnProperty('queryMethodArguments')) { |
||||
this.listeners[event.data.queryMethodListener].apply(this, event.data.queryMethodArguments); |
||||
} else { |
||||
this.defaultListener.call(this, event.data); |
||||
} |
||||
} |
||||
} |
||||
|
||||
public postMessage(message: any) { |
||||
this.worker.postMessage(message); |
||||
} |
||||
|
||||
public terminate() { |
||||
this.worker.terminate(); |
||||
} |
||||
|
||||
public addListener(name: string, listener: (...args: any[]) => void) { |
||||
this.listeners[name] = listener; |
||||
} |
||||
|
||||
public removeListener(name: string) { |
||||
delete this.listeners[name]; |
||||
} |
||||
|
||||
public sendQuery(queryMethod: string, ...args: any[]) { |
||||
this.worker.postMessage({ |
||||
'queryMethod': queryMethod, |
||||
'queryMethodArguments': args |
||||
}); |
||||
} |
||||
} |
||||
|
||||
class LottieLoader { |
||||
public loadPromise: Promise<void>; |
||||
public loaded = false; |
||||
|
||||
private static COLORREPLACEMENTS = [ |
||||
[ |
||||
[0xf77e41, 0xca907a], |
||||
[0xffb139, 0xedc5a5], |
||||
[0xffd140, 0xf7e3c3], |
||||
[0xffdf79, 0xfbefd6], |
||||
], |
||||
|
||||
[ |
||||
[0xf77e41, 0xaa7c60], |
||||
[0xffb139, 0xc8a987], |
||||
[0xffd140, 0xddc89f], |
||||
[0xffdf79, 0xe6d6b2], |
||||
], |
||||
|
||||
[ |
||||
[0xf77e41, 0x8c6148], |
||||
[0xffb139, 0xad8562], |
||||
[0xffd140, 0xc49e76], |
||||
[0xffdf79, 0xd4b188], |
||||
], |
||||
|
||||
[ |
||||
[0xf77e41, 0x6e3c2c], |
||||
[0xffb139, 0x925a34], |
||||
[0xffd140, 0xa16e46], |
||||
[0xffdf79, 0xac7a52], |
||||
] |
||||
]; |
||||
|
||||
private workersLimit = 4; |
||||
private players: {[reqId: number]: RLottiePlayer} = {}; |
||||
private byGroups: {[group: string]: RLottiePlayer[]} = {}; |
||||
|
||||
private workers: QueryableWorker[] = []; |
||||
private curWorkerNum = 0; |
||||
|
||||
private observer: IntersectionObserver; |
||||
private visible: Set<RLottiePlayer> = new Set(); |
||||
|
||||
private debug = true; |
||||
|
||||
constructor() { |
||||
this.observer = new IntersectionObserver((entries) => { |
||||
for(const entry of entries) { |
||||
const target = entry.target; |
||||
|
||||
for(const group in this.byGroups) { |
||||
const player = this.byGroups[group].find(p => p.el == target); |
||||
if(player) { |
||||
if(entry.isIntersecting) { |
||||
this.visible.add(player); |
||||
|
||||
if(player.paused) { |
||||
player.play(); |
||||
} |
||||
} else { |
||||
this.visible.delete(player); |
||||
|
||||
if(!player.paused) { |
||||
player.pause(); |
||||
} |
||||
} |
||||
|
||||
break; |
||||
} |
||||
} |
||||
} |
||||
}); |
||||
} |
||||
|
||||
public loadLottieWorkers() { |
||||
if(this.loadPromise) return this.loadPromise; |
||||
|
||||
const onFrame = this.onFrame.bind(this); |
||||
|
||||
return this.loadPromise = new Promise((resolve, reject) => { |
||||
let remain = this.workersLimit; |
||||
for(let i = 0; i < this.workersLimit; ++i) { |
||||
const worker = this.workers[i] = new QueryableWorker('rlottie.worker.js'); |
||||
|
||||
worker.addListener('ready', () => { |
||||
console.log('worker #' + i + ' ready'); |
||||
|
||||
worker.addListener('frame', onFrame); |
||||
|
||||
--remain; |
||||
if(!remain) { |
||||
console.log('workers ready'); |
||||
resolve(); |
||||
this.loaded = true; |
||||
} |
||||
}); |
||||
} |
||||
}); |
||||
} |
||||
|
||||
private applyReplacements(object: any, toneIndex: number) { |
||||
const replacements = LottieLoader.COLORREPLACEMENTS[toneIndex - 2]; |
||||
|
||||
const iterateIt = (it: any) => { |
||||
for(let smth of it) { |
||||
switch(smth.ty) { |
||||
case 'st': |
||||
case 'fl': |
||||
let k = smth.c.k; |
||||
let color = convert(k[2]) | (convert(k[1]) << 8) | (convert(k[0]) << 16); |
||||
|
||||
let foundReplacement = replacements.find(p => p[0] == color); |
||||
if(foundReplacement) { |
||||
k[0] = ((foundReplacement[1] >> 16) & 255) / 255; |
||||
k[1] = ((foundReplacement[1] >> 8) & 255) / 255; |
||||
k[2] = (foundReplacement[1] & 255) / 255; |
||||
} |
||||
|
||||
//console.log('foundReplacement!', foundReplacement, color.toString(16), k);
|
||||
break; |
||||
} |
||||
|
||||
if(smth.hasOwnProperty('it')) { |
||||
iterateIt(smth.it); |
||||
} |
||||
} |
||||
}; |
||||
|
||||
for(let layer of object.layers) { |
||||
if(!layer.shapes) continue; |
||||
|
||||
for(let shape of layer.shapes) { |
||||
iterateIt(shape.it); |
||||
} |
||||
} |
||||
} |
||||
|
||||
public async loadAnimationWorker(params: { |
||||
container: HTMLElement, |
||||
autoplay?: boolean, |
||||
animationData: any, |
||||
loop?: boolean, |
||||
renderer?: string, |
||||
width?: number, |
||||
height?: number |
||||
}, group = '', toneIndex = -1) { |
||||
//params.autoplay = false;
|
||||
|
||||
if(toneIndex >= 1 && toneIndex <= 5) { |
||||
this.applyReplacements(params.animationData, toneIndex); |
||||
} |
||||
|
||||
if(!this.loaded) { |
||||
await this.loadLottieWorkers(); |
||||
} |
||||
|
||||
this.observer.observe(params.container); |
||||
|
||||
const width = params.width || parseInt(params.container.style.width); |
||||
const height = params.height || parseInt(params.container.style.height); |
||||
|
||||
const player = this.initPlayer(params.container, params.animationData, width, height); |
||||
for(let i in params) { |
||||
// @ts-ignore
|
||||
if(player.hasOwnProperty(i)) { |
||||
// @ts-ignore
|
||||
player[i] = params[i]; |
||||
} |
||||
} |
||||
|
||||
(this.byGroups[group] ?? (this.byGroups[group] = [])).push(player); |
||||
|
||||
return player; |
||||
} |
||||
|
||||
public checkAnimations(blurred?: boolean, group?: string, destroy = false) { |
||||
const groups = group && false ? [group] : Object.keys(this.byGroups); |
||||
|
||||
if(group && !this.byGroups[group]) { |
||||
console.warn('no animation group:', group); |
||||
this.byGroups[group] = []; |
||||
//return;
|
||||
} |
||||
|
||||
for(const group of groups) { |
||||
const animations = this.byGroups[group]; |
||||
|
||||
const length = animations.length; |
||||
for(let i = length - 1; i >= 0; --i) { |
||||
const player = animations[i]; |
||||
|
||||
if(destroy || (!isInDOM(player.el) && player.listenerResults.hasOwnProperty('firstFrame'))) { |
||||
//console.log('destroy animation');
|
||||
player.destroy(); |
||||
continue; |
||||
} |
||||
|
||||
if(blurred) { |
||||
if(!player.paused) { |
||||
this.debug && console.log('pause animation', player); |
||||
player.pause(); |
||||
} |
||||
} else if(player.paused && this.visible.has(player)) { |
||||
this.debug && console.log('play animation', player); |
||||
player.play(); |
||||
} |
||||
|
||||
/* if(canvas) { |
||||
let c = container.firstElementChild as HTMLCanvasElement; |
||||
if(!c) { |
||||
console.warn('no canvas element for check!', container, animations[i]); |
||||
continue; |
||||
} |
||||
|
||||
if(!c.height && !c.width && isElementInViewport(container)) { |
||||
//console.log('lottie need resize');
|
||||
animation.resize(); |
||||
} |
||||
} */ |
||||
|
||||
//if(!autoplay) continue;
|
||||
|
||||
/* if(blurred || !isElementInViewport(container)) { |
||||
if(!paused) { |
||||
this.debug && console.log('pause animation', isElementInViewport(container), container); |
||||
animation.pause(); |
||||
animations[i].paused = true; |
||||
} |
||||
} else if(paused) { |
||||
this.debug && console.log('play animation', container); |
||||
animation.play(); |
||||
animations[i].paused = false; |
||||
} */ |
||||
} |
||||
} |
||||
} |
||||
|
||||
private onFrame(reqId: number, frameNo: number, frame: Uint8ClampedArray, width: number, height: number) { |
||||
const rlPlayer = this.players[reqId]; |
||||
if(!rlPlayer) { |
||||
this.debug && console.warn('onFrame on destroyed player:', reqId, frameNo); |
||||
return; |
||||
} |
||||
|
||||
rlPlayer.renderFrame(frame, frameNo); |
||||
} |
||||
|
||||
public onDestroy(reqId: number) { |
||||
let player = this.players[reqId]; |
||||
for(let group in this.byGroups) { |
||||
this.byGroups[group].findAndSplice(p => p == player); |
||||
} |
||||
|
||||
delete this.players[player.reqId]; |
||||
this.observer.unobserve(player.el); |
||||
this.visible.delete(player); |
||||
} |
||||
|
||||
public destroyWorkers() { |
||||
this.workers.forEach((worker, idx) => { |
||||
worker.terminate(); |
||||
console.log('worker #' + idx + ' terminated'); |
||||
}); |
||||
|
||||
console.log('workers destroyed'); |
||||
this.workers.length = 0; |
||||
} |
||||
|
||||
private initPlayer(el: HTMLElement, json: any, width: number, height: number) { |
||||
const rlPlayer = new RLottiePlayer({ |
||||
el, |
||||
width, |
||||
height, |
||||
worker: this.workers[this.curWorkerNum++] |
||||
}); |
||||
|
||||
this.players[rlPlayer.reqId] = rlPlayer; |
||||
if(this.curWorkerNum >= this.workers.length) { |
||||
this.curWorkerNum = 0; |
||||
} |
||||
|
||||
rlPlayer.loadFromData(json); |
||||
|
||||
return rlPlayer; |
||||
} |
||||
} |
||||
|
||||
const lottieLoader = new LottieLoader(); |
||||
(window as any).LottieLoader = lottieLoader; |
||||
export default lottieLoader; |
||||
@ -1,24 +0,0 @@
@@ -1,24 +0,0 @@
|
||||
import insideWorker from 'offscreen-canvas/inside-worker'; |
||||
|
||||
console.log(self); |
||||
|
||||
import { Webp } from "./libwebp.js"; |
||||
let webp = new Webp(); |
||||
webp.Module.doNotCaptureKeyboard = true; |
||||
webp.Module.noImageDecoding = true; |
||||
|
||||
let canvas = null; |
||||
|
||||
const worker = insideWorker(e => { |
||||
if(e.data.canvas) { |
||||
canvas = e.data.canvas; |
||||
console.log(e, canvas); |
||||
webp.setCanvas(canvas); |
||||
//webp.webpToSdl()
|
||||
// Draw on the canvas
|
||||
} else if(e.data.message == 'webpBytes') { |
||||
webp.webpToSdl(e.data.bytes, e.data.bytes.length); |
||||
//console.log(canvas);
|
||||
self.postMessage({converted: true}); |
||||
} |
||||
}); |
||||
Loading…
Reference in new issue