CRITICAL BUG FIX PLAN #1: HTML/JavaScript Element ID Mismatch

Priority: CRITICAL (P0) - Player completely broken Estimated Time: 15-30 minutes Risk Level: LOW (surgical fixes, well-defined scope)

Executive Summary

Commit ebf05b5 changed 9 HTML element IDs from Russian to English but failed to update the corresponding JavaScript references in player.js. This causes document.getElementById() to return null, triggering TypeErrors throughout the statistics overlay system.

Root Cause

What Happened:

Developer uncommented pre-existing English ID translations in player.html
Commented out the Russian IDs
FORGOT to update player.js references to use the new English IDs

Result: JavaScript looks for elements that no longer exist → null reference crashes

Affected Element IDs (9 Total)

Line in player.js	Russian ID (broken)	English ID (correct)	Occurrences
1656	`статистика-интервалобновления`	`statistics-updateinterval`	1
1661	`статистика-сегментовдобавлено`	`statistics-segmentsadded`	1
1666	`статистика-секунддобавлено`	`statistics-secondsadded`	1
1671	`статистика-толщинасегмента`	`statistics-segmentthickness`	1
1676	`статистика-толщинаканала`	`statistics-channelthickness`	1
1681	`статистика-ожиданиеответа`	`statistics-responsewait`	1
1686	`статистика-непросмотрено`	`statistics-unwatched`	1
1846, 1995, 2000	`статистика-сжатиевидео`	`statistics-videocompression`	3
1865	`статистика-сервер`	`statistics-server`	1

Total Lines to Fix: 11 lines in player.js

Implementation Steps

Step 1: Backup Current State

cd /home/vercel-sandbox/twitch_alternate_player
git status
git diff player.js > /tmp/backup_before_fix.diff

Step 2: Apply Fixes to player.js

Method: Use precise search-and-replace for each line

Fix #1: Line 1656

// BEFORE:
"статистика-интервалобновления",

// AFTER:
"statistics-updateinterval",

Fix #2: Line 1661

// BEFORE:
"статистика-сегментовдобавлено",

// AFTER:
"statistics-segmentsadded",

Fix #3: Line 1666

// BEFORE:
"статистика-секунддобавлено",

// AFTER:
"statistics-secondsadded",

Fix #4: Line 1671

// BEFORE:
"статистика-толщинасегмента",

// AFTER:
"statistics-segmentthickness",

Fix #5: Line 1676

// BEFORE:
"статистика-толщинаканала",

// AFTER:
"statistics-channelthickness",

Fix #6: Line 1681

// BEFORE:
"статистика-ожиданиеответа",

// AFTER:
"statistics-responsewait",

Fix #7: Line 1686

// BEFORE:
"статистика-непросмотрено",

// AFTER:
"statistics-unwatched",

Fix #8: Line 1846

// BEFORE:
Узел("статистика-сжатиевидео").textContent,

// AFTER:
Узел("statistics-videocompression").textContent,

Fix #9: Line 1865

// BEFORE:
Узел("статистика-сервер").textContent = new URL(

// AFTER:
Узел("statistics-server").textContent = new URL(

Fix #10: Line 1995

// BEFORE:
Узел("статистика-сжатиевидео").textContent = сСжатиеВидео;

// AFTER:
Узел("statistics-videocompression").textContent = сСжатиеВидео;

Fix #11: Line 2000

// BEFORE:
Узел("статистика-сжатиевидео").textContent = "—";

// AFTER:
Узел("statistics-videocompression").textContent = "—";

Automated Fix Script

#!/bin/bash
cd /home/vercel-sandbox/twitch_alternate_player

# Create backup
cp player.js player.js.backup

# Apply all 11 fixes using sed
sed -i '1656s/"статистика-интервалобновления"/"statistics-updateinterval"/' player.js
sed -i '1661s/"статистика-сегментовдобавлено"/"statistics-segmentsadded"/' player.js
sed -i '1666s/"статистика-секунддобавлено"/"statistics-secondsadded"/' player.js
sed -i '1671s/"статистика-толщинасегмента"/"statistics-segmentthickness"/' player.js
sed -i '1676s/"статистика-толщинаканала"/"statistics-channelthickness"/' player.js
sed -i '1681s/"статистика-ожиданиеответа"/"statistics-responsewait"/' player.js
sed -i '1686s/"статистика-непросмотрено"/"statistics-unwatched"/' player.js
sed -i '1846s/"статистика-сжатиевидео"/"statistics-videocompression"/' player.js
sed -i '1865s/"статистика-сервер"/"statistics-server"/' player.js
sed -i '1995s/"статистика-сжатиевидео"/"statistics-videocompression"/' player.js
sed -i '2000s/"статистика-сжатиевидео"/"statistics-videocompression"/' player.js

echo "✓ All 11 lines fixed"

Verification Steps

Step 1: Verify No Russian IDs Remain (for these 9)

grep -n "статистика-сжатиевидео\|статистика-сервер\|статистика-интервалобновления\|статистика-сегментовдобавлено\|статистика-секунддобавлено\|статистика-толщинасегмента\|статистика-толщинаканала\|статистика-ожиданиеответа\|статистика-непросмотрено" player.js

Expected: No output (0 matches)

Step 2: Verify English IDs Exist in HTML

grep -o "id=statistics-videocompression\|id=statistics-server\|id=statistics-updateinterval\|id=statistics-segmentsadded\|id=statistics-secondsadded\|id=statistics-segmentthickness\|id=statistics-channelthickness\|id=statistics-responsewait\|id=statistics-unwatched" player.html | wc -l

Expected: 9 matches (one for each ID)

Step 3: Syntax Check

node -c player.js

Expected: No output (syntax valid)

Step 4: Git Diff Review

git diff player.js

Expected: Exactly 11 lines changed, all ID string replacements

Testing Checklist

Unit-Level Tests (via DevTools Console)

Load extension → Open any Twitch stream → Open DevTools Console → Run:

// Test 1: Verify all 9 elements exist
const ids = [
  'statistics-videocompression',
  'statistics-server', 
  'statistics-updateinterval',
  'statistics-segmentsadded',
  'statistics-secondsadded',
  'statistics-segmentthickness',
  'statistics-channelthickness',
  'statistics-responsewait',
  'statistics-unwatched'
];
ids.forEach(id => {
  const el = document.getElementById(id);
  console.log(`${id}: ${el ? '✓ EXISTS' : '✗ MISSING'}`);
});

Expected: All 9 show "✓ EXISTS"

Integration Test

Load extension in Chrome
Navigate to any live Twitch stream
Press S key to open statistics overlay
Wait 10 seconds for data to populate
Verify these fields display data (not "—"):
- Video compression info (codec, profile, level)
- Server hostname
- Update interval min/avg/max table
- Segments added min/avg/max table
- Seconds added min/avg/max table
- Stream bitrate min/avg/max table
- Download speed min/avg/max table
- Response time min/avg/max table
- Buffer fullness min/avg/max table

Regression Test

Verify unchanged Russian IDs still work:

Resolution display (статистика-разрешениевидео)
Frame rate display (статистика-частотакадров)
Audio compression (статистика-сжатиезвука)
Audio bitrate (статистика-битрейтзвука)

Git Commit

git add player.js
git commit -m "$(cat <<'EOF'
fix(player): update statistics element IDs to match player.html

Commit ebf05b5 changed 9 element IDs from Russian to English in player.html
but did not update the corresponding JavaScript references. This caused
TypeErrors when statistics overlay attempted to access non-existent elements.

Fixed element ID references (11 lines):
- статистика-сжатиевидео → statistics-videocompression (3×)
- статистика-сервер → statistics-server (1×)
- статистика-интервалобновления → statistics-updateinterval (1×)
- статистика-сегментовдобавлено → statistics-segmentsadded (1×)
- статистика-секунддобавлено → statistics-secondsadded (1×)
- статистика-толщинасегмента → statistics-segmentthickness (1×)
- статистика-толщинаканала → statistics-channelthickness (1×)
- статистика-ожиданиеответа → statistics-responsewait (1×)
- статистика-непросмотрено → statistics-unwatched (1×)

Resolves: TypeError: Cannot read properties of null (reading 'nodeType')
         at common.js:220 (Узел)
Fixes: ebf05b5 ("Replace all Russian tooltip text with English")

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
EOF
)"

git push origin HEAD

Rollback Plan (if needed)

# Restore from backup
cp player.js.backup player.js

# OR revert commit
git revert HEAD --no-edit
git push origin HEAD

Success Criteria

✅ All 11 lines updated in player.js
✅ Zero grep matches for the 9 broken Russian IDs
✅ Statistics overlay displays live data (not "—")
✅ No console errors when pressing 'S' key
✅ Regression: 4 unchanged Russian IDs still work
✅ Git commit pushed successfully

Related Issues

Downstream: None (this is an isolated bug)
Upstream: Commit ebf05b5 introduced the bug
Follow-up: See BUG_FIX_PLAN_2 for remaining hardcoded tooltips

Document Version: 1.0
Created: 2026-07-07
Status: READY FOR IMPLEMENTATION

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

CRITICAL BUG FIX PLAN #1: HTML/JavaScript Element ID Mismatch

Executive Summary

Root Cause

Affected Element IDs (9 Total)

Implementation Steps

Step 1: Backup Current State

Step 2: Apply Fixes to player.js

Fix #1: Line 1656

Fix #2: Line 1661

Fix #3: Line 1666

Fix #4: Line 1671

Fix #5: Line 1676

Fix #6: Line 1681

Fix #7: Line 1686

Fix #8: Line 1846

Fix #9: Line 1865

Fix #10: Line 1995

Fix #11: Line 2000

Automated Fix Script

Verification Steps

Step 1: Verify No Russian IDs Remain (for these 9)

Step 2: Verify English IDs Exist in HTML

Step 3: Syntax Check

Step 4: Git Diff Review

Testing Checklist

Unit-Level Tests (via DevTools Console)

Integration Test

Regression Test

Git Commit

Rollback Plan (if needed)

Success Criteria

Related Issues

FilesExpand file tree

CRITICAL_BUG_FIX_PLAN_1_ID_MISMATCH.md

Latest commit

History

CRITICAL_BUG_FIX_PLAN_1_ID_MISMATCH.md

File metadata and controls

CRITICAL BUG FIX PLAN #1: HTML/JavaScript Element ID Mismatch

Executive Summary

Root Cause

Affected Element IDs (9 Total)

Implementation Steps

Step 1: Backup Current State

Step 2: Apply Fixes to player.js

Fix #1: Line 1656

Fix #2: Line 1661

Fix #3: Line 1666

Fix #4: Line 1671

Fix #5: Line 1676

Fix #6: Line 1681

Fix #7: Line 1686

Fix #8: Line 1846

Fix #9: Line 1865

Fix #10: Line 1995

Fix #11: Line 2000

Automated Fix Script

Verification Steps

Step 1: Verify No Russian IDs Remain (for these 9)

Step 2: Verify English IDs Exist in HTML

Step 3: Syntax Check

Step 4: Git Diff Review

Testing Checklist

Unit-Level Tests (via DevTools Console)

Integration Test

Regression Test

Git Commit

Rollback Plan (if needed)

Success Criteria

Related Issues