Kick Fullscreen Chat

Twitch-style side-by-side fullscreen-with-chat for Kick.com.
Clean overlay button · Auto teardown · Zero network requests.

       

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 — drag well past the minimum and release to close the side chat in one gesture (the slot dims while the close is armed)
• 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-quality-saver, kick-third-party-emotes, kick-chat-utils, and kick-vod-resume userscripts' 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
• Console hook — a persisted KickFullscreenChat.debug() switch, and the running version as KickFullscreenChat.version
• No network requests and no GM_* permissions — the only persistence is a single localStorage key (kfc-settings) holding your UI preferences and that switch

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 extension (free, by Justin Wasack)

Installation

See INSTALL.md for step-by-step instructions.

Safari (recommended):

1. Install the Userscripts 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, Violentmonkey, Greasemonkey, ScriptCat 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 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
Drag the divider past the minimum width and release	Closes the side chat (slot dims while the close is armed; pull back above the threshold to cancel)
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, grouped into Chat (width presets, dock side left/right, default overlay opening, auto-open chat on fullscreen), Overlay (opacity, stream-info backdrop opacity, overlay auto-hide) and Controls (hide delay, userscript control auto-hide), plus resetting to defaults. Close it with the ✕, the gear, or a click outside
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

A couple of things are available from the browser console:

KickFullscreenChat.debug(true);     // persisted verbose logging (no argument toggles it)
KickFullscreenChat.version;         // the running version

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.
Side chat shows "We are sorry, but something went wrong. Please try again later." and stays stuck until a page reload	Update to 0.18.7+ — the script now detects Kick's chat error boundary fallback, tears the side layout down automatically, and shows a toast so you can click Chat to re-dock without reloading.
The settings panel opens on its own, or a setting changes by itself (often after switching back to the browser)	Update to 0.21.1+ — the faded-out control cluster is no longer clickable while it is still invisible, so a click meant for the player (such as the one that re-activates the window) can't land on the gear. Settings-panel controls also drop keyboard focus after a mouse click, so Space and the arrow keys go to the video instead of re-firing the last control you touched.
KickFullscreenChat.version reports an older version than your script manager shows	Update to 0.21.2+ — the version constant behind the console API had fallen out of sync with the metadata header, so a correctly updated 0.21.1 install answered "0.21.0". Only the reported string was wrong; the installed script was the right one.
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.