Fixed backgrounds not showing

This commit is contained in:
Raoul Snyman 2018-03-25 00:14:38 -07:00
parent 552dc60d21
commit 8b826f29c4
5 changed files with 81 additions and 21 deletions

View File

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

View File

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

View File

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

View File

@ -371,6 +371,7 @@ class SlideController(QtWidgets.QWidget, LogMixin, RegistryProperties):
# Set up the preview display # Set up the preview display
self.preview_display = DisplayWindow(self) self.preview_display = DisplayWindow(self)
self.slide_layout.addWidget(self.preview_display) self.slide_layout.addWidget(self.preview_display)
self.slide_layout.resize.connect(self.on_preview_resize)
# Actual preview screen # Actual preview screen
if self.is_live: if self.is_live:
self.current_shortcut = '' self.current_shortcut = ''
@ -635,16 +636,6 @@ class SlideController(QtWidgets.QWidget, LogMixin, RegistryProperties):
else: else:
self.toolbar.set_widget_visible(NON_TEXT_MENU, visible) 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): def receive_spin_delay(self):
""" """
Adjusts the value of the ``delay_spin_box`` to the given one. 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 :param item: The current service item
""" """
if item.theme: theme_name = item.theme if item.theme else Registry().get('theme_manager').global_theme
self.preview_display.set_theme(item.theme) self.preview_display.set_theme(Registry().get('theme_manager').get_theme_data(theme_name))
if item.is_text(): if item.is_text():
self.preview_display.load_verses([{'verse': f['verseTag'], 'text': f['raw_slide']} self.preview_display.load_verses([{'verse': f['verseTag'], 'text': f['raw_slide']}
for f in item._raw_frames]) for f in item._raw_frames])
@ -909,6 +900,23 @@ class SlideController(QtWidgets.QWidget, LogMixin, RegistryProperties):
self.preview_widget.change_slide(index) self.preview_widget.change_slide(index)
self.slide_selected() 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): def main_display_set_background(self):
""" """
Allow the main display to blank the main display at startup time Allow the main display to blank the main display at startup time

View File

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