Merge branch 'annotation-tool' of github.com:MaMpf-HD/mampf into anno…

…tation-tool

app/assets/javascripts/thyme/annotations/annotation.js

@@ -82,7 +82,7 @@ class Annotation {
   categoryLocale() {
     const c = this.category;
     const s = this.subcategory;
-    return s == null ? c.locale() : c.locale() + " (" + s.locale() + ")";
+    return s ? c.locale() + " (" + s.locale() + ")" : c.locale();
   }
 
   /*

app/assets/javascripts/thyme/annotations/annotation_area.js

@@ -69,7 +69,7 @@ class AnnotationArea {
     Update the annotation area with the content of the given annotation.
    */
   update(annotation) {
-    if (annotation == null) {
+    if (!annotation) {
       return;
     }
     this.annotation = annotation;

app/assets/javascripts/thyme/annotations/annotation_manager.js

@@ -61,7 +61,7 @@ class AnnotationManager {
         function onClick() {
           annotationManager.onClick(a);
         }
-        if (this.sizeFunc !== null && this.sizeFunc(a)) {
+        if (this.sizeFunc && this.sizeFunc(a)) {
           a.createBigMarker(this.colorFunc(a), this.strokeColorFunc(a), onClick);
         } else {
           a.createMarker(this.colorFunc(a), this.strokeColorFunc(a), onClick);
@@ -81,6 +81,10 @@ class AnnotationManager {
                successfully updated.
    */
   updateAnnotations() {
+    if (!thymeAttributes.annotationFeatureActive) {
+      return;
+    }
+
     this.isDbCalledForFreshAnnotations = true; // Lock resource
 
     const manager = this;
@@ -114,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;
     });
   }
@@ -125,7 +129,7 @@ class AnnotationManager {
    */
   static find(id) {
     const annotations = thymeAttributes.annotations;
-    if (annotations == null) {
+    if (!annotations) {
       return null;
     }
     for (let a of annotations) {
@@ -142,7 +146,7 @@ class AnnotationManager {
    */
   static findIndex(id) {
     const annotations = thymeAttributes.annotations;
-    if (annotations == null) {
+    if (!annotations) {
       return undefined;
     }
     for (let i = 0; i < annotations.length; i++) {

app/assets/javascripts/thyme/attributes.js

@@ -10,6 +10,9 @@ const thymeAttributes = {
   /* Saves a reference on the annotation area. */
   annotationArea: null,
 
+  /* Use this to check if the annotation feature is activated. */
+  annotationFeatureActive: false,
+
   /* When callig the updateMarkers() method this will be used to save an
      array containing all annotations. */
   annotations: null,

app/assets/javascripts/thyme/components/annotations_toggle.js

@@ -11,7 +11,11 @@ class AnnotationsToggle extends Component {
   add() {
     const toggle = this;
     const $check = this.$check;
-
+
+    if (!thymeAttributes.annotationFeatureActive) {
+      return;
+    }
+
     /* User is teacher/editor for the given medium and visible_for_teacher ist activated?
        -> add toggle annotations button */
     $.ajax(Routes.check_annotation_visibility_path(thymeAttributes.mediumId), {

app/assets/javascripts/thyme/components/full_screen_button.js

@@ -46,7 +46,7 @@ class FullScreenButton extends Component {
   }
 
   #fullscreenChange() {
-    if (document.fullscreenElement !== null) {
+    if (document.fullscreenElement) {
       this.element.innerHTML = 'fullscreen_exit';
       this.element.dataset.status = 'true';
       /* Set height to 100vh in fullscreen mode as it otherwise

app/assets/javascripts/thyme/components/ia_back_button.js

@@ -26,7 +26,7 @@ class IaBackButton extends Component {
     const currentChapter = $('#' + this.chapterListId + ' .current');
     if (currentChapter.length > 0) {
       let backInfo = currentChapter.data('text').split(':', 1)[0];
-      if ((backInfo != null) && backInfo.length > 20) {
+      if (backInfo && backInfo.length > 20) {
         backInfo = this.element.dataset.back;
       } else {
         backInfo = this.element.dataset.backto + backInfo;

app/assets/javascripts/thyme/components/ia_button.js

@@ -6,18 +6,18 @@
 class IaButton extends Component {
 
   /*
-         toHide = An array consisting of all the components that
-                  should be hidden/shown when this button is clicked.
-                  These components must provide a show() and hide()
-                  method, but they havn't to be a JQuery reference
-                  on a HTML element.
+        toHide = An array consisting of all the components that
+                 should be hidden/shown when this button is clicked.
+                 These components must provide a show() and hide()
+                 method, but they havn't to be a JQuery reference
+                 on a HTML element.
 
-       toShrink = An array consisting of JQuery references of all
-                  the components that should grow/shrink when this
-                  button is clicked.
+      toShrink = An array consisting of JQuery references of all
+                 the components that should grow/shrink when this
+                 button is clicked.
 
-         shrink = The percentage telling how much the elements of toShrink
-                  should shrink when the components of toHide are shown.
+        shrink = The percentage telling how much the elements of toShrink
+                 should shrink when the components of toHide are shown.
    */
   constructor(element, toHide, toShrink, shrink) {
     super(element);
@@ -27,10 +27,8 @@ class IaButton extends Component {
   }
 
   add() {
-    const video = thymeAttributes.video;
     const element = this.element;
     const button = this;
-    const shrink = this.shrink;
 
     element.addEventListener('click', function() {
       if (element.dataset.status === 'true') {
@@ -46,37 +44,34 @@ class IaButton extends Component {
     toHide elements and shrinks all toShrink elements.
    */
   plus() {
-    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();
+    this.#aux('false', 'remove_from_queue', false, '100%');
   }
 
   /*
     Sets the button to its minus value, i.e. hides all
     toHide elements and enlarges all toShrink elements.
    */
   minus() {
-    this.element.dataset.status = 'true';
-    this.element.innerHTML = 'add_to_queue';
+    this.#aux('true', 'add_to_queue', true, this.shrink);
+  }
+
+  getStatus() {
+    return this.element.dataset.status === 'true';
+  }
+
+
+
+  #aux(status, innerHTML, sh, size) {
+    this.element.dataset.status = status;
+    this.element.innerHTML = innerHTML;
     for (let e of this.toHide) {
-      e.show();
+      sh ? e.show() : e.hide();
     }
     for (let e of this.toShrink) {
-      e.css('width', this.shrink);
+      e.css('width', size);
     }
     $(window).trigger('resize');
     thymeAttributes.annotationManager.updateMarkers();
   }
 
-  getStatus() {
-    return this.element.dataset.status === 'true';
-  }
-
 }

app/assets/javascripts/thyme/components/next_chapter_button.js

@@ -7,7 +7,7 @@ class NextChapterButton extends Component {
     // Event handler for the nextChapter button
     element.addEventListener('click', function() {
       const next = thymeAttributes.chapterManager.nextChapterStart();
-      if (next != null) {
+      if (next) {
         video.currentTime = thymeAttributes.chapterManager.nextChapterStart();
       }
     });

app/assets/javascripts/thyme/components/previous_chapter_button.js

@@ -7,7 +7,7 @@ class PreviousChapterButton extends Component {
     // Event handler for the previousChapter button
     element.addEventListener('click', function() {
       const previous = thymeAttributes.chapterManager.previousChapterStart();
-      if (previous != null) {
+      if (previous) {
         video.currentTime = thymeAttributes.chapterManager.previousChapterStart();
       }
     });

app/assets/javascripts/thyme/components/seek_bar.js

@@ -17,7 +17,7 @@ class SeekBar extends Component {
 
     // if videomedtadata have been loaded, set up seek bar
     video.addEventListener('loadedmetadata', function() {
-      if (video.dataset.time != null) {
+      if (video.dataset.time) {
         const time = video.dataset.time;
         element.value = video.currentTime / video.duration * 100;
       } else {

app/assets/javascripts/thyme/components/speed_selector.js

@@ -11,11 +11,11 @@ class SpeedSelector extends Component {
     const element = this.element;
 
     element.addEventListener('click', function() {
-      if (video.preservesPitch != null) {
+      if (video.preservesPitch) {
         video.preservesPitch = true;
-      } else if (video.mozPreservesPitch != null) {
+      } else if (video.mozPreservesPitch) {
         video.mozPreservesPitch = true;
-      } else if (video.webkitPreservesPitch != null) {
+      } else if (video.webkitPreservesPitch) {
         video.webkitPreservesPitch = true;
       }
       video.playbackRate = this.options[this.selectedIndex].value;

app/assets/javascripts/thyme/heatmap.js

@@ -18,7 +18,7 @@ class Heatmap {
 
 
   draw() {
-    if (thymeAttributes.annotations == null) {
+    if (!thymeAttributes.annotations) {
       return;
     }
     this.heatmap.empty();

app/assets/javascripts/thyme/thyme_feedback.js

@@ -61,6 +61,7 @@ $(document).on('turbolinks:load', function() {
   function colorFunc(annotation) {
     return annotation.category.color;
   }
+
   function isValid(annotation) {
     for (let toggle of annotationCategoryToggles) {
       if (annotation.category === toggle.category && toggle.getValue()) {
@@ -69,20 +70,26 @@ $(document).on('turbolinks:load', function() {
     }
     return false;
   }
+
   const annotationArea = new AnnotationArea(false, colorFunc, null, isValid);
   thymeAttributes.annotationArea = annotationArea;
+
   function strokeColorFunc(annotation) {
     return annotation.category === Category.MISTAKE ? 'darkred' : 'black';
   }
+
   function sizeFunc(annotation) {
     return annotation.category === Category.MISTAKE;
   }
+
   function onClick(annotation) {
     annotationArea.update(annotation);
   }
+
   function onUpdate() {
     heatmap.draw();
   }
+
   const annotationManager = new AnnotationManager(colorFunc, strokeColorFunc, sizeFunc,
                                                   onClick, onUpdate, isValid);
   thymeAttributes.annotationManager = annotationManager;
@@ -108,6 +115,7 @@ $(document).on('turbolinks:load', function() {
     resize.resizeContainer(thymeContainer, 1.22, 70);
     annotationManager.updateMarkers();
   };
+
   window.onresize = resizeContainer;
   video.onloadedmetadata = resizeContainer;
 

app/assets/javascripts/thyme/thyme_player.js

@@ -20,13 +20,19 @@ $(document).on('turbolinks:load', function() {
 
 
 
-
   /*
     COMPONENTS
    */
+  // annotation components
+  const annotationFeatureActive = (document.getElementById('annotation-button') != null);
+  thymeAttributes.annotationFeatureActive = annotationFeatureActive;
+  if (annotationFeatureActive) {
+    (new AnnotationButton('annotation-button')).add();
+  }
   const annotationsToggle = new AnnotationsToggle('annotations-toggle');
   annotationsToggle.add();
-  (new AnnotationButton('annotation-button')).add();
+
+  // regular components
   (new FullScreenButton('full-screen', thymeContainer)).add();
   (new MuteButton('mute')).add();
   (new NextChapterButton('next-chapter')).add();
@@ -52,35 +58,43 @@ $(document).on('turbolinks:load', function() {
   function colorFunc(annotation) {
     return annotation.color;
   }
+
   function onClose() {
     iaButton.minus();
   }
+
   function isValid(annotation) {
     return (!annotationsToggle.getValue() && !annotation.belongsToCurrentUser ? false : true);
   }
+
   const annotationArea = new AnnotationArea(true, colorFunc, onClose, isValid);
   thymeAttributes.annotationArea = annotationArea;
+
   function strokeColorFunc(annotation) {
     return 'black';
   }
+
   function sizeFunc(annotation) {
     return false;
   }
+
   function onClick(annotation) {
     iaButton.minus();
     annotationArea.update(annotation);
     annotationArea.show();
     $('#caption').hide();
   }
+
   function onUpdate() {
     /* update might change the annotation which is currently shown in the
        annotation area -> find the updated annotation in the annotation array
        and update the area. */
-    if (annotationArea.annotation != null) {
+    if (annotationArea.annotation) {
       const id = annotationArea.annotation.id;
       annotationArea.update(AnnotationManager.find(id));
     }
   }
+
   const annotationManager = new AnnotationManager(colorFunc, strokeColorFunc, sizeFunc,
                                                   onClick, onUpdate, isValid);
   thymeAttributes.annotationManager = annotationManager;
@@ -144,6 +158,7 @@ $(document).on('turbolinks:load', function() {
   function onEnlarge() {
     iaButton.plus();
   }
+
   const elements = [$('#caption'), $('#annotation-caption'), $('#video-controlBar')];
   const displayManager = new DisplayManager(elements, onEnlarge);
 
@@ -154,6 +169,7 @@ $(document).on('turbolinks:load', function() {
     resize.resizeContainer(thymeContainer, factor, 0);
     annotationManager.updateMarkers();
   };
+
   window.onresize = resizeContainer;
   video.onloadedmetadata = resizeContainer;