Annotation-Pushers
/
Annotation-System
1
Fork 0
Code Issues 1 Pull Requests Projects Releases Wiki Activity

Attempting to speed up rendering without hurting framerate.

This commit is contained in:
Asaf Gartner 2018-06-23 14:32:01 +00:00
parent 8c17194180
commit 6136a45886
1 changed files with 51 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

103
cinera/cinera_search.js
View File

@ -35,7 +35,7 @@ indexSort.addEventListener("click", function(ev) {
var lastQuery = null;
var resultsToRender = [];
var resultsIndex = 0;
var resultsMarkerIndex = 0;
var resultsMarkerIndex = -1;
var resultsContainer = document.getElementById("cineraResults");
var rendering = false;
@ -93,7 +93,7 @@ function runSearch() {
oldResultsContainer.parentNode.insertBefore(resultsContainer, oldResultsContainer);
oldResultsContainer.remove();
resultsIndex = 0;
resultsMarkerIndex = 0;
resultsMarkerIndex = -1;
}
lastQuery = queryStr;
resultsToRender = [];
@ -145,63 +145,62 @@ function runSearch() {
document.getElementById("cineraResultsSummary").textContent = "Found: " + numEpisodes + " episodes, " + numMarkers + " markers, " + totalTime + "total.";
}
function renderMatches(renderStart) {
var query = resultsToRender[resultsIndex].query;
var episode = resultsToRender[resultsIndex].episode;
var matches = resultsToRender[resultsIndex].matches;
var markerList = null;
if (resultsMarkerIndex == 0) {
var dayContainer = dayContainerPrototype.cloneNode(true);
var dayName = dayContainer.children[0];
markerList = dayContainer.children[1];
dayName.textContent = episode.day + ": " + episode.title;
resultsContainer.appendChild(dayContainer);
} else {
markerList = document.querySelector("#cineraResults > .dayContainer:nth-child(" + (resultsIndex+1) + ") .markerList");
}
do {
var match = matches[resultsMarkerIndex];
var marker = markerPrototype.cloneNode();
var playerURLPrefix = (baseURL ? baseURL + "/" : "") + (playerLocation ? playerLocation + "/" : "");
marker.setAttribute("href", playerURLPrefix + episode.filename.replace(/"/g, "") + "/#" + match.totalTime);
query.lastIndex = 0;
var cursor = 0;
var text = match.text;
var result = null;
marker.appendChild(document.createTextNode(match.prettyTime + " "));
while (result = query.exec(text)) {
if (result.index > cursor) {
marker.appendChild(document.createTextNode(text.slice(cursor, result.index)));
}
var highlightEl = highlightPrototype.cloneNode();
highlightEl.textContent = result[0];
marker.appendChild(highlightEl);
cursor = result.index + result[0].length;
}
if (cursor < text.length) {
marker.appendChild(document.createTextNode(text.slice(cursor, text.length)));
}
markerList.appendChild(marker);
resultsMarkerIndex++;
} while (resultsMarkerIndex < matches.length && performance.now() - renderStart < 1);
return resultsMarkerIndex == matches.length;
}
function renderResults() {
if (resultsIndex < resultsToRender.length) {
rendering = true;
var renderStart = performance.now();
while (resultsIndex < resultsToRender.length && performance.now() - renderStart < 1) {
var done = renderMatches(renderStart);
if (done) {
var maxItems = 10;
var numItems = 0;
while (numItems < maxItems && resultsIndex < resultsToRender.length) {
var query = resultsToRender[resultsIndex].query;
var episode = resultsToRender[resultsIndex].episode;
var matches = resultsToRender[resultsIndex].matches;
var markerList = null;
if (resultsMarkerIndex == -1) {
var dayContainer = dayContainerPrototype.cloneNode(true);
var dayName = dayContainer.children[0];
markerList = dayContainer.children[1];
dayName.textContent = episode.day + ": " + episode.title;
resultsContainer.appendChild(dayContainer);
resultsMarkerIndex = 0;
numItems++;
} else {
markerList = document.querySelector("#cineraResults > .dayContainer:nth-child(" + (resultsIndex+1) + ") .markerList");
}
while (numItems < maxItems && resultsMarkerIndex < matches.length) {
var match = matches[resultsMarkerIndex];
var marker = markerPrototype.cloneNode();
var playerURLPrefix = (baseURL ? baseURL + "/" : "") + (playerLocation ? playerLocation + "/" : "");
marker.setAttribute("href", playerURLPrefix + episode.filename.replace(/"/g, "") + "/#" + match.totalTime);
query.lastIndex = 0;
var cursor = 0;
var text = match.text;
var result = null;
marker.appendChild(document.createTextNode(match.prettyTime + " "));
while (result = query.exec(text)) {
if (result.index > cursor) {
marker.appendChild(document.createTextNode(text.slice(cursor, result.index)));
}
var highlightEl = highlightPrototype.cloneNode();
highlightEl.textContent = result[0];
marker.appendChild(highlightEl);
cursor = result.index + result[0].length;
}
if (cursor < text.length) {
marker.appendChild(document.createTextNode(text.slice(cursor, text.length)));
}
markerList.appendChild(marker);
numItems++;
resultsMarkerIndex++;
}
if (resultsMarkerIndex == matches.length) {
resultsMarkerIndex = -1;
resultsIndex++;
}
}
requestAnimationFrame(renderResults);
setTimeout(renderResults, 0);
} else {
rendering = false;
}