From 59a1a3f46384e2711751913b0a6e472f1b6f0842 Mon Sep 17 00:00:00 2001
From: Timothy Flynn <trflynn89@pm.me>
Date: Thu, 20 Apr 2023 08:41:39 -0400
Subject: [PATCH] Base: Add options to the video test page to change its
 attributes

This is to allow testing autoplay, poster images, etc. without having to
stash local changes to the page. This also changes the URLs used on the
page to be relative to the page itself, to allow the page to load both
on Serenity and Lagom.
---
 Base/res/html/misc/video-webm.html | 42 +++++++++++++++++++++++++++++-
 1 file changed, 41 insertions(+), 1 deletion(-)

diff --git a/Base/res/html/misc/video-webm.html b/Base/res/html/misc/video-webm.html
index d48e9ee88e..68bc4e7580 100644
--- a/Base/res/html/misc/video-webm.html
+++ b/Base/res/html/misc/video-webm.html
@@ -73,15 +73,44 @@
                 </tr>
             </tbody>
         </table>
+
+        <fieldset>
+            <legend>Select a video playback option:</legend>
+            <div>
+              <input type=radio id=option-default value=default name=options>
+              <label for=option-default>Default</label>
+            </div>
+            <div>
+              <input type=radio id=option-autoplay value=autoplay name=options>
+              <label for=option-autoplay>Autoplay</label>
+            </div>
+            <div>
+              <input type=radio id=option-poster value=poster name=options>
+              <label for=option-poster>Poster</label>
+            </div>
+        </fieldset>
     </div>
 
     <br />
 
-    <video id=video autoplay controls src="file:///home/anon/Videos/test-webm.webm"></video>
+    <video id=video controls src="../../../home/anon/Videos/test-webm.webm"></video>
 
     <script type="text/javascript">
         let video = document.getElementById('video');
 
+        const params = new URLSearchParams(document.location.search);
+        const option = params.get('option');
+
+        if (option === 'autoplay') {
+            document.getElementById('option-autoplay').setAttribute('checked', '');
+            video.setAttribute('autoplay', '');
+        } else if (option === 'poster') {
+            document.getElementById('option-poster').setAttribute('checked', '');
+            video.setAttribute('poster', '../../wallpapers/grid.png');
+        } else {
+            document.getElementById('option-default').setAttribute('checked', '');
+        }
+
         video.videoTracks.onaddtrack = (event) => {
             document.getElementById('id').textContent = event.track.id;
             document.getElementById('selected').textContent = event.track.selected;
@@ -112,6 +141,17 @@
             document.getElementById('state').textContent = 'paused';
             document.getElementById('ended').textContent = video.ended;
         });
+
+        for (const option of document.getElementsByName('options')) {
+            option.addEventListener('change', function() {
+                if (!this.checked) {
+                    return;
+                }
+
+                const location = `${window.location.pathname}?option=${this.value}`;
+                window.location.href = location;
+            });
+        }
     </script>
 </body>
 </html>