☰

YouTube Enhancer (Reveal Views & Upload Time)

Reveal Views & Upload Time.

  1. // ==UserScript==
  2. // @name         YouTube Enhancer (Reveal Views & Upload Time)
  3. // @description  Reveal Views & Upload Time.
  4. // @icon         https://raw.githubusercontent.com/exyezed/youtube-enhancer/refs/heads/main/extras/youtube-enhancer.png
  5. // @version      1.3
  6. // @author       exyezed
  7. // @namespace    https://github.com/exyezed/youtube-enhancer/
  8. // @supportURL   https://github.com/exyezed/youtube-enhancer/issues
  9. // @license      MIT
  10. // @match        https://www.youtube.com/*
  11. // ==/UserScript==
  12.  
  13. (function() {
  14.     'use strict';
  15.  
  16.     const badgeStyles = `
  17.         @import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');
  18.         
  19.         #secondary-inner .revealViewsAndUploadTime {
  20.             height: 36px;
  21.             font-size: 14px;
  22.             font-weight: 500;
  23.             border-radius: 8px;
  24.             padding: 0 16px;
  25.             font-family: inherit;
  26.             border: 1px solid transparent;
  27.             margin-bottom: 10px;
  28.             width: 100%;
  29.             box-sizing: border-box;
  30.             display: flex;
  31.             align-items: center;
  32.             justify-content: center;
  33.             gap: 8px;
  34.             cursor: pointer;
  35.         }
  36.         html[dark] #secondary-inner .revealViewsAndUploadTime {
  37.             background-color: #ffffff1a;
  38.             color: var(--yt-spec-text-primary, #fff);
  39.         }
  40.         html:not([dark]) #secondary-inner .revealViewsAndUploadTime {
  41.             background-color: #0000000d;
  42.             color: var(--yt-spec-text-primary, #030303);
  43.         }
  44.         html[dark] #secondary-inner .revealViewsAndUploadTime:hover {
  45.             background-color: #ffffff33;
  46.         }
  47.         html:not([dark]) #secondary-inner .revealViewsAndUploadTime:hover {
  48.             background-color: #00000014;
  49.         }
  50.         #secondary-inner .revealViewsAndUploadTime .separator {
  51.             margin: 0 2px;
  52.             width: 1px;
  53.             height: 24px;
  54.             opacity: 0.3;
  55.         }
  56.         html[dark] #secondary-inner .revealViewsAndUploadTime .separator {
  57.             background-color: var(--yt-spec-text-secondary, #aaa);
  58.         }
  59.         html:not([dark]) #secondary-inner .revealViewsAndUploadTime .separator {
  60.             background-color: var(--yt-spec-text-secondary, #606060);
  61.         }
  62.  
  63.         .material-symbols-outlined {
  64.             font-size: 24px;
  65.             line-height: 1;
  66.             font-variation-settings:
  67.                 'FILL' 0,
  68.                 'wght' 150,
  69.                 'GRAD' 0,
  70.                 'opsz' 24;
  71.         }
  72.     `;
  73.  
  74.     function createBadge(viewCount, uploadTime, uploadDate) {
  75.         const badge = document.createElement('div');
  76.         badge.className = 'revealViewsAndUploadTime';
  77.  
  78.         const mainIcon = document.createElement('span');
  79.         mainIcon.className = 'material-symbols-outlined';
  80.         mainIcon.textContent = 'visibility';
  81.  
  82.         const dataSpan = document.createElement('span');
  83.         dataSpan.textContent = viewCount;
  84.  
  85.         const separator = document.createElement('div');
  86.         separator.className = 'separator';
  87.  
  88.         const timeIcon = document.createElement('span');
  89.         timeIcon.className = 'material-symbols-outlined';
  90.         timeIcon.textContent = 'schedule';
  91.  
  92.         const timeSpan = document.createElement('span');
  93.         timeSpan.textContent = uploadTime;
  94.  
  95.         badge.appendChild(mainIcon);
  96.         badge.appendChild(dataSpan);
  97.         badge.appendChild(separator);
  98.         badge.appendChild(timeIcon);
  99.         badge.appendChild(timeSpan);
  100.  
  101.         let isShowingViews = true;
  102.         badge.addEventListener('click', () => {
  103.             if (isShowingViews) {
  104.                 mainIcon.textContent = 'calendar_month';
  105.                 dataSpan.textContent = uploadDate;
  106.                 timeIcon.textContent = 'schedule';
  107.                 timeIcon.style.display = '';
  108.             } else {
  109.                 mainIcon.textContent = 'visibility';
  110.                 dataSpan.textContent = viewCount;
  111.                 timeIcon.textContent = 'schedule';
  112.                 timeIcon.style.display = '';
  113.             }
  114.             isShowingViews = !isShowingViews;
  115.         });
  116.  
  117.         return badge;
  118.     }
  119.  
  120.     function getVideoId() {
  121.         const urlObj = new URL(window.location.href);
  122.         if (urlObj.pathname.includes('/watch')) {
  123.             return urlObj.searchParams.get('v');
  124.         } else if (urlObj.pathname.includes('/video/')) {
  125.             return urlObj.pathname.split('/video/')[1];
  126.         }
  127.         return null;
  128.     }
  129.  
  130.     function formatNumber(number) {
  131.         return new Intl.NumberFormat('en-US').format(number);
  132.     }
  133.  
  134.     function formatDate(dateString) {
  135.         const date = new Date(dateString);
  136.         const today = new Date();
  137.         const yesterday = new Date(today);
  138.         yesterday.setDate(yesterday.getDate() - 1);
  139.  
  140.         if (date.toDateString() === today.toDateString()) {
  141.             return 'Today';
  142.         } else if (date.toDateString() === yesterday.toDateString()) {
  143.             return 'Yesterday';
  144.         } else {
  145.             const options = {
  146.                 weekday: 'long',
  147.                 day: '2-digit',
  148.                 month: '2-digit',
  149.                 year: 'numeric',
  150.             };
  151.             const formattedDate = new Intl.DateTimeFormat('en-GB', options).format(date);
  152.             const [dayName, datePart] = formattedDate.split(', ');
  153.             return `${dayName}, ${datePart.replace(/\//g, '/')}`;
  154.         }
  155.     }
  156.  
  157.     function formatTime(dateString) {
  158.         const date = new Date(dateString);
  159.         const options = {
  160.             hour: '2-digit',
  161.             minute: '2-digit',
  162.             second: '2-digit',
  163.             hour12: false
  164.         };
  165.         return new Intl.DateTimeFormat('en-GB', options).format(date);
  166.     }
  167.  
  168.     function getApiKey() {
  169.         const scripts = document.getElementsByTagName('script');
  170.         for (const script of scripts) {
  171.             const match = script.textContent.match(/"INNERTUBE_API_KEY":\s*"([^"]+)"/);
  172.             if (match && match[1]) return match[1];
  173.         }
  174.         return null;
  175.     }
  176.  
  177.     function getClientInfo() {
  178.         const scripts = document.getElementsByTagName('script');
  179.         let clientName = null;
  180.         let clientVersion = null;
  181.         
  182.         for (const script of scripts) {
  183.             const nameMatch = script.textContent.match(/"INNERTUBE_CLIENT_NAME":\s*"([^"]+)"/);
  184.             const versionMatch = script.textContent.match(/"INNERTUBE_CLIENT_VERSION":\s*"([^"]+)"/);
  185.             
  186.             if (nameMatch && nameMatch[1]) clientName = nameMatch[1];
  187.             if (versionMatch && versionMatch[1]) clientVersion = versionMatch[1];
  188.         }
  189.         
  190.         return { clientName, clientVersion };
  191.     }
  192.  
  193.     async function fetchVideoInfo(videoId) {
  194.         try {
  195.             const apiKey = getApiKey();
  196.             if (!apiKey) return null;
  197.             
  198.             const { clientName, clientVersion } = getClientInfo();
  199.             if (!clientName || !clientVersion) return null;
  200.             
  201.             const response = await fetch(`https://www.youtube.com/youtubei/v1/player?key=${apiKey}`, {
  202.                 method: 'POST',
  203.                 headers: {
  204.                     'Content-Type': 'application/json',
  205.                 },
  206.                 body: JSON.stringify({
  207.                     videoId: videoId,
  208.                     context: {
  209.                         client: {
  210.                             clientName: clientName,
  211.                             clientVersion: clientVersion,
  212.                         }
  213.                     }
  214.                 })
  215.             });
  216.             
  217.             if (!response.ok) return null;
  218.             const data = await response.json();
  219.             
  220.             let viewCount = "Unknown";
  221.             if (data.videoDetails?.viewCount) {
  222.                 viewCount = formatNumber(data.videoDetails.viewCount);
  223.             }
  224.             
  225.             let publishDate = "Unknown";
  226.             if (data.microformat?.playerMicroformatRenderer?.publishDate) {
  227.                 publishDate = data.microformat.playerMicroformatRenderer.publishDate;
  228.             }
  229.             
  230.             return {
  231.                 viewCount,
  232.                 uploadDate: publishDate
  233.             };
  234.         } catch (error) {
  235.             return null;
  236.         }
  237.     }
  238.  
  239.     function updateBadge(viewCount, uploadTime, uploadDate) {
  240.         let badge = document.querySelector('.revealViewsAndUploadTime');
  241.         if (badge) {
  242.             badge.remove();
  243.         }
  244.         insertBadge(viewCount, uploadTime, uploadDate);
  245.     }
  246.  
  247.     function insertBadge(viewCount, uploadTime, uploadDate) {
  248.         const targetElement = document.querySelector('#secondary-inner #panels');
  249.         if (targetElement && !document.querySelector('.revealViewsAndUploadTime')) {
  250.             const badge = createBadge(viewCount, uploadTime, uploadDate);
  251.             targetElement.parentNode.insertBefore(badge, targetElement);
  252.         }
  253.     }
  254.  
  255.     function addStyles() {
  256.         if (!document.querySelector('#revealViewsAndUploadTime-styles')) {
  257.             const styleElement = document.createElement('style');
  258.             styleElement.id = 'revealViewsAndUploadTime-styles';
  259.             styleElement.textContent = badgeStyles;
  260.             document.head.appendChild(styleElement);
  261.         }
  262.     }
  263.  
  264.     async function updateBadgeWithInfo(videoId) {
  265.         updateBadge('Loading...', 'Loading...', 'Loading...');
  266.         try {
  267.             const videoInfo = await fetchVideoInfo(videoId);
  268.             if (videoInfo) {
  269.                 const uploadTime = formatTime(videoInfo.uploadDate);
  270.                 const formattedUploadDate = formatDate(videoInfo.uploadDate);
  271.                 updateBadge(videoInfo.viewCount, uploadTime, formattedUploadDate);
  272.             } else {
  273.                 updateBadge('Error', 'Error', 'Error');
  274.             }
  275.         } catch (error) {
  276.             updateBadge('Error', 'Error', 'Error');
  277.         }
  278.     }
  279.  
  280.     function init() {
  281.         addStyles();
  282.         const videoId = getVideoId();
  283.         if (videoId) {
  284.             updateBadgeWithInfo(videoId);
  285.         } else {
  286.             updateBadge('N/A', 'N/A', 'N/A');
  287.         }
  288.     }
  289.  
  290.     function observePageChanges() {
  291.         let lastVideoId = getVideoId();
  292.         let lastUrl = location.href;
  293.  
  294.         const observer = new MutationObserver(() => {
  295.             if (location.href !== lastUrl) {
  296.                 lastUrl = location.href;
  297.                 const currentVideoId = getVideoId();
  298.                 if (currentVideoId && currentVideoId !== lastVideoId) {
  299.                     lastVideoId = currentVideoId;
  300.                     updateBadgeWithInfo(currentVideoId);
  301.                 } else if (!currentVideoId) {
  302.                     updateBadge('Not a video', 'Not a video', 'Not a video');
  303.                 }
  304.             }
  305.         });
  306.  
  307.         observer.observe(document.body, { childList: true, subtree: true });
  308.     }
  309.  
  310.     if (document.readyState === 'loading') {
  311.         document.addEventListener('DOMContentLoaded', () => {
  312.             init();
  313.             observePageChanges();
  314.         });
  315.     } else {
  316.         init();
  317.         observePageChanges();
  318.     }
  319.  
  320.     window.addEventListener('yt-navigate-start', function() {
  321.         updateBadge('Loading...', 'Loading...', 'Loading...');
  322.     });
  323.  
  324.     window.addEventListener('yt-navigate-finish', function() {
  325.         const videoId = getVideoId();
  326.         if (videoId) {
  327.             updateBadgeWithInfo(videoId);
  328.         } else {
  329.             updateBadge('Not a video', 'Not a video', 'Not a video');
  330.         }
  331.     });
  332. })();