<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>IEQ Education</title>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <div class="container">
    <div class=" section left ">
      <div class="heading"> Foundations of a
        Healthy Building
      </div>
      <div class="buttons" id="left-buttons">
        <div class="vid-button " onclick="playVideo('./assets/videos/overview.mp4',true)">
          <div><img src="./assets/ieq assets/ieq.png">
            </img>
          </div>
          <div>IEQ Video</div>
        </div>
        <div class="vid-button" onclick="playVideo('./assets/videos/air.mp4',true)">
          <div><img src="./assets/ieq assets/air.png">
            </img>
          </div>
          <div>Air Quality</div>
        </div>
        <div class="vid-button" onclick="playVideo('./assets/videos/thermal.mp4',true)">
          <div><img src="./assets/ieq assets/thermal.png">
            </img>
          </div>
          <div> Thermal Health</div>
        </div>
        <div class="vid-button" onclick="playVideo('./assets/videos/ventilation.mp4',true)">
          <div><img src="./assets/ieq assets/ventilation.png">
            </img>
          </div>
          <div>Ventilation</div>
        </div>
        <div class="vid-button" onclick="playVideo('./assets/videos/moisture.mp4',true)">
          <div><img src="./assets/ieq assets/moisture.png">
            </img>
          </div>
          <div>Moisture</div>
        </div>
        <div class="vid-button" onclick="playVideo('./assets/videos/noise.mp4',true)">
          <div><img src="./assets/ieq assets/noise.png">
            </img>
          </div>
          <div> Noise</div>
        </div>
        <div class="vid-button" onclick="playVideo('./assets/videos/dust.mp4',true)">
          <div><img src="./assets/ieq assets/pestanddust.png">
            </img>
          </div>
          <div>Dust & Pests</div>
        </div>
      </div>

    </div>
    

    <div class="videobar">
      <div class="tool-tip" id="tooltip">
        <!-- <img src="./assets/Tooltiprl.png"> -->
        <p>Please select a video title from either side to play </p>
      </div>
      <div class="sub-container" id="subtitles">
        <div class="subtitle-buttons" style="flex-direction:row;">

          <p>SUBTITLES</p>
        </div>
        <div class="subtitle-buttons">
          <div class="sub-button" onclick="setSubtitles('fre')">FRENCH </div>
          <div class="sub-button" onclick="setSubtitles('jap')">JAPANESE
          </div>
          <div class="sub-button" onclick="setSubtitles('spa')">SPANISH
          </div>
        </div>
      </div>
    </div>
    <div class="logo">
      <img src="./assets/Daikin Logo 1080.png" style="width: 100%;">
    </div>
    <div class="video-container">
      <div class="video-heading"> <strong>I</strong>ndoor <strong>E</strong>nvironment <strong>Q</strong>uality</div>
      <style>
        video::cue {
          font-size: 35px;
          z-index: 1000;
          position: relative;
        }
      </style>

      <video src="" autoplay muted controls style="display: none; width: 100% ; height:75%" id="videoPlayer"
        class="videosection">
        <!-- <track default id="track" kind="subtitles" src="" srclang="en" label="Subtitle"> -->
      </video>
      <!-- <div id="custom-subtitle" class="custom-subtitle"></div> -->
      <!-- <img src="./assets/IEQ Background 1.gif" id="gifPlaceholder" style=" width: 100%; height: 75%;" /> -->
      <video id="loopingVideoPlayer" style="width: 100%; height: 75%;" autoplay muted></video>
     


    </div>
    <div class=" section right">
      <!-- <div class="heading-right"> IEQ in the
        DC Office</div> -->
      <div class="buttons" id="right-buttons">
       
      </div>

    </div>
  </div>
  <script src="./assets/videos/config.js"></script>

  <script src="script.js"></script>
</body>

</html> this is my index.html and const videoPlayer = document.getElementById('videoPlayer');
// const gifPlaceholder = document.getElementById("gifPlaceholder");
const subButton = document.querySelectorAll('.sub-button');
const vidButtons = document.querySelectorAll('.vid-button');
const subtitles = document.getElementById("subtitles");
const tooltip = document.getElementById("tooltip");
const loopingVideoPlayer = document.getElementById('loopingVideoPlayer');
let vidButtonsRight;

let selectedSubtitle = null, isSubtitle = true, isVideoPlaying = false;
let subtitleCues = [], currentSubtitleIndex = 0;
const looping_videos = [
  './assets/videos/WELL Cert Video - DSIC IEQ Station.mp4',
  './assets/videos/IAQ in DC Office - Video - DSIC IEQ Station.mp4'
];
let currentVideoIndex = 0;

createVideoButtons(videos);// to create right side video buttons  from [./assets/videos/config.js]
const showSubs = () => {
  console.log(tooltip);
  if (isVideoPlaying) {
    tooltip.style.display = "none"
    subtitles.style.display = isSubtitle ? "block" : "none"

  } else {
    tooltip.style.display = "block"
    subtitles.style.display = "none"
  }
}
function createVideoButtons(videoArray) {
  const containerDiv = document.getElementById('right-buttons');
  for (const videoObj of videoArray) {
    const videoButton = document.createElement('div');
    videoButton.classList.add('vid-button-right');
    videoButton.textContent = videoObj.label;
    if (videoObj.disabled) {
      videoButton.classList.add('disabled')
    } else {
      videoButton.onclick = () => playVideo(`./assets/videos/${videoObj.fileName}`, false)
    };
    containerDiv.appendChild(videoButton);
  }
  vidButtonsRight = document.querySelectorAll('.vid-button-right');
  vidButtonsRight.forEach(button => {
    button.addEventListener('click', function () {
      // Remove 'active' class from all buttons
      if (this.classList.contains("disabled")) return
      removeActiveButton()

      // Add 'active' class to the clicked button
      this.classList.add('right-active');
    });
  });
}


function playVideo(videoSrc, sub) {
  isSubtitle = sub
  isVideoPlaying = true
  videoPlayer.style.display = "block";
  // gifPlaceholder.style.display = "none";
  loopingVideoPlayer.style.display = "none";
  videoPlayer.src = videoSrc;
  videoPlayer.loop = true;
  removeSubActiveButton()
  selectedSubtitle = null
  subtitleCues = [];
  currentSubtitleIndex = 0;
  document.getElementById('custom-subtitle').innerText = '';
  videoPlayer.play();
  showSubs()
}

function setSubtitles(language) {
  if (!isSubtitle || !isVideoPlaying) return
  if (selectedSubtitle == language) {
    // Same subtitle selected again, turn off subtitles
    removeSubActiveButton()
    selectedSubtitle = null;
    subtitleCues = [];
    document.getElementById('custom-subtitle').innerText = '';
    return;
  }
  selectedSubtitle = language;
  const videoSrc = videoPlayer.src;
  if (!videoSrc) {
    console.error("Video source is not set.");
    return;
  }
  const videoName = videoSrc.split('/').pop().slice(0, -4);
  // Get subtitle text
  let subtitleText = '';
  switch (selectedSubtitle) {
    case 'jap':
      subtitleText = subTitleDirectory[videoName].japanese;
      break;
    case 'spa':
      subtitleText = subTitleDirectory[videoName].spanish;
      break;
    default:
      subtitleText = subTitleDirectory[videoName].french;
  }
  // Parse the VTT text into cues
  subtitleCues = parseVTT(subtitleText);
  currentSubtitleIndex = 0;
}

// Function to parse VTT subtitles
function parseVTT(vttText) {
  const cues = [];
  const lines = vttText.split('\n');
  let idx = 0;
  while (idx < lines.length) {
    let line = lines[idx].trim();
    if (!line || line.startsWith('WEBVTT')) {
      idx++;
      continue;
    }
    // Cue identifier (optional)
    let cueIdentifier = '';
    if (!line.includes('-->')) {
      cueIdentifier = line;
      idx++;
      line = lines[idx].trim();
    }
    // Timecodes
    const timecode = line.split(' --> ');
    if (timecode.length !== 2) {
      idx++;
      continue; // Not a valid cue
    }
    const startTime = parseVTTTimestamp(timecode[0]);
    const endTime = parseVTTTimestamp(timecode[1]);
    idx++;
    // Subtitle text
    let text = '';
    while (idx < lines.length && lines[idx].trim()) {
      if (text !== '') text += '\n';
      text += lines[idx].trim();
      idx++;
    }
    cues.push({ startTime, endTime, text });
    idx++;
  }
  return cues;
}

function parseVTTTimestamp(s) {
  // e.g., '00:00:05.500' or '00:00:05,500'
  const match = s.match(/(?:(\d+):)?(\d+):(\d+)[.,](\d+)/);
  if (!match) return 0;
  const hours = parseInt(match[1] || '0');
  const minutes = parseInt(match[2]);
  const seconds = parseInt(match[3]);
  const milliseconds = parseInt(match[4]);
  return hours * 3600 + minutes * 60 + seconds + milliseconds / 1000;
}

// Update subtitle display based on video time
function updateSubtitle() {
  if (!subtitleCues || subtitleCues.length === 0) {
    document.getElementById('custom-subtitle').innerText = '';
    return;
  }
  const currentTime = videoPlayer.currentTime;
  // Check if current time is within current cue
  let cue = subtitleCues[currentSubtitleIndex];
  if (currentTime >= cue.startTime && currentTime <= cue.endTime) {
    // Cue is active
    document.getElementById('custom-subtitle').innerText = cue.text;
    return;
  } else if (currentTime > cue.endTime) {
    // Move to next cue
    currentSubtitleIndex++;
    if (currentSubtitleIndex < subtitleCues.length) {
      cue = subtitleCues[currentSubtitleIndex];
      if (currentTime >= cue.startTime && currentTime <= cue.endTime) {
        document.getElementById('custom-subtitle').innerText = cue.text;
        return;
      } else {
        // Not in any cue now
        document.getElementById('custom-subtitle').innerText = '';
        return;
      }
    } else {
      // No more cues
      document.getElementById('custom-subtitle').innerText = '';
      return;
    }
  } else if (currentTime < cue.startTime) {
    // Rewinded the video, search backwards
    currentSubtitleIndex = 0;
    for (let i = 0; i < subtitleCues.length; i++) {
      cue = subtitleCues[i];
      if (currentTime >= cue.startTime && currentTime <= cue.endTime) {
        document.getElementById('custom-subtitle').innerText = cue.text;
        currentSubtitleIndex = i;
        return;
      }
    }
    document.getElementById('custom-subtitle').innerText = '';
    return;
  }
}

// Event listeners
videoPlayer.addEventListener('ended', function () {
  videoPlayer.style.display = "none";
  // gifPlaceholder.style.display = "block";
  loopingVideoPlayer.style.display = "block";
  removeActiveButton()
  removeSubActiveButton()
  selectedSubtitle = null
  isVideoPlaying = false
  subtitleCues = [];
  currentSubtitleIndex = 0;
  document.getElementById('custom-subtitle').innerText = '';
  showSubs()
});

videoPlayer.addEventListener('timeupdate', updateSubtitle);

subButton.forEach(button => {
  button.addEventListener('click', function (e) {
    if (!isSubtitle || !isVideoPlaying) return
    removeSubActiveButton()
    this.classList.add('sub-active');
  });
});
vidButtons.forEach(button => {
  button.addEventListener('click', function () {
    removeActiveButton()
    this.classList.add('active');
  });
});


// Helper functions
const removeSubActiveButton = () => {
  subButton.forEach(btn => {
    btn.classList.remove('sub-active');
  });
}
const removeActiveButton = () => {
  vidButtons.forEach(btn => {
    btn.classList.remove('active');
  });
  vidButtonsRight.forEach(btn => {
    btn.classList.remove('right-active');
  });
}

function loadVideo(index) {
  loopingVideoPlayer.src = looping_videos[index];
  loopingVideoPlayer.load();
  loopingVideoPlayer.play();
}

// Event listener that triggers when the current video ends
loopingVideoPlayer.addEventListener('ended', () => {
  // Update the index to the next video, looping back to the first video if necessary
  currentVideoIndex = currentVideoIndex === 0 ? 1 : 0;
  loadVideo(currentVideoIndex);
});

loadVideo(currentVideoIndex);
playVideo('./assets/videos/air.mp4', true)
setTimeout(() => {
  setSubtitles('jap');
}, 3000); this is my script.js and  const videos = [ // EDIT HERE FOR RIGHT SECTION BUTTONS
    { label: 'IWBI WELL Building Standard Features of DC Office', disabled: false, fileName:'WELL Cert Video - DSIC IEQ Station.mp4' },
    { label: 'Indoor Air Quality (IAQ) Performance of DC Office', disabled: false  , fileName:'IAQ in DC Office - Video - DSIC IEQ Station.mp4'},
    { label: '', disabled: true ,fileName: '' },
    { label: '', disabled: true ,fileName: '' },
  ];  this is my cofig.js it is showing both the buttons on right side as black I cannot see any text how to fix this