VladPolskiy/leaflet
1
0
Fork 0
mirror of https://github.com/Leaflet/Leaflet.git synced 2025-07-25 01:32:21 +00:00
Code Issues Packages Projects Releases 1 Wiki Activity

Fix video control / seek bar usage in safari (#9641)

Browse Source
This commit is contained in:
Florian Bischof
2025-04-21 07:58:36 +02:00
committed by GitHub
parent 90095bc810
commit 93d9dafeda
2 changed files with 57 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
spec/suites/layer/VideoOverlaySpec.js
View File

@ -1,6 +1,7 @@
import {expect} from 'chai';
import {LatLngBounds, Map, VideoOverlay} from 'leaflet';
import {createContainer, removeMapContainer} from '../SpecHelper.js';
import Hand from 'prosthetic-hand';
describe('VideoOverlay', () => {
let container, map;
@ -9,7 +10,7 @@ describe('VideoOverlay', () => {
beforeEach(() => {
container = container = createContainer();
map = new Map(container);
map.setView([55.8, 37.6], 6); // view needs to be set so when layer is added it is initilized
map.setView([20, -115], 4); // view needs to be set so when layer is added it is initilized
});
afterEach(() => {
@ -29,4 +30,52 @@ describe('VideoOverlay', () => {
expect(map.hasLayer(videoOverlay)).to.be.true;
});
it('drags the map while mousemove on video', (done) => {
const videoUrls = [
'https://www.mapbox.com/bites/00188/patricia_nasa.webm',
'https://www.mapbox.com/bites/00188/patricia_nasa.mp4'
];
const videoOverlay = new VideoOverlay(videoUrls, videoBounds, {interactive: true}).addTo(map);
(videoOverlay.getElement()).controls = true;
expect(map.hasLayer(videoOverlay)).to.be.true;
const hand = new Hand({
timing: 'fastframe',
onStop() {
expect(map.getCenter()).nearLatLng([19.973348786110613, -114.96093750000001], 0.03);
done();
}});
const mouse = hand.growFinger('mouse');
mouse.moveTo(200, 200, 100)
.down().moveBy(50, 50, 10).up();
});
it('don\'t drags the map if video has enabled controls', (done) => {
const videoUrls = [
'https://www.mapbox.com/bites/00188/patricia_nasa.webm',
'https://www.mapbox.com/bites/00188/patricia_nasa.mp4'
];
const videoOverlay = new VideoOverlay(videoUrls, videoBounds, {interactive: true}).addTo(map);
(videoOverlay.getElement()).controls = true;
expect(map.hasLayer(videoOverlay)).to.be.true;
setTimeout(() => {
const center = map.getCenter();
const hand = new Hand({
timing: 'fastframe',
onStop() {
expect(map.getCenter()).nearLatLng(center, 0.03);
done();
}});
const mouse = hand.growFinger('mouse');
mouse.moveTo(200, 200, 10)
.down().moveBy(50, 50, 10).up();
}, 100);
});
});

9
src/layer/VideoOverlay.js
View File

@ -1,5 +1,6 @@
import {ImageOverlay} from './ImageOverlay.js';
import * as DomUtil from '../dom/DomUtil.js';
import * as DomEvent from '../dom/DomEvent.js';
import * as Util from '../core/Util.js';
/*
@ -60,8 +61,12 @@ export const VideoOverlay = ImageOverlay.extend({
if (this._zoomAnimated) { vid.classList.add('leaflet-zoom-animated'); }
if (this.options.className) { vid.classList.add(...Util.splitWords(this.options.className)); }
vid.onselectstart = Util.falseFn;
vid.onmousemove = Util.falseFn;
DomEvent.on(vid, 'mousedown', (e) => {
if (vid.controls) {
// Prevent the map from moving when the video or the seekbar is moved
DomEvent.stopPropagation(e);
}
});
// @event load: Event
// Fired when the video has finished loading the first frame