npm - videojs-mobile-ui - Versions diffs - 1.2.0-alpha.0 → 1.2.0 - Mend

videojs-mobile-ui 1.2.0-alpha.0 → 1.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (53) hide show

package/README.md +104 -53
package/dist/lang/de.js +1 -3
package/dist/lang/en.js +1 -3
package/dist/lang/it.js +1 -3
package/dist/videojs-mobile-ui.cjs.js +195 -43
package/dist/videojs-mobile-ui.css +104 -2
package/dist/videojs-mobile-ui.es.js +195 -43
package/dist/videojs-mobile-ui.js +204 -53
package/dist/videojs-mobile-ui.min.js +2 -2
package/docs/api/TouchOverlay.html +772 -0
package/docs/api/fonts/OpenSans-Bold-webfont.eot +0 -0
package/docs/api/fonts/OpenSans-Bold-webfont.svg +1830 -0
package/docs/api/fonts/OpenSans-Bold-webfont.woff +0 -0
package/docs/api/fonts/OpenSans-BoldItalic-webfont.eot +0 -0
package/docs/api/fonts/OpenSans-BoldItalic-webfont.svg +1830 -0
package/docs/api/fonts/OpenSans-BoldItalic-webfont.woff +0 -0
package/docs/api/fonts/OpenSans-Italic-webfont.eot +0 -0
package/docs/api/fonts/OpenSans-Italic-webfont.svg +1830 -0
package/docs/api/fonts/OpenSans-Italic-webfont.woff +0 -0
package/docs/api/fonts/OpenSans-Light-webfont.eot +0 -0
package/docs/api/fonts/OpenSans-Light-webfont.svg +1831 -0
package/docs/api/fonts/OpenSans-Light-webfont.woff +0 -0
package/docs/api/fonts/OpenSans-LightItalic-webfont.eot +0 -0
package/docs/api/fonts/OpenSans-LightItalic-webfont.svg +1835 -0
package/docs/api/fonts/OpenSans-LightItalic-webfont.woff +0 -0
package/docs/api/fonts/OpenSans-Regular-webfont.eot +0 -0
package/docs/api/fonts/OpenSans-Regular-webfont.svg +1831 -0
package/docs/api/fonts/OpenSans-Regular-webfont.woff +0 -0
package/docs/api/global.html +1485 -0
package/docs/api/index.html +159 -0
package/docs/api/plugin.js.html +266 -0
package/docs/api/scripts/linenumber.js +25 -0
package/docs/api/scripts/prettify/Apache-License-2.0.txt +202 -0
package/docs/api/scripts/prettify/lang-css.js +2 -0
package/docs/api/scripts/prettify/prettify.js +28 -0
package/docs/api/styles/jsdoc-default.css +358 -0
package/docs/api/styles/prettify-jsdoc.css +111 -0
package/docs/api/styles/prettify-tomorrow.css +132 -0
package/docs/api/swipeFullscreen.js.html +173 -0
package/docs/api/touchOverlay.js.html +203 -0
package/index.html +238 -170
package/package.json +23 -13
package/scripts/lang.js +24 -0
package/scripts/netlify.js +16 -0
package/scripts/postcss.config.js +29 -5
package/scripts/readme-options.js +370 -0
package/scripts/rollup.config.js +0 -8
package/src/plugin.css +6 -0
package/src/plugin.js +65 -39
package/src/swipeFullscreen.js +122 -0
package/src/touchOverlay.js +7 -3
package/test/plugin.test.js +125 -18
package/test/swipeFullscreen.test.js +365 -0

package/index.html CHANGED Viewed

@@ -1,9 +1,11 @@
 <!DOCTYPE html>
 <html>
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>videojs-mobile-ui Demo</title>
+  <link href="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224px%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224px%22%20fill%3D%22%231f1f1f%22%3E%3Cpath%20d%3D%22M419-80q-28%200-52.5-12T325-126L124-381q-8-9-7-21.5t9-20.5q20-21%2048-25t52%2011l74%2045v-328q0-17%2011.5-28.5T340-760q17%200%2029%2011.5t12%2028.5v200h299q50%200%2085%2035t35%2085v160q0%2066-47%20113T640-80H419Zm60-520q-17%200-28.5-11.5T439-640q0-2%205-20%208-14%2012-28.5t4-31.5q0-50-35-85t-85-35q-50%200-85%2035t-35%2085q0%2017%204%2031.5t12%2028.5q3%205%204%2010t1%2010q0%2017-11%2028.5T202-600q-11%200-20.5-6T167-621q-13-22-20-47t-7-52q0-83%2058.5-141.5T340-920q83%200%20141.5%2058.5T540-720q0%2027-7%2052t-20%2047q-5%209-14%2015t-20%206Z%22%2F%3E%3C%2Fsvg%3E" rel="icon" type="image/x-icon" />
   <link href="node_modules/video.js/dist/video-js.css" rel="stylesheet" />
   <link href="dist/videojs-mobile-ui.css" rel="stylesheet" />
   <style>
@@ -15,186 +17,252 @@
       pointer-events: none;
       display: none;
     }
+    body {
+      font-size: 16px;
+      line-height: 1.4;
+      margin-bottom: 60px;
+    }
+    .video-container {
+      width: 100vw;
+      margin-left: calc(50% - 50vw);
+    }
+    video-js:fullscreen .vjs-control-bar {
+      font-size: 1.1em;
+      padding-bottom: 20px;
+      height: calc(3em + 20px);
+    }
+    #demoOptions {
+      ul {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+      }
+      li {
+        margin-bottom: 10px;
+      }
+      label {
+        min-height: 44px;
+        /* Apple/Google tap target guidance */
+        cursor: pointer;
+        font-family: ui-monospace, 'Courier New', Courier, monospace;
+      }
+      /* Text inputs */
+      input[type="text"],
+      input[type="email"],
+      input[type="number"],
+      input[type="password"],
+      textarea {
+        width: 90%;
+        padding: 10px 12px;
+        font-size: 16px;
+        /* Prevents iOS zoom */
+        border: 1px solid #ccc;
+        border-radius: 6px;
+      }
+      /* Checkboxes (simple but usable) */
+      input[type="checkbox"] {
+        width: 20px;
+        height: 20px;
+        flex-shrink: 0;
+      }
+      /* Optional: subtle focus style */
+      input:focus,
+      textarea:focus {
+        outline: none;
+        border-color: #007aff;
+        /* iOS blue */
+      }
+      /* Optional: slightly separate groups */
+      li+li {
+        border-top: 1px solid #eee;
+        padding-top: 8px;
+      }
+      button {
+        font-size: 16px;
+        margin-bottom: 10px;
+      }
+    }
   </style>
 </head>
 <body>
-  <video-js
-  id="videojs-mobile-ui-player"
-  class="video-js vjs-default-skin vjs-fluid"
-  controls
-  playsinline
-  >
-  <source src="https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8" type="application/x-mpegurl" />
-</video-js>
-<ul>
-  <li><a href="test/">Run unit tests in browser.</a></li>
-  <li><a href="docs/api/">Read generated docs.</a></li>
-</ul>
-<h2>Options</h2>
-<ul id="options">
-  <li>fullscreen:</li>
+  <h1>videojs-mobile-ui test page.</h1>
+  <div class="video-container">
+    <video-js id="videojs-mobile-ui-player" class="video-js vjs-default-skin vjs-fluid" controls playsinline>
+      <source src="https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8"
+        type="application/x-mpegurl" />
+    </video-js>
+  </div>
   <ul>
-    <li>
-      <input
-      type="checkbox"
-      data-section="fullscreen"
-      id="enterOnRotate"
-      />enterOnRotate
-    </li>
-    <li>
-      <input
-      type="checkbox"
-      data-section="fullscreen"
-      id="exitOnRotate"
-      />exitOnRotate
-    </li>
-    <li>
-      <input
-      type="checkbox"
-      data-section="fullscreen"
-      id="lockOnRotate"
-      />lockOnRotate
-    </li>
-    <li>
-      <input
-      type="checkbox"
-      data-section="fullscreen"
-      id="alwaysLockToLandscape"
-      />alwaysLockToLandscape
-    </li>
-    <li>
-      <input
-      type="checkbox"
-      data-section="fullscreen"
-      id="fullscreenDisabled"
-      />disabled
-    </li>
+    <li><a href="test/">Run unit tests in browser.</a></li>
   </ul>
-  <li>touchControls:</li>
-  <ul>
-    <li>
-      <input
-      type="number"
-      data-section="touchControls"
-      id="seekSeconds"
-      />seekSeconds
-    </li>
-    <li>
-      <input
-      type="number"
-      data-section="touchControls"
-      id="tapTimeout"
-      />tapTimeout
-    </li>
-    <li>
-      <input
-      type="checkbox"
-      data-section="touchControls"
-      id="disableOnEnd"
-      />disableOnEnd
-    </li>
-    <li>
-      <input
-      type="checkbox"
-      data-section="touchControls"
-      id="touchControlsDisabled"
-      />disabled
-    </li>
-  </ul>
-</ul>
-<button id="reload">Reload with options</button>
-<ul id="log"></ul>
-<script src="node_modules/video.js/dist/video.js"></script>
-<script src="dist/videojs-mobile-ui.js"></script>
-<script>
-  (function (window, videojs) {
-    var options = {
-      fullscreen: {
-        enterOnRotate: true,
-        exitOnRotate: true,
-        lockOnRotate: true,
-        alwaysLockToLandscape: false,
-        disabled: false,
-      },
-      touchControls: {
-        seekSeconds: 10,
-        tapTimeout: 300,
-        disableOnEnd: false,
-        disabled: false,
-      },
-    };
-    var url = new URL(window.location);
-    if (url.searchParams.has('options')) {
-      options = JSON.parse(url.searchParams.get('options'));
-    }
+  <h2>Options</h2>
+  <div id="demoOptions">
+    <p>Reload to apply changed options.</p>
+    <button id="reload">Reload with options</button>
+    <ul id="options">
+      <li>
+        <h3>fullscreen:</h3>
+      </li>
+      <ul>
+        <li>
+          <input type="checkbox" data-section="fullscreen" id="enterOnRotate" /> <label for="enterOnRotate">enterOnRotate</label>
+        </li>
+        <li>
+          <input type="checkbox" data-section="fullscreen" id="exitOnRotate" />
+          <label for="exitOnRotate">exitOnRotate</label>
+        </li>
+        <li>
+          <input type="checkbox" data-section="fullscreen" id="lockOnRotate" />
+          <label for="lockOnRotate">lockOnRotate</label>
+        </li>
+        <li>
+          <input type="checkbox" data-section="fullscreen" id="alwaysLockToLandscape" />
+          <label for="alwaysLockToLandscape">alwaysLockToLandscape</label>
+        </li>
+        <li>
+          <input type="checkbox" data-section="fullscreen" id="swipeToFullscreen" />
+          <label for="swipeToFullscreen">swipeToFullscreen</label>
+        </li>
+        <li>
+          <input type="checkbox" data-section="fullscreen" id="swipeFromFullscreen" />
+          <label for="swipeFromFullscreen">swipeFromFullscreen</label>
+        </li>
+        <li>
+          <input type="checkbox" data-section="fullscreen" id="fullscreenDisabled" />
+          <label for="disabled">disabled</label>
+        </li>
+      </ul>
+      <li>
+        <h3>touchControls:</h3>
+      </li>
+      <ul>
+        <li>
+          <input type="number" data-section="touchControls" id="seekSeconds" />
+          <label for="seekSeconds">seekSeconds</label>
+        </li>
+        <li>
+          <input type="number" data-section="touchControls" id="tapTimeout" />
+          <label for="tapTimeout">tapTimeout</label>
+        </li>
+        <li>
+          <input type="checkbox" data-section="touchControls" id="disableOnEnd" />
+          <label for="disableOnEnd">disableOnEnd</label>
+        </li>
+        <li>
+          <input type="checkbox" data-section="touchControls" id="touchControlsDisabled" />
+          <label for="disabled">disabled</label>
+        </li>
+      </ul>
+    </ul>
+  </div>
+  <ul id="log"></ul>
+  <script src="node_modules/video.js/dist/video.js"></script>
+  <script src="dist/videojs-mobile-ui.js"></script>
+  <script>
+    (function (window, videojs) {
+      var options = {
+        fullscreen: {
+          enterOnRotate: true,
+          exitOnRotate: true,
+          lockOnRotate: true,
+          alwaysLockToLandscape: false,
+          swipeToFullscreen: false,
+          swipeFromFullscreen: false,
+          disabled: false,
+        },
+        touchControls: {
+          seekSeconds: 10,
+          tapTimeout: 300,
+          disableOnEnd: false,
+          disabled: false,
+        },
+      };
+      var url = new URL(window.location);
+      if (url.searchParams.has('options')) {
+        options = JSON.parse(url.searchParams.get('options'));
+      }
-    console.log(JSON.stringify(options, null, 2));
+      console.log(JSON.stringify(options, null, 2));
-    Object.keys(options).forEach(function (section) {
-      Object.keys(options[section]).forEach(function (prop) {
-        const val = options[section][prop];
+      Object.keys(options).forEach(function (section) {
+        Object.keys(options[section]).forEach(function (prop) {
+          const val = options[section][prop];
-        if (prop === 'disabled') {
-          prop = `${section}Disabled`;
-        }
+          if (prop === 'disabled') {
+            prop = `${section}Disabled`;
+          }
-        if (typeof val === 'boolean') {
-          document.getElementById(prop).checked = val;
-        }
-        if (typeof val === 'number') {
-          document.getElementById(prop).value = val;
-        }
+          if (typeof val === 'boolean') {
+            document.getElementById(prop).checked = val;
+          }
+          if (typeof val === 'number') {
+            document.getElementById(prop).value = val;
+          }
+        });
       });
-    });
-    document
-    .getElementById('options')
-    .querySelectorAll('input')
-    .forEach(function (opt) {
-      opt.addEventListener('change', function () {
-        if (this.type === 'checkbox') {
-          const param = this.id.endsWith('Disabled')
-          ? 'disabled'
-          : this.id;
-          options[this.getAttribute('data-section')][param] =
-          this.checked;
-        } else {
-          options[this.getAttribute('data-section')][this.id] =
-          parseFloat(this.value);
-        }
-        console.log(options);
+      document
+        .getElementById('options')
+        .querySelectorAll('input')
+        .forEach(function (opt) {
+          opt.addEventListener('change', function () {
+            if (this.type === 'checkbox') {
+              const param = this.id.endsWith('Disabled')
+                ? 'disabled'
+                : this.id;
+              options[this.getAttribute('data-section')][param] =
+                this.checked;
+            } else {
+              options[this.getAttribute('data-section')][this.id] =
+                parseFloat(this.value);
+            }
+            console.log(options);
+          });
+        });
+      document
+        .getElementById('reload')
+        .addEventListener('click', function () {
+          url.searchParams.set('options', JSON.stringify(options));
+          window.location = url.href;
+        });
+      window.addEventListener('orientationchange', function () {
+        var el = document.createElement('li');
+        var message =
+          new Date().toTimeString().split(' ')[0] + ' ' + window.orientation;
+        message +=
+          screen && screen.orientation
+            ? ' ' + screen.orientation.type + ' ' + screen.orientation.angle
+            : '';
+        el.textContent = message;
+        console.log(message);
+        document.getElementById('log').appendChild(el);
       });
-    });
-    document
-    .getElementById('reload')
-    .addEventListener('click', function () {
-      url.searchParams.set('options', JSON.stringify(options));
-      window.location = url.href;
-    });
-    window.addEventListener('orientationchange', function () {
-      var el = document.createElement('li');
-      var message =
-      new Date().toTimeString().split(' ')[0] + ' ' + window.orientation;
-      message +=
-      screen && screen.orientation
-      ? ' ' + screen.orientation.type + ' ' + screen.orientation.angle
-      : '';
-      el.textContent = message;
-      console.log(message);
-      document.getElementById('log').appendChild(el);
-    });
-    var testPlayer = (window.testPlayer = videojs(
-      'videojs-mobile-ui-player'
+      var testPlayer = (window.testPlayer = videojs(
+        'videojs-mobile-ui-player'
       ));
-    testPlayer.endscreen = function () {};
-    testPlayer.mobileUi(options);
-  })(window, window.videojs);
-</script>
+      testPlayer.endscreen = function () { };
+      testPlayer.mobileUi(options);
+    })(window, window.videojs);
+  </script>
 </body>
-</html>
+</html>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "videojs-mobile-ui",
-  "version": "1.2.0-alpha.0",
+  "version": "1.2.0",
   "description": "Mobile tap controls and fullscreen on rotate for Video.js",
   "main": "dist/videojs-mobile-ui.cjs.js",
   "module": "dist/videojs-mobile-ui.es.js",
@@ -10,16 +10,16 @@
     "version": "8.0.0"
   },
   "scripts": {
-    "build": "npm-run-all -s clean -p build:*",
+    "build": "npm-run-all -s clean -p docs:options -p build:*",
     "build-prod": "cross-env-shell NO_TEST_BUNDLE=1 'npm run build'",
     "build-test": "cross-env-shell TEST_BUNDLE_ONLY=1 'npm run build'",
     "build:css": "postcss -o dist/videojs-mobile-ui.css --config scripts/postcss.config.js src/plugin.css",
     "build:js": "rollup -c scripts/rollup.config.js",
-    "build:lang": "vjslang --dir dist/lang",
+    "build:lang": "node ./scripts/lang.js",
     "clean": "shx rm -rf ./dist ./test/dist ./cjs ./es && shx mkdir -p ./dist ./test/dist ./cjs ./es",
     "docs": "npm-run-all docs:*",
     "docs:api": "jsdoc src -r -d docs/api",
-    "docs:toc": "doctoc --notitle README.md",
+    "docs:options": "node scripts/readme-options.js",
     "lint": "vjsstandard",
     "server": "karma start scripts/karma.conf.js --singleRun=false --auto-watch",
     "start": "npm-run-all -p server watch",
@@ -31,7 +31,8 @@
     "watch": "npm-run-all -p watch:*",
     "watch:css": "npm run build:css -- -w",
     "watch:js": "npm run build:js -- -w",
-    "prepublishOnly": "npm-run-all build-prod && vjsverify --verbose --skip-es-check"
+    "prepublishOnly": "npm-run-all build-prod && vjsverify --verbose --skip-es-check",
+    "netlify": "node ./scripts/netlify.js"
   },
   "engines": {
     "node": ">=14",
@@ -67,28 +68,37 @@
     "*.js": "vjsstandard --fix",
     "README.md": "doctoc --notitle"
   },
+  "dependencies": {
+    "global": "^4.4.0"
+  },
   "peerDependencies": {
     "video.js": "^8"
   },
   "devDependencies": {
     "@babel/runtime": "^7.14.0",
     "@videojs/generator-helpers": "~3.2.0",
-    "husky": "^8.0.1",
+    "autoprefixer": "^10.4.23",
+    "husky": "^9.1.7",
     "jsdoc": "^4.0.0",
     "karma": "^6.3.2",
     "postcss": "^8.2.13",
-    "postcss-cli": "^8.3.1",
+    "postcss-cli": "^11.0.1",
+    "postcss-csso": "^6.0.1",
+    "postcss-import": "^16.1.1",
+    "postcss-nested": "^7.0.2",
+    "postcss-progress": "^2.0.0",
     "rollup": "^2.46.0",
-    "sinon": "^16.0.0",
+    "shelljs": "^0.10.0",
+    "sinon": "^21.0.0",
     "video.js": "^8.0.0",
-    "videojs-generate-karma-config": "~8.0.0",
-    "videojs-generate-postcss-config": "~3.0.0",
+    "videojs-generate-karma-config": "^8.1.0",
     "videojs-generate-rollup-config": "^7.0.0",
     "videojs-generator-verify": "^4.1.0",
-    "videojs-languages": "^2.0.0",
     "videojs-standard": "^9.0.1"
   },
-  "dependencies": {
-    "@ungap/global-this": "^0.4.4"
+  "overrides": {
+    "nomnom": {
+      "underscore": "^1.13.0"
+    }
   }
 }

package/scripts/lang.js ADDED Viewed

@@ -0,0 +1,24 @@
+const fs = require('fs');
+const path = require('path');
+const source = './lang';
+const dest = './dist/lang';
+if (!fs.existsSync(dest)) {
+  fs.mkdirSync(dest);
+}
+fs.readdirSync(source)
+  .filter(file => file.endsWith('.json'))
+  .forEach(file => {
+    const jsonPath = path.join(source, file);
+    const jsonData = JSON.parse(fs.readFileSync(jsonPath, 'utf8'));
+    const langName = path.basename(jsonPath, '.json');
+    const jsPath = path.join(dest, langName + '.js');
+    const jsContent = `videojs.addLanguage('${langName}', ${
+      JSON.stringify(jsonData)
+    });\n`;
+    fs.writeFileSync(jsPath, jsContent);
+  });

package/scripts/netlify.js ADDED Viewed

@@ -0,0 +1,16 @@
+const path = require('path');
+const sh = require('shelljs');
+const fs = require('fs');
+const deployDir = 'deploy';
+sh.rm('-rf', deployDir);
+sh.mkdir('-p', deployDir);
+sh.exec('npm run build');
+sh.cp('-r', 'dist', path.join(deployDir, 'dist'));
+let pluginContent = fs.readFileSync('index.html', 'utf8');
+pluginContent = pluginContent.replace(/="node_modules\//g, '="https://unpkg.com/');
+fs.writeFileSync(path.join(deployDir, 'index.html'), pluginContent);

package/scripts/postcss.config.js CHANGED Viewed

@@ -1,9 +1,33 @@
-const generate = require('videojs-generate-postcss-config');
 module.exports = function(context) {
-  const result = generate({}, context);
-  // do custom stuff here
+  const result = {
+    plugins: [
+      {
+        postcssPlugin: 'postcss-progress-start'
+      },
+      {
+        postcssPlugin: 'postcss-import'
+      },
+      {
+        postcssPlugin: 'postcss-nested'
+      },
+      null,
+      null,
+      null,
+      {
+        browsers: [
+          'defaults'
+        ],
+        options: {},
+        postcssPlugin: 'autoprefixer'
+      },
+      {
+        postcssPlugin: 'postcss-csso'
+      },
+      {
+        postcssPlugin: 'postcss-progress-stop'
+      }
+    ]
+  };
   return result;
 };