fix: prevent time display hiding when remaining duration is enabled

js&css/web-accessible/core.js

@@ -456,9 +456,7 @@ document.addEventListener('it-message-from-extension', function () {
 
 				case 'playerRemainingDuration':
 					if (ImprovedTube.storage.player_remaining_duration === false) {
-						document.querySelector(".ytp-time-remaining-duration")?.remove();
-						document.querySelector('.ytp-time-contents')?.removeAttribute('style');
-						document.querySelector('.ytp-time-contents')?.style.setProperty('display', 'block', 'important');
+						document.querySelector('.ytp-time-remaining-duration')?.remove();
 					} else if (ImprovedTube.storage.player_remaining_duration === true) {
 						ImprovedTube.playerRemainingDuration();
 					}

js&css/web-accessible/www.youtube.com/appearance.js

@@ -158,10 +158,8 @@ ImprovedTube.playerRemainingDuration = function () {
 	const liveBadge = document.querySelector('button.ytp-live-badge.ytp-button.ytp-live-badge-is-livehead');
 	if (liveBadge) return;
 
-	const currentEl = document.querySelector('.ytp-time-current');
 	const durationEl = document.querySelector('.ytp-time-duration');
-
-	if (!currentEl || !durationEl) return;
+	if (!durationEl) return;
 
 	const player = ImprovedTube.elements.player;
 	if (!player) return;
@@ -173,16 +171,16 @@ ImprovedTube.playerRemainingDuration = function () {
 
 	const remainingSeconds = Math.max(0, duration - currentTime);
 	const rTime = ImprovedTube.formatSecond(Math.floor(remainingSeconds));
-	
+
 	if (!rTime || rTime.includes('NaN')) return;
 
-	if (!durationEl.dataset.itOriginal) {
-		durationEl.dataset.itOriginal = durationEl.textContent;
+	var remainingEl = document.querySelector('.ytp-time-remaining-duration');
+	if (!remainingEl) {
+		remainingEl = document.createElement('span');
+		remainingEl.className = 'ytp-time-remaining-duration';
+		durationEl.insertAdjacentElement('afterend', remainingEl);
 	}
-
-	// Overwrite text 
-	durationEl.textContent =
-		durationEl.dataset.itOriginal + '  (-' + rTime + ')';
+	remainingEl.textContent = '  (-' + rTime + ')';
 };
 
 

tests/unit/remaining-duration.test.js

@@ -0,0 +1,50 @@
+// Test for Issue #3611: Time display hidden when remaining duration enabled
+
+const fs = require('fs');
+const path = require('path');
+
+describe('Player Remaining Duration Fix (#3611)', () => {
+	describe('appearance.js - playerRemainingDuration', () => {
+		let appearanceContent;
+
+		beforeAll(() => {
+			const filePath = path.join(__dirname, '../../js&css/web-accessible/www.youtube.com/appearance.js');
+			appearanceContent = fs.readFileSync(filePath, 'utf8');
+		});
+
+		test('should create a separate span element instead of overwriting textContent', () => {
+			expect(appearanceContent).toContain("remainingEl = document.createElement('span')");
+			expect(appearanceContent).toContain("remainingEl.className = 'ytp-time-remaining-duration'");
+		});
+
+		test('should use insertAdjacentElement to append remaining duration', () => {
+			expect(appearanceContent).toContain("durationEl.insertAdjacentElement('afterend', remainingEl)");
+		});
+
+		test('should not overwrite durationEl.textContent with original + remaining', () => {
+			expect(appearanceContent).not.toContain("durationEl.textContent =\n\t\tdurationEl.dataset.itOriginal");
+		});
+
+		test('should reuse existing remaining element to avoid duplicates', () => {
+			expect(appearanceContent).toContain("document.querySelector('.ytp-time-remaining-duration')");
+		});
+	});
+
+	describe('core.js - cleanup on disable', () => {
+		let coreContent;
+
+		beforeAll(() => {
+			const filePath = path.join(__dirname, '../../js&css/web-accessible/core.js');
+			coreContent = fs.readFileSync(filePath, 'utf8');
+		});
+
+		test('should remove the remaining duration element on disable', () => {
+			expect(coreContent).toContain(".ytp-time-remaining-duration")
+			expect(coreContent).toContain("?.remove()");
+		});
+
+		test('should not force display styles on ytp-time-contents', () => {
+			expect(coreContent).not.toContain("setProperty('display', 'block', 'important')");
+		});
+	});
+});