Video formats work now and CSRF protection is activ

slaeforms/app.py

@@ -11,6 +11,7 @@ import uuid
 from sqlalchemy.exc import SQLAlchemyError
 from sqlalchemy import inspect
 from sqlalchemy.orm import DeclarativeBase
+from flask_wtf.csrf import CSRFProtect
 import os
 
 random_order = True
@@ -30,6 +31,7 @@ app = Flask(__name__)
 # configure the database, give it a path (it will be in the instances folder)
 app.config["SQLALCHEMY_DATABASE_URI"] = "sqlite:///database.db"
 db.init_app(app)
+csrf = CSRFProtect(app) #enable CSRF protection globally
 
 #set the secret key (TODO change this for final deployment)
 app.secret_key = b"29fe9e8edd407c5491d4f1c05632d9fa33e26ed8734a3f5e080ebac3772a555a"
@@ -381,7 +383,8 @@ def update_session():
             session["current_block_index"] += 1 
             session["current_block_name"] = session["block_names"][session["current_block_index"]]
             
-
+    if (session["current_block_index"] == session["number_of_blocks"]-1) and (session["current_stimulus_index"] >= session["number_of_stimuli"]-1):
+        session.pop("slaeform_user_id")
     print("---Session updated---")
     print("current_block_index / number_of_blocks: {current_block_index} / {number_of_blocks}".format(current_block_index=session["current_block_index"],number_of_blocks=session["number_of_blocks"]))
     print("current_block_name: ", session["current_block_name"])

slaeforms/default.json

@@ -1,5 +1,5 @@
 {
-    "Block 3":{
+    "Block 1":{
         "type": "TaskTemplate",
         "tempalte": "standard_template.html",
         "stimuli":{
@@ -135,7 +135,7 @@
             }
         }
     },
-    "Block 4":{
+    "Block 2":{
         "type": "TaskTemplate",
         "tempalte": "standard_template.html",
         "number_of_pages":"3",
@@ -209,22 +209,8 @@
             }
         }
     },
-    "Block_1":{
+    "Block_3":{
         "type": "SinglePage",
-        "template": "test_page0.html"
+        "template": "endpage.html"
-    },
-    "Block_2":{
-        "type": "SinglePage",
-        "template": "test_page1.html",
-        "database_table" :{
-            "table_name": "Datenschutzerklaerung",
-            "fields": {
-                "accepted":{
-                    "type": "string",
-                    "size": "7",
-                    "nullable": "false"
-                }
-            }
-        }
     }
 }

slaeforms/static/styles.css

@@ -167,16 +167,16 @@ h2,h3 {
 /* Video recording video and youtube iframe */
 video { /* Video should not be bigger than 100% */
     max-width: 100%;
-    max-height: 100%;
     width: auto;
     height: auto;
+    margin: auto auto;
 }
 
 iframe { /* center the iframe, mostly unnecessary */
     display:block;
 }
 
-.video-container iframe {
+.iframe-container iframe {
     position: absolute;
     top: 0;
     left: 0;
@@ -184,14 +184,28 @@ iframe { /* center the iframe, mostly unnecessary */
     height: 100%;
 }
 
+.iframe-container {
+    position: relative;
+    padding-bottom: 56.25%; /* 16:9 */
+    height: 0;
+}
+
 .video-container {
-    background: #000;
+    max-width: 100%;
     position: relative;
     padding-bottom: 56.25%; /* 16:9 */
     height: 0;
     overflow: hidden;
 }
 
+.videomirror {
+    transform: rotateY(180deg);
+    /* Safari and Chrome */
+    -webkit-transform: rotateY(180deg);
+    /* Firefox */
+    -moz-transform: rotateY(180deg);
+  }
+
 /* Likert stuff */
 .likert {
     --likert-rows: 5;

slaeforms/static/videoscript.js

@@ -6,11 +6,14 @@ const buttonCameraIcon = document.getElementById('buttonCameraIcon');
 const buttonRecordIcon = document.getElementById('buttonRecordIcon');
 const buttonDeleteIcon = document.getElementById('buttonDeleteIcon');
 const videoContainer = document.getElementById('videoContainer');
+const videoContainerCss = document.querySelector(".video-container ") //might be unnecessary
 var mediaRecorder = null;
 var stream = null;
 let recordedVideoBlob = null;
 let isRecording = false;
 let videoAccess = false;
+let videoHeigt = 720;
+let videoWidth = 1280;
 
 // Handle form submission
 document.getElementById("question_form").addEventListener("submit", function (event) {
@@ -66,14 +69,31 @@ async function cameraButton() {
         console.log("stream is active");
         videoAccess = true;
 
+        videoHeigt = stream.getVideoTracks()[0].getSettings().height
+        videoWidth = stream.getVideoTracks()[0].getSettings().width
+        
+        let aspectratio = (videoHeigt / videoWidth) *100
+        console.log("videoHeigt: ",videoHeigt);
+        console.log("videoWidth: ",videoWidth);
+        console.log("aspect ratio: ",aspectratio);
+        console.log("device: ",stream.getVideoTracks()[0].getSettings().deviceId);
+        videoContainer.style.setProperty("padding-bottom", "min("+videoHeigt+"px,"+aspectratio+"%)");
+
+        if (videoHeigt > videoWidth){ //hochkant video
+            videoContainer.style.setProperty("max-width", "min(80%,576");  
+        }else{ //Normal, horizontal
+            videoContainer.style.setProperty("max-width", "100%");
+        }
+
         videoDisplay.srcObject = stream;
 
         buttonCameraIcon.src = ICON_PATHS.cameraofficon;
         buttonCameraIcon.alt = "Camera-off Icon";
         buttonRecord.style.display = 'inline-block';
         buttonDelete.style.display = 'inline-block';
-        videoDisplay.style.display = 'inline-block';
+        videoDisplay.style.display = 'block';
-        videoContainer.style.display = 'inline-block';
+        videoContainer.style.display = 'block';
+        videoDisplay.classList.add("videomirror");
 
         mediaRecorder = new MediaRecorder(stream, {
             mimeType: "video/webm", // could use different video format
@@ -127,6 +147,7 @@ function recordButton() {
     if (!isRecording) {
         console.log("recordButton pressed case isRecording = false");
         deleteButton();
+        videoDisplay.classList.add("videomirror");
         buttonDelete.setAttribute("disabled", "");
         buttonDeleteIcon.classList.add("buttondisable");
         videoDisplay.srcObject = stream;
@@ -142,6 +163,7 @@ function recordButton() {
     } else {
         console.log("recordButton pressed case isRecording = true");
         mediaRecorder.stop();
+        videoDisplay.classList.remove("videomirror");
 
         console.log("recording stops");
         buttonDelete.removeAttribute("disabled");
@@ -154,6 +176,7 @@ function deleteButton() {
     videoDisplay.controls = false;
     videoDisplay.srcObject = stream;
     recordedVideoBlob = null
+    videoDisplay.classList.add("videomirror");
     buttonDelete.setAttribute("disabled", "");
     buttonDeleteIcon.classList.add("buttondisable");
 }

slaeforms/templates/endpage.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles.css')}}"" /> <!--  styles.css  {{ url_for('static', filename='styles.css')}}-->
+    <title>DGS Avatar Study</title>
+</head>
+
+<body>
+    <div class="container">
+    <h2>Thank you for participating in our study!</h2>
+
+    <div class="textblock">
+    <p>
+        If you liked this study, we would be grateful if you share it and invite other people to also participate.
+        Anyone with some level of sign language understanding can participate.
+        If you have further questions, please send an email to testemail@notarealemail.deee
+    </p>
+    </div>
+</div>
+</body>
+</html>

slaeforms/templates/standard_template.html

@@ -3,16 +3,16 @@
 {% macro single_video(video_url, embed="yt", title="",width="560", height="315", class="center", code="<p>No code given
 </p>") -%}
 {% if (embed == "yt") %}
-<div class={{center}}>
+
     {% if (title != "") %}
     <h3>{{title}}</h3>
     {% endif %}
-    <div class="video-container">
+    <div class="iframe-container">
         <iframe class="center" src="{{ video_url }}" title="YouTube video player" frameborder="0"
             allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
             allowfullscreen></iframe>
     </div>
-</div>
+
 {% else %}
 {{code}}
 {% endif %}
@@ -66,6 +66,7 @@ step={{question["step"]}}
         {% endif %}
 
         <form class="formlayout" id="question_form" action="http://localhost:5000/send_json" method="post">
+            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
             {% for question in questions %}
             {% if (questions[question]["type"] == "likert") %}
             <div class="likercontainer">
@@ -163,7 +164,7 @@ step={{question["step"]}}
             </div>
 
             <div class="spacer" aria-hidden="true" style="height:15px"></div>
-            <div id="videoContainer" style="display:none">
+            <div id="videoContainer" style="display:none" class="video-container">
                 <video autoplay muted playsinline id="videoDisplay"></video>
             </div>