const video = document.getElementById('video');
function audioPlay(){}
function audioPause(){}
var videoTime;
const videoControls = document.getElementById('video-controls');
const videoControlsUp = document.getElementById('video-controls-up');
const playButton = document.getElementById('play');
const codeButton = document.getElementById('code');
const playbackIcons = document.querySelectorAll('.playback-icons use');
const timeElapsed = document.getElementById('time-elapsed');
const duration = document.getElementById('duration');
const progressBar = document.getElementById('progress-bar');
const seek = document.getElementById('seek');
const seekTooltip = document.getElementById('seek-tooltip');
const volumeButton = document.getElementById('volume-button');
const volumeIcons = document.querySelectorAll('.volume-button use');
const volumeMute = document.querySelector('use[href="#volume-mute"]');
const volumeLow = document.querySelector('use[href="#volume-low"]');
const volumeHigh = document.querySelector('use[href="#volume-high"]');
const volume = document.getElementById('volume');
const playbackAnimation = document.getElementById('playback-animation');
const fullscreenButton = document.getElementById('fullscreen-button');
const videoContainer = document.getElementById('video-container');
const fullscreenIcons = fullscreenButton.querySelectorAll('use');
const pipButton = document.getElementById('pip-button');
const videoWorks = !!document.createElement('video').canPlayType;
if (videoWorks) {
  video.controls = false;
  videoControls.classList.remove('hidden');
}
function togglePlay() {
  var element = document.getElementById('video-container');
  if (element) {
	element.scrollIntoView({ behavior: 'smooth', block: 'start' });
	setTimeout(secondTryScroll, 750); 
  }
  if (video.paused || video.ended) {
    video.play();
	audioPlay();
	hideControls();
  } else {
	audioPause();
    video.pause();
	showControls();
  }
}
video.addEventListener('ended', function() {
    video.currentTime = 0;
	audioTime(0);
});
function secondTryScroll(){
  var element = document.getElementById('video-container');
  if (element) {
    element.scrollIntoView({ behavior: 'smooth', block: 'start' });
  }
}
function updatePlayButton() {
  playbackIcons.forEach((icon) => icon.classList.toggle('hidden'));
  if (video.paused || video.ended) { 
	initializeVideo();
  } else { }
}
function formatTime(timeInSeconds) {
  if(timeInSeconds > 0){
	const result = new Date(timeInSeconds * 1000).toISOString().substr(11, 8);
	return {
	  hours: result.substr(0, 2),
      minutes: result.substr(3, 2),
      seconds: result.substr(6, 2),
	};
  }else{
	return {
	  hours: "00",
      minutes: "00",
      seconds: "00",
	};
  }
}
function initializeVideo() {
  const videoDuration = Math.round(video.duration);
  seek.setAttribute('max', videoDuration);
  progressBar.setAttribute('max', videoDuration);
  const time = formatTime(videoDuration);
  let durationText = '';
  if (time.hours > 0) {
    if(time.hours > 10){
      durationText += `${time.hours}:`;
    }else{
      durationText += time.hours.substr(1,1) +":";
    }
  }
  durationText += `${time.minutes}:`;
  durationText += `${time.seconds}`;
  duration.innerText = durationText;
  
  duration.setAttribute('datetime', `${time.hours}h ${time.minutes}m ${time.seconds}s`);
}
function updateTimeElapsed() {
  const videoDuration = Math.round(video.duration);
  seek.setAttribute('max', videoDuration);
  progressBar.setAttribute('max', videoDuration);
  const timeDur = formatTime(videoDuration);
  const time = formatTime(Math.round(video.currentTime));
  let durationText = '';
  if (time.hours > 0 || timeDur.hours > 0) {
    if(time.hours > 10){
      durationText += `${time.hours}:`;
    }else{
      durationText += time.hours.substr(1,1) +":";
    }
  }
  durationText += `${time.minutes}:`;
  durationText += `${time.seconds}`;
  timeElapsed.innerText = durationText;
  timeElapsed.setAttribute('datetime', `${time.hours}h ${time.minutes}m ${time.seconds}s`);
}
function updateProgress() {
  seek.value = Math.floor(video.currentTime);
  progressBar.value = Math.floor(video.currentTime);
  if (video.paused || video.ended) { 
	initializeVideo();
  }
}
function updateSeekTooltip(event) {
  const skipTo = Math.round(
    (event.offsetX / event.target.clientWidth) *
      parseInt(event.target.getAttribute('max'), 10)
  );
  seek.setAttribute('data-seek', skipTo);
  const t = formatTime(skipTo);
  seekTooltip.textContent = `${t.hours}:${t.minutes}:${t.seconds}`;
  const rect = video.getBoundingClientRect();
  seekTooltip.style.left = `${event.pageX - rect.left}px`;
}
function skipAhead(event) {
  const skipTo = event.target.dataset.seek
    ? event.target.dataset.seek
    : event.target.value;
  video.currentTime = skipTo;
  audio.currentTime = skipTo;
  progressBar.value = skipTo;
  seek.value = skipTo;
}
function updateVolume() {
  if (video.muted) {
    video.muted = false;
  }
  video.volume = volume.value;
}
function updateVolumeIcon() {
  volumeIcons.forEach((icon) => {
    icon.classList.add('hidden');
  });
  if (video.muted || video.volume === 0) {
    volumeMute.classList.remove('hidden');
  } else if (video.volume > 0 && video.volume <= 0.5) {
    volumeLow.classList.remove('hidden');
  } else {
    volumeHigh.classList.remove('hidden');
  }
}
function toggleMute() {
  video.muted = !video.muted;
  if (video.muted) {
    volume.setAttribute('data-volume', volume.value);
    volume.value = 0;
  } else {
    volume.value = volume.dataset.volume;
  }
}
function animatePlayback() {
  playbackAnimation.animate(
    [
      {
        opacity: 1,
        transform: 'scale(1)',
      },
      {
        opacity: 0,
        transform: 'scale(1.3)',
      },
    ],
    {
      duration: 500,
    }
  );
}
function toggleFullScreen() { 
  if (video.paused) {
    showControls();
  } else {
    setTimeout(() => hideControls(), 2000);
  }

  // Prüfen, ob Fullscreen aktiv ist
  if (document.fullscreenElement || document.webkitFullscreenElement) {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    }
  } else {
    // iPhone / Safari: Nutzt den nativen Fullscreen-Modus für Video
    if (video.webkitSupportsFullscreen) {
      video.webkitEnterFullscreen();
    } 
    // Android & Desktop
    else if (videoContainer.webkitRequestFullscreen) {
      videoContainer.webkitRequestFullscreen();
    } else if (videoContainer.requestFullscreen) {
      videoContainer.requestFullscreen();
    }

    // Falls eine Android-App mit "AndroidInterface" existiert
    if (typeof AndroidInterface !== 'undefined') {
      // AndroidInterface.startVideoPlayback(video.src);
    }
  }
}
function updateFullscreenButton() {
  fullscreenIcons.forEach((icon) => icon.classList.toggle('hidden'));
  if (document.fullscreenElement) {
  } else {
  }
}
async function togglePip() {
  try {
    if (video !== document.pictureInPictureElement) {
      pipButton.disabled = true;
      await video.requestPictureInPicture();
    } else {
      await document.exitPictureInPicture();
    }
  } catch (error) {
    console.error(error);
  } finally {
    pipButton.disabled = false;
  }
}
function hideControls() {
  if (video.paused) {
    return;
  }
  videoControls.classList.add('hide');
  videoControlsUp.classList.add('hide');
}
function showControls() {
  videoControls.classList.remove('hide');
  videoControlsUp.classList.remove('hide');
}
/*
function keyboardShortcuts(event) {
  const { key } = event;
  switch (key) {
    case 'k':
      togglePlay();
      animatePlayback();
      if (video.paused) {
        showControls();
      } else {
        setTimeout(() => {
          hideControls();
        }, 2000);
      }
      break;
    case 'm':
      toggleMute();
      break;
    case 'f':
      toggleFullScreen();
      break;
    case 'p':
      togglePip();
      break;
  }
}
*/
playButton.addEventListener('click', togglePlay);
video.addEventListener('play', updatePlayButton);
video.addEventListener('pause', updatePlayButton);
video.addEventListener('loadedmetadata', initializeVideo);
video.addEventListener('timeupdate', updateTimeElapsed);
video.addEventListener('timeupdate', updateProgress);
video.addEventListener('volumechange', updateVolumeIcon);
video.addEventListener('mouseenter', showControls);
video.addEventListener('mouseleave', hideControls);
videoControls.addEventListener('mouseenter', showControls);
videoControls.addEventListener('mouseleave', hideControls);
videoControlsUp.addEventListener('mouseenter', showControls);
videoControlsUp.addEventListener('mouseleave', hideControls);
seek.addEventListener('mousemove', updateSeekTooltip);
seek.addEventListener('input', skipAhead);
volume.addEventListener('input', updateVolume);
volumeButton.addEventListener('click', toggleMute);
fullscreenButton.addEventListener('click', toggleFullScreen);
videoContainer.addEventListener('fullscreenchange', updateFullscreenButton);
pipButton.addEventListener('click', togglePip);
document.addEventListener("mousemove", function() {
  if (document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement) {
      if (video.paused) {
        showControls();
      } else {
		showControls();
        setTimeout(() => {
          hideControls();
        }, 2000);
      }
   
  } 
});
document.addEventListener('DOMContentLoaded', () => {
  if (!('pictureInPictureEnabled' in document)) {
    pipButton.classList.add('hidden');
  }
  if(typeof AndroidInterface !== 'undefined'){
	pipButton.classList.add('hidden');
	/* fullscreenButton.classList.add('hidden'); */
	}
});
var qualitySelector = document.getElementById("qualitySelector");

function changeQuality() {
	audioPause();
    var selectedQuality = qualitySelector.value;
    var sources = video.getElementsByTagName("source");
    for (var i = 0; i < sources.length; i++) {
      var source = sources[i];
      var quality = source.getAttribute("data-quality");
      if (quality === selectedQuality) {
		if (video.paused || video.ended) {
		} else {
			playbackIcons.forEach((icon) => icon.classList.toggle('hidden'));
		}		
		videoTime = video.currentTime;
        source.removeAttribute("disabled");
        video.src = source.src;
		saveVideoQuality(quality);
        video.load();
		video.currentTime = videoTime;
        break;
      } else {
        source.setAttribute("disabled", "true");
      }
    }
}
var jumpTime = 10;
var lastTouchTime = 0;
video.addEventListener('click', function(event) {
    if (event.detail > 1) {
        event.preventDefault();
        return;
    }
	togglePlay();
	animatePlayback();
});
video.addEventListener('touchstart', function(event) {
    var currentTime = new Date().getTime();
    var deltaTime = currentTime - lastTouchTime;
    if (deltaTime < 500) {
        var touchX = event.changedTouches[0].pageX - video.offsetLeft;
        if (touchX < video.offsetWidth / 2) {
            video.currentTime -= jumpTime;
			video.play();
			audioPlay();
        }
        else {
            video.currentTime += jumpTime;
			audioPlay();
			video.play();	
        }
    }
    lastTouchTime = currentTime;
});
function setVideoQuality(value){
	if(value !== null && value.length > 0){
		var selectElement = document.getElementById("qualitySelector");
		if(selectElement){
			selectElement.value = value;
			var event = new Event('change');
			selectElement.dispatchEvent(event);
			changeQuality();
		}
	}
}
function saveVideoQuality(value){
	localStorage.setItem("videoQuality", value)
}
function checkVideoQualitySet(){
  if(localStorage.getItem("videoQuality")){
	
  }else{
	localStorage.setItem("videoQuality","480p");
  }
}
checkVideoQualitySet();
setVideoQuality(localStorage.getItem('videoQuality'));

codeButton.setAttribute('data-title', 'Einbettungstext kopieren');