Merge lp:~ic90/openlp/animated-alerts into lp:~openlp-dev/openlp/webengine-migrate

[Nico Opiyo]

Added transitions and animations to the alerts.

I have fixed the tests to test the various components added to the UI and also made some slight adjustments to the entrance transition and fixed a glitch when an alert is first displayed on opening the program.

JS Test Output is as below:
PhantomJS 2.1.1 (Windows 8.0.0) Display.setTextSlides should correctly set outline width FAILED
        TypeError: undefined is not an object (evaluating 'dom.wrapper.querySelectorAll') in openlp/core/display/html/reveal.js (line 2304)
        slide@openlp/core/display/html/reveal.js:2304:37
        goToSlide@openlp/core/display/html/display.js:694:19
        setTextSlides@openlp/core/display/html/display.js:551:22
        tests/js/test_display.js:404:26
PhantomJS 2.1.1 (Windows 8.0.0): Executed 78 of 78 (1 FAILED) (0 secs / 0.087 secs)
PhantomJS 2.1.1 (Windows 8.0.0): Executed 78 of 78 (1 FAILED) (0.108 secs / 0.087 secs)
TOTAL: 1 FAILED, 77 SUCCESS

[Raoul Snyman (raoul-snyman)]

See the inline comments.

Also, in your tests you seem to be testing a single style every time, you should be able to combine those into a single test. For example:

   it("should set the correct styles when the location is the top of the page", function(){
       Display.doEntranceTransition("0");
       expect(alertBackground.style.top).toEqual('0px');
       expect(alertBackground.style.transition).toEqual("2s linear");
       expect(alertBackground.style.height).toEqual("25%");
   });

review: Needs Fixing

[lp:~ic90/openlp/animated-alerts]

2865. By Nico Opiyo on 2019-02-12

Refactored alert tests and optimized alert code plus fixed spacing

2866. By Nico Opiyo on 2019-02-12

Fixed the location enumeration for the alerts

[Nico Opiyo (ic90)]

Javascript Test Output:

PhantomJS 2.1.1 (Windows 8.0.0) Display.setTextSlides should correctly set outline width FAILED
        TypeError: undefined is not an object (evaluating 'dom.wrapper.querySelectorAll') in openlp/core/display/html/reveal.js (line 2304)
        slide@openlp/core/display/html/reveal.js:2304:37
        goToSlide@openlp/core/display/html/display.js:712:19
        setTextSlides@openlp/core/display/html/display.js:569:22
        tests/js/test_display.js:365:26
PhantomJS 2.1.1 (Windows 8.0.0): Executed 68 of 68 (1 FAILED) (0 secs / 0.063 secs)
PhantomJS 2.1.1 (Windows 8.0.0): Executed 68 of 68 (1 FAILED) (0.073 secs / 0.063 secs)
TOTAL: 1 FAILED, 67 SUCCESS

[lp:~ic90/openlp/animated-alerts]

2867. By Nico Opiyo on 2019-02-22

Refactored transition code and added settings from alert settings configuration

2868. By Nico Opiyo on 2019-03-01

Refactored the tests for the alerts to mkae them DRY

2869. By Nico Opiyo on 2019-03-01

Refactored the hex_to_rgb method in the alerts manager class

2870. By Nico Opiyo on 2019-03-04

Added queuing functionality to the alerts

2871. By Nico Opiyo on 2019-03-06

Added a few tests and fixed failing JS tests

2872. By Nico Opiyo on 2019-03-07

Fixed exit transition bug

2873. By Nico Opiyo on 2019-03-12

Added scrolling option to alerts

2874. By Nico Opiyo on 2019-03-15

Fixed tests and refactored event listeners for effective testing

2875. By Nico Opiyo on 2019-03-17

Fixed buggy alerts and refactored CSS

2876. By Nico Opiyo on 2019-03-29

Cleaned up Javascript and refactored the functions and tests plus optimized animation of text

2877. By Nico Opiyo on 2019-03-29

Fixed all tests and changed entrance transition to class based toggling

2878. By Nico Opiyo on 2019-04-02

Fixed queue bug when showing alerts from the queue

2879. By Nico Opiyo on 2019-04-05

Fixed alert positioning with CSS flexbox and also fixed non-scrolling alert display

2880. By Nico Opiyo on 2019-05-22

Pulled in changes from trunk

2881. By Nico Opiyo on 2019-06-27

Fixed scrolling bug display

2882. By Nico Opiyo on 2019-06-30

Fixed unit tests for alerts branch

2883. By Nico Opiyo on 2019-07-01

Pulled in latest changes from trunk

2884. By Nico Opiyo on 2019-07-01

Changed variable names to camelCase and added parameter for Jenkins JS tests

Unmerged revisions

2884. By Nico Opiyo on 2019-07-01

Changed variable names to camelCase and added parameter for Jenkins JS tests

2883. By Nico Opiyo on 2019-07-01

Pulled in latest changes from trunk

2882. By Nico Opiyo on 2019-06-30

Fixed unit tests for alerts branch

2881. By Nico Opiyo on 2019-06-27

Fixed scrolling bug display

2880. By Nico Opiyo on 2019-05-22

Pulled in changes from trunk

2879. By Nico Opiyo on 2019-04-05

Fixed alert positioning with CSS flexbox and also fixed non-scrolling alert display

2878. By Nico Opiyo on 2019-04-02

Fixed queue bug when showing alerts from the queue

2877. By Nico Opiyo on 2019-03-29

Fixed all tests and changed entrance transition to class based toggling

2876. By Nico Opiyo on 2019-03-29

Cleaned up Javascript and refactored the functions and tests plus optimized animation of text

2875. By Nico Opiyo on 2019-03-17

Fixed buggy alerts and refactored CSS

=== modified file 'openlp/core/display/html/display.html'
--- openlp/core/display/html/display.html	2018-10-12 19:51:51 +0000
+++ openlp/core/display/html/display.html	2019-02-12 10:25:19 +0000
@@ -24,14 +24,89 @@
       visibility: visible;
       z-index: -1;
     }
+
+    /* Animation key frames for horizontal scrolling of alert */
+    @keyframes alert-scrolling-text {
+      from { margin-left: 100%; }
+      to {  margin-left: -300% }
+    }
+    /* Middle fade-in alert animation */
+    @keyframes middle-fade-in {
+      from { opacity: 0;}
+      to { opacity: 1;}
+    }
+
+    /* Middle fade-out alert animation */
+    @keyframes middle-fade-out {
+      from { opacity: 1;}
+      to { opacity: 0;}
+    }
+
+    /* Fade in when alert location is in the middle */
+    .middle-entrance-animation {
+      animation-duration: 2s;
+      animation-timing-function: linear;
+      animation-name: middle-fade-in;
+    }
+
+    /* Fade out when alert location is in the middle */
+    .middle-exit-animation {
+      animation-duration: 2s;
+      animation-timing-function: linear;
+      animation-name: middle-fade-out;
+    }
+
+    .horizontal-scroll-animation {
+      animation-duration: 10s;
+      animation-iteration-count: 1;
+      animation-timing-function: linear;
+      animation-name: alert-scrolling-text;
+    }
+
+    /* ALERT STYLING */
+    #alert-background {
+      position: absolute;
+      margin: 0;
+      padding: 0;
+      left: 0px;
+      right: 0px;
+      z-index: 10;
+      width: 100%;
+      height: 0%;
+      vertical-align: middle;
+      color: #ffffff;
+      background-color: #660000;
+      overflow: hidden;
+      visibility:hidden;
+    }
+
+    #alert {
+      position: relative;
+      top: 50%;
+      transform: translateY(-50%);
+      margin-top: 0%;
+      margin-right: 0%;
+      margin-left: 100%;
+      margin-bottom: 0%;
+      z-index: 11;
+      overflow: visible;
+      white-space: nowrap;
+      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+      font-size: 100pt;
+      color: #ffffff;
+      visibility: hidden;
+    }
+
     </style>
     <script type="text/javascript" src="qrc:///qtwebchannel/qwebchannel.js"></script>
     <script type="text/javascript" src="reveal.js"></script>
     <script type="text/javascript" src="display.js"></script>
   </head>
+
   <body>
     <div class="reveal">
       <div id="global-background" class="slide-background present" data-loaded="true"></div>
+      <div id="alert-background"><p id="alert">Testing alerts</p></div>
       <div class="slides"></div>
       <div class="footer"></div>
     </div>

=== modified file 'openlp/core/display/html/display.js'
--- openlp/core/display/html/display.js	2019-02-05 21:26:30 +0000
+++ openlp/core/display/html/display.js	2019-02-12 10:25:19 +0000
@@ -53,6 +53,39 @@
 };
 
 /**
+ * Transition state enumeration
+ */
+
+var TransitionState = {
+   EntranceTransition: "entranceTransition",
+   NoTransition: "noTransition",
+   ExitTransition: "exitTransition"
+};
+
+/**
+ * Animation state enumeration
+ */
+var AnimationState = {
+  NoAnimation: "noAnimation",
+  ScrollingAnimation: "scrollingAnimation",
+  FadeInAnimation: "fadeInAnimation",
+  FadeOutAnimation: "fadeOutAnimation"
+};
+/**
+ * Alert location enumeration
+ */
+var AlertLocation = {
+  Top: "0",
+  Middle: "1",
+  Bottom: "2"
+};
+
+/**
+ *
+ * @param {Location} selector
+ */
+
+/**
  * Return an array of elements based on the selector query
  * @param {string} selector - The selector to find elements
  * @returns {array} An array of matching elements
@@ -132,6 +165,10 @@
 }
 
 /**
+ *
+ */
+
+/**
  * An audio player with a play list
  */
 var AudioPlayer = function (audioElement) {
@@ -249,6 +286,8 @@
  */
 var Display = {
   _slides: {},
+  _transitionState: TransitionState.NoTransition,
+  _animationState: AnimationState.NoAnimation,
   _revealConfig: {
     margin: 0.0,
     minScale: 1.0,
@@ -372,15 +411,121 @@
    * @param {string} text - The alert text
    * @param {int} location - The location of the text (top, middle or bottom)
   */
- alert: function (text, location) {
-  console.debug(" alert text: " + text, ", location: " + location);
+  alert: function (text, location) {
+    console.debug(" alert text: " + text + ", location: " + location);
+
+    if (text == "") {
+      return null;
+    }
+
+    var alertBackground = $("#alert-background")[0];
+    var alertText = $("#alert")[0];
+
+    alertText.innerHTML = text;
+
+    /* Bring in the transition background */
+    Display._transitionState = Display.doEntranceTransition(location);
+
+    alertBackground.addEventListener('transitionend', function (e) {
+      e.stopPropagation();
+      if (Display._transitionState == TransitionState.EntranceTransition) {
+        alertText.style.visibility = "visible";
+        alertText.classList.add("horizontal-scroll-animation");
+      }
+      else if (Display._transitionState == TransitionState.ExitTransition) {
+        Display._transitionState = TransitionState.NoTransition;
+        alertBackground.style.visibility = "hidden";
+        alertText.style.visibility = "hidden";
+        alertBackground.style.top = "";
+        alertBackground.style.bottom = "";
+        alertBackground.style.height = "";
+        alertBackground.style.transition = "";
+        alertBackground.classList.remove("middle-exit-animation");
+      }
+    });
+
+    alertBackground.addEventListener('animationend', function () {
+
+      if (Display._animationState == AnimationState.FadeInAnimation) {
+        alertText.style.visibility = "visible";
+        alertText.classList.add("horizontal-scroll-animation");
+        alertText.classList.remove("middle-entrance-animation");
+        Display._animationState = AnimationState.ScrollingAnimation;
+      }
+      else if (Display._animationState == AnimationState.FadeOutAnimation) {
+        alertBackground.style.visibility = "hidden";
+        alertBackground.classList.remove("middle-exit-animation");
+        Display._animationState = AnimationState.NoAnimation;
+      }
+      else if (alertText.classList.contains("horizontal-scroll-animation")) {
+        alertText.classList.remove("horizontal-scroll-animation");
+        alertText.style.visibility = "hidden";
+        Display._animationState = AnimationState.NoAnimation;
+        Display._transitionState = Display.doExitTransition(location);
+      }
+
+    });
+
   /*
    * The implementation should show an alert.
    * It should be able to handle receiving a new alert before a previous one is "finished", basically queueing it.
    */
-  return;
-},
-
+    return location;
+  },
+
+  /**
+   * Start background entrance transition for display of alert
+   * @param {string} location - String showing the location of the alert on screen
+   */
+  doEntranceTransition: function (location) {
+    var alertBackground = $("#alert-background")[0];
+
+    switch (location) {
+      case AlertLocation.Top:
+        alertBackground.style.bottom = '';
+        alertBackground.style.top = '0px';        
+        alertBackground.style.height = "25%";
+        alertBackground.style.transition = "2s linear";
+        break;
+      case AlertLocation.Middle:
+        alertBackground.style.top = ((window.innerHeight - alertBackground.clientHeight) / 2) + 'px';
+        alertBackground.style.height = "25%";
+        alertBackground.classList.add("middle-entrance-animation");
+        Display._animationState = AnimationState.FadeInAnimation;
+        break;
+      case AlertLocation.Bottom:
+      default:
+        alertBackground.style.top = '';
+        alertBackground.style.bottom = '0px';        
+        alertBackground.style.height = "25%";
+        alertBackground.style.transition= "2s linear";
+        break;
+    }
+    alertBackground.style.visibility = "visible";
+    return TransitionState.EntranceTransition;
+
+  },
+
+  /**
+   * Start background exit transition once alert has been displayed
+   * @param {string} location - Integer showing the location of the alert on screen
+   */
+  doExitTransition: function (location) {
+
+    var alertBackground = $("#alert-background")[0];
+
+    if (location == AlertLocation.Top || location == AlertLocation.Bottom) {
+      alertBackground.style.height = "0%";
+      alertBackground.style.transition = '2s linear';      
+    }
+    else if (location == AlertLocation.Middle) {
+      alertBackground.classList.add("middle-exit-animation");
+      alertBackground.style.height = "0%";      
+      Display._animationState = AnimationState.FadeOutAnimation;
+    }
+
+    return TransitionState.ExitTransition;
+  },
   /**
    * Add a slides. If the slide exists but the HTML is different, update the slide.
    * @param {string} verse - The verse number, e.g. "v1"

=== modified file 'openlp/core/display/window.py'
--- openlp/core/display/window.py	2018-12-06 20:26:35 +0000
+++ openlp/core/display/window.py	2019-02-12 10:25:19 +0000
@@ -401,4 +401,4 @@
         """
         Set an alert
         """
-        self.run_javascript('Display.alert({text}, {location});'.format(text=text, location=location))
+        self.run_javascript('Display.alert("{text}", "{location}");'.format(text=text, location=location))

=== modified file 'tests/js/test_display.js'
--- tests/js/test_display.js	2019-01-16 06:15:21 +0000
+++ tests/js/test_display.js	2019-02-12 10:25:19 +0000
@@ -18,6 +18,14 @@
   it("AudioState should exist", function () {
     expect(AudioState).toBeDefined();
   });
+
+  it("TransitionState should exist", function(){
+    expect(TransitionState).toBeDefined();
+  });
+
+  it("AnimationState should exist", function(){
+    expect(AnimationState).toBeDefined();
+  });
 });
 
 describe("The function", function () {
@@ -138,7 +146,111 @@
     Display.goToSlide("v1");
     expect(Reveal.slide).toHaveBeenCalledWith(0);
   });
-});
+
+  it("should have an alert() method", function () {
+    expect(Display.alert).toBeDefined();
+  });
+
+});
+
+describe("Display.alert", function () {
+  var alertBackground, alert;
+
+  beforeEach(function () {
+    document.body.innerHTML = "";
+    alertBackground = document.createElement("div");
+    alertBackground.setAttribute("id", "alert-background");
+    document.body.appendChild(alertBackground);
+    alert = document.createElement("p");
+    alert.setAttribute("id","alert");
+    alertBackground.appendChild(alert);
+  });
+
+  it("should return null if called without any text", function () {
+    expect(Display.alert("","2")).toBeNull();
+  });
+
+  it("should set correct alert text", function () {
+    Display.alert("OPEN-LP-3.0 Alert Test", "2");
+    expect(alert.innerHTML).toEqual("OPEN-LP-3.0 Alert Test");
+  });
+
+  it("should set the correct alert position", function () {
+    expect(Display.alert("Alert Location Test","2")).toEqual("2");
+  });
+});
+
+describe("The doEntranceTransition", function () {
+
+  var alertBackground;
+
+  beforeEach(function() {
+    document.body.innerHTML = "";
+    alertBackground = document.createElement("div");
+    alertBackground.setAttribute("id", "alert-background");
+    document.body.appendChild(alertBackground);
+    alertBackground.style.top = '0px';
+    alertBackground.style.height = "0%";
+  });
+
+  it("should set the correct styles for the alert when location is top of the page", function () {
+    Display.doEntranceTransition("0");
+    expect(alertBackground.style.bottom).toEqual('');
+    expect(alertBackground.style.top).toEqual('0px');
+    expect(alertBackground.style.transition).toEqual("2s linear");
+    expect(alertBackground.style.height).toEqual("25%");
+    expect(alertBackground.style.visibility).toEqual("visible");
+  });
+
+  it("should set the correct styles for the alert when location is middle of the page", function () {
+    Display.doEntranceTransition("1");
+    var middlePosition = ((window.innerHeight - alertBackground.clientHeight) / 2) + 'px';
+    expect(alertBackground.style.top).toEqual(middlePosition);
+    expect(alertBackground.classList.contains("middle-entrance-animation"));
+    expect(alertBackground.style.height).toEqual("25%");
+    expect(alertBackground.style.visibility).toEqual("visible");
+  });
+
+  it("should set the correct styles for the alert when location is bottom of the page", function () {
+    Display.doEntranceTransition("2");
+    expect(alertBackground.style.top).toEqual('');
+    expect(alertBackground.style.bottom).toEqual('0px');    
+    expect(alertBackground.style.transition).toEqual("2s linear");
+    expect(alertBackground.style.height).toEqual("25%");
+    expect(alertBackground.style.visibility).toEqual("visible");
+  });
+});
+
+describe("The doExitTransition", function () {
+  var alertBackground;
+
+  beforeEach(function () {
+    document.body.innerHTML = "";
+    alertBackground = document.createElement("div");
+    alertBackground.setAttribute("id", "alert-background");
+    document.body.appendChild(alertBackground);
+  });
+
+  it("should remove the styles correctly when the location is the top of the page", function () {
+    Display.doExitTransition("0");
+    expect(alertBackground.style.height).toEqual('0%');
+    expect(alertBackground.style.transition).toEqual("2s linear");
+  });
+
+  it("should remove the styles correctly when the location is middle of the page", function () {
+    Display.doExitTransition("1");
+    expect(alertBackground.style.height).toEqual('0%');
+    expect(alertBackground.classList.contains("middle-exit-animation"));
+  });
+
+it("should remove the styles correctly when the location is the bottom of the page", function () {
+  Display.doExitTransition("2");
+  expect(alertBackground.style.height).toEqual('0%');
+  expect(alertBackground.style.transition).toEqual("2s linear");
+});
+
+});
+
 
 describe("Display.addTextSlide", function () {
   beforeEach(function() {