editor/public/edit/index.css

@@ -10,4 +10,59 @@
     &:not(.show) {
         display: none;
     }
+}
+
+table {
+    border-collapse: collapse;
+    width: 100%;
+
+    th, td {
+        padding: 0.4em 0.8em;
+    }
+    
+    tbody {
+        tr {
+            &:nth-child(even) {
+                background-color: #ececec;
+            }
+
+            td {
+                text-align: center;
+            }
+        }
+    }
+}
+
+input[type="checkbox"] {
+    --size: 0.6em;
+    --pad: 0.2em;
+    width: calc((var(--size) * 2 + var(--pad)) * 2);
+    height: calc((var(--size) + var(--pad)) * 2);
+    border-radius: calc(var(--size) + var(--pad));
+    appearance: none;
+    background-color: #e1e1e1;
+    position: relative;
+    cursor: pointer;
+
+    &::after {
+        content: "";
+        width: calc(var(--size) * 2);
+        height: calc(var(--size) * 2);
+        border-radius: calc(var(--size));
+        background-color: #9b9b9b;
+        position: absolute;
+        top: 50%;
+        left: var(--pad);
+        transform: translateY(-50%);
+    }
+
+    &:checked {
+        background-color: #daf0d1;
+        
+        &::after {
+            left: auto;
+            right: var(--pad);
+            background-color: #6ee74a;
+        }
+    }
 }

editor/public/edit/index.js

@@ -23,13 +23,20 @@ class TracksTable {
     OPTIONS = {
         "language": ["fre", "eng"]
     }
+    CONSTRAINTS = {
+        "flags/default": {
+            type: "hotone"
+        }
+    }
 
-    constructor(table) {
+    constructor(table, callback) {
         this.table = table
         this.headers = this.table.querySelector("thead tr")
         this.body = this.table.querySelector("tbody")
         this.fields = []
         this.tracks = []
+        this.callback = callback
+        this.hotones = {}
     }
 
     showTracks(tracks) {
@@ -45,7 +52,7 @@ class TracksTable {
             tr.dataset.i = i
             this.fields.forEach(field => {
                 const td = tr.insertCell(-1)
-                const input = this.makeInput(field, track[field.key])
+                const input = this.makeInput(field, track[field.key], i)
                 td.appendChild(input)
             })
             this.body.appendChild(tr)
@@ -81,7 +88,7 @@ class TracksTable {
         })
     }
 
-    makeInput(field, value) {
+    makeInput(field, value, trackIdx) {
         let input = document.createElement("input")
         switch (field.type) {
             case "num":
@@ -97,6 +104,32 @@ class TracksTable {
             case "bool":
                 input.type = "checkbox"
                 input.checked = value
+                const hotone = this.CONSTRAINTS[field.key]?.type == "hotone"
+                
+                if (hotone) {
+                    if (value) {
+                        if (field.key in this.hotones) {
+                            alert("Error in metadata file: field ${field.name} is hotone but multiple tracks are enabled ")
+                        }
+                        this.hotones[field.key] = input
+                    }
+                    input.addEventListener("click", e => {
+                        console.log("HOTONE")
+                        if (!input.checked) {
+                            console.log("Already checked, preventing uncheck")
+                            e.preventDefault()
+                        } else {
+                            if (field.key in this.hotones) {
+                                this.hotones[field.key].checked = false
+                                this.hotones[field.key].dispatchEvent(new Event("change"))
+                            }
+                            this.hotones[field.key] = input
+                        }
+                    })
+                }
+                input.addEventListener("change", () => {
+                    this.callback(trackIdx, field.key, input.checked)
+                })
                 break
             
             case "sel":
@@ -113,6 +146,7 @@ class TracksTable {
             default:
                 break
         }
+        input.dataset.key = field.key
         return input
     }
 }
@@ -146,8 +180,12 @@ function displayData(data) {
 }
 
 window.addEventListener("load", () => {
-    audioTable = new TracksTable(document.getElementById("audio-tracks"))
-    subtitleTable = new TracksTable(document.getElementById("subtitle-tracks"))
+    audioTable = new TracksTable(document.getElementById("audio-tracks"), (i, key, value) => {
+        console.log(i, key, value)
+    })
+    subtitleTable = new TracksTable(document.getElementById("subtitle-tracks"), (i, key, value) => {
+        console.log(i, key, value)
+    })
 
     const params = new URLSearchParams(window.location.search)
     const file = params.get("f")