From 233944d066e19512709b3940695985e70ae88596 Mon Sep 17 00:00:00 2001
From: Simon Ziegler <simon.ziegler.1998+github@pm.me>
Date: Sun, 25 Feb 2024 03:50:34 +0100
Subject: [PATCH] seperated background-image into seperate media-layer and
 improved visibility function

---
 README.md                                  |   2 +-
 casparcg-templates/JohnCG/Countdown.html   |   6 -
 casparcg-templates/JohnCG/Song.html        |   6 -
 client/main.css                            |  12 +
 config.json                                |   8 +-
 src/client/main.ts                         |  34 +-
 src/server/Sequence.ts                     | 342 ++++++++++-----------
 src/server/SequenceItems/CommandComment.ts |  16 +-
 src/server/SequenceItems/Countdown.ts      |  25 +-
 src/server/SequenceItems/Image.ts          |   2 +
 src/server/SequenceItems/SequenceItem.ts   |  63 +++-
 src/server/SequenceItems/Song.ts           |  35 ++-
 src/server/config.ts                       |   6 +-
 src/templates/Countdown.ts                 |  15 +-
 src/templates/Song.ts                      |  10 +-
 15 files changed, 314 insertions(+), 268 deletions(-)

diff --git a/README.md b/README.md
index cf12df1..eef7cb6 100644
--- a/README.md
+++ b/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
\ No newline at end of file
+- generate background-image-b64 only if needed
\ No newline at end of file
diff --git a/casparcg-templates/JohnCG/Countdown.html b/casparcg-templates/JohnCG/Countdown.html
index 380b029..ddb3ab9 100644
--- a/casparcg-templates/JohnCG/Countdown.html
+++ b/casparcg-templates/JohnCG/Countdown.html
@@ -4,12 +4,6 @@
 			font-size: 0.125vw;
 		}
 
-		* {
-			cursor: pointer;
-
-			user-select: none;
-		}
-
 		body {
 			margin: 0px;
 
diff --git a/casparcg-templates/JohnCG/Song.html b/casparcg-templates/JohnCG/Song.html
index 0dbdd59..ba0f7af 100644
--- a/casparcg-templates/JohnCG/Song.html
+++ b/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);
 
diff --git a/client/main.css b/client/main.css
index 6ab91c1..c80f8a4 100644
--- a/client/main.css
+++ b/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 {
diff --git a/config.json b/config.json
index 50fd0c6..308662a 100644
--- a/config.json
+++ b/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]
 			}
 		]
 	},
diff --git a/src/client/main.ts b/src/client/main.ts
index 2dd5c07..2f06d14 100644
--- a/src/client/main.ts
+++ b/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;
 }
diff --git a/src/server/Sequence.ts b/src/server/Sequence.ts
index dbf6771..33eb4e8 100644
--- a/src/server/Sequence.ts
+++ b/src/server/Sequence.ts
@@ -1,10 +1,10 @@
 import path from "path";
-import { CasparCG, ClipInfo, Commands, TransitionParameters } from "casparcg-connection";
+import { APIRequest, CasparCG, ClipInfo, Commands, TransitionParameters } from "casparcg-connection";
 import mime from "mime-types";
 import { XMLParser } from "fast-xml-parser";
 
 import { SongElement } from "./SequenceItems/SongFile";
-import { ClientItemSlides, ItemProps, ItemPropsBase, SequenceItem } from "./SequenceItems/SequenceItem";
+import { ClientItemSlides, ItemProps, ItemPropsBase, ItemRenderObject, SequenceItem } from "./SequenceItems/SequenceItem";
 import Song, { SongProps } from "./SequenceItems/Song";
 
 import * as JGCPSend from "./JGCPSendMessages";
@@ -56,6 +56,13 @@ class Sequence {
 
 	readonly casparcg_connections: CasparCGConnection[] = [];
 
+	readonly casparcg_transition: TransitionParameters = {
+		/* eslint-disable @typescript-eslint/naming-convention */
+		duration: Config.casparcg.transition_length,
+		transitionType: TransitionType.Mix
+		/* eslint-enable @typescript-eslint/naming-convention */
+	};
+
 	constructor(sequence: string) {
 		this.parse_sequence(sequence);
 
@@ -113,15 +120,11 @@ class Sequence {
 		const clear_layers = (connection: CasparCGConnection) => {
 			void connection.connection.cgClear({
 				channel: connection.settings.channel,
-				layer: connection.settings.layers.song[0]
-			});
-			void connection.connection.cgClear({
-				channel: connection.settings.channel,
-				layer: connection.settings.layers.song[1]
+				layer: connection.settings.layers[0]
 			});
 			void connection.connection.cgClear({
 				channel: connection.settings.channel,
-				layer: connection.settings.layers.command_comment
+				layer: connection.settings.layers[1]
 			});
 		};
 
@@ -214,20 +217,24 @@ class Sequence {
 					// if it wasn't caught by other cases, it is either a comment or not implemented yet -> if there is no file specified, treat it as comment
 					if (!Object.keys(item_data).includes("FileName")) {
 						// try to parse the caption as an JSON-object for AMCP-Commands
-						const caption_json = JSON.parse(item_data.Caption) as unknown;
-
-						if (typeof caption_json === "object") {
-							console.debug(caption_json);
-
-							const props: CommandCommentProps = {
-								...item_data,
-								type: "CommandComment",
-								...caption_json as { template: string, data?: object }
-							};
-
-							this.sequence_items.push(new CommandComment(props));
-						} else {
-							this.sequence_items.push(new Comment(item_data as CommentProps));
+						try {
+							const caption_json = JSON.parse(item_data.Caption) as unknown;
+
+							if (typeof caption_json === "object") {
+								const props: CommandCommentProps = {
+									...item_data,
+									type: "CommandComment",
+									...caption_json as { template: string, data?: object }
+								};
+	
+								this.sequence_items.push(new CommandComment(props));
+							} else {
+								throw new SyntaxError();
+							}
+						} catch (e) {
+							if (e instanceof SyntaxError) {
+								this.sequence_items.push(new Comment(item_data as CommentProps));
+							}
 						}
 					}
 					break;
@@ -365,133 +372,122 @@ class Sequence {
 		return item;
 	}
 
-	private casparcg_load_item(casparcg_connection?: CasparCGConnection): void {
+	private casparcg_load_item(casparcg_connection?: CasparCGConnection, media_only?: boolean): void {
 		const connections = casparcg_connection ? [casparcg_connection] : this.casparcg_connections;
 
 		// eslint-disable-next-line @typescript-eslint/no-misused-promises
 		connections.forEach(async (connection) => {
-			// if no connection was give, flip the layers and stop the template-layer
-			if (casparcg_connection === undefined) {
-				// clear the lower layer
-				// eslint-disable-next-line @typescript-eslint/no-misused-promises
-				await connection.connection.cgClear({
-					channel: connection.settings.channel,
-					layer: connection.settings.layers.song[0]
-				});
-	
-				await connection.connection.swap({
-					channel: connection.settings.channel,
-					layer: connection.settings.layers.song[0],
-					channel2: connection.settings.channel,
-					layer2: connection.settings.layers.song[1],
-					transforms: true
-				});
-
-				void connection.connection.cgStop({
-					/* eslint-disable @typescript-eslint/naming-convention */
-					channel: connection.settings.channel,
-					layer: connection.settings.layers.command_comment,
-					cgLayer: 0
-					/* eslint-enable @typescript-eslint/naming-convention */
-				});
-			}
-		
 			// generate the render-object
 			const render_object = await this.active_sequence_item.create_render_object();
+			
+			await this.casparcg_load_media(connection, render_object);
 
-			// depending on the type, use different caspar-cg-functions
-			switch (render_object?.caspar_type) {
-				case "template":
-					switch (this.active_sequence_item.props.type) {
-						case "CommandComment":
-							void connection.connection.cgAdd({
-								/* eslint-disable @typescript-eslint/naming-convention */
-								channel: connection.settings.channel,
-								layer: connection.settings.layers.command_comment,
-								cgLayer: 0,
-								playOnLoad: false,
-								template: this.active_sequence_item.props.template,
-								// escape quotation-marks by hand, since the old chrom-version of casparcg appears to have a bug
-								data: JSON.stringify(JSON.stringify(this.active_sequence_item.props.data, (_key, val: unknown) => {
-									if (typeof val === "string") {
-										return val.replace("\"", "\\u0022");
-									} else {
-										return val;
-									}
-								}))
-								/* eslint-enable @typescript-eslint/naming-convention */
-							});
-							break;
-						default:
-							void connection.connection.cgAdd({
-								/* eslint-disable @typescript-eslint/naming-convention */
-								channel: connection.settings.channel,
-								layer: connection.settings.layers.song[1],
-								cgLayer: 0,
-								playOnLoad: this.casparcg_visibility,
-								template: `JohnCG/${render_object.type}`,
-								// escape quotation-marks by hand, since the old chrom-version of casparcg appears to have a bug
-								data: JSON.stringify(JSON.stringify(render_object, (_key, val: unknown) => {
-									if (typeof val === "string") {
-										return val.replace("\"", "\\u0022");
-									} else {
-										return val;
-									}
-								}))
-								/* eslint-enable @typescript-eslint/naming-convention */
-							});
-						break;
-					}
-					break;
-				case "media": {
-					// make it all uppercase and remove the extension to match casparcg-clips and make sure it uses forward slashes
-					const req_name = render_object.file_name.replace(/\.[^(\\.]+$/, "").toUpperCase().replace(/\\/g, "/");
+			if (!media_only) {
+				void this.casparcg_load_template(connection, render_object);
+			}
+		});
+	}
 
-					let media_result: ClipInfo | undefined;
+	private casparcg_load_media(casparcg_connection: CasparCGConnection, render_object: ItemRenderObject): Promise<APIRequest<Commands.CgAdd>> {
+		// if a media-file is defined, load it
+		if (render_object.media) {
+			// make it all uppercase and remove the extension to match casparcg-clips and make sure it uses forward slashes
+			const req_name = render_object.media.replace(/\.[^(\\.]+$/, "").toUpperCase().replace(/\\/g, "/");
 
-					// check all the casparcg-files, wether they contain a media-file that matches the path
-					for (const m of connection.media) {
-						const media_file = m.clip.toUpperCase().replace(/\\/, "/");
-	
-						if (req_name.endsWith(media_file)) {
-							media_result = m;
-							break;
-						}
-					}
+			let media_result: ClipInfo | undefined;
+
+			// check all the casparcg-files, wether they contain a media-file that matches the path
+			for (const m of casparcg_connection.media) {
+				const media_file = m.clip.toUpperCase().replace(/\\/, "/");
+
+				if (req_name.endsWith(media_file)) {
+					media_result = m;
+					break;
+				}
+			}
 
-					const transition: TransitionParameters = {
+			// if a matching media-file was found, use it
+			if (media_result !== undefined) {
+				// if the state is "visible", play it directly
+				if (this.visibility) {
+					return casparcg_connection.connection.play({
 						/* eslint-disable @typescript-eslint/naming-convention */
-						duration: 12.5, // 25 frames = 1s@25fps
-						transitionType: TransitionType.Mix
+						channel:  casparcg_connection.settings.channel,
+						layer:  casparcg_connection.settings.layers[0],
+						clip: media_result.clip,
+						transition: !render_object.mute_transition ? this.casparcg_transition : undefined
+						/* eslint-enable @typescript-eslint/naming-convention */
+					});
+				} else {
+					//  if the current stat is invisible, only load it in the background
+					return casparcg_connection.connection.loadbg({
+						/* eslint-disable @typescript-eslint/naming-convention */
+						channel:  casparcg_connection.settings.channel,
+						layer:  casparcg_connection.settings.layers[0],
+						clip: media_result.clip,
+						transition: !render_object.mute_transition ? this.casparcg_transition : undefined
+						/* eslint-enable @typescript-eslint/naming-convention */
+					});
+				}
+			} else {
+				const command = this.visibility ? Commands.PlayHtml : Commands.LoadbgHtml;
+
+				return casparcg_connection.connection.executeCommand({
+					/* eslint-disable @typescript-eslint/naming-convention */
+					command: command,
+					params: {
+						channel:  casparcg_connection.settings.channel,
+						layer:  casparcg_connection.settings.layers[0],
+						url: JSON.stringify(render_object.background_image),
+						transition: !render_object.mute_transition ? this.casparcg_transition : undefined
 						/* eslint-enable @typescript-eslint/naming-convention */
-					};
-
-					// if a matching media-file was found, use it
-					if (media_result !== undefined) {
-						void connection.connection.play({
-							/* eslint-disable @typescript-eslint/naming-convention */
-							channel:  connection.settings.channel,
-							layer:  connection.settings.layers.song[1],
-							clip: media_result.clip,
-							transition: !render_object.mute_transition ? transition : undefined
-							/* eslint-enable @typescript-eslint/naming-convention */
-						});
-					} else {
-						void connection.connection.executeCommand({
-							/* eslint-disable @typescript-eslint/naming-convention */
-							command: Commands.PlayHtml,
-							params: {
-								channel:  connection.settings.channel,
-								layer:  connection.settings.layers.song[1],
-								url: JSON.stringify(render_object.background_image),
-								transition: !render_object.mute_transition ? transition : undefined
-								/* eslint-enable @typescript-eslint/naming-convention */
-							}
-						});
 					}
-				} break;
+				});
 			}
-		});
+		} else {
+			// clear the media-output
+			return casparcg_connection.connection.play({
+				/* eslint-disable @typescript-eslint/naming-convention */
+				channel:  casparcg_connection.settings.channel,
+				layer:  casparcg_connection.settings.layers[0],
+				clip: "EMPTY",
+				transition: !render_object.mute_transition ? this.casparcg_transition : undefined
+				/* eslint-enable @typescript-eslint/naming-convention */
+			});
+		}
+	}
+
+	private casparcg_load_template(casparcg_connection: CasparCGConnection, render_object: ItemRenderObject): Promise<APIRequest<Commands.CgAdd>> {
+		// if a template was specified, load it
+		if (render_object.template !== undefined) {
+			return casparcg_connection.connection.cgAdd({
+				/* eslint-disable @typescript-eslint/naming-convention */
+				channel: casparcg_connection.settings.channel,
+				layer: casparcg_connection.settings.layers[1],
+				cgLayer: 0,
+				playOnLoad: this.casparcg_visibility,
+				template: render_object.template.template,
+				// escape quotation-marks by hand, since the old chrom-version of casparcg appears to have a bug
+				data: JSON.stringify(JSON.stringify(render_object.template.data, (_key, val: unknown) => {
+					if (typeof val === "string") {
+						return val.replace("\"", "\\u0022");
+					} else {
+						return val;
+					}
+				}))
+				/* eslint-enable @typescript-eslint/naming-convention */
+			});
+		} else {
+			// if not, clear the previous template
+			return casparcg_connection.connection.play({
+				/* eslint-disable @typescript-eslint/naming-convention */
+				channel:  casparcg_connection.settings.channel,
+				layer:  casparcg_connection.settings.layers[1],
+				clip: "EMPTY",
+				transition: !render_object.mute_transition ? this.casparcg_transition : undefined
+				/* eslint-enable @typescript-eslint/naming-convention */
+			});
+		}
 	}
 
 	private casparcg_select_slide(slide: number): void {
@@ -500,7 +496,7 @@ class Sequence {
 			void casparcg_connection.connection.cgInvoke({
 				/* eslint-disable @typescript-eslint/naming-convention */
 				channel: casparcg_connection.settings.channel,
-				layer: casparcg_connection.settings.layers.song[1],
+				layer: casparcg_connection.settings.layers[1],
 				cgLayer: 0,
 				method: `jump(${slide})`
 				/* eslint-enable @typescript-eslint/naming-convention */
@@ -509,54 +505,48 @@ class Sequence {
 	}
 
 	async set_visibility(visibility: boolean): Promise<void> {
-		for (const casparcg_connection of this.casparcg_connections) {
-			// clear the background-layer, so that the foreground has an hide-animation
-			await casparcg_connection.connection.clear({
-				channel: casparcg_connection.settings.channel,
-				layer: casparcg_connection.settings.layers.song[0]
-			});
+		this.casparcg_visibility = visibility;
 
-			const options = {
-				/* eslint-disable @typescript-eslint/naming-convention */
-				channel: casparcg_connection.settings.channel,
-				layer: casparcg_connection.settings.layers.song[1],
-				cgLayer: 0
-				/* eslint-enable @typescript-eslint/naming-convention */
-			};
-	
-			this.casparcg_visibility = visibility;
-	
+		for (const casparcg_connection of this.casparcg_connections) {
 			if (visibility) {
-				void casparcg_connection.connection.cgPlay(options);
+				// load the media-item. Since it is invisible, it will only be prepared
+				this.casparcg_load_item(casparcg_connection, true);
+
+				await casparcg_connection.connection.cgPlay({
+						/* eslint-disable @typescript-eslint/naming-convention */
+						channel:  casparcg_connection.settings.channel,
+						layer:  casparcg_connection.settings.layers[1],
+						cgLayer: 0
+						/* eslint-enable @typescript-eslint/naming-convention */
+					});
+
 			} else {
-				void casparcg_connection.connection.cgStop(options);
+				await Promise.allSettled([
+					// fade-out the media
+					casparcg_connection.connection.play({
+						/* eslint-disable @typescript-eslint/naming-convention */
+						channel:  casparcg_connection.settings.channel,
+						layer:  casparcg_connection.settings.layers[0],
+						clip: "EMPTY",
+						transition: this.casparcg_transition
+						/* eslint-enable @typescript-eslint/naming-convention */
+					}),
+	
+					// stop the template-layer
+					casparcg_connection.connection.cgStop({
+						/* eslint-disable @typescript-eslint/naming-convention */
+						channel:  casparcg_connection.settings.channel,
+						layer:  casparcg_connection.settings.layers[1],
+						cgLayer: 0
+						/* eslint-enable @typescript-eslint/naming-convention */
+					})
+				]);
 			}
 		}
 	}
 
 	async toggle_visibility(): Promise<boolean> {
-		this.casparcg_visibility = !this.visibility;
-
-		for (const casparcg_connection of this.casparcg_connections) {
-			await casparcg_connection.connection.clear({
-				channel: casparcg_connection.settings.channel,
-				layer: casparcg_connection.settings.layers.song[0]
-			});
-
-			const options = {
-				/* eslint-disable @typescript-eslint/naming-convention */
-				channel: casparcg_connection.settings.channel,
-				layer: casparcg_connection.settings.layers.song[1],
-				cgLayer: 0
-				/* eslint-enable @typescript-eslint/naming-convention */
-			};
-	
-			if (this.visibility) {
-				void casparcg_connection.connection.cgPlay(options);
-			} else {
-				void casparcg_connection.connection.cgStop(options);
-			}
-		}
+		await this.set_visibility(!this.visibility);
 
 		return this.visibility;
 	}
diff --git a/src/server/SequenceItems/CommandComment.ts b/src/server/SequenceItems/CommandComment.ts
index 1f0c67b..c9b3c3f 100644
--- a/src/server/SequenceItems/CommandComment.ts
+++ b/src/server/SequenceItems/CommandComment.ts
@@ -14,12 +14,10 @@ export interface ClientCommandCommentSlides extends ClientItemSlidesBase {
 export interface CommandCommentRenderObject extends ItemRenderObjectBase {
 	type: "CommandComment";
 	caspar_type: "template";
-	slides: [
-		{
-			template: string;
-			data?: object;
-		}
-	];
+	template: {
+		template: string;
+		data: object;
+	};
 }
 
 export default class CommandComment extends SequenceItemBase {
@@ -55,7 +53,11 @@ export default class CommandComment extends SequenceItemBase {
 				slides: [{
 					template: this.props.template,
 					data: this.props.data
-				}]
+				}],
+				template: {
+					template: this.props.template,
+					data: this.props.data
+				}
 			});
 		});
 	}
diff --git a/src/server/SequenceItems/Countdown.ts b/src/server/SequenceItems/Countdown.ts
index a5d5718..460d93e 100644
--- a/src/server/SequenceItems/Countdown.ts
+++ b/src/server/SequenceItems/Countdown.ts
@@ -1,7 +1,7 @@
 import path from "path";
 import { convert_color_to_hex } from "../Sequence";
 import Config from "../config";
-import { ClientItemSlidesBase, DeepPartial, FontFormat, ItemPropsBase, ItemRenderObjectBase, SequenceItemBase } from "./SequenceItem";
+import { ClientItemSlidesBase, DeepPartial, FontFormat, ItemPropsBase, ItemRenderObjectBase, ItemTemplateData, SequenceItemBase } from "./SequenceItem";
 
 const countdown_mode_items = ["duration", "end_time", "stopwatch", "clock"];
 type CountdownMode = (typeof countdown_mode_items)[number];
@@ -35,14 +35,20 @@ export interface ClientCountdownSlides extends ClientItemSlidesBase {
 	slides_template: CountdownRenderObject & { mute_transition: true; };
 }
 
-export interface CountdownRenderObject extends ItemRenderObjectBase {
-	type: "Countdown";
-	caspar_type: "template";
-	slides: [];
+export interface CountdownTemplateData extends ItemTemplateData {
 	position: CountdownPosition;
 	font_format: FontFormat;
 	time: string;
 	show_seconds: boolean;
+	mode: CountdownMode;
+}
+
+export interface CountdownRenderObject extends ItemRenderObjectBase {
+	type: "Countdown";
+	template: {
+		template: "JohnCG/Countdown",
+		data: CountdownTemplateData
+	}
 }
 
 // data from in the hex-string of the countdown, uses CSS-notation for easy translation in the renderer
@@ -135,15 +141,20 @@ export default class Countdown extends SequenceItemBase {
 
 	async create_render_object(proxy?: boolean): Promise<CountdownRenderObject> {
 		return {
-			caspar_type: "template",
 			type: "Countdown",
 			background_image: await this.get_background_image(proxy),
 			slide: 0,
 			slides: [],
+			template: {
+				template: "JohnCG/Countdown",
+				data: {
 			time: this.props.Time,
 			font_format: this.props.font_format,
 			position: this.props.position,
-			show_seconds: this.props.show_seconds
+					show_seconds: this.props.show_seconds,
+					mode: this.props.mode
+				}
+			}
 		};
 	}
 
diff --git a/src/server/SequenceItems/Image.ts b/src/server/SequenceItems/Image.ts
index 65cefe6..8569b27 100644
--- a/src/server/SequenceItems/Image.ts
+++ b/src/server/SequenceItems/Image.ts
@@ -14,6 +14,7 @@ export interface ImageRenderObject extends ItemRenderObjectBase {
 	caspar_type: "media";
 	file_name: string;
 	slides: [];
+	media: string;
 }
 
 export interface ClientImageSlides extends ClientItemSlidesBase {
@@ -58,6 +59,7 @@ export default class Image extends SequenceItemBase {
 			slide: 0,
 			slides: [],
 			file_name: this.props.FileName,
+			media: this.props.FileName,
 			background_image: await this.get_background_image(proxy)
 		};
 	}
diff --git a/src/server/SequenceItems/SequenceItem.ts b/src/server/SequenceItems/SequenceItem.ts
index a85c1bc..1a7eccc 100644
--- a/src/server/SequenceItems/SequenceItem.ts
+++ b/src/server/SequenceItems/SequenceItem.ts
@@ -1,6 +1,6 @@
 import { promises as fs } from "fs";
 import mime from "mime-types";
-import sharp from "sharp";
+import sharp, { AvifOptions, FormatEnum, GifOptions, HeifOptions, Jp2Options, JpegOptions, JxlOptions, OutputOptions, PngOptions, TiffOptions, WebpOptions } from "sharp";
 
 import Song, { ClientSongSlides, SongProps, SongRenderObject } from "./Song";
 import Countdown, { ClientCountdownSlides, CountdownProps, CountdownRenderObject } from "./Countdown";
@@ -31,13 +31,19 @@ export interface ItemPropsBase {
 
 export type ItemProps = SongProps | CountdownProps | CommentProps | ImageProps | CommandCommentProps;
 
-type CasparGeneratorType = "media" | "template";
+export interface ItemTemplateData {
+	mute_transition?: boolean;
+}
 
 // interface for a renderer-object
 export interface ItemRenderObjectBase {
-	caspar_type: CasparGeneratorType;
 	slides: Array<unknown>;
 	slide: number;
+	media?: string;
+	template?: {
+		template: string;
+		data: object;
+	};
 	background_image?: string;
 	background_color?: string;
 	mute_transition?: boolean;
@@ -102,40 +108,69 @@ export abstract class SequenceItemBase {
 	}
 
 	protected async load_background_images(image_path?: string, background_color?: string) {
-		let img_buffer: Buffer | undefined = undefined;
-		let img_buffer_proxy: Buffer | undefined = undefined;
+		let img: sharp.Sharp = undefined;
+		let img_proxy: sharp.Sharp = undefined;
 		
 		if (image_path !== undefined) {
 			try {
-				img_buffer = await fs.readFile(image_path);
+				img = sharp(await fs.readFile(image_path));
 
-				img_buffer_proxy = await sharp(img_buffer).resize(240).toBuffer();
+				img_proxy = img.clone().resize(240);
 			} catch (e) {
 				"";
 			}
 		}
 
 		// if the image_buffer is still undefined, try to use the backgroundColor
-		if (img_buffer === undefined && background_color !== undefined) {
-			img_buffer = await sharp({
+		if (img === undefined && background_color !== undefined) {
+			img = sharp({
 				create: {
 					width: 1,
 					height: 1,
 					channels: 4,
 					background: background_color
 				}
-			}).png().toBuffer();
+			}).png();
 			
 			// copy the the image to the proxy buffer, since only 1px anyway
-			img_buffer_proxy = img_buffer;
+			img_proxy = img;
 		}
 
-		if (img_buffer !== undefined && img_buffer_proxy !== undefined) {
+		if (img !== undefined && img_proxy !== undefined) {
 			this.item_props.BackgroundImage = {
 				// if there is no image-path, the mime-type is PNG, since we created them from the background-color
-				orig: `data:${mime.lookup(image_path ?? ".png")};base64,` + (img_buffer).toString("base64"),
-				proxy: `data:${mime.lookup(image_path ?? ".png")};base64,` + (img_buffer_proxy).toString("base64")
+				orig: `data:${mime.lookup(image_path ?? ".png")};base64,` + (await (img.toBuffer())).toString("base64"),
+				proxy: `data:${mime.lookup(image_path ?? ".png")};base64,` + (await (img_proxy.toBuffer())).toString("base64")
 			};
+
+			const sharp_formats: [keyof FormatEnum,
+            options?:
+                | OutputOptions
+                | JpegOptions
+                | PngOptions
+                | WebpOptions
+                | AvifOptions
+                | HeifOptions
+                | JxlOptions
+                | GifOptions
+                | Jp2Options
+                | TiffOptions
+			][]
+			= [
+				["webp", { lossless: true }],
+				["jpg", { quality: 100 }]
+			];
+
+			// check wether the base64-string is too long
+			while (this.item_props.BackgroundImage.orig.length > 2097152) {
+				const [format, options] = sharp_formats.shift();
+				this.item_props.BackgroundImage = {
+					// if there is no image-path, the mime-type is PNG, since we created them from the background-color
+					orig: `data:${mime.lookup(`.${format}`)};base64,` + (await (img.toFormat(format, options)).toBuffer()).toString("base64"),
+					proxy: `data:${mime.lookup(`.${format}`)};base64,` + (await (img_proxy.jpeg({ quality: 100 }).toBuffer())).toString("base64")
+				};
+			}
+		
 		} else {
 			this.item_props.BackgroundImage = { orig: "", proxy: "" };
 		}
diff --git a/src/server/SequenceItems/Song.ts b/src/server/SequenceItems/Song.ts
index 955e6c3..9b3bd92 100644
--- a/src/server/SequenceItems/Song.ts
+++ b/src/server/SequenceItems/Song.ts
@@ -1,4 +1,4 @@
-import { ClientItemSlidesBase, ItemPropsBase, ItemRenderObjectBase, SequenceItemBase } from "./SequenceItem";
+import { ClientItemSlidesBase, ItemPropsBase, ItemRenderObjectBase, ItemTemplateData, SequenceItemBase } from "./SequenceItem";
 import SongFile, { ItemPartClient, LyricPart, LyricPartClient, TitlePart } from "./SongFile";
 import path from "path";
 
@@ -24,11 +24,19 @@ export interface LyricSlide {
 
 export type ItemSlide = LyricSlide | TitleSlide;
 
+export interface SongTemplateData extends ItemTemplateData {
+	slides: ItemSlide[];
+	languages: number[];
+	slide: number;
+}
+
 export interface SongRenderObject extends ItemRenderObjectBase {
 	caspar_type: "template";
 	type: "Song";
-	slides: ItemSlide[];
-	languages: number[];
+	template: {
+		template: "JohnCG/Song",
+		data: SongTemplateData
+	}
 }
 
 export interface ClientSongSlides extends ClientItemSlidesBase {
@@ -116,12 +124,22 @@ export default class Song extends SequenceItemBase {
 		const return_object: SongRenderObject = {
 			type: "Song",
 			caspar_type: "template",
+			slide,
 			slides: [
 				this.song_file.part_title
 			],
-			slide,
+			background_image: await this.get_background_image(proxy),
+			template: {
+				template: "JohnCG/Song",
+				data: {
 			languages: this.languages,
-			background_image: await this.get_background_image(proxy)
+					slides: [
+						this.song_file.part_title
+					],
+					slide
+				}
+			},
+			media: this.song_file.metadata.BackgroundImage
 		};
 		
 		// add the individual parts to the output-object
@@ -139,10 +157,13 @@ export default class Song extends SequenceItemBase {
 			if (part !== undefined){
 				// add the individual slides of the part to the output object
 				for (const slide of part.slides) {
-					return_object.slides.push({
+					const slide_obj = {
 						type: part.type,
 						data: slide
-					});
+					};
+
+					return_object.slides.push(slide_obj);
+					return_object.template.data.slides.push(slide_obj);
 				}
 			}
 		}
diff --git a/src/server/config.ts b/src/server/config.ts
index c1ae1d6..a1916a5 100644
--- a/src/server/config.ts
+++ b/src/server/config.ts
@@ -2,10 +2,7 @@ export interface CasparCGConnectionSettings {
 	host: string;
 	port: number;
 	channel: number;
-	layers: {
-		song: [number, number];
-		command_comment: number;
-	};
+	layers: [number, number];
 }
 
 interface ConfigJSON {
@@ -18,6 +15,7 @@ interface ConfigJSON {
 	};
 	casparcg: {
 		templates: string;
+		transition_length: number;
 		connections: CasparCGConnectionSettings[];
 	};
 	client_server: {
diff --git a/src/templates/Countdown.ts b/src/templates/Countdown.ts
index 3e7bb13..be2067e 100644
--- a/src/templates/Countdown.ts
+++ b/src/templates/Countdown.ts
@@ -1,4 +1,4 @@
-import { CountdownRenderObject } from "../server/SequenceItems/Countdown";
+import { CountdownTemplateData } from "../server/SequenceItems/Countdown";
 
 let update_interval: NodeJS.Timeout;
 const spans: {
@@ -9,7 +9,7 @@ const spans: {
 	hours: [],
 	minutes: []
 };
-let data: CountdownRenderObject;
+let data: CountdownTemplateData;
 
 const end_time = new Date();
 
@@ -21,7 +21,7 @@ function update(str_args: string) {
 	// clear the old-state
 	clearInterval(update_interval);
 	
-	data = JSON.parse(str_args) as CountdownRenderObject;
+	data = JSON.parse(str_args) as CountdownTemplateData;
 	
 	// if requested, diable transition-effects
 	const main_div = document.querySelector<HTMLDivElement>("div#main");
@@ -97,15 +97,6 @@ function update(str_args: string) {
 		});
 	}
 
-	if (main_div !== null) {
-		if (data.background_image !== undefined) {
-			main_div.style.backgroundImage = `url("${data.background_image.replace(/\\/g, "\\\\")}")`;
-		} 
-		if (data.background_color !== undefined) {
-			main_div.style.backgroundImage = data.background_color;
-		}
-	}
-
 	if (data.time !== undefined) {
 		const time = data.time.match(/(?<hours>\d+)(?::)(?<minutes>\d\d)((?::)(?<seconds>\d\d))?/);
 
diff --git a/src/templates/Song.ts b/src/templates/Song.ts
index 651b367..10646a9 100644
--- a/src/templates/Song.ts
+++ b/src/templates/Song.ts
@@ -1,6 +1,6 @@
-import { ItemSlide, SongRenderObject } from "../server/SequenceItems/Song";
+import { ItemSlide, SongTemplateData } from "../server/SequenceItems/Song";
 
-let data: SongRenderObject;
+let data: SongTemplateData;
 
 let active_slide = 0;
 let slide_count = 0;
@@ -9,7 +9,7 @@ let slide_count = 0;
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 function update(s_data: string) {
 	// parse the transferred data into json
-	data = JSON.parse(s_data) as SongRenderObject;
+	data = JSON.parse(s_data) as SongTemplateData;
 
 	// get the div for the display and storage
 	const div_container = document.querySelector<HTMLDivElement>("div#container");
@@ -17,8 +17,6 @@ function update(s_data: string) {
 
 	if (div_container === null || div_storage === null) return;
 
-	div_container.style.backgroundImage = `url("${data.background_image}")`;
-
 	// if requested, diable transition-effects
 	const main_div = document.querySelector<HTMLDivElement>("div#_main");
 	if (main_div === null) return;
@@ -207,4 +205,4 @@ function resize_slides_text(max_width: number, container_width: number) {
 	document.querySelectorAll<HTMLDivElement>("div.slide.lyric").forEach((ele) => {
 		ele.style.fontSize = `${container_width / max_width}em`;
 	});
-}
\ No newline at end of file
+}