Th3BossC/TranscriptApi

1function youtube_video_id(url){2    var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/;3    var match = url.match(regExp);4    return (match&&match[7].length==11)? match[7] : false;5}6 7 8// Theme implementation9 10const theme = localStorage.getItem('theme');11const navbar_bg = localStorage.getItem('navbar-bg');12const navbar_color = localStorage.getItem('navbar-color');13const button_content = localStorage.getItem('button-content');14 15 16const themeButton = document.getElementById('theme');17const body = document.body;18const nav = document.getElementById('navbar');19 20body.classList.add(theme || 'light');21nav.classList.add(navbar_bg || 'bg-light');22nav.classList.add(navbar_color || 'navbar-light')23themeButton.innerHTML = button_content || '<i class="bi bi-moon-fill"></i> Toggle Theme';24 25 26themeButton.onclick = () => {27    if (body.classList.contains('light')) {28        body.classList.replace('light', 'dark');29        nav.classList.replace('bg-light', 'bg-dark');30        nav.classList.replace('navbar-light', 'navbar-dark'); 31        themeButton.innerHTML = '<i class="bi bi-brightness-high-fill"></i> Toggle Theme'32 33        localStorage.setItem('theme', 'dark');34        localStorage.setItem('navbar-bg', 'bg-dark');35        localStorage.setItem('navbar-color', 'navbar-dark');36        localStorage.setItem('button-content', themeButton.innerHTML);37    }38    else {39        body.classList.replace('dark', 'light');40        nav.classList.replace('bg-dark', 'bg-light');41        nav.classList.replace('navbar-dark', 'navbar-light');42        themeButton.innerHTML = '<i class="bi bi-moon-fill"></i> Toggle Theme';43 44        localStorage.setItem('theme', 'light');45        localStorage.setItem('navbar-bg', 'bg-light');46        localStorage.setItem('navbar-color', 'navbar-light');47        localStorage.setItem('button-content', themeButton.innerHTML);48    }49}50 51// darkButton.onclick = () => {52//     body.classList.replace('light', 'dark');53//     nav.classList.replace('bg-light', 'bg-dark');54//     nav.classList.replace('navbar-light', 'navbar-dark'); 55//     darkButton.classList.add('active');56//     darkButton.classList.add('disabled');57//     lightButton.classList.remove('active');58//     lightButton.classList.remove('disabled'); 59// };60 61// lightButton.onclick = () => {62//     body.classList.replace('dark', 'light');63//     nav.classList.replace('bg-dark', 'bg-light');64//     nav.classList.replace('navbar-dark', 'navbar-light');   65//     lightButton.classList.add('active');66//     lightButton.classList.add('disabled');     67//     darkButton.classList.remove('active');68//     darkButton.classList.remove('disabled'); 69// };70 71 72const main_content = document.getElementById('main-content');73const video_title = document.getElementById('video-title');74const video_summary = document.getElementById('video-summary');75 76const button = document.getElementById('submit-btn');77const form = document.getElementById('url-form');78const url = document.getElementById('url')79 80async function getApiData(video_id) {81    const response = await fetch('http://localhost:5000/video_api/' + video_id);82    const jsonData = await response.json();83 84    console.log(jsonData);85    video_title.innerHTML = jsonData['title'];86    return video_summary.innerHTML = jsonData['summary'];87 88}89 90 91 92form.addEventListener('submit', (e) => {93    e.preventDefault();94    video_url = url.value;  95    if (video_url == "")96        return;97    video_id = youtube_video_id(video_url);98    video_title.innerHTML = 'Summarizing...';99    console.log(main_content.classList);100    //main_content.classList.remove('visually-hidden');101    main_content.style.clipPath = 'circle(200% at 50% 50%)';102    video_summary.innerHTML = '<div class="progress" role="progressbar" aria-label="Animated striped example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"> \103    <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 100%"></div> \104  </div>';105    if (video_id == false) {106        video_title.innerHTML = '[Error]';107        video_summary.innerHTML = 'Invalid video URL';108        return;109    }110    try {111        getApiData(video_id);112    }113    catch {114        video_title.innerHTML = '[Error]'115        video_summary.innerHTML = 'Error Video not found';116    }117}); 118 119