Merge c5a0690 into 142aa8f

CHANGES.md

@@ -1,6 +1,14 @@
 videojs-wavesurfer changelog
 ============================
 
+2.4.0 - unreleased
+------------------
+
+- Add plugin style `vjs-wavesurfer` and prefix all custom plugin styles with
+  this selector. This should prevent clashes with regular video.js players
+  loaded on the same page
+
+
 2.3.2 - 2018/05/07
 ------------------
 

karma.conf.js

@@ -92,7 +92,7 @@ module.exports = function(config) {
         reporters: ['verbose', 'progress', 'coverage'],
         coverageReporter: {
             type: 'html',
-            dir: 'coverage/'
+            dir: 'coverage'
         },
         webpack: webpackConfig,
         customLaunchers: {

src/css/fluid.scss

@@ -1,7 +1,7 @@
 /* Handle responsive / fluid view.
 --------------------------------------------------------------------------------
 */
-.videojs-wavesurfer.vjs-fluid wave.vjs-wavedisplay {
+.vjs-wavesurfer.vjs-fluid wave.vjs-wavedisplay {
     top: 0;
     position: absolute!important;
     width: 100%;

src/css/main.scss

@@ -1,7 +1,7 @@
 /* Position fullscreen control on right side of the player.
 --------------------------------------------------------------------------------
 */
-.video-js.videojs-wavesurfer .vjs-control.vjs-fullscreen-control {
+.video-js.vjs-wavesurfer .vjs-control.vjs-fullscreen-control {
     position: absolute;
     right: 0;
 }
@@ -11,25 +11,25 @@
    controls.
 --------------------------------------------------------------------------------
 */
-.videojs-wavesurfer .vjs-using-native-controls .vjs-control-bar {
+.vjs-wavesurfer .vjs-using-native-controls .vjs-control-bar {
     display: flex !important;
 }
 
 /* Ensure playToggle has pointer cursor.
 --------------------------------------------------------------------------------
 */
-.videojs-wavesurfer button.vjs-play-control.vjs-control.vjs-button {
+.vjs-wavesurfer button.vjs-play-control.vjs-control.vjs-button {
     cursor: pointer;
 }
 
 /* Ensure that vjs menus and interfaces can be interacted with (such as the
    closed captions button).
 --------------------------------------------------------------------------------
 */
-.videojs-wavesurfer .vjs-menu-content {
+.vjs-wavesurfer .vjs-menu-content {
     z-index: 1;
 }
 
-.videojs-wavesurfer .vjs-modal-dialog, .vjs-text-track-display {
+.vjs-wavesurfer .vjs-modal-dialog, .vjs-text-track-display {
     z-index: 4;
 }

src/js/videojs.wavesurfer.js

@@ -8,7 +8,6 @@
 import log from './utils/log';
 import formatTime from './utils/format-time';
 import pluginDefaultOptions from './defaults';
-import WavesurferTech from './tech';
 import window from 'global/window';
 
 import videojs from 'video.js';
@@ -34,6 +33,9 @@ class Wavesurfer extends Plugin {
     constructor(player, options) {
         super(player, options);
 
+        // add plugin style
+        player.addClass('vjs-wavesurfer');
+
         // parse options
         options = videojs.mergeOptions(pluginDefaultOptions, options);
         this.waveReady = false;
@@ -42,15 +44,8 @@ class Wavesurfer extends Plugin {
         this.debug = (options.debug.toString() === 'true');
         this.msDisplayMax = parseFloat(options.msDisplayMax);
 
-        // attach this instance to the current player so that the tech can
-        // access it
-        this.player.activeWavesurferPlugin = this;
-
-        // check that wavesurfer is initialized in options, and add class to
-        // activate videojs-wavesurfer specific styles
-        if (this.player.options_.plugins.wavesurfer !== undefined) {
-            this.player.addClass('videojs-wavesurfer');
-        }
+        var tracks = player.textTracks();
+        console.log('tracks', tracks);
 
         // microphone plugin
         if (options.src === 'live') {
@@ -74,9 +69,6 @@ class Wavesurfer extends Plugin {
      * Player UI is ready: customize controls.
      */
     initialize() {
-        // setup tech
-        this.player.tech_.setActivePlayer(this.player);
-
         // hide big play button
         this.player.bigPlayButton.hide();
 
@@ -767,11 +759,6 @@ if (videojs.getPlugin('wavesurfer') === undefined) {
     videojs.registerPlugin('wavesurfer', Wavesurfer);
 }
 
-// register the WavesurferTech as 'Html5' to override the default html5 tech.
-// If we register it as anything other then 'Html5', the <audio> element will
-// be removed by VJS and caption tracks will be lost in the Safari browser.
-videojs.registerTech('Html5', WavesurferTech);
-
 module.exports = {
     Wavesurfer
 };