Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/jakubn11/kick-fullscreen-chat

Twitch-style side-by-side fullscreen + chat for Kick.com — single-file userscript, native styling, zero network.
https://github.com/jakubn11/kick-fullscreen-chat

browser-extension chat dom fullscreen gpl-v3 javascript kick kick-com kickcom livestream no-dependencies safari-userscripts single-file streaming tampermonkey userscript violentmonkey

Last synced: 21 days ago
JSON representation

Twitch-style side-by-side fullscreen + chat for Kick.com — single-file userscript, native styling, zero network.

Awesome Lists containing this project

README 

          



Kick Fullscreen Chat



Kick Fullscreen Chat





  Twitch-style side-by-side fullscreen-with-chat for Kick.com.


  Clean overlay button · Auto teardown · Zero network requests.






  Userscript

   

  License GPLv3

   

  Tested on Safari

   

  No network

   

  Single file







## Features



- Adds a **Chat** toggle button in the top-right of the fullscreen Kick player

- Twitch-style streamer info overlay (avatar / name / title / game / viewer count) in the top-left of the fullscreen player, fading in and out with Kick's own controls/timeline; overlay text is selectable and profile/category links remain clickable

- Click the button to shrink the video and dock the chat panel on the right (340px wide by default)

- **Resizable chat:** drag the divider between the video and chat to set the panel width

- **Dock left or right:** a setting moves the chat panel (and divider) to either edge; the video, controls, and stream-info overlay shift to clear it

- **Overlay mode:** a layout toggle switches between side-by-side (video shrinks) and chat floating semi-transparently over the full-width video, Twitch-style

- **Show/hide stream info:** a toggle hides or shows the streamer-info overlay for a cleaner picture

- **Fullscreen settings:** a gear button opens controls for overlay opacity, stream-info backdrop opacity, width presets, hide delay, chat dock side, userscript control auto-hide, overlay auto-hide, default overlay opening, auto-opening chat on fullscreen entry, and resetting to defaults

- **Settings persist:** preferences are saved to `localStorage` and restored on the next page load (no network, no `GM_*` grants)

- A clean dark glass control set with green icon accents, matching the sibling [kick-emotes](https://github.com/jakubn11/kick-emotes) userscript's design language

- Hides itself when chat is open — Kick's native **Hide chat** button inside the chat panel takes over

- Auto-fades after a configurable delay of mouse inactivity (2–8s, default 4s), kept in sync with Kick's own controls/timeline; reappears instantly on mouse movement

- Auto-teardown: clicking Kick's native **Hide chat** restores fullscreen video and re-shows the **Chat** button so chat can be re-opened

- Disables the **Chat** button while the player is reloading (quality change, seek, "go to live") with a short grace period after the video reports ready, so a click can never land mid-reload and trigger Kick's 404 page

- Leaves Kick's player nodes parented to the fullscreen element and shrinks them with a CSS marker, so background React refreshes (e.g. while the stream plays on a background macOS Space) can reconcile without 404-ing the page

- Forces a containing block on the marked player layers so Kick's `position: fixed` video and timeline / controls stay inside the shrunken video area instead of overlapping the chat

- Restores the original DOM on exit — chat returns to its original location, no leftover wrappers

- No network requests and no `GM_*` permissions — the only persistence is a single `localStorage` key (`kfc-settings`) holding your UI preferences



## Requirements



The script works with any userscript manager (Tampermonkey, Violentmonkey, Greasemonkey, ScriptCat or other) but is developed and tested on **Safari + Userscripts** only. Other browsers and managers may work but are untested.



**Recommended setup:**

- macOS with Safari

- [Userscripts](https://apps.apple.com/app/userscripts/id1463298887) extension (free, by Justin Wasack)



## Installation



See [INSTALL.md](INSTALL.md) for step-by-step instructions.



**Safari (recommended):**

1. Install the **[Userscripts](https://apps.apple.com/app/userscripts/id1463298887)** extension from the Mac App Store

2. Configure a scripts folder in the extension settings

3. Copy `kick-fullscreen-chat.user.js` into that folder



**Other browsers (untested):**

1. Install [Tampermonkey](https://www.tampermonkey.net), [Violentmonkey](https://violentmonkey.github.io), [Greasemonkey](https://www.greasespot.net), [ScriptCat](https://scriptcat.org) or other

2. Open `kick-fullscreen-chat.user.js` and paste it into a new script, or drag the file into the extension dashboard



**Updates:** The script carries `@updateURL` / `@downloadURL` pointing at this repo, so managers that support remote updates (Tampermonkey, Violentmonkey, ScriptCat, …) pick up new versions automatically — no reinstall needed. Safari's Userscripts extension runs from a local folder and does **not** auto-update; re-copy the latest `kick-fullscreen-chat.user.js` to update there.



See [INSTALL.md](INSTALL.md) for full per-manager steps.



## Usage



Open any Kick channel and enter fullscreen with the player's fullscreen icon. The **Chat** button appears in the top-right corner.



| Action | Result |

|--------|--------|

| Click **Chat** | Video shrinks to the left, chat panel docks on the right (340px) |

| Drag the divider between video and chat | Resizes the chat panel (260–640px, capped at 60% of the screen); width is saved and restored on the next visit |

| Double-click the divider | Resets chat width to 340px |

| Click the layout-mode toggle (top-right, while chat is open) | Switches between side-by-side and overlay (chat floats over the video) |

| Click the info toggle (top-right) | Hides or shows the streamer-info overlay |

| Click the settings gear (top-right) | Opens fullscreen settings for overlay opacity, stream-info backdrop opacity, width presets, hide delay, chat dock side (left/right), userscript control auto-hide, overlay auto-hide, default overlay opening, auto-open chat on fullscreen, and resetting to defaults |

| Click Kick's native **Hide chat** inside the chat panel | Split layout tears down, fullscreen video restored, **Chat** button reappears |

| Change stream quality / seek / "Go to live" | Side chat tears down automatically; **Chat** button is disabled until the player finishes reloading |

| Exit fullscreen | DOM restored to its original state — chat returns to its original location |



## Troubleshooting



| Symptom | Fix |

|---------|-----|

| Button never appears in fullscreen | Open DevTools → Console and look for `[KickFullscreenChat]` log lines. If absent, check that the userscript is enabled for `kick.com` and that `@match https://kick.com/*` is present in the metadata block. |

| Button appears, clicking it does nothing | The chat selector did not match Kick's current DOM. You will see `chat container not found` in the console. Inspect the chat panel in DevTools and add its selector to `CHAT_SELECTORS` near the top of the userscript. |

| Re-opening chat shows an empty dark panel | Update to **0.5.0+** — the script now sets `data-chat="true"` before moving the chat, which prevents Kick's CSS from hiding the moved chat. |

| Timeline shrinks but video still sits behind chat | Update to **0.9.6+** — the script now constrains both direct video layers and Kick's inner video wrapper chain. |

| Stream becomes blurred/loading and controls cannot be clicked after sitting in the background | Update to **0.9.7+** — the script avoids marking Kick's transient loading overlays and lets clicks pass through the video surface to the controls. |

| Emote-name tooltips don't appear when hovering chat emotes in fullscreen | Update to **0.9.8+** — the script now reparents Kick's body-portaled popovers into the fullscreen element while side chat is active, so the Fullscreen API can display them. |

| Double-clicking the video to exit fullscreen does nothing while side chat is open | Update to **0.9.9+** — the script attaches its own dblclick → exit-fullscreen handler on the fullscreen element while side chat is active, since the side-chat layout sets `pointer-events: none` on the video and blocks Kick's native double-click handler. |

| Streamer info overlay doesn't appear in fullscreen | The streamer-card selector did not match Kick's current DOM. Inspect the channel-info card in DevTools and add its selector to `STREAMER_INFO_SELECTORS` near the top of the userscript. |

| Video doesn't fill the left side / timeline overlaps chat | Update to **0.6.0+** — the video slot now creates a containing block for Kick's `position: fixed` player layers. |

| Changing stream quality navigates Kick to a 404 page | Update to **0.7.0+** — the script tears the side-chat layout down at the first sign of a player reload to avoid React reconciliation conflicts. |

| Clicking **Chat** right after a quality change / seek still 404s | Update to **0.8.3+** — the **Chat** button is now disabled while the player is reloading and stays disabled for a short grace period after the video reports ready. |

| Kick 404s after the side chat sits open in fullscreen for a while (background tab / virtual screen) | Update to **0.9.2+** — the script no longer wraps Kick's player nodes in its own slot, so background React refreshes can reconcile without throwing into Kick's error boundary. |

| Layout breaks after a Kick update | Kick may have changed the chat container class or the `data-chat` attribute. Open an issue with the relevant class names from the browser inspector. |



## License



Licensed under the GNU General Public License v3.0. See [LICENSE](LICENSE).