Making video plugin a tad more generic

Fixes #122

package-lock.json

@@ -4414,9 +4414,9 @@
       }
     },
     "fstream": {
-      "version": "1.0.12",
-      "resolved": "https://registry.npmjs.org/fstream/-/fstream-1.0.12.tgz",
-      "integrity": "sha512-WvJ193OHa0GHPEL+AycEJgxvBEwyfRkN1vhjca23OaPVMCaLCXTd5qAu82AjTcgP1UJmytkOKb63Ypde7raDIg==",
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/fstream/-/fstream-1.0.11.tgz",
+      "integrity": "sha1-XB+x8RdHcRTwYyoOtLcbPLD9MXE=",
       "dev": true,
       "requires": {
         "graceful-fs": "^4.1.2",
@@ -5029,9 +5029,9 @@
       "dev": true
     },
     "in-publish": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/in-publish/-/in-publish-2.0.1.tgz",
-      "integrity": "sha512-oDM0kUSNFC31ShNxHKUyfZKy8ZeXZBWMjMdZHKLOk13uvT27VTL/QzRGfRUcevJhpkZAvlhPYuXkF7eNWrtyxQ==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/in-publish/-/in-publish-2.0.0.tgz",
+      "integrity": "sha1-4g/146KvwmkDILbcVSaCqcf631E=",
       "dev": true
     },
     "indent-string": {
@@ -6319,6 +6319,12 @@
       "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==",
       "dev": true
     },
+    "lodash.assign": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/lodash.assign/-/lodash.assign-4.2.0.tgz",
+      "integrity": "sha1-DZnzzNem0mHRm9rrkkUAXShYCOc=",
+      "dev": true
+    },
     "lodash.camelcase": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
@@ -6331,6 +6337,12 @@
       "integrity": "sha1-+CbJtOKoUR2E46yinbBeGk87cqk=",
       "dev": true
     },
+    "lodash.clonedeep": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
+      "integrity": "sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=",
+      "dev": true
+    },
     "lodash.kebabcase": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/lodash.kebabcase/-/lodash.kebabcase-4.1.1.tgz",
@@ -6343,6 +6355,12 @@
       "integrity": "sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=",
       "dev": true
     },
+    "lodash.mergewith": {
+      "version": "4.6.1",
+      "resolved": "https://registry.npmjs.org/lodash.mergewith/-/lodash.mergewith-4.6.1.tgz",
+      "integrity": "sha512-eWw5r+PYICtEBgrBE5hhlT6aAa75f411bgDz/ZL2KZqYV03USvucsxcHUIlGTDTECs1eunpI7HOV7U+WLDvNdQ==",
+      "dev": true
+    },
     "lodash.sortby": {
       "version": "4.7.0",
       "resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz",
@@ -6719,8 +6737,7 @@
       "version": "2.12.1",
       "resolved": "https://registry.npmjs.org/nan/-/nan-2.12.1.tgz",
       "integrity": "sha512-JY7V6lRkStKcKTvHO5NVSQRv+RV+FIL5pvDoLiAtSL9pKlC5x9PKQcZDsq7m4FO4d57mkhC6Z+QhAh3Jdk5JFw==",
-      "dev": true,
-      "optional": true
+      "dev": true
     },
     "nanomatch": {
       "version": "1.2.13",
@@ -6910,9 +6927,9 @@
       }
     },
     "node-sass": {
-      "version": "4.13.1",
-      "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.13.1.tgz",
-      "integrity": "sha512-TTWFx+ZhyDx1Biiez2nB0L3YrCZ/8oHagaDalbuBSlqXgUPsdkUSzJsVxeDO9LtPB49+Fh3WQl3slABo6AotNw==",
+      "version": "4.9.4",
+      "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.9.4.tgz",
+      "integrity": "sha512-MXyurANsUoE4/6KmfMkwGcBzAnJQ5xJBGW7Ei6ea8KnUKuzHr/SguVBIi3uaUAHtZCPUYkvlJ3Ef5T5VAwVpaA==",
       "dev": true,
       "requires": {
         "async-foreach": "^0.1.3",
@@ -6922,10 +6939,12 @@
         "get-stdin": "^4.0.1",
         "glob": "^7.0.3",
         "in-publish": "^2.0.0",
-        "lodash": "^4.17.15",
+        "lodash.assign": "^4.2.0",
+        "lodash.clonedeep": "^4.3.2",
+        "lodash.mergewith": "^4.6.0",
         "meow": "^3.7.0",
         "mkdirp": "^0.5.1",
-        "nan": "^2.13.2",
+        "nan": "^2.10.0",
         "node-gyp": "^3.8.0",
         "npmlog": "^4.0.0",
         "request": "^2.88.0",
@@ -6963,18 +6982,6 @@
             "which": "^1.2.9"
           }
         },
-        "lodash": {
-          "version": "4.17.20",
-          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz",
-          "integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==",
-          "dev": true
-        },
-        "nan": {
-          "version": "2.14.1",
-          "resolved": "https://registry.npmjs.org/nan/-/nan-2.14.1.tgz",
-          "integrity": "sha512-isWHgVjnFjh2x2yuJ/tj3JbwoHu3UC2dX5G/88Cm24yB6YopVgxvBObDY7n5xW6ExmFhJpSEQqFPvq9zaXc8Jw==",
-          "dev": true
-        },
         "supports-color": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
@@ -7218,18 +7225,6 @@
         }
       }
     },
-    "object.assign": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.0.tgz",
-      "integrity": "sha512-exHJeq6kBKj58mqGyTQ9DFvrZC/eR6OwxzoM9YRoGBqrXYonaFyGiFMuc9VZrXf7DarreEwMpurG3dd+CNyW5w==",
-      "dev": true,
-      "requires": {
-        "define-properties": "^1.1.2",
-        "function-bind": "^1.1.1",
-        "has-symbols": "^1.0.0",
-        "object-keys": "^1.0.11"
-      }
-    },
     "object.getownpropertydescriptors": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.0.3.tgz",
@@ -10888,9 +10883,9 @@
       }
     },
     "sass-graph": {
-      "version": "2.2.6",
-      "resolved": "https://registry.npmjs.org/sass-graph/-/sass-graph-2.2.6.tgz",
-      "integrity": "sha512-MKuEYXFSGuRSi8FZ3A7imN1CeVn9Gpw0/SFJKdL1ejXJneI9a5rwlEZrKejhEFAA3O6yr3eIyl/WuvASvlT36g==",
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/sass-graph/-/sass-graph-2.2.4.tgz",
+      "integrity": "sha1-E/vWPNHK8JCLn9k0dq1DpR0eC0k=",
       "dev": true,
       "requires": {
         "glob": "^7.0.0",
@@ -10952,9 +10947,9 @@
           "dev": true
         },
         "yargs": {
-          "version": "7.1.1",
-          "resolved": "https://registry.npmjs.org/yargs/-/yargs-7.1.1.tgz",
-          "integrity": "sha512-huO4Fr1f9PmiJJdll5kwoS2e4GqzGSsMT3PPMpOwoVkOK8ckqAewMTZyA6LXVQWflleb/Z8oPBEvNsMft0XE+g==",
+          "version": "7.1.0",
+          "resolved": "https://registry.npmjs.org/yargs/-/yargs-7.1.0.tgz",
+          "integrity": "sha1-a6MY6xaWFyf10oT46gA+jWFU0Mg=",
           "dev": true,
           "requires": {
             "camelcase": "^3.0.0",
@@ -10969,17 +10964,16 @@
             "string-width": "^1.0.2",
             "which-module": "^1.0.0",
             "y18n": "^3.2.1",
-            "yargs-parser": "5.0.0-security.0"
+            "yargs-parser": "^5.0.0"
           }
         },
         "yargs-parser": {
-          "version": "5.0.0-security.0",
-          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-5.0.0-security.0.tgz",
-          "integrity": "sha512-T69y4Ps64LNesYxeYGYPvfoMTt/7y1XtfpIslUeK4um+9Hu7hlGoRtaDLvdXb7+/tfq4opVa2HRY5xGip022rQ==",
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-5.0.0.tgz",
+          "integrity": "sha1-J17PDX/+Bcd+ZOfIbkzZS/DhIoo=",
           "dev": true,
           "requires": {
-            "camelcase": "^3.0.0",
-            "object.assign": "^4.1.0"
+            "camelcase": "^3.0.0"
           }
         }
       }
@@ -12452,13 +12446,13 @@
       "dev": true
     },
     "tar": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/tar/-/tar-2.2.2.tgz",
-      "integrity": "sha512-FCEhQ/4rE1zYv9rYXJw/msRqsnmlje5jHP6huWeBZ704jUTy02c5AZyWujpMR1ax6mVw9NyJMfuK2CMDWVIfgA==",
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-2.2.1.tgz",
+      "integrity": "sha1-jk0qJWwOIYXGsYrWlK7JaLg8sdE=",
       "dev": true,
       "requires": {
         "block-stream": "*",
-        "fstream": "^1.0.12",
+        "fstream": "^1.0.2",
         "inherits": "2"
       }
     },

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": "4.13.1",
+    "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) {
-      videos.forEach(video => {
-        if (!video.hasAttribute('autoplay')) {
+    if (medias.length) {
+      medias.forEach(media => {
+        if (!media.hasAttribute('autoplay')) {
           return;
         }
 
-        video.removeAttribute('autoplay');
-        video.pause();
-        video.currentTime = 0;
-        const {i} = Slide.getSectionFromEl(video);
+        media.removeAttribute('autoplay');
+        media.pause();
+        media.currentTime = 0;
+        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.DISABLE, Video.onSectionDisabled);
+        slide.el.addEventListener(SlideEvents.ENABLE, Media.onSectionEnabled);
+        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(() => {