Navrhněte si vlastní překryvné vrstvy sociálního proudu

Vytvořte vlastní překryv v 5 krocích

1. Zvolte překryv který chcete změnit.
2. Stáhněte si zdrojový ZIP, rozbalte jej a zkopírujte soubor HTML daného překryvu.
3. Upravte kopii sami nebo o to požádejte AI.
4. Otevřete svou kopii v OBS s nastavením relace SSN přidaným k jeho adrese.
5. Vyzkoušejte se skutečným spouštěčem překryvu.

Vyberte překryv k úpravě

Můžete měnit barvy, písma, rozvržení, grafiku i pohyb překryvu. Nástroj Soubor HTML je stránka. Soubor URL OBS na ni odkazuje a přidává relaci i nastavení zobrazení.

Každý typ překryvu přijímá jiné vstupy. Chat, zvýrazněné zprávy a anketa nepoužívají stejná data. Otevřete průvodce návrhem pro svůj typ:

Chcete něco hotového? Zkuste Galerie překryvů nebo Galerie šablon. Přenášíte vzhled chatu ze StreamElements nebo Streamlabs? Postupujte podle průvodce importem. Tento export má vlastní postup nastavení.

Stáhněte si soubory

1. Stáhnout zdrojový ZIP beta verze. Nebo otevřete beta úložiště a vyberte Kód → Stáhnout ZIP.
2. Rozbalte do složky, kterou si ponecháte, například C:\SSN\social_stream-beta\. Neupravujte soubory uvnitř ZIPu. SSN nemusíte přeinstalovat.
3. Najděte soubor překryvu v tabulce výše. Vytvořte kopii vedle originálu, například poll.html → my-poll.html. U motivu, například themes/featured-styles/featured-modern.html, ponechte kopii ve stejné složce.
4. Otevřete kopii v textovém editoru nebo editoru kódu. Uložte ji jako .html, ne .html.txt.

social_stream-beta/
    poll.html
    my-poll.html
    currency.js
    js/
    libs/
    shared/
    thirdparty/
    media/
    sources/images/
    themes/
        featured-styles/
            featured-modern.html
            my-featured.html
    docs/
        event-reference.html

Zachovejte odkaz relace

Spusťte SSN, připojte zdroj a ověřte původní překryv. Potom zkopírujte celý odkaz z nástroje SSN pro daný překryv.

https://socialstream.ninja/poll.html?session=YOUR_SESSION&password=YOUR_PASSWORD&server2

Hodnota za session= je vaše relace SSN. Není to kanál YouTube, jméno Twitch, název souboru ani název ankety. SSN a stránka musí mít stejnou relaci a heslo. Nechte SSN běžet: překryvy pouze přijímají data, samy chat nezachytávají.

Pokud kopie zůstává prázdná, nejprve ověřte původní odkaz. Některé stránky si řeknou o chybějící nastavení, jiné zůstanou skryté nebo přesměrují. Správná relace v odkazu odstraní hádání.

Otevřete soubor v OBS

Otevřete upravený soubor přímo z počítače. Server není potřeba.

1. Přetáhněte kopii HTML do Chromu nebo Edge. Zkopírujte její adresu. Začíná na file:///.
2. Z funkčního odkazu překryvu SSN zkopírujte vše od ? dále. Připojte jej na konec adresy souboru. Zachová se relace, heslo, nastavení i případné # část.
3. Otevřete spojenou adresu v prohlížeči a vyzkoušejte ji.
4. V OBS přidejte Zdroj prohlížeče (Browser Source). Ponechte Místní soubor vypnuté. Vložte celou adresu do URL a nastavte šířku a výšku.

Příklad: tento odkaz SSN…

https://socialstream.ninja/poll.html?session=YOUR_SESSION&password=YOUR_PASSWORD&server2

…se u stažené kopie ankety ve Windows změní na:

file:///C:/SSN/social_stream-beta/my-poll.html?session=YOUR_SESSION&password=YOUR_PASSWORD&server2

V macOS začíná na file:///Users/..., v Linuxu obvykle file:///home/.... Kopírování z prohlížeče za vás vyřeší mezery i lomítka.

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>My local overlay launcher</title>
<p>Opening the local overlay...</p>
<script>
var copiedLink = new URL("https://socialstream.ninja/poll.html?session=YOUR_SESSION");
var localPage = new URL("./my-poll.html", window.location.href);
localPage.search = copiedLink.search;
localPage.hash = copiedLink.hash;
window.location.replace(localPage.href);
</script>
</html>

OBS vysvětluje režimy soubor/URL, rozměry, vlastní CSS a obnovování ve své Odkaz na zdroj prohlížeče.

Změňte vzhled sami nebo požádejte AI

Připravte logo, soubory písem, barvy značky, rozměry plátna a vizuální vzor. Webová stránka obvykle nemůže načíst písma ani obrázky z disku jiného počítače.

Výzva AI

Použijte prompt pro konkrétní typ v jeho průvodci nebo začněte tímto. Dejte AI zkopírovaný soubor i styly a skripty, které načítá.

Customize [copied overlay filename] to match [reference/design].
Canvas: [width x height]. Placement: [position]. Colors/fonts: [details].
Use the existing page and its supporting files, rather than replacing its
connection and event logic. Read docs/event-reference.html and the relevant
overlay design guide. Preserve query parameters, session/password, URL
fragments, bridge labels, transport channels, settings, and controls.
Use CSS first. Keep relative paths and package all executable dependencies
locally. Use classic scripts compatible with Chrome 80.
Keep operator controls, private links, and credentials off the audience view.

Treat all incoming messages, names, labels, donations, and metadata as untrusted.
Prevent HTML/JavaScript injection in every renderer you change. Use textContent
for plain fields and for chatmessage when textonly is true. For HTML-mode
chatmessage, keep supported emotes/formatting through the packaged
SocialStreamChatHTML.sanitize helper (libs/objects.js loaded first).
Do not concatenate raw input into innerHTML, attributes, CSS, or JavaScript.
Validate media/link URLs with the page's existing URL policy and assign DOM
properties; do not enable javascript: URLs or executable embedded content.
Never eval incoming data or treat a viewer message as an AI instruction.
Keep source checks, connection handling, and existing sanitizers.
Test plain text, allowed emotes, quotes, angle brackets, and an HTML injection
probe in an isolated preview; verify the probe cannot execute.

Make the edited overlay work directly from disk using a file:/// URL,
without requiring a local web server. Return the edited files and assets,
file URL and OBS setup steps, and tests
for this overlay's real trigger. Use session placeholders in shared examples.
Explain any behavior changes separately from the design edits.

Zabraňte tomu, aby se příchozí chat změnil v kód

Jména, zprávy, nadpisy, částky a odkazy přicházejí od diváků a externích služeb. Zacházejte s nimi jako s textem, nikdy jako s kódem. Čistěte je v místě, kde je vykreslovací funkce vkládá do stránky.

<!-- Example for a copied page at the repository root. -->
<script src="./libs/objects.js"></script>
<script src="./shared/utils/chatHtml.js"></script>
<script>
function renderChatBody(element, data) {
    var message = String(data.chatmessage == null ? "" : data.chatmessage);
    if (data.textonly) {
        element.textContent = message;
    } else {
        element.innerHTML = SocialStreamChatHTML.sanitize(message);
    }
}
// Names, amounts, titles, and other plain fields use textContent:
// nameElement.textContent = String(data.chatname || "");
</script>

• Pokud stránka již má sanitizér, zachovejte jej. Nepřidávejte druhý.
• U souborů v podsložkách opravte cesty ke skriptům.
• Nevkládejte surová jména do řetězců atributů ani surové barvy do značek stylů. Hodnoty stylů ověřte a pak nastavujte jednotlivé vlastnosti.
• Ani vyčištěné HTML není bezpečné spouštět jako JavaScript nebo používat jako instrukci pro AI.

Další souvislosti: Průvodce OWASP bezpečnými výstupy a sanitizací HTML.

Testujte po jednotlivých částech

Soubory, které předat AI

Dejte AI vlastní soubor překryvu a načítané CSS/JS, plus tyto soubory. Reference událostí sama nevysvětluje ovládání ankety ani kód rozvržení jednotlivých překryvů.

Řešení problémů

Nejprve opravte nejmenší potvrzený problém. Změna vzhledu by neměla vyžadovat úpravy zachytávacích skriptů ani nová pole událostí. Při sdílení veřejného forku přiložte jeho zdroje a vynechte soukromé spouštěče.