1
0
mirror of https://github.com/webslides/WebSlides.git synced 2025-08-26 14:34:27 +02:00

Making video plugin a tad more generic

Fixes #122
This commit is contained in:
Antonio Laguna
2019-02-19 19:32:57 +01:00
parent 9dc223912e
commit b8b7211f4f
5 changed files with 19 additions and 19 deletions

View File

@@ -19,7 +19,7 @@ const PLUGINS = {
'nav': Plugins.Navigation, 'nav': Plugins.Navigation,
'scroll': Plugins.Scroll, 'scroll': Plugins.Scroll,
'touch': Plugins.Touch, 'touch': Plugins.Touch,
'video': Plugins.Video, 'media': Plugins.Media,
'youtube': Plugins.YouTube, 'youtube': Plugins.YouTube,
'zoom': Plugins.Zoom 'zoom': Plugins.Zoom
}; };

View File

@@ -5,7 +5,7 @@ import {default as Slide, Events as SlideEvents} from '../modules/slide';
* Video plugin. Video plugin that allows to autoplay videos once the slide gets * Video plugin. Video plugin that allows to autoplay videos once the slide gets
* active. * active.
*/ */
export default class Video { export default class Media {
/** /**
* @param {WebSlides} wsInstance The WebSlides instance. * @param {WebSlides} wsInstance The WebSlides instance.
* @constructor * @constructor
@@ -17,24 +17,24 @@ export default class Video {
*/ */
this.ws_ = wsInstance; this.ws_ = wsInstance;
const videos = DOM.toArray(this.ws_.el.querySelectorAll('video')); const medias = DOM.toArray(this.ws_.el.querySelectorAll('video,audio'));
if (videos.length) { if (medias.length) {
videos.forEach(video => { medias.forEach(media => {
if (!video.hasAttribute('autoplay')) { if (!media.hasAttribute('autoplay')) {
return; return;
} }
video.removeAttribute('autoplay'); media.removeAttribute('autoplay');
video.pause(); media.pause();
video.currentTime = 0; media.currentTime = 0;
const {i} = Slide.getSectionFromEl(video); const {i} = Slide.getSectionFromEl(media);
const slide = wsInstance.slides[i - 1]; const slide = wsInstance.slides[i - 1];
slide.video = video; slide.media = media;
slide.el.addEventListener(SlideEvents.ENABLE, Video.onSectionEnabled); slide.el.addEventListener(SlideEvents.ENABLE, Media.onSectionEnabled);
slide.el.addEventListener(SlideEvents.DISABLE, Video.onSectionDisabled); slide.el.addEventListener(SlideEvents.DISABLE, Media.onSectionDisabled);
}); });
} }
} }
@@ -44,7 +44,7 @@ export default class Video {
* @param {CustomEvent} event * @param {CustomEvent} event
*/ */
static onSectionEnabled(event) { static onSectionEnabled(event) {
event.detail.slide.video.play(); event.detail.slide.media.play();
} }
/** /**
@@ -52,6 +52,6 @@ export default class Video {
* @param {CustomEvent} event * @param {CustomEvent} event
*/ */
static onSectionDisabled(event) { static onSectionDisabled(event) {
event.detail.slide.video.pause(); event.detail.slide.media.pause();
} }
} }

View File

@@ -6,7 +6,7 @@ import Keyboard from './keyboard';
import Navigation from './navigation'; import Navigation from './navigation';
import Scroll from './scroll'; import Scroll from './scroll';
import Touch from './touch'; import Touch from './touch';
import Video from './video'; import Media from './media';
import YouTube from './youtube'; import YouTube from './youtube';
import Zoom from './zoom'; import Zoom from './zoom';
@@ -19,7 +19,7 @@ export default {
Navigation, Navigation,
Scroll, Scroll,
Touch, Touch,
Video, Media,
YouTube, YouTube,
Zoom Zoom
}; };

View File

@@ -51,7 +51,7 @@ test('Should have correct properties', () => {
expect(webslides.plugins.nav).toBeDefined(); expect(webslides.plugins.nav).toBeDefined();
expect(webslides.plugins.scroll).toBeDefined(); expect(webslides.plugins.scroll).toBeDefined();
expect(webslides.plugins.touch).toBeDefined(); expect(webslides.plugins.touch).toBeDefined();
expect(webslides.plugins.video).toBeDefined(); expect(webslides.plugins.media).toBeDefined();
expect(webslides.plugins.youtube).toBeDefined(); expect(webslides.plugins.youtube).toBeDefined();
expect(webslides.plugins.zoom).toBeDefined(); expect(webslides.plugins.zoom).toBeDefined();

View File

@@ -1,4 +1,4 @@
import Video from '../../src/js/plugins/video'; import Video from '../../src/js/plugins/media';
import DOM from '../../src/js/utils/dom'; import DOM from '../../src/js/utils/dom';
beforeAll(() => { beforeAll(() => {