transcript in search

search.py

@@ -96,6 +96,7 @@ def searchcommand():
                 record['performance_date'] = performance_date.strftime("%d.%m.%Y")
             except (ValueError, TypeError):
                 record['performance_date'] = None
+        record['query'] = query
         results.append(record)
 
     # Randomize and sort

static/app.css

@@ -140,6 +140,10 @@ a.show-transcript:hover {
   color: rgb(113, 146, 167);
 }
 
+.highlight {
+  background-color: yellow;
+}
+
 a.create-share {
   text-decoration: none;
   color: var(--main-text-color);

static/app.js

@@ -314,6 +314,7 @@ document.querySelectorAll('.play-file').forEach(link => {
     link.addEventListener('click', function (event) {
       event.preventDefault();
       const url = this.getAttribute('data-url');
+      const highlight = this.getAttribute('highlight');
       fetch(url)
         .then(response => {
           if (!response.ok) {
@@ -322,6 +323,23 @@ document.querySelectorAll('.play-file').forEach(link => {
           return response.text();
         })
         .then(data => {
+          // Highlight words in the transcript (substring match, case-insensitive)
+          if (highlight) {
+            // Escape special regex chars
+            const escapeRegExp = s => s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+
+            // Split on whitespace, escape each word, and join with |
+            const words = highlight
+              .trim()
+              .split(/\s+/)
+              .map(escapeRegExp)
+              .filter(Boolean);
+
+            if (words.length) {
+              const regex = new RegExp(`(${words.join('|')})`, 'gi');
+              data = data.replace(regex, '<span class="highlight">$1</span>');
+            }
+          }
           document.getElementById('transcriptContent').innerHTML = marked.parse(data);
           document.getElementById('transcriptModal').style.display = 'block';
         })
@@ -357,7 +375,14 @@ document.querySelectorAll('.play-file').forEach(link => {
         });
     });
   });
-}
+
+  // Handle back/forward navigation.
+  window.addEventListener('popstate', function (event) {
+    const subpath = event.state ? event.state.subpath : '';
+    loadDirectory(subpath);
+  });
+
+} // End of attachEventListeners function
 
 // Modal close logic for transcript modal.
 document.addEventListener('DOMContentLoaded', function () {
@@ -379,11 +404,6 @@ document.addEventListener('DOMContentLoaded', function () {
   loadDirectory(initialSubpath);
 });
 
-// Handle back/forward navigation.
-window.addEventListener('popstate', function (event) {
-  const subpath = event.state ? event.state.subpath : '';
-  loadDirectory(subpath);
-});
 
 
 let isReloadButtonVisible = true; // Boolean to track the visibility of the reload button.

static/search.js

@@ -10,20 +10,20 @@ document.addEventListener('DOMContentLoaded', function() {
                 const card = document.createElement('div');
                 const filenameWithoutExtension = file.filename.split('.').slice(0, -1).join('.');
                 const parentFolder = file.relative_path.split('/').slice(0, -1).join('/');
+                const transcriptURL = '/transcript/' + parentFolder + '/Transkription/' + filenameWithoutExtension + '.md';
                 card.className = 'card';
                 card.innerHTML = `
                     <div class="card-body">
                         <p><button class="btn btn-light" onclick="startPlaying('${file.relative_path}')" style="width:100%;">🔊 ${filenameWithoutExtension}</button></p>
                         <p><button onclick="window.open('/path/${file.relative_path}', '_self');" class="btn btn-light btn-sm" style="width:100%;">📁 ${parentFolder}</button></p>
-                        <p class="card-text">Datum: ${file.performance_date}</p>
-                        ${ file.transcript_hits !== undefined 
-                            ? `<p class="card-text">Treffer im Transkript: ${file.transcript_hits}</p>` 
-                            : `<p class="card-text">Downloads: ${file.hitcount}</p>`
-                        }
+                        <p class="card-text">Anzahl Downloads: ${file.hitcount}</p>
+                        ${ file.performance_date !== undefined ? `<p class="card-text">Datum: ${file.performance_date}</p>` : ``}
+                        ${ file.transcript_hits  !== undefined ? `<p class="card-text">Treffer im Transkript: ${file.transcript_hits} <a href="#" class="show-transcript" data-url="${transcriptURL}" highlight="${file.query}">&#128196;</a></p>` : ``}
                     </div>
                 `;
                 resultsDiv.appendChild(card);
             });
+            attachEventListeners();
         } else {
             resultsDiv.innerHTML = '<p>No results found.</p>';
         }