<?xml version="1.0" encoding="UTF-8"?><rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" version="2.0"><channel><title><![CDATA[NoSub Blog]]></title><description><![CDATA[NoSub Blog]]></description><link>https://nosub.hashnode.dev</link><image><url>https://cdn.hashnode.com/uploads/logos/6a4e46c328cb7d46a5aea606/8f86af49-1b6d-4a9b-ae1a-86ab0c940c57.png</url><title>NoSub Blog</title><link>https://nosub.hashnode.dev</link></image><generator>RSS for Node</generator><lastBuildDate>Tue, 08 Sep 2026 05:22:46 GMT</lastBuildDate><atom:link href="https://nosub.hashnode.dev/rss.xml" rel="self" type="application/rss+xml"/><language><![CDATA[en]]></language><ttl>60</ttl><item><title><![CDATA[Keeping Replay Chat in Sync with Long Twitch and Kick VODs]]></title><description><![CDATA[Keeping Replay Chat in Sync with Long Twitch and Kick VODs
A replay is not just a video file.
For livestreams, chat is part of the story. It explains why people react, why a moment becomes funny, why ]]></description><link>https://nosub.hashnode.dev/keeping-replay-chat-in-sync-with-long-twitch-and-kick-vods</link><guid isPermaLink="true">https://nosub.hashnode.dev/keeping-replay-chat-in-sync-with-long-twitch-and-kick-vods</guid><category><![CDATA[webdev]]></category><category><![CDATA[JavaScript]]></category><category><![CDATA[Python]]></category><category><![CDATA[Flask Framework]]></category><category><![CDATA[video streaming]]></category><dc:creator><![CDATA[NoSub App]]></dc:creator><pubDate>Thu, 09 Jul 2026 22:20:57 GMT</pubDate><enclosure url="https://cdn.hashnode.com/uploads/covers/6a4e46c328cb7d46a5aea606/352d48f6-aa51-44b9-8c62-2b28b809cb24.png" length="0" type="image/jpeg"/><content:encoded><![CDATA[<h1>Keeping Replay Chat in Sync with Long Twitch and Kick VODs</h1>
<p>A replay is not just a video file.</p>
<p>For livestreams, chat is part of the story. It explains why people react, why a moment becomes funny, why the streamer changes direction, or why a small event suddenly becomes memorable.</p>
<p>That is why I built chat replay into NoSub, my browser-based VOD player for Twitch and Kick.</p>
<p>The basic idea sounds simple: show messages next to a VOD.</p>
<p>The real problem is making those messages appear at the right moment, especially when a broadcast lasts several hours.</p>
<h2>Chat replay is not a live chat</h2>
<p>A replay chat should not behave like a normal chat room.</p>
<p>When someone opens a VOD at 2 hours and 14 minutes, they do not need the first messages from the stream. They need the messages posted around 2:14:00.</p>
<p>That means the chat needs to follow the video timeline.</p>
<p>In NoSub, every available chat message is associated with a timestamp. The player compares those timestamps with the current VOD time and displays the messages that belong to that part of the replay.</p>
<p>When the viewer pauses, the context pauses.</p>
<p>When the viewer seeks forward, the chat jumps forward too.</p>
<p>When the viewer goes back to rewatch a moment, the messages return to the same part of the conversation.</p>
<p>This sounds obvious from the user side, but it changes how the feature has to be designed.</p>
<h2>Seeking is the first difficult problem</h2>
<p>A live chat only moves forward.</p>
<p>A replay player needs to support:</p>
<ul>
<li><p>jumping backward</p>
</li>
<li><p>jumping forward</p>
</li>
<li><p>resuming after a pause</p>
</li>
<li><p>returning to a bookmark</p>
</li>
<li><p>switching to a different available quality</p>
</li>
<li><p>opening a long VOD at a specific time</p>
</li>
</ul>
<p>The chat cannot simply append messages forever. It needs to know where the viewer is in the recording and render the relevant window of messages.</p>
<p>That is why I treat the video timeline as the source of truth.</p>
<p>The current playback time decides which chat messages should be visible, not the time when the user opened the page.</p>
<p>This is especially important for long VODs. A viewer might spend an hour pausing, seeking, or changing quality. The chat should still match the video, not drift because of real-world clock time.</p>
<h2>Long broadcasts expose imperfect data</h2>
<p>The player can synchronize data only when the platform provides it.</p>
<p>For some Twitch or Kick replays, chat archives may be incomplete. Messages can be missing, timestamps can contain gaps, and a source can disappear after the original stream.</p>
<p>NoSub does not invent chat messages or store a separate copy of a stream.</p>
<p>Instead, it uses the chat data and video sources that are still available from the platform. If an archive has a gap, the video can still play, but the missing context remains missing.</p>
<p>Being clear about this is important. A reliable product should explain what it can do and what depends on the original source.</p>
<h2>Why video quality should not affect chat timing</h2>
<p>A VOD can expose several qualities, sometimes including 60 FPS variants.</p>
<p>Changing quality should improve playback for the viewer, but it should not change chat timing. The chat is tied to the VOD timeline, not to the selected rendition.</p>
<p>As long as the playback time remains the same, the related messages should remain the same too.</p>
<p>This also makes the feature easier to reason about:</p>
<ol>
<li><p>The player reports its current time.</p>
</li>
<li><p>The chat finds messages around that time.</p>
</li>
<li><p>The interface updates the visible conversation.</p>
</li>
<li><p>Seeking triggers the same process at a different point.</p>
</li>
</ol>
<h2>What I am still testing</h2>
<p>The most valuable tests are real, long broadcasts.</p>
<p>Short VODs can make synchronization look solved very quickly. A four-hour replay is more honest: it reveals gaps in source data, edge cases around seeking, loading behavior, and how the interface feels when the viewer returns later.</p>
<p>I am continuing to test:</p>
<ul>
<li><p>chat behavior after repeated seeks</p>
</li>
<li><p>long VOD timestamp accuracy</p>
</li>
<li><p>empty or incomplete chat archives</p>
</li>
<li><p>mobile playback and fullscreen behavior</p>
</li>
<li><p>the relationship between clips and their matching chat period</p>
</li>
</ul>
<h2>The useful part for viewers</h2>
<p>The goal is not to rebuild Twitch or Kick.</p>
<p>It is to make a replay feel less disconnected from the original live stream. Video explains what happened; chat explains why it mattered.</p>
<p>You can read the dedicated guides here:</p>
<ul>
<li><p><a href="https://nosubapp.com/chat-replay-guide">How VOD chat replay works</a></p>
</li>
<li><p><a href="https://nosubapp.com/twitch-vod-guide">How to watch Twitch VODs with chat replay</a></p>
</li>
<li><p><a href="https://nosubapp.com/kick-replay-guide">How to watch Kick replays with chat</a></p>
</li>
</ul>
<p>NoSub is available at <a href="https://nosubapp.com">nosubapp.com</a>.</p>
<p>I would be curious to hear how other developers approach timestamp alignment when the source data is incomplete or comes from multiple services.</p>
]]></content:encoded></item><item><title><![CDATA[Building NoSub: a browser-based VOD player for Twitch and Kick]]></title><description><![CDATA[I recently built NoSub, a browser-based VOD player for Twitch and Kick.
The original idea was simple: paste a Twitch or Kick VOD link and watch the replay in a cleaner player. But as the project grew,]]></description><link>https://nosub.hashnode.dev/building-nosub-a-browser-based-vod-player-for-twitch-and-kick</link><guid isPermaLink="true">https://nosub.hashnode.dev/building-nosub-a-browser-based-vod-player-for-twitch-and-kick</guid><category><![CDATA[webdev]]></category><category><![CDATA[Python]]></category><category><![CDATA[Flask Framework]]></category><category><![CDATA[JavaScript]]></category><category><![CDATA[video]]></category><category><![CDATA[video streaming]]></category><dc:creator><![CDATA[NoSub App]]></dc:creator><pubDate>Wed, 08 Jul 2026 12:53:27 GMT</pubDate><enclosure url="https://cdn.hashnode.com/uploads/covers/6a4e46c328cb7d46a5aea606/fbcecb01-d57a-43db-82df-fb003100a0cb.png" length="0" type="image/jpeg"/><content:encoded><![CDATA[<p>I recently built <strong>NoSub</strong>, a browser-based VOD player for Twitch and Kick.</p>
<p>The original idea was simple: paste a Twitch or Kick VOD link and watch the replay in a cleaner player. But as the project grew, it became much more interesting: synced chat replay, clip creation, streamer search, source quality selection, multilingual SEO pages, and safe ad integration.</p>
<p>NoSub does not host VODs and does not recover deleted or expired replays. It only works when the replay source is still available.</p>
<h2>Why I built it</h2>
<p>Watching old streams often feels incomplete.</p>
<p>Most replay tools focus only on the video. But for livestreams, chat is part of the experience. Without chat replay, old streams feel quiet and disconnected from what made them fun live.</p>
<p>I wanted to build a browser-based player that makes VODs feel more alive again.</p>
<h2>What NoSub does</h2>
<p>NoSub currently supports:</p>
<ul>
<li><p>Twitch and Kick VOD playback</p>
</li>
<li><p>synced chat replay when available</p>
</li>
<li><p>streamer search</p>
</li>
<li><p>streamer profile pages</p>
</li>
<li><p>clip creation from VODs</p>
</li>
<li><p>source quality selection when available</p>
</li>
<li><p>multilingual landing pages for SEO</p>
</li>
<li><p>a custom browser video player</p>
</li>
</ul>
<p>The goal is not to replace Twitch or Kick. The goal is to make replays easier to watch, review, and clip.</p>
<h2>The hardest part: video playback</h2>
<p>The first big challenge was video playback.</p>
<p>A video source existing is not enough. The user still needs:</p>
<ul>
<li><p>loading states</p>
</li>
<li><p>quality selection</p>
</li>
<li><p>buffering feedback</p>
</li>
<li><p>error handling</p>
</li>
<li><p>fallback behavior</p>
</li>
<li><p>mobile controls</p>
</li>
<li><p>fullscreen and theater modes</p>
</li>
</ul>
<p>HLS playback can get messy quickly, especially when different platforms expose streams in different ways.</p>
<h2>Synced chat replay</h2>
<p>Chat replay is one of the most important features.</p>
<p>A VOD without chat often feels dead. The chat gives context to jokes, reactions, hype moments, and streamer decisions.</p>
<p>The challenge is keeping chat aligned with the video timeline, especially when:</p>
<ul>
<li><p>the user seeks forward or backward</p>
</li>
<li><p>the VOD is several hours long</p>
</li>
<li><p>chat data has gaps</p>
</li>
<li><p>timestamps are inconsistent</p>
</li>
<li><p>the replay source changes</p>
</li>
</ul>
<p>This is one of the areas I still want to test more with real long VODs.</p>
<h2>Clip creation</h2>
<p>I also wanted clip creation to feel more like a real workflow, not just a form with start and end timestamps.</p>
<p>The clip feature lets users select a segment from the VOD timeline, add a title, preview the result, and create a shareable clip page.</p>
<p>This is useful for stream viewers, editors, and people preparing content for TikTok, YouTube Shorts, or compilations.</p>
<h2>SEO for a mostly dynamic app</h2>
<p>Because NoSub is a web app, I had to think carefully about SEO.</p>
<p>I added:</p>
<ul>
<li><p>server-rendered titles and descriptions</p>
</li>
<li><p>Open Graph and Twitter Card metadata</p>
</li>
<li><p>canonical URLs</p>
</li>
<li><p>hreflang tags</p>
</li>
<li><p>sitemap.xml</p>
</li>
<li><p>robots.txt</p>
</li>
<li><p>localized landing pages</p>
</li>
<li><p>clean 301 redirects for search intent aliases</p>
</li>
</ul>
<p>The goal was to help Google understand the app without creating spammy doorway pages.</p>
<h2>Monetization and ads</h2>
<p>Video-related apps can cost money to host, especially when proxying or processing replay sources.</p>
<p>I added lightweight ads to help keep NoSub free, but I wanted to avoid making the app feel hostile.</p>
<p>The ad setup is isolated so ads can render without taking over the main app experience.</p>
<h2>What I would improve next</h2>
<p>The next things I want to improve are:</p>
<ul>
<li><p>better long VOD reliability</p>
</li>
<li><p>better mobile player controls</p>
</li>
<li><p>more robust clip export options</p>
</li>
<li><p>better error messages when a VOD cannot load</p>
</li>
<li><p>more real-world chat sync testing</p>
</li>
<li><p>cleaner frontend modularization</p>
</li>
</ul>
<h2>Live demo</h2>
<p>You can try NoSub here:</p>
<p><a href="https://nosubapp.com">https://nosubapp.com</a></p>
<p>I would love feedback from developers, stream viewers, and video editors.</p>
<p>What would you improve first: playback reliability, synced chat, clip creation, or mobile UX?</p>
]]></content:encoded></item></channel></rss>