@scoova/mgl 1.0.0

package/src/source/video_source.test.ts

@@ -0,0 +1,124 @@
+import {VideoSource} from './video_source';
+import {extend} from '../util/util';
+import {getMockDispatcher} from '../util/test/util';
+
+import type {Coordinates} from './image_source';
+import {Tile} from './tile';
+import {OverscaledTileID} from './tile_id';
+import {Evented} from '../util/evented';
+import {Transform} from '../geo/transform';
+import {VertexBuffer} from '../gl/vertex_buffer';
+import {SegmentVector} from '../data/segment';
+
+class StubMap extends Evented {
+    transform: Transform;
+    style: any;
+    painter: any;
+
+    constructor() {
+        super();
+        this.transform = new Transform();
+        this.style = {};
+        this.painter = {
+            context: {
+                gl: {
+                    texSubImage2D: () => {}
+                }
+            }
+        };
+    }
+}
+
+function createSource(options) {
+    const c = options && options.video || window.document.createElement('video');
+
+    options = extend({coordinates: [[0, 0], [1, 0], [1, 1], [0, 1]]}, options);
+
+    const source = new VideoSource('id', options, getMockDispatcher(), options.eventedParent);
+
+    source.video = c;
+    return source;
+}
+
+describe('VideoSource', () => {
+    // Attribution File:Volcano Lava Sample.webm: U.S. Geological Survey (USGS), Public domain, via Wikimedia Commons
+    const source = createSource({
+        type: 'video',
+        urls: ['cropped.mp4', 'https://upload.wikimedia.org/wikipedia/commons/2/22/Volcano_Lava_Sample.webm'],
+        coordinates: [
+            [-76.54, 39.18],
+            [-76.52, 39.18],
+            [-76.52, 39.17],
+            [-76.54, 39.17]
+        ]
+    });
+
+    test('constructor', () => {
+        expect(source.minzoom).toBe(0);
+        expect(source.maxzoom).toBe(22);
+        expect(source.tileSize).toBe(512);
+    });
+
+    test('sets coordinates', () => {
+        const newCoordinates = [[0, 0], [-1, 0], [-1, -1], [0, -1]] as Coordinates;
+        source.setCoordinates(newCoordinates);
+        const serialized = source.serialize();
+
+        expect(serialized.coordinates).toEqual(newCoordinates);
+
+    });
+
+    //test video retrieval by first supplying the video element directly
+    test('gets video', () => {
+        const el = window.document.createElement('video');
+        // Attribution File:Volcano Lava Sample.webm: U.S. Geological Survey (USGS), Public domain, via Wikimedia Commons
+        const source = createSource({
+            type: 'video',
+            video: el,
+            urls: ['cropped.mp4', 'https://upload.wikimedia.org/wikipedia/commons/2/22/Volcano_Lava_Sample.webm'],
+            coordinates: [
+                [-76.54, 39.18],
+                [-76.52, 39.18],
+                [-76.52, 39.17],
+                [-76.54, 39.17]
+            ]
+        });
+
+        expect(source.getVideo()).toBe(el);
+    });
+
+    test('fires idle event on prepare call when there is at least one not loaded tile', () => new Promise<void>(done => {
+        const source = createSource({
+            type: 'video',
+            urls: [],
+            video: {
+                readyState: 2,
+                play: () => {}
+            },
+            coordinates: [
+                [-76.54, 39.18],
+                [-76.52, 39.18],
+                [-76.52, 39.17],
+                [-76.54, 39.17]
+            ]
+        });
+        const tile = new Tile(new OverscaledTileID(1, 0, 1, 0, 0), 512);
+        source.on('data', (e) => {
+            if (e.dataType === 'source' && e.sourceDataType === 'idle') {
+                expect(tile.state).toBe('loaded');
+                done();
+            }
+        });
+        source.onAdd(new StubMap() as any);
+
+        source.tiles[String(tile.tileID.wrap)] = tile;
+        // assign dummies directly so we don't need to stub the gl things
+        source.boundsBuffer = {} as VertexBuffer;
+        source.boundsSegments = {} as SegmentVector;
+        source.texture = {
+            update: () => {},
+            bind: () => {}
+        } as any;
+        source.prepare();
+    }));
+});

package/src/source/video_source.ts

@@ -0,0 +1,204 @@
+import {getVideo} from '../util/ajax';
+import {ResourceType} from '../util/request_manager';
+
+import {ImageSource} from './image_source';
+import rasterBoundsAttributes from '../data/raster_bounds_attributes';
+import {SegmentVector} from '../data/segment';
+import {Texture} from '../render/texture';
+import {Event, ErrorEvent} from '../util/evented';
+import {ValidationError} from '@maplibre/maplibre-gl-style-spec';
+
+import type {Map} from '../ui/map';
+import type {Dispatcher} from '../util/dispatcher';
+import type {Evented} from '../util/evented';
+import type {VideoSourceSpecification} from '@maplibre/maplibre-gl-style-spec';
+
+/**
+ * A data source containing video.
+ * (See the [Style Specification](https://maplibre.org/maplibre-style-spec/#sources-video) for detailed documentation of options.)
+ *
+ * @group Sources
+ *
+ * @example
+ * ```ts
+ * // add to map
+ * map.addSource('some id', {
+ *    type: 'video',
+ *    url: [
+ *        'https://www.mapbox.com/blog/assets/baltimore-smoke.mp4',
+ *        'https://www.mapbox.com/blog/assets/baltimore-smoke.webm'
+ *    ],
+ *    coordinates: [
+ *        [-76.54, 39.18],
+ *        [-76.52, 39.18],
+ *        [-76.52, 39.17],
+ *        [-76.54, 39.17]
+ *    ]
+ * });
+ *
+ * // update
+ * let mySource = map.getSource('some id');
+ * mySource.setCoordinates([
+ *     [-76.54335737228394, 39.18579907229748],
+ *     [-76.52803659439087, 39.1838364847587],
+ *     [-76.5295386314392, 39.17683392507606],
+ *     [-76.54520273208618, 39.17876344106642]
+ * ]);
+ *
+ * map.removeSource('some id');  // remove
+ * ```
+ * @see [Add a video](https://maplibre.org/maplibre-gl-js/docs/examples/video-on-a-map/)
+ *
+ * Note that when rendered as a raster layer, the layer's `raster-fade-duration` property will cause the video to fade in.
+ * This happens when playback is started, paused and resumed, or when the video's coordinates are updated. To avoid this behavior,
+ * set the layer's `raster-fade-duration` property to `0`.
+ */
+export class VideoSource extends ImageSource {
+    options: VideoSourceSpecification;
+    urls: Array<string>;
+    video: HTMLVideoElement;
+    roundZoom: boolean;
+
+    constructor(id: string, options: VideoSourceSpecification, dispatcher: Dispatcher, eventedParent: Evented) {
+        super(id, options, dispatcher, eventedParent);
+        this.roundZoom = true;
+        this.type = 'video';
+        this.options = options;
+    }
+
+    async load() {
+        this._loaded = false;
+        const options = this.options;
+
+        this.urls = [];
+        for (const url of options.urls) {
+            this.urls.push(this.map._requestManager.transformRequest(url, ResourceType.Source).url);
+        }
+        try {
+            const video = await getVideo(this.urls);
+            this._loaded = true;
+            if (!video) {
+                return;
+            }
+            this.video = video;
+            this.video.loop = true;
+
+            // Start repainting when video starts playing. hasTransition() will then return
+            // true to trigger additional frames as long as the videos continues playing.
+            this.video.addEventListener('playing', () => {
+                this.map.triggerRepaint();
+            });
+
+            if (this.map) {
+                this.video.play();
+            }
+
+            this._finishLoading();
+        } catch (err) {
+            this.fire(new ErrorEvent(err));
+        }
+    }
+
+    /**
+     * Pauses the video.
+     */
+    pause() {
+        if (this.video) {
+            this.video.pause();
+        }
+    }
+
+    /**
+     * Plays the video.
+     */
+    play() {
+        if (this.video) {
+            this.video.play();
+        }
+    }
+
+    /**
+     * Sets playback to a timestamp, in seconds.
+     */
+    seek(seconds: number) {
+        if (this.video) {
+            const seekableRange = this.video.seekable;
+            if (seconds < seekableRange.start(0) || seconds > seekableRange.end(0)) {
+                this.fire(new ErrorEvent(new ValidationError(`sources.${this.id}`, null, `Playback for this video can be set only between the ${seekableRange.start(0)} and ${seekableRange.end(0)}-second mark.`)));
+            } else this.video.currentTime = seconds;
+        }
+    }
+
+    /**
+     * Returns the HTML `video` element.
+     *
+     * @returns The HTML `video` element.
+     */
+    getVideo(): HTMLVideoElement {
+        return this.video;
+    }
+
+    onAdd(map: Map) {
+        if (this.map) return;
+        this.map = map;
+        this.load();
+        if (this.video) {
+            this.video.play();
+            this.setCoordinates(this.coordinates);
+        }
+    }
+
+    /**
+     * Sets the video's coordinates and re-renders the map.
+     */
+    prepare(): this {
+        if (Object.keys(this.tiles).length === 0 || this.video.readyState < 2) {
+            return; // not enough data for current position
+        }
+
+        const context = this.map.painter.context;
+        const gl = context.gl;
+
+        if (!this.boundsBuffer) {
+            this.boundsBuffer = context.createVertexBuffer(this._boundsArray, rasterBoundsAttributes.members);
+        }
+
+        if (!this.boundsSegments) {
+            this.boundsSegments = SegmentVector.simpleSegment(0, 0, 4, 2);
+        }
+
+        if (!this.texture) {
+            this.texture = new Texture(context, this.video, gl.RGBA);
+            this.texture.bind(gl.LINEAR, gl.CLAMP_TO_EDGE);
+        } else if (!this.video.paused) {
+            this.texture.bind(gl.LINEAR, gl.CLAMP_TO_EDGE);
+            gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, gl.RGBA, gl.UNSIGNED_BYTE, this.video);
+        }
+
+        let newTilesLoaded = false;
+        for (const w in this.tiles) {
+            const tile = this.tiles[w];
+            if (tile.state !== 'loaded') {
+                tile.state = 'loaded';
+                tile.texture = this.texture;
+                newTilesLoaded = true;
+            }
+        }
+
+        if (newTilesLoaded) {
+            this.fire(new Event('data', {dataType: 'source', sourceDataType: 'idle', sourceId: this.id}));
+        }
+    }
+
+    serialize(): VideoSourceSpecification {
+        return {
+            type: 'video',
+            urls: this.urls,
+            coordinates: this.coordinates
+        };
+    }
+
+    hasTransition() {
+        return this.video && !this.video.paused;
+    }
+}

package/src/source/worker.test.ts

@@ -0,0 +1,233 @@
+import {fakeServer} from 'nise';
+import Worker from './worker';
+import {LayerSpecification} from '@maplibre/maplibre-gl-style-spec';
+import {WorkerGlobalScopeInterface} from '../util/web_worker';
+import {CanonicalTileID, OverscaledTileID} from './tile_id';
+import {WorkerSource, WorkerTileParameters, WorkerTileResult} from './worker_source';
+import {rtlWorkerPlugin} from './rtl_text_plugin_worker';
+import {ActorTarget, IActor} from '../util/actor';
+import {PluginState} from './rtl_text_plugin_status';
+import {MessageType} from '../util/actor_messages';
+
+class WorkerSourceMock implements WorkerSource {
+    availableImages: string[];
+    constructor(private actor: IActor) {}
+    loadTile(_: WorkerTileParameters): Promise<WorkerTileResult> {
+        return this.actor.sendAsync({type: MessageType.loadTile, data: {} as any}, new AbortController());
+    }
+    reloadTile(_: WorkerTileParameters): Promise<WorkerTileResult> {
+        throw new Error('Method not implemented.');
+    }
+    abortTile(_: WorkerTileParameters): Promise<void> {
+        throw new Error('Method not implemented.');
+    }
+    removeTile(_: WorkerTileParameters): Promise<void> {
+        throw new Error('Method not implemented.');
+    }
+}
+
+describe('Worker RTLTextPlugin', () => {
+    let worker: Worker;
+    let _self: WorkerGlobalScopeInterface & ActorTarget;
+
+    beforeEach(() => {
+        _self = {
+            addEventListener() {},
+            importScripts() {}
+        } as any;
+        worker = new Worker(_self);
+        global.fetch = null;
+        rtlWorkerPlugin.setMethods({
+            applyArabicShaping: null,
+            processBidirectionalText: null,
+            processStyledBidirectionalText: null
+        });
+        jest.spyOn(rtlWorkerPlugin, 'isParsed').mockImplementation(() => {
+            return false;
+        });
+    });
+
+    test('should not throw and set values in plugin', () => {
+        const rtlTextPlugin = {
+            applyArabicShaping: 'test',
+            processBidirectionalText: 'test',
+            processStyledBidirectionalText: 'test',
+        };
+
+        _self.registerRTLTextPlugin(rtlTextPlugin);
+        expect(rtlWorkerPlugin.applyArabicShaping).toBe('test');
+        expect(rtlWorkerPlugin.processBidirectionalText).toBe('test');
+        expect(rtlWorkerPlugin.processStyledBidirectionalText).toBe('test');
+    });
+
+    test('should throw if already parsed', () => {
+        jest.spyOn(rtlWorkerPlugin, 'isParsed').mockImplementation(() => {
+            return true;
+        });
+
+        const rtlTextPlugin = {
+            applyArabicShaping: jest.fn(),
+            processBidirectionalText: jest.fn(),
+            processStyledBidirectionalText: jest.fn(),
+        };
+
+        expect(() => {
+            _self.registerRTLTextPlugin(rtlTextPlugin);
+        }).toThrow('RTL text plugin already registered.');
+    });
+
+    test('should move RTL plugin from unavailable to deferred', async () => {
+        rtlWorkerPlugin.setState({
+            pluginURL: '',
+            pluginStatus: 'unavailable'
+        }
+        );
+        const mockMessage: PluginState = {
+            pluginURL: 'https://somehost/somescript',
+            pluginStatus: 'deferred'
+        };
+
+        await worker.actor.messageHandlers[MessageType.syncRTLPluginState]('', mockMessage);
+        expect(rtlWorkerPlugin.getRTLTextPluginStatus()).toBe('deferred');
+    });
+
+    test('should download RTL plugin when "loading" message is received', async () => {
+        rtlWorkerPlugin.setState({
+            pluginURL: '',
+            pluginStatus: 'deferred'
+        });
+
+        const mockURL = 'https://somehost/somescript';
+        const mockMessage: PluginState = {
+            pluginURL: mockURL,
+            pluginStatus: 'loading'
+        };
+
+        const importSpy = jest.spyOn(worker.self, 'importScripts').mockImplementation(() => {
+            // after importing isParse() to return true
+            jest.spyOn(rtlWorkerPlugin, 'isParsed').mockImplementation(() => {
+                return true;
+            });
+        });
+
+        const syncResult: PluginState = await worker.actor.messageHandlers[MessageType.syncRTLPluginState]('', mockMessage) as any;
+        expect(rtlWorkerPlugin.getRTLTextPluginStatus()).toBe('loaded');
+        expect(importSpy).toHaveBeenCalledWith(mockURL);
+
+        expect(syncResult.pluginURL).toBe(mockURL);
+        expect(syncResult.pluginStatus).toBe('loaded');
+    });
+
+    test('should not change RTL plugin status if already parsed', async () => {
+        const originalUrl = 'https://somehost/somescript1';
+        rtlWorkerPlugin.setState({
+            pluginURL: originalUrl,
+            pluginStatus: 'loaded'
+        });
+
+        jest.spyOn(rtlWorkerPlugin, 'isParsed').mockImplementation(() => {
+            return true;
+        });
+        const mockMessage: PluginState = {
+            pluginURL: 'https://somehost/somescript2',
+            pluginStatus: 'loading'
+        };
+
+        const workerResult: PluginState = await worker.actor.messageHandlers[MessageType.syncRTLPluginState]('', mockMessage) as any;
+        expect(rtlWorkerPlugin.getRTLTextPluginStatus()).toBe('loaded');
+        expect(rtlWorkerPlugin.getPluginURL()).toBe(originalUrl);
+
+        expect(workerResult.pluginStatus).toBe('loaded');
+        expect(workerResult.pluginURL).toBe(originalUrl);
+    });
+});
+
+describe('Worker generic testing', () => {
+    let worker: Worker;
+    let _self: WorkerGlobalScopeInterface & ActorTarget;
+
+    beforeEach(() => {
+        _self = {
+            addEventListener() {}
+        } as any;
+        worker = new Worker(_self);
+        global.fetch = null;
+    });
+
+    test('should validate handlers execution in worker for load tile', () => new Promise<void>(done => {
+        const server = fakeServer.create();
+        worker.actor.messageHandlers[MessageType.loadTile]('0', {
+            type: 'vector',
+            source: 'source',
+            uid: '0',
+            tileID: {overscaledZ: 0, wrap: 0, canonical: {x: 0, y: 0, z: 0} as CanonicalTileID} as any as OverscaledTileID,
+            request: {url: '/error'}// Sinon fake server gives 404 responses by default
+        } as WorkerTileParameters).catch((err) => {
+            expect(err).toBeTruthy();
+            server.restore();
+            done();
+        });
+        server.respond();
+    }));
+
+    test('isolates different instances\' data', () => {
+        worker.actor.messageHandlers[MessageType.setLayers]('0', [
+            {id: 'one', type: 'circle'} as LayerSpecification
+        ]);
+
+        worker.actor.messageHandlers[MessageType.setLayers]('1', [
+            {id: 'one', type: 'circle'} as LayerSpecification,
+            {id: 'two', type: 'circle'} as LayerSpecification,
+        ]);
+
+        expect(worker.layerIndexes[0]).not.toBe(worker.layerIndexes[1]);
+    });
+
+    test('worker source messages dispatched to the correct map instance', () => new Promise<void>(done => {
+        const externalSourceName = 'test';
+
+        worker.actor.sendAsync = (message, abortController) => {
+            expect(message.type).toBe(MessageType.loadTile);
+            expect(message.targetMapId).toBe('999');
+            expect(abortController).toBeDefined();
+            done();
+            return Promise.resolve({} as any);
+        };
+
+        _self.registerWorkerSource(externalSourceName, WorkerSourceMock);
+
+        expect(() => {
+            _self.registerWorkerSource(externalSourceName, WorkerSourceMock);
+        }).toThrow(`Worker source with name "${externalSourceName}" already registered.`);
+
+        worker.actor.messageHandlers[MessageType.loadTile]('999', {type: externalSourceName} as WorkerTileParameters);
+    }));
+
+    test('Referrer is set', () => {
+        worker.actor.messageHandlers[MessageType.setReferrer]('fakeId', 'myMap');
+        expect(worker.referrer).toBe('myMap');
+    });
+
+    test('calls callback on error', () => new Promise<void>(done => {
+        const server = fakeServer.create();
+        worker.actor.messageHandlers[MessageType.importScript]('0', '/error').catch((err) => {
+            expect(err).toBeTruthy();
+            server.restore();
+            done();
+        });
+        server.respond();
+    }));
+
+    test('set images', () => {
+        expect(worker.availableImages['0']).toBeUndefined();
+        worker.actor.messageHandlers[MessageType.setImages]('0', ['availableImages']);
+        expect(worker.availableImages['0']).toEqual(['availableImages']);
+    });
+
+    test('clears resources when map is removed', () => {
+        worker.actor.messageHandlers[MessageType.setLayers]('0', []);
+        expect(worker.layerIndexes['0']).toBeDefined();
+        worker.actor.messageHandlers[MessageType.removeMap]('0', undefined);
+        expect(worker.layerIndexes['0']).toBeUndefined();
+    });
+});