From 4ed8ceca8b5456da2b18c51ff14a21eb98d3c368 Mon Sep 17 00:00:00 2001 From: marcelhillesheim Date: Sun, 19 Jan 2025 11:55:54 +0100 Subject: [PATCH 1/5] FE: streaming: added tutorial --- .../src/i18n/locales/en/translation.json | 16 ++++ .../src/pages/home/streaming/index.tsx | 25 +++++- .../pages/home/streaming/stream-banner.tsx | 2 +- .../pages/home/streaming/stream-tutorial.tsx | 85 +++++++++++++++++++ 4 files changed, 126 insertions(+), 2 deletions(-) create mode 100644 rcongui_public/src/pages/home/streaming/stream-tutorial.tsx diff --git a/rcongui_public/src/i18n/locales/en/translation.json b/rcongui_public/src/i18n/locales/en/translation.json index cfefba89..80dbdf83 100644 --- a/rcongui_public/src/i18n/locales/en/translation.json +++ b/rcongui_public/src/i18n/locales/en/translation.json @@ -31,6 +31,22 @@ "weekday": "Weekday" }, "streaming": { + "streamerView": "Streamer View", + "tutorial": { + "title": "Tutorial", + "introduction": "This is a tool for people, who want to stream Hell Let Loose.", + "stepByStep": "Here is a step-by-step guide to integrate the scrolling banner into your stream:", + "openOBS": "open OBS", + "createSource": "Add source -> Browser -> Create", + "enterFollowingValues": "Enter the following values", + "url": "URL", + "width": "Width", + "height": "Height", + "customCSS": "Custom CSS", + "andSave": "and save", + "crop": "Crop by pressing ALT key and dragging sides of source", + "changeSettings": "Right click on source -> 'interact' to change settings" + }, "playerCount": "Player count", "cycleDuration": "Cycle Duration", "pauseWidth": "Pause width", diff --git a/rcongui_public/src/pages/home/streaming/index.tsx b/rcongui_public/src/pages/home/streaming/index.tsx index 1bf43cb2..33b3a95a 100644 --- a/rcongui_public/src/pages/home/streaming/index.tsx +++ b/rcongui_public/src/pages/home/streaming/index.tsx @@ -7,6 +7,15 @@ import {useTranslation} from "react-i18next"; import {useOutletContext} from "react-router"; import {GameLiveOutletContext} from "@/pages/home/layout"; import SelectBox from "@/components/ui/select-box"; +import { + Accordion, + AccordionContent, + AccordionItem, + AccordionTrigger +} from "@/components/ui/accordion"; +import {AccordionHeader} from "@radix-ui/react-accordion"; +import {GraduationCap} from "lucide-react"; +import StreamTutorial from "@/pages/home/streaming/stream-tutorial"; export default function Streaming() { const { t } = useTranslation('translation', {keyPrefix: 'streaming'}); @@ -31,7 +40,21 @@ export default function Streaming() { ); return
-
+

{t("streamerView")}

+ + + + + {t('tutorial.title')} + + + + + + + + {/*bg background necessary so the background stays within obs*/} +
{t('playerCount')} ({playerAmount}) diff --git a/rcongui_public/src/pages/home/streaming/stream-banner.tsx b/rcongui_public/src/pages/home/streaming/stream-banner.tsx index d11227fc..712e09d7 100644 --- a/rcongui_public/src/pages/home/streaming/stream-banner.tsx +++ b/rcongui_public/src/pages/home/streaming/stream-banner.tsx @@ -26,7 +26,7 @@ export default function StreamBanner({ playerAmount, settings }: StreamBannerPro .sort((a, b) => b.kills - a.kills) .slice(0, playerAmount); - return
+ return
diff --git a/rcongui_public/src/pages/home/streaming/stream-tutorial.tsx b/rcongui_public/src/pages/home/streaming/stream-tutorial.tsx new file mode 100644 index 00000000..fa503e1a --- /dev/null +++ b/rcongui_public/src/pages/home/streaming/stream-tutorial.tsx @@ -0,0 +1,85 @@ +import React from 'react'; +import { useTranslation } from "react-i18next"; +import { siObsstudio } from "simple-icons"; +import { SimpleIcon } from "@/components/simple-icon"; + +const StreamTutorial = () => { + const { t } = useTranslation('translation', { keyPrefix: 'streaming.tutorial' }); + + const cssExample = `body, main, .stream-banner { + background: transparent !important; + background-color: transparent; +}`; + + const steps = [ + { + id: 'obs', + content: t("openOBS"), + icon: + }, + { + id: 'source', + content: t("createSource") + }, + { + id: 'values', + content: t("enterFollowingValues"), + subContent: ( +
+

+ {t("url")}: + {window.location.href} +

+

+ {t("width")}: + 1000 +

+

+ {t("height")}: + 800 +

+

{t("customCSS")}:

+ 
+            {cssExample}
+
+

{t("andSave")}

+
+ ) + }, + { + id: 'crop', + content: t("crop") + }, + { + id: 'settings', + content: t("changeSettings") + } + ]; + + return ( +
+
+
+

{t("introduction")}

+

{t("stepByStep")}

+
+ +
    + {steps.map((step, index) => ( +
  1. +
    + {index + 1}. + {step.content} + {step.icon} +
    + {step.subContent} +
    2. + ))} +
+
+
+ ); +}; + +export default StreamTutorial; From 953fc6ebf03e95a00f58867d50149632ccb6665f Mon Sep 17 00:00:00 2001 From: marcelhillesheim Date: Sun, 19 Jan 2025 11:59:22 +0100 Subject: [PATCH 2/5] FE: streaming: added tutorial --- rcongui_public/src/pages/home/streaming/stream-tutorial.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/rcongui_public/src/pages/home/streaming/stream-tutorial.tsx b/rcongui_public/src/pages/home/streaming/stream-tutorial.tsx index fa503e1a..a10ba4fe 100644 --- a/rcongui_public/src/pages/home/streaming/stream-tutorial.tsx +++ b/rcongui_public/src/pages/home/streaming/stream-tutorial.tsx @@ -6,7 +6,7 @@ import { SimpleIcon } from "@/components/simple-icon"; const StreamTutorial = () => { const { t } = useTranslation('translation', { keyPrefix: 'streaming.tutorial' }); - const cssExample = `body, main, .stream-banner { + const cssValue = `body, main, .stream-banner { background: transparent !important; background-color: transparent; }`; @@ -41,7 +41,7 @@ const StreamTutorial = () => {

{t("customCSS")}:

-            {cssExample}
+            {cssValue}

{t("andSave")}

From eb79aced80d1ca3f8488e75cd0d9eb1f17afdddf Mon Sep 17 00:00:00 2001 From: marcelhillesheim Date: Sun, 19 Jan 2025 12:07:50 +0100 Subject: [PATCH 3/5] FE: streaming: changed css to optional --- rcongui_public/src/i18n/locales/en/translation.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/rcongui_public/src/i18n/locales/en/translation.json b/rcongui_public/src/i18n/locales/en/translation.json index 80dbdf83..986d9f4c 100644 --- a/rcongui_public/src/i18n/locales/en/translation.json +++ b/rcongui_public/src/i18n/locales/en/translation.json @@ -42,7 +42,7 @@ "url": "URL", "width": "Width", "height": "Height", - "customCSS": "Custom CSS", + "customCSS": "Custom CSS (optional)", "andSave": "and save", "crop": "Crop by pressing ALT key and dragging sides of source", "changeSettings": "Right click on source -> 'interact' to change settings" From 8001d6c0cecdc06941cec292013d7c8330c802fb Mon Sep 17 00:00:00 2001 From: marcelhillesheim Date: Sun, 19 Jan 2025 12:19:01 +0100 Subject: [PATCH 4/5] FE: streaming: variable colors --- .../src/pages/home/streaming/stream-banner.tsx | 6 +++--- .../pages/home/streaming/stream-tutorial.tsx | 17 ++++++++++++++--- 2 files changed, 17 insertions(+), 6 deletions(-) diff --git a/rcongui_public/src/pages/home/streaming/stream-banner.tsx b/rcongui_public/src/pages/home/streaming/stream-banner.tsx index 712e09d7..e60cdd42 100644 --- a/rcongui_public/src/pages/home/streaming/stream-banner.tsx +++ b/rcongui_public/src/pages/home/streaming/stream-banner.tsx @@ -40,12 +40,12 @@ interface StreamProps { const Stream = ({ players, settings }: StreamProps) => { return
-
+
{settings.text}
{players.map((player =>
-
+
{player.kills}
{settings.showAvatars && player.steaminfo?.profile?.avatar && @@ -56,7 +56,7 @@ const Stream = ({ players, settings }: StreamProps) => { } -
+
{player.player}
diff --git a/rcongui_public/src/pages/home/streaming/stream-tutorial.tsx b/rcongui_public/src/pages/home/streaming/stream-tutorial.tsx index a10ba4fe..e206a9de 100644 --- a/rcongui_public/src/pages/home/streaming/stream-tutorial.tsx +++ b/rcongui_public/src/pages/home/streaming/stream-tutorial.tsx @@ -6,9 +6,20 @@ import { SimpleIcon } from "@/components/simple-icon"; const StreamTutorial = () => { const { t } = useTranslation('translation', { keyPrefix: 'streaming.tutorial' }); - const cssValue = `body, main, .stream-banner { - background: transparent !important; - background-color: transparent; + const cssValue = `.stream-banner { + background-color: black !important; +} + +.steam-banner-text { + color: #ffa500 !important; +} + +.steam-banner-player { + color: #6a5acd !important; +} + +.steam-banner-kills { + color: red !important; }`; const steps = [ From 07d6ee0d5d6aa1f89e4fba099119eeff0346f09a Mon Sep 17 00:00:00 2001 From: marcelhillesheim Date: Mon, 20 Jan 2025 01:28:58 +0100 Subject: [PATCH 5/5] FE: streaming: MR: fixed typo, added classname and added tutorial info --- .../src/i18n/locales/en/translation.json | 1 + .../src/pages/home/streaming/stream-banner.tsx | 8 ++++---- .../src/pages/home/streaming/stream-tutorial.tsx | 15 +++++++++++---- 3 files changed, 16 insertions(+), 8 deletions(-) diff --git a/rcongui_public/src/i18n/locales/en/translation.json b/rcongui_public/src/i18n/locales/en/translation.json index 986d9f4c..a928c34e 100644 --- a/rcongui_public/src/i18n/locales/en/translation.json +++ b/rcongui_public/src/i18n/locales/en/translation.json @@ -43,6 +43,7 @@ "width": "Width", "height": "Height", "customCSS": "Custom CSS (optional)", + "adjustColors": "Adjust the css colors as you like either with hex values or color names.", "andSave": "and save", "crop": "Crop by pressing ALT key and dragging sides of source", "changeSettings": "Right click on source -> 'interact' to change settings" diff --git a/rcongui_public/src/pages/home/streaming/stream-banner.tsx b/rcongui_public/src/pages/home/streaming/stream-banner.tsx index e60cdd42..de248491 100644 --- a/rcongui_public/src/pages/home/streaming/stream-banner.tsx +++ b/rcongui_public/src/pages/home/streaming/stream-banner.tsx @@ -40,12 +40,12 @@ interface StreamProps { const Stream = ({ players, settings }: StreamProps) => { return
-
+
{settings.text}
{players.map((player =>
-
+
{player.kills}
{settings.showAvatars && player.steaminfo?.profile?.avatar && @@ -56,11 +56,11 @@ const Stream = ({ players, settings }: StreamProps) => { } -
+
{player.player}
- {settings.showWeapons &&
+ {settings.showWeapons &&
{ Object.entries(player.weapons) .sort(([n1, v1], [n2, v2]) => v2 - v1)[0]?.[0] diff --git a/rcongui_public/src/pages/home/streaming/stream-tutorial.tsx b/rcongui_public/src/pages/home/streaming/stream-tutorial.tsx index e206a9de..515e028c 100644 --- a/rcongui_public/src/pages/home/streaming/stream-tutorial.tsx +++ b/rcongui_public/src/pages/home/streaming/stream-tutorial.tsx @@ -10,16 +10,20 @@ const StreamTutorial = () => { background-color: black !important; } -.steam-banner-text { +.stream-banner-text { color: #ffa500 !important; } -.steam-banner-player { +.stream-banner-kills { + color: red !important; +} + +.stream-banner-player { color: #6a5acd !important; } -.steam-banner-kills { - color: red !important; +.stream-banner-weapon { + color: #6a5acd !important; }`; const steps = [ @@ -54,6 +58,9 @@ const StreamTutorial = () => { className="w-full p-4 bg-accent rounded-md font-mono text-sm text-gray-100 whitespace-pre overflow-x-auto"> {cssValue} +

+ {t("adjustColors")} +

{t("andSave")}

)