Merge origin/annotation-tool

MaMpf-HD · Nov 16, 2023 · 0ffd07f · 0ffd07f
2 parents 2df9210 + 689579b
commit 0ffd07f
Show file tree

Hide file tree

Showing 19 changed files with 289 additions and 262 deletions.
diff --git a/app/assets/javascripts/thyme/annotations/annotation.js b/app/assets/javascripts/thyme/annotations/annotation.js
@@ -59,7 +59,7 @@ class Annotation {
                           stroke:${strokeColor};
                           stroke-width:${strokeWidth};
                           fill-rule:evenodd;"/>
-                        </svg>' +
+                        </svg>
                       </span>`;
     $('#' + thymeAttributes.markerBarId).append(markerStr);
 

diff --git a/app/assets/javascripts/thyme/annotations/annotation_area.js b/app/assets/javascripts/thyme/annotations/annotation_area.js
@@ -144,6 +144,7 @@ class AnnotationArea {
     const localesId = this.localesId;
     this.editButton.off('click');
     this.editButton.on('click', function() {
+      thymeAttributes.video.pause();
       thymeAttributes.lockKeyListeners = true;
       $.ajax(Routes.edit_annotation_path(annotation.id), {
         type: 'GET',

diff --git a/app/assets/javascripts/thyme/annotations/annotation_manager.js b/app/assets/javascripts/thyme/annotations/annotation_manager.js
@@ -33,20 +33,29 @@ class AnnotationManager {
     this.onClick = onClick;
     this.onUpdate = onUpdate;
     this.isValid = isValid;
+    this.isDbCalledForFreshAnnotations = false;
   }
 
-
-
   /*
     Updates the markers on the timeline, i.e. the visual represention of the annotations.
     This method is e.g. used for rearranging the markers when the window is being resized.
     Don't mix up with updateAnnotatons() which sends an AJAX request and checks for changes
     in the database.
    */
   updateMarkers() {
+    // In case the annotations have not been loaded yet, do nothing.
+    // This situation might occur during the initial page load.
+    if (!thymeAttributes.annotations) {
+      if (!this.isDbCalledForFreshAnnotations) {
+        this.updateAnnotations();
+      }
+      return;
+    }
+
     const annotationManager = this;
     $('#' + thymeAttributes.markerBarId).empty();
     AnnotationManager.sortAnnotations();
+
     for (const a of thymeAttributes.annotations) {
       if (this.isValid(a)) {
         function onClick() {
@@ -76,14 +85,16 @@ class AnnotationManager {
       return;
     }
 
-    const annotationManager = this;
+    this.isDbCalledForFreshAnnotations = true; // Lock resource
+
+    const manager = this;
     $.ajax(Routes.update_annotations_path(), {
       type: 'GET',
       dataType: 'json',
       data: {
         mediumId: thymeAttributes.mediumId,
       },
-      success: function(annotations) {
+      success: (annotations) => {
         // update the annotation field in thymeAttributes
         thymeAttributes.annotations = [];
         if (!annotations) {
@@ -93,7 +104,11 @@ class AnnotationManager {
           thymeAttributes.annotations.push(new Annotation(a));
         }
         // update visual representation on the seek bar
-        annotationManager.updateMarkers();
+        manager.updateMarkers();
+      },
+      always: () => {
+        // Free resource
+        manager.isDbCalledForFreshAnnotations = false;
       }
     });
   }
@@ -103,7 +118,7 @@ class AnnotationManager {
     if (!thymeAttributes.annotations) {
       return;
     }
-    thymeAttributes.annotations.sort(function(ann1, ann2) {
+    thymeAttributes.annotations.sort(function (ann1, ann2) {
       return ann1.seconds - ann2.seconds;
     });
   }

diff --git a/app/assets/javascripts/thyme/display_manager.js b/app/assets/javascripts/thyme/display_manager.js
@@ -16,8 +16,6 @@ class DisplayManager {
     this.onEnlarge = onEnlarge;
   }
 
-
-
   // on small display, fall back to standard browser player
   adaptToSmallDisplay() {
     for (let e of this.elements) {
@@ -38,93 +36,25 @@ class DisplayManager {
 
   // Check screen size and trigger the right method
   updateControlBarType() {
-    const dm = this;
-
-    if (window.matchMedia("screen and (max-width: " +
-      thymeAttributes.hideControlBarThreshold.x + "px)").matches ||
-      window.matchMedia("screen and (max-height: " +
-        thymeAttributes.hideControlBarThreshold.y + "px)").matches) {
-      dm.adaptToSmallDisplay();
-    }
+    const manager = this;
 
-    if (window.matchMedia("screen and (max-device-width: " +
-      thymeAttributes.hideControlBarThreshold.x + "px)").matches ||
-      window.matchMedia("screen and (max-device-height: " +
-        thymeAttributes.hideControlBarThreshold.y + "px)").matches) {
-      dm.adaptToSmallDisplay();
-    }
-
-    // mediaQuery listener for very small screens
-    const matchVerySmallX = window.matchMedia("screen and (max-width: " +
-      thymeAttributes.hideControlBarThreshold.x + "px)");
-    matchVerySmallX.addListener(function (result) {
-      if (result.matches) {
-        dm.adaptToSmallDisplay();
-      }
-    });
-    const matchVerySmallY = window.matchMedia("screen and (max-height: " +
-      thymeAttributes.hideControlBarThreshold.y + "px)");
-    matchVerySmallY.addListener(function (result) {
-      if (result.matches) {
-        dm.adaptToSmallDisplay();
-      }
-    });
+    const matchSmallMediaQuery = window.matchMedia(`
+      screen and (
+        (max-width: ${thymeAttributes.hideControlBarThreshold.x}px)
+        or (max-height: ${thymeAttributes.hideControlBarThreshold.y}px)
+      )
+    `);
 
-    const matchVerySmallDeviceX = window.matchMedia("screen and (max-device-width: " +
-      thymeAttributes.hideControlBarThreshold.x + "px)");
-    matchVerySmallDeviceX.addListener(function (result) {
-      if (result.matches) {
-        dm.adaptToSmallDisplay();
+    function handleSizeChange(event) {
+      if (event.matches) {
+        manager.adaptToSmallDisplay();
+      } else {
+        manager.adaptToLargeDisplay();
       }
-    });
-    const matchVerySmallDeviceY = window.matchMedia("screen and (max-device-height: " +
-      thymeAttributes.hideControlBarThreshold.y + "px)");
-    matchVerySmallDeviceY.addListener(function (result) {
-      if (result.matches) {
-        dm.adaptToSmallDisplay();
-      }
-    });
-
-    // mediaQuery listener for normal screens
-    let matchNormalX = window.matchMedia("screen and (min-width: " +
-      (thymeAttributes.hideControlBarThreshold.x + 1) + "px)");
-    matchNormalX.addListener(function (result) {
-      let matchNormalY;
-      matchNormalY = window.matchMedia("screen and (min-height: " +
-        (thymeAttributes.hideControlBarThreshold.y + 1) + "px)");
-      if (result.matches && matchNormalY.matches) {
-        dm.adaptToLargeDisplay();
-      }
-    });
-    const matchNormalY = window.matchMedia("screen and (min-height: " +
-      (thymeAttributes.hideControlBarThreshold.y + 1) + "px)");
-    matchNormalY.addListener(function (result) {
-      matchNormalX = window.matchMedia("screen and (min-width: " +
-        (thymeAttributes.hideControlBarThreshold.x + 1) + "px)");
-      if (result.matches && matchNormalX.matches) {
-        dm.adaptToLargeDisplay();
-      }
-    });
+    }
 
-    let matchNormalDeviceX = window.matchMedia("screen and (min-device-width: " +
-      (thymeAttributes.hideControlBarThreshold.x + 1) + "px)");
-    let matchNormalDeviceY;
-    matchNormalDeviceX.addListener(function (result) {
-      matchNormalDeviceY = window.matchMedia("screen and (min-device-height: " +
-        (thymeAttributes.hideControlBarThreshold.y + 1) + "px)");
-      if (result.matches && matchNormalY.matches) {
-        dm.adaptToLargeDisplay();
-      }
-    });
-    matchNormalDeviceY = window.matchMedia("screen and (min-device-height: " +
-      (thymeAttributes.hideControlBarThreshold.y + 1) + "px)");
-    matchNormalDeviceY.addListener(function (result) {
-      matchNormalDeviceX = window.matchMedia("screen and (min-device-width: " +
-        (thymeAttributes.hideControlBarThreshold.x + 1) + "px)");
-      if (result.matches && matchNormalX.matches) {
-        dm.adaptToLargeDisplay();
-      }
-    });
+    matchSmallMediaQuery.addListener(handleSizeChange);
+    handleSizeChange(matchSmallMediaQuery); // initial call
   }
 
 };
diff --git a/app/assets/javascripts/thyme/thyme_feedback.js b/app/assets/javascripts/thyme/thyme_feedback.js
@@ -113,11 +113,7 @@ $(document).on('turbolinks:load', function() {
   // resizes the thyme container to the window dimensions
   function resizeContainer() {
     resize.resizeContainer(thymeContainer, 1.22, 70);
-    if (!thymeAttributes.annotations) {
-      annotationManager.updateAnnotations();
-    } else {
-      annotationManager.updateMarkers();
-    }
+    annotationManager.updateMarkers();
   };
 
   window.onresize = resizeContainer;

diff --git a/app/assets/javascripts/thyme/thyme_player.js b/app/assets/javascripts/thyme/thyme_player.js
@@ -99,15 +99,6 @@ $(document).on('turbolinks:load', function() {
                                                   onClick, onUpdate, isValid);
   thymeAttributes.annotationManager = annotationManager;
 
-  // Update annotations after submitting the annotations form
-  $('#annotation-update').on('DOMSubtreeModified', function() {
-    const updateDataset = document.querySelector('#annotation-update').dataset;
-    if (updateDataset.update === "updated") {
-      updateDataset.update = "";
-      annotationManager.updateAnnotations();
-    }
-  });
-
   // Update annotations after deleting an annotation
   $(document).on('click', '#delete-button', function() {
     const annotationId = Number(document.getElementById('annotation_id').textContent);
@@ -167,11 +158,7 @@ $(document).on('turbolinks:load', function() {
   function resizeContainer() {
     const factor = $('#caption').is(':hidden') && $('#annotation-caption').is(':hidden') ? 1 : 1 / 0.82;
     resize.resizeContainer(thymeContainer, factor, 0);
-    if (!thymeAttributes.annotations) {
-      annotationManager.updateAnnotations();
-    } else {
-      annotationManager.updateMarkers();
-    }
+    annotationManager.updateMarkers();
   };
 
   window.onresize = resizeContainer;

diff --git a/app/assets/stylesheets/annotations.scss b/app/assets/stylesheets/annotations.scss
@@ -9,42 +9,83 @@
   position: absolute;
   display: flex;
   left: 89%;
-  top: 40%;
-  transform: translateY(-50%);
-  input:checked + .slider {
-    background-color: #2196F3;
+  input:checked {
+    background-color: #2196F3; // TODO: outsource common video control colors
   }
 }
 
 /* annotation modal */
 #annotation-modal {
-  .modal-content {
-    width: 100%;
+  .modal-header {
+    transition: background-color 200ms linear;
+  }
+
+  .modal-body {
+    display: flex;
+  }
+
+  .modal-footer {
+    margin-top: 40px;
+    padding-bottom: 0;
+    padding-right: 0;
+  }
+
+  .annotation-dialog-normal {
+    max-width: 560px;
   }
-  #annotation-modal-content {
+
+  .annotation-dialog-expanded {
+    max-width: 730px;
+  }
+
+  .annotation-content-normal {
     width: 100%;
   }
-  #preview-toggle {
-    input:checked + .slider {
-      background-color: #0D6EFD;
-    }
-    .switch {
-      vertical-align: middle;
-    }
+
+  .annotation-content-expanded {
+    width: 70%;
+  }
+
+  #annotation-preview-section {
+    width: 30%;
   }
+
   #annotation-modal-preview {
-    height: 543px;
-    width: 35%;
     word-wrap: break-word;
-    overflow-y: scroll;
+    overflow-y: auto;
   }
+
   #annotation_comment {
-    height: 150px;
-    resize: none;
+    height: 200px;
+    max-height: 300px;
   }
+
   #annotation_category_text {
     width: 200px;
   }
+
+  // adapted from https://stackoverflow.com/a/49065029/
+  section {
+    display: flex;
+    flex-direction: column;
+    // border: thin solid rgb(176, 176, 176);
+  }
+
+  // this column adapts to the other column with respect to its height
+  .column-adaptable {
+    flex-basis: 0;
+    flex-grow: 1;
+  }
+
+  .annotation-preview {
+    border-right: thin solid rgb(176, 176, 176);
+    margin-right: 8px;
+    padding-right: 8px;
+  }
+
+  .annotation-content-spacing {
+    padding-left: 8px;
+  }
 }
 
 #emergency-link {
@@ -98,7 +139,7 @@
     &:checked + label {
       span {
         transform: scale(1.25);
-        border: 2px solid black;
+        border: 2px solid #0000008a;
       }
     }
   }
@@ -109,16 +150,19 @@
     height: 25px;
     margin-right: 2px;
     cursor: pointer;
+
     &:hover {
       span { 
         transform: scale(1.25); 
       }
     }
+
     span {
       display: block;
       width: 100%;
       height: 100%;
-      transition: transform .2s ease-in-out;
+      border-radius: 50%;
+      transition: transform .1s ease-in-out;
     }
   }
 }
diff --git a/app/assets/stylesheets/thyme.scss b/app/assets/stylesheets/thyme.scss
@@ -21,7 +21,6 @@
 }
 
 #hypervideo-container {
-  font-size: 0;
   position: relative;
   background: white;
   margin: 0;