Miscellaneous cleanup (#10)

* Make global a development dependency

* Simplify trim function

* Remove ancient backwards compatibility

* Remove empty listener

* Remove unneeded mkdirp dependency

* Remove empty changelog file and related dependencies

* The CSS is simple enough to not need sass

* Fix build and semicolons

Author: absidue

CHANGELOG.md

@@ -17,17 +17,16 @@
   "scripts": {
     "prebuild": "npm run clean",
     "build": "npm-run-all -p build:*",
-    "build:css": "npm-run-all build:css:sass build:css:bannerize",
+    "build:css": "npm-run-all build:css:copy build:css:bannerize",
+    "build:css:copy": "node scripts/copy-css.js",
     "build:css:bannerize": "bannerize dist/videojs-vtt-thumbnails.css --banner=scripts/banner.ejs",
-    "build:css:sass": "node-sass src/plugin.scss dist/videojs-vtt-thumbnails.css --output-style=compressed --linefeed=lf",
     "build:js": "npm-run-all build:js:rollup-modules build:js:rollup-umd build:js:bannerize build:js:uglify",
     "build:js:bannerize": "bannerize dist/videojs-vtt-thumbnails.js --banner=scripts/banner.ejs",
     "build:js:rollup-modules": "rollup -c scripts/modules.rollup.config.js",
     "build:js:rollup-umd": "rollup -c scripts/umd.rollup.config.js",
     "build:js:uglify": "uglifyjs dist/videojs-vtt-thumbnails.js --comments --mangle --compress  -o dist/videojs-vtt-thumbnails.min.js",
     "build:test": "rollup -c scripts/test.rollup.config.js",
     "clean": "rimraf dist test/dist",
-    "postclean": "mkdirp dist test/dist",
     "docs": "npm-run-all docs:*",
     "docs:api": "jsdoc src -r -c jsdoc.json -d docs/api",
     "docs:toc": "doctoc README.md",
@@ -36,11 +35,8 @@
     "start:server": "static -a 0.0.0.0 -p 9999 -H '{\"Cache-Control\": \"no-cache, must-revalidate\"}' .",
     "pretest": "npm-run-all lint build",
     "test": "karma start test/karma.conf.js",
-    "preversion": "npm test",
-    "version": "node scripts/version.js",
     "watch": "npm-run-all -p watch:*",
-    "watch:css": "npm-run-all build:css:sass watch:css:sass",
-    "watch:css:sass": "node-sass src/plugin.scss dist/videojs-vtt-thumbnails.css --output-style=compressed --linefeed=lf --watch src/**/*.scss",
+    "watch:css": "node scripts/copy-css.js --watch",
     "watch:js-modules": "rollup -c scripts/modules.rollup.config.js -w",
     "watch:js-umd": "rollup -c scripts/umd.rollup.config.js -w",
     "watch:test": "rollup -c scripts/test.rollup.config.js -w",
@@ -82,7 +78,6 @@
     "test/"
   ],
   "dependencies": {
-    "global": "^4.4.0",
     "video.js": "^7"
   },
   "devDependencies": {
@@ -95,23 +90,19 @@
     "@rollup/plugin-multi-entry": "^4.1.0",
     "@rollup/plugin-node-resolve": "^14.0.1",
     "bannerize": "^1.1.4",
-    "conventional-changelog-cli": "^2.2.2",
-    "conventional-changelog-videojs": "^3.0.2",
     "doctoc": "^2.2.1",
     "eslint": "^8.24.0",
     "eslint-plugin-jsdoc": "^39.3.6",
+    "global": "^4.4.0",
     "jsdoc": "^3.6.11",
     "karma": "^6.4.1",
     "karma-chrome-launcher": "^3.1.1",
     "karma-qunit": "^4.1.2",
-    "mkdirp": "^1.0.4",
-    "node-sass": "^7.0.3",
     "node-static": "github:cloudhead/node-static#bd48e282d831745d0721158d1752d31d8fa602a6",
     "npm-run-all": "^4.1.5",
     "qunit": "^2.19.1",
     "rimraf": "^3.0.2",
     "rollup": "^2.79.1",
-    "semver": "^7.3.7",
     "sinon": "^14.0.1",
     "uglify-js": "^3.17.2",
     "videojs-standard": "^9.0.1"

package-lock.json

@@ -0,0 +1,18 @@
+const { copyFileSync, existsSync, mkdirSync, watchFile } = require('fs');
+
+function copy() {
+  if (!existsSync(`${__dirname}/../dist/`)) {
+    mkdirSync(`${__dirname}/../dist/`, { recursive: true });
+  }
+  copyFileSync(`${__dirname}/../src/plugin.css`, `${__dirname}/../dist/videojs-vtt-thumbnails.css`);
+}
+
+copy();
+
+if (process.argv[1] === '--watch') {
+  watchFile(`${__dirname}/../src/plugin.css`, { persistent: true }, (curr, prev) => {
+    if (curr.mtimeMs !== prev.mtimeMs) {
+      copy();
+    }
+  });
+}

package.json

@@ -0,0 +1,11 @@
+.video-js.vjs-vtt-thumbnails {
+  display: block;
+}
+
+.video-js .vjs-vtt-thumbnail-display {
+  position: absolute;
+  transition: transform .1s, opacity .2s;
+  bottom: 85%;
+  pointer-events: none;
+  box-shadow: 0 0 7px rgba(0, 0, 0, .6);
+}

scripts/copy-css.js

@@ -8,10 +8,6 @@ const defaults = {};
 // Cache for image elements
 const cache = {};
 
-// Cross-compatibility for Video.js 5 and 6.
-const registerPlugin = videojs.registerPlugin || videojs.plugin;
-// const dom = videojs.dom || videojs;
-
 /**
  * Function to invoke when the player is ready.
  *
@@ -72,7 +68,6 @@ class vttThumbnailsPlugin {
   constructor(player, options) {
     this.player = player;
     this.options = options;
-    this.listenForDurationChange();
     this.initializeThumbnails();
     this.registeredEvents = {};
     return this;
@@ -108,15 +103,6 @@ class vttThumbnailsPlugin {
     delete this.lastStyle;
   }
 
-  /**
-   * Set event listener for when player's duration changes
-   */
-  listenForDurationChange() {
-    this.player.on('durationchange', () => {
-
-    });
-  }
-
   /**
    * Bootstrap the plugin.
    */
@@ -346,16 +332,16 @@ class vttThumbnailsPlugin {
       // be careful with trimming.
       return [
         base.replace(/\/$/gi, ''),
-        this.trim(path, '/')
+        this.trimSlashes(path)
       ].join('/');
     }
 
     if (base.indexOf('//') > 0) {
       // We don't have a fully qualified path, and should
       // trim both sides of base and path.
       return [
-        this.trim(base, '/'),
-        this.trim(path, '/')
+        this.trimSlashes(base),
+        this.trimSlashes(path)
       ].join('/');
     }
 
@@ -443,65 +429,19 @@ class vttThumbnailsPlugin {
   }
 
   /**
-   * trim
+   * trims whitespace and forward slashes from strings
    *
    * @param  {string} str      source string
-   * @param  {string} charlist characters to trim from text
    * @return {string}          trimmed string
    */
-  trim(str, charlist) {
-    let whitespace = [
-      ' ',
-      '\n',
-      '\r',
-      '\t',
-      '\f',
-      '\x0b',
-      '\xa0',
-      '\u2000',
-      '\u2001',
-      '\u2002',
-      '\u2003',
-      '\u2004',
-      '\u2005',
-      '\u2006',
-      '\u2007',
-      '\u2008',
-      '\u2009',
-      '\u200a',
-      '\u200b',
-      '\u2028',
-      '\u2029',
-      '\u3000'
-    ].join('');
-    let l = 0;
-    let i = 0;
-
-    str += '';
-    if (charlist) {
-      whitespace = (charlist + '').replace(/([[\]().?/*{}+$^:])/g, '$1');
-    }
-    l = str.length;
-    for (i = 0; i < l; i++) {
-      if (whitespace.indexOf(str.charAt(i)) === -1) {
-        str = str.substring(i);
-        break;
-      }
-    }
-    l = str.length;
-    for (i = l - 1; i >= 0; i--) {
-      if (whitespace.indexOf(str.charAt(i)) === -1) {
-        str = str.substring(0, i + 1);
-        break;
-      }
-    }
-    return whitespace.indexOf(str.charAt(0)) === -1 ? str : '';
+  trimSlashes(str) {
+    return str.replace(/^\s*\/+\s*|\s*\/+\s*$/g, '');
   }
 
 }
 
 // Register the plugin with video.js.
-registerPlugin('vttThumbnails', vttThumbnails);
+videojs.registerPlugin('vttThumbnails', vttThumbnails);
 
 // Include the version number.
 vttThumbnails.VERSION = VERSION;