chore: update the demo page #1184
Conversation
make sure old-index works on IE11 redirect index to old-index on IE
Codecov Report
@@ Coverage Diff @@
## main #1184 +/- ##
=======================================
Coverage 86.51% 86.51%
=======================================
Files 39 39
Lines 9602 9602
Branches 2219 2219
=======================================
Hits 8307 8307
Misses 1295 1295 Continue to review full report at Codecov.
|
| @@ -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; | |||
| @@ -0,0 +1,707 @@ | |||
| /* global window document */ | |||
There was a problem hiding this comment.
this file is mostly a copy of old-index.js (previously index-demo-page.js). I'll point out new pieces below.
| representationsEl.selectedIndex = selectedIndex; | ||
| }; | ||
|
|
||
| function getBuffered(buffered) { |
There was a problem hiding this comment.
this helper method is from utils/stats and used for the Player Stats piece.
| return bufferedText; | ||
| } | ||
|
|
||
| var setupSegmentMetadata = function(player) { |
There was a problem hiding this comment.
segment metadata from utils/stats
| var li = document.createElement('li'); | ||
| var pre = document.createElement('pre'); | ||
|
|
||
| pre.classList.add('border', 'rounded', 'p-2'); |
There was a problem hiding this comment.
this is a new piece for styling via bootstrap.
| @@ -0,0 +1,150 @@ | |||
| <!DOCTYPE html> | |||
There was a problem hiding this comment.
this used to be index.html
| @@ -4,142 +4,228 @@ | |||
| <meta charset="utf-8"> | |||
| <title>videojs-http-streaming Demo</title> | |||
| <link rel="icon" href="logo.svg"> | |||
| <link href="node_modules/bootstrap/dist/css/bootstrap.css" rel="stylesheet"> | |||
There was a problem hiding this comment.
this file was a copy from index.html originally.
| <link href="node_modules/video.js/dist/video-js.css" rel="stylesheet"> | ||
| <link href="node_modules/videojs-http-source-selector/dist/videojs-http-source-selector.css" rel="stylesheet"> | ||
| <style> | ||
| body { |
There was a problem hiding this comment.
a lot less custom styles are needed now.
| </head> | ||
| <body class="m-4"> | ||
| <script> | ||
| // if we're on IE, load up the load index page |
There was a problem hiding this comment.
redirect to the IE11 supporting demo page on IE.
| <option>metadata</option> | ||
| </select> | ||
| </div> | ||
| <header class="container-fluid"> |
There was a problem hiding this comment.
add a nice header with a link to the github
yup, my plan was to get it into a decent shape to merge and then different pieces can be done in separate PRs so that we're not holding anything back. |
Using bootstrap styles and tabs, update the demo page and bring in some stuff from the stats page.
The two main things that are missing right now are the bitrate switching and the timed metadata graphs, though, I think those aren't used as much. I figured we can bring what I have so far, and we can work on the others later on. For example, I want to migrate the representations dropdown to be a bit closer to what's in the stats page instead.
I kept the old index page as
old-index.htmland have the main page redirect there if we're on IE11, because the bootstrap version used doesn't support IE11. Hopefully, we won't be supporting IE11 for long, and we can delete this once we drop support.