Fix resize.

MaMpf-HD · Oct 7, 2023 · cc741a2 · cc741a2
1 parent 2c34cdd
commit cc741a2
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 71 deletions.
diff --git a/app/assets/javascripts/thyme/annotations/annotation_area.js b/app/assets/javascripts/thyme/annotations/annotation_area.js
@@ -22,8 +22,6 @@ class AnnotationArea {
   constructor(fancyStyle, colorFunc, isValid) {
     this.isActive       = false;
     this.annotation     = null; // the current annotation
-    this.onShow         = null; // a function triggered when the modal is shown
-    this.onHide         = null; // a function triggered when the modal is hidden
     this.colorFunc      = colorFunc;
     this.isValid        = isValid;
     this.fancyStyle     = fancyStyle;
@@ -53,9 +51,6 @@ class AnnotationArea {
   show() {
     this.caption.show();
     this.isActive = true;
-    if (this.onShow != null) {
-      this.onShow();
-    }
   }
 
   /*
@@ -64,9 +59,6 @@ class AnnotationArea {
   hide() {
     this.caption.hide();
     this.isActive = false;
-    if (this.onHide != null) {
-      this.onHide();
-    }
   }
 
   /*

diff --git a/app/assets/javascripts/thyme/components/full_screen_button.js b/app/assets/javascripts/thyme/components/full_screen_button.js
@@ -9,6 +9,7 @@ class FullScreenButton extends Component {
     const video = thymeAttributes.video;
     const element = this.element;
     const container = this.container;
+    const button = this;
 
     // Event listener for the full-screen button
     // (unfortunately, lots of browser specific code).
@@ -33,41 +34,31 @@ class FullScreenButton extends Component {
     });
 
     document.onfullscreenchange = function() {
-      if (document.fullscreenElement !== null) {
-        element.innerHTML = 'fullscreen_exit';
-        element.dataset.status = 'true';
-      } else {
-        element.innerHTML = 'fullscreen';
-        element.dataset.status = 'false';
-        /* brute force patch: apparently, after exiting fullscreen mode,
-          window.onresize is triggered twice(!), the second time with incorrect
-          window height data, which results in a video area not quite filling
-          the whole window. The next line resizes the container again. */
-        setTimeout(resize.resizeContainer($(container), 20));
-      }
+      button.#fullscreenChange();
     };
 
     document.onwebkitfullscreenchange = function() {
-      if (document.webkitFullscreenElement !== null) {
-        element.innerHTML = 'fullscreen_exit';
-        element.dataset.status = 'true';
-      } else {
-        element.innerHTML = 'fullscreen';
-        element.dataset.status = 'false';
-        setTimeout(resize.resizeContainer($('#' + container.id), 20));
-      }
+      button.#fullscreenChange();
     };
 
     document.onmozfullscreenchange = function() {
-      if (document.mozFullScreenElement !== null) {
-        element.innerHTML = 'fullscreen_exit';
-        element.dataset.status = 'true';
-      } else {
-        element.innerHTML = 'fullscreen';
-        element.dataset.status = 'false';
-        setTimeout(resize.resizeContainer($('#' + container.id), 20));
-      }
+      button.#fullscreenChange();
     };
   }
 
+  #fullscreenChange() {
+    if (document.fullscreenElement !== null) {
+      this.element.innerHTML = 'fullscreen_exit';
+      this.element.dataset.status = 'true';
+    } else {
+      this.element.innerHTML = 'fullscreen';
+      this.element.dataset.status = 'false';
+      /* brute force patch: apparently, after exiting fullscreen mode,
+        window.onresize is triggered twice(!), the second time with incorrect
+        window height data, which results in a video area not quite filling
+        the whole window. The next line resizes the container again. */
+      setTimeout(resize.resizeContainer($(this.container), 1), 20);
+    }
+  }
+
 }
diff --git a/app/assets/javascripts/thyme/components/ia_button.js b/app/assets/javascripts/thyme/components/ia_button.js
@@ -34,26 +34,10 @@ class IaButton extends Component {
 
     element.addEventListener('click', function() {
       if (element.dataset.status === 'true') {
-        element.dataset.status = 'false';
-        element.innerHTML = 'remove_from_queue';
-        for (let e of button.toHide) {
-          e.hide();
-        }
-        for (let e of button.toShrink) {
-          e.css('width', '100%');
-        }
+        button.plus();
       } else {
-        element.dataset.status = 'true';
-        element.innerHTML = 'add_to_queue';
-        for (let e of button.toHide) {
-          e.show();
-        }
-        for (let e of button.toShrink) {
-          e.css('width', shrink);
-        }
+        button.minus();
       }
-      $(window).trigger('resize');
-      thymeAttributes.annotationManager.updateMarkers();
     });
   }
 
@@ -62,19 +46,37 @@ class IaButton extends Component {
     toHide elements and shrinks all toShrink elements.
    */
   plus() {
-    if (this.element.dataset.status === 'false') {
-      this.element.click();
+    this.element.dataset.status = 'false';
+    this.element.innerHTML = 'remove_from_queue';
+    for (let e of this.toHide) {
+      e.hide();
     }
+    for (let e of this.toShrink) {
+      e.css('width', '100%');
+    }
+    $(window).trigger('resize');
+    thymeAttributes.annotationManager.updateMarkers();
   }
 
   /*
     Sets the button to its minus value, i.e. hides all
     toHide elements and enlarges all toShrink elements.
    */
   minus() {
-    if (this.element.dataset.status === 'true') {
-      this.element.click();
+    this.element.dataset.status = 'true';
+    this.element.innerHTML = 'add_to_queue';
+    for (let e of this.toHide) {
+      e.show();
+    }
+    for (let e of this.toShrink) {
+      e.css('width', this.shrink);
     }
+    $(window).trigger('resize');
+    thymeAttributes.annotationManager.updateMarkers();
+  }
+
+  getStatus() {
+    return this.element.dataset.status === 'true';
   }
 
 }
diff --git a/app/assets/javascripts/thyme/display_manager.js b/app/assets/javascripts/thyme/display_manager.js
@@ -23,7 +23,7 @@ class DisplayManager {
     for (let e of this.elements) {
       e.hide();
     }
-    thymeAttributes.video.style.width = '100';
+    thymeAttributes.video.style.width = '100%';
     thymeAttributes.video.controls = true;
   }
 

diff --git a/app/assets/javascripts/thyme/thyme_player.js b/app/assets/javascripts/thyme/thyme_player.js
@@ -80,18 +80,6 @@ $(document).on('turbolinks:load', function() {
   const annotationManager = new AnnotationManager(colorFunc, strokeColorFunc, sizeFunc,
                                                   onClick, onUpdate, isValid);
   thymeAttributes.annotationManager = annotationManager;
-  // onShow and onUpdate definition for the annotation area
-  function onShow() {
-    iaButton.plus();
-    annotationManager.updateMarkers();
-  }
-  function onHide() {
-    iaButton.minus();
-    annotationManager.updateMarkers();
-    resizeContainer();
-  }
-  annotationArea.onShow = onShow;
-  annotationArea.onHide = onHide;
 
   // Update annotations after submitting the annotations form
   $(document).on('click', '#annotation-modal-submit-button', function() {