Merge branch 'dev'

.eslintignore

@@ -2,5 +2,6 @@ node_modules
 out
 dist
 casparcg-templates
+client
 license-generator.ts
 license-reporter.config.ts

.eslintrc

@@ -8,7 +8,8 @@
 		"project": [
 			"src/server/tsconfig.json",
 			"src/client/tsconfig.json",
-			"src/templates/tsconfig.json"
+			"src/templates/tsconfig.json",
+			"build/scripts/tsconfig.json"
 		]
 	},
 	"extends": [

.gitignore

@@ -4,4 +4,6 @@ dist
 client/*.js
 casparcg-templates/JohnCG/*.js
 *.map
-client/webfonts/bahnschrift.ttf
+client/webfonts/bahnschrift.ttf
+build/scripts/*.js
+build/scripts/3rdpartylicenses.json

README.md

@@ -8,7 +8,7 @@ Generate lyric-graphics and play them out through CasparCG.
 - move the file `song.html` into your CasparCG template directory
 
 ## roadmap
-- implement other sequence-items than song
+- implement other sequence-items than song (Missing: Video, Bible, Psalm, PowerPoint, PDF, Diashow / Multi-Image, Music)
 - client: information about connection (active / reconnecting / ...)
 - companion integration (buttons for song parts -> send name to casparcg)
 - try to get the template and client to use the settings file (CSS has default values, send song data overwrites them)
@@ -18,16 +18,11 @@ Generate lyric-graphics and play them out through CasparCG.
 - client communication with osc over websocket?
 - add support for NodeCG
 - add CLI output to server
-- CasparCG: split text and image in two layers: enables text without background
 - create dummy-sequence-items for unsupported ones
 - disable buttons, when no sequence is loaded
 - implement all countdown modes
 - countdown: save in server wether it is finished
-- add option to change template-directory
-- make sequence-comments another design in client
 - client-messages: create message-log, group same
 - build-script in node / integrate with license-generator
 - 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"
-- generate background-image-b64 only if needed
+- fix "Buffer() is deprecated"

build/scripts/build.ts

@@ -0,0 +1,119 @@
+import { execSync } from "child_process";
+import fs from "fs";
+import path from "path";
+import tar from "tar";
+
+import { ConfigJSON } from "../../src/server/config";
+
+// load the package.json
+const package_json = JSON.parse(fs.readFileSync("package.json", "utf-8")) as { version: string; dependencies: string[] };
+
+const build_name = "JohnCG_" + package_json.version;
+// temporary method until there is a solution for packaging sharp
+// const exec_name = build_name + ".exe";
+const exec_name = "node.exe";
+const build_dir = "dist/build";
+const release_dir = path.join("dist", build_name);
+
+// clear the build-directory
+fs.rmSync("dist", { recursive: true, force: true });
+fs.mkdirSync(build_dir, { recursive: true });
+fs.mkdirSync(path.join("dist", build_name), { recursive: true });
+
+const copy_build_file = (file: string, dest?: string) => fs.copyFileSync(file, path.join(build_dir, dest ?? path.basename(file)));
+// const copy_build_dir = (dir: string, dest?: string, args?: fs.CopySyncOptions) => fs.cpSync(dir, path.join(build_dir, dest ?? path.basename(dir)), { recursive: true, ...args });
+const copy_release_file = (file: string, dest?: string) => fs.copyFileSync(file, path.join(release_dir, dest ?? path.basename(file)));
+const copy_release_dir = (dir: string, dest?: string, args?: fs.CopySyncOptions) => fs.cpSync(dir, path.join(release_dir, dest ?? path.basename(dir)), { recursive: true, ...args });
+
+// bundle the different scripts
+execSync("npm run build-server");
+execSync("npm run build-client");
+execSync("npm run build-templates");
+
+// temporary method until there is a solution for packaging sharp
+// // create sea-prep.blob
+// execSync("node --experimental-sea-config sea-config.json");
+
+// get the node executable
+copy_build_file(process.execPath, exec_name);
+
+// temporary method until there is a solution for packaging sharp
+// // remove the signature from the node executable
+// execSync(`'C:\\Program Files (x86)\\Windows Kits\\10\\bin\\10.0.22621.0\\x64\\signtool.exe' remove /s dist/build/${exec_name}`);
+// // modify the node executable
+// execSync(`npx postject dist/build/${exec_name} NODE_SEA_BLOB dist/build/sea-prep.blob --sentinel-fuse NODE_SEA_FUSE_fce680ab2cc467b6e072b8b5df1996b2`);
+
+// load the config-file, censor the file-paths and store it for the relase
+const config_file = JSON.parse(fs.readFileSync("config.json", "utf-8")) as ConfigJSON;
+config_file.path = {
+	background_image: "C:/path/to/image/directory",
+	song: "D:/path/to/song/directory"
+};
+config_file.casparcg.templates = "e:/path/to/the/casparcg/templates/directory";
+fs.writeFileSync(path.join(release_dir, "config.json"), JSON.stringify(config_file, undefined, "\t"));
+
+// copy the file to the output
+copy_release_file(path.join(build_dir, exec_name));
+copy_release_file(path.join(build_dir, "main.js"));
+
+copy_release_dir("casparcg-templates", undefined, { filter: (src) => {
+	switch (true) {
+		case path.basename(src) === ".eslintrc":
+		case [".js", ".map"].includes(path.extname(src)):
+			return false;
+		default:
+			return true;
+	}
+} });
+copy_release_dir("client", undefined, { filter: (src) => {
+	switch (true) {
+		case [".eslintrc", "bahnschrift.ttf"].includes(path.basename(src)):
+		case [".js", ".map"].includes(path.extname(src)):
+			return false;
+		default:
+			return true;
+	}
+} });
+copy_release_dir("node_modules/@img", path.join(release_dir, "node_modules/@img/"));
+
+// temporary method until there is a solution for packaging sharp
+// create a batch file, that start node with the main.js
+fs.writeFileSync(path.join(release_dir, build_name + ".bat"), `${exec_name} main.js\npause`);
+
+// create and copy the licenses
+// void lr.cli(["--config=build/scripts/license-reporter.config.ts"]);
+try {
+	execSync("npx license-reporter --config build/scripts/license-reporter.config.ts");
+} catch (e) { /* empty */ }
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+interface License { name: string; licenseText: string }
+const licenses_orig = JSON.parse(fs.readFileSync("build/scripts/3rdpartylicenses.json", "utf-8")) as License[];
+
+const licenses: Record<string, License> = {};
+
+licenses_orig.forEach((pack) => {
+	licenses[pack.name] = pack;
+});
+
+fs.mkdirSync("dist/build/licenses");
+
+Object.keys(package_json.dependencies).forEach((pack) => {
+	const lic = licenses[pack];
+
+	try {
+		fs.writeFileSync(`dist/build/licenses/${lic.name}.txt`, lic.licenseText, "utf-8");
+	} catch (e) {
+		if (lic.licenseText === undefined) {
+			throw new EvalError(`ERROR: no license was found for the package '${lic.name}'`);
+		}
+	}
+});
+
+copy_release_file("LICENSE", "LICENSE.txt");
+
+// copy the licenses
+copy_release_dir(path.join(build_dir, "licenses"));
+
+// pack the files in a .tar.gz-file
+void tar.c({ gzip: true, file: release_dir + ".tar.gz", cwd: "dist" }, [path.relative("dist", release_dir)]);

license-reporter.config.ts → build/scripts/license-reporter.config.ts

@@ -2,7 +2,8 @@ import { IReporterConfiguration } from "@weichwarenprojekt/license-reporter";
 
 export const configuration: Partial<IReporterConfiguration> = {
 	// defaultLicenseText: undefined,
-    output: "dist/build/3rdpartylicenses.json",
+    output: "build/scripts/3rdpartylicenses.json",
+	ignore: ["dist/*"],
     overrides: [
         {
             name: "osc"

build/scripts/tsconfig.json

@@ -0,0 +1,7 @@
+{
+	"compilerOptions": {
+		"target": "ES2022",
+		"module": "NodeNext",
+		"removeComments": true
+	}
+}

casparcg-templates/JohnCG/Countdown.html

@@ -25,7 +25,7 @@
 		}
 
 		#time {
-			text-shadow: calc(1em / 16) calc(1em / 16) calc(1em / 8) black;
+			/* text-shadow: calc(1em / 16) calc(1em / 16) calc(1em / 8) black; */
 
 			position: absolute;
 
@@ -57,6 +57,13 @@
 
 			transition: opacity 0.5s;
 		}
+
+		#underline {
+			position: relative;
+			width:100%;
+			top: -0.25em;
+			border-bottom: 0.1em solid;
+		}
 	</style>
 	<!-- ------------------------------------------------------------------- -->
 	<head>

client/main.css

@@ -132,8 +132,6 @@ div.button, div.button > * {
 
 #sequence {
 	width: 24rem;
-
-	resize: horizontal;
 }
 
 .header {
@@ -174,6 +172,11 @@ div.button, div.button > * {
 	cursor: pointer;
 }
 
+.sequence_item_container:not(.selectable) {
+	color: rgb(154, 153, 150);
+	font-style: italic;
+}
+
 .sequence_item_container:first-of-type {
 	margin-top: 0.125rem;
 }
@@ -237,54 +240,60 @@ div.button, div.button > * {
 	position: relative;
 }
 
-.slide_container > div {
+.slide_container > img {
+	display: block;
+
+	height: 9rem;
+}
+
+.slide_container > object {
 	position: absolute;
 	top: 0;
 	left: 0;
+
+	justify-content: center;
+	align-items: center;
+	display: flex;
+	flex-direction: column;
+
 	width: 100%;
 	height: 100%;
+}
+
+.slide_container > div {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
 
 	cursor: pointer;
 }
 
 .slide {
-	justify-content: center;
-	align-items: center;
-	display: flex;
-	flex-direction: column;
-
-	width: 16rem;
-	height: 9rem;
-
 	border: 1px solid white;
 
 	border-radius: 0.125rem;
-
-	background-repeat: no-repeat;
-	background-position: center;
-	background-size: cover;
-
-	cursor: pointer;
 }
 
 .slide:hover {
 	border-width: 2px;
 
-	margin: -1px; /* difference in border width between selected and non-selected */
+	margin: -2px; /* difference in border width between selected and non-selected */
 }
 
 .slide.active {
 	border-color: red;
 	border-width: 2px;
 
-	margin: -1px; /* difference in border width between selected and non-selected */
+	margin: -2px; /* difference in border width between selected and non-selected */
 }
 
 .slide.active:hover {
 	border-color: red;
 	border-width: 4px;
 
-	margin: -3px; /* difference in border width between selected and non-selected */
+	margin: -4px; /* difference in border width between selected and non-selected */
 }
 
 .lyric_line {