Add user interface for filter selection.

static/galene.css

@@ -751,6 +751,12 @@ h1 {
     margin-right: 0.4em;
 }
 
+#filterselect {
+    width: 8em;
+    text-align-last: center;
+    margin-right: 0.4em;
+}
+
 #sendselect {
     width: 8em;
     text-align-last: center;

static/galene.html

@@ -192,6 +192,13 @@
         <fieldset>
           <legend>Other Settings</legend>
 
+          <form id="filterform">
+            <label for="filterselect" class="sidenav-label-first">Filter:</label>
+            <select id="filterselect" class="select select-inline">
+              <option value="" selected>none</option>
+            </select>
+          </form>
+
           <form id="sendform">
             <label for="sendselect" class="sidenav-label-first">Send:</label>
             <select id="sendselect" class="select select-inline">

static/galene.js

@@ -203,6 +203,16 @@ function reflectSettings() {
     }
     audioselect.value = settings.audio;
 
+    if(settings.hasOwnProperty('filter')) {
+        getSelectElement('filterselect').value = settings.filter;
+    } else {
+        let s = getSelectElement('filterselect').value;
+        if(s) {
+            settings.filter = s;
+            store = true;
+        }
+    }
+
     if(settings.hasOwnProperty('request')) {
         getSelectElement('requestselect').value = settings.request;
     } else {
@@ -482,6 +492,13 @@ document.getElementById('stopvideobutton').onclick = function(e) {
     resizePeers();
 };
 
+getSelectElement('filterselect').onchange = async function(e) {
+    if(!(this instanceof HTMLSelectElement))
+        throw new Error('Unexpected type for this');
+    updateSettings({filter: this.value});
+    changePresentation();
+};
+
 /** @returns {number} */
 function getMaxVideoThroughput() {
     let v = getSettings().send;
@@ -941,6 +958,14 @@ let filters = {
     },
 };
 
+function addFilters() {
+    for(let name in filters) {
+        let f = filters[name];
+        let d = f.description || name;
+        addSelectOption(getSelectElement('filterselect'), d, name);
+    }
+}
+
 function isSafari() {
     let ua = navigator.userAgent.toLowerCase();
     return ua.indexOf('safari') >= 0 && ua.indexOf('chrome') < 0;
@@ -959,7 +984,7 @@ async function addLocalMedia(id) {
     if(settings.filter) {
         filter = filters[settings.filter];
         if(!filter) {
-            displayWarning(`Unknown filter ${filter}`);
+            displayWarning(`Unknown filter ${settings.filter}`);
         }
     }
 
@@ -2603,6 +2628,7 @@ function start() {
         document.getElementById('title').textContent = title;
     }
 
+    addFilters();
     setMediaChoices(false).then(e => reflectSettings());
 
     fillLogin();