From 8db201cd20ee3b67a0fa4491d4413d315f0a1c79 Mon Sep 17 00:00:00 2001
From: berndmoos <bernd.moos@googlemail.com>
Date: Wed, 11 Dec 2024 13:47:57 +0100
Subject: [PATCH] #224

---
 src/main/java/org/zumult/io/exb2Partitur.xsl | 130 ++++++++
 web/WEB-INF/jspf/zumultNav.jspf              |   4 +-
 web/index.jsp                                |  18 +-
 web/js/media_zupass.js                       | 296 +++++++++++++++++++
 web/jsp/zuPass.jsp                           | 214 ++++++++++++++
 5 files changed, 655 insertions(+), 7 deletions(-)
 create mode 100644 src/main/java/org/zumult/io/exb2Partitur.xsl
 create mode 100644 web/js/media_zupass.js
 create mode 100644 web/jsp/zuPass.jsp

diff --git a/src/main/java/org/zumult/io/exb2Partitur.xsl b/src/main/java/org/zumult/io/exb2Partitur.xsl
new file mode 100644
index 0000000..b127aa6
--- /dev/null
+++ b/src/main/java/org/zumult/io/exb2Partitur.xsl
@@ -0,0 +1,130 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
+    xmlns:xs="http://www.w3.org/2001/XMLSchema"
+    xmlns:math="http://www.w3.org/2005/xpath-functions/math"
+    exclude-result-prefixes="xs math"
+    version="3.0">
+    
+    <xsl:variable name="TIMELINE_COPY">
+        <timeline>
+            <xsl:for-each select="//tli">
+                <xsl:copy>
+                    <xsl:copy-of select="@*"/>
+                    <xsl:attribute name="position" select="count(preceding-sibling::tli) + 1"/>
+                </xsl:copy>
+            </xsl:for-each>
+        </timeline>
+    </xsl:variable>
+    
+    <xsl:template match="/">
+            <div>
+                
+                
+                <div style="width:100%; overflow:auto;" >
+                    <table class="w-100 d-block d-md-table">
+                        <tr>
+                            <td class="empty"> </td>
+                            <xsl:apply-templates select="//tli"/>
+                        </tr>
+                        <xsl:apply-templates select="//tier"/>
+                    </table>
+                </div>
+                
+                <!-- <div style="width:100%; text-align:center; margin-top:10px;">
+                    <svg id="measurement" width="2400" height="200" xmlns="http://www.w3.org/2000/svg" style="background:rgb(220,220,220); border: dotted 3px gray">
+                        <text x="5" y="15" fill="black">Some measurement</text>
+                        <line x1="0" y1="100" x2="2400" y2="100" style="stroke:gray;stroke-width:2" stroke-dasharray="4" />
+                        <circle id="circle1" cx="0" cy="100" r="10" style="fill:red;" />
+                        <rect id="rect1" x ="0" y="80" height="12" width ="12" stroke-width ="1px" stroke ="black" fill="white" />
+                        <line id="line1" x1="0" y1="100" x2="0" y2="80" style="stroke:black;stroke-width:1"/>
+                    </svg>
+                    
+                </div> -->
+            </div>
+        
+    </xsl:template>
+    
+    <xsl:template match="tli">
+        <td class="tli">
+            <xsl:attribute name="data-start">
+                <xsl:value-of select="@time"/>
+            </xsl:attribute>
+            <xsl:attribute name="data-end">
+                <xsl:value-of select="following-sibling::tli[1]/@time"/>
+            </xsl:attribute>
+            <xsl:value-of select="position()"/>
+        </td>
+    </xsl:template>
+    
+    <xsl:template match="tier">
+        <xsl:variable name="TIER_COPY">
+            <xsl:copy-of select="."/>
+        </xsl:variable>
+        <tr>
+            <td>
+                <xsl:attribute name="class">
+                    <!-- <xsl:value-of select="@category"/>--><xsl:text> label</xsl:text>
+                </xsl:attribute>
+                <xsl:value-of select="@display-name"/>
+            </td>
+            <xsl:apply-templates select="event"/>
+        </tr>
+    </xsl:template>
+    
+    <xsl:template match="event">
+        <xsl:variable name="START" select="@start"/>
+        <xsl:choose>
+            <xsl:when test="preceding-sibling::event[1]">
+                <xsl:variable name="PRECEDING_END" select="preceding-sibling::event[1]/@end"/>
+                <xsl:if test="not(@start=$PRECEDING_END)">
+                    <td class="empty">
+                        <xsl:attribute name="colspan">
+                            <xsl:value-of select="$TIMELINE_COPY/descendant::tli[@id=$START]/@position - $TIMELINE_COPY/descendant::tli[@id=$PRECEDING_END]/@position"/>
+                        </xsl:attribute>
+                    </td>                    
+                </xsl:if>
+            </xsl:when>
+            <xsl:otherwise>
+                <xsl:if test="$TIMELINE_COPY/descendant::tli[@id=$START]/@position &gt;1">
+                    <td class="empty">
+                        <xsl:attribute name="colspan">
+                            <xsl:value-of select="$TIMELINE_COPY/descendant::tli[@id=$START]/@position - 1"/>
+                        </xsl:attribute>
+                    </td>                    
+                </xsl:if>
+            </xsl:otherwise>
+        </xsl:choose>
+        
+        <xsl:variable name="END" select="@end"/>
+        <xsl:variable name="COLSPAN" select="$TIMELINE_COPY/descendant::tli[@id=$END]/@position - $TIMELINE_COPY/descendant::tli[@id=$START]/@position"/>
+        <td>
+            <xsl:attribute name="colspan">
+                <xsl:value-of select="$COLSPAN"/>
+            </xsl:attribute>
+            <xsl:attribute name="class">
+                <xsl:value-of select="../@category"/>
+            </xsl:attribute>
+            <xsl:attribute name="data-start">
+                <xsl:value-of select="$TIMELINE_COPY/descendant::tli[@id=$START]/@time"/>
+            </xsl:attribute>
+            <xsl:attribute name="data-end">
+                <xsl:value-of select="$TIMELINE_COPY/descendant::tli[@id=$END]/@time"/>
+            </xsl:attribute>
+            <xsl:value-of select="text()"/>
+        </td>
+        
+        <xsl:if test="not(following-sibling::event[1])">
+            <td class="empty">
+                <xsl:variable name="COLSPAN" select="$TIMELINE_COPY/descendant::tli[last()]/@position - $TIMELINE_COPY/descendant::tli[@id=$END]/@position"/>
+                <xsl:attribute name="colspan">
+                    <xsl:value-of select="$COLSPAN"/>
+                </xsl:attribute>
+            </td>                    
+            
+        </xsl:if>
+        
+    </xsl:template>
+    
+    
+    
+</xsl:stylesheet>
\ No newline at end of file
diff --git a/web/WEB-INF/jspf/zumultNav.jspf b/web/WEB-INF/jspf/zumultNav.jspf
index 2472269..ab2c5e8 100644
--- a/web/WEB-INF/jspf/zumultNav.jspf
+++ b/web/WEB-INF/jspf/zumultNav.jspf
@@ -11,9 +11,9 @@
 <%@page import="org.zumult.objects.IDList"%>
 <%@ page pageEncoding="UTF-8" %>
     <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
-        <a class="navbar-brand" href="http://agd.ids-mannheim.de/folk.shtml">
+        <a class="navbar-brand" href="http://zumult.org">
             <% String imgSrc = "../images/agd.png"; %>
-            <img src="<%= imgSrc %>" height="30" class="d-inline-block align-top" alt=""/>
+            <!-- <img src="<%= imgSrc %>" height="30" class="d-inline-block align-top" alt=""/> -->
         </a>
         <div class="collapse navbar-collapse" id="navbarSupportedContent">
             <a class="navbar-brand" href="http://www.zumult.org"><b><%= pageName %></b></a>
diff --git a/web/index.jsp b/web/index.jsp
index 337bc6f..eadc5ff 100644
--- a/web/index.jsp
+++ b/web/index.jsp
@@ -7,6 +7,7 @@
 <%@page contentType="text/html" pageEncoding="UTF-8"%>
 
 <%@page import="java.util.Locale"%>
+<%@page import="java.util.Random"%>
 <%@page import="java.util.ResourceBundle"%>
 <%@page import="org.zumult.objects.IDList"%>
 <%@page import="org.zumult.backend.BackendInterfaceFactory"%>
@@ -60,8 +61,11 @@
     <%
        String pageTitle = myResources.getString("testApp"); 
        BackendInterface bi = BackendInterfaceFactory.newBackendInterface();
-       IDList allTranscriptIDs =  bi.getTranscripts4Corpus(bi.getCorpora().get(0));
-       String randomTranscriptID = allTranscriptIDs.get((int)(Math.random() * (allTranscriptIDs.size())));
+       Random random = new Random();
+       IDList allCorpusIDs = bi.getCorpora();
+       String randomCorpusID = allCorpusIDs.get(random.nextInt(allCorpusIDs.size()));
+       IDList allTranscriptIDs =  bi.getTranscripts4Corpus(randomCorpusID);
+       String randomTranscriptID = allTranscriptIDs.get(random.nextInt(allTranscriptIDs.size()));
     %>
 
     <body style="background-image: url('./images/talking.png');">
@@ -73,12 +77,13 @@
             </div>
             <div class="col-sm-8" style="background:white;padding-top: 20px; border-radius: 15px;">
                 <div class="m-3 text-center">
-                    <a href="./jsp/corpusoverview.jsp?lang=<%=currentLocale.getLanguage()%>" class="btn btn-outline-info" target="_blank">Corpora</a>                    
+                    This ZuMult instance has <%= allCorpusIDs.size() %> corpora: <%= String.join(" / ", allCorpusIDs) %>
+                    <a href="./jsp/corpusoverview.jsp?lang=<%=currentLocale.getLanguage()%>" class="btn btn-outline-info ml-3" target="_blank">Corpus Overview</a>                    
                 </div>
                 
                 <div class="card-deck">
                     <div class="card mb-3">
-                        <img class="card-img-top" src="./images/query.jpg" alt="Card image cap">
+                        <img class="card-img-top" src="./images/query.png" alt="Card image cap">
                       <div class="card-body">
                         <h5 class="card-title">ZuRecht</h5>
                         <p class="card-text"><%=myResources.getString("ZuRechtShort")%></p>
@@ -88,9 +93,12 @@
                     <div class="card mb-3">
                       <img class="card-img-top" src="./images/transcript2.png" alt="Card image cap">
                       <div class="card-body">
-                        <h5 class="card-title">ZuViel</h5>
+                        <h5 class="card-title">ZuViel / ZuPass / ZuAnn</h5>
                         <p class="card-text"><%=myResources.getString("ZuVielShort")%></p>
                         <a href="./jsp/zuViel.jsp?transcriptID=<%= randomTranscriptID %>" class="btn btn-primary" target="_blank">ZuViel</a>
+                        <a href="./jsp/zuPass.jsp?transcriptID=<%= randomTranscriptID %>" class="btn btn-primary" target="_blank">ZuPass</a>
+                        <a href="./jsp/zuAnn.jsp?transcriptID=<%= randomTranscriptID %>" class="btn btn-primary" target="_blank">ZuAnn</a>
+                        <small class="text-muted ml-2"><%= randomCorpusID %> / <%= randomTranscriptID %> </small>
                       </div>
                     </div>                      
                 </div>
diff --git a/web/js/media_zupass.js b/web/js/media_zupass.js
new file mode 100644
index 0000000..78688bf
--- /dev/null
+++ b/web/js/media_zupass.js
@@ -0,0 +1,296 @@
+/* 
+ * To change this license header, choose License Headers in Project Properties.
+ * To change this template file, choose Tools | Templates
+ * and open the template in the editor.
+ */
+
+function getMasterMediaPlayer(){
+	if (document.getElementById('master-video')){  
+		return $("#master-video")[0];
+	}
+	return $("#master-audio")[0];
+}
+
+function getCurrentPosition(){
+    return getMasterMediaPlayer().currentTime;
+}
+
+function getVideoImage(videoID){
+    var WEBSERVICE = "/ZumultDataServlet?command=getVideoImage";
+    var PARAMETERS =    "&videoID=" + videoID
+                     +  "&position=" + getCurrentPosition();
+    $.get(BASE_URL + WEBSERVICE + PARAMETERS, function( data ) {
+            var downloadURL = "../downloads/" + $(data).find("file").text();
+            //document.getElementById("secretIFrame").setAttribute("src", downloadURL);
+            window.open(downloadURL);
+        }
+    );       
+}
+
+function jump(time){
+    var player = getMasterMediaPlayer();
+    player.currentTime=time;
+    player.play();
+}	
+
+function frameForward(){
+    var player = getMasterMediaPlayer();
+    player.pause();
+    player.currentTime = player.currentTime + 0.04;
+}
+
+function frameBackward(){
+    var player = getMasterMediaPlayer();
+    player.pause();
+    player.currentTime = player.currentTime - 0.04;
+}
+
+
+function stop(){
+    getMasterMediaPlayer().pause();
+}
+
+function preventMediaContextMenu() {
+     var player = getMasterMediaPlayer();
+     player.addEventListener('contextmenu', function(e) {
+          e.preventDefault();
+          return false;
+     });
+     if (document.getElementById('secondaryVideoPlayer')){        
+         document.getElementById('secondaryVideoPlayer').addEventListener('contextmenu', function(e) { 
+            e.preventDefault();
+            return false; 
+        });
+    }
+     
+}
+
+function initialiseMedia(){
+    //preventMediaContextMenu();
+    registerMediaListener();
+    addOnDblClicks();
+	console.log("media initialised");
+}
+
+/* this will give every token a double click handler so that it can initialise playback */
+function addOnDblClicks(){
+    $("td").dblclick(function(e) {
+        e.preventDefault();
+        clearSelection();        
+        jump(this.dataset.start);
+    });       
+	console.log("double clicks added");
+}
+
+function clearSelection() {
+    if(document.selection && document.selection.empty) {
+        document.selection.empty();
+    } else if(window.getSelection) {
+        var sel = window.getSelection();
+        sel.removeAllRanges();
+    }
+}
+
+
+
+function registerMediaListener(){
+    var player = getMasterMediaPlayer();
+       
+    player.addEventListener("timeupdate", updateTime, true);                     
+    player.addEventListener("onpause", updateTime, true);   
+    player.addEventListener('seeking', scrollTranscript, true);
+    player.addEventListener('seeked', scrollTranscript, true);
+    //preventVideoContextMenu();
+    
+    if (document.getElementById('video-1')){        
+        player.addEventListener('seeking', seek, true);
+        player.addEventListener('seeked', seek, true);
+
+        player.addEventListener('play', function () {
+            document.getElementById('video-1').play();
+          }, true);
+
+        player.addEventListener('pause', function () {
+            document.getElementById('video-1').pause();
+        }, true);
+    }
+    
+    if (document.getElementById('video-2')){        
+        player.addEventListener('play', function () {
+            document.getElementById('video-2').play();
+          }, true);
+
+        player.addEventListener('pause', function () {
+            document.getElementById('video-2').pause();
+        }, true);
+    }
+}
+
+function updateSVGDummy(time){
+
+   const circle = document.getElementById("circle1");
+
+    var traceElement = document.createElementNS("http://www.w3.org/2000/svg", 'circle'); //Create a path in SVG's namespace
+    traceElement.setAttribute("r","1"); //Set path's data
+    traceElement.setAttribute("cx", circle.getAttribute("cx"));
+    traceElement.setAttribute("cy", circle.getAttribute("cy"));
+    traceElement.style.fill="gray";
+
+    document.getElementById("measurement").appendChild(traceElement);
+    
+
+   circle.setAttribute("cx", time*10);  
+   const randomNumber = Math.random();
+   if (randomNumber<0.15){
+       circle.setAttribute("cy", Math.max(0, +circle.getAttribute("cy") - 10));        
+       circle.style.fill="yellow";
+   } else if (randomNumber>0.85){
+       circle.setAttribute("cy", Math.min(200, +circle.getAttribute("cy") + 10));        
+       circle.style.fill="red";
+   } else {
+       if (randomNumber<0.5){
+           circle.style.fill="green";
+       } else if (randomNumber>0.5) {
+           circle.style.fill="blue";           
+       }
+   }
+   
+   
+   const randomNumber2 = Math.random();
+   const rect = document.getElementById("rect1");
+   rect.setAttribute("x", time*10);  
+   if (randomNumber2<0.25){
+       rect.setAttribute("y", Math.max(0, +rect.getAttribute("y") - 10));        
+   } else if (randomNumber2>0.75){
+       rect.setAttribute("y", Math.min(200, +rect.getAttribute("y") + 10));        
+   } 
+
+   const line1 = document.getElementById("line1");
+   line1.setAttribute("y1", circle.getAttribute("cy"));        
+   line1.setAttribute("x1", circle.getAttribute("cx"));        
+   line1.setAttribute("y2", rect.getAttribute("y"));        
+   line1.setAttribute("x2", rect.getAttribute("x"));        
+
+}
+
+function updateTime(){
+    var player = getMasterMediaPlayer();
+    var elapsedTime = player.currentTime;                        
+    var scrollOnce = false;
+    
+    //updateSVGDummy(elapsedTime);
+    
+    
+    updateSVGCursor(elapsedTime);
+
+    // this is finding all the span elements (tokens) that are within the current time
+    var spanElements = document.getElementsByTagName('td');
+    for (var i = 0; i < spanElements.length; i++) {
+        spanElement = spanElements[i];
+        start = spanElement.getAttribute('data-start');
+        end = spanElement.getAttribute('data-end');
+        if ((!player.paused) && (start < elapsedTime) && (end > elapsedTime)){
+            spanElement.classList.add("highlight-playback");            
+            
+            if (!scrollOnce){
+                spanElement.scrollIntoView();
+                window.scrollBy(0, -150);
+                scrollOnce = true;
+            }
+            
+        } else {
+            spanElement.classList.remove("highlight-playback");            
+        }
+    }     
+    
+    var tableCursorElements = document.getElementsByClassName('tablerow_cursor');
+    for (var i = 0; i < tableCursorElements.length; i++) {
+        tableCursorElement = tableCursorElements[i];
+        start = tableCursorElement.getAttribute('data-start');
+        end = tableCursorElement.getAttribute('data-end');
+        if ((!player.paused) && (start < elapsedTime) && (end > elapsedTime)){
+            //tableCursorElement.style.border = "thick solid #0000FF";
+            tableCursorElement.classList.add("highlight-playback");            
+        } else {
+            tableCursorElement.classList.remove("highlight-playback");            
+        }
+        
+    }
+    
+    
+}
+
+function updateSVGCursor(time){
+    var cursor = document.getElementById('svg_cursor')    
+    if (cursor!==null){
+        // one second is ten pixels? seems like
+        var newX = (time - startTime) * 10;
+        cursor.setAttribute('x1', newX);
+        cursor.setAttribute('x2', newX);
+        
+        cursor.scrollIntoView({inline: "center"});
+    }
+}
+
+function seek() {
+  const time = getMasterMediaPlayer().currentTime;
+  document.getElementById('video-1').currentTime = time;
+  document.getElementById('video-2').currentTime = time;
+  updateSVGDummy(time);
+}
+
+// this one reacts to user-initiated navigation in the audio or video
+function scrollTranscript() {
+    var player = getMasterMediaPlayer();
+    var elements = document.getElementsByTagName('span');
+    var scrollOnce = false;
+    for (var i = 0; i < elements.length; i++) {
+        element = elements[i];
+        start = element.getAttribute('data-start');
+        end = element.getAttribute('data-end');
+        if ((start < player.currentTime) && (end > player.currentTime)){
+            if (!scrollOnce){
+                element.scrollIntoView();
+                window.scrollBy(0, -150);
+                scrollOnce = true;
+            }            
+        }
+    }                        
+}
+
+function updatePlaybackSpeed(){
+    var playbackSpeed = document.getElementById('playbackSpeedSlider').value;    
+    var player = getMasterMediaPlayer();
+    player.playbackRate = playbackSpeed / 100;
+    if (document.getElementById('secondaryVideoPlayer')){        
+        document.getElementById('secondaryVideoPlayer').playbackRate = playbackSpeed / 100;
+    }
+    document.getElementById('playbackspeedlabel2').textContent = playbackSpeed + "%";    
+}
+
+
+function changeSubtitleType(){
+    var type = document.getElementById('subtitletype').value;
+    var player = getMasterMediaPlayer();
+    var transTrack = player.textTracks[0];
+    var normTrack = player.textTracks[1];
+    if (type==='none'){
+        transTrack.mode = 'hidden';
+        normTrack.mode = 'hidden';
+    } else if (type==='trans'){
+        transTrack.mode = 'showing';        
+        normTrack.mode = 'hidden';        
+    }  else if (type==='norm'){
+        transTrack.mode = 'hidden';        
+        normTrack.mode = 'showing';        
+    } 
+    
+}
+
+
+
+
+   
+
+
+
diff --git a/web/jsp/zuPass.jsp b/web/jsp/zuPass.jsp
new file mode 100644
index 0000000..3e91f6b
--- /dev/null
+++ b/web/jsp/zuPass.jsp
@@ -0,0 +1,214 @@
+<%-- 
+    Document   : zuPass
+    Created on : 10.12.2024, 16:31:06
+    Author     : bernd
+--%>
+<%@page import="java.util.Locale"%>
+<%@page import="java.util.ResourceBundle"%>
+<%@page import="org.zumult.backend.Configuration"%>
+<%@page import="org.zumult.objects.Media"%>
+<%@page import="java.util.ArrayList"%>
+<%@page import="java.util.Arrays"%>
+<%@page import="java.util.List"%>
+<%@page contentType="text/html" pageEncoding="UTF-8"%>
+
+<%@page import="org.zumult.objects.Transcript"%>
+<%@page import="org.zumult.backend.BackendInterfaceFactory"%>
+<%@page import="org.zumult.backend.BackendInterface"%>
+<%@page import="org.zumult.io.IOHelper"%>
+
+
+
+
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
+    "http://www.w3.org/TR/html4/loose.dtd">
+
+<%
+    BackendInterface backend = BackendInterfaceFactory.newBackendInterface(); 
+    String transcriptID = request.getParameter("transcriptID");
+    if (transcriptID==null){
+        // redirect to error page
+    }
+    
+    String pageName = "ZuPass";
+    String pageTitle = transcriptID;
+    
+    String speechEventID = backend.getSpeechEvent4Transcript(transcriptID);
+    //String transcriptID = "ISO_robmus_2015_01_002";
+    //String transcriptID = "IDE57E5B6C-E67B-B454-E462-4E4868C79333";
+    Transcript exbTranscript = backend.getTranscript(transcriptID, Transcript.TranscriptFormats.EXB);
+    String xml = exbTranscript.toXML();
+    String[][] parameters = {
+    };
+    String html = new IOHelper().applyInternalStylesheetToString("/org/zumult/io/exb2Partitur.xsl", xml, parameters);  
+    
+    String videoIDsParameter = request.getParameter("videoIDs");
+    List<String> videoIDs = new ArrayList<>();
+    if (videoIDsParameter==null || videoIDsParameter.length()==0){
+        videoIDs = backend.getVideos4SpeechEvent(speechEventID);
+    } else {
+        String[] videoIDsSplit = videoIDsParameter.split("\\|");
+        videoIDs.addAll(Arrays.asList(videoIDsSplit));
+    }
+    
+    String audioIDsParameter = request.getParameter("audioIDs");
+    List<String> audioIDs = new ArrayList<>();
+    if (videoIDs.isEmpty() || (audioIDsParameter==null || audioIDsParameter.length()==0)){
+        audioIDs = backend.getAudios4SpeechEvent(speechEventID);
+    } else {
+        String[] audioIDsSplit = audioIDsParameter.split("\\|");
+        audioIDs.addAll(Arrays.asList(audioIDsSplit));
+    } 
+
+    String vttURL = Configuration.getWebAppBaseURL() + "/ZumultDataServlet?command=getVTT&transcriptID=" + transcriptID;
+
+%>
+
+<%@include file="../WEB-INF/jspf/locale.jspf" %> 
+
+<html>
+        <html>
+            <head>
+                <script src="../js/media_zupass.js"></script>
+                <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>        
+                <script src="https://kit.fontawesome.com/e215b03c17.js" crossorigin="anonymous"></script>
+                <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"/>
+                <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="crossorigin="anonymous"></script>        
+                <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>                
+
+                <script>
+                    // probably all variables from the URL should be mirrored in this way
+                    var speechEventID = '<%= speechEventID %>';
+                    var transcriptID = '<%= transcriptID %>';
+                    var vttURL = '<%= vttURL %>';
+                    var BASE_URL = '<%= Configuration.getWebAppBaseURL() %>';                    
+                </script>
+                
+                <style type="text/css">
+                    table {
+                        border-collapse : collapse;
+                    }
+                    td {
+                        white-space:nowrap;
+                        border: 1px solid rgb(200,200,200);;
+                    }
+                    td.empty {
+                        background: rgb(230,230,230);
+                        border: none;
+                    }
+                    td.ver {
+                        font-size:14pt;
+                        font-weight: bold;
+                    }
+                    td.att, td.mov, td.it-ph, td.op, td.en {
+                        font-size: 10pt;
+                        background : rgb(255,255,204);
+                    }
+                    td.walk, td.smile, td.nod, td.act {
+                        font-size: 10pt;
+                        background : rgb(204,255,204);
+                    }
+                    td.DataCoverage, td.Aktivität, td.Wahrnehmung, td.VPsichtbar {
+                        font-size: 10pt;
+                        background : rgb(177,233,244);
+                    }
+                    td.label {
+                        font-weight:bold;
+                        position: sticky;
+                        left: 0; z-index: 1;
+                        background-color: white;
+                    }
+                    td.tli {
+                        font-size:8pt;
+                        color: rgb(200,200,200);
+                    }
+                    td.highlight-playback{
+                        border: 2px solid gray; 
+                        color: red;
+                    }                    
+                </style>
+            </head>
+    <body onload="initialiseMedia()">
+        <%@include file="../WEB-INF/jspf/zumultNav.jspf" %>                                                
+               
+        <div id="video-form" class="row justify-content-center" style="margin-top:80px;">
+            <div class="col-auto">        
+                <table>
+                    <%
+                        if (!audioIDs.isEmpty() && videoIDs.isEmpty()){
+                    %>
+                    <tr>
+                    <% for (int i=0; i<Math.min(audioIDs.size(),2); i++){
+                        String audioID = audioIDs.get(i);
+                        Media audio = backend.getMedia(audioID);
+                        String url = audio.getURL();
+                        String id = "master-audio";
+                        if (i>0){
+                            id = "audio-" + Integer.toString(i);
+                        }
+                    %>
+                    <td>
+                        <audio controls="controls" name="audio" id="<%= id %>" style="margin-right:30px">
+                            <source src="<%= url %>" type="audio/wav"/>
+                        </video>
+                    </td>
+                    <%
+                        }
+                    %>
+                    </tr>
+                    <%
+                        }
+                    %>
+                    <tr>
+                        <% 
+                            for (int i=0; i<Math.min(videoIDs.size(),2); i++){
+                                String videoID = videoIDs.get(i);
+                                Media video = backend.getMedia(videoID);
+                                String url = video.getURL();
+                                String id = "master-video";
+                                if (i>0){
+                                    id = "video-" + Integer.toString(i);
+                                }
+                        %>
+                        <td>
+                            <video width="480" height="320" controls="controls" name="video" id="<%= id %>" style="margin-right:30px">
+                                <source src="<%= url %>" type="video/mp4"/>
+                                <track label="trans" kind="subtitles" srclang="de" src="<%= vttURL %>" default="default">
+                                <track label="norm" kind="subtitles" srclang="de" src="<%= vttURL + "&subtitleType=norm"%>">                
+                            </video>
+                        </td>
+                        <td>
+                            <div style="background: #f8f9fa; height: 270px; border-radius: 3px; padding: 3px;">
+                                <a href="javascript:addVideoImageToCollection('<%= videoID %>')" 
+                                   title="<%=myResources.getString("AddVideoImageCollection")%>" style="color:black">
+                                    <i class="far fa-plus-square"></i>
+                                </a><br/>          
+                                <a href="javascript:getVideoImage('<%= videoID %>')" 
+                                   title="<%=myResources.getString("ExtractVideoImage")%>" style="color:black">
+                                    <i class="fas fa-camera-retro"></i>
+                                </a><br/>
+                                <a href="javascript:frameBackward()" title="<%=myResources.getString("PrecedingFrame")%>" style="color:black">
+                                    <i class="fas fa-step-backward"></i>
+                                </a><br/>
+                                <a href="javascript:frameForward()" title="<%=myResources.getString("NextFrame")%>" style="color:black">
+                                    <i class="fas fa-step-forward"></i>
+                                </a>
+                            </div>                        
+                        </td>
+                    <%
+                        }
+                    %>    
+                    </tr>
+                </table>
+            </div>
+        </div>
+        
+        <div id="partitur-form" class="row mt-2">
+            <div class="col-1"></div>
+            <div class="col-10 overflow-auto" style="height: 400px;">
+                    <%= html %>                
+            </div>
+            <div class="col-1"></div>
+        </div>
+    </body>
+</html>