From c9e32536a84f50021e53ab9c8ce32f94b483f3b7 Mon Sep 17 00:00:00 2001 From: Gary Katsevman Date: Thu, 12 Aug 2021 17:05:53 -0400 Subject: [PATCH 01/18] update to VJS 7.15.0 --- package-lock.json | 104 +++++++++++++--------------------------------- 1 file changed, 28 insertions(+), 76 deletions(-) diff --git a/package-lock.json b/package-lock.json index 2a70ec31f..dfb15ca55 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1336,49 +1336,18 @@ } }, "@videojs/http-streaming": { - "version": "2.7.1", - "resolved": "https://registry.npmjs.org/@videojs/http-streaming/-/http-streaming-2.7.1.tgz", - "integrity": "sha512-e7I5zHtTklNlBXhWnl2Nla+8hqjXzKXauAVK8cmcN0b6keqwW3WQDfAAnAzzAGf3CvxDUVudRcWGQqtNrXYjmQ==", + "version": "2.10.0", + "resolved": "https://registry.npmjs.org/@videojs/http-streaming/-/http-streaming-2.10.0.tgz", + "integrity": "sha512-MoAp5BbexEqvCdyyazWH3thXpuOOUt82qjKB37VumXQiSZfNrIFgJRgdXOwHqsO4iEksWHSQRhJNxlTDMSP4dg==", "requires": { "@babel/runtime": "^7.12.5", - "@videojs/vhs-utils": "^3.0.0", + "@videojs/vhs-utils": "3.0.3", "aes-decrypter": "3.1.2", "global": "^4.4.0", - "m3u8-parser": "4.6.0", - "mpd-parser": "0.16.0", - "mux.js": "5.11.0", + "m3u8-parser": "4.7.0", + "mpd-parser": "0.18.0", + "mux.js": "5.12.2", "video.js": "^6 || ^7" - }, - "dependencies": { - "m3u8-parser": { - "version": "4.6.0", - "resolved": "https://registry.npmjs.org/m3u8-parser/-/m3u8-parser-4.6.0.tgz", - "integrity": "sha512-dKhhpMcPqDM/KzULVrNyDZ/z766peQjwUghDTcl6TE7DQKAt/vm74/IMUAxpO34f6LDpM+OH/dYGQwW1eM4yWw==", - "requires": { - "@babel/runtime": "^7.12.5", - "@videojs/vhs-utils": "^3.0.0", - "global": "^4.4.0" - } - }, - "mpd-parser": { - "version": "0.16.0", - "resolved": "https://registry.npmjs.org/mpd-parser/-/mpd-parser-0.16.0.tgz", - "integrity": "sha512-/pOFsDbOxXFAla47rYMdIypBZVtsQ9q3OHNuKtW2CJMaCGtNDtUcLS+B2TToYmB20rgi3XIgkyc2EsIvIAS4NA==", - "requires": { - "@babel/runtime": "^7.12.5", - "@videojs/vhs-utils": "^3.0.0", - "global": "^4.4.0", - "xmldom": "^0.5.0" - } - }, - "mux.js": { - "version": "5.11.0", - "resolved": "https://registry.npmjs.org/mux.js/-/mux.js-5.11.0.tgz", - "integrity": "sha512-Q/iLfohHh5Pp6lW7EFtcxNuaCNJ3Ruywfy46pWLsY+yIxR1kXXImYY1wOhg8jLdBMs1kRaZqsiB4Zncsiw0a2Q==", - "requires": { - "@babel/runtime": "^7.11.2" - } - } } }, "@videojs/vhs-utils": { @@ -1392,9 +1361,9 @@ } }, "@videojs/xhr": { - "version": "2.5.1", - "resolved": "https://registry.npmjs.org/@videojs/xhr/-/xhr-2.5.1.tgz", - "integrity": "sha512-wV9nGESHseSK+S9ePEru2+OJZ1jq/ZbbzniGQ4weAmTIepuBMSYPx5zrxxQA0E786T5ykpO8ts+LayV+3/oI2w==", + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/@videojs/xhr/-/xhr-2.6.0.tgz", + "integrity": "sha512-7J361GiN1tXpm+gd0xz2QWr3xNWBE+rytvo8J3KuggFaLg+U37gZQ2BuPLcnkfGffy2e+ozY70RHC8jt7zjA6Q==", "requires": { "@babel/runtime": "^7.5.5", "global": "~4.4.0", @@ -6274,6 +6243,7 @@ "version": "0.25.7", "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.7.tgz", "integrity": "sha512-4CrMT5DOHTDk4HYDlzmwu4FVCcIYI8gauveasrdCu2IKIFOJ3f0v/8MDGJCDL9oD2ppz/Av1b0Nj345H9M+XIA==", + "dev": true, "requires": { "sourcemap-codec": "^1.4.4" } @@ -7693,15 +7663,6 @@ "rollup-pluginutils": "^2.0.1" } }, - "rollup-plugin-replace": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/rollup-plugin-replace/-/rollup-plugin-replace-2.2.0.tgz", - "integrity": "sha512-/5bxtUPkDHyBJAKketb4NfaeZjL5yLZdeUihSfbF2PQMz+rSTEb8ARKoOl3UBT4m7/X+QOXJo3sLTcq+yMMYTA==", - "requires": { - "magic-string": "^0.25.2", - "rollup-pluginutils": "^2.6.0" - } - }, "rollup-plugin-terser": { "version": "7.0.2", "resolved": "https://registry.npmjs.org/rollup-plugin-terser/-/rollup-plugin-terser-7.0.2.tgz", @@ -7727,6 +7688,7 @@ "version": "2.8.2", "resolved": "https://registry.npmjs.org/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz", "integrity": "sha512-EEp9NhnUkwY8aif6bxgovPHMoMoNr2FulJziTndpt5H9RdwC47GSGuII9XxpSdzVGM0GWrNPHV6ie1LTNJPaLQ==", + "dev": true, "requires": { "estree-walker": "^0.6.1" }, @@ -7734,7 +7696,8 @@ "estree-walker": { "version": "0.6.1", "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-0.6.1.tgz", - "integrity": "sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w==" + "integrity": "sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w==", + "dev": true } } }, @@ -8241,7 +8204,8 @@ "sourcemap-codec": { "version": "1.4.8", "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz", - "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==" + "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==", + "dev": true }, "spawn-sync": { "version": "1.0.15", @@ -9086,35 +9050,23 @@ } }, "video.js": { - "version": "7.12.1", - "resolved": "https://registry.npmjs.org/video.js/-/video.js-7.12.1.tgz", - "integrity": "sha512-0Owl7q4Zbm6YHX94P9WVqQ2vnpfeNyOtTNwuTEEoKovZogoqV2McOUmsQGM4Edtg4vGTiP74Fv6HVa1V6FeRfg==", + "version": "7.15.0", + "resolved": "https://registry.npmjs.org/video.js/-/video.js-7.15.0.tgz", + "integrity": "sha512-ynUcjmbcfHfCqwqwAXAMGCcBeRgWBuqIW1PxomK6jfVhS8Vii+hckSBCVETpDPvVH6UmlsFLgJxADskyKdXj8A==", "requires": { - "@babel/runtime": "^7.9.2", - "@videojs/http-streaming": "2.7.1", - "@videojs/xhr": "2.5.1", - "global": "4.3.2", + "@babel/runtime": "^7.12.5", + "@videojs/http-streaming": "2.10.0", + "@videojs/vhs-utils": "^3.0.3", + "@videojs/xhr": "2.6.0", + "aes-decrypter": "3.1.2", + "global": "^4.4.0", "keycode": "^2.2.0", - "rollup-plugin-replace": "^2.2.0", + "m3u8-parser": "4.7.0", + "mpd-parser": "0.18.0", + "mux.js": "5.12.2", "safe-json-parse": "4.0.0", "videojs-font": "3.2.0", "videojs-vtt.js": "^0.15.3" - }, - "dependencies": { - "global": { - "version": "4.3.2", - "resolved": "https://registry.npmjs.org/global/-/global-4.3.2.tgz", - "integrity": "sha1-52mJJopsdMOJCLEwWxD8DjlOnQ8=", - "requires": { - "min-document": "^2.19.0", - "process": "~0.5.1" - } - }, - "process": { - "version": "0.5.2", - "resolved": "https://registry.npmjs.org/process/-/process-0.5.2.tgz", - "integrity": "sha1-FjjYqONML0QKkduVq5rrZ3/Bhc8=" - } } }, "videojs-contrib-eme": { From 9553f0e9fc4d11be3a8659a747f832d55ec5e6b3 Mon Sep 17 00:00:00 2001 From: Gary Katsevman Date: Thu, 12 Aug 2021 18:00:48 -0400 Subject: [PATCH 02/18] new demo page for experimentation --- demo.html | 149 ++++++++++++ scripts/demo-page.js | 539 +++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 688 insertions(+) create mode 100644 demo.html create mode 100644 scripts/demo-page.js diff --git a/demo.html b/demo.html new file mode 100644 index 000000000..20f81c520 --- /dev/null +++ b/demo.html @@ -0,0 +1,149 @@ + + + + + videojs-http-streaming Demo + + + + + + + +
+
+ + +

Options

+ +
+ + + + + + + + + + + + +
+ +

Load a URL

+ + + + + + + +

Load a Source

+ +

Navigation

+ + + + + + diff --git a/scripts/demo-page.js b/scripts/demo-page.js new file mode 100644 index 000000000..433bbe226 --- /dev/null +++ b/scripts/demo-page.js @@ -0,0 +1,539 @@ +/* global window document */ +/* eslint-disable vars-on-top, no-var, object-shorthand, no-console */ +(function(window) { + var representationsEl = document.getElementById('representations'); + + representationsEl.addEventListener('change', function() { + var selectedIndex = representationsEl.selectedIndex; + + if (!selectedIndex || selectedIndex < 1 || !window.vhs) { + return; + } + var selectedOption = representationsEl.options[representationsEl.selectedIndex]; + + if (!selectedOption) { + return; + } + + var id = selectedOption.value; + + window.vhs.representations().forEach(function(rep) { + rep.playlist.disabled = rep.id !== id; + }); + + window.mpc.fastQualityChange_(); + }); + var isManifestObjectType = function(url) { + return (/application\/vnd\.videojs\.vhs\+json/).test(url); + }; + var hlsOptGroup = document.querySelector('[label="hls"]'); + var dashOptGroup = document.querySelector('[label="dash"]'); + var drmOptGroup = document.querySelector('[label="drm"]'); + var liveOptGroup = document.querySelector('[label="live"]'); + var llliveOptGroup = document.querySelector('[label="low latency live"]'); + var manifestOptGroup = document.querySelector('[label="json manifest object"]'); + + // get the sources list squared away + var xhr = new window.XMLHttpRequest(); + + xhr.addEventListener('load', function() { + var sources = JSON.parse(xhr.responseText); + + sources.forEach(function(source) { + var option = document.createElement('option'); + + option.innerText = source.name; + option.value = source.uri; + + if (source.keySystems) { + option.setAttribute('data-key-systems', JSON.stringify(source.keySystems, null, 2)); + } + + if (source.mimetype) { + option.setAttribute('data-mimetype', source.mimetype); + } + + if (source.features.indexOf('low-latency') !== -1) { + llliveOptGroup.appendChild(option); + } else if (source.features.indexOf('live') !== -1) { + liveOptGroup.appendChild(option); + } else if (source.keySystems) { + drmOptGroup.appendChild(option); + } else if (source.mimetype === 'application/x-mpegurl') { + hlsOptGroup.appendChild(option); + } else if (source.mimetype === 'application/dash+xml') { + dashOptGroup.appendChild(option); + } + }); + + }); + xhr.open('GET', './scripts/sources.json'); + xhr.send(); + + var hlsManifestXhr = new window.XMLHttpRequest(); + + hlsManifestXhr.addEventListener('load', function() { + var hlsManifest = hlsManifestXhr.responseText; + var option = document.createElement('option'); + + option.innerText = 'HLS Manifest Object Test, does not survive page reload'; + option.value = `data:application/vnd.videojs.vhs+json,${hlsManifest}`; + + manifestOptGroup.appendChild(option); + }); + hlsManifestXhr.open('GET', './scripts/hls-manifest-object.json'); + hlsManifestXhr.send(); + + var dashManifestXhr = new window.XMLHttpRequest(); + + dashManifestXhr.addEventListener('load', function() { + var dashManifest = dashManifestXhr.responseText; + var option = document.createElement('option'); + + option.innerText = 'Dash Manifest Object Test, does not survive page reload'; + option.value = `data:application/vnd.videojs.vhs+json,${dashManifest}`; + + manifestOptGroup.appendChild(option); + }); + dashManifestXhr.open('GET', './scripts/dash-manifest-object.json'); + dashManifestXhr.send(); + + // all relevant elements + var urlButton = document.getElementById('load-url'); + var sources = document.getElementById('load-source'); + var stateEls = {}; + + var getInputValue = function(el) { + if (el.type === 'url' || el.type === 'text' || el.nodeName.toLowerCase() === 'textarea') { + if (isManifestObjectType(el.value)) { + return ''; + } + return encodeURIComponent(el.value); + } else if (el.type === 'select-one') { + return el.options[el.selectedIndex].value; + } else if (el.type === 'checkbox') { + return el.checked; + } + + console.warn('unhandled input type ' + el.type); + return ''; + }; + + var setInputValue = function(el, value) { + if (el.type === 'url' || el.type === 'text' || el.nodeName.toLowerCase() === 'textarea') { + el.value = decodeURIComponent(value); + } else if (el.type === 'select-one') { + for (var i = 0; i < el.options.length; i++) { + if (el.options[i].value === value) { + el.options[i].selected = true; + } + } + } else { + // get the `value` into a Boolean. + el.checked = JSON.parse(value); + } + + }; + + var newEvent = function(name) { + var event; + + if (typeof window.Event === 'function') { + event = new window.Event(name); + } else { + event = document.createEvent('Event'); + event.initEvent(name, true, true); + } + + return event; + }; + + // taken from video.js + var getFileExtension = function(path) { + var splitPathRe; + var pathParts; + + if (typeof path === 'string') { + splitPathRe = /^(\/?)([\s\S]*?)((?:\.{1,2}|[^\/]*?)(\.([^\.\/\?]+)))(?:[\/]*|[\?].*)$/i; + pathParts = splitPathRe.exec(path); + + if (pathParts) { + return pathParts.pop().toLowerCase(); + } + } + + return ''; + }; + + var saveState = function() { + var query = ''; + + if (!window.history.replaceState) { + return; + } + + Object.keys(stateEls).forEach(function(elName) { + var symbol = query.length ? '&' : '?'; + + query += symbol + elName + '=' + getInputValue(stateEls[elName]); + }); + + window.history.replaceState({}, 'vhs demo', query); + }; + + window.URLSearchParams = window.URLSearchParams || function(locationSearch) { + this.get = function(name) { + var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(locationSearch); + + return results ? decodeURIComponent(results[1]) : null; + }; + }; + + // eslint-disable-next-line + var loadState = function() { + var params = new window.URLSearchParams(window.location.search); + + return Object.keys(stateEls).reduce(function(acc, elName) { + acc[elName] = typeof params.get(elName) !== 'object' ? params.get(elName) : getInputValue(stateEls[elName]); + return acc; + }, {}); + }; + + // eslint-disable-next-line + var reloadScripts = function(urls, cb) { + var el = document.getElementById('reload-scripts'); + + if (!el) { + el = document.createElement('div'); + el.id = 'reload-scripts'; + document.body.appendChild(el); + } + + while (el.firstChild) { + el.removeChild(el.firstChild); + } + + var loaded = []; + + var checkDone = function() { + if (loaded.length === urls.length) { + cb(); + } + }; + + urls.forEach(function(url) { + var script = document.createElement('script'); + + // scripts marked as defer will be loaded asynchronously but will be executed in the order they are in the DOM + script.defer = true; + // dynamically created scripts are async by default unless otherwise specified + // async scripts are loaded asynchronously but also executed as soon as they are loaded + // we want to load them in the order they are added therefore we want to turn off async + script.async = false; + script.src = url; + script.onload = function() { + loaded.push(url); + checkDone(); + }; + el.appendChild(script); + }); + }; + + var regenerateRepresentations = function() { + while (representationsEl.firstChild) { + representationsEl.removeChild(representationsEl.firstChild); + } + + var selectedIndex; + + window.vhs.representations().forEach(function(rep, i) { + var option = document.createElement('option'); + + option.value = rep.id; + option.innerText = JSON.stringify({ + id: rep.id, + videoCodec: rep.codecs.video, + audioCodec: rep.codecs.audio, + bandwidth: rep.bandwidth, + heigth: rep.heigth, + width: rep.width + }); + + if (window.mpc.media().id === rep.id) { + selectedIndex = i; + } + + representationsEl.appendChild(option); + }); + + representationsEl.selectedIndex = selectedIndex; + }; + + [ + 'debug', + 'autoplay', + 'muted', + 'minified', + 'sync-workers', + 'liveui', + 'llhls', + 'url', + 'type', + 'keysystems', + 'buffer-water', + 'exact-manifest-timings', + 'pixel-diff-selector', + 'override-native', + 'preload', + 'mirror-source' + ].forEach(function(name) { + stateEls[name] = document.getElementById(name); + }); + + window.startDemo = function(cb) { + var state = loadState(); + + Object.keys(state).forEach(function(elName) { + setInputValue(stateEls[elName], state[elName]); + }); + + Array.prototype.forEach.call(sources.options, function(s, i) { + if (s.value === state.url) { + sources.selectedIndex = i; + } + }); + + stateEls.muted.addEventListener('change', function(event) { + saveState(); + window.player.muted(event.target.checked); + }); + + stateEls.autoplay.addEventListener('change', function(event) { + saveState(); + window.player.autoplay(event.target.checked); + }); + + // stateEls that reload the player and scripts + [ + 'mirror-source', + 'sync-workers', + 'preload', + 'llhls', + 'buffer-water', + 'override-native', + 'liveui', + 'pixel-diff-selector', + 'exact-manifest-timings' + ].forEach(function(name) { + stateEls[name].addEventListener('change', function(event) { + saveState(); + + stateEls.minified.dispatchEvent(newEvent('change')); + }); + }); + + stateEls.debug.addEventListener('change', function(event) { + saveState(); + window.videojs.log.level(event.target.checked ? 'debug' : 'info'); + }); + + stateEls.minified.addEventListener('change', function(event) { + var urls = [ + 'node_modules/video.js/dist/alt/video.core', + 'node_modules/videojs-contrib-eme/dist/videojs-contrib-eme', + 'node_modules/videojs-contrib-quality-levels/dist/videojs-contrib-quality-levels', + 'node_modules/videojs-http-source-selector/dist/videojs-http-source-selector' + ].map(function(url) { + return url + (event.target.checked ? '.min' : '') + '.js'; + }); + + if (stateEls['sync-workers'].checked) { + urls.push('dist/videojs-http-streaming-sync-workers.js'); + } else { + urls.push('dist/videojs-http-streaming' + (event.target.checked ? '.min' : '') + '.js'); + } + + saveState(); + + if (window.player) { + window.player.dispose(); + delete window.player; + } + if (window.videojs) { + delete window.videojs; + } + + reloadScripts(urls, function() { + var player; + var fixture = document.getElementById('player-fixture'); + var videoEl = document.createElement('video-js'); + + videoEl.setAttribute('controls', ''); + videoEl.setAttribute('preload', stateEls.preload.options[stateEls.preload.selectedIndex].value || 'auto'); + videoEl.className = 'vjs-default-skin'; + fixture.appendChild(videoEl); + + var mirrorSource = getInputValue(stateEls['mirror-source']); + + player = window.player = window.videojs(videoEl, { + plugins: { + httpSourceSelector: { + default: 'auto' + } + }, + liveui: stateEls.liveui.checked, + enableSourceset: mirrorSource, + html5: { + vhs: { + overrideNative: getInputValue(stateEls['override-native']), + experimentalBufferBasedABR: getInputValue(stateEls['buffer-water']), + experimentalLLHLS: getInputValue(stateEls.llhls), + experimentalExactManifestTimings: getInputValue(stateEls['exact-manifest-timings']), + experimentalLeastPixelDiffSelector: getInputValue(stateEls['pixel-diff-selector']) + } + } + }); + + player.on('sourceset', function() { + var source = player.currentSource(); + + if (source.keySystems) { + var copy = JSON.parse(JSON.stringify(source.keySystems)); + + // have to delete pssh as it will often make keySystems too big + // for a uri + Object.keys(copy).forEach(function(key) { + if (copy[key].hasOwnProperty('pssh')) { + delete copy[key].pssh; + } + }); + + stateEls.keysystems.value = JSON.stringify(copy, null, 2); + } + + if (source.src) { + stateEls.url.value = encodeURI(source.src); + } + + if (source.type) { + stateEls.type.value = source.type; + } + + saveState(); + }); + + player.width(640); + player.height(264); + + // configure videojs-contrib-eme + player.eme(); + + stateEls.debug.dispatchEvent(newEvent('change')); + stateEls.muted.dispatchEvent(newEvent('change')); + stateEls.autoplay.dispatchEvent(newEvent('change')); + + // run the load url handler for the intial source + if (stateEls.url.value) { + urlButton.dispatchEvent(newEvent('click')); + } else { + sources.dispatchEvent(newEvent('change')); + } + player.on('loadedmetadata', function() { + if (player.tech_.vhs) { + window.vhs = player.tech_.vhs; + window.mpc = player.tech_.vhs.masterPlaylistController_; + window.mpc.masterPlaylistLoader_.on('mediachange', regenerateRepresentations); + regenerateRepresentations(); + + } else { + window.vhs = null; + window.mpc = null; + } + }); + cb(player); + }); + }); + + var urlButtonClick = function(event) { + var ext; + var type = stateEls.type.value; + + // reset type if it's a manifest object's type + if (type === 'application/vnd.videojs.vhs+json') { + type = ''; + } + + if (isManifestObjectType(stateEls.url.value)) { + type = 'application/vnd.videojs.vhs+json'; + } + + if (!type.trim()) { + ext = getFileExtension(stateEls.url.value); + + if (ext === 'mpd') { + type = 'application/dash+xml'; + } else if (ext === 'm3u8') { + type = 'application/x-mpegURL'; + } + } + + saveState(); + + var source = { + src: stateEls.url.value, + type: type + }; + + if (stateEls.keysystems.value) { + source.keySystems = JSON.parse(stateEls.keysystems.value); + } + + sources.selectedIndex = -1; + + Array.prototype.forEach.call(sources.options, function(s, i) { + if (s.value === stateEls.url.value) { + sources.selectedIndex = i; + } + }); + + window.player.src(source); + }; + + urlButton.addEventListener('click', urlButtonClick); + urlButton.addEventListener('tap', urlButtonClick); + + sources.addEventListener('change', function(event) { + var selectedOption = sources.options[sources.selectedIndex]; + + if (!selectedOption) { + return; + } + var src = selectedOption.value; + + stateEls.url.value = src; + stateEls.type.value = selectedOption.getAttribute('data-mimetype'); + stateEls.keysystems.value = selectedOption.getAttribute('data-key-systems'); + + urlButton.dispatchEvent(newEvent('click')); + }); + + stateEls.url.addEventListener('keyup', function(event) { + if (event.key === 'Enter') { + urlButton.click(); + } + }); + stateEls.url.addEventListener('input', function(event) { + if (stateEls.type.value.length) { + stateEls.type.value = ''; + } + }); + stateEls.type.addEventListener('keyup', function(event) { + if (event.key === 'Enter') { + urlButton.click(); + } + }); + + // run the change handler for the first time + stateEls.minified.dispatchEvent(newEvent('change')); + }; +}(window)); From ae1611cd74c95d441db44a737e10c4bffbde9e43 Mon Sep 17 00:00:00 2001 From: Gary Katsevman Date: Thu, 12 Aug 2021 19:40:23 -0400 Subject: [PATCH 03/18] add bootstrap --- package-lock.json | 6 ++++++ package.json | 1 + 2 files changed, 7 insertions(+) diff --git a/package-lock.json b/package-lock.json index dfb15ca55..b6146d576 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1932,6 +1932,12 @@ "type-is": "~1.6.17" } }, + "bootstrap": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.0.tgz", + "integrity": "sha512-bs74WNI9BgBo3cEovmdMHikSKoXnDgA6VQjJ7TyTotU6L7d41ZyCEEelPwkYEzsG/Zjv3ie9IE3EMAje0W9Xew==", + "dev": true + }, "boundary": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/boundary/-/boundary-1.0.1.tgz", diff --git a/package.json b/package.json index 7c697dca7..0ac87c527 100644 --- a/package.json +++ b/package.json @@ -72,6 +72,7 @@ "@rollup/plugin-replace": "^2.3.4", "@rollup/plugin-strip": "^2.0.1", "@videojs/generator-helpers": "~2.0.1", + "bootstrap": "^5.1.0", "d3": "^3.4.8", "es5-shim": "^4.5.13", "es6-shim": "^0.35.5", From c837bdeeb6221b89a9b2c3a0649f4e4c9ba6f4fc Mon Sep 17 00:00:00 2001 From: Gary Katsevman Date: Thu, 12 Aug 2021 19:40:55 -0400 Subject: [PATCH 04/18] convert to bootstrap tabs and prettify --- demo.html | 228 ++++++++++++++++++++++++++----------------- scripts/demo-page.js | 2 +- 2 files changed, 137 insertions(+), 93 deletions(-) diff --git a/demo.html b/demo.html index 20f81c520..1f8dff0b2 100644 --- a/demo.html +++ b/demo.html @@ -4,6 +4,7 @@ videojs-http-streaming Demo + - -
-
- - -

Options

- -
- - - - - - - - - - - - -
-

Load a URL

- - - - - - - -

Load a Source

- -

Navigation

-
    -
  • Run unit tests in browser.
    • -
  • Read generated docs.
    • -
  • Stats
    • +
    + + VHS logo showcasing a VHS tape with the Video.js logo on the label + VHS: videojs-http-streaming + +
    + +
    + + +
    + +
    +

    Load a URL

    + + +
    + + +
    + + +
    + + +
    + + +
    + + +
    + + + +

    Load a Source

    + + +
    + +
    + +
    + + +
    +
    + +
    +

    Options

    + +
    + + + + + + + + + + + + +
    +
    + +
    + + From 854714f6484825c925007058db29266b87717e91 Mon Sep 17 00:00:00 2001 From: Gary Katsevman Date: Mon, 16 Aug 2021 12:32:25 -0400 Subject: [PATCH 10/18] player stats --- demo.html | 28 +++++++++++ scripts/demo-page.js | 112 +++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 140 insertions(+) diff --git a/demo.html b/demo.html index cd4838e5c..3cfb0f4e2 100644 --- a/demo.html +++ b/demo.html @@ -41,6 +41,9 @@ +
@@ -171,6 +174,31 @@
+
+
+
+
Current Time:
+
0
+
Buffered:
+
-
+
Video Buffered:
+
-
+
Audio Buffered:
+
-
+
Seekable:
+
- - -
+
Video Bitrate:
+
0 kbps
+
Measured Bitrate:
+
0 kbps
+
Video Timestamp Offset
+
0
+
Audio Timestamp Offset
+
0
+
+
+
+ diff --git a/scripts/demo-page.js b/scripts/demo-page.js index 6387f449e..7f7a9b271 100644 --- a/scripts/demo-page.js +++ b/scripts/demo-page.js @@ -269,6 +269,116 @@ representationsEl.selectedIndex = selectedIndex; }; + function getBuffered(buffered) { + var bufferedText = ''; + + if (!buffered) { + return bufferedText; + } + + if (buffered.length) { + bufferedText += buffered.start(0) + ' - ' + buffered.end(0); + } + for (i = 1; i < buffered.length; i++) { + bufferedText += ', ' + buffered.start(i) + ' - ' + buffered.end(i); + } + return bufferedText; + } + + var setupPlayerStats = function(player) { + var currentTimeStat = document.querySelector('.current-time-stat'); + var bufferedStat = document.querySelector('.buffered-stat'); + var videoBufferedStat = document.querySelector('.video-buffered-stat'); + var audioBufferedStat = document.querySelector('.audio-buffered-stat'); + var seekableStartStat = document.querySelector('.seekable-start-stat'); + var seekableEndStat = document.querySelector('.seekable-end-stat'); + var videoBitrateState = document.querySelector('.video-bitrate-stat'); + var measuredBitrateStat = document.querySelector('.measured-bitrate-stat'); + var videoTimestampOffset = document.querySelector('.video-timestampoffset'); + var audioTimestampOffset = document.querySelector('.audio-timestampoffset'); + var qualityButtons = document.querySelector('.quality-buttons'); + + player.on('timeupdate', function() { + currentTimeStat.textContent = player.currentTime().toFixed(1); + }); + + window.stats_timer = window.setInterval(function() { + var bufferedText = '', oldStart, oldEnd, i; + + // seekable + var seekable = player.seekable(); + if (seekable && seekable.length) { + + oldStart = seekableStartStat.textContent; + if (seekable.start(0).toFixed(1) !== oldStart) { + seekableStartStat.textContent = seekable.start(0).toFixed(1); + } + oldEnd = seekableEndStat.textContent; + if (seekable.end(0).toFixed(1) !== oldEnd) { + seekableEndStat.textContent = seekable.end(0).toFixed(1); + } + } + + // buffered + bufferedStat.textContent = getBuffered(player.buffered()); + + // exit early if no VHS + if (!player.tech(true).vhs) { + videoBufferedStat.textContent = ''; + audioBufferedStat.textContent = ''; + videoBitrateState.textContent = ''; + measuredBitrateStat.textContent = ''; + videoTimestampOffset.textContent = ''; + audioTimestampOffset.textContent = ''; + return; + } + + videoBufferedStat.textContent = getBuffered( + player.tech(true).vhs.masterPlaylistController_.mainSegmentLoader_.sourceUpdater_.videoBuffer && + player.tech(true).vhs.masterPlaylistController_.mainSegmentLoader_.sourceUpdater_.videoBuffer.buffered + ); + + // demuxed audio + var audioBuffer = getBuffered( + player.tech(true).vhs.masterPlaylistController_.audioSegmentLoader_.sourceUpdater_.audioBuffer && + player.tech(true).vhs.masterPlaylistController_.audioSegmentLoader_.sourceUpdater_.audioBuffer.buffered + ); + + // muxed audio + if (!audioBuffer) { + audioBuffer = getBuffered( + player.tech(true).vhs.masterPlaylistController_.mainSegmentLoader_.sourceUpdater_.audioBuffer && + player.tech(true).vhs.masterPlaylistController_.mainSegmentLoader_.sourceUpdater_.audioBuffer.buffered + ); + } + audioBufferedStat.textContent = audioBuffer; + + if (player.tech(true).vhs.masterPlaylistController_.audioSegmentLoader_.sourceUpdater_.audioBuffer) { + audioTimestampOffset.textContent = player.tech(true).vhs.masterPlaylistController_.audioSegmentLoader_.sourceUpdater_.audioBuffer.timestampOffset; + } else if (player.tech(true).vhs.masterPlaylistController_.mainSegmentLoader_.sourceUpdater_.audioBuffer) { + audioTimestampOffset.textContent = player.tech(true).vhs.masterPlaylistController_.mainSegmentLoader_.sourceUpdater_.audioBuffer.timestampOffset; + } + + if (player.tech(true).vhs.masterPlaylistController_.mainSegmentLoader_.sourceUpdater_.videoBuffer) { + videoTimestampOffset.textContent = player.tech(true).vhs.masterPlaylistController_.mainSegmentLoader_.sourceUpdater_.videoBuffer.timestampOffset; + } + + // bitrates + var playlist = player.tech_.vhs.playlists.media(); + if (playlist && playlist.attributes && playlist.attributes.BANDWIDTH) { + videoBitrateState.textContent = (playlist.attributes.BANDWIDTH / 1024).toLocaleString(undefined, { + maximumFractionDigits: 1 + }) + ' kbps'; + } + if (player.tech_.vhs.bandwidth) { + measuredBitrateStat.textContent = (player.tech_.vhs.bandwidth / 1024).toLocaleString(undefined, { + maximumFractionDigits: 1 + }) + ' kbps'; + } + + }, 100); + }; + [ 'debug', 'autoplay', @@ -407,6 +517,8 @@ } }); + setupPlayerStats(player); + player.on('sourceset', function() { var source = player.currentSource(); From 252a0beed8ca5a9679a01d2d04447c2bf7cc83ab Mon Sep 17 00:00:00 2001 From: Gary Katsevman Date: Mon, 16 Aug 2021 12:33:36 -0400 Subject: [PATCH 11/18] segment metadata --- demo.html | 53 ++++++++++++++++++++++++++------------------ scripts/demo-page.js | 43 +++++++++++++++++++++++++++++++++++ 2 files changed, 75 insertions(+), 21 deletions(-) diff --git a/demo.html b/demo.html index 3cfb0f4e2..6e45202a8 100644 --- a/demo.html +++ b/demo.html @@ -18,6 +18,14 @@ #player-fixture { min-height: 250px; } + #segment-metadata { + list-style: none; + } + #segment-metadata pre { + overflow: scroll; + padding: 0.5em; + background-color: lightgray; + } @@ -175,27 +183,30 @@
-
-
-
Current Time:
-
0
-
Buffered:
-
-
-
Video Buffered:
-
-
-
Audio Buffered:
-
-
-
Seekable:
-
- - -
-
Video Bitrate:
-
0 kbps
-
Measured Bitrate:
-
0 kbps
-
Video Timestamp Offset
-
0
-
Audio Timestamp Offset
-
0
-
+
+
+
+
Current Time:
+
0
+
Buffered:
+
-
+
Video Buffered:
+
-
+
Audio Buffered:
+
-
+
Seekable:
+
- - -
+
Video Bitrate:
+
0 kbps
+
Measured Bitrate:
+
0 kbps
+
Video Timestamp Offset
+
0
+
Audio Timestamp Offset
+
0
+
+
+
    diff --git a/scripts/demo-page.js b/scripts/demo-page.js index 7f7a9b271..3f7b9535f 100644 --- a/scripts/demo-page.js +++ b/scripts/demo-page.js @@ -285,6 +285,48 @@ return bufferedText; } + var setupSegmentMetadata = function(player) { + // setup segment metadata + var segmentMetadata = document.querySelector('#segment-metadata'); + + player.one('loadedmetadata', function() { + var tracks = player.textTracks(); + var segmentMetadataTrack; + var i = 0; + + for (i = 0; i < tracks.length; i++) { + if (tracks[i].label === 'segment-metadata') { + segmentMetadataTrack = tracks[i]; + } + } + + while (segmentMetadata.children.length) { + segmentMetadata.removeChild(segmentMetadata.firstChild); + } + + if (segmentMetadataTrack) { + segmentMetadataTrack.addEventListener('cuechange', function() { + var cues = segmentMetadataTrack.activeCues || []; + var i; + + while (segmentMetadata.children.length) { + segmentMetadata.removeChild(segmentMetadata.firstChild); + } + + for (i = 0; i < cues.length; i++) { + var text = JSON.stringify(JSON.parse(cues[i].text), null, 2); + + var li = document.createElement('li') + var pre = document.createElement('pre'); + pre.textContent = text; + li.appendChild(pre); + segmentMetadata.appendChild(li); + } + }); + } + }); + }; + var setupPlayerStats = function(player) { var currentTimeStat = document.querySelector('.current-time-stat'); var bufferedStat = document.querySelector('.buffered-stat'); @@ -518,6 +560,7 @@ }); setupPlayerStats(player); + setupSegmentMetadata(player); player.on('sourceset', function() { var source = player.currentSource(); From 926388dcdf50f29edc0895f80cde1c1452028724 Mon Sep 17 00:00:00 2001 From: Gary Katsevman Date: Mon, 16 Aug 2021 12:40:44 -0400 Subject: [PATCH 12/18] fix linter errors --- scripts/demo-page.js | 48 +++++++++++++++++++++----------------------- 1 file changed, 23 insertions(+), 25 deletions(-) diff --git a/scripts/demo-page.js b/scripts/demo-page.js index 3f7b9535f..0c70ca4f2 100644 --- a/scripts/demo-page.js +++ b/scripts/demo-page.js @@ -279,7 +279,7 @@ if (buffered.length) { bufferedText += buffered.start(0) + ' - ' + buffered.end(0); } - for (i = 1; i < buffered.length; i++) { + for (var i = 1; i < buffered.length; i++) { bufferedText += ', ' + buffered.start(i) + ' - ' + buffered.end(i); } return bufferedText; @@ -292,9 +292,8 @@ player.one('loadedmetadata', function() { var tracks = player.textTracks(); var segmentMetadataTrack; - var i = 0; - for (i = 0; i < tracks.length; i++) { + for (var i = 0; i < tracks.length; i++) { if (tracks[i].label === 'segment-metadata') { segmentMetadataTrack = tracks[i]; } @@ -307,17 +306,16 @@ if (segmentMetadataTrack) { segmentMetadataTrack.addEventListener('cuechange', function() { var cues = segmentMetadataTrack.activeCues || []; - var i; while (segmentMetadata.children.length) { segmentMetadata.removeChild(segmentMetadata.firstChild); } - for (i = 0; i < cues.length; i++) { - var text = JSON.stringify(JSON.parse(cues[i].text), null, 2); - - var li = document.createElement('li') + for (var j = 0; j < cues.length; j++) { + var text = JSON.stringify(JSON.parse(cues[j].text), null, 2); + var li = document.createElement('li'); var pre = document.createElement('pre'); + pre.textContent = text; li.appendChild(pre); segmentMetadata.appendChild(li); @@ -338,17 +336,16 @@ var measuredBitrateStat = document.querySelector('.measured-bitrate-stat'); var videoTimestampOffset = document.querySelector('.video-timestampoffset'); var audioTimestampOffset = document.querySelector('.audio-timestampoffset'); - var qualityButtons = document.querySelector('.quality-buttons'); player.on('timeupdate', function() { currentTimeStat.textContent = player.currentTime().toFixed(1); }); - window.stats_timer = window.setInterval(function() { - var bufferedText = '', oldStart, oldEnd, i; - - // seekable + window.statsTimer = window.setInterval(function() { + var oldStart; + var oldEnd; var seekable = player.seekable(); + if (seekable && seekable.length) { oldStart = seekableStartStat.textContent; @@ -375,28 +372,23 @@ return; } - videoBufferedStat.textContent = getBuffered( - player.tech(true).vhs.masterPlaylistController_.mainSegmentLoader_.sourceUpdater_.videoBuffer && - player.tech(true).vhs.masterPlaylistController_.mainSegmentLoader_.sourceUpdater_.videoBuffer.buffered - ); + videoBufferedStat.textContent = getBuffered(player.tech(true).vhs.masterPlaylistController_.mainSegmentLoader_.sourceUpdater_.videoBuffer && + player.tech(true).vhs.masterPlaylistController_.mainSegmentLoader_.sourceUpdater_.videoBuffer.buffered); // demuxed audio - var audioBuffer = getBuffered( - player.tech(true).vhs.masterPlaylistController_.audioSegmentLoader_.sourceUpdater_.audioBuffer && - player.tech(true).vhs.masterPlaylistController_.audioSegmentLoader_.sourceUpdater_.audioBuffer.buffered - ); + var audioBuffer = getBuffered(player.tech(true).vhs.masterPlaylistController_.audioSegmentLoader_.sourceUpdater_.audioBuffer && + player.tech(true).vhs.masterPlaylistController_.audioSegmentLoader_.sourceUpdater_.audioBuffer.buffered); // muxed audio if (!audioBuffer) { - audioBuffer = getBuffered( - player.tech(true).vhs.masterPlaylistController_.mainSegmentLoader_.sourceUpdater_.audioBuffer && - player.tech(true).vhs.masterPlaylistController_.mainSegmentLoader_.sourceUpdater_.audioBuffer.buffered - ); + audioBuffer = getBuffered(player.tech(true).vhs.masterPlaylistController_.mainSegmentLoader_.sourceUpdater_.audioBuffer && + player.tech(true).vhs.masterPlaylistController_.mainSegmentLoader_.sourceUpdater_.audioBuffer.buffered); } audioBufferedStat.textContent = audioBuffer; if (player.tech(true).vhs.masterPlaylistController_.audioSegmentLoader_.sourceUpdater_.audioBuffer) { audioTimestampOffset.textContent = player.tech(true).vhs.masterPlaylistController_.audioSegmentLoader_.sourceUpdater_.audioBuffer.timestampOffset; + } else if (player.tech(true).vhs.masterPlaylistController_.mainSegmentLoader_.sourceUpdater_.audioBuffer) { audioTimestampOffset.textContent = player.tech(true).vhs.masterPlaylistController_.mainSegmentLoader_.sourceUpdater_.audioBuffer.timestampOffset; } @@ -407,6 +399,7 @@ // bitrates var playlist = player.tech_.vhs.playlists.media(); + if (playlist && playlist.attributes && playlist.attributes.BANDWIDTH) { videoBitrateState.textContent = (playlist.attributes.BANDWIDTH / 1024).toLocaleString(undefined, { maximumFractionDigits: 1 @@ -540,6 +533,11 @@ var mirrorSource = getInputValue(stateEls['mirror-source']); + if (window.statsTimer) { + window.statsTimer = null; + clearInterval(window.statsTimer); + } + player = window.player = window.videojs(videoEl, { plugins: { httpSourceSelector: { From c9390366bd5549ebcc396c56e493297b318e14f3 Mon Sep 17 00:00:00 2001 From: Gary Katsevman Date: Mon, 16 Aug 2021 12:46:05 -0400 Subject: [PATCH 13/18] better segment metadata style --- demo.html | 2 -- scripts/demo-page.js | 1 + 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/demo.html b/demo.html index 6e45202a8..c0a57b42f 100644 --- a/demo.html +++ b/demo.html @@ -23,8 +23,6 @@ } #segment-metadata pre { overflow: scroll; - padding: 0.5em; - background-color: lightgray; } diff --git a/scripts/demo-page.js b/scripts/demo-page.js index 0c70ca4f2..b6a787c30 100644 --- a/scripts/demo-page.js +++ b/scripts/demo-page.js @@ -316,6 +316,7 @@ var li = document.createElement('li'); var pre = document.createElement('pre'); + pre.classList.add('border', 'rounded', 'p-2'); pre.textContent = text; li.appendChild(pre); segmentMetadata.appendChild(li); From a11d9348cac96d03182038033e57e265d2612c64 Mon Sep 17 00:00:00 2001 From: Gary Katsevman Date: Mon, 16 Aug 2021 13:00:12 -0400 Subject: [PATCH 14/18] demo->index index->old-index make sure old-index works on IE11 redirect index to old-index on IE --- demo.html | 221 ------------- index.html | 328 ++++++++++++------- old-index.html | 150 +++++++++ scripts/{demo-page.js => index.js} | 0 scripts/{index-demo-page.js => old-index.js} | 4 +- 5 files changed, 359 insertions(+), 344 deletions(-) delete mode 100644 demo.html create mode 100644 old-index.html rename scripts/{demo-page.js => index.js} (100%) rename scripts/{index-demo-page.js => old-index.js} (99%) diff --git a/demo.html b/demo.html deleted file mode 100644 index c0a57b42f..000000000 --- a/demo.html +++ /dev/null @@ -1,221 +0,0 @@ - - - - - videojs-http-streaming Demo - - - - - - - - -
    - - VHS logo showcasing a VHS tape with the Video.js logo on the label - VHS: videojs-http-streaming - -
    - -
    - - - -
    - -
    - - -
    - - -
    - - -
    - - -
    - - -
    - - -
    - - - -
    - - -
    -
    - -
    -
    -
    - - -
    - -
    - - -
    - -
    - - -
    - -
    - - -
    - -
    - - -
    - -
    - - -
    - -
    - - -
    - -
    - - -
    - -
    - - -
    - -
    - - -
    - -
    - - -
    - -
    - - -
    - -
    - - -
    - -
    - - -
    -
    -
    - -
    -
    - - -
    -
    - -
    -
    -
    -
    -
    Current Time:
    -
    0
    -
    Buffered:
    -
    -
    -
    Video Buffered:
    -
    -
    -
    Audio Buffered:
    -
    -
    -
    Seekable:
    -
    - - -
    -
    Video Bitrate:
    -
    0 kbps
    -
    Measured Bitrate:
    -
    0 kbps
    -
    Video Timestamp Offset
    -
    0
    -
    Audio Timestamp Offset
    -
    0
    -
    -
    -
      -
      -
      - -
      - - - - - - diff --git a/index.html b/index.html index 036b06c8f..5ca8c369b 100644 --- a/index.html +++ b/index.html @@ -4,142 +4,228 @@ videojs-http-streaming Demo + + + + - - -
      -
      - - -

      Options

      - -
      - - - - - - - - - - - - -
      +
      + + VHS logo showcasing a VHS tape with the Video.js logo on the label + VHS: videojs-http-streaming + +
      + +
      -

      Load a URL

      - - - - - - - -

      Load a Source

      - -

      Navigation

      -
        -
      • Run unit tests in browser.
        • -
      • Read generated docs.
        • -
      • Stats
        • + - +
        + +
        + + +
        + + +
        + + +
        + + +
        + + +
        + + +
        + + + +
        + + +
        +
        + +
        +
        +
        + + +
        + +
        + + +
        + +
        + + +
        + +
        + + +
        + +
        + + +
        + +
        + + +
        + +
        + + +
        + +
        + + +
        + +
        + + +
        + +
        + + +
        + +
        + + +
        + +
        + + +
        + +
        + + +
        + +
        + + +
        +
        +
        + +
        +
        + + +
        +
        + +
        +
        +
        +
        +
        Current Time:
        +
        0
        +
        Buffered:
        +
        -
        +
        Video Buffered:
        +
        -
        +
        Audio Buffered:
        +
        -
        +
        Seekable:
        +
        - - -
        +
        Video Bitrate:
        +
        0 kbps
        +
        Measured Bitrate:
        +
        0 kbps
        +
        Video Timestamp Offset
        +
        0
        +
        Audio Timestamp Offset
        +
        0
        +
        +
        +
          +
          +
          + +
          + + + + + + diff --git a/scripts/demo-page.js b/scripts/index.js similarity index 100% rename from scripts/demo-page.js rename to scripts/index.js diff --git a/scripts/index-demo-page.js b/scripts/old-index.js similarity index 99% rename from scripts/index-demo-page.js rename to scripts/old-index.js index 433bbe226..1cb18b881 100644 --- a/scripts/index-demo-page.js +++ b/scripts/old-index.js @@ -77,7 +77,7 @@ var option = document.createElement('option'); option.innerText = 'HLS Manifest Object Test, does not survive page reload'; - option.value = `data:application/vnd.videojs.vhs+json,${hlsManifest}`; + option.value = 'data:application/vnd.videojs.vhs+json,' + hlsManifest; manifestOptGroup.appendChild(option); }); @@ -91,7 +91,7 @@ var option = document.createElement('option'); option.innerText = 'Dash Manifest Object Test, does not survive page reload'; - option.value = `data:application/vnd.videojs.vhs+json,${dashManifest}`; + option.value = 'data:application/vnd.videojs.vhs+json,' + dashManifest; manifestOptGroup.appendChild(option); }); From d5a4d471b768948965c2f0e3de1baebfcc2280ab Mon Sep 17 00:00:00 2001 From: Gary Katsevman Date: Mon, 16 Aug 2021 13:01:32 -0400 Subject: [PATCH 15/18] re-enable history --- scripts/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/index.js b/scripts/index.js index b6a787c30..10171e878 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -178,7 +178,7 @@ query += symbol + elName + '=' + getInputValue(stateEls[elName]); }); - // window.history.replaceState({}, 'vhs demo', query); + window.history.replaceState({}, 'vhs demo', query); }; window.URLSearchParams = window.URLSearchParams || function(locationSearch) { From 9238e982b3d79c48526dd3958c9e40821fa3ac7a Mon Sep 17 00:00:00 2001 From: Gary Katsevman Date: Tue, 17 Aug 2021 11:53:58 -0400 Subject: [PATCH 16/18] add bootstrap to netlify copy --- scripts/netlify.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/scripts/netlify.js b/scripts/netlify.js index 83105a408..430d076f7 100644 --- a/scripts/netlify.js +++ b/scripts/netlify.js @@ -13,6 +13,8 @@ const files = [ 'node_modules/videojs-http-source-selector/dist/videojs-http-source-selector.css', 'node_modules/videojs-http-source-selector/dist/videojs-http-source-selector.js', 'node_modules/videojs-http-source-selector/dist/videojs-http-source-selector.min.js', + 'node_modules/bootstrap/dist/js/bootstrap.js', + 'node_modules/bootstrap/dist/css/bootstrap.css', 'node_modules/d3/d3.min.js', 'logo.svg', 'scripts/sources.json', From 271044fffbd7a6b6c1124944846b836fbcf6d001 Mon Sep 17 00:00:00 2001 From: Gary Katsevman Date: Tue, 17 Aug 2021 11:59:47 -0400 Subject: [PATCH 17/18] index and old index --- scripts/netlify.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/scripts/netlify.js b/scripts/netlify.js index 430d076f7..3dcfab89c 100644 --- a/scripts/netlify.js +++ b/scripts/netlify.js @@ -18,7 +18,8 @@ const files = [ 'node_modules/d3/d3.min.js', 'logo.svg', 'scripts/sources.json', - 'scripts/index-demo-page.js', + 'scripts/index.js', + 'scripts/oldindex.js', 'scripts/dash-manifest-object.json', 'scripts/hls-manifest-object.json' ]; @@ -35,5 +36,5 @@ files // copy files/folders to deploy dir files - .concat('dist', 'index.html', 'utils') + .concat('dist', 'index.html', 'old-index.html', 'utils') .forEach((file) => sh.cp('-r', file, path.join(deployDir, file))); From 15d6fd9e92503e86b5b88cf6983eb5fef20b3e2b Mon Sep 17 00:00:00 2001 From: Gary Katsevman Date: Tue, 17 Aug 2021 12:03:49 -0400 Subject: [PATCH 18/18] old-index --- scripts/netlify.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/netlify.js b/scripts/netlify.js index 3dcfab89c..ce31c2d6b 100644 --- a/scripts/netlify.js +++ b/scripts/netlify.js @@ -19,7 +19,7 @@ const files = [ 'logo.svg', 'scripts/sources.json', 'scripts/index.js', - 'scripts/oldindex.js', + 'scripts/old-index.js', 'scripts/dash-manifest-object.json', 'scripts/hls-manifest-object.json' ];