Merge master into feature/v1.0.0

Author: Rob Walch

.travis.yml

@@ -12,7 +12,7 @@ env:
     - SAUCE_USERNAME=mangui
 stages:
   - buildAndTest
-  - releaseCanary
+  - releaseAlpha
   - release
   - testFuncRequired
   - testFuncOptional
@@ -39,10 +39,10 @@ jobs:
         skip_cleanup: true
         on:
           tags: true
-    # publish canary package (and deploy gh-pages) if on master
-    - stage: releaseCanary
+    # publish canary package if on master
+    - stage: releaseAlpha
       if: branch = master AND type != pull_request
-      env: TRAVIS_MODE=releaseCanary
+      env: TRAVIS_MODE=releaseAlpha
     # Required tests
     - stage: buildAndTest
       env:   TRAVIS_MODE=build

README.md

@@ -1,6 +1,6 @@
 [![Build Status](https://api.travis-ci.org/video-dev/hls.js.svg?branch=master)](https://travis-ci.org/video-dev/hls.js)
 [![npm](https://img.shields.io/npm/v/hls.js.svg?style=flat)](https://npmjs.org/package/hls.js)
-[![npm](https://img.shields.io/npm/v/hls.js/canary.svg?style=flat)](https://www.npmjs.com/package/hls.js/v/canary)
+[![npm](https://img.shields.io/npm/v/hls.js/alpha.svg?style=flat)](https://www.npmjs.com/package/hls.js/v/alpha)
 [![](https://data.jsdelivr.com/v1/package/npm/hls.js/badge?style=rounded)](https://www.jsdelivr.com/package/npm/hls.js)
 
 [![](https://www.netlify.com/img/global/badges/netlify-color-accent.svg)](https://www.netlify.com)
@@ -58,8 +58,8 @@ Find the commit on [https://github.com/video-dev/hls.js/blob/deployments/README.
 
 ```html
 <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
-<!-- Or if you want a more recent canary version -->
-<!-- <script src="https://cdn.jsdelivr.net/npm/hls.js@canary"></script> -->
+<!-- Or if you want a more recent alpha version -->
+<!-- <script src="https://cdn.jsdelivr.net/npm/hls.js@alpha"></script> -->
 <video id="video"></video>
 <script>
   var video = document.getElementById('video');
@@ -147,9 +147,9 @@ If you want to bundle the application yourself, use node
 ```
 npm install hls.js
 ```
-or for the version from master (canary)
+or for the version from master (alpha)
 ```
-npm install hls.js@canary
+npm install hls.js@alpha
 ```
 
 **NOTE:** `hls.light.*.js` dist files do not include subtitling and alternate-audio features.

demo/chart/timeline-chart.ts

@@ -90,7 +90,7 @@ export class TimelineChart {
     scale.options.ticks.min = 0;
     scale.options.ticks.max = 60;
     const config = this.chart.config;
-    if (config && config.options) {
+    if (config?.options) {
       config.options.plugins.zoom.zoom.rangeMax.x = 60;
     }
     labels.length = 0;
@@ -112,7 +112,7 @@ export class TimelineChart {
     if (this.hidden) {
       return;
     }
-    if (datasets && datasets.length) {
+    if (datasets?.length) {
       const scale = this.chart.scales[X_AXIS_SECONDS];
       const { top } = this.chart.chartArea;
       const height = top + datasets.reduce((val, dataset) => val + dataset.barThickness, 0) + scale.height + 5;
@@ -195,7 +195,7 @@ export class TimelineChart {
     const { targetduration, totalduration, url } = details;
     const { datasets } = this.chart.data;
     // eslint-disable-next-line no-restricted-properties
-    const levelDataSet = datasets.find(dataset => dataset.url && dataset.url.toString() === url);
+    const levelDataSet = arrayFind(datasets, dataset => dataset.url && dataset.url.toString() === url);
     if (!levelDataSet) {
       return;
     }
@@ -238,7 +238,7 @@ export class TimelineChart {
   set maxZoom (x: number) {
     const { chart } = this;
     const { config } = chart;
-    if (config && config.options) {
+    if (config?.options) {
       const currentZoom = config.options.plugins.zoom.zoom.rangeMax.x;
       const newZoom = Math.max(x, currentZoom);
       if (currentZoom === 60 && newZoom !== currentZoom) {
@@ -252,13 +252,12 @@ export class TimelineChart {
   updateFragment (data: any) {
     const { datasets } = this.chart.data;
     const frag: Fragment = data.frag;
-    // eslint-disable-next-line no-restricted-properties
-    const levelDataSet = datasets.find(dataset => dataset.url === frag.baseurl);
+    const levelDataSet = arrayFind(datasets, dataset => dataset.url === frag.baseurl);
     if (!levelDataSet) {
       return;
     }
     // eslint-disable-next-line no-restricted-properties
-    const fragData = levelDataSet.data.find(fragData => fragData.relurl === frag.relurl);
+    const fragData = arrayFind(levelDataSet.data, fragData => fragData.relurl === frag.relurl);
     if (fragData && fragData !== frag) {
       Object.assign(fragData, frag);
     }
@@ -631,3 +630,20 @@ function getChartOptions () {
     }
   };
 }
+
+function arrayFind (array, predicate) {
+  const len = array.length >>> 0;
+  if (typeof predicate !== 'function') {
+    throw TypeError('predicate must be a function');
+  }
+  const thisArg = arguments[2];
+  let k = 0;
+  while (k < len) {
+    const kValue = array[k];
+    if (predicate.call(thisArg, kValue, k, array)) {
+      return kValue;
+    }
+    k++;
+  }
+  return undefined;
+}

demo/main.js

@@ -1,9 +1,11 @@
-/* global $, Hls */
+/* global $, Hls, __NETLIFY__ */
 /* eslint camelcase: 0 */
 
 import { sortObject, copyTextToClipboard } from './demo-utils';
 import { TimelineChart } from './chart/timeline-chart';
 
+const NETLIFY = __NETLIFY__; // replaced in build
+
 const STORAGE_KEYS = {
   Editor_Persistence: 'hlsjs:config-editor-persist',
   Hls_Config: 'hlsjs:config'
@@ -110,8 +112,27 @@ $(document).ready(function () {
   $('#dumpfMP4').prop('checked', dumpfMP4);
   $('#levelCapping').val(levelCapping);
 
-  $('h2').append('&nbsp;<a target=_blank href=https://github.com/video-dev/hls.js/releases/tag/v' + Hls.version + '>v' + Hls.version + '</a>');
-  $('#currentVersion').html('Hls version:' + Hls.version);
+  // link to version on npm if canary
+  // github branch for a branch version
+  // github tag for a normal tag
+  // github PR for a pr
+  function getVersionLink (version) {
+    const alphaRegex = /[-.]0\.alpha\./;
+    if (alphaRegex.test(version)) {
+      return `https://www.npmjs.com/package/hls.js/v/${encodeURIComponent(version)}`;
+    } else if (NETLIFY.reviewID) {
+      return `https://github.com/video-dev/hls.js/pull/${NETLIFY.reviewID}`;
+    } else if (NETLIFY.branch) {
+      return `https://github.com/video-dev/hls.js/tree/${encodeURIComponent(NETLIFY.branch)}`;
+    }
+    return `https://github.com/video-dev/hls.js/releases/tag/v${encodeURIComponent(version)}`;
+  }
+
+  const version = Hls.version;
+  if (version) {
+    const $a = $('<a />').attr('target', '_blank').attr('href', getVersionLink(version)).text('v' + version);
+    $('.title').append($a);
+  }
 
   $('#streamURL').val(sourceURL);