Changeset 37287

Timestamp:

2023-02-07T16:25:32+13:00 (8 months ago)

Author:

davidb

Message:

main features for interactive editing of audio in dual mode complete

Location:

main/trunk/greenstone3/web/interfaces/default

Files:

• js/utility_scripts.js (modified) (68 diffs)
• style/core.css (modified) (13 diffs)
• style/map-editors.css (modified) (1 diff)
• transform/pages/document.xsl (modified) (1 diff)

main/trunk/greenstone3/web/interfaces/default/js/utility_scripts.js

@@ -291 +291 @@
 // Audio Scripts for Enriched Playback
 
+var wavesurfer;
+
 function loadAudio(audio, sectionData) {
    let editMode = false;
@@ -304 +306 @@
    let dualMode = false;
    let secondaryLoaded = false;
+
+   let waveformCursorX = 0;
+   let snappedToX = 0;
+   let snappedTo = "none";
+   let cursorPos = 0;
+   let ctrlDown = false;
+   let mouseDown = false;
+   let newRegionOffset = 0;
 
    let editsMade = false;
@@ -315 +325 @@
    // let accentColour = "#F8C537";
    let regionTransparency = "50";
+   let colourbrewerSet = colorbrewer.Set2[8];
+   let regionColourSet = [];
 
    let waveformContainer = document.getElementById("waveform");
    
-   let wavesurfer = WaveSurfer.create({ // wavesurfer options
+   wavesurfer = WaveSurfer.create({ // wavesurfer options
       container: waveformContainer,
       backend: "MediaElement",
@@ -355 +367 @@
                 'font-size': '12px'
             },
-            formatTimeCallback: (num) => { return minutize(num); }
+            formatTimeCallback: (num) => { return formatCursor(num); }
          }),
       ],
@@ -367 +379 @@
 
    function handleRegionClick(region, e) { 
+      contextMenu.classList.remove('visible');
       e.stopPropagation();
       if (!editMode) { // play region audio on click
          wavesurfer.play(region.start); // plays from start of region
-      } else { // select / deselect current region
-         if (region.element.classList.contains("region-top")) caretClicked("primary-caret");
-         else if (region.element.classList.contains("region-bottom")) caretClicked("secondary-caret");
+      } else { // select or deselect current region
+         if (region.element.classList.contains("region-top")) {
+            currSpeakerSet = primarySet;
+            swapCarets(true);
+         } else if (region.element.classList.contains("region-bottom")) {
+            currSpeakerSet = secondarySet;
+            swapCarets(false);
+         }
          prevUndoState = "";
 
@@ -378 +396 @@
             currentRegions = [];
             if (getCurrentRegionIndex() != -1 && isCurrentRegion(region)) {
-               removeCurrentRegion(); // deselect current region on click
+               // removeCurrentRegion(); // deselect current region on click
             } else {
                currentRegion = region;
-               currentRegion.speaker = currentRegion.attributes.label;
+               currentRegion.speaker = currentRegion.attributes.label.innerText;
                region.play(); // start and stop to move play cursor to beginning of region
                wavesurfer.playPause();
@@ -393 +411 @@
                if (currentRegions.length > 0 && isCurrentRegion(region)) { // change current region if removed
                   currentRegion = currentRegions[0];
-                  // currentRegions = [];
                }
             } else {
@@ -399 +416 @@
                if (getIndexInCurrentRegions(region) == -1) currentRegions.push(region); // add if it doesn't already exist
                currentRegion = region;
-               currentRegion.speaker = currentRegion.attributes.label;
+               currentRegion.speaker = currentRegion.attributes.label.innerText;
                region.play();
                wavesurfer.playPause();
@@ -405 +422 @@
             if (currentRegions.length == 1)  currentRegions = []; // clear selected regions if there is only one
          } else if (e.shiftKey) { // shift was held during click
+            clearChapterSearch();
             if (getCurrentRegionIndex() != -1 && getIndexOfRegion(region) != -1) {
                if (currentRegions && currentRegions.length > 0) {
@@ -421 +439 @@
             }
          }
-         if (speakerCheckbox.checked) { currentRegions = getRegionsWithSpeaker(currentRegion.speaker) } 
+         if (changeAllCheckbox.checked) { currentRegions = getRegionsWithSpeaker(currentRegion.speaker) } 
          reloadRegionsAndChapters();
       }
@@ -428 +446 @@
    function getIndexInCurrentRegions(region) {
       for (const reg of currentRegions) {
-         const regSpeaker = reg.attributes ? reg.attributes.label : reg.speaker;
-         if (reg.start == region.start && reg.end == region.end && regSpeaker == region.attributes.label) {
+         const regSpeaker = reg.attributes ? reg.attributes.label.innerText : reg.speaker;
+         if (reg.start == region.start && reg.end == region.end && regSpeaker == region.attributes.label.innerText) {
             return currentRegions.indexOf(reg);
          }
@@ -438 +456 @@
    function getIndexOfRegion(region) {
       for (const reg of currSpeakerSet.tempSpeakerObjects) {
-         if (reg.start == region.start && reg.end == region.end && reg.speaker == region.attributes.label) {
+         if (reg.start == region.start && reg.end == region.end && reg.speaker == region.attributes.label.innerText) {
             return currSpeakerSet.tempSpeakerObjects.indexOf(reg);
          }
@@ -446 +464 @@
 
    wavesurfer.on('region-mouseenter', function(region) { // region hover effects
-      handleRegionColours(region, true); 
-      hoverSpeaker.innerHTML = region.attributes.label;  
-      hoverSpeaker.style.marginLeft = parseInt(region.element.style.left.slice(0, -2)) - waveform.scrollLeft + "px";
-      if (!isInCurrentRegions(region)) {
+      if (!mouseDown) {
+         handleRegionColours(region, true); 
+         setHoverSpeaker(region.element.style.left, region.attributes.label.innerText);
+         if (!isInCurrentRegions(region)) {
+            removeRegionBounds();
+            drawRegionBounds(region, wave.scrollLeft, "black");
+         }
+         if (isCurrentRegion(region) && editMode) drawRegionBounds(region, wave.scrollLeft, "FireBrick");
+      }
+   });
+
+   function setHoverSpeaker(offset, name) {
+      hoverSpeaker.innerHTML = name;  
+      let newOffset = parseInt(offset.slice(0, -2)) - wave.scrollLeft;
+      // if (newOffset < 0) newOffset = 0;
+      hoverSpeaker.style.marginLeft = newOffset + "px";
+   }
+
+   wavesurfer.on('region-mouseleave', function(region) { 
+      hoverSpeaker.innerHTML = "";
+      if (!mouseDown) {
+         if (!(wavesurfer.getCurrentTime() <= region.end && wavesurfer.getCurrentTime() >= region.start)) handleRegionColours(region, false); 
+         if (!editMode) hoverSpeaker.innerHTML = "";
          removeRegionBounds();
-         drawRegionBounds(region, waveform.scrollLeft, "black");
-      }
-      if (isCurrentRegion(region)) drawRegionBounds(region, waveform.scrollLeft);
-   });
-   wavesurfer.on('region-mouseleave', function(region) { 
-      if (!(wavesurfer.getCurrentTime() <= region.end && wavesurfer.getCurrentTime() >= region.start)) handleRegionColours(region, false); 
-      removeRegionBounds();
-      if (currentRegion.speaker && getCurrentRegionIndex() != -1) { 
-         hoverSpeaker.innerHTML = currentRegion.speaker;
-         hoverSpeaker.style.marginLeft = parseInt(currSpeakerSet.tempSpeakerObjects[getCurrentRegionIndex()].region.element.style.left.slice(0, -2)) - waveform.scrollLeft + "px";
-         let currIndexes = getCurrentRegionsIndexes();
-         for (let i = 0; i < currIndexes.length; i++) {
-            drawRegionBounds(currSpeakerSet.tempSpeakerObjects[currIndexes[i]].region, waveform.scrollLeft, "black");
-         }
-         drawRegionBounds(currSpeakerSet.tempSpeakerObjects[getCurrentRegionIndex()].region, waveform.scrollLeft);
-      }
-      if (!currentRegion.speaker) hoverSpeaker.innerHTML = "";
+         if (currentRegion.speaker && getCurrentRegionIndex() != -1) { 
+            setHoverSpeaker(currSpeakerSet.tempSpeakerObjects[getCurrentRegionIndex()].region.element.style.left, currentRegion.speaker);
+            drawCurrentRegionBounds();
+         } 
+      }
    });
    wavesurfer.on('region-in', function(region) { 
-      handleRegionColours(region, true); 
-      if (itemType == "chapter") {
-         document.getElementById("chapter" + region.id.replace("region", "")).scrollIntoView({
+      // handleRegionColours(region, true); 
+      if (itemType == "chapter" && Array.from(chapters.children)[getIndexOfRegion(region)]) {
+         Array.from(chapters.children)[getIndexOfRegion(region)].scrollIntoView({  
             behavior: "smooth",
             block: "nearest"
@@ -480 +505 @@
    wavesurfer.on('region-out', function(region) { handleRegionColours(region, false) });
    wavesurfer.on('region-update-end', handleRegionEdit); // end of click-drag event
-   // wavesurfer.on('region-update-end', (region, e) => { handleRegionEdit(region, e)} ); // end of click-drag event
+   wavesurfer.on('region-updated', handleRegionSnap);
 
    let loader = document.createElement("span"); // loading audio element
@@ -490 +515 @@
       if (inputFile.endsWith("csv")) { // diarization if csv
          itemType = "chapter";
-         loadCSVFile(inputFile, ["speaker", "start", "end"], primarySet);
+         if (localStorage.getItem('undoStates') && localStorage.getItem('undoLevel')) {
+            console.log('-- Loading regions from localStorage --');
+            undoStates = JSON.parse(localStorage.getItem('undoStates'));
+            undoLevel = JSON.parse(localStorage.getItem('undoLevel'));
+            primarySet.tempSpeakerObjects = undoStates[undoLevel].state;
+            primarySet.uniqueSpeakers = [];
+            for (const item of primarySet.tempSpeakerObjects) {
+               if (!primarySet.uniqueSpeakers.includes(item.speaker)) primarySet.uniqueSpeakers.push(item.speaker);
+            }
+            populateChapters(primarySet);
+            if (undoStates[undoLevel].secState && undoStates[undoLevel].secState.length > 0) {
+               secondarySet.tempSpeakerObjects = undoStates[undoLevel].secState;
+               secondarySet.uniqueSpeakers = [];
+               for (const item of secondarySet.tempSpeakerObjects) {
+                  if (!secondarySet.uniqueSpeakers.includes(item.speaker)) secondarySet.uniqueSpeakers.push(item.speaker);
+               }
+               secondaryLoaded = true;
+               // editButton.click(); // open edit panel and enable dual mode if secondary set was previously altered
+               // dualModeCheckbox.checked = true;
+               // dualModeChanged(true);
+            }
+            updateRegionEditPanel(); 
+         } else {
+            loadCSVFile(inputFile, ["speaker", "start", "end"], primarySet);
+            dualModeCheckbox.checked = true;
+            dualModeChanged(true);
+            
+            setTimeout(()=>{
+               dualModeCheckbox.checked = false;
+               dualModeChanged(true);
+            }, 150)
+         }
       } else if (inputFile.endsWith("json")) { // transcription if json
          itemType = "word";
@@ -497 +553 @@
          console.log("Filetype of " + inputFile + " not supported.")
       }
+      
       loader.remove(); // remove load text
-      chapters.style.cursor = "pointer";
-      waveform.className = "audio-scroll";
+      chapters.style.cursor = "default"; // remove load cursor
+      wave.className = "audio-scroll";
+      drawVersionNames(); // draw version names if editPanel is expanded
    });
    
@@ -512 +570 @@
    const audioContainer = document.getElementById("audioContainer");
    const dualModeCheckbox = document.getElementById("dual-mode-checkbox");
-   const waveform = document.getElementsByTagName("wave")[0];
+   const wave = document.getElementsByTagName("wave")[0];
    const primaryCaret = document.getElementById("primary-caret");
    const secondaryCaret = document.getElementById("secondary-caret");
    const chapters = document.getElementById("chapters");
+   const chaptersContainer = document.getElementById("chapters-container");
    const editPanel = document.getElementById("edit-panel");
    const chapterButton = document.getElementById("chapterButton");
+   const chapterSearchInput = document.getElementById("chapter-search-input");
    const zoomOutButton = document.getElementById("zoomOutButton");
    const zoomSlider = document.getElementById("zoom-slider");
@@ -524 +584 @@
    const playPauseButton = document.getElementById("playPauseButton");
    const forwardButton = document.getElementById("forwardButton");
-   const editButton = document.getElementById("editButton");
+   const editButton = document.getElementById("editorModeButton");
    const downloadButton = document.getElementById("downloadButton");
    const muteButton = document.getElementById("muteButton");
    const volumeSlider = document.getElementById("volume-slider");
    const fullscreenButton = document.getElementById("fullscreenButton");
-   const speakerCheckbox = document.getElementById("change-all-checkbox");
+   const changeAllCheckbox = document.getElementById("change-all-checkbox");
    const changeAllLabel = document.getElementById("change-all-label");
    const speakerInput = document.getElementById("speaker-input");
@@ -541 +601 @@
    const saveButton = document.getElementById("save-button");
    const hoverSpeaker = document.getElementById("hover-speaker");
+   const contextMenu = document.getElementById("context-menu");
+   const contextDelete = document.getElementById("context-menu-delete");
+   const contextReplace = document.getElementById("context-menu-replace");
+   const contextOverdub = document.getElementById("context-menu-overdub");
+   // const contextCopy = document.getElementById("context-menu-copy");
+   const contextSave = document.getElementById("context-menu-save");
+   const dualModeMenuButton = document.getElementById("dual-mode-menu-button");
+   const dualModeMenu = document.getElementById("dual-mode-menu");
 
    audioContainer.addEventListener('fullscreenchange', (e) => { fullscreenChanged() });
-   dualModeCheckbox.addEventListener("change", dualModeChanged);
-   waveform.addEventListener('scroll', (e) => { waveformScrolled() })
+   audioContainer.addEventListener('contextmenu', onRightClick);
+   audioContainer.addEventListener("keyup", keyUp);
+   audioContainer.addEventListener("keydown", keyDown);
+   dualModeCheckbox.addEventListener("change", () => { dualModeChanged() });
+   wave.addEventListener('scroll', (e) => { waveformScrolled() })
+   wave.addEventListener('mousemove', (e) => waveformCursorX = e.x);
    primaryCaret.addEventListener("click", (e) => caretClicked(e.target.id));
    secondaryCaret.addEventListener("click", (e) => caretClicked(e.target.id));
    chapters.style.height = "0px";
+   chaptersContainer.style.height = "0px";
    editPanel.style.height = "0px";
    chapterButton.addEventListener("click", () => { toggleChapters() });
+   chapterSearchInput.addEventListener("input", chapterSearchInputChange)
    zoomOutButton.addEventListener("click", () => { zoomSlider.stepDown(); zoomSlider.dispatchEvent(new Event("input")) });
    zoomInButton.addEventListener("click", () => { zoomSlider.stepUp(); zoomSlider.dispatchEvent(new Event("input")) });
@@ -561 +635 @@
    fullscreenButton.addEventListener("click", toggleFullscreen);
    zoomSlider.style["accent-color"] = accentColour; 
-   speakerCheckbox.addEventListener("change", speakerCheckboxChanged);
+   changeAllCheckbox.addEventListener("change", () => { selectAllCheckboxChanged() });
    speakerInput.addEventListener("input", speakerChange);
    speakerInput.addEventListener("blur", speakerInputUnfocused);
@@ -570 +644 @@
    redoButton.addEventListener("click", redo);
    saveButton.addEventListener("click", saveRegionChanges);
+   document.addEventListener('click', () => contextMenu.classList.remove('visible'));
+   document.addEventListener('mouseup', () => mouseDown = false);
+   document.addEventListener('mousedown', (e) => { if (e.target.id !== "create-button") newRegionOffset = 0 }); // resets new region offset on click
    document.querySelectorAll('input[type=number]').forEach(e => {
       e.onchange = (e) => { changeStartEndTime(e) }; // updates speaker objects when number input(s) are changed
       e.onblur = () => { prevUndoState = "" }; 
    }); 
-   audioContainer.addEventListener("keyup", keyPressed);
-
-   function keyPressed(e) {
+   contextDelete.addEventListener("click", removeRightClicked);
+   contextReplace.addEventListener("click", replaceSelected);
+   contextOverdub.addEventListener("click", overdubSelected);
+   // contextCopy.addEventListener("click", copySelected);
+   contextSave.addEventListener("click", saveSelected);
+   dualModeMenuButton.addEventListener("click", dualModeMenuToggle);
+   dualModeMenuButton.addEventListener("click", dualModeMenuToggle);
+
+   if (gs.variables.allowEditing === '0') { editButton.style.display = "none" }
+
+   function chapterSearchInputChange(e) {
+      if (e.isTrusted) { // triggered from user action
+         if (document.getElementById("chapter-alert")) document.getElementById("chapter-alert").remove();
+         let matches = 0;
+         for (const idx in chapters.children) {
+            if (chapters.children[idx].firstChild && chapters.children[idx].classList.contains("chapter") && currSpeakerSet.tempSpeakerObjects[idx]
+               && currSpeakerSet.tempSpeakerObjects[idx].region && currSpeakerSet.tempSpeakerObjects[idx].region.element) {
+               if (e.composed) removeCurrentRegion(); // composed true if called from input, false if manually triggered event
+               if (!chapters.children[idx].firstChild.innerText.toLowerCase().includes(e.target.value.toLowerCase())) {
+                  chapters.children[idx].style.display = "none";
+                  currSpeakerSet.tempSpeakerObjects[idx].region.element.style.display = "none";
+               } else {
+                  chapters.children[idx].style.display = "flex";
+                  currSpeakerSet.tempSpeakerObjects[idx].region.element.style.display = "";
+                  matches++;
+                  if (e.target.value.length > 0) { 
+                     const reg = new RegExp(e.target.value, 'gi'); // [g]lobal, [i]gnore case
+                     chapters.children[idx].firstChild.innerHTML = chapters.children[idx].firstChild.innerText.replace(reg, '<b>$&</b>'); // highlights matching text
+                  } else {
+                     chapters.children[idx].firstChild.innerHTML = chapters.children[idx].firstChild.innerText; // highlights matching text
+                  }
+               }
+            }
+         }
+         flashChapters();
+         if (matches == 0) {
+            const msg = document.createElement("span");
+            msg.innerHTML = "No Matches!";
+            msg.id = "chapter-alert";
+            chapters.prepend(msg);
+         }  
+      }
+   }
+
+   function clearChapterSearch() {
+      chapterSearchInput.value = "";
+      chapterSearchInput.dispatchEvent(new Event("input"));
+   }
+
+   function dualModeMenuToggle() {
+      if (editMode && dualMode) {
+         if (dualModeMenu.classList.contains('visible')) dualModeMenu.classList.remove('visible');
+         else dualModeMenu.classList.add('visible');
+      }
+   }
+
+   function handleRegionSnap(region, e) {
+      if (editMode && currentRegion) { 
+         removeRegionBounds();
+         setHoverSpeaker(region.element.style.left, currentRegion.speaker);
+         drawRegionBounds(region, wave.scrollLeft, "FireBrick"); 
+         if (e && e.action === "resize" && dualMode && editMode && !ctrlDown) { // won't actuate on drag
+            let oppositeSet = secondarySet; // look down
+            if (currSpeakerSet.isSecondary) oppositeSet = primarySet; // look up
+            if (e.direction === "left") {
+               region.update({ start: getSnapValue(region.start, oppositeSet.tempSpeakerObjects)});
+            } else if (e.direction === "right") {
+               region.update({ end: getSnapValue(region.end, oppositeSet.tempSpeakerObjects)});
+            }
+         }
+         if (e && (e.action === "resize" || e.action === "drag")) {
+            setInputInSeconds(startTimeInput, region.start);
+            setInputInSeconds(endTimeInput, region.end);
+         }
+      }
+   }
+
+   function getSnapValue(newDragPos, speakerSet) { 
+      const snapRadius = 1;      
+      for (const region of speakerSet) { // scan opposite region for potential snapping points
+         if (newDragPos > parseFloat(region.start) - snapRadius && newDragPos < parseFloat(region.start) + snapRadius) { 
+            // console.log("snap to start: " + region.start); 
+            snappedTo = "start";
+            if (snappedToX == 0) snappedToX = waveformCursorX;
+            return region.start; 
+         }
+         if (newDragPos > parseFloat(region.end) - snapRadius && newDragPos < parseFloat(region.end) + snapRadius) {
+            // console.log("snap to end: " + region.end); 
+            snappedTo = "end";
+            if (snappedToX == 0) snappedToX = waveformCursorX;
+            return region.end; 
+         }
+
+         if (snappedTo !== "none" && (waveformCursorX - snappedToX > 10 || waveformCursorX - snappedToX < -10)) {
+            // console.log('released!');
+            snappedTo = "none";
+            snappedToX = 0;
+            return cursorPos;
+         }
+      }
+      return newDragPos;
+   }
+
+   function mmssToSeconds(input) {
+      const arr = input.split(":");
+      if (arr.length == 2) {
+         return (parseInt(arr[0]) * 60) + parseInt(arr[1]);
+      } else if (arr.length == 3) {
+         return (parseInt(arr[0]) * 3600) + (parseInt(arr[1]) * 60) + parseInt(arr[2]);
+      } else {
+         console.error("unexpected input to mmssToSeconds: " + input);
+      }
+   }
+
+   function removeRightClicked(e) {
+      if (!e.target.classList.contains('faded')) {
+         removeRegion();
+      }
+   }
+
+   function replaceSelected(e) {
+      if (!e.target.classList.contains('faded')) {
+         let destinationSet = secondarySet; // replace down
+         if (currSpeakerSet.isSecondary) destinationSet = primarySet; // replace up
+         let currItems = [currentRegion];
+         if (currentRegions && currentRegions.length > 0) currItems = currentRegions;
+         for (let idx = 0; idx < currItems.length; idx++) { // handles both currentRegion and currentRegions
+            for (let idy = 0; idy < destinationSet.tempSpeakerObjects.length; idy++) {
+               const reg = destinationSet.tempSpeakerObjects[idy];
+               if ((parseFloat(reg.start) >= parseFloat(currItems[idx].start) && parseFloat(reg.start) <= parseFloat(currItems[idx].end)) || 
+                   (parseFloat(reg.start) <= parseFloat(currItems[idx].start) && parseFloat(reg.end) >= parseFloat(currItems[idx].start))) {
+                  destinationSet.tempSpeakerObjects.splice(idy, 1); // remove subsequent region
+                  idy--;
+               }
+            }
+         }
+         copySelected(e, true);
+         reloadRegionsAndChapters();
+         addUndoState(primarySet, secondarySet, currSpeakerSet.isSecondary, dualMode, "replace", getCurrentRegionIndex());
+      }
+   }
+
+   function containsRegion(set, region) {
+      for (const item of set) {
+         if (regionsMatch(region, item)) return true;
+      }
+      return false;
+   }
+
+   function overdubSelected(e) {
+      if (!e.target.classList.contains('faded')) {
+         let destinationSet = secondarySet; // replace down
+         if (currSpeakerSet.isSecondary) destinationSet = primarySet; // replace up
+         let backup;
+         if (destinationSet.isSecondary) backup = cloneSpeakerObjectArray(primarySet.tempSpeakerObjects); // saves selected set as this process changes values in selected set (unknown reason)
+         else backup = cloneSpeakerObjectArray(secondarySet.tempSpeakerObjects);
+            copySelected(e, true);
+         if (!currentRegions || currentRegions.length < 1) { // overdub single
+            handleSameSpeakerOverlap(getCurrentRegionIndex(), destinationSet);
+         } else { // overdub multiple
+            for (const item of getCurrentRegionsIndexes().reverse()) { // reverse indexes so index doesn't break when regions are removed
+               handleSameSpeakerOverlap(item, destinationSet);
+            }
+         }
+         if (destinationSet.isSecondary) primarySet.tempSpeakerObjects = backup; 
+         else secondarySet.tempSpeakerObjects = backup;
+         addUndoState(primarySet, secondarySet, currSpeakerSet.isSecondary, dualMode, "overdub", getCurrentRegionIndex());
+         reloadRegionsAndChapters();
+      }
+   }
+
+   function copySelected(e, skipUndoState) {
+      if (!e.target.classList.contains('faded')) {
+         let out = -1;
+         let destinationSet = secondarySet; // copy down
+         if (currSpeakerSet.isSecondary) { destinationSet = primarySet } // copy up
+         if (currentRegions && currentRegions.length > 1) { // copy multiple
+            const selectedRegion = currentRegion;
+            const selectedRegions = currentRegions;
+            destinationSet.tempSpeakerObjects.push(...selectedRegions);
+            currSpeakerSet.isSecondary ? caretClicked("primary-caret") : caretClicked("secondary-caret"); // swap selected speakerSet (clears current regions)
+            for (const reg of destinationSet.tempSpeakerObjects) { // restore currentRegions in dest. set
+               for (const selReg of selectedRegions) {
+                  if (regionsMatch(reg, selReg) && !containsRegion(currentRegions, reg)) { 
+                     currentRegions.push(reg);
+                  }
+               }
+               if (regionsMatch(reg, selectedRegion)) { currentRegion = reg; }
+            }
+         } else { // copy singular
+            const selectedRegion = currentRegion; // copy currRegion as caretClicked wipes it
+            destinationSet.tempSpeakerObjects.push(selectedRegion); // append current region to dest. set
+            currSpeakerSet.isSecondary ? caretClicked("primary-caret") : caretClicked("secondary-caret"); // swap selected speakerSet (clears current regions)
+            for (const reg of destinationSet.tempSpeakerObjects) { // restore currentRegion in dest. set
+               if (regionsMatch(reg, selectedRegion)) { 
+                  currentRegion = reg; 
+                  break; 
+               }
+            }
+         }
+         reloadRegionsAndChapters();
+         if (!skipUndoState) addUndoState(primarySet, secondarySet, currSpeakerSet.isSecondary, dualMode, "copy", getCurrentRegionIndex());
+      }
+   }
+
+   function onRightClick(e) {
+      if (e.target.classList.contains("wavesurfer-region") && editMode) {
+         e.preventDefault();
+         contextMenu.classList.add("visible");
+         if (e.clientX + 200 > $(window).width()) contextMenu.style.left = ($(window).width() - 220) + "px"; // ensure menu doesn't clip on right
+         else contextMenu.style.left = e.clientX + "px";
+         contextMenu.style.top = e.clientY + "px";
+
+         if (dualMode && currentRegion && currentRegion.speaker !== "") {
+            contextReplace.classList.remove('faded');
+            contextOverdub.classList.remove('faded');
+            // contextCopy.classList.remove('faded');
+         } else {
+            contextDelete.classList.add('faded');
+            contextReplace.classList.add('faded');
+            contextOverdub.classList.add('faded');
+            // contextCopy.classList.add('faded');
+         }
+         if (currentRegion && currentRegion.speaker !== "") contextDelete.classList.remove('faded');
+         if (dualMode) { // manipulate context texts
+            const actionDirection = currSpeakerSet.isSecondary ? "Up" : "Down";
+            contextReplace.innerHTML = "Replace Selected " + actionDirection;
+            contextOverdub.innerHTML = "Overdub Selected " + actionDirection;
+            // contextCopy.innerHTML = "Copy Selected " + actionDirection;
+         } 
+      }
+   }
+
+   function saveSelected(e) {
+      let csvContent = "data:text/csv;charset=utf-8," + currSpeakerSet.speakerObjects.map(item => "\n" + [item.speaker, item.start, item.end].join());
+      console.log(csvContent);
+      var encodedUri = encodeURI(csvContent);
+      window.open(encodedUri);
+   }
+
+   function keyUp(e) {
+      if (e.key == "Control") ctrlDown = false;
       if (e.target.tagName !== "INPUT") {
          if (e.code === "Backspace" || e.code === "Delete") removeRegion();
@@ -583 +899 @@
          else if (e.code === "ArrowRight") wavesurfer.skipForward();
       }
-   }
-
-   function dualModeChanged(e) { // on dualmode checkbox value change
-      dualMode = e.target.checked; 
+      if (e.code == "KeyZ" && e.ctrlKey) undo();
+      else if (e.code == "KeyY" && e.ctrlKey) redo();
+   }
+
+   function keyDown(e) {
+      if (e.key == "Control") ctrlDown = true;
+   }
+
+   function dualModeChanged(skipUndoState) { // on dualmode checkbox value change
+      clearChapterSearch();
+      dualMode = dualModeCheckbox.checked; 
       currSpeakerSet = primarySet;
+      if (!dualMode) removeCurrentRegion();
       reloadRegionsAndChapters();
       if (dualMode) {
+         dualModeMenuButton.classList.add('visible');
          if (!secondaryLoaded) {
             loadCSVFile(inputFile.replace(".csv", "-2.csv"), ["speaker", "start", "end"], secondarySet);
@@ -596 +921 @@
          document.getElementById("caret-container").style.display = "flex";
       } else {
+         dualModeMenuButton.classList.remove('visible');
+         caretClicked('primary-caret');
          document.getElementById("caret-container").style.display = "none";
       }
       currSpeakerSet = primarySet;
+      drawVersionNames();
+      if (!skipUndoState) addUndoState(primarySet, secondarySet, currSpeakerSet.isSecondary, dualMode, "dualModeChange", getCurrentRegionIndex());
    } 
 
@@ -605 +934 @@
 
    function caretClicked(id) {
-      wavesurfer.clearRegions();
-      // flashChapters();
+      clearChapterSearch();
       if (id === "primary-caret") {
          currSpeakerSet = primarySet;
@@ -614 +942 @@
          swapCarets(false);
       }
-      $(".region-top").remove();
-      $(".region-bottom").remove();
-      populateChapters(primarySet);
-      populateChapters(secondarySet);
    }
 
    function swapCarets(toPrimary) {
       const currCaretIsPrimary = primaryCaret.src.includes("fill") ? true : false;
-      if ((toPrimary && !currCaretIsPrimary) || (!toPrimary && currCaretIsPrimary)) removeCurrentRegion(); // ensure currentRegion is only removed if changing speakerSet
+      if ((toPrimary && !currCaretIsPrimary) || (!toPrimary && currCaretIsPrimary)) { 
+         removeCurrentRegion(); // ensure currentRegion is only removed if changing speakerSet
+         flashChapters(); 
+         reloadChapterList();
+      } 
       if (toPrimary) {
          primaryCaret.src = interface_bootstrap_images + "caret-right-fill.svg";
@@ -629 +957 @@
          primaryCaret.src = interface_bootstrap_images + "caret-right.svg";
          secondaryCaret.src = interface_bootstrap_images + "caret-right-fill.svg";
+      }
+   }
+
+   function reloadChapterList() { 
+      chapters.innerHTML = "";
+      for (let i = 0; i < currSpeakerSet.tempSpeakerObjects.length; i++) {
+         let chapter = document.createElement("div"); 
+         chapter.classList.add("chapter");
+         chapter.id = "chapter" + i;
+         let speakerName = document.createElement("span");
+         speakerName.classList.add("speakerName");
+         speakerName.innerText = currSpeakerSet.tempSpeakerObjects[i].speaker;
+         let speakerTime = document.createElement("span"); 
+         speakerTime.classList.add("speakerTime"); 
+         speakerTime.innerHTML = minutize(currSpeakerSet.tempSpeakerObjects[i].start) + " - " + minutize(currSpeakerSet.tempSpeakerObjects[i].end) + "s";
+         chapter.appendChild(speakerName);
+         chapter.appendChild(speakerTime);
+         chapter.addEventListener("click", chapterClicked);
+         chapter.addEventListener("mouseenter", e => { chapterEnter(Array.from(e.target.parentElement.children).indexOf(e.target)) });
+         chapter.addEventListener("mouseleave", e => { chapterLeave(Array.from(e.target.parentElement.children).indexOf(e.target)) });
+         if (chapterSearchInput.value.length > 0 && !speakerName.innerText.toLowerCase().includes(chapterSearchInput.value.toLowerCase())) {
+            chapter.style.display = "none";
+            currSpeakerSet.tempSpeakerObjects[i].region.element.style.display = "none";
+         }
+         chapters.appendChild(chapter);
       }
    }
@@ -661 +1014 @@
       wavesurfer.zoom(Number(this.value) / 4); 
       if (currentRegion.speaker && getCurrentRegionIndex() != -1) { 
-         hoverSpeaker.innerHTML = currentRegion.speaker;
-         hoverSpeaker.style.marginLeft = parseInt(currSpeakerSet.tempSpeakerObjects[getCurrentRegionIndex()].region.element.style.left.slice(0, -2)) - waveform.scrollLeft + "px";
-         removeRegionBounds();
-         let currIndexes = getCurrentRegionsIndexes();
-         for (let i = 0; i < currIndexes.length; i++) {
-            drawRegionBounds(currSpeakerSet.tempSpeakerObjects[currIndexes[i]].region, waveform.scrollLeft, "black");
-         }
-         drawRegionBounds(currSpeakerSet.tempSpeakerObjects[getCurrentRegionIndex()].region, waveform.scrollLeft);
+         setHoverSpeaker(currSpeakerSet.tempSpeakerObjects[getCurrentRegionIndex()].region.element.style.left, currentRegion.speaker);
+         drawCurrentRegionBounds();
       }
       let handles = document.getElementsByClassName("wavesurfer-handle");
@@ -685 +1032 @@
    let toggleChapters = function() { // show & hide chapter section
       if (chapters.style.height == "0px") {
-         chapters.style.height = "30vh";
+         chapters.style.height = "90%";
+         chaptersContainer.style.height = "30vh";
+         chapterSearchInput.placeholder = "Filter by Name...";
       } else {
          chapters.style.height = "0px";
+         chaptersContainer.style.height = "0px";
+         chapterSearchInput.placeholder = "";
       }
    }
@@ -702 +1053 @@
 
    function loadCSVFile(filename, manualHeader, speakerSet) { // based on: https://stackoverflow.com/questions/7431268/how-to-read-data-from-csv-file-using-javascript
-      // if (speakerSet) currSpeakerSet = speakerSet; // if parameter is given, set
       $.ajax({
          type: "GET",
@@ -745 +1095 @@
       // this colour scheme is designed for qualitative data
 
-      if (data.uniqueSpeakers.length > 8) colourbrewerset = colorbrewer.Set2[8];
-      else if (data.uniqueSpeakers.length < 3) colourbrewerset = colorbrewer.Set2[3];
-      else  colourbrewerset = colorbrewer.Set2[data.uniqueSpeakers.length];
-
-      let dataIsSelected = false;
-
-      if ((!data.isSecondary && primaryCaret.src.includes("fill")) || (data.isSecondary && secondaryCaret.src.includes("fill"))) dataIsSelected = true;
-      if (dataIsSelected || !dualMode) chapters.innerHTML = ""; // clear chapter div for re-population
+      if (regionColourSet.length < 1) {
+         for (let i = 0; i < data.uniqueSpeakers.length; i++) { // not tested in cases where there are more than 8 speakers!!
+            const adjIdx = i%8;
+            regionColourSet[adjIdx] = { name: data.uniqueSpeakers[i], colour: colourbrewerSet[adjIdx] }
+         }
+      }
+
+      let isSelectedSet = false;
+
+      if ((!data.isSecondary && primaryCaret.src.includes("fill")) || (data.isSecondary && secondaryCaret.src.includes("fill"))) isSelectedSet = true;
       data.tempSpeakerObjects = sortSpeakerObjectsByStart(data.tempSpeakerObjects); // sort speakerObjects by start time
+      if (isSelectedSet || !dualMode) chapters.innerHTML = ""; // clear chapter div for re-population
 
       for (let i = 0; i < data.tempSpeakerObjects.length; i++) {
@@ -759 +1112 @@
          chapter.classList.add("chapter");
          chapter.id = "chapter" + i;
-         let speakerName = data.tempSpeakerObjects[i].speaker;
+         let speakerName = document.createElement("span");
+         speakerName.classList.add("speakerName");
+         speakerName.innerText = data.tempSpeakerObjects[i].speaker;
          let speakerTime = document.createElement("span"); 
          speakerTime.classList.add("speakerTime"); 
          speakerTime.innerHTML = minutize(data.tempSpeakerObjects[i].start) + " - " + minutize(data.tempSpeakerObjects[i].end) + "s";
-         chapter.innerHTML = speakerName;
+         chapter.appendChild(speakerName);
          chapter.appendChild(speakerTime);
          chapter.addEventListener("click", chapterClicked);
-         chapter.addEventListener("mouseover", e => { chapterEnter(Array.from(e.target.parentElement.children).indexOf(e.target)) });
+         chapter.addEventListener("mouseenter", e => { chapterEnter(Array.from(e.target.parentElement.children).indexOf(e.target)) });
          chapter.addEventListener("mouseleave", e => { chapterLeave(Array.from(e.target.parentElement.children).indexOf(e.target)) });
 
@@ -772 +1127 @@
          let dummyRegion = { start: data.tempSpeakerObjects[i].start, end: data.tempSpeakerObjects[i].end };
 
-         if ((dataIsSelected || !dualMode) && (isCurrentRegion(dummyRegion) || isInCurrentRegions(dummyRegion))) {
+         if ((isSelectedSet || !dualMode) && (isCurrentRegion(dummyRegion) || isInCurrentRegions(dummyRegion))) {
             chapter.classList.add("selected-chapter");
             selected = true;
          }
 
-         if (dataIsSelected || !dualMode) chapters.appendChild(chapter);
+         if (isSelectedSet || !dualMode) chapters.appendChild(chapter);
+
+         let regColour;
+         if (regionColourSet.find(item => item.name === data.tempSpeakerObjects[i].speaker)) {
+            regColour = regionColourSet.find(item => item.name === data.tempSpeakerObjects[i].speaker).colour;
+         } else {
+            regionColourSet.push({ name: data.tempSpeakerObjects[i].speaker, colour: colourbrewerSet[i%8]});
+            regColour = regionColourSet.at(-1).colour;
+         }
 
          let associatedReg = wavesurfer.addRegion({ // create associated wavesurfer region
@@ -788 +1151 @@
                label: speakerName,
             },
-            color: colourbrewerset[data.uniqueSpeakers.indexOf(data.tempSpeakerObjects[i].speaker)%8] + regionTransparency,
+            // color: colourbrewerSet[data.uniqueSpeakers.indexOf(data.tempSpeakerObjects[i].speaker)%8] + regionTransparency,
+            color: regColour + regionTransparency,
             ...(selected) && {color: "rgba(255,50,50,0.5)"},
          });
          data.tempSpeakerObjects[i].region = associatedReg;
       }
+
+      let handles = document.getElementsByTagName('handle');
+      for (const handle of handles) handle.addEventListener('mousedown', () => mouseDown = true);
 
       let regions = document.getElementsByTagName("region");
@@ -801 +1168 @@
       if (editMode) for (const reg of regions) reg.style.setProperty("z-index", "3", "important");
       else for (const reg of regions) reg.style.setProperty("z-index", "1", "important");
+
+      chapterSearchInput.dispatchEvent(new Event("input"));
    }
 
@@ -838 +1207 @@
 
    let chapterClicked = function(e) { // plays audio from start of chapter
-      let index = e.target.id.replace("chapter", "");
-      let clickedRegion = currSpeakerSet.tempSpeakerObjects[index].region;
-      handleRegionClick(clickedRegion, e);
+      const index = Array.from(chapters.children).indexOf(e.target);
+      if (currSpeakerSet.tempSpeakerObjects[index]) {
+         let clickedRegion = currSpeakerSet.tempSpeakerObjects[index].region;
+         handleRegionClick(clickedRegion, e); 
+      }
    }
 
@@ -852 +1223 @@
       let reg = currSpeakerSet.tempSpeakerObjects[idx].region;
       regionEnter(reg);
-      hoverSpeaker.innerHTML = reg.attributes.label;  
-      hoverSpeaker.style.marginLeft = parseInt(reg.element.style.left.slice(0, -2)) - waveform.scrollLeft + "px";
+      setHoverSpeaker(reg.element.style.left, reg.attributes.label.innerText);
       if (!isInCurrentRegions(reg)) {
          removeRegionBounds();
-         drawRegionBounds(reg, waveform.scrollLeft, "black");
+         drawRegionBounds(reg, wave.scrollLeft, "black");
       }
    }
@@ -865 +1235 @@
       hoverSpeaker.innerHTML = "";
       if (currentRegion.speaker && getCurrentRegionIndex() != -1) { 
-         hoverSpeaker.innerHTML = currentRegion.speaker;
-         hoverSpeaker.style.marginLeft = parseInt(currSpeakerSet.tempSpeakerObjects[getCurrentRegionIndex()].region.element.style.left.slice(0, -2)) - waveform.scrollLeft + "px";
-         let currIndexes = getCurrentRegionsIndexes();
-         for (let i = 0; i < currIndexes.length; i++) {
-            drawRegionBounds(currSpeakerSet.tempSpeakerObjects[currIndexes[i]].region, waveform.scrollLeft, "black");
-         }
-         drawRegionBounds(currSpeakerSet.tempSpeakerObjects[getCurrentRegionIndex()].region, waveform.scrollLeft);
-      }
+         setHoverSpeaker(currSpeakerSet.tempSpeakerObjects[getCurrentRegionIndex()].region.element.style.left, currentRegion.speaker);
+         drawCurrentRegionBounds();
+      } 
    }
 
@@ -888 +1253 @@
             colour = "rgba(255, 50, 50, 0.5)";
          }
-         let regionIndex = region.id.replace("region","");
-         let corrItem = document.getElementById(itemType + regionIndex);
-         corrItem.style.backgroundColor = colour; // updates chapter background (not region)
+         chapters.childNodes[region.id.replace("region","")].style.backgroundColor = colour;
       }
    }
 
    function regionEnter(region) {
+      // console.log("regionEnter");
       if (isCurrentRegion(region) || isInCurrentRegions(region)) {
-         if (region.element.classList.contains("region-top") && !currSpeakerSet.isSecondary) region.update({ color: "rgba(255, 50, 50, 0.5)" });
+         region.update({ color: "rgba(255, 50, 50, 0.5)" });
       } else {
          region.update({ color: "rgba(255, 255, 255, 0.35)" });
@@ -908 +1272 @@
          } else if (!(wavesurfer.getCurrentTime() + 0.1 < region.end && wavesurfer.getCurrentTime() > region.start)) {
             let index = region.id.replace("region", "");
-            region.update({ color: colourbrewerset[currSpeakerSet.uniqueSpeakers.indexOf(currSpeakerSet.tempSpeakerObjects[index].speaker)%8] + regionTransparency });
+            region.update({ color: regionColourSet.find(item => item.name === currSpeakerSet.tempSpeakerObjects[index].speaker).colour + regionTransparency });
          }
       } else {
@@ -916 +1280 @@
 
    function minutize(num) { // converts seconds to m:ss for chapters & waveform hover
-      // return (num - (num %= 60)) / 60 + (9 < num ? ':' : ':0') + ~~num; // https://stackoverflow.com/questions/3733227/javascript-seconds-to-minutes-and-seconds
-
       let date = new Date(null);
       date.setSeconds(num);
       return date.toTimeString().split(" ")[0].substring(3);
+   }
+
+   function formatCursor(num) {
+      cursorPos = num;
+      return minutize(num);
    }
 
@@ -934 +1301 @@
 
    function toggleEditMode() { // toggles edit panel and redraws regions with resize handles
-      toggleEditPanel();
-      updateRegionEditPanel();
+      if (gs.variables.allowEditing === '1') {
+         if (dualMode) dualModeCheckbox.click(); // dual mode is disabled when leaving edit mode
+         toggleEditPanel();
+         updateRegionEditPanel();
+         drawVersionNames();
+      }
+   }
+
+   function drawVersionNames() { 
+      if (document.getElementById("prim-set-label")) document.getElementById("prim-set-label").remove();
+      if (document.getElementById("sec-set-label")) document.getElementById("sec-set-label").remove();
+      if (editMode && !document.body.contains(loader)) { // editmode is opposite here
+         let dataLabel = document.createElement("span");
+         dataLabel.textContent = gs.documentMetadata.Title + " V1.0";
+         dataLabel.id = "prim-set-label";
+         waveformContainer.prepend(dataLabel);
+         if (dualMode) {
+            let dataLabel = document.createElement("span");
+            dataLabel.textContent = gs.documentMetadata.Title + " V2.0";
+            dataLabel.id = "sec-set-label";
+            waveformContainer.prepend(dataLabel);
+         } 
+      } 
    }
 
    function toggleEditPanel() { // show & hide edit panel
-      currentRegion.speaker = '';
-      currentRegion.start = '';
-      currentRegion.end = '';
-      currentRegions = [];
-      removeRegionBounds();
+      removeCurrentRegion();
       hoverSpeaker.innerHTML = "";
       if (editPanel.style.height == "0px") {
-         if (chapters.style.height == "0px") chapters.style.height = "30vh"; // expands chapter panel
+         if (chapters.style.height == "0px") { // expands chapter panel
+            toggleChapters();
+         } 
          editPanel.style.height = "30vh";
          editPanel.style.padding = "1rem";
@@ -965 +1351 @@
 
    function handleRegionEdit(region, e) { 
-      if (e.target.localName === "region" || e.target.localName === "handle") {
-         if (region.element.classList.contains("region-top")) { currSpeakerSet = primarySet; swapCarets(true) }
-         else if (region.element.classList.contains("region-bottom")) { currSpeakerSet = secondarySet; swapCarets(false) }
-         editsMade = true;
-         currentRegion = region;
-         region.play();
-         wavesurfer.pause();
-         let regionIndex = getCurrentRegionIndex();
-         currentRegion.speaker = currSpeakerSet.tempSpeakerObjects[regionIndex].speaker; 
-         currSpeakerSet.tempSpeakerObjects[regionIndex].region = region;
-         currSpeakerSet.tempSpeakerObjects[regionIndex].start = region.start;
-         currSpeakerSet.tempSpeakerObjects[regionIndex].end = region.end;
-         reloadRegionsAndChapters();
-         handleSameSpeakerOverlap(getCurrentRegionIndex()); // recalculate index in case start pos has changed
-         addUndoState(primarySet, secondarySet, currSpeakerSet.isSecondary, "dragdrop", getCurrentRegionIndex());
-         editPanel.click(); // fixes buttons needing to be clicked twice (unknown cause!)
-      } else console.log("resizing too fast, selected region not updated.");
-   }
-
-   function handleSameSpeakerOverlap(regionIdx) { // consumes/merges same-speaker regions with overlapping bounds
-      let draggedRegion = currSpeakerSet.tempSpeakerObjects[regionIdx]; // regionIdx may point to a different region within the for-loop after adjustments, so defined here
+      if (region.element.classList.contains("region-bottom")) { currSpeakerSet = secondarySet; swapCarets(false) }
+      else { currSpeakerSet = primarySet; swapCarets(true) }
+      editsMade = true;
+      currentRegion = region;
+      region.play();
+      wavesurfer.pause();
+      let regionIndex = getCurrentRegionIndex();
+      currentRegion.speaker = currSpeakerSet.tempSpeakerObjects[regionIndex].speaker;
+      currSpeakerSet.tempSpeakerObjects[regionIndex].region = region;
+      currSpeakerSet.tempSpeakerObjects[regionIndex].start = region.start;
+      currSpeakerSet.tempSpeakerObjects[regionIndex].end = region.end;
+
+      const chaps = chapters.childNodes; // chapter list
+      chaps[regionIndex].childNodes[1].textContent = minutize(region.start) + " - " + minutize(region.end) + "s"; // update chapter item time
+      currSpeakerSet.tempSpeakerObjects[regionIndex].region.update({start: region.start, end: region.end}); // update start/end
+
+      handleSameSpeakerOverlap(getCurrentRegionIndex(), currSpeakerSet); // recalculate index in case start pos has changed
+      addUndoState(primarySet, secondarySet, currSpeakerSet.isSecondary, dualMode, "dragdrop", getCurrentRegionIndex());
+      editPanel.click(); // fixes buttons needing to be clicked twice (unknown cause!)
+   }
+
+   function handleSameSpeakerOverlap(regionIdx, speakerSet) { // consumes/merges same-speaker regions with overlapping bounds
+      let draggedRegion = speakerSet.tempSpeakerObjects[regionIdx]; // regionIdx may point to a different region within the for-loop after adjustments, so defined here
       let draggedRegionSpeaker = draggedRegion.speaker;
-      for (let i = 0; i < currSpeakerSet.tempSpeakerObjects.length; i++) {
-         if (currSpeakerSet.tempSpeakerObjects[i].speaker === draggedRegionSpeaker && !regionsMatch(draggedRegion, currSpeakerSet.tempSpeakerObjects[i])) { // ensure speaker name match
-            if (currSpeakerSet.tempSpeakerObjects[i].start < draggedRegion.end && draggedRegion.start < currSpeakerSet.tempSpeakerObjects[i].end) { // ensure overlap
-               draggedRegion.start = Math.min(currSpeakerSet.tempSpeakerObjects[i].start, draggedRegion.start);
-               draggedRegion.end = Math.max(currSpeakerSet.tempSpeakerObjects[i].end, draggedRegion.end);
+      for (let i = 0; i < speakerSet.tempSpeakerObjects.length; i++) {
+         if (speakerSet.tempSpeakerObjects[i].speaker === draggedRegionSpeaker && !regionsMatch(draggedRegion, speakerSet.tempSpeakerObjects[i])) { // ensure speaker name match
+            if (parseFloat(speakerSet.tempSpeakerObjects[i].start) <= parseFloat(draggedRegion.end) && parseFloat(draggedRegion.start) <= parseFloat(speakerSet.tempSpeakerObjects[i].end)) { // ensure overlap
+               draggedRegion.start = Math.min(speakerSet.tempSpeakerObjects[i].start, draggedRegion.start);
+               draggedRegion.end = Math.max(speakerSet.tempSpeakerObjects[i].end, draggedRegion.end);
+               draggedRegion.region.update({start: Math.min(speakerSet.tempSpeakerObjects[i].start, draggedRegion.start), end: Math.max(speakerSet.tempSpeakerObjects[i].end, draggedRegion.end)});
                currentRegion = draggedRegion;
-               currSpeakerSet.tempSpeakerObjects.splice(i, 1); // remove consumed region
-               i = -1; // reset for loop to support multiple consumptions 
-            } 
-         }
-      }
-      reloadRegionsAndChapters();
+               speakerSet.tempSpeakerObjects[i].region.remove();
+               speakerSet.tempSpeakerObjects.splice(i, 1); // remove consumed region
+               setInputInSeconds(startTimeInput, draggedRegion.region.start); // update number inputs
+               setInputInSeconds(endTimeInput, draggedRegion.region.end);
+               i = -1; // reset for loop to support multiple consumptions
+            }
+         }
+      }
+      for (let i = 0; i < speakerSet.tempSpeakerObjects.length; i++) { // remove duplicates
+         if (speakerSet.tempSpeakerObjects[i] && speakerSet.tempSpeakerObjects[i+1]) {
+            if (regionsMatch(speakerSet.tempSpeakerObjects[i], speakerSet.tempSpeakerObjects[i+1])) {
+               speakerSet.tempSpeakerObjects[i+1].region.remove();
+               speakerSet.tempSpeakerObjects.splice(i+1, 1); // remove consumed region
+               i--;
+            }
+         }
+      }
    }
 
    function updateRegionEditPanel() { // updates edit panel content/inputs
+      // console.log('updating regionEditPanel')
       if (currentRegion && currentRegion.speaker == "") { 
          removeButton.classList.add("disabled");
          speakerInput.classList.add("disabled");
-         speakerCheckbox.classList.add("disabled");
-         speakerCheckbox.disabled = true;
+         changeAllCheckbox.classList.add("disabled");
+         changeAllCheckbox.disabled = true;
          disableStartEndInputs();
          speakerInput.readOnly = true;
@@ -1013 +1414 @@
          removeButton.classList.remove("disabled");
          speakerInput.classList.remove("disabled");
-         speakerCheckbox.classList.remove("disabled");
-         if (!isZooming) speakerCheckbox.disabled = false; 
+         changeAllCheckbox.classList.remove("disabled");
+         if (!isZooming) changeAllCheckbox.disabled = false; 
          enableStartEndInputs();
          speakerInput.readOnly = false;
@@ -1025 +1426 @@
          saveButton.classList.add("disabled");
       }
-      if (speakerCheckbox.checked) {
+      if (changeAllCheckbox.checked) {
          // changeAllLabel.innerHTML = "Change all (x" + currentRegions.length + ")";
          disableStartEndInputs();
@@ -1034 +1435 @@
          setInputInSeconds(endTimeInput, currentRegion.end);
       }
+      if (undoLevel - 1 < 0) undoButton.classList.add("disabled");
+      else undoButton.classList.remove("disabled");
+      if (undoLevel + 1 >= undoStates.length) redoButton.classList.add("disabled");
+      else redoButton.classList.remove("disabled");
    }
 
    function createNewRegion() { // adds a new region to the waveform
+      clearChapterSearch();
       const speaker = "NEW_SPEAKER"; // default name
-      let offset = 0;
       if (!currSpeakerSet.uniqueSpeakers.includes(speaker)) { currSpeakerSet.uniqueSpeakers.push(speaker) }
-      else { offset = 5 * getRegionsWithSpeaker(speaker).length } // offset new region if multiple new regions are created. TODO: check region has different start time
-      const start = offset + wavesurfer.getCurrentTime();
-      const end = offset + wavesurfer.getCurrentTime() + 15;
+      const start = newRegionOffset + wavesurfer.getCurrentTime();
+      const end = newRegionOffset + wavesurfer.getCurrentTime() + 15;
+      newRegionOffset += 5; // offset new region if multiple new regions are created. TODO: check region has different start time
       currSpeakerSet.tempSpeakerObjects.push({speaker: speaker, start: start, end: end});
+
       editsMade = true;
       currentRegions = [];
       currentRegion = getRegionFromProps({speaker: speaker, start: start, end: end});
       reloadRegionsAndChapters();
-      addUndoState(primarySet, secondarySet, currSpeakerSet.isSecondary, "create", getCurrentRegionIndex());
-   }
-
-   function getRegionFromProps(props) { // find region using speaker, start & end time
-      for (let i = 0; i < currSpeakerSet.tempSpeakerObjects.length; i++) {
-         if (currSpeakerSet.tempSpeakerObjects[i].speaker === props.speaker && currSpeakerSet.tempSpeakerObjects[i].start === props.start && currSpeakerSet.tempSpeakerObjects[i].end === props.end) {
-            return currSpeakerSet.tempSpeakerObjects[i];
+      addUndoState(primarySet, secondarySet, currSpeakerSet.isSecondary, dualMode, "create", getCurrentRegionIndex());
+   }
+
+   function getRegionFromProps(props, speakerSet) { // find region using speaker, start & end time
+      if (!speakerSet) speakerSet = currSpeakerSet;
+      for (let i = 0; i < speakerSet.tempSpeakerObjects.length; i++) {
+         if (speakerSet.tempSpeakerObjects[i].speaker === props.speaker && speakerSet.tempSpeakerObjects[i].start === props.start && speakerSet.tempSpeakerObjects[i].end === props.end) {
+            return speakerSet.tempSpeakerObjects[i];
          } 
       }
@@ -1067 +1474 @@
             for (let i = 0; i < currSpeakerSet.tempSpeakerObjects.length; i++) {
                if (isCurrentRegion(currSpeakerSet.tempSpeakerObjects[i].region)) {
-                  // if (!currentRegion.region) currentRegion.remove(); // remove from wavesurfer.regions.list
+                  currSpeakerSet.tempSpeakerObjects[i].region.remove();
                   currSpeakerSet.tempSpeakerObjects.splice(i, 1); // remove from tempSpeakerObjects
-                  // else currentRegion.region.remove(); // remove if region was just added
                   editsMade = true;
                   if (i >= 0) i--; // decrement index for side-by-side regions
-                  if (!speakerCheckbox.checked && currentRegions.length < 1) {
+                  if (!changeAllCheckbox.checked && currentRegions.length < 1) {
                      removeCurrentRegion();
-                     reloadRegionsAndChapters();
-                     addUndoState(primarySet, secondarySet, currSpeakerSet.isSecondary, "remove", currentRegionIndex);
-                     return; // jump out of for loop
+                     addUndoState(primarySet, secondarySet, currSpeakerSet.isSecondary, dualMode, "remove", currentRegionIndex);
+                     updateRegionEditPanel();
+                     return; // jump out of function
                   }
                } else if (isInCurrentRegions(currSpeakerSet.tempSpeakerObjects[i])) { 
+                  currSpeakerSet.tempSpeakerObjects[i].region.remove();
                   currSpeakerSet.tempSpeakerObjects.splice(i, 1);
                   if (i >= 0) i--;
@@ -1084 +1491 @@
             }
             removeCurrentRegion();
-            reloadRegionsAndChapters();
-            addUndoState(primarySet, secondarySet, currSpeakerSet.isSecondary, "remove", currentRegionIndex, currentRegionIndexes); // multiple regions removed
+            addUndoState(primarySet, secondarySet, currSpeakerSet.isSecondary, dualMode, "remove", currentRegionIndex, currentRegionIndexes); // multiple regions removed
+            updateRegionEditPanel();
          } else { console.log("no region selected") }
       }
@@ -1091 +1498 @@
 
    function regionsMatch(reg1, reg2) {
-      if (reg1.start == reg2.start && reg1.end == reg2.end) return true;
+      if (reg1 && reg2 && reg1.start == reg2.start && reg1.end == reg2.end) return true;
       return false;
    }
@@ -1115 +1522 @@
          if (isCurrentRegion(currSpeakerSet.tempSpeakerObjects[i].region)) { return i }
       }
-      // if (dualMode) {
-      //    for (let i = 0; i < secondarySet.tempSpeakerObjects.length; i++) {
-      //       if (isCurrentRegion(secondarySet.tempSpeakerObjects[i].region)) { return i }
-      //    }
-      // }
       return -1;
    }
@@ -1154 +1556 @@
    function speakerChange() { // speaker input name onInput handler
       const newSpeaker = speakerInput.value;
+      clearChapterSearch();
       if (newSpeaker && newSpeaker != "") {
-         speakerInput.style.border = "2px solid transparent";
+         speakerInput.style.outline = "2px solid transparent";
          if (getCurrentRegionIndex() != -1) { // if a region is selected
+            const chaps = chapters.childNodes;
             if (!currSpeakerSet.uniqueSpeakers.includes(newSpeaker)) { currSpeakerSet.uniqueSpeakers.push(newSpeaker) }
-            if (currentRegions && currentRegions.length < 1) { currSpeakerSet.tempSpeakerObjects[getCurrentRegionIndex()].speaker = newSpeaker } // single change
-            else if (currentRegions && currentRegions.length > 1) { // multiple changes
-               for (idx of getCurrentRegionsIndexes()) currSpeakerSet.tempSpeakerObjects[idx].speaker = newSpeaker;
+            if (currentRegions && currentRegions.length < 1) {  // single change
+               currSpeakerSet.tempSpeakerObjects[getCurrentRegionIndex()].speaker = newSpeaker; // update corrosponding speakerObject speaker
+               currSpeakerSet.tempSpeakerObjects[getCurrentRegionIndex()].region.attributes.label.innerText = newSpeaker;
+               chaps[getCurrentRegionIndex()].firstChild.textContent = newSpeaker; // update chapter text
+            } else if (currentRegions && currentRegions.length > 1) { // multiple changes
+               for (idx of getCurrentRegionsIndexes()) {
+                  currSpeakerSet.tempSpeakerObjects[idx].speaker = newSpeaker;
+                  currSpeakerSet.tempSpeakerObjects[idx].region.attributes.label.innerText = newSpeaker;
+                  chaps[idx].firstChild.textContent = newSpeaker;
+               }
             } 
-            speakerInput.value = "";
             currentRegion.speaker = newSpeaker;
+            chapterLeave(getCurrentRegionIndex()); // update region bound text
             editsMade = true;
-            reloadRegionsAndChapters();
-            addUndoState(primarySet, secondarySet, currSpeakerSet.isSecondary, "speaker-change", getCurrentRegionIndex(), getCurrentRegionsIndexes());
+            addUndoState(primarySet, secondarySet, currSpeakerSet.isSecondary, dualMode, "speaker-change", getCurrentRegionIndex(), getCurrentRegionsIndexes());
          } else { console.log("no region selected") }
-      } else { console.log("no text in speaker input"); speakerInput.style.border = "2px solid firebrick"; }
+      } else { console.log("no text in speaker input"); speakerInput.style.outline = "2px solid firebrick"; }
    }
 
@@ -1174 +1584 @@
       prevUndoState = "";
       if (speakerInput.value == "" && !speakerInput.classList.contains("disabled")) {
-         speakerInput.style.border = "2px solid firebrick";
+         speakerInput.style.outline = "2px solid firebrick";
          window.alert("Speaker input cannot be left empty. Please enter a speaker name.");
          setTimeout(() => speakerInput.focus(), 10); // timeout needed otherwise input isn't selected
-      } else speakerInput.style.border = "2px transparent";
-   }
-
-   function speakerCheckboxChanged() { // "Change all" toggled
-      if (speakerCheckbox.checked) {
+      } else speakerInput.style.outline = "2px transparent";
+   }
+
+   function selectAllCheckboxChanged(skipUndoState) { // "Change all" toggled
+      if (changeAllCheckbox.checked) {
          if (!isZooming) {
             tempZoomSave = zoomSlider.value;
@@ -1193 +1603 @@
          currentRegions = [];
          for (const speaker of uniqueSelectedSpeakers) {
-            for (const region of getRegionsWithSpeaker(speaker)) currentRegions.push(region);
-         }
-         reloadRegionsAndChapters();
+            for (const region of getRegionsWithSpeaker(speaker)) {
+               currentRegions.push(region);
+               region.region.update({color: "rgba(255,50,50,0.5)"});
+            }
+         }
       } else {
          if (!isZooming) {
@@ -1201 +1613 @@
          }
          currentRegions = []; // this will lose track of previously selected region*s*
-         // changeAllLabel.innerHTML = "Change all";
-         reloadRegionsAndChapters();
-      }
+      }
+      reloadRegionsAndChapters();
+      if (!skipUndoState) addUndoState(primarySet, secondarySet, currSpeakerSet.isSecondary, dualMode, "selectAllChange", getCurrentRegionIndex(), getCurrentRegionsIndexes());
    }
 
@@ -1218 +1630 @@
    function zoomTo(dest) { // (smoothly?) zooms wavesurfer waveform to destination
       isZooming = true;
-      speakerCheckbox.disabled = true;
+      changeAllCheckbox.disabled = true;
       let isOut = false;
       if (dest == 0) isOut = true;
@@ -1230 +1642 @@
                clearInterval(zoomInterval);
                isZooming = false;
-               speakerCheckbox.disabled = false;
+               changeAllCheckbox.disabled = false;
                zoomSlider.dispatchEvent(new Event("input"));
             }
@@ -1241 +1653 @@
                clearInterval(zoomInterval);
                isZooming = false;
-               speakerCheckbox.disabled = false;
+               changeAllCheckbox.disabled = false;
                zoomSlider.dispatchEvent(new Event("input"));
             }
@@ -1278 +1690 @@
       $(".region-top").remove();
       $(".region-bottom").remove();
+      $(".wavesurfer-region").remove();
       populateChapters(primarySet);
       if (dualMode) { 
@@ -1284 +1697 @@
       }
       updateCurrSpeakerSet();
-      if (currentRegion.speaker && getCurrentRegionIndex() != -1) { 
-         hoverSpeaker.innerHTML = currentRegion.speaker;
-         hoverSpeaker.style.marginLeft = parseInt(currSpeakerSet.tempSpeakerObjects[getCurrentRegionIndex()].region.element.style.left.slice(0, -2)) - waveform.scrollLeft + "px";
-         removeRegionBounds();
-         let currIndexes = getCurrentRegionsIndexes();
-         for (let i = 0; i < currIndexes.length; i++) {
-            drawRegionBounds(currSpeakerSet.tempSpeakerObjects[currIndexes[i]].region, waveform.scrollLeft, "black");
-         }
-         drawRegionBounds(currSpeakerSet.tempSpeakerObjects[getCurrentRegionIndex()].region, waveform.scrollLeft);
+      if (editMode && currentRegion && currentRegion.speaker && getCurrentRegionIndex() != -1 && currSpeakerSet.tempSpeakerObjects[getCurrentRegionIndex()].region.element) { 
+         setHoverSpeaker(currSpeakerSet.tempSpeakerObjects[getCurrentRegionIndex()].region.element.style.left, currentRegion.speaker);
+         drawCurrentRegionBounds();
       }
       if (currentRegions.length < 1) { 
@@ -1302 +1709 @@
          const uniqueSelectedSpeakers = [... new Set(currentRegions.map(a => a.speaker))]; // gets unique speakers in currentRegions
          uniqueSelectedSpeakers.sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase()));
-         // console.log(uniqueSelectedSpeakers); // CLG
          speakerInput.value = uniqueSelectedSpeakers.join(", ");
       }
@@ -1311 +1717 @@
       let newEnd = getTimeInSecondsFromInput(endTimeInput);
       let duration = Math.floor(wavesurfer.getDuration()); // total duration of current audio
-
       if (getCurrentRegionIndex() != -1) { // if there is a selected region
          if (newEnd <= newStart) newStart = newEnd - 1; // when start time > end time, push region forward
@@ -1324 +1729 @@
          currSpeakerSet.tempSpeakerObjects[currRegIdx].start = newStart;
          currSpeakerSet.tempSpeakerObjects[currRegIdx].end = newEnd;
+         currSpeakerSet.tempSpeakerObjects[currRegIdx].region.update({start: newStart, end: newEnd});
          currentRegion.start = newStart;
          currentRegion.end = newEnd;
          editsMade = true;
-         reloadRegionsAndChapters();
-         handleSameSpeakerOverlap(currRegIdx);
-         addUndoState(primarySet, secondarySet, currSpeakerSet.isSecondary, "change-time", getCurrentRegionIndex());
+         handleSameSpeakerOverlap(currRegIdx, currSpeakerSet);
+         addUndoState(primarySet, secondarySet, currSpeakerSet.isSecondary, dualMode, "change-time", getCurrentRegionIndex());
       } else { 
          console.log("no region selected");
@@ -1349 +1754 @@
       input.children[0].value = date.getHours() % 12;
       input.children[1].value = date.getMinutes();
-      input.children[2].value = date.getSeconds() + "." + date.getMilliseconds();
-      
+      input.children[2].value = date.getSeconds() + "." + (Math.ceil(date.getMilliseconds() / 100) * 100);
       document.querySelectorAll('input[type=number]').forEach(e => {
          e.value = Math.round(e.valueAsNumber * 10) / 10; // to 1dp
-         if (e.classList.contains("seconds") && !e.value.includes(".")) e.value = e.value + ".0";
-         else if (e.value.length === 1) e.value = '0' + e.value; // 0 on left for hrs & mins
-         if (e.value.length === 3) e.value = '0' + e.value; // 0 on the left (doesn't work on FF)
-         // if (e.value.length < 4) e.value = e.value.slice(0, 4); // always 4 digits (3 numbers, 1 fullstop) 
-         // if (!e.value) e.value = '00'; // avoiding letters on FF
+         if (e.classList.contains("seconds") && !e.value.includes(".")) { e.value = e.value + ".0"; }
+         else if (e.value.length === 1){ e.value = '0' + e.value; }// 0 padded on left
+         // if (e.value.length === 3) {e.value = '0' + e.value ; console.log('3: ' + e.value)} // 0 on the left (doesn't work on FF)
       });      
    }
 
-   function addUndoState(state, secState, isSec, type, currRegIdx, currRegIdxs) { // adds a new state to the undoStates stack
+   function addUndoState(state, secState, isSec, dualMode, type, currRegIdx, currRegIdxs) { // adds a new state to the undoStates stack
       let newState = cloneSpeakerObjectArray(state.tempSpeakerObjects); // clone method removes references
       let newSecState = cloneSpeakerObjectArray(secState.tempSpeakerObjects); // clone method removes references
       undoButton.classList.remove("disabled");
       undoStates = undoStates.slice(0, undoLevel + 1); // trim to current level if undos have already been made
-      undoStates.push({state: newState, secState: newSecState, isSec: isSec, currentRegionIndex: currRegIdx, currentRegionIndexes: currRegIdxs, type: type});
+      undoStates.push({state: newState, secState: newSecState, isSec: isSec, dualMode: dualMode, currentRegionIndex: currRegIdx, currentRegionIndexes: currRegIdxs, type: type});
       if ((type === "change-time" && prevUndoState === "change-time") || (type === "speaker-change" && prevUndoState === "speaker-change")) { // checks if similar change was made previously
          undoStates.splice(-2, 1); // remove second-to-last item in undoStates stack (merge last two changes into one to avoid multiple small edits)
@@ -1373 +1775 @@
       prevUndoState = type;
       redoButton.classList.add("disabled");
-      // console.log(undoStates.at(-1));
+      for (const item of undoStates) { // remove cyclic object references
+         item.state = cloneSpeakerObjectArray(item.state);
+         item.secState = cloneSpeakerObjectArray(item.secState);
+      } 
+      localStorage.setItem('undoStates', JSON.stringify(undoStates)); // update localStorage items
+      localStorage.setItem('undoLevel', undoLevel);
    }
 
    function undo() { // undo action: go back one state in the undoStates stack
-      if (!undoButton.classList.contains("disabled")) { // ensure there exist states to undo to
+      if (!undoButton.classList.contains("disabled") && editMode) { // ensure there exist states to undo to
+         clearChapterSearch();
          if (undoLevel - 1 < 0) console.log("ran out of undos");
          else {            
+            removeCurrentRegion();  
             let adjustedUndoLevel = undoLevel-1;
-            primarySet.tempSpeakerObjects = cloneSpeakerObjectArray(undoStates[adjustedUndoLevel].state.slice(0)); // slice & clone removes potential references between arrays
-            if (dualMode && undoStates[adjustedUndoLevel].secState && undoStates[adjustedUndoLevel].secState.length > 0) { // if secondary undoState exists
-               secondarySet.tempSpeakerObjects = cloneSpeakerObjectArray(undoStates[adjustedUndoLevel].secState.slice(0)); // slice & clone removes potential references between arrays
+            if (undoStates[undoLevel].type == "dualModeChange") { // toggle dual mode
+               dualModeCheckbox.checked = !dualMode;
+               dualModeChanged(true);
+            } else if (undoStates[undoLevel].type == "selectAllChange") { // toggle select all
+               changeAllCheckbox.checked = !changeAllCheckbox.checked;
+               selectAllCheckboxChanged(true);
+            } else {
+               primarySet.tempSpeakerObjects = cloneSpeakerObjectArray(undoStates[adjustedUndoLevel].state.slice(0)); // slice & clone removes potential references between arrays
+               if (dualMode && undoStates[adjustedUndoLevel].secState && undoStates[adjustedUndoLevel].secState.length > 0) { // if secondary undoState exists
+                  secondarySet.tempSpeakerObjects = cloneSpeakerObjectArray(undoStates[adjustedUndoLevel].secState.slice(0)); // slice & clone removes potential references between arrays
+               }
+               let selectedSpeakerSet;
+               // handle currentRegion change
+               if (undoStates[undoLevel] && undoStates[undoLevel].type && undoStates[undoLevel].type == "remove") { // if destination state type is remove
+                  selectedSpeakerSet = (undoStates[undoLevel].isSec) ? secondarySet : primarySet;
+                  if (selectedSpeakerSet.isSecondary) caretClicked("secondary-caret");
+                  else caretClicked("primary-caret");
+                  currentRegion = selectedSpeakerSet.tempSpeakerObjects[undoStates[undoLevel].currentRegionIndex]; // restore previous current state
+                  // console.log("undo-ing to index " + undoStates[undoLevel].currentRegionIndex);
+               } else if (undoStates[undoLevel].currentRegionIndex) {
+                  if (!dualMode) selectedSpeakerSet = primarySet;
+                  else {
+                     selectedSpeakerSet = (undoStates[undoLevel-1].isSec) ? secondarySet : primarySet;
+                     if (selectedSpeakerSet.isSecondary) caretClicked("secondary-caret");
+                     else caretClicked("primary-caret");
+                  }
+                  currentRegion = selectedSpeakerSet.tempSpeakerObjects[undoStates[undoLevel].currentRegionIndex];
+               } 
+               // handle currentRegions restoration
+               if (undoStates[undoLevel].currentRegionIndexes && undoStates[undoLevel].currentRegionIndexes.length > 1) {
+                  for (const idx of undoStates[undoLevel].currentRegionIndexes) currentRegions.push(currSpeakerSet.tempSpeakerObjects[idx]);
+               }
             }
             editsMade = true;
             
-            let selectedSpeakerSet;
-            
-            // handle currentRegion change
-            removeCurrentRegion();  
-            if (undoStates[undoLevel] && undoStates[undoLevel].type && undoStates[undoLevel].type == "remove") { // if destination state type is remove
-               selectedSpeakerSet = (undoStates[undoLevel].isSec) ? secondarySet : primarySet;
-               if (selectedSpeakerSet.isSecondary) caretClicked("secondary-caret");
-               else caretClicked("primary-caret");
-               currentRegion = selectedSpeakerSet.tempSpeakerObjects[undoStates[undoLevel].currentRegionIndex]; // restore previous current state
-               // console.log("undo-ing to index " + undoStates[undoLevel].currentRegionIndex);
-            } else if (undoStates[undoLevel-1].currentRegionIndex) {
-               if (!dualMode) selectedSpeakerSet = primarySet;
-               else {
-                  selectedSpeakerSet = (undoStates[undoLevel-1].isSec) ? secondarySet : primarySet;
-                  if (selectedSpeakerSet.isSecondary) caretClicked("secondary-caret");
-                  else caretClicked("primary-caret");
-               }
-               currentRegion = selectedSpeakerSet.tempSpeakerObjects[undoStates[undoLevel-1].currentRegionIndex]; // restore previous current state
-               // console.log("undo-ing to index " + undoStates[undoLevel-1].currentRegionIndex);
-            }
-            // handle currentRegions change NEEDS REVISION xxxxx
-            if (undoStates[undoLevel-1].currentRegionIndexes && undoStates[undoLevel-1].currentRegionIndexes.length > 1) {
-               for (const idx of undoStates[undoLevel-1].currentRegionIndexes) currentRegions.push(currSpeakerSet.tempSpeakerObjects[idx]);
-
-               // currentRegions = getRegionsWithSpeaker(currentRegion.speaker);
-               // if (!speakerCheckbox.checked) speakerCheckbox.click(); // manually fires onChange event
-            }
+            undoLevel--; // decrement undoLevel
             reloadRegionsAndChapters();
-            undoLevel--; // decrement undoLevel
+            localStorage.setItem('undoLevel', undoLevel);
             if (undoLevel - 1 < 0) undoButton.classList.add("disabled");
             else undoButton.classList.remove("disabled");
@@ -1424 +1836 @@
 
    function redo() { // redo action: go forward one state in the undoStates stack
-      if (!redoButton.classList.contains("disabled")) { // ensure there exist states to redo to
-         if (undoLevel + 1 > undoStates.length - 1) console.log("ran out of redos");
+      if (!redoButton.classList.contains("disabled") && editMode) { // ensure there exist states to redo to
+         clearChapterSearch();
+         if (undoLevel + 1 >= undoStates.length) console.log("ran out of redos");
          else {
-            primarySet.tempSpeakerObjects = cloneSpeakerObjectArray(undoStates[undoLevel+1].state.slice(0)); // set primary to new state
-            secondarySet.tempSpeakerObjects = cloneSpeakerObjectArray(undoStates[undoLevel+1].secState.slice(0)); // set secondary to new state
-            editsMade = true;
-            let selectedSpeakerSet;
-
-            // handle currentRegion change
-            if (undoLevel+1 <= undoStates.length-1) {
+            if (undoStates[undoLevel+1].type == "dualModeChange") { // toggle dual mode
+               dualModeCheckbox.checked = !dualMode;
+               dualModeChanged(true);
+            } else if (undoStates[undoLevel+1].type == "selectAllChange") { // toggle select all
+               changeAllCheckbox.checked = !changeAllCheckbox.checked;
+               selectAllCheckboxChanged(true);
+            } else {
+               primarySet.tempSpeakerObjects = cloneSpeakerObjectArray(undoStates[undoLevel+1].state.slice(0)); // set primary to new state
+               secondarySet.tempSpeakerObjects = cloneSpeakerObjectArray(undoStates[undoLevel+1].secState.slice(0)); // set secondary to new state
+               let selectedSpeakerSet;
+
+               // handle currentRegion change
                removeCurrentRegion();
-               if (undoStates[undoLevel+2] && undoStates[undoLevel+2].type && undoStates[undoLevel+2].type == "remove") {
-                  selectedSpeakerSet = (undoStates[undoLevel+2].isSec) ? secondarySet : primarySet;
-                  if (selectedSpeakerSet.isSecondary) caretClicked("secondary-caret"); 
-                  else caretClicked("primary-caret");
-                  currentRegion = selectedSpeakerSet.tempSpeakerObjects[undoStates[undoLevel+2].currentRegionIndex];
-               } else {
-                  selectedSpeakerSet = (undoStates[undoLevel+1].isSec) ? secondarySet : primarySet;
-                  if (selectedSpeakerSet.isSecondary) caretClicked("secondary-caret"); 
-                  else caretClicked("primary-caret");
-                  currentRegion = selectedSpeakerSet.tempSpeakerObjects[undoStates[undoLevel+1].currentRegionIndex];
+               if (undoLevel+2 < undoStates.length) {
+                  if (undoStates[undoLevel+2] && undoStates[undoLevel+2].type && undoStates[undoLevel+2].type == "remove") {
+                     selectedSpeakerSet = (undoStates[undoLevel+2].isSec) ? secondarySet : primarySet;
+                     if (selectedSpeakerSet.isSecondary) caretClicked("secondary-caret"); 
+                     else caretClicked("primary-caret");
+                     currentRegion = selectedSpeakerSet.tempSpeakerObjects[undoStates[undoLevel+2].currentRegionIndex];
+                  } else {
+                     selectedSpeakerSet = (undoStates[undoLevel+1].isSec) ? secondarySet : primarySet;
+                     if (selectedSpeakerSet.isSecondary) caretClicked("secondary-caret"); 
+                     else caretClicked("primary-caret");
+                     currentRegion = selectedSpeakerSet.tempSpeakerObjects[undoStates[undoLevel+1].currentRegionIndex];
+                  }
+
+                  // console.log("redo-ing to index " + undoStates[undoLevel+1].currentRegionIndex);
+                  if (undoStates[undoLevel+1].currentRegionIndexes && undoStates[undoLevel+1].currentRegionIndexes.length > 1) {
+                     for (const idx of undoStates[undoLevel+1].currentRegionIndexes) currentRegions.push(currSpeakerSet.tempSpeakerObjects[idx]);
+                  }
                }
-
-               // console.log("redo-ing to index " + undoStates[undoLevel+1].currentRegionIndex);
-               if (undoStates[undoLevel+1].currentRegionIndexes && undoStates[undoLevel+1].currentRegionIndexes.length > 1) {
-                  for (const idx of undoStates[undoLevel-1].currentRegionIndexes) currentRegions.push(currSpeakerSet.tempSpeakerObjects[idx]);
-                  // currentRegions = getRegionsWithSpeaker(currentRegion.speaker);
-                  // if (!speakerCheckbox.checked) speakerCheckbox.click(); // ensures onchange event is fired
-               }
-            }
+            }
+            editsMade = true;  
+            
             
             reloadRegionsAndChapters();
             undoLevel++; // increment undoLevel
+            localStorage.setItem('undoLevel', undoLevel);
             if (undoLevel + 1 > undoStates.length - 1) redoButton.classList.add("disabled");
             else redoButton.classList.remove("disabled");
@@ -1466 +1887 @@
 
    function resetUndoStates() { // clear undo history
+      // console.log('resetUndoStates')
       undoStates = [{state: cloneSpeakerObjectArray(primarySet.tempSpeakerObjects), secState: cloneSpeakerObjectArray(secondarySet.tempSpeakerObjects)}];
       undoLevel = 0;
+      localStorage.removeItem('undoLevel');
+      localStorage.removeItem('undoStates');
       undoButton.classList.add("disabled");
       redoButton.classList.add("disabled");
@@ -1474 +1898 @@
    function waveformScrolled() { // waveform scroll handler
       if (currentRegion.speaker && getCurrentRegionIndex() != -1) { // updates region bound markers if selected region exists
-         hoverSpeaker.innerHTML = currentRegion.speaker;
-         hoverSpeaker.style.marginLeft = parseInt(currSpeakerSet.tempSpeakerObjects[getCurrentRegionIndex()].region.element.style.left.slice(0, -2)) - waveform.scrollLeft + "px";
-         removeRegionBounds();
+         setHoverSpeaker(currSpeakerSet.tempSpeakerObjects[getCurrentRegionIndex()].region.element.style.left, currentRegion.speaker);
+         drawCurrentRegionBounds();
+      }
+   }
+
+   function drawCurrentRegionBounds() {
+      removeRegionBounds();
+      if (editMode) {
          let currIndexes = getCurrentRegionsIndexes();
+         if (getCurrentRegionIndex != 0) drawRegionBounds(currSpeakerSet.tempSpeakerObjects[getCurrentRegionIndex()].region, wave.scrollLeft, "FireBrick");
          for (let i = 0; i < currIndexes.length; i++) {
-            drawRegionBounds(currSpeakerSet.tempSpeakerObjects[currIndexes[i]].region, waveform.scrollLeft, "black");
-         }
-         drawRegionBounds(currSpeakerSet.tempSpeakerObjects[getCurrentRegionIndex()].region, waveform.scrollLeft);
-      }
-   }
-
-   function drawRegionBounds(region, scrollPos) { // draws on canvas to show bounds of hovered/selected region
+            drawRegionBounds(currSpeakerSet.tempSpeakerObjects[currIndexes[i]].region, wave.scrollLeft, "FireBrick");
+         }
+      }
+   }
+
+   function drawRegionBounds(region, scrollPos, colour) { // draws on canvas to show bounds of hovered/selected region
       const hoverSpeakerCanvas = document.createElement("canvas");
-      let colour = "black";
       hoverSpeakerCanvas.id = "hover-speaker-canvas";
       hoverSpeakerCanvas.classList.add("region-bounds");
@@ -1495 +1923 @@
       ctx.translate(0.5, 0.5); // fixes lineWidth inconsistency
       ctx.lineWidth = 1;
-      if (currentRegions && currentRegions.length < 1 && isCurrentRegion(region)) {
+      if (colour == "FireBrick") ctx.lineWidth = 3;
+      if (currentRegions && currentRegions.length < 1 && isCurrentRegion(region) && editMode) {
          colour = "FireBrick";
          ctx.lineWidth = 3;
@@ -1525 +1954 @@
    }
 
-   function flashInput(valid) { // flashes background of input to show validity of input
-      if (valid) speakerInput.style.backgroundColor = "rgb(50,255,50)"; 
-      else speakerInput.style.backgroundColor = "rgb(255,50,50)";
-      setTimeout(() => { speakerInput.style.backgroundColor = "rgb(255,255,255)" }, 750);
-   }
-
    function flashChapters() {
       chapters.style.backgroundColor = "rgb(66, 84, 88)";

main/trunk/greenstone3/web/interfaces/default/style/core.css

@@ -1408 +1408 @@
 #waveform {
     background-color: white;
+        position: relative;
 }
 
@@ -1444 +1445 @@
 
 #chapters {
-    width: 50%;
-    height: 0;
-    max-height: 30vh;
-    font-size: 14px;
-    background-color: rgb(40, 54, 58);
-    color: white;
+    width: 100%;
+        height: 90%;
+        max-height: 90%;
     overflow-y: scroll;
-        /* transition: background-color 0.4s ease-in-out;
-    transition: height 0.4s ease; */
-        transition: 0.3s ease-in-out;
+        transition: background-color 0.3s ease, height 0.3s ease;
+        user-select: none;
         cursor: wait;
-        user-select: none;
 } 
 
-/* .audio-scroll::-webkit-scrollbar {
-    height: 8px;
-    width: 8px;
-    background: rgb(24, 36, 39);
-}
-
-.audio-scroll::-webkit-scrollbar-thumb {
-    background: #66d640;
-} */
+.audio-scroll {
+    scroll-behavior: smooth;
+}
 
 .chapter {
@@ -1472 +1462 @@
     border-style: solid;
     border-width: 1px 0 0 0;
-    border-top-right-radius: 5px;
+    /* border-top-right-radius: 5px; */
     border-top-left-radius: 5px;
     padding: 0.5rem;
     transition: 0.1s ease;
-        
+        display: flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        justify-content: space-between;
+        cursor: pointer;
 }
 
 .chapter:hover {
     background-color: rgb(101, 116, 116);
-    cursor: pointer;
+}
+
+#chapter-alert {
+    display: inline-block;
+    margin: 1rem;
 }
 
@@ -1490 +1488 @@
 .selected-chapter:hover {
     background-color: rgba(255, 100, 100, 0.5);
+}
+
+.speakerTime {
+    /* float: right; */
+    white-space: nowrap;
+}
+
+.speakerName {
+    /* white-space: normal; */
 }
 
@@ -1497 +1504 @@
 }
 
-#downloadButton, #editButton, #fullscreenButton {
+#downloadButton, #editorModeButton, #fullscreenButton {
     transform: scale(0.75);
     padding-right: 0.75rem;
@@ -1540 +1547 @@
 }
 
-.speakerTime {
-    float: right;
-}
-
 #zoom-slider {
     width: 10rem;
@@ -1640 +1643 @@
 .metadataTable td {
     padding: 2px;
-<<<<<<< .mine
 }
 
 /* edit functionality */
 #edit-panel {
+    max-width: 70%;
     width: 50%;
     height: 0px;
+    max-height: 30vh;
     position: relative;
     right: 0;
-    max-height: 30vh;
-    font-size: 15px;
-    background-color: rgb(40, 54, 58);
     color: white;
-    overflow-y: auto;
-    transition: height 0.4s ease;
+    overflow-y: hidden;
+    transition: height 0.4s ease, padding 0.4s ease;
     box-sizing: border-box; /* ensures padding doesn't modify width */
     font-family: 'Courier New', monospace;
     font-size: 0.85rem;
     border-left: 1px solid rgb(24, 36, 39);
+    user-select: none;
 
     display: flex;
@@ -1664 +1666 @@
     flex-wrap: nowrap;
     justify-content: space-between;
+    flex-grow: 1;
 }
 
@@ -1751 +1754 @@
 #audio-dropdowns {
     width: 100%;
+    background-color: rgb(40, 54, 58);
     display: flex;
     flex-direction: row;
     flex-wrap: nowrap;
-    justify-content: space-between;
+    justify-content: flex-start;
 }
 
@@ -1801 +1805 @@
     filter: grayscale(100%);
     -webkit-filter: grayscale(100%);
-    cursor: not-allowed !important;
+    /* cursor: not-allowed !important; */
+    pointer-events: none;
 }
 
@@ -1821 +1826 @@
 .region-top {
   height: 30% !important;
-  top: 10% !important;
+  top: 15% !important;
 }
 
 .region-bottom {
     height: 30% !important;
-    top: 60% !important;
+    top: 55% !important;
 }
 
@@ -1851 +1856 @@
 }
 
-#selected-header {
+.selected-header {
     justify-content: space-between;
     padding-top: 0.5rem;
@@ -1857 +1862 @@
 }
 
+#context-menu {
+    position: fixed;
+    z-index: 10000;
+    width: 200px;
+    background: rgb(20, 30, 32);
+    box-shadow: 1px 1px 15px -5px black;
+    border-radius: 5px;
+    display: none;
+}
+
+#context-menu.visible {
+    display: block;
+    transition: display 200ms ease-in-out;
+}
+
+.context-menu-item {
+    padding: 8px 10px;
+    font-size: 14px;
+    user-select: none;
+    color: #eee;
+    cursor: pointer;
+    border-radius: inherit;
+}
+
+.context-menu-item:hover {
+    background: #343434;
+}
+
+.context-menu-item.faded {
+    color: rgb(94, 94, 94);
+}
+
+.context-menu-item.faded:hover {
+    background-color: rgb(20, 30, 32);
+}
+
+#dual-mode-menu-button {
+    position: absolute;
+    right: 0;
+    padding: 0.2rem;
+    width: 0.8rem !important;
+    z-index: 1;
+    display: none;
+}
+
+#dual-mode-menu-button.visible {
+    display: block;
+}
+
+#dual-mode-menu {
+    position: absolute;
+    right: 1.5rem;
+    width: 150px;
+    background: rgb(20, 30, 32);
+    box-shadow: 1px 1px 15px -5px black;
+    border-radius: 5px;
+    z-index: 10;
+    display: none;
+}
+
+#dual-mode-menu.visible {
+    display: block;
+    transition: display 200ms ease-in-out;
+}
+
+.dual-mode-menu-item {
+    padding: 8px 10px;
+    font-size: 14px;
+    user-select: none;
+    color: #eee;
+    cursor: pointer;
+    border-radius: inherit;
+}
+
+.dual-mode-menu-item:hover {
+    background: #343434;
+}
+
+#prim-set-label {
+    position: absolute;
+    top: 0px;
+    left: 0.2rem;
+    color: #eee;
+    font-size: 12px;
+}
+
+#sec-set-label {
+    position: absolute;
+    bottom: 0px;
+    left: 0.2rem;
+    color: #eee;
+    font-size: 12px;
+}
+
+#chapter-search-box {
+    width: 100%;
+    height: 10%;
+    display: flex;
+    flex-direction: row;
+}
+
+#chapter-search-input {
+    width: 90%;
+    height: 100%;
+    background: transparent;
+    border: none;
+    outline: none;
+    color: #eee;
+    font-family: 'Courier New', Courier, monospace;
+    font-size: 1rem;
+    margin-left: 0.5rem;
+    margin-top: 0.2rem;
+    margin-bottom: 0.2rem;
+}
+
+#chapter-search-input:focus {
+    outline: none;
+}
+
+#chapter-search-input::placeholder {
+    color: white;
+}
+
+#chapters-container {
+    min-width: 30%;
+    max-width: 50%;
+    width: 50%;
+    height: 100%;
+    max-height: 30vh;
+    font-size: 14px;
+    color: white;
+    transition: background-color 0.3s ease, height 0.3s ease;
+    user-select: none;
+    resize: horizontal;
+    overflow:auto;
+}
+
+#chapters-container img {
+    pointer-events: none;
+    width: 1.5rem;
+    padding: 0.2rem;
+}
+
 #favouritesFullViewLink {
     color: black;

main/trunk/greenstone3/web/interfaces/default/style/map-editors.css

@@ -54 +54 @@
 }
 
-input[type=range]{
+.ControlPanel input[type=range]{
     height: 10px;
 }

main/trunk/greenstone3/web/interfaces/default/transform/pages/document.xsl

@@ -497 +497 @@
                     <xsl:choose>
                       <xsl:when test="@docType='simple'">
-                    <xsl:call-template name="wrapDocumentNodes"/>
+                                <xsl:call-template name="wrapDocumentNodes"/>
                       </xsl:when>
                       <xsl:otherwise>