Merge branch 'Fix_theme_image_transparency' into 'master'

Fix theme image transparency

Closes #506

See merge request openlp/openlp!167

openlp/core/display/html/display.css

@@ -13,10 +13,15 @@
 }
 
 body {
-  background: transparent !important;
+  background: transparent;
   color: rgb(255, 255, 255) !important;
 }
 
+body.checkerboard {
+  background: url('checkerboard.png');
+  background-size: 100%;
+}
+
 sup {
   vertical-align: super !important;
   font-size: smaller !important;

openlp/core/display/html/display.html

@@ -13,7 +13,6 @@
       <div id="alert-background" class="hide"><div id="alert-text" class="hide">Testing alerts</div></div>
     </div>
     <div class="reveal">
-      <div id="global-background" class="slide-background present" data-loaded="true"></div>
       <div class="slides"></div>
       <div class="footer"></div>
     </div>

openlp/core/display/html/display.js

@@ -385,16 +385,16 @@ var Display = {
   /**
    * Start up reveal and do any other initialisation
    */
-  init: function (doTransitions=false, doItemtransitions=false) {
-    var globalBackground = $("#global-background")[0];
-    globalBackground.style.cssText = "";
-    globalBackground.style.setProperty("background", "black");
+  init: function (isDisplay=false, doItemtransitions=false) {
+    if (!isDisplay) {
+      document.body.classList.add('checkerboard');
+    }
     Display._slidesContainer = $(".slides")[0];
     Display._footerContainer = $(".footer")[0];
     Display._backgroundsContainer = $(".backgrounds")[0];
-    Display._doTransitions = doTransitions;
+    Display._doTransitions = isDisplay;
     Reveal.initialize(Display._revealConfig);
-    Display.setItemTransition(doItemtransitions && doTransitions);
+    Display.setItemTransition(doItemtransitions && isDisplay);
     displayWatcher.setInitialised(true);
   },
   /**
@@ -1038,12 +1038,9 @@ var Display = {
     // Set the background
     var backgroundContent = "";
     var backgroundHtml = "";
-    var globalBackground = $("#global-background")[0];
-    globalBackground.style.setProperty("background", "black");
     switch (Display._theme.background_type) {
       case BackgroundType.Transparent:
         backgroundContent = "transparent";
-        globalBackground.style.setProperty("background", "transparent");
         break;
       case BackgroundType.Solid:
         backgroundContent = Display._theme.background_color;

openlp/core/display/window.py

@@ -248,8 +248,8 @@ class DisplayWindow(QtWidgets.QWidget, RegistryProperties, LogMixin):
         """
         js_is_display = str(self.is_display).lower()
         item_transitions = str(self.settings.value('themes/item transitions')).lower()
-        self.run_javascript('Display.init({do_transitions}, {do_item_transitions});'
-                            .format(do_transitions=js_is_display, do_item_transitions=item_transitions))
+        self.run_javascript('Display.init({is_display}, {do_item_transitions});'
+                            .format(is_display=js_is_display, do_item_transitions=item_transitions))
         wait_for(lambda: self._is_initialised)
         if self.scale != 1:
             self.set_scale(self.scale)
@@ -404,10 +404,6 @@ class DisplayWindow(QtWidgets.QWidget, RegistryProperties, LogMixin):
                 theme_copy.background_end_color = '#590909'
                 theme_copy.background_main_color = '#090909'
                 theme_copy.background_footer_color = '#090909'
-            # If background is transparent and this is not a display, inject checkerboard background image instead
-            elif theme.background_type == 'transparent':
-                theme_copy.background_type = 'image'
-                theme_copy.background_filename = self.checkerboard_path
         exported_theme = theme_copy.export_theme(is_js=True)
         self.run_javascript('Display.setTheme({theme});'.format(theme=exported_theme), is_sync=is_sync)
 

tests/functional/openlp_core/display/test_window.py

@@ -32,6 +32,8 @@ from PyQt5 import QtCore
 sys.modules['PyQt5.QtWebEngineWidgets'] = MagicMock()
 
 from openlp.core.display.window import DisplayWindow
+from openlp.core.common.enum import ServiceItemType
+from openlp.core.lib.theme import Theme
 from openlp.core.ui import HideMode
 
 
@@ -174,6 +176,89 @@ def test_run_javascript_sync_no_wait(mock_time, mocked_webengine, mocked_addWidg
     mock_time.sleep.assert_not_called()
 
 
+@patch('PyQt5.QtWidgets.QVBoxLayout')
+@patch('openlp.core.display.webengine.WebEngineView')
+def test_set_theme_is_display_video(mocked_webengine, mocked_addWidget, mock_settings):
+    """
+    Test the set_theme function
+    """
+    # GIVEN: A display window and a video theme
+    display_window = DisplayWindow()
+    display_window.is_display = True
+    display_window.run_javascript = MagicMock()
+    theme = Theme()
+    theme.background_type = 'video'
+    result_theme = Theme()
+    result_theme.background_type = 'transparent'
+    result_theme = result_theme.export_theme(is_js=True)
+
+    # WHEN: The set theme function is called
+    display_window.set_theme(theme, is_sync=False, service_item_type=ServiceItemType.Text)
+
+    # THEN: The final theme should be transparent
+    display_window.run_javascript.assert_called_once_with('Display.setTheme({theme});'.format(theme=result_theme),
+                                                          is_sync=False)
+
+
+@patch('PyQt5.QtWidgets.QVBoxLayout')
+@patch('openlp.core.display.webengine.WebEngineView')
+def test_set_theme_not_display_video(mocked_webengine, mocked_addWidget, mock_settings):
+    """
+    Test the set_theme function
+    """
+    # GIVEN: A display window and a video theme
+    display_window = DisplayWindow()
+    display_window.is_display = False
+    display_window.run_javascript = MagicMock()
+    theme = Theme()
+    theme.background_type = 'video'
+    theme.background_border_color = 'border_colour'
+    result_theme = Theme()
+    result_theme.background_type = 'solid'
+    result_theme.background_border_color = 'border_colour'
+    result_theme.background_start_color = 'border_colour'
+    result_theme.background_end_color = 'border_colour'
+    result_theme.background_main_color = 'border_colour'
+    result_theme.background_footer_color = 'border_colour'
+    result_theme.background_color = 'border_colour'
+    result_theme = result_theme.export_theme(is_js=True)
+
+    # WHEN: The set theme function is called
+    display_window.set_theme(theme, is_sync=False, service_item_type=False)
+
+    # THEN: The final theme should use 'border_colour' for it's colour values
+    display_window.run_javascript.assert_called_once_with('Display.setTheme({theme});'.format(theme=result_theme),
+                                                          is_sync=False)
+
+
+@patch('PyQt5.QtWidgets.QVBoxLayout')
+@patch('openlp.core.display.webengine.WebEngineView')
+def test_set_theme_not_display_live(mocked_webengine, mocked_addWidget, mock_settings):
+    """
+    Test the set_theme function
+    """
+    # GIVEN: A display window and a video theme
+    display_window = DisplayWindow()
+    display_window.is_display = False
+    display_window.run_javascript = MagicMock()
+    theme = Theme()
+    theme.background_type = 'live'
+    result_theme = Theme()
+    result_theme.background_type = 'solid'
+    result_theme.background_start_color = '#590909'
+    result_theme.background_end_color = '#590909'
+    result_theme.background_main_color = '#090909'
+    result_theme.background_footer_color = '#090909'
+    result_theme = result_theme.export_theme(is_js=True)
+
+    # WHEN: The set theme function is called
+    display_window.set_theme(theme, is_sync=False, service_item_type=False)
+
+    # THEN: The final theme should use the preset colour values
+    display_window.run_javascript.assert_called_once_with('Display.setTheme({theme});'.format(theme=result_theme),
+                                                          is_sync=False)
+
+
 @patch('PyQt5.QtWidgets.QVBoxLayout')
 @patch('openlp.core.display.webengine.WebEngineView')
 @patch('openlp.core.common.registry.Registry.execute')

tests/js/test_display.js

@@ -109,11 +109,26 @@ describe("The Display object", function () {
   it("should initialise Reveal when init is called", function () {
     spyOn(Reveal, "initialize");
     document.body.innerHTML = "";
-    _createDiv({"id": "global-background"});
     Display.init();
     expect(Reveal.initialize).toHaveBeenCalled();
   });
 
+  it("should have checkerboard class when init is called when not display", function () {
+    spyOn(Reveal, "initialize");
+    document.body.innerHTML = "";
+    document.body.classList = "";
+    Display.init(false);
+    expect(document.body.classList.contains('checkerboard')).toEqual(true);
+  });
+
+  it("should not have checkerboard class when init is called when is a display", function () {
+    spyOn(Reveal, "initialize");
+    document.body.innerHTML = "";
+    document.body.classList = "";
+    Display.init(true);
+    expect(document.body.classList.contains('checkerboard')).toEqual(false);
+  });
+
   it("should have a reinit() method", function () {
     expect(Display.reinit).toBeDefined();
   });
@@ -164,7 +179,6 @@ describe("Transitions", function () {
     document.body.innerHTML = "";
     _createDiv({"class": "slides"});
     _createDiv({"class": "footer"});
-    _createDiv({"id": "global-background"});
     Display._slides = {};
   });
   afterEach(function() {
@@ -563,7 +577,6 @@ describe("Display.setTextSlides", function () {
     var footer_container = _createDiv({"class": "footer"});
     Display._slidesContainer = slides_container;
     Display._footerContainer = footer_container;
-    _createDiv({"id": "global-background"});
     Display._slides = {};
   });
 
@@ -734,7 +747,6 @@ describe("Display.setImageSlides", function () {
     var footer_container = _createDiv({"class": "footer"});
     Display._slidesContainer = slides_container;
     Display._footerContainer = footer_container;
-    _createDiv({"id": "global-background"});
     Display._slides = {};
   });
 
@@ -762,7 +774,6 @@ describe("Display.setVideo", function () {
     document.body.innerHTML = "";
     var slides_container = _createDiv({"class": "slides"});
     Display._slidesContainer = slides_container;
-    _createDiv({"id": "global-background"});
     Display._slides = {};
   });