Making video plugin a tad more generic

Fixes #122

package.json

@@ -43,7 +43,7 @@
     "eslint-plugin-jest": "^21.1.0",
     "extract-text-webpack-plugin": "^3.0.0",
     "jest": "^22.0.4",
-    "node-sass": "7.0.0",
+    "node-sass": "4.9.4",
     "npm-run-all": "^4.1.1",
     "postcss-loader": "^2.0.6",
     "pre-commit": "^1.2.2",

src/js/modules/webslides.js

@@ -19,7 +19,7 @@ const PLUGINS = {
   'nav': Plugins.Navigation,
   'scroll': Plugins.Scroll,
   'touch': Plugins.Touch,
-  'video': Plugins.Video,
+  'media': Plugins.Media,
   'youtube': Plugins.YouTube,
   'zoom': Plugins.Zoom
 };
@@ -315,6 +315,7 @@ export default class WebSlides {
 
     DOM.fireEvent(this.el, 'ws:slide-change', {
       slides: this.maxSlide_,
+      slideEl: slide.el,
       currentSlide0: this.currentSlideI_,
       currentSlide: this.currentSlideI_ + 1
     });

src/js/plugins/media.js

@@ -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
  * active.
  */
-export default class Video {
+export default class Media {
   /**
    * @param {WebSlides} wsInstance The WebSlides instance.
    * @constructor
@@ -17,24 +17,24 @@ export default class Video {
      */
     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;
         }
 
-        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];
 
-        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
    */
   static onSectionEnabled(event) {
-    event.detail.slide.video.play();
+    event.detail.slide.media.play();
   }
 
   /**
@@ -52,6 +52,6 @@ export default class Video {
    * @param {CustomEvent} event
    */
   static onSectionDisabled(event) {
-    event.detail.slide.video.pause();
+    event.detail.slide.media.pause();
   }
 }

src/js/plugins/plugins.js

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

src/scss/_base.scss

@@ -30,6 +30,7 @@ webslides.js will add .ws-ready automatically. Don't worry :) -- */
   height: 100vh;
   overflow-x: hidden;
   overflow-y: scroll;
+  scrollbar-width: none; // sass-lint:disable-line no-misspelled-properties
 
   &::-webkit-scrollbar {
     display: none;

test/modules/webslides.test.js

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

test/plugins/media.test.js

@@ -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';
 
 beforeAll(() => {