seperated background-image into seperate media-layer and improved vis…

…ibility function

README.md

@@ -30,4 +30,4 @@ Generate lyric-graphics and play them out through CasparCG.
 - command-comment: define commands / names which get loaded straigth from the start and can be shown anytime
 - song: transmit template in server->client message instead of hardcoding it into the client
 - fix "Buffer() is deprecated"
-- cgplay after invisible: only foreground / send background as fast as possible dark
+- generate background-image-b64 only if needed

casparcg-templates/JohnCG/Countdown.html

@@ -4,12 +4,6 @@
 			font-size: 0.125vw;
 		}
 
-		* {
-			cursor: pointer;
-
-			user-select: none;
-		}
-
 		body {
 			margin: 0px;
 

casparcg-templates/JohnCG/Song.html

@@ -11,12 +11,6 @@
 			JohnCG - Song-template
 		</title>
 		<style>
-			* {
-				cursor: pointer;
-
-				user-select: none;
-			}
-
 			body {
 				font-size: calc(1500vw / 1920);
 

client/main.css

@@ -233,6 +233,18 @@ div.button, div.button > * {
 	margin: 0.25rem;
 
 	overflow: visible; /* show the overflow, because the hover effects use thicker borders wich overflow (intended) */
+
+	position: relative;
+}
+
+.slide_container > div {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+
+	cursor: pointer;
 }
 
 .slide {

config.json

@@ -7,16 +7,14 @@
 		"song": "D:/path/to/song/directory"
 	},
 	"casparcg": {
-		"templates": "E:/path/to/casparcg/templates",
+		"templates": "e:/path/to/the/casparcg/templates/directory",
+		"transition_length": "12.5",
 		"connections": [
 			{
 				"host": "127.0.0.1",
 				"port": 5250,
 				"channel": 1,
-				"layers": {
-					"song": [20, 21],
-					"command_comment": 30
-				}
+				"layers": [20, 21]
 			}
 		]
 	},

src/client/main.ts

@@ -264,7 +264,7 @@ function create_slide_object(data: ClientItemSlides, number: number) {
 
 	const slide_object = document.createElement("object");
 
-	let template_data: object = data.slides_template;
+	const template_data: object & { template?: { template: string, data: object } } = data.slides_template;
 
 	switch (data.type) {
 		case "Song":
@@ -273,23 +273,29 @@ function create_slide_object(data: ClientItemSlides, number: number) {
 		case "Countdown":
 			slide_object.data = "Templates/JohnCG/Countdown.html";
 			break;
-		case "Image":
-			slide_object.data = `${data.slides_template.background_image?.replace(/\\/g, "\\\\")}`;
-			break;
 		case "CommandComment":
-			slide_object.data = `Templates/${data.slides_template.slides[0].template}.html`;
-			template_data = data.slides_template.slides[0].data;
+			slide_object.data = `Templates/${data.slides_template.template.template}.html`;
 			break;
 	}
 
+	slide_object.style.backgroundImage = `url("${data.slides_template.background_image?.replace(/\\/g, "\\\\") ?? ""}")`;
+
 	slide_object.classList.add("slide");
 
 	div_slide_container.append(slide_object);
 
 	slide_object.dataset.slide_number = number.toString();
 
+	// register click event
+	div_slide_container.addEventListener("click", () => {
+		request_item_slide_select(
+			Number(document.querySelector<HTMLDivElement>("div.sequence_item_container.selected")?.dataset.item_number),
+			number
+		);
+	});
+
 	slide_object.addEventListener("load", () => {
-		slide_object.contentWindow?.update(JSON.stringify(template_data));
+		slide_object.contentWindow?.update(JSON.stringify({ ...template_data?.template.data, mute_transition: true }));
 
 		switch (data.type) {
 			case "Song":
@@ -298,17 +304,11 @@ function create_slide_object(data: ClientItemSlides, number: number) {
 		}
 
 		slide_object.contentWindow?.play();
-
-		const container = slide_object.contentDocument ?? div_slide_container;
-
-		// register click event
-		container.addEventListener("click", () => {
-			request_item_slide_select(
-				Number(document.querySelector<HTMLDivElement>("div.sequence_item_container.selected")?.dataset.item_number),
-				number
-			);
-		});
 	});
+
+	const catcher = document.createElement("div");
+
+	div_slide_container.append(catcher);
 
 	return div_slide_container;
 }