fix #3477: blank timer when "show remaining duration" is enabled

_locales/en/messages.json

@@ -730,6 +730,7 @@
   },
   "hideSponsoredVideosOnHome": {
     "message": "Hide sponsored videos on Home page"
+  },
   "hidePauseOverlay": {
     "message": "Hide Pause Overlay"
   },

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

@@ -155,26 +155,37 @@ ImprovedTube.formatSecond = function (rTime) {
 };
 
 ImprovedTube.playerRemainingDuration = function () {
-	//If is a live stream, do not show remaining time
-	 const button = document.querySelector('button.ytp-live-badge.ytp-button.ytp-live-badge-is-livehead');
-	if (button) 
-		return;	
-
-	var duration = document.querySelector(".ytp-time-duration").innerText;
-	var current = document.querySelector(".ytp-time-current").innerText;
-	document.querySelector('.ytp-time-contents').style.setProperty('display', 'none', 'important');
-	var player = ImprovedTube.elements.player;
-	var rTime = ImprovedTube.formatSecond((player.getDuration() - player.getCurrentTime()).toFixed(0));	
-	var element = document.querySelector(".ytp-time-remaining-duration");
-	if (!element) {
-		var label = document.createElement("span");
-		label.textContent = current + " / " + duration + " / (-" + rTime + ")";
-		label.className = "ytp-time-remaining-duration";
-		document.querySelector(".ytp-time-display span").appendChild(label);
-	} else {		
-		return element.textContent = current + " / " + duration + " (-" + rTime + ")";
+	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;
+
+	const player = ImprovedTube.elements.player;
+	if (!player) return;
+
+	const currentTime = player.getCurrentTime();
+	const duration = player.getDuration();
+
+	if (!isFinite(duration) || !isFinite(currentTime) || duration <= 0) return;
+
+	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;
 	}
+
+	// Overwrite text 
+	durationEl.textContent =
+		durationEl.dataset.itOriginal + '  (-' + rTime + ')';
 };
+
+
 /*------------------------------------------------------------------------------
  Comments Sidebar Simple
 ------------------------------------------------------------------------------*/

menu/skeleton-parts/appearance.js

@@ -429,8 +429,8 @@ extension.skeleton.main.layers.section.appearance.on.click.player = {
 					component: "switch",
 					text: "hideTopLoadingBar",
 					tags: "remove,hide"
-				},
 				}
+
 			},
 			hide_gradient_bottom: {
 				component: "switch",
@@ -522,12 +522,6 @@ extension.skeleton.main.layers.section.appearance.on.click.player = {
 				value: false,
 				tags: "remove,hide,pause,bezel"
 			},
-			player_remaining_duration: {
-				component: "switch",
-				text: "showRemainingDuration",
-				id: "show-remaining-duration",
-				value: false
-			},
 			duration_with_speed: {
 				component: "switch",
 				text: "durationWithSpeed",