From ce53a0b44db785bab7774e4851f4c8ca83a42634 Mon Sep 17 00:00:00 2001 From: Simon Ziegler Date: Sun, 3 Mar 2024 22:29:38 +0100 Subject: [PATCH 01/56] improved client slide-layout --- README.md | 3 ++- client/main.css | 48 ++++++++++++++++++++++++++++++++---------- src/client/main.ts | 2 +- src/server/Sequence.ts | 6 +++--- 4 files changed, 43 insertions(+), 16 deletions(-) diff --git a/README.md b/README.md index 4fa3fe4..b54336c 100644 --- a/README.md +++ b/README.md @@ -27,4 +27,5 @@ 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 - fix "Buffer() is deprecated" - catch songfile not found -- catch casparcg not running \ No newline at end of file +- catch casparcg not running +- create sequence-summarys or lyrics-sheets through pandoc \ No newline at end of file diff --git a/client/main.css b/client/main.css index c529d97..bd6b850 100644 --- a/client/main.css +++ b/client/main.css @@ -221,6 +221,13 @@ div.button, div.button > * { .slide_part { border-radius: inherit; + border-color: transparent; + + display: inline-block; + + margin-inline-end: 0.5rem; + + overflow: visible; } .slides_view { @@ -229,7 +236,12 @@ div.button, div.button > * { align-items: center; - padding: 0.5rem; + overflow: visible; + + padding-top: 0.5rem; + padding-bottom: 1rem; + + padding-left: 0.1875rem; } .slide_container { @@ -240,10 +252,19 @@ div.button, div.button > * { position: relative; } +.slide_container > img,div { + border: 0.0625rem solid transparent; + border-radius: 0.125rem; +} + .slide_container > img { display: block; - height: 9rem; + height: 12rem; + + border-width: inherit; + border-color: transparent; + border-style: solid; } .slide_container > object { @@ -271,29 +292,34 @@ div.button, div.button > * { } .slide { - border: 1px solid white; - - border-radius: 0.125rem; + border-color: white; } .slide:hover { - border-width: 2px; + border-width: 0.125rem; + border-radius: 0.1875rem; - margin: -2px; /* difference in border width between selected and non-selected */ + margin: -0.0625rem; /* difference in border width between selected and non-selected */ + + z-index: 20; } .slide.active { border-color: red; - border-width: 2px; + border-width: 0.125rem; + border-radius: 0.1875rem; + + z-index: 10; - margin: -2px; /* difference in border width between selected and non-selected */ + margin: -0.0625rem; /* difference in border width between selected and non-selected */ } .slide.active:hover { border-color: red; - border-width: 4px; + border-width: 0.25rem; + border-radius: 0.3125rem; - margin: -4px; /* difference in border width between selected and non-selected */ + margin: -0.1875rem; /* difference in border width between selected and non-selected */ } .lyric_line { diff --git a/src/client/main.ts b/src/client/main.ts index 17599a2..e7cdaa2 100644 --- a/src/client/main.ts +++ b/src/client/main.ts @@ -440,7 +440,7 @@ function set_active_slide(scroll: boolean = false) { // if we requested this, scroll there if (scroll) { - selected_item_slide?.parentElement?.scrollIntoView({ behavior: "smooth", block: "nearest" }); + selected_item_slide?.parentElement?.scrollIntoView({ behavior: "smooth", block: "center" }); } } } diff --git a/src/server/Sequence.ts b/src/server/Sequence.ts index a668404..076d90e 100644 --- a/src/server/Sequence.ts +++ b/src/server/Sequence.ts @@ -459,7 +459,7 @@ class Sequence { private casparcg_select_slide(slide: number): void { this.casparcg_connections.forEach((casparcg_connection) => { // if the item has multiple media-files, load the new one - if (this.active_sequence_item.props.media.length > 1) { + if (this.active_sequence_item.props.media?.length > 1) { void this.casparcg_load_media(casparcg_connection); } @@ -557,9 +557,9 @@ class Sequence { // parse an individual sequence-item-value function parse_item_value_string(key: string, value: string): { [P in keyof ItemProps]?: ItemProps[P]; } { // remove line-breaks - value = value.replace(/'\s\+\s+'/gm, ""); + value = value.replace(/'?\s\+\s+'?/gm, ""); // un-escape escaped characters - value = value.replace(/'((?:#(?:\d+))+)'/gm, (match, group: string) => { + value = value.replace(/'?((?:#(?:\d+))+)'?/gm, (match, group: string) => { const chars = group.split("#").slice(1); let return_string = ""; From 592252b1dc2173ff165410350ec4e55430a16276 Mon Sep 17 00:00:00 2001 From: Simon Ziegler Date: Mon, 4 Mar 2024 14:33:19 +0100 Subject: [PATCH 02/56] add-song-window prototype --- .eslintignore | 4 +- .eslintrc | 3 +- client/main.css | 133 ++ client/main.html | 39 +- prototyping/main.js | 3913 +++++++++++++++++++++++++++++++++++++ prototyping/main.ts | 53 + prototyping/tsconfig.json | 7 + src/client/main.ts | 17 + 8 files changed, 4160 insertions(+), 9 deletions(-) create mode 100644 prototyping/main.js create mode 100644 prototyping/main.ts create mode 100644 prototyping/tsconfig.json diff --git a/.eslintignore b/.eslintignore index b45f885..dd16a11 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1,7 +1,9 @@ node_modules out dist +build casparcg-templates client license-generator.ts -license-reporter.config.ts \ No newline at end of file +license-reporter.config.ts +prototyping \ No newline at end of file diff --git a/.eslintrc b/.eslintrc index 9705965..fcc3430 100644 --- a/.eslintrc +++ b/.eslintrc @@ -9,7 +9,8 @@ "src/server/tsconfig.json", "src/client/tsconfig.json", "src/templates/tsconfig.json", - "build/scripts/tsconfig.json" + "build/scripts/tsconfig.json", + "prototyping/tsconfig.json" ] }, "extends": [ diff --git a/client/main.css b/client/main.css index a28c256..2711c6d 100644 --- a/client/main.css +++ b/client/main.css @@ -7,6 +7,10 @@ overflow: hidden; } +input[type="button"] { + cursor: pointer; +} + body { background-color: rgb(31, 33, 42); @@ -38,7 +42,9 @@ div.button { flex-direction: column; padding: 0.5rem; +} +div.button.square { aspect-ratio: 1; max-height: 100%; } @@ -402,3 +408,130 @@ div.button, div.button > * { margin-left: auto; margin-right: 0.5rem; } + + +/* Windows */ +.window > .header { + display: flex; + + background-color: rgb(40, 76, 184); + + font-weight: bold; + + border-radius: inherit; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + + padding: 0.5rem; + padding-left: 0.75rem; +} + +div.window_button { + align-items: center; + justify-content: center; + flex-direction: column; + + /* padding: 0.125rem; */ + + overflow: visible; + + display: inline-block; + + aspect-ratio: 1; + max-height: 100%; +} + +div.window_button:hover { + background-color: rgb(79, 83, 94); +} + +div.window_button.active { + background-color: rgb(40, 76, 184); +} + +div.window_button.active:hover { + background-color: rgb(54, 92, 192); +} + +div.window_button { + cursor: pointer; +} + +div.window_button > * { + overflow: visible; +} + +div.window_button.close { + margin-left: auto; +} + +/* add_song */ +#song_selector { + cursor: not-allowed; + + display: none; + + position: fixed; + height: 100%; + width: 100%; + top: 0; + left: 0; +} + +#song_selector.visible { + + display: flex; + justify-content: center; + align-items: center; +} + +#song_selector.visible.blur_background { + transition: backdrop-filter, background-color 0.2s ease-out; + backdrop-filter: blur(0.5rem); + + background-color: rgb(31, 33, 42, 0.75); +} + +#song_selector_container { + cursor: auto; + + display: flex; + flex-direction: column; + + width: 50%; + height: 50%; + + background-color: rgb(43, 46, 56); + + border-radius: 0.25rem; +} + +#song_selector_container > .content { + padding: 0.5rem; + + display: flex; + flex-direction: column; + flex: 1; +} + +#add_song_content { + display: flex; + flex: 1; +} + +#add_song_results { + width: 30%; + flex: 1; +} + +#add_song_preview { + flex: 1; +} + +#add_song_buttons { + display: flex; +} + +#add_song_buttons > * { + margin: 0.25rem; +} \ No newline at end of file diff --git a/client/main.html b/client/main.html index 5a453d7..b25b9de 100644 --- a/client/main.html +++ b/client/main.html @@ -17,27 +17,31 @@
-