Fixed backgrounds not showing

openlp/core/app.py

@@ -336,8 +336,8 @@ def main(args=None):
     :param args: Some args
     """
     args = parse_options(args)
-    # qt_args = ['--disable-web-security']
-    qt_args = []
+    qt_args = ['--disable-web-security']
+    # qt_args = []
     if args and args.loglevel.lower() in ['d', 'debug']:
         log.setLevel(logging.DEBUG)
     elif args and args.loglevel.lower() in ['w', 'warning']:

openlp/core/display/html/display.html

@@ -8,9 +8,18 @@
       background: #000 !important;
       color: #fff !important;
     }
-    .reveal .slides > section, .reveal .slides > section > section {
+    .reveal .slides > section,
+    .reveal .slides > section > section {
       padding: 0;
     }
+    .reveal > .backgrounds > .present {
+      visibility: hidden !important;
+    }
+    #global-background {
+      display: block;
+      visibility: visible;
+      z-index: -1;
+    }
     </style>
     <script type="text/javascript" src="qrc:///qtwebchannel/qwebchannel.js"></script>
     <script type="text/javascript" src="reveal.js"></script>

openlp/core/display/html/display.js

@@ -1,6 +1,7 @@
 /**
  * display.js is the main Javascript file that is used to drive the display.
  */
+
 /**
  * Background type enumeration
  */
@@ -11,6 +12,7 @@ var BackgroundType = {
   Video: "video",
   Image: "image"
 };
+
 /**
  * Gradient type enumeration
  */
@@ -21,6 +23,7 @@ var GradientType = {
   Vertical: "vertical",
   Circular: "circular"
 };
+
 /**
  * Horizontal alignment enumeration
  */
@@ -30,6 +33,7 @@ var HorizontalAlign = {
   Center: "center",
   Justify: "justify"
 };
+
 /**
  * Vertical alignment enumeration
  */
@@ -38,6 +42,7 @@ var VerticalAlign = {
   Middle: "middle",
   Bottom: "bottom"
 };
+
 /**
  * Audio state enumeration
  */
@@ -46,6 +51,7 @@ var AudioState = {
   Paused: "paused",
   Stopped: "stopped"
 };
+
 /**
  * Return an array of elements based on the selector query
  * @param {string} selector - The selector to find elements
@@ -54,6 +60,7 @@ var AudioState = {
 function $(selector) {
   return Array.from(document.querySelectorAll(selector));
 }
+
 /**
  * Build linear gradient CSS
  * @private
@@ -66,6 +73,7 @@ function $(selector) {
 function _buildLinearGradient(startDir, endDir, startColor, endColor) {
   return "-webkit-gradient(linear, " + startDir + ", " + endDir + ", from(" + startColor + "), to(" + endColor + ")) fixed";
 }
+
 /**
  * Build radial gradient CSS
  * @private
@@ -77,6 +85,7 @@ function _buildLinearGradient(startDir, endDir, startColor, endColor) {
 function _buildRadialGradient(width, startColor, endColor) {
   return "-webkit-gradient(radial, " + width + " 50%, 100, " + width + " 50%, " + width + ", from(" + startColor + "), to(" + endColor + ")) fixed";
 }
+
 /**
  * Get a style value from an element (computed or manual)
  * @private
@@ -87,6 +96,7 @@ function _buildRadialGradient(width, startColor, endColor) {
 function _getStyle(element, style) {
   return document.defaultView.getComputedStyle(element).getPropertyValue(style);
 }
+
 /**
  * Convert newlines to <br> tags
  * @private
@@ -96,6 +106,7 @@ function _getStyle(element, style) {
 function _nl2br(text) {
   return text.replace("\r\n", "\n").replace("\n", "<br>");
 }
+
 /**
  * Prepare text by creating paragraphs and calling _nl2br to convert newlines to <br> tags
  * @private
@@ -105,7 +116,24 @@ function _nl2br(text) {
 function _prepareText(text) {
   return "<p>" + _nl2br(text) + "</p>";
 }
-// An audio player with a play list
+
+/**
+ * The paths we get are JSON versions of Python Path objects, so let's just fix that.
+ * @private
+ * @param {object} path - The Path object
+ * @returns {string} The actual file path
+ */
+function _pathToString(path) {
+    var filename = path.__Path__.join("/").replace("//", "/");
+    if (!filename.startsWith("/")) {
+        filename = "/" + filename;
+    }
+    return filename;
+}
+
+/**
+ * An audio player with a play list
+ */
 var AudioPlayer = function (audioElement) {
   this._audioElement = null;
   this._eventListeners = {};
@@ -115,6 +143,12 @@ var AudioPlayer = function (audioElement) {
   this._state = AudioState.Stopped;
   this.createAudioElement();
 };
+
+/**
+ * Call all listeners associated with this event
+ * @private
+ * @param {object} event - The event that was emitted
+ */
 AudioPlayer.prototype._callListener = function (event) {
   if (this._eventListeners.hasOwnProperty(event.type)) {
     this._eventListeners[event.type].forEach(function (listener) {
@@ -125,6 +159,10 @@ AudioPlayer.prototype._callListener = function (event) {
     console.warn("Received unknown event \"" + event.type + "\", doing nothing.");
   }
 };
+
+/**
+ * Create the <audio> element that is used to play the audio
+ */
 AudioPlayer.prototype.createAudioElement = function () {
   this._audioElement = document.createElement("audio");
   this._audioElement.addEventListener("ended", this.onEnded);
@@ -524,18 +562,18 @@ var Display = {
         }
         break;
       case BackgroundType.Image:
-        backgroundStyle["background-color"] = theme.background_border_color;
-        backgroundStyle["background-image"] = "url('file://" + theme.background_filename + "')";
-        backgroundStyle["background-size"] = "cover";
+        background_filename = _pathToString(theme.background_filename);
+        backgroundStyle["background-image"] = "url('file://" + background_filename + "')";
         break;
       case BackgroundType.Video:
+        background_filename = _pathToString(theme.background_filename);
         backgroundStyle["background-color"] = theme.background_border_color;
-        backgroundHtml = "<video loop autoplay muted><source src='" + theme.background_filename + "'></video>";
-        backgroundStyle["background-size"] = "cover";
+        backgroundHtml = "<video loop autoplay muted><source src='file://" + background_filename + "'></video>";
         break;
       default:
         backgroundStyle["background"] = "#000";
     }
+    globalBackground.style.cssText = "";
     for (var key in backgroundStyle) {
       if (backgroundStyle.hasOwnProperty(key)) {
         globalBackground.style.setProperty(key, backgroundStyle[key]);
@@ -579,6 +617,7 @@ var Display = {
     mainStyle["left"] = "" + theme.font_main_x + "px";
     mainStyle["top"] = "" + theme.font_main_y + "px";
     var slidesDiv = $(".slides")[0];
+    slidesDiv.style.cssText = "";
     for (var key in mainStyle) {
       if (mainStyle.hasOwnProperty(key)) {
         slidesDiv.style.setProperty(key, mainStyle[key]);
@@ -597,6 +636,7 @@ var Display = {
     footerStyle["color"] = theme.font_footer_color;
     footerStyle["white-space"] = theme.font_footer_wrap ? "normal" : "nowrap";
     var footer = $(".footer")[0];
+    footer.style.cssText = "";
     for (var key in footerStyle) {
       if (footerStyle.hasOwnProperty(key)) {
         footer.style.setProperty(key, footerStyle[key]);

openlp/core/ui/slidecontroller.py

@@ -371,6 +371,7 @@ class SlideController(QtWidgets.QWidget, LogMixin, RegistryProperties):
         # Set up the preview display
         self.preview_display = DisplayWindow(self)
         self.slide_layout.addWidget(self.preview_display)
+        self.slide_layout.resize.connect(self.on_preview_resize)
         # Actual preview screen
         if self.is_live:
             self.current_shortcut = ''
@@ -635,16 +636,6 @@ class SlideController(QtWidgets.QWidget, LogMixin, RegistryProperties):
         else:
             self.toolbar.set_widget_visible(NON_TEXT_MENU, visible)
 
-    def on_song_bar_handler(self):
-        """
-        Some song handler
-        """
-        request = self.sender().text()
-        slide_no = self.slide_list[request]
-        width = self.main_window.control_splitter.sizes()[self.split]
-        self.preview_widget.replace_service_item(self.service_item, width, slide_no)
-        self.slide_selected()
-
     def receive_spin_delay(self):
         """
         Adjusts the value of the ``delay_spin_box`` to the given one.
@@ -743,8 +734,8 @@ class SlideController(QtWidgets.QWidget, LogMixin, RegistryProperties):
 
         :param item: The current service item
         """
-        if item.theme:
-            self.preview_display.set_theme(item.theme)
+        theme_name = item.theme if item.theme else Registry().get('theme_manager').global_theme
+        self.preview_display.set_theme(Registry().get('theme_manager').get_theme_data(theme_name))
         if item.is_text():
             self.preview_display.load_verses([{'verse': f['verseTag'], 'text': f['raw_slide']}
                                               for f in item._raw_frames])
@@ -909,6 +900,23 @@ class SlideController(QtWidgets.QWidget, LogMixin, RegistryProperties):
             self.preview_widget.change_slide(index)
             self.slide_selected()
 
+    def on_song_bar_handler(self):
+        """
+        Some song handler
+        """
+        request = self.sender().text()
+        slide_no = self.slide_list[request]
+        width = self.main_window.control_splitter.sizes()[self.split]
+        self.preview_widget.replace_service_item(self.service_item, width, slide_no)
+        self.slide_selected()
+
+    def on_preview_resize(self, size):
+        """
+        Set the preview display's zoom factor based on the size relative to the display size
+        """
+        ratio = float(size.width()) / 1920.0
+        self.preview_display.webview.setZoomFactor(ratio)
+
     def main_display_set_background(self):
         """
         Allow the main display to blank the main display at startup time

openlp/core/widgets/layouts.py

@@ -31,6 +31,8 @@ class AspectRatioLayout(QtWidgets.QLayout):
 
     This is based on the C++ example here: https://gist.github.com/pavel-perina/1324ff064aedede0e01311aab315f83d
     """
+    resize = QtCore.pyqtSignal(QtCore.QSize)
+
     def __init__(self, parent=None, aspect_ratio=None):
         """
         Create a layout.
@@ -164,6 +166,7 @@ class AspectRatioLayout(QtWidgets.QLayout):
                 else:
                     x = self.margin + (available_width - width) / 2
                 widget.setGeometry(rect.x() + x, rect.y() + self.margin, width, height)
+            self.resize.emit(QtCore.QSize(width, height))
 
     def sizeHint(self):
         """