Jump to content

Mick Gordon: Difference between revisions

From Doom Relics
No edit summary
No edit summary
 
(2 intermediate revisions by the same user not shown)
Line 1: Line 1:
<div class="doom-hero">
<div class="radioBar">
   <div class="doom-hero__video" data-ytid="QHRuTYtSbJQ"></div>
  <button id="radioStart">▶ Radio</button>
  <span id="radioTitle">Not playing</span>
  <button id="radioReplay" disabled>↻ Replay</button>
   <button id="radioNext" disabled>⏭ Next</button>
</div>
 
<!-- Hidden YouTube player -->
<div id="ytPlayer" class="ytHidden"></div>
 
<style>
  .radioBar{
    display:flex; align-items:center; gap:10px;
    padding:10px 12px; border:1px solid rgba(255,120,0,.35);
    border-radius:10px; background:rgba(0,0,0,.45);
    color:#fff; max-width:720px;
  }
  #radioTitle{
    flex:1;
    overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
    opacity:.95;
  }
  .ytHidden{
    width:1px; height:1px; overflow:hidden;
    position:absolute; left:-9999px; top:-9999px;
  }
</style>


   [[https://doomrelics.com/images/3/36/Door.png]]
<script>
   const PLAYLIST_ID = "PLbskP5RAOv8iZNrpqyc12gQzhnOfmbpdO";


   <div class="doom-hero__content">
   // Load YouTube Iframe API
     <!-- Put your search bar / logo / buttons in here so they sit above the overlay -->
  (function(){
   </div>
    const s = document.createElement("script");
</div>
    s.src = "https://www.youtube.com/iframe_api";
    document.head.appendChild(s);
  })();
 
  let player;
 
  function setTitle(text){ document.getElementById("radioTitle").textContent = text; }
  function enableControls(on){
    document.getElementById("radioReplay").disabled = !on;
    document.getElementById("radioNext").disabled = !on;
  }
 
  window.onYouTubeIframeAPIReady = function () {
    player = new YT.Player("ytPlayer", {
      height: "1",
      width: "1",
      playerVars: {
        // no visible UI
        controls: 0,
        modestbranding: 1,
        rel: 0,
 
        // playlist
        listType: "playlist",
        list: PLAYLIST_ID,
 
        // don't autoplay until user clicks Start
        autoplay: 0
      },
      events: {
        onReady: () => setTitle("Ready"),
        onStateChange: (e) => {
          // When playing or buffering, update title
          if (e.data === YT.PlayerState.PLAYING || e.data === YT.PlayerState.BUFFERING) {
            const data = player.getVideoData ? player.getVideoData() : null;
            if (data && data.title) setTitle(data.title);
            enableControls(true);
          }
        }
      }
    });
  };
 
  document.getElementById("radioStart").addEventListener("click", () => {
     if (!player) return;
    // This user click is what makes playback/auto-play more likely to work
    player.playVideo();
 
    // Update title shortly after starting (sometimes metadata lags)
    setTimeout(() => {
      const data = player.getVideoData ? player.getVideoData() : null;
      if (data && data.title) setTitle(data.title);
      enableControls(true);
    }, 600);
  });
 
  document.getElementById("radioNext").addEventListener("click", () => {
    if (!player) return;
    player.nextVideo();
    setTimeout(() => {
      const data = player.getVideoData ? player.getVideoData() : null;
      if (data && data.title) setTitle(data.title);
    }, 400);
  });
 
   document.getElementById("radioReplay").addEventListener("click", () => {
    if (!player) return;
    player.seekTo(0, true);
    player.playVideo();
  });
</script>

Latest revision as of 01:15, 26 December 2025

 <button id="radioStart">▶ Radio</button>
 Not playing
 <button id="radioReplay" disabled>↻ Replay</button>
 <button id="radioNext" disabled>⏭ Next</button>

<style>

 .radioBar{
   display:flex; align-items:center; gap:10px;
   padding:10px 12px; border:1px solid rgba(255,120,0,.35);
   border-radius:10px; background:rgba(0,0,0,.45);
   color:#fff; max-width:720px;
 }
 #radioTitle{
   flex:1;
   overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
   opacity:.95;
 }
 .ytHidden{
   width:1px; height:1px; overflow:hidden;
   position:absolute; left:-9999px; top:-9999px;
 }

</style>

<script>

 const PLAYLIST_ID = "PLbskP5RAOv8iZNrpqyc12gQzhnOfmbpdO";
 // Load YouTube Iframe API
 (function(){
   const s = document.createElement("script");
   s.src = "https://www.youtube.com/iframe_api";
   document.head.appendChild(s);
 })();
 let player;
 function setTitle(text){ document.getElementById("radioTitle").textContent = text; }
 function enableControls(on){
   document.getElementById("radioReplay").disabled = !on;
   document.getElementById("radioNext").disabled = !on;
 }
 window.onYouTubeIframeAPIReady = function () {
   player = new YT.Player("ytPlayer", {
     height: "1",
     width: "1",
     playerVars: {
       // no visible UI
       controls: 0,
       modestbranding: 1,
       rel: 0,
       // playlist
       listType: "playlist",
       list: PLAYLIST_ID,
       // don't autoplay until user clicks Start
       autoplay: 0
     },
     events: {
       onReady: () => setTitle("Ready"),
       onStateChange: (e) => {
         // When playing or buffering, update title
         if (e.data === YT.PlayerState.PLAYING || e.data === YT.PlayerState.BUFFERING) {
           const data = player.getVideoData ? player.getVideoData() : null;
           if (data && data.title) setTitle(data.title);
           enableControls(true);
         }
       }
     }
   });
 };
 document.getElementById("radioStart").addEventListener("click", () => {
   if (!player) return;
   // This user click is what makes playback/auto-play more likely to work
   player.playVideo();
   // Update title shortly after starting (sometimes metadata lags)
   setTimeout(() => {
     const data = player.getVideoData ? player.getVideoData() : null;
     if (data && data.title) setTitle(data.title);
     enableControls(true);
   }, 600);
 });
 document.getElementById("radioNext").addEventListener("click", () => {
   if (!player) return;
   player.nextVideo();
   setTimeout(() => {
     const data = player.getVideoData ? player.getVideoData() : null;
     if (data && data.title) setTitle(data.title);
   }, 400);
 });
 document.getElementById("radioReplay").addEventListener("click", () => {
   if (!player) return;
   player.seekTo(0, true);
   player.playVideo();
 });

</script>