Merge branch 'main' of https://codeberg.org/ashley/poke

html/poketube.ejs

@@ -380,9 +380,6 @@ a[data-onclick="jump_to_time"] {
   <link href="/css/poketube.css?v=948934774844" rel=stylesheet>
   <!-- css files end -->
 
-  <link href="https://vjs.zencdn.net/7.17.0/video-js.css" rel="stylesheet" />
-  <script src="https://vjs.zencdn.net/7.17.0/video.min.js"></script>
-
 <% if (k.Video.Channel.Name == "7clouds") { %> 
 <style>
  @font-face {
@@ -600,7 +597,98 @@ background-color: #0000;
     top: 0;
   
 }
-  
+  #controls {
+    display: flex;
+    visibility: hidden;
+    position: absolute;
+    bottom: 0;
+    margin-bottom: 70px  !important;
+    margin: 0 20px;
+    width: 100%;
+    align-items:flex-end;
+  }
+  video:hover~#controls, #controls:hover {
+    visibility: visible;
+  }
+  .control-button {
+    width: 40px;
+    border-radius: 5px;
+    margin-bottom: 6px;
+    padding: 3px
+  }
+  .video-player-container {
+    position: relative;
+  }
+  .control-button svg {
+    fill: #c59cd0;
+    width: 40px;
+    margin-bottom: -6px;
+  }
+  #seekbar {
+    display: flex;
+    margin-left: 20px;
+    margin-right: 20px;
+    width: 100%;
+  }
+  input[id*="-slider"] {
+    flex-grow: 1;
+    -webkit-appearance: none;
+    appearance: none;
+    background: #ffffff;
+    border: 1px solid #000000;
+    margin-bottom: 23px;
+    cursor: pointer;
+    width: 0.5rem;
+    height: 5px !important;
+    display: block;
+    border-radius: 50px;
+  }
+  input[type=range]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    border: 1px solid #000000;
+    height: 21px;
+    width: 21px;
+    border-radius: 20px;
+    background: var(--div-gradient);
+    cursor: pointer;
+    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+  }
+  input[type=range]::-moz-range-thumb {
+    border: 1px solid #000000;
+    height: 21px;
+    width: 21px;
+    border-radius: 20px;
+    background: var(--div-gradient);
+    cursor: pointer;
+    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+  }
+  #timestamps {
+    margin-right: 40px;
+    text-shadow: 1px 1px 2px black;
+  }
+  html:fullscreen video {
+    display: block !important;
+    position: fixed !important;
+    top: 0 !important;
+    left: 0 !important;
+    width: 100vw !important;
+    height: 100vh !important;
+    z-index: 999999 !important;
+  }
+  html:fullscreen *:not(html, video, body, ptd-app-ejs, .app, .watch-page, .primary, .video-player-container, #popupMenu, #popupMenu *) {
+    visibility: hidden !important;
+  }
+  .error-card {
+    background-color: #823434aa;
+    margin: 30px;
+    padding: 5px 20px;
+    border: 2px solid red;
+    border-radius: 10px;
+  }
+  #buffer-failed-warning {
+    display: none;
+  }
+
   .rainbow-gradient {
     background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
     -webkit-background-clip: text;
@@ -616,9 +704,352 @@ background-color: #0000;
   </style>
 </noscript>
 <script>
-  
+  const qua = new URLSearchParams(new URL(window.location.href).search).get("quality") || "";
+  const playSVG = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>play-circle-outline</title><path d="M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M10,16.5L16,12L10,7.5V16.5Z" /></svg>'
+  const pauseSVG = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>pause-circle-outline</title><path d="M13,16V8H15V16H13M9,16V8H11V16H9M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4Z" /></svg>'
+  function csts(seconds) {
+    var hours = Math.floor(seconds / 3600);
+    var minutes = Math.floor((seconds - (hours * 3600)) / 60);
+    var secs = Math.floor(seconds - (hours * 3600) - (minutes * 60));
+    if (hours === 0) {
+        var timeString = minutes.toString().padStart(2, '0') + ':' +
+          secs.toString().padStart(2, '0');
+    } else {
+        var timeString = hours.toString().padStart(2, '0') + ':' +
+          minutes.toString().padStart(2, '0') + ':' +
+          secs.toString().padStart(2, '0');
+    }
+    return timeString;
+}
+function cstsRemaining(totalTimeInSeconds, elapsedTimeInSeconds) {
+    var remainingSeconds = totalTimeInSeconds - elapsedTimeInSeconds;
+    var hours = Math.floor(remainingSeconds / 3600);
+    var minutes = Math.floor((remainingSeconds % 3600) / 60);
+    var secs = Math.floor(remainingSeconds % 60);
+
+    var timeString;
+    if (hours === 0) {
+        timeString = minutes.toString().padStart(2, '0') + ':' + secs.toString().padStart(2, '0');
+    } else {
+        timeString = hours.toString().padStart(2, '0') + ':' + minutes.toString().padStart(2, '0') + ':' + secs.toString().padStart(2, '0');
+    }
+
+    return '-' + timeString;
+}
+  function showErrorCard(e) {
+    try {
+      switch (e.target.error.code) {
+      case e.target.error.MEDIA_ERR_ABORTED:
+        return;
+        break;
+      case e.target.error.MEDIA_ERR_NETWORK:
+        document.querySelector("div p span").innerText = "(Network error)"
+        break;
+      case e.target.error.MEDIA_ERR_DECODE:
+        document.querySelector("div p span").innerText = "(Decode error/lack of browser support)"
+        break;
+      case e.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED:
+        document.querySelector("div p span").innerText = "(Network error or format not supported)"
+        break;
+      default:
+        document.querySelector("div p span").innerText = "(Unknown error)"
+        break;
+      } 
+    }
+    catch {
+      document.querySelector("div p span").innerText = "(Network error)"
+    }
+    document.getElementById("buffer-failed-warning").style.display = "block";
+  }
+  let canPlayPause = true;
+  let didFirstTimePlay = false;
+  document.addEventListener("DOMContentLoaded", () => {
+    setInterval(()=>{
+    if(!document.getElementById("video").paused) {
+      document.getElementById("play-pause").innerHTML = pauseSVG;
+      
+    }
+    else {
+      aud.pause()
+      document.getElementById("play-pause").innerHTML = playSVG;
+    }
+    }, 100);
+    //FIXME: saved playback intentionally overwritten
+    localStorage.setItem(`progress-${new URLSearchParams(window.location.search).get('v')}`, 0);
+    // Controls and high-res playback
+    //TODO - a
+    let setTime = false
+    const seekbar = document.getElementById("duration-slider")
+    const video = document.getElementById("video");
+    let shouldUseRemaining = false;
+    const timestamps = document.getElementById("timestamps");
+    video.addEventListener("timeupdate", (event) => {      
+      seekbar.value = event.target.currentTime;
+      timestamps.innerText = shouldUseRemaining ? `${cstsRemaining(video.duration, video.currentTime)}/${csts(video.duration)}` : `${csts(video.currentTime)}/${csts(video.duration)}`;
+    });
+    timestamps.addEventListener("mouseover", () => {
+      shouldUseRemaining = true;
+      timestamps.innerText = `${cstsRemaining(video.duration, video.currentTime)}/${csts(video.duration)}`;
+    });
+    timestamps.addEventListener("mouseout", () => {
+      shouldUseRemaining = false;
+      timestamps.innerText = `${csts(video.currentTime)}/${csts(video.duration)}`;
+    });
+    // test
+    
+      seekbar.addEventListener("input", (event) => {
+          video.pause()
+          canPlayPause = false;
+          if(qua != "medium") {
+            aud.pause()
+            aud.currentTime = event.target.value
+          }
+          video.currentTime = event.target.value
+          canPlayPause = true;
+          setTimeout(()=>{
+            video.play();
+            aud.play();
+          }, 200)
+      });
+      
+      // Play/Pause
+      
+      const playPauseButton = document.getElementById("play-pause");
+      playPauseButton.innerHTML = pauseSVG;
+      function toggleVideo() {    
+        if(!canPlayPause) return;
+          if(document.getElementById("popupMenu").style.display == "none") {
+            if(!document.fullscreen) {
+              if(!video.paused) {
+              video.pause(); if(qua != "medium") { aud.pause(); } playPauseButton.innerHTML = playSVG;
+            }
+            else {
+              video.play(); if(qua != "medium") { aud.play(); } playPauseButton.innerHTML = pauseSVG;
+            }
+            }
+          }
+          else {
+            document.getElementById("popupMenu").style.display = "none"
+          } 
+      }
+      playPauseButton.addEventListener("click", () => {
+        toggleVideo()
+      });
+      video.addEventListener("pause", ()=>{if(qua != "medium") {aud.pause()}});
+      video.addEventListener("play", ()=>{if(qua != "medium") {aud.play()}})
+      video.addEventListener("click", toggleVideo);
+      video.addEventListener("dblclick", () => { 
+        document.documentElement.requestFullscreen();
+      });
+      function handleVolumeChange(element) {
+        switch (element.volume) {
+          case 1:
+            element.volume = 0;
+            document.querySelector("#muteOption #new").innerText = "25%"
+            document.querySelector("#muteOption #current").innerText = "0%"
+            break;
+          case 0:
+            element.volume = 0.25;
+            document.querySelector("#muteOption #new").innerText = "50%"
+            document.querySelector("#muteOption #current").innerText = "25%"
+            break;
+          case 0.25:
+            element.volume = 0.5;
+            document.querySelector("#muteOption #new").innerText = "75%"
+            document.querySelector("#muteOption #current").innerText = "50%"
+            break;
+          case 0.5:
+            element.volume = 0.75;
+            document.querySelector("#muteOption #new").innerText = "100%"
+            document.querySelector("#muteOption #current").innerText = "75%"
+            break;
+          case 0.75:
+            element.volume = 1;
+            document.querySelector("#muteOption #new").innerText = "0%"
+            document.querySelector("#muteOption #current").innerText = "100%"
+            break;
+          default:
+            element.volume = 1;
+            document.querySelector("#muteOption #new").innerText = "0%"
+            document.querySelector("#muteOption #current").innerText = "100%"
+            break;
+        }
+      }
+      document.getElementById("muteOption").addEventListener("click", () => {
+        if(qua != "medium") { 
+          handleVolumeChange(aud)
+        }
+        else {
+          handleVolumeChange(video)
+        }
+      });
+      document.getElementById("syncOption").addEventListener("click", () => {
+        aud.pause(); video.pause();  playPauseButton.innerHTML = playSVG;
+        video.currentTime > aud.currentTime ? aud.currentTime = video.currentTime : video.currentTime = aud.currentTime;
+        playPauseButton.innerHTML = pauseSVG;
+      });
+      setTimeout(()=>{
+           if(!didFirstTimePlay) {
+            video.addEventListener("seeked", (event) => {
+          setTimeout(()=>{
+              canPlayPause = true;
+              if(video.currentTime==0||aud.currentTime==0) return;
+              video.pause(); aud.pause(); playPauseButton.innerHTML = playSVG;
+              },1)
+           });
+          aud.addEventListener("seeked", (event) => {
+            setTimeout(()=>{
+              if(video.currentTime==0||aud.currentTime==0) return;
+              video.pause(); aud.pause(); playPauseButton.innerHTML = playSVG;
+            },1)
+          });
+          didFirstTimePlay = true;
+           }
+          },100)
+      document.addEventListener("fullscreenchange", function() {
+        if(document.fullscreen) {
+          video.controlsList = "noplaybackrate nodownload"
+          window.onscroll = function () { window.scrollTo(0, 0); };
+          document.documentElement.style.overflow = "hidden"
+          video.controls = true;
+        }
+        if(!document.fullscreen) {
+          video.controlsList = ""
+          window.onscroll = null;
+          document.documentElement.style.overflow = null
+          video.controls = false;
+        }
+      });
+      video.addEventListener("fullscreenchange", () => {
+        video.fullscreen = false;
+        document.exitFullscreen();
+      });
+      video.addEventListener("contextmenu", (event) => {
+        if(document.fullscreen) {
+          event.preventDefault()
+          const popupMenu = document.getElementById('popupMenu');
+          if (popupMenu) {
+            const xPosition = event.clientX + window.pageXOffset;
+            const yPosition = event.clientY + window.pageYOffset;
+            popupMenu.style.left = `${xPosition}px`;
+            popupMenu.style.top = `${yPosition}px`;
+          }
+          popupMenu.style.display = "block"
+        }
+      });
+    function startPlayback() {
+        // Final prepare
+        seekbar.max = video.duration
+        const timestamps = document.getElementById("timestamps");
+        timestamps.innerText = `${csts(video.currentTime)}/${csts(video.duration)}`;
+        
+        // Show controls
+        try {
+          playPauseButton.innerHTML = pauseSVG;
+          vid.play();
+          aud.play();
+          didFirstTimePlay = true;
+          
+        }
+        catch {}
+        
+        if(!setTime) {
+          //FIXME: saved playback intentionally overwritten
+          aud.currentTime = 0
+          vid.currentTime = 0
+          seekbar.value = 0
+          setTime = true
+        }
+        setTimeout(()=>{
+      video.addEventListener("seeking", (event) => {     
+      if(!didFirstTimePlay) return; 
+      if(qua != "medium") {
+        video.pause()
+        canPlayPause = false;
+        aud.pause()
+        aud.currentTime = event.target.currentTime
+      }
+    });
+    }, 500)
+    }
+    const aud = document.getElementById("aud");
+    const vid = document.getElementById("video");
+    function shouldPlay() {
+      if(vid.readyState === HTMLMediaElement.HAVE_ENOUGH_DATA) {
+        startPlayback();
+      }
+    }
+    aud.addEventListener("canplaythrough", shouldPlay);
+    vid.addEventListener("canplaythrough", shouldPlay);
+  })
 </script>
-       
+         <% if(shortsui) { %>
+                                                       <script>
+        // Function to apply styles after DOM has loaded
+        function applyStyles() {
+            const styles = `
+                .player {
+                    width: fit-content;
+                    margin-left: auto;
+                    margin-right: auto;
+                    height: fit-content;
+                }
+
+                .video-player-container {
+                    max-width: fit-content;
+                    min-width: fit-content;
+                    margin-left: auto;
+                    margin-right: auto;
+                    aspect-ratio: var(--ptd-watch-width-ratio) / var(--ptd-watch-height-ratio);
+                }
+            `;
+
+            // Create a style element and set its content
+            const styleElement = document.createElement('style');
+            styleElement.innerHTML = styles;
+
+            // Append the style element to the document head
+            document.head.appendChild(styleElement);
+        }
+
+        // Event listener to call applyStyles after DOM has loaded
+        window.onload = applyStyles;
+                                 </script>
+                                                    <% } %>
+
+            <% if (inv_vid.author.endsWith(' - Topic')) { %> 
+                                                       <script>
+        // Function to apply styles after DOM has loaded
+        function applyStyles() {
+            const styles = `
+                .player {
+                    width: fit-content;
+                    margin-left: auto;
+                    margin-right: auto;
+                    height: fit-content;
+                }
+
+                .video-player-container {
+                    max-width: fit-content;
+                    min-width: fit-content;
+                    margin-left: auto;
+                    margin-right: auto;
+                    aspect-ratio: var(--ptd-watch-width-ratio) / var(--ptd-watch-height-ratio);
+                }
+            `;
+
+            // Create a style element and set its content
+            const styleElement = document.createElement('style');
+            styleElement.innerHTML = styles;
+
+            // Append the style element to the document head
+            document.head.appendChild(styleElement);
+        }
+
+        // Event listener to call applyStyles after DOM has loaded
+        window.onload = applyStyles;
+                                 </script>
+                                                    <% } %>
              <% if(dm) { %>
                
                
@@ -700,28 +1131,16 @@ background-color: #0000;
 </script>
 <ptd-app-iconfixer>
 <script>
-    document.addEventListener('DOMContentLoaded', function() {
-      var player = videojs('video');
+ // Preload the icon image
+    var iconImage = new Image();
+    iconImage.src = "/css/yt-ukraine.svg";
 
-      <% if (!qua) { //TODO - a %>
-     
-<% 
-  let itag = '136'; // Default itag
-  inv_vid.adaptiveFormats.forEach(format => {
-    if (format.itag == '298') {
-      itag = '298';
-    }
-  });
-%>
-           player.src([
-        { type: "video/mp4", src: "<%=u%>/latest_version?id=<%=inv_vid.videoId%>&itag=<%=itag%>&local=true" },  
-        { type: "audio/mp3", src: "<%=u%>/latest_version?id=<%=inv_vid.videoId%>&itag=140&local=true" }  
-      ]);
- 
-
-       <% } else { %>   
-         <% } %>  
-    });
+    // Wait for the icon image to load before showing it
+    iconImage.onload = function() {
+      var iconElement = document.querySelector('link[rel="icon"]');
+      iconElement.href = iconImage.src;
+      iconElement.type = "image/svg+xml";
+    };
 </script>    
 </ptd-app-iconfixer>
 <ptd-app-ejs>
@@ -843,7 +1262,7 @@ if your domain matches this code you are probably in poketube.fun owo:3
 <div class="video-title" style="color:var(--text-color);font-family:var(--text-font-primary);;font-weight:var(--text-header-weight);font-stretch: extra-expanded;margin-top: 0px;margin-bottom: -3px;font-size: larger;line-height: 20.7px;text-align: center;">Options</div>
         				<a href="/customize" style="text-decoration: none;" class="dropdown__item">
                             <i  class="fa-light fa-brush"></i>
-                      Customize Poke
+                      Customize PokeTube
         </a>
     
 		<a href="/account-create" style="text-decoration: none;" class="dropdown__item">
@@ -994,7 +1413,13 @@ Offical Discord Server! :3
     
 		<div id="<%=sha384(inv_vid.videoId)%>" class="video-player-container">
       
-   
+      <% if (!qua) { //TODO - a %>
+        <audio id="aud" preload>
+          <source src="<%=u%>/latest_version?id=<%=inv_vid.videoId%>&itag=140&local=true" type="video/mp4" onerror="showErrorCard(event)"/>
+        </audio>
+      <% } else { %>
+        <audio id="aud"></audio>
+      <% } %>
       <noscript>
         <% if (!qua) { %>
           <div id="nojs-high-res-warning" class="error-card">
@@ -1002,14 +1427,27 @@ Offical Discord Server! :3
           </div>
         <% } %>
       </noscript>
-   
-      <video class="video-js player video-ambient-container" id="video" style="border-radius: 16px; box-sizing: border-box; min-width: 100%; display: block;" autoplay controls>
+      <div id="buffer-failed-warning" class="error-card">
+        <p>
+        Oh no, the video couldn't be loaded :(
+          <br/>
+          You can try refreshing the page!
+          <br/>
+          <span></span>
+        </p>
+      </div>
+      <video class="player video-ambient-container" id="video" style="border-radius: 16px; box-sizing: border-box; min-width: 100%; display: block;" autoplay preload onerror="showErrorCard(event)">
       <% if (isvidious) { %>
         <% if (!qua) { %>
-
-           <source id="my-spanish-audio-track" src="https://eu-proxy.poketube.fun/latest_version?id=<%=inv_vid.videoId%>&itag=18&local=true" type="audio/ogg">
-   
-   
+<% 
+  let itag = '136'; // Default itag
+  inv_vid.adaptiveFormats.forEach(format => {
+    if (format.itag == '298') {
+      itag = '298';
+    }
+  });
+%>
+<source src="<%=u%>/latest_version?id=<%=inv_vid.videoId%>&itag=<%=itag%>&local=true" type="video/mp4; codecs=&quot;avc1.64001F, mp4a.40.2&quot;" label="hd720" selected="true" onerror="showErrorCard(event)">
         <% } %>
         <% if (qua === "medium") { %>
           <source src="<%=u%>/latest_version?id=<%=inv_vid.videoId%>&itag=18&local=true" type="video/mp4; codecs=&quot;avc1.64001F, mp4a.40.2&quot;" label="sd360" selected="true" onerror="showErrorCard(event)">
@@ -1046,8 +1484,23 @@ Offical Discord Server! :3
         <track src="/api/subtitles?v=<%=inv_vid.videoId%>&h=<%= %>" label="<%=  video.Subtitles.Subtitle.language.replace("United States","Simplified - USA") %>" kind="subtitles">      
       <% } %>                                                       
     </video>
-    
+    <div id="controls"> <!-- TODO: CONTROLS -->
+      <button id="play-pause" class="control-button">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>play-circle-outline</title><path d="M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M10,16.5L16,12L10,7.5V16.5Z" /></svg>
+      </button>
       
+      <div id="seekbar">
+          <input type="range" min="0" step="any" value="0" id="duration-slider">
+      </div>
+      <p id="timestamps">...</p>
+      <!--
+      <div>
+        <span>volume</span>
+        <input type="range" min="0" max="1" step="any" value="1" id="volume-slider">
+      </div>
+      -->
+      
+  </div>
     <% if (!a) { %>
       <canvas width="12" height="6" class="ambient-canvas" id="ambient-canvas-1"></canvas>
       <canvas width="12" height="6" class="ambient-canvas" id="ambient-canvas-2"></canvas>
@@ -2397,7 +2850,7 @@ a {
 
 
                      
-                                                <source src="https://eu-proxy.poketube.fun/latest_version?id=<%=inv_vid.videoId%>&itag=136&local=true" type="video/mp4; codecs=&quot;avc1.64001F, mp4a.40.2&quot;" label="hd720" selected="true">
+                                                <source src="https://eu-proxy.poketube.fun/latest_version?id=<%=inv_vid.videoId%>&itag=18&local=true" type="video/mp4; codecs=&quot;avc1.64001F, mp4a.40.2&quot;" label="hd720" selected="true">
 
                                                                              <% } %>                
 

html/search.ejs

@@ -541,6 +541,230 @@ font-weight: 1000;">You are not alone</h2>
     </p>
 </div>
 <% } %>
+<% 
+const fakeNewsSources = {
+    "InfoWars": { 
+        category: "conspiracy", 
+        reason: "InfoWars has been widely criticized for promoting conspiracy theories and false information, such as falsely claiming that the Sandy Hook Elementary School shooting was a hoax.", 
+        search: "Is it true that InfoWars promotes conspiracy theories and false information?" 
+    },
+    "Breitbart": { 
+        category: "conservative", 
+        reason: "Breitbart is known for its extreme political bias and spreading misleading information, including downplaying the severity of COVID-19.", 
+        search: "Is it true that Breitbart spreads misleading information about COVID-19?" 
+    },
+    "Daily Mail": { 
+        category: "tabloid", 
+        reason: "The Daily Mail is frequently criticized for sensationalism and misinformation, such as publishing misleading health and science stories.", 
+        search: "Is it true that the Daily Mail publishes misleading health and science stories?" 
+    },
+    "Natural News": { 
+        category: "pseudoscience", 
+        reason: "Natural News promotes pseudoscience and conspiracy theories, including false vaccine claims and unverified health information.", 
+        search: "Is it true that Natural News promotes pseudoscience and false vaccine claims?" 
+    },
+    "RT news": { 
+        category: "state-sponsored", 
+        reason: "RT is a state-funded media outlet known for promoting Russian government perspectives and biased reporting on international issues.", 
+        search: "Is it true that RT promotes Russian government perspectives and biased reporting?" 
+    },
+    "Sputnik": { 
+        category: "state-sponsored", 
+        reason: "Sputnik spreads Russian state propaganda and publishes misleading information about Western countries.", 
+        search: "Is it true that Sputnik spreads Russian state propaganda?" 
+    },
+    "Before It's News": { 
+        category: "conspiracy", 
+        reason: "Before It's News is known for spreading conspiracy theories and fake news, including fabricated stories about global events.", 
+        search: "Is it true that Before It's News spreads conspiracy theories and fake news?" 
+    },
+    "Your News Wire": { 
+        category: "conspiracy", 
+        reason: "Your News Wire publishes false information and conspiracy theories, including fabricated reports on various topics.", 
+        search: "Is it true that Your News Wire publishes false information and conspiracy theories?" 
+    },
+    "WorldTruth.TV": { 
+        category: "conspiracy", 
+        reason: "WorldTruth.TV spreads conspiracy theories and pseudoscience, including false health information and other dubious claims.", 
+        search: "Is it true that WorldTruth.TV spreads conspiracy theories and pseudoscience?" 
+    },
+    "NewsPunch": { 
+        category: "conspiracy", 
+        reason: "NewsPunch publishes false information and conspiracy theories, including unsubstantiated claims about political figures.", 
+        search: "Is it true that NewsPunch publishes false information and conspiracy theories?" 
+    },
+    "Civic Tribune": { 
+        category: "fake-news", 
+        reason: "Civic Tribune is known for hoaxes and misinformation, including fabricated stories about political events.", 
+        search: "Is it true that Civic Tribune is known for hoaxes and misinformation?" 
+    },
+    "The Daily Stormer": { 
+        category: "extremist", 
+        reason: "The Daily Stormer promotes hate speech and extremist views, including anti-Semitic and other hateful content.", 
+        search: "Is it true that The Daily Stormer promotes hate speech and extremist views?" 
+    },
+    "Times of Israel": { 
+        category: "state-sponsored", 
+        reason: "Times of Israel has faced criticism for biased reporting and spreading propaganda, especially regarding the Israel-Palestine conflict.", 
+        search: "Is it true that Times of Israel has biased reporting on the Israel-Palestine conflict?" 
+    },
+    "Zero Hedge": { 
+        category: "conspiracy", 
+        reason: "Zero Hedge promotes conspiracy theories and financial misinformation, including false claims about market events.", 
+        search: "Is it true that Zero Hedge promotes conspiracy theories and financial misinformation?" 
+    },
+    "Pravda": { 
+        category: "state-sponsored", 
+        reason: "Pravda is a state-run media outlet known for spreading Russian government propaganda with a history of biased reporting on international events.", 
+        search: "Is it true that Pravda spreads Russian government propaganda?" 
+    },
+    "Press TV": { 
+        category: "state-sponsored", 
+        reason: "Press TV promotes Iranian government propaganda and often spreads biased information about Western countries.", 
+        search: "Is it true that Press TV promotes Iranian government propaganda?" 
+    },
+    "Fox News": { 
+        category: "conservative", 
+        reason: "Fox News is often criticized for extreme political bias and misinformation, such as its reporting on the 2020 US election.", 
+        search: "Is it true that Fox News has extreme political bias and misinformation?" 
+    },
+    "The Blaze": { 
+        category: "conservative", 
+        reason: "The Blaze promotes right-wing viewpoints and sometimes misleading information, including false claims about political figures.", 
+        search: "Is it true that The Blaze promotes misleading information?" 
+    },
+    "OANN": { 
+        category: "conservative", 
+        reason: "OANN spreads far-right viewpoints and conspiracy theories, including false claims about election fraud.", 
+        search: "Is it true that OANN spreads far-right viewpoints and conspiracy theories?" 
+    },
+    "Newsmax": { 
+        category: "conservative", 
+        reason: "Newsmax promotes extreme right-wing perspectives and misinformation, including false claims about the COVID-19 pandemic.", 
+        search: "Is it true that Newsmax promotes extreme right-wing perspectives and misinformation?" 
+    },
+    "Al Jazeera": { 
+        category: "state-sponsored", 
+        reason: "Al Jazeera, a Qatar state-funded media outlet, has a history of promoting government viewpoints and biased reporting on Middle Eastern conflicts.", 
+        search: "Is it true that Al Jazeera promotes government viewpoints and biased reporting?" 
+    },
+    "The Sun": { 
+        category: "tabloid", 
+        reason: "The Sun is known for sensationalism and often publishes exaggerated or false stories, particularly about celebrities and high-profile topics.", 
+        search: "Is it true that The Sun publishes exaggerated or false stories?" 
+    }
+};
+
+const normalizedQuery = q.toLowerCase().replace(/\s+/g, '');
+const matchedSource = Object.keys(fakeNewsSources).find(source => normalizedQuery.includes(source.toLowerCase().replace(/\s+/g, '')));
+
+if (q.includes('-debug-news')) {
+%>
+
+<div class="container">          
+    <h2 class="debug-title">
+        <span class="debug-icon">🔍</span> Debug Info
+    </h2>
+    <p class="debug-intro">
+        Here are all the sources and their details:
+    </p>
+    <ul class="debug-list">
+        <% Object.keys(fakeNewsSources).forEach(source => { %>
+            <li class="debug-item">
+                <strong><%= source %></strong> - <%= fakeNewsSources[source].reason %> <br>
+                <a class="debug-link" href="https://www.google.com/search?q=<%= fakeNewsSources[source].search %>">Find more info</a>
+            </li>
+        <% }); %>
+    </ul>
+</div>
+
+<% } else if (matchedSource) { %>
+
+<div class="container">          
+    <h2 class="warning-title">
+        <span class="warning-icon">🚫</span> 
+        <br> Be Cautious with This Source 
+    </h2>
+    <p class="warning-intro">
+        Hai there! It looks like you might be looking at info from <strong><%= matchedSource %></strong>, which is known for spreading fake news or propaganda.
+    </p>
+    <p class="warning-tips">
+        Here are some quick tips to check if what you're reading is legit:
+    </p>
+    <ul class="tips-list">
+        <li class="tips-item"><strong>Check the source's rep:</strong> Reliable sites usually have a good track record for being accurate and fair.</li>
+        <li class="tips-item"><strong>See if other reputable sites are reporting the same news:</strong> If it's just one place, be cautious.</li>
+        <li class="tips-item"><strong>Use fact-checking sites:</strong> Try <a href="https://www.snopes.com/" class="fact-check-link">Snopes</a> or <a href="https://www.factcheck.org/" class="fact-check-link">FactCheck.org</a>.</li>
+        <li class="tips-item"><strong>Look at the publication date:</strong> Make sure it's current and not out of context.</li>
+        <li class="tips-item"><strong>Check for links and citations:</strong> Good articles usually back up their claims with evidence.</li>
+    </ul>
+    <p class="warning-info">
+        For more info on why <strong><%= matchedSource %></strong> might not be reliable, check out a search for:
+    </p>
+    <ul class="warning-links">
+        <li><a class="warning-link" href="https://www.google.com/search?q=<%= fakeNewsSources[matchedSource].search %>"><%= fakeNewsSources[matchedSource].reason %></a></li>
+    </ul>
+
+    <p>wrong filter? <a href="https://codeberg.org/ashley/poke/issues/new">Report :3</p>
+</div>
+
+<% } %>
+
+<style>
+    .container {
+        max-width: 800px;
+        margin: 20px auto;
+        padding: 20px;
+        border-radius: 8px;
+        background: #1a1a1a;
+        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    }
+
+    .debug-title, .warning-title {
+        font-family: 'PokeTube Flex';
+        font-size: large;
+        text-align: left;
+        font-stretch: ultra-expanded;
+        font-weight: 1000;
+    }
+
+    .debug-icon, .warning-icon {
+        font-size: 7em;
+    }
+
+    .debug-intro, .warning-intro, .warning-tips, .warning-info {
+        font-size: 16px;
+        color: #fff;
+        margin: 10px 0;
+    }
+
+    .debug-list, .tips-list, .warning-links {
+        padding: 0;
+        margin: 0;
+        list-style: none;
+    }
+
+    .debug-item, .tips-item, .warning-link {
+        margin-bottom: 10px;
+    }
+
+    .debug-link, .fact-check-link, .warning-link {
+        color: #007bff;
+        text-decoration: none;
+    }
+
+    .debug-link:hover, .fact-check-link:hover, .warning-link:hover {
+        text-decoration: underline;
+    }
+
+    .tips-list {
+        background-color: #111;
+        border: 1px solid #ddd;
+        border-radius: 5px;
+        padding: 15px;
+    }
+</style>
+