JavaScript script that provide real time animated update to like-count and views-count in a YouTube video page Using YouTube API v3.

RealTimeDataUpdateForYoutubeVideo.js

//JavaScript script that provide real time animated update to like-count and views-count in a YouTube video page Using YouTube API v3.

//you can run that code by copying it to the js console of your browser 
//and run the funcion Start()
//You can stop this by runing the fuction killTimer() or just refresh the page.
//this script use youtube API,for this reason I have created API key for this scrip,keep in minde the API key can stop working,so it's preferable to have your own API key.
//I was too lazy so I didn't add the real time update to comments number and subscibes may you can fork this guest and do it, so easy!!!!.
//

const API_Key = "AIzaSyAPXyji7zyhfUM5932TTdkD7BXQT5RMCyY";//here is the API key you can change it here
const ratingSelector = "yt-formatted-string.style-scope.ytd-toggle-button-renderer";//this the selctor of the html elements that represent likes count and dislikes count
const viewsSelector = "span.view-count.style-scope.yt-view-count-renderer";//this the selctor of the html element that represent views count.
const commentsSelectors = "#count > yt-formatted-string";
const channelStatistics= "https://youtube.googleapis.com/youtube/v3/channels?part=statistics&id=iA9HUcjhKNQ&fields=items.statistics.subscriberCount&key="+API_Key;
const videoStatistics = "https://youtube.googleapis.com/youtube/v3/videos?part=statistics&id=WzKejwI7J38&fields=items.statistics&key="+API_Key;

var isPaused = false;
var timer;

function animateValue(obj, start, end, duration) {
    start = parseInt(start);
    if (start=="NaN"){
        start = 0;
    }
    let startTimestamp = null;
    const step = (timestamp) => {
      if (!startTimestamp) startTimestamp = timestamp;
      const progress = Math.min((timestamp - startTimestamp) / duration, 1);
      obj.innerHTML = Math.floor(progress * (end - start) + start);
      if (progress < 1) {
        window.requestAnimationFrame(step);
      }
    };
    window.requestAnimationFrame(step);
  }
  
function timeCalculator(diff){
    if (diff==0) return 10;
    if(diff<20) return 2000;
    else if (diff < 100) return 3000;
    else if (diff < 500) return 7000;
    else if (diff < 1000) return 6000;
    else if (diff < 5000) return 8500;
    else return 9200;
}

async function getData(videoId){
    let url = "https://youtube.googleapis.com/youtube/v3/videos?part=statistics&id=" + videoId + "&fields=items.statistics&key=AIzaSyAPXyji7zyhfUM5932TTdkD7BXQT5RMCyY";
    return await fetch(url)
      .then(async data => {
        Data1 = await data.json();
        return Data1.items[0].statistics;
    }).catch(error => {
        console.log(error);
        return -1;
    });
}

function getVideoId(){
    let urlParams = new URLSearchParams(window.location.search);
    if (urlParams.get("v")!=null) return urlParams.get("v");
    return -1;
}

async function initElements(){
    let VideoId = getVideoId();
    let data = await getData(VideoId);
    let obj = document.querySelectorAll(ratingSelector);
    document.querySelector(viewsSelector).textContent = data.viewCount;
    obj[0].textContent = data.likeCount;
    obj[1].textContent = data.dislikeCount;
}

async function updateAll(){
    let data =await getData(getVideoId());
    let obj = document.querySelectorAll(ratingSelector);
    let likesObj = obj[0];
    let dislikesObj = obj[1];
    let viewsObj = document.querySelector(viewsSelector);

    animateValue(likesObj,likesObj.textContent, data.likeCount, timeCalculator(data.likeCount-likesObj.textContent));
    animateValue(dislikesObj,dislikesObj.textContent, data.dislikeCount, timeCalculator(data.dislikeCount-dislikesObj.textContent));
    animateValue(viewsObj,viewsObj.textContent, data.viewCount, timeCalculator(data.viewCount-viewsObj.textContent));
}

function pause(){
    isPaused=true;
}
function resume(){
    isPaused=false;
}

function killTimer(){
    clearInterval(timer);
}

async function Start(){
    if (getVideoId()!=-1){
        await initElements();
        timer = setInterval(async ()=>{
            if(!isPaused&&(getVideoId()!=-1)){
                await updateAll()
                console.log("updated!!")
        }
    }, 10000);
      timer;
    }
}