tools/wave/www/index.html - external/github.com/web-platform-tests/wpt.git - Git at Google

 <!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Web Media API Snapshot Test Suite</title>
     <link rel="stylesheet" href="css/bulma-0.7.5/bulma.min.css" />
     <link rel="stylesheet" href="css/fontawesome.min.css" />
     <script src="lib/keycodes.js"></script>
     <script src="lib/wave-service.js"></script>
     <script src="lib/davidshimjs/qrcode.js"></script>
   </head>

   <body>
     <section class="section">
       <div class="container">
         <img
           style="max-width: 300px; margin-bottom: 30px; margin-left: -15px;"
           src="res/wavelogo_2016.jpg"
           alt="WAVE (Web Application Video Ecosystem) Project Logo"
         />

         <h1 class="title is-spaced">
           WAVE WMAS Test Suite
         </h1>
 				<p class="subtitle">
           <a href="https://github.com/w3c/webmediaapi/">GitHub</a> -
         </p>
       </div>

       <div class="container" style="margin-top: 2em;">
         <h2 class="title is-5">
           New test session
         </h2>
         <div class="columns is-vcentered" style="margin-top: 20px">
           <div class="column is-narrow">
             <div
               id="qr-code"
               style="width: 256px; height: 256px; padding: 5px; border: 1px gray solid; border-radius: 3px;"
             ></div>
           </div>
           <div class="column">
             <table style="margin-bottom: 1.5em">
               <tr>
                 <td class="has-text-weight-bold" style="padding-right: 1rem">
                   Token:
                 </td>
                 <td id="session-token" class="is-family-monospace"></td>
               </tr>
               <tr>
                 <td class="has-text-weight-bold" style="padding-right: 1rem">
                   Expires:
                 </td>
                 <td id="expiary-date"></td>
               </tr>
               <tr>
                 <td></td>
                 <td>
                   <p class="is-size-7">(Session start revokes expiration.)</p>
                 </td>
               </tr>
             </table>

             <p style="max-width: 32rem; margin-bottom: 1rem;">
               Configure a new session on a second device by scanning the
               QR-Code, or click the button:
             </p>
             <div
               class="button"
               style="margin-bottom: 1rem;"
               id="configure-button"
             >
               <span class="icon"><i class="fas fa-sliders-h"></i></span>
               <span>Configure Session</span>
             </div>
             <p style="max-width: 32rem;">
               The tests will start running in this window, as soon as the
               session is started from the configuration view.
             </p>
           </div>
         </div>
       </div>

       <div class="container" style="margin-top: 2em;">
         <h2 class="title is-5">
           Resume running session
         </h2>
         <article
           id="unknown_token_error"
           style="max-width: 30em; display: none"
           class="message is-danger"
         >
           <div class="message-body">
             Unknown token
           </div>
         </article>
         <div class="columns is-vcentered">
           <div id="resume_token" class="column is-narrow"></div>
           <div class="button-group column">
             <button
               id="resume-button"
               class="button is-success tabbable"
               type="submit"
               data-uid="100"
               autofocus
             >
               <span class="icon"><i class="fas fa-redo"></i></span>
               <span>Resume</span>
             </button>
           </div>
         </div>
       </div>
     </section>

 		<script>
 			var selectedTabbable = -1;

 			function removeClass(element, className) {
 				var elementClass = element.className;
 				var index = elementClass.indexOf(className);
 				if (index !== -1) {
 					element.className = elementClass.replace(className, "");
 				}
 			}

 			function addClass(element, className) {
 				element.className += " " + className;
 			}

 			function skipFocus(steps) {
 				var tabbables = document.getElementsByClassName("tabbable");
 				if (selectedTabbable === -1) {
 					selectedTabbable = 0;
 				} else {
 					removeClass(tabbables[selectedTabbable], "focused");
 					selectedTabbable += steps;
 				}

 				if (selectedTabbable >= tabbables.length) {
 					selectedTabbable = 0;
 				}

 				if (selectedTabbable < 0) {
 					selectedTabbable = tabbables.length - 1;
 				}

 				tabbables[selectedTabbable].focus();
 				addClass(tabbables[selectedTabbable], "focused");
 			}

 			function focusNext() {
 				skipFocus(1);
 			}

 			function focusPrevious() {
 				skipFocus(-1);
 			}

 			// Resume
 			var resumeToken = "";
 			var cookies = document.cookie.split(";");
 			for (var i = 0; i < cookies.length; i++) {
 				var cookie = cookies[i];
 				if (cookie.split("=")[0].replace(/ /g, "") === "resume_token") {
 					resumeToken = cookie.split("=")[1];
 					break;
 				}
 			}
 			if (!resumeToken) resumeToken = "";

 			var resumeButton = document.getElementById("resume-button");

 			var tokenText = document.getElementById("resume_token");
 			if (resumeToken) {
 				tokenText.innerText = "Last session: " + resumeToken;
 			} else {
 				tokenText.innerText = "No recent session.";
 				resumeButton.setAttribute("disabled", "");
 			}
 			var unknownTokenError = document.getElementById("unknown_token_error");
 			resumeButton.onclick = function(event) {
 				location.href = WEB_ROOT + "next.html?token=" + resumeToken;
 			};

 			resumeButton.onkeydown = function(event) {
 				var charCode =
 					typeof event.which === "number" ? event.which : event.keyCode;
 				if (ACTION_KEYS.indexOf(charCode) === -1) return;
 				location.href = WEB_ROOT + "next.html?token=" + resumeToken;
 			};

 			document.onkeydown = function(event) {
 				event = event || window.event;
 				var charCode =
 					typeof event.which === "number" ? event.which : event.keyCode;

 				if (ACTION_KEYS.indexOf(charCode) !== -1) {
 					event.preventDefault();
 					var tabbables = document.getElementsByClassName("tabbable");
 					var element = tabbables[selectedTabbable];
 					if (!element) return;
 					if (element.type === "checkbox") {
 						element.checked = !element.checked;
 					} else {
 						element.click();
 					}
 				}

 				if (PREV_KEYS.indexOf(charCode) !== -1) {
 					focusPrevious();
 				}

 				if (NEXT_KEYS.indexOf(charCode) !== -1) {
 					focusNext();
 				}
 			};

 			var lifeTime = 30 * 60 * 1000; // 30min
 			WaveService.createSession(
 				{ expirationDate: new Date().getTime() + lifeTime },
 				function(token) {
 					var sessionTokenElement = document.getElementById("session-token");
 					sessionTokenElement.innerText = token;

 					WaveService.readSession(token, function(config) {
 						var expiaryDateElement = document.getElementById("expiary-date");
 						expiaryDateElement.innerText = new Date(
 							config.expirationDate
 						).toLocaleString();
 					});

 					var configurationUrl =
 						location.origin +
 						WEB_ROOT + "configuration.html?token=" +
 						token +
 						"&resume=" +
 						resumeToken;
 					new QRCode(document.getElementById("qr-code"), configurationUrl);
 					document.getElementById("configure-button").onclick = function() {
 						window.open(configurationUrl, "_blank");
 					};

 					WaveService.connectHttpPolling(token);
 					WaveService.onMessage(function(message) {
 						if (message.type === "resume") {
 							var resumeToken = message.data;
 							location.href = WEB_ROOT + "next.html?token=" + resumeToken;
 						}

 						if (message.type !== "status") return;
 						if (message.data === "pending") return;
 						location.href = WEB_ROOT + "next.html?token=" + token;
 					});
 				}
 			);
 			document.getElementById("resume-button").focus();
 		</script>
   </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<title>Web Media API Snapshot Test Suite</title>
	<link rel="stylesheet" href="css/bulma-0.7.5/bulma.min.css" />
	<link rel="stylesheet" href="css/fontawesome.min.css" />
	<script src="lib/keycodes.js"></script>
	<script src="lib/wave-service.js"></script>
	<script src="lib/davidshimjs/qrcode.js"></script>
	</head>

	<body>
	<section class="section">
	<div class="container">
	<img
	style="max-width: 300px; margin-bottom: 30px; margin-left: -15px;"
	src="res/wavelogo_2016.jpg"
	alt="WAVE (Web Application Video Ecosystem) Project Logo"
	/>

	<h1 class="title is-spaced">
	WAVE WMAS Test Suite
	</h1>
	<p class="subtitle">
	<a href="https://github.com/w3c/webmediaapi/">GitHub</a> -
	</p>
	</div>

	<div class="container" style="margin-top: 2em;">
	<h2 class="title is-5">
	New test session
	</h2>
	<div class="columns is-vcentered" style="margin-top: 20px">
	<div class="column is-narrow">
	<div
	id="qr-code"
	style="width: 256px; height: 256px; padding: 5px; border: 1px gray solid; border-radius: 3px;"
	></div>
	</div>
	<div class="column">
	<table style="margin-bottom: 1.5em">
	<tr>
	<td class="has-text-weight-bold" style="padding-right: 1rem">
	Token:
	</td>
	<td id="session-token" class="is-family-monospace"></td>
	</tr>
	<tr>
	<td class="has-text-weight-bold" style="padding-right: 1rem">
	Expires:
	</td>
	<td id="expiary-date"></td>
	</tr>
	<tr>
	<td></td>
	<td>
	<p class="is-size-7">(Session start revokes expiration.)</p>
	</td>
	</tr>
	</table>

	<p style="max-width: 32rem; margin-bottom: 1rem;">
	Configure a new session on a second device by scanning the
	QR-Code, or click the button:
	</p>
	<div
	class="button"
	style="margin-bottom: 1rem;"
	id="configure-button"
	>
	<span class="icon"><i class="fas fa-sliders-h"></i></span>
	<span>Configure Session</span>
	</div>
	<p style="max-width: 32rem;">
	The tests will start running in this window, as soon as the
	session is started from the configuration view.
	</p>
	</div>
	</div>
	</div>

	<div class="container" style="margin-top: 2em;">
	<h2 class="title is-5">
	Resume running session
	</h2>
	<article
	id="unknown_token_error"
	style="max-width: 30em; display: none"
	class="message is-danger"
	>
	<div class="message-body">
	Unknown token
	</div>
	</article>
	<div class="columns is-vcentered">
	<div id="resume_token" class="column is-narrow"></div>
	<div class="button-group column">
	<button
	id="resume-button"
	class="button is-success tabbable"
	type="submit"
	data-uid="100"
	autofocus
	>
	<span class="icon"><i class="fas fa-redo"></i></span>
	<span>Resume</span>
	</button>
	</div>
	</div>
	</div>
	</section>

	<script>
	var selectedTabbable = -1;

	function removeClass(element, className) {
	var elementClass = element.className;
	var index = elementClass.indexOf(className);
	if (index !== -1) {
	element.className = elementClass.replace(className, "");
	}
	}

	function addClass(element, className) {
	element.className += " " + className;
	}

	function skipFocus(steps) {
	var tabbables = document.getElementsByClassName("tabbable");
	if (selectedTabbable === -1) {
	selectedTabbable = 0;
	} else {
	removeClass(tabbables[selectedTabbable], "focused");
	selectedTabbable += steps;
	}

	if (selectedTabbable >= tabbables.length) {
	selectedTabbable = 0;
	}

	if (selectedTabbable < 0) {
	selectedTabbable = tabbables.length - 1;
	}

	tabbables[selectedTabbable].focus();
	addClass(tabbables[selectedTabbable], "focused");
	}

	function focusNext() {
	skipFocus(1);
	}

	function focusPrevious() {
	skipFocus(-1);
	}

	// Resume
	var resumeToken = "";
	var cookies = document.cookie.split(";");
	for (var i = 0; i < cookies.length; i++) {
	var cookie = cookies[i];
	if (cookie.split("=")[0].replace(/ /g, "") === "resume_token") {
	resumeToken = cookie.split("=")[1];
	break;
	}
	}
	if (!resumeToken) resumeToken = "";

	var resumeButton = document.getElementById("resume-button");

	var tokenText = document.getElementById("resume_token");
	if (resumeToken) {
	tokenText.innerText = "Last session: " + resumeToken;
	} else {
	tokenText.innerText = "No recent session.";
	resumeButton.setAttribute("disabled", "");
	}
	var unknownTokenError = document.getElementById("unknown_token_error");
	resumeButton.onclick = function(event) {
	location.href = WEB_ROOT + "next.html?token=" + resumeToken;
	};

	resumeButton.onkeydown = function(event) {
	var charCode =
	typeof event.which === "number" ? event.which : event.keyCode;
	if (ACTION_KEYS.indexOf(charCode) === -1) return;
	location.href = WEB_ROOT + "next.html?token=" + resumeToken;
	};

	document.onkeydown = function(event) {
	event = event \|\| window.event;
	var charCode =
	typeof event.which === "number" ? event.which : event.keyCode;

	if (ACTION_KEYS.indexOf(charCode) !== -1) {
	event.preventDefault();
	var tabbables = document.getElementsByClassName("tabbable");
	var element = tabbables[selectedTabbable];
	if (!element) return;
	if (element.type === "checkbox") {
	element.checked = !element.checked;
	} else {
	element.click();
	}
	}

	if (PREV_KEYS.indexOf(charCode) !== -1) {
	focusPrevious();
	}

	if (NEXT_KEYS.indexOf(charCode) !== -1) {
	focusNext();
	}
	};

	var lifeTime = 30 * 60 * 1000; // 30min
	WaveService.createSession(
	{ expirationDate: new Date().getTime() + lifeTime },
	function(token) {
	var sessionTokenElement = document.getElementById("session-token");
	sessionTokenElement.innerText = token;

	WaveService.readSession(token, function(config) {
	var expiaryDateElement = document.getElementById("expiary-date");
	expiaryDateElement.innerText = new Date(
	config.expirationDate
	).toLocaleString();
	});

	var configurationUrl =
	location.origin +
	WEB_ROOT + "configuration.html?token=" +
	token +
	"&resume=" +
	resumeToken;
	new QRCode(document.getElementById("qr-code"), configurationUrl);
	document.getElementById("configure-button").onclick = function() {
	window.open(configurationUrl, "_blank");
	};

	WaveService.connectHttpPolling(token);
	WaveService.onMessage(function(message) {
	if (message.type === "resume") {
	var resumeToken = message.data;
	location.href = WEB_ROOT + "next.html?token=" + resumeToken;
	}

	if (message.type !== "status") return;
	if (message.data === "pending") return;
	location.href = WEB_ROOT + "next.html?token=" + token;
	});
	}
	);
	document.getElementById("resume-button").focus();
	</script>
	</body>
	</html>