From e1f7774e4c379b66af114c383fb8b4e2a180b20a Mon Sep 17 00:00:00 2001
From: Jan Niehues <jan.niehues@kit.edu>
Date: Thu, 8 Feb 2024 09:14:17 +0100
Subject: [PATCH] Resize archive video
---
ltweb/static/css/main.css | 18 ++++++++++++
ltweb/templates/archivesession.html | 43 ++++++++++++++++++++++++++---
ltweb/templates/sessionWindow.html | 15 +++++++++-
3 files changed, 71 insertions(+), 5 deletions(-)
diff --git a/ltweb/static/css/main.css b/ltweb/static/css/main.css
index e70b450..28b67f5 100644
--- a/ltweb/static/css/main.css
+++ b/ltweb/static/css/main.css
@@ -436,3 +436,21 @@
border: 1px solid #ddd; /* Add a grey border */
margin-bottom: 12px; /* Add some space below the input */
}
+.video-container {
+ justify-content: center;
+ display: flex;
+ flex-wrap: wrap;
+}
+.resizable-video {
+ resize: both;
+ overflow: hidden;
+ width: 60%; /* Initial width */
+ /*height: 300px; /* Initial height */
+ border: 1px solid #ccc;
+ /*flex: 1;*/
+}
+video {
+ width: 100%;
+ height: 100%;
+ object-fit: contain; /* Maintain aspect ratio */
+}
diff --git a/ltweb/templates/archivesession.html b/ltweb/templates/archivesession.html
index ddb109b..67b13e7 100644
--- a/ltweb/templates/archivesession.html
+++ b/ltweb/templates/archivesession.html
@@ -49,13 +49,16 @@
<h1>{{ name }}</h1>
- <div class="sessions">
+ <div class="video-container">
+ <!-- <div class="sessions"> -->
+
{% if 'audio/wav' == mediatype %}
<audio controls id="media">
<source src="{{ mediafile }}" type="audio/wav">
Your browser does not support the audio tag.
</audio>
{% elif 'video/mp4' == mediatype %}
+ <div class="resizable-video">
<video controls width="50%" id="media">
<source src="/archivemedia/{{ mediafile }}">
{% for lang in langs %}
@@ -63,9 +66,9 @@
{% endfor %}
Your browser does not support the video tag.
</video>
- {% endif %}
</div>
-
+ {% endif %}
+ <!-- </div> -->
<div class="windows-container" id="windows-container">
{% for lang in langs_video %}
@@ -101,6 +104,8 @@
{% endif %}
</div>
+ </div>
+ <!-- -->
</div>
{% include 'sessionWindow.html' %}
@@ -159,7 +164,7 @@
// Function to close a window
function closeWindow(closeButton) {
- closeButton.parentElement.parentElement.style.display = "none";
+ closeButton.parentElement.parentElement.parentElement.style.display = "none";
}
@@ -223,6 +228,36 @@ container.addEventListener('mousemove', function(event) {
}
});
+const elementToMonitor = document.querySelector('.resizable-video');
+
+var orientation = "landscape";
+
+function isBelow50Percent(element) {
+ const windowWidth = window.innerWidth;
+ const elementWidth = element.offsetWidth;
+ console.log(windowWidth,elementWidth)
+ return (elementWidth < windowWidth * 0.5);
+}
+
+function resizeElement() {
+ if (isBelow50Percent(elementToMonitor)) {
+ // Resize the element here (for demonstration purposes, just setting a new width)
+ var wc = document.querySelector('.windows-container');
+ wc.style.width = "50%"
+ orientation = "portrait";
+ updateWindowWidth()
+ } else {
+ // Reset the size if not below 50% (for demonstration purposes, resetting to original size)
+ var wc = document.querySelector('.windows-container');
+ wc.style.width = "100%"
+ orientation = "landscape";
+ updateWindowWidth()
+ }
+}
+
+const resizeObserver = new ResizeObserver(resizeElement);
+console.log(elementToMonitor)
+resizeObserver.observe(elementToMonitor);
</script>
</body>
diff --git a/ltweb/templates/sessionWindow.html b/ltweb/templates/sessionWindow.html
index 403bf27..e37c818 100644
--- a/ltweb/templates/sessionWindow.html
+++ b/ltweb/templates/sessionWindow.html
@@ -708,6 +708,19 @@
}
function updateWindowWidth() {
+
+ {% if mode == "archive" %}
+
+ if(orientation == "portrait") {
+
+ [...document.getElementsByClassName('window')].forEach(el => {
+ // Do something with each element
+ el.style.width="95%"
+ })
+ return;
+ }
+ {% endif%}
+
if(numberOfWindows == 1) {
[...document.getElementsByClassName('window')].forEach(el => {
// Do something with each element
@@ -716,7 +729,7 @@ function updateWindowWidth() {
}else {
[...document.getElementsByClassName('window')].forEach(el => {
// Do something with each element
- el.style.width="30%"
+ el.style.width="45%"
})
}
}
--
GitLab