Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 | 1x 1x 1x 1x 1x 1x 10x 10x 10x 10x 10x 10x 10x 1x 9x 1x 10x 4x 4x 10x 8x 8x 2x 2x 2x 2x 2x 1x 1x 2x 2x 2x 2x 2x 2x 2x 1x 1x 1x 1x 1x 1x 1x 10x 4x 1x 3x 3x 2x 2x 2x 2x 1x 2x 1x 1x 1x 1x 1x 1x 1x 1x 1x 6x 3x 3x 3x 1x 1x 2x 2x 2x 2x 2x 2x 2x 1x 1x 1x | import { Injectable } from '@angular/core';
import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
import { take } from 'rxjs/operators';
import { stateService } from './state';
import { viewService } from './view';
import { Subscription } from 'rxjs';
/**
* @description Represents an image in the preload queue.
*/
interface QueueItem {
image: string;
onload: (safeUrl: SafeUrl | null) => void;
}
/**
* @description Represents a cached image with its associated safe URL and object URL.
*/
interface ReadyItem {
objturl: string | null;
safeurl: SafeUrl | null;
}
/**
* @description The `preloadService` is responsible for preloading and managing images in a queue.
* It handles caching, URL creation, and ensures images are loaded efficiently, even in offline scenarios.
*/
@Injectable({
providedIn: 'root'
})
export class preloadService {
private _queue: QueueItem[] = [];
private _ready = new Map <string, ReadyItem> ();
private _loading = false;
private _loaded = false;
private _ready_subscription: Subscription | null = null;
/**
* @param sanitizer The Angular `DomSanitizer` for creating safe URLs.
* @param state The `stateService` providing application state and readiness events.
* @param view The `viewService` providing online/offline state and events.
*/
constructor(private sanitizer: DomSanitizer, private state: stateService, private view: viewService) {
if (this.state.IsReady){
this.Start();
}
else {
this._ready_subscription = this.state.OnReady.subscribe(
() => {
this.Start();
});
}
}
/**
* @description Cleans up resources such as object URLs and subscriptions.
*/
OnDestroy() {
for (const _queued of this._ready.values()) {
if (_queued?.objturl) {
URL.revokeObjectURL(_queued.objturl);
}
}
if (this._ready_subscription) {
this._ready_subscription.unsubscribe();
this._ready_subscription = null;
}
}
/**
* @description Initializes the image loading process.
*/
private Start(){
this._loaded = true;
console.info("[PRELOAD] Loading images in background..")
this._LoadImage();
}
/**
* @param url The URL of the image to recover.
* @returns A `SafeUrl` if the image is ready, or `null` otherwise.
*/
Recover(url: string): SafeUrl | null{
const _queued = this._ready.get(url);
if (_queued){
return _queued.safeurl;
}
return null; // not loaded yet
}
/**
* @description Adds an image to the preload queue and starts loading if conditions are met.
* @param url The URL of the image to be preloaded.
* @param onload Callback invoked when the image is loaded.
*/
Enqueue(url: string, onload: (safeUrl: SafeUrl | null) => void) {
const _queued = this._ready.get(url);
Iif (_queued){
Iif (onload){
onload(_queued.safeurl);
}
}
const _included = this._queue.some(_queued => {
return _queued.image == url;
});
if (!_included){
this._queue.push({ image: url, onload: onload });
if (this._loaded && !this._loading) {
this._LoadImage();
}
}
}
/**
* @description Adds a blob to the ready map, creating safe and object URLs.
* @param url The image URL.
* @param blob The image blob.
* @returns A `SafeUrl` for the image.
*/
private _addToReady(url: string, blob: Blob): SafeUrl | null {
let _objturl = null;
let _safeurl = null;
_objturl = URL.createObjectURL(blob);
if (_objturl){
_safeurl = this.sanitizer.bypassSecurityTrustUrl(_objturl);
}
this._ready.set(url, {
objturl: _objturl,
safeurl: _safeurl
});
return _safeurl;
}
private _cachewarn = false;
/**
* @description Caches an image, either by fetching it or loading it from an existing cache.
* @param _url The URL of the image.
* @returns A promise that resolves to a `SafeUrl`, or `null` if the operation fails.
*/
private async _addToCache(_url: string): Promise<SafeUrl | null> {
if (/^data:image\/.*;base64,/.test(_url)){
return _url; // this is a base64 image
}
const _cachesearh = _url.startsWith('/assets') ? 'assets:assets:cache' : 'data:images:cache';
const _keylist = await caches.keys();
if (_keylist){
let _cachenam = null;
for (const _key of _keylist) {
if (_key.indexOf(_cachesearh) != -1) {
_cachenam = _key;
}
}
if (!_cachenam){
if (!this._cachewarn){
console.warn("[PRELOAD] Images cache not found!")
this._cachewarn = true; // notify only once
}
return false;
}
const _opencache = await caches.open(_cachenam);
const _cachedres = await _opencache.match(_url, { ignoreMethod: true, ignoreVary: true });
if (_cachedres?.ok) {
const blob = await _cachedres.blob();
return this._addToReady(_url, blob);
}
const response = await fetch(_url);
Iif (response.ok) {
await _opencache.put(_url, response.clone());
const blob = await response.blob();
return this._addToReady(_url, blob);
}
}
return null;
}
/**
* @description Processes the preload queue, ensuring images are loaded sequentially.
*/
private _LoadImage(): void {
if (this._queue.length === 0) {
this._loading = false;
return;
}
if (this.view.IsOnline == false){
this.view.OnOnline.pipe(take(1)).subscribe(
() => {
this._LoadImage(); // load next image (when online)
});
}
else {
this._loading = true;
const _queued = this._queue[0];
if (_queued){
const _image = _queued.image;
const _ready = this._ready.get(_image);
Iif (_ready){
Iif (_queued.onload){
_queued.onload(_ready.safeurl);
}
this._queue.shift(); // remove from queued
this._LoadImage(); // load next image
}
else {
this._addToCache(_image).then(
safeurl => {
Iif (safeurl){
Iif (_queued.onload){
_queued.onload(safeurl);
}
}
this._queue.shift(); // remove from queued
this._LoadImage(); // load next image
});
}
}
}
}
}
|