Testing Immersive Text

Trying to implement the great example code provided by the ChatGPT as detailed in this post: https://www.everythingneurodiversity.com/post/getting-programming-help-from-chatgpt-for-creating-immersive-text-on-everything-neurodiversity

Seem to still be having issues with the Youtube API. Back to the chatbot for help.

---

After some googling, and the Wix Velo Reference, it seems that Wix has some built in functions for this type of thing.

Welcome to the Huberman Lab Podcast, where we discuss science and science-based tools for everyday life. I'm Andrew Huberman, and I'm a professor of neurobiology and ophthalmology at Stanford School of Medicine.

---

Update and new method: Seems to be working but the autoplay isnt working for some reason.

<!-- HTML for the transcript -->

<div id="transcript">

<p class="line" data-start="0" data-end="5">

This is the first line of the transcript.

</p>

<p class="line" data-start="5" data-end="10">

This is the second line of the transcript.

</p>

<!-- Add additional lines of the transcript here -->

</div>

<!-- HTML for the YouTube video -->

<div id="video">

<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

</div>

<style>

/* CSS for the transcript */

#transcript {

width: 30%;

float: left;

}

.line {

cursor: pointer;

}

/* CSS for the YouTube video */

#video {

width: 70%;

float: right;

}

</style>

<script>

// JavaScript for the transcript

const transcript = document.getElementById('transcript');

transcript.addEventListener('click', (event) => {

// Check if the user clicked on a line of the transcript

if (event.target.classList.contains('line')) {

// Get the start and end times for the line that was clicked

const start = event.target.getAttribute('data-start');

const end = event.target.getAttribute('data-end');

// Use the YouTube API to seek the video to the specified time

const player = new YT.Player('video', {});

player.seekTo(start, true);

}

});

</script>

<script src="https://www.youtube.com/iframe_api"></script>

const transcript = document.getElementById('transcript');

transcript.addEventListener('click', (event) => {
  // Check if the user clicked on a line of the transcript
  if (event.target.classList.contains('line')) {
    // Get the start and end times for the line that was clicked
    const start = event.target.getAttribute('data-start');
    const end = event.target.getAttribute('data-end');

    // Use the YouTube API to load the video and start playing it at the specified time
    const player = new YT.Player('video', {});
    player.loadVideoById({
      'videoId': 'VIDEO_ID',
      'startSeconds': start,
      'endSeconds': end
    });
  }
});

<!-- HTML for the transcript -->
<div id="transcript">
  <p class="line" data-start="0" data-end="5">
    This is the first line of the transcript.
  </p>
  <p class="line" data-start="5" data-end="10">
    This is the second line of the transcript.
  </p>
  <!-- Add additional lines of the transcript here -->
</div>

<!-- HTML for the YouTube video -->
<div id="video">
  <!-- The YouTube player will be added here -->
</div>

<style>
  /* CSS for the transcript */
  #transcript {
    width: 30%;
    float: left;
  }

  .line {
    cursor: pointer;
  }

  /* CSS for the YouTube video */
  #video {
    width: 70%;
    float: right;
  }
</style>

<script>
  // Load the YouTube API
  const tag = document.createElement('script');
  tag.src = "https://www.youtube.com/iframe_api";
  document.head.appendChild(tag);

  // Create a function to initialize the YouTube player
  function onYouTubeIframeAPIReady() {
    // Create a new player
    const player = new YT.Player('video', {
      width: '560',
      height: '315',
      videoId: 'VIDEO_ID',
      events: {
        'onReady': onPlayerReady
      }
    });
  }

  // Create a function to handle the player's "ready" event
  function onPlayerReady(event) {
    // Get the transcript element
    const transcript = document.getElementById('transcript');

    // Add a click event listener to the transcript
    transcript.addEventListener('click', (event) => {
      // Check if the user clicked on a line of the transcript
      if (event.target.classList.contains('line')) {
        // Get the start and end times for the line that was clicked
        const start = event.target.getAttribute('data-start');
        const end = event.target.getAttribute('data-end');

        // Use the YouTube API to load the video and start playing it at the specified time
        event.target.player.loadVideoById({
          'videoId': 'VIDEO_ID',
          'startSeconds': start,
          'endSeconds': end
        });
      }
    });
  }
</script>

// Load the YouTube API
const tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
document.head.appendChild(tag);

// Create a variable to store the player object
let player;

// Create a function to initialize the YouTube player
function onYouTubeIframeAPIReady() {
  // Create a new player
  player = new YT.Player('video', {
    width: '560',
    height: '315',
    videoId: 'VIDEO_ID',
    events: {
      'onReady': onPlayerReady
    }
  });
}

// Create a function to handle the player's "ready" event
function onPlayerReady(event) {
  // Get the transcript element
  const transcript = document.getElementById('transcript');

  // Add a click event listener to the transcript
  transcript.addEventListener('click', (event) => {
    // Check if the user clicked on a line of the transcript
    if (event.target.classList.contains('line')) {
      // Get the start and end times for the line that was clicked
      const start = event.target.getAttribute('data-start');
      const end = event.target.getAttribute('data-end');

      // Use the YouTube API to load the video and start playing it at the specified time
      player.loadVideoById({
        'videoId': 'VIDEO_ID',
        'startSeconds': start,
        'endSeconds': end
      });
    }
  });
}

Seems to be some issue with the autoplay, will test using githubpages as a host:

Still the same issue. So I went back to the chatbot:

function onPlayerReady(event) {
  // Get the transcript element
  const transcript = document.getElementById('transcript');

  // Add a click event listener to the transcript
  transcript.addEventListener('click', (event) => {
    // Check if the user clicked on a line of the transcript
    if (event.target.classList.contains('line')) {
      // Get the start and end times for the line that was clicked
      const start = event.target.getAttribute('data-start');
      const end = event.target.getAttribute('data-end');

      // Use the YouTube API to load the video and start playing it at the specified time
      player.loadVideoById({
        'videoId': 'QmOF0crdyRU',
        'startSeconds': start,
        'endSeconds': end
      });
      
      // Start playing the video
      player.playVideo();
    }
  });
}

Its not perfect, but close for now. Lets go back to the highlighting text:

// Create a function to handle the player's "timeupdate" event
function onPlayerTimeUpdate(event) {
  // Get the transcript element
  const transcript = document.getElementById('transcript');

  // Get all the lines in the transcript
  const lines = transcript.querySelectorAll('.line');

  // Loop through the lines and check if the current time of the video falls within the start and end times for each line
  for (const line of lines) {
    const start = line.getAttribute('data-start');
    const end = line.getAttribute('data-end');
    if (event.target.getCurrentTime() >= start && event.target.getCurrentTime() <= end) {
      // If the current time falls within the start and end times for the line, highlight it
      line.classList.add('highlight');
    } else {
      // If the current time does not fall within the start and end times for the line, remove the highlight
      line.classList.remove('highlight');
    }
  }
}

// Add the "timeupdate" event listener to the YouTube player
player.addEventListener('timeupdate', onPlayerTimeUpdate);

---

Back to getting the transcripts for the videos to load, I continued to run into issues with the youtube api. Until I asked the ChatGPT specifically to help me accomplish this with wix fetch. I was given some backend code to add to the site as well as an html to insert. here goes:

---