☰

Full Date format for Youtube

Show full upload dates in DD/MM/YYYY HH:MMam/pm format with improved performance

  1. // ==UserScript==
  2. // @name              Full Date format for Youtube
  3. // @version           1.1.2
  4. // @description       Show full upload dates in DD/MM/YYYY HH:MMam/pm format with improved performance
  5. // @author            Ignacio Albiol
  6. // @namespace         https://greatest.deepsurf.us/en/users/1304094
  7. // @match             https://www.youtube.com/*
  8. // @iconURL           https://seekvectors.com/files/download/youtube-icon-yellow-01.jpg
  9. // @grant             none
  10. // @license           MIT
  11. // ==/UserScript==
  12.  
  13. (function() {
  14.     'use strict';
  15.  
  16.     const processedVideos = new Map();
  17.     const uploadDateCache = new Map();
  18.     const apiRequestCache = new Map();
  19.     const PROCESS_INTERVAL = 1500;
  20.     const DEBUG = false; // Set to true to enable debug logging
  21.  
  22.     function debugLog(...args) {
  23.         if (DEBUG) console.log('[YT Date Format]', ...args);
  24.     }
  25.  
  26.     async function getRemoteUploadDate(videoId) {
  27.         if (!videoId) {
  28.             debugLog('No video ID provided');
  29.             return null;
  30.         }
  31.         
  32.         if (uploadDateCache.has(videoId)) {
  33.             debugLog('Cache hit for', videoId);
  34.             return uploadDateCache.get(videoId);
  35.         }
  36.         
  37.         if (apiRequestCache.has(videoId)) {
  38.             debugLog('Request already in progress for', videoId);
  39.             return apiRequestCache.get(videoId);
  40.         }
  41.  
  42.         debugLog('Fetching data for', videoId);
  43.         const requestPromise = (async () => {
  44.             try {
  45.                 const response = await fetch('https://www.youtube.com/youtubei/v1/player?prettyPrint=false', {
  46.                     method: 'POST',
  47.                     headers: {'Content-Type': 'application/json'},
  48.                     body: JSON.stringify({
  49.                         "context": { "client": { "clientName": "WEB", "clientVersion": "2.20240416.01.00" } },
  50.                         "videoId": videoId
  51.                     })
  52.                 });
  53.                 
  54.                 if (!response.ok) {
  55.                     throw new Error(`Network error: ${response.status}`);
  56.                 }
  57.                 
  58.                 const data = await response.json();
  59.                 const object = data?.microformat?.playerMicroformatRenderer;
  60.                 const uploadDate = object?.publishDate || object?.uploadDate || object?.liveBroadcastDetails?.startTimestamp || null;
  61.                 
  62.                 if (uploadDate) {
  63.                     debugLog('Found date for', videoId, ':', uploadDate);
  64.                     uploadDateCache.set(videoId, uploadDate);
  65.                 } else {
  66.                     debugLog('No date found for', videoId);
  67.                 }
  68.                 
  69.                 return uploadDate;
  70.             } catch (error) {
  71.                 console.error('[YT Date Format] Error fetching video data:', error, videoId);
  72.                 return null;
  73.             } finally {
  74.                 apiRequestCache.delete(videoId);
  75.             }
  76.         })();
  77.  
  78.         apiRequestCache.set(videoId, requestPromise);
  79.         return requestPromise;
  80.     }
  81.  
  82.     function isoToDate(iso) {
  83.         if (!iso) return '';
  84.         try {
  85.             const date = new Date(iso);
  86.             if (isNaN(date.getTime())) {
  87.                 debugLog('Invalid date:', iso);
  88.                 return '';
  89.             }
  90.             
  91.             const day = String(date.getDate()).padStart(2, '0');
  92.             const month = String(date.getMonth() + 1).padStart(2, '0');
  93.             const year = date.getFullYear();
  94.             let hours = date.getHours();
  95.             const minutes = String(date.getMinutes()).padStart(2, '0');
  96.             const ampm = hours >= 12 ? 'pm' : 'am';
  97.             hours = hours % 12 || 12;
  98.             
  99.             return `${day}/${month}/${year} ${hours}:${minutes}${ampm}`;
  100.         } catch (error) {
  101.             console.error('[YT Date Format] Error formatting date:', error, iso);
  102.             return '';
  103.         }
  104.     }
  105.  
  106.     function urlToVideoId(url) {
  107.         if (!url) return '';
  108.         
  109.         try {
  110.             // Handle various YouTube URL formats
  111.             if (url.includes('/shorts/')) {
  112.                 return url.split('/shorts/')[1].split(/[?#]/)[0];
  113.             }
  114.             
  115.             if (url.includes('v=')) {
  116.                 return url.split('v=')[1].split(/[?&#]/)[0];
  117.             }
  118.             
  119.             // Handle direct video IDs (e.g., /watch/VIDEO_ID)
  120.             if (url.includes('/watch/')) {
  121.                 return url.split('/watch/')[1].split(/[?#]/)[0];
  122.             }
  123.             
  124.             // Handle URLs with video ID directly in the path
  125.             const match = url.match(/\/([a-zA-Z0-9_-]{11})(?:[?#]|$)/);
  126.             if (match) return match[1];
  127.             
  128.             return '';
  129.         } catch (error) {
  130.             console.error('[YT Date Format] Error extracting video ID:', error, url);
  131.             return '';
  132.         }
  133.     }
  134.  
  135.     async function processVideoElement(el, linkSelector, metadataSelector) {
  136.         try {
  137.             const metadataLine = el.querySelector(metadataSelector);
  138.             if (!metadataLine) {
  139.                 debugLog('No metadata line found for selector', metadataSelector);
  140.                 return;
  141.             }
  142.             
  143.             // Find or create the span for holding our date
  144.             const spanElements = metadataLine.querySelectorAll('span');
  145.             let holder;
  146.             
  147.             // First, try to find an existing text span (likely the view count span)
  148.             for (const span of spanElements) {
  149.                 if (span.textContent.includes(' views') || 
  150.                     span.textContent.includes(' view') || 
  151.                     span.textContent.match(/^\d[\d.,]*\s/)) {
  152.                     holder = span.nextElementSibling;
  153.                     if (!holder) {
  154.                         holder = document.createElement('span');
  155.                         metadataLine.appendChild(holder);
  156.                     }
  157.                     break;
  158.                 }
  159.             }
  160.             
  161.             // If we couldn't find a suitable span, create one
  162.             if (!holder) {
  163.                 holder = metadataLine.querySelector('span:nth-child(2)');
  164.                 if (!holder) {
  165.                     holder = document.createElement('span');
  166.                     metadataLine.appendChild(holder);
  167.                 }
  168.             }
  169.             
  170.             const linkElement = el.querySelector(linkSelector);
  171.             if (!linkElement) {
  172.                 debugLog('No link element found for selector', linkSelector);
  173.                 return;
  174.             }
  175.             
  176.             const videoUrl = linkElement.getAttribute('href');
  177.             const videoId = urlToVideoId(videoUrl);
  178.             
  179.             if (!videoId) {
  180.                 debugLog('Failed to extract video ID from', videoUrl);
  181.                 return;
  182.             }
  183.             
  184.             if (processedVideos.has(videoId)) {
  185.                 debugLog('Video already processed', videoId);
  186.                 return;
  187.             }
  188.             
  189.             debugLog('Processing video', videoId);
  190.             processedVideos.set(videoId, Date.now());
  191.             
  192.             const uploadDate = await getRemoteUploadDate(videoId);
  193.             if (uploadDate) {
  194.                 const formattedDate = isoToDate(uploadDate);
  195.                 debugLog('Setting date for', videoId, ':', formattedDate);
  196.                 holder.textContent = formattedDate;
  197.                 holder.style.marginLeft = '4px';
  198.             }
  199.         } catch (error) {
  200.             console.error('[YT Date Format] Error processing video element:', error);
  201.         }
  202.     }
  203.  
  204.     function processAllElements() {
  205.         // Updated selectors for different parts of YouTube
  206.         const selectors = [
  207.             // Related videos in watch page
  208.             {
  209.                 container: '#items.ytd-watch-next-secondary-results-renderer ytd-compact-video-renderer, #related #items ytd-compact-video-renderer',
  210.                 link: 'a#thumbnail',
  211.                 metadata: '#metadata-line'
  212.             },
  213.             // Videos in home page and channel pages
  214.             {
  215.                 container: 'ytd-rich-grid-media, ytd-rich-item-renderer, ytd-grid-video-renderer',
  216.                 link: 'a#thumbnail, h3 > a#video-title-link',
  217.                 metadata: '#metadata-line, ytd-video-meta-block #metadata #metadata-line'
  218.             },
  219.             // Search results
  220.             {
  221.                 container: 'ytd-video-renderer',
  222.                 link: 'a#thumbnail, h3 a#video-title',
  223.                 metadata: '#metadata-line, ytd-video-meta-block #metadata #metadata-line'
  224.             },
  225.             // Channel featured video
  226.             {
  227.                 container: 'ytd-channel-video-player-renderer',
  228.                 link: 'a, yt-formatted-string > a',
  229.                 metadata: '#metadata-line'
  230.             }
  231.         ];
  232.  
  233.         selectors.forEach(({ container, link, metadata }) => {
  234.             document.querySelectorAll(container).forEach(el => {
  235.                 processVideoElement(el, link, metadata);
  236.             });
  237.         });
  238.  
  239.         // Clean up old processed videos to prevent memory leaks
  240.         const now = Date.now();
  241.         for (const [videoId, timestamp] of processedVideos.entries()) {
  242.             if (now - timestamp > 10 * 60 * 1000) {
  243.                 processedVideos.delete(videoId);
  244.             }
  245.         }
  246.     }
  247.  
  248.     function handleURLChange() {
  249.         debugLog('URL changed, clearing processed videos cache');
  250.         processedVideos.clear();
  251.         setTimeout(processAllElements, 1000);
  252.     }
  253.  
  254.     function init() {
  255.         debugLog('Initializing YouTube Date Format script');
  256.         
  257.         // Add CSS to hide YouTube's default timestamp in some cases
  258.         const styleTag = document.createElement('style');
  259.         styleTag.textContent = `
  260.             #info > span:nth-child(3), 
  261.             #info > span:nth-child(4) { 
  262.                 display: none !important; 
  263.             }
  264.         `;
  265.         document.head.appendChild(styleTag);
  266.  
  267.         // Watch for page navigation
  268.         let lastUrl = location.href;
  269.         new MutationObserver(() => {
  270.             if (location.href !== lastUrl) {
  271.                 lastUrl = location.href;
  272.                 handleURLChange();
  273.             }
  274.         }).observe(document, { subtree: true, childList: true });
  275.  
  276.         // Also watch title changes (which often indicate page changes in SPAs)
  277.         const titleEl = document.querySelector('head > title');
  278.         if (titleEl) {
  279.             new MutationObserver(handleURLChange)
  280.                 .observe(titleEl, { childList: true });
  281.         }
  282.  
  283.         // Process videos periodically
  284.         setInterval(processAllElements, PROCESS_INTERVAL);
  285.         
  286.         // Initial processing
  287.         setTimeout(processAllElements, 500);
  288.         setTimeout(processAllElements, 2000);
  289.         setTimeout(processAllElements, 5000);
  290.     }
  291.  
  292.     // Initialize the script when the page is ready
  293.     if (document.readyState === 'loading') {
  294.         document.addEventListener('DOMContentLoaded', init);
  295.     } else {
  296.         init();
  297.     }
  298. })();