Skip to content

FIX_IMPLEMENTATION_GUIDE.md

Latest commit

 

History

History
393 lines (298 loc) · 12.6 KB

FIX_IMPLEMENTATION_GUIDE.md

File metadata and controls

393 lines (298 loc) · 12.6 KB
Raw

Fix Implementation Guide: Statistics Overlay Initialization Failure

Quick Reference

  • Bug Location: player.js:743
  • Root Cause: Missing DOM element IDs статистика-сжатиевидео and статистика-сервер
  • Impact: Crash during error reporting, prevents crash reports from being generated
  • Severity: HIGH - Breaks error reporting system

Fix Option 1: Restore Missing IDs (RECOMMENDED FOR IMMEDIATE FIX)

Implementation Steps

Step 1: Edit player.html

Location: /home/vercel-sandbox/twitch_alternate_player/player.html

Change 1 - Line 67-68 (Video Compression):

<!-- BEFORE: -->
<!-- <span id=статистика-сжатиевидео title="Параметры сжатия видео: стандарт сжатия, профиль, уровень, максимальное количество опорных кадров, диапазон, частота кадров"></span> -->
<span id=statistics-videocompression title="Video compression parameters: compression standard, profile, level, maximum number of reference frames, range, frame rate"></span>

<!-- AFTER: -->
<span id=статистика-сжатиевидео title="Параметры сжатия видео: стандарт сжатия, профиль, уровень, максимальное количество опорных кадров, диапазон, частота кадров"></span>
<span id=statistics-videocompression title="Video compression parameters: compression standard, profile, level, maximum number of reference frames, range, frame rate"></span>

Change 2 - Line 89-90 (Server):

<!-- BEFORE: -->
<!-- <span id=статистика-сервер data-очистить="" title="Сервер, с которого загружается видео"></span> -->
<span id=statistics-server data-clear="" title="The server from which the video is downloaded"></span>

<!-- AFTER: -->
<span id=статистика-сервер data-очистить="" title="Сервер, с которого загружается видео"></span>
<span id=statistics-server data-clear="" title="The server from which the video is downloaded"></span>

Step 2: Test

  1. Reload extension in Chrome: chrome://extensions → click reload icon
  2. Navigate to a Twitch channel
  3. Press 'S' key to open statistics overlay
  4. Verify no console errors
  5. Check that statistics display correctly

Pros and Cons

Pros:

  • ✅ Immediate fix, no code changes
  • ✅ Minimal risk
  • ✅ Maintains backward compatibility
  • ✅ Can be deployed immediately

Cons:

  • ❌ Creates duplicate elements in DOM (small memory overhead)
  • ❌ Doesn't advance translation effort
  • ❌ Temporary solution, not final fix

Fix Option 2: Update JavaScript References (COMPLETE TRANSLATION)

Implementation Steps

Step 1: Update player.js

Location: /home/vercel-sandbox/twitch_alternate_player/player.js

Change 1 - Line 1846 (ПолучитьДанныеДляОтчета):

// BEFORE:
ПараметрыВидео:
  Узел("статистика-разрешениевидео").textContent +
  " " +
  Узел("статистика-сжатиевидео").textContent,

// AFTER:
ПараметрыВидео:
  Узел("статистика-разрешениевидео").textContent +
  " " +
  Узел("statistics-videocompression").textContent,

Change 2 - Line 1865 (РазобранСписокСегментов):

// BEFORE:
Узел("статистика-сервер").textContent = new URL(
  оСписок.моСегменты[оСписок.моСегменты.length - 1].сАдрес
).host;

// AFTER:
Узел("statistics-server").textContent = new URL(
  оСписок.моСегменты[оСписок.моСегменты.length - 1].сАдрес
).host;

Change 3 - Line 1995 (ПолученСегмент):

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

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

Change 4 - Line 2000 (ПолученСегмент):

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

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

Step 2: Remove commented-out Russian IDs from player.html

Line 67 - Remove:

<!-- <span id=статистика-сжатиевидео title="..."></span> -->

Line 89 - Remove:

<!-- <span id=статистика-сервер data-очистить="" title="..."></span> -->

Step 3: Test (Comprehensive)

  1. Reload extension
  2. Navigate to Twitch channel
  3. Press 'S' key for statistics overlay
  4. Verify all statistics display correctly
  5. Check video codec info appears when stream loads
  6. Check server name appears in statistics
  7. Test with both English and Russian browser locales
  8. Trigger error reporting (if possible) to verify crash reporting works

Pros and Cons

Pros:

  • ✅ Completes the translation for these elements
  • ✅ Aligns with CLAUDE.md translation goals
  • ✅ No duplicate DOM elements
  • ✅ Final solution, not temporary

Cons:

  • ❌ More changes = higher risk
  • ❌ Requires more comprehensive testing
  • ❌ Should be part of larger translation effort

Fix Option 3: Defensive Coding (SAFETY NET)

Implementation Steps

Step 1: Modify common.js

Location: /home/vercel-sandbox/twitch_alternate_player/common.js Line: 216-224

// BEFORE:
function Узел(пЭлемент) {
// function Node(pElement) {
	const элЭлемент = typeof пЭлемент == 'string' ? document.getElementById(пЭлемент) : пЭлемент;
	// const elElement = typeof pElement == 'string' ? document.getElementById(pElement) : pElement;
	Проверить(элЭлемент.nodeType === 1);
	// Check(elElement.nodeType === 1);
	return элЭлемент;
	// return elElement;
}

// AFTER:
function Узел(пЭлемент) {
// function Node(pElement) {
	const элЭлемент = typeof пЭлемент == 'string' ? document.getElementById(пЭлемент) : пЭлемент;
	// const elElement = typeof pElement == 'string' ? document.getElementById(pElement) : pElement;

	if (!элЭлемент) {
		console.warn(`⚠️ Element not found: ${пЭлемент}`);
		// Return stub element to prevent crashes
		const stubElement = document.createElement('span');
		stubElement.textContent = '';
		stubElement.style.display = 'none';
		return stubElement;
	}

	Проверить(элЭлемент.nodeType === 1);
	// Check(elElement.nodeType === 1);
	return элЭлемент;
	// return elElement;
}

Step 2: Then apply Fix Option 1 or 2

This defensive coding should be applied in addition to either Option 1 or Option 2, not as a replacement.

Pros and Cons

Pros:

  • ✅ Prevents crashes from any missing element
  • ✅ Logs warnings for debugging
  • ✅ Graceful degradation
  • ✅ Catches future translation issues

Cons:

  • ❌ Masks the real problem
  • ❌ May hide bugs during development
  • ❌ Adds runtime overhead (minimal)
  • ❌ Console warnings on every access to missing element

Recommended Implementation Strategy

Phase 1: Emergency Fix (NOW)

Apply Fix Option 1 - Restore missing Russian IDs

  • Time: 5 minutes
  • Risk: Very Low
  • Gets system working immediately

Phase 2: Safety Net (SOON)

Apply Fix Option 3 - Add defensive coding

  • Time: 10 minutes
  • Risk: Low
  • Prevents similar issues in future

Phase 3: Complete Translation (PLANNED)

Apply Fix Option 2 - Update JavaScript to English IDs

  • Time: 30 minutes + testing
  • Risk: Medium
  • Part of comprehensive translation effort
  • Should be done as atomic commit with related changes

Git Commit Messages

For Option 1 (Emergency Fix):

fix(player): restore missing statistics element IDs

Restore commented-out Russian element IDs to fix crash in statistics
overlay initialization at player.js:743.

- Uncomment статистика-сжатиевидео in player.html:67
- Uncomment статистика-сервер in player.html:89
- Both elements now have duplicate IDs (Russian + English)
- Temporary fix until JavaScript translation is complete

Fixes: TypeError at player.js:743 in ПолучитьДанныеДляОтчета()
Related: Translation effort documented in CLAUDE.md

For Option 2 (Complete Translation):

translate(player): update statistics IDs to English

Complete the translation of statistics element IDs from Russian to English.
Updates JavaScript references to match the English IDs already in player.html.

Changes:
- player.js:1846: статистика-сжатиевидео → statistics-videocompression
- player.js:1865: статистика-сервер → statistics-server
- player.js:1995: статистика-сжатиевидео → statistics-videocompression
- player.js:2000: статистика-сжатиевидео → statistics-videocompression
- Remove commented-out Russian IDs from player.html

Fixes: TypeError at player.js:743
Part of: Russian → English translation effort (CLAUDE.md)

For Option 3 (Defensive Coding):

fix(common): add defensive check in Узел() function

Add null-check to Узел() function to prevent crashes when
element IDs are missing from DOM.

- Returns stub element instead of crashing on null
- Logs warning to console for debugging
- Prevents secondary crashes during error reporting

Related: player.js:743 crash during statistics initialization

Testing Checklist

Basic Functionality Tests

  • Extension loads without errors
  • Can navigate to Twitch channel
  • Statistics overlay opens with 'S' key
  • No console errors when opening statistics
  • Video codec info displays correctly
  • Server name displays correctly
  • Audio codec info displays correctly

Edge Cases

  • Open statistics overlay before stream loads
  • Open statistics overlay during stream playback
  • Open statistics overlay after stream ends
  • Switch between streams with overlay open
  • Test with different video qualities

Locale Tests

  • Test with English browser locale
  • Test with Russian browser locale
  • Verify correct i18n strings display

Error Reporting

  • Verify crash reports can be generated
  • Check that statistics data is included in reports
  • Verify no secondary crashes during error reporting

Verification Commands

Check for Russian IDs in HTML

grep -n "id=статистика-" player.html

Check for Russian ID references in JavaScript

grep -n 'Узел("статистика-' player.js

Check for English IDs in HTML

grep -n "id=statistics-" player.html

Count occurrences of problematic IDs

# Should find 4 occurrences in player.js:
grep -c "статистика-сжатиевидео" player.js

# Should find 1 occurrence in player.js:
grep -c "статистика-сервер" player.js

Rollback Plan

If issues occur after applying any fix:

For Option 1:

Simply re-comment out the restored elements in player.html

For Option 2:

git revert <commit-hash>
# Then apply Option 1 as emergency fix

For Option 3:

git revert <commit-hash>
# System returns to original behavior (will crash on missing elements)

Related Files

  • /home/vercel-sandbox/twitch_alternate_player/player.js - Main player logic
  • /home/vercel-sandbox/twitch_alternate_player/player.html - Player UI with statistics overlay
  • /home/vercel-sandbox/twitch_alternate_player/common.js - Shared utilities including Узел()
  • /home/vercel-sandbox/twitch_alternate_player/CLAUDE.md - Translation plan and guidelines
  • /home/vercel-sandbox/twitch_alternate_player/Documentation/legacy_code_translation_reference.md - Translation glossary

Additional Considerations

Why Both IDs Can Coexist

HTML allows multiple elements with the same content but different IDs. Having both Russian and English IDs pointing to separate <span> elements is valid and won't cause conflicts. The elements will display the same content since JavaScript will write to both (if both are accessed).

Memory Impact

Each additional <span> element is approximately 100-200 bytes. Adding 2 duplicate elements adds ~400 bytes to DOM, which is negligible.

Performance Impact

document.getElementById() is O(1) operation. Having duplicate IDs doesn't impact lookup performance.

Future Cleanup

Once all JavaScript is translated to use English IDs, the Russian ID elements can be safely removed in a cleanup commit.