/*
// Simplicity Media Player
//
// Created 2021-2021 by Jan / gosimplicity.org
//
// last update: 2024-08-19
//
// Note: since media players work the same in any language,
//       don't use inline-start etc, use left etc.
//
*/

:root {
  --simplicityMPWidth: 300px; /* only used for non-fullscreen player */
  --simplicityMPVolumeControlBlockSize: 100px;
  --simplicityMPControlsBlockSize: 3em;
}

/* used to temporarily disable transitions */
.notransitions {
  transition: none !important;
}

#simplicityMediaPlayer {
  position: relative;
  width: var(--simplicityMPWidth);
}

#simplicityMediaPlayer * {
  color: white;
  text-shadow: 1px 1px 2px black;
  outline: none; /* no-one wants a focus ring */
  user-select: none;
}

#simplicityMediaPlayer[data-allcontrolshidden="true"] * {
  cursor: none; /* hide cursor when controls, navigation buttons are hidden - no ugly cursor obstructing the picture. */
}

/* The empty image must not steal space from the actual image. */
#simplicityMediaPlayerEmptyImage {
  display: none;
  width: 0;
  height: 0;
}

#simplicityMediaPlayerStill {
  display: flex; /* center both axes */
  align-items: center;
  justify-content: center;
  height: 100%;
}

#simplicityMediaPlayer {
  position: relative;
}

#simplicityMediaPlayerGalleryControls {
  background-color: transparent; /* prevent background from covering MediaElement */
}

#simplicityMediaPlayerMovingElement, #simplicityMediaPlayerStillElement {
  /* z-index: 10; */ /* ensure it is before navigation controls background */
}

#simplicityMediaPlayerMoving {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
}

/* Upscale image to fill whole screen if needed. */
/* Note that there's no way to specify a maximum magnification, so if displayed image is much smaller than display, */
/*   it will look a pixelated mess. */
#simplicityMediaPlayerStillElement {
  width: 100vw; /* begin upscale */
  height: 100vh;
  object-fit: contain; /* end upscale */
  max-width: 100%; /* ensure image does not overflow */
  max-height: 100%;
}

#simplicityMediaPlayerMoving:not([hidden]) + #simplicityMediaPlayerStill > #simplicityMediaPlayerStillElement {
  display: none; /* prevent StillElement from taking up space and covering moving player and thus preventing clicks from working. */
  /* width: 0px;
  height: 0px; */
}

#simplicityMediaPlayerMovingElement {
  /* This is needed to prevent 'random empty pixels' from appearing, causing media controls to protrude below the bottom. */
  /*   caused by series of inline-block elements, they create space where there's whitespace in the HTML source... */
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100vw;
  height: 100vh;
}

/* for image viewer, do not let video player occupy space */
#simplicityMediaPlayerMoving[hidden] {
  height: 0px;
}

/* for moving player, do not let still viewer occupy space */
#simplicityMediaPlayerStill[hidden] {
  height: 0px;
}

/* Unbreak 'view image'. Otherwise a 'transparent' MovingElement is overlapping the image in image viewer, */
/* hijacking the right-click menu to show video menu instead of image menu. */
#simplicityMediaPlayerMoving[hidden] #simplicityMediaPlayerMovingElement {
  height: 0px;
}

#simplicityMediaPlayerGalleryControls {
  position: absolute;
  display: flex;
  flex-direction: column;
  top: 0px;
  width: 100%;
  height: calc( 100% - var(--simplicityMPControlsBlockSize) );
  /* border: 3px solid fuchsia; */
  box-sizing: border-box;
  pointer-events: none;
}

/* for image viewer, let prev/next use full height */
#simplicityMediaPlayer #simplicityMediaPlayerMoving[hidden] ~ #simplicityMediaPlayerGalleryControls {
  /* height: calc( 100% - 4px ); */ /* the CSS random pixel monster is striking again. Seriously, can we just kill this beast? */
  height: 100%; /* FIXME: is this intermittent? Every time I add the 4px hack, next time I check it's not needed. I remove the hack, then it's needed again? */
}

#simplicityMediaPlayer.fullscreen #simplicityMediaPlayerMoving[hidden] ~ #simplicityMediaPlayerGalleryControls {
  height: inherit;
}

#simplicityMediaPlayer:not(.fullscreen) #simplicityMediaPlayerGalleryControls {
  height: calc( 100% - ( var(--simplicityMPControlsBlockSize) * 2 ) ); /* this is kinda weird. Where does this height come from? */
}

#simplicityMediaPlayerButtons > div {
  display: block;
  position: absolute;
  top: 0px;
  /* border: 5px solid yellowgreen; */
  outline: none;
  background-color: #000000bb; /* give some contrast for navigation buttons */
  /* background-color: #449922bb; */ /* debug */
  pointer-events: auto; /* restore pointer-events */
  box-sizing: border-box;
}

#simplicityMediaPlayerButtonPrev,
#simplicityMediaPlayerButtonNext {
  height: 100%;
  width: 16%;
}

#simplicityMediaPlayerButtons > div::before {
  content: "\0000a0";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  /* outline: 2px solid yellow; */
}

/* make button activation obvious for mouse */
#simplicityMediaPlayerPlay:hover,
#simplicityMediaPlayerMute:hover,
#simplicityMediaPlayerFullscreen:hover,
#simplicityMediaPlayerButtons > div:hover {
  /* background-color: #77777744; */ /* neutral */
  background-color: #390a46db; /* a dash of style */
}

#simplicityMediaPlayerButtonPrev::before,
#simplicityMediaPlayerButtonNext::before {
  padding-top: calc( var(--simplicityMPControlsBlockSize) ); /* center horizontally */
}

/* make shades for navigation buttons full-height when no video controls are shown (image viewer) */
/* galleryControls needs to be after subsequent sibling selector, as the buttons are children of the sibling. */
#simplicityMediaPlayerMoving[hidden] ~ #simplicityMediaPlayerGalleryControls #simplicityMediaPlayerButtonPrev::before,
#simplicityMediaPlayerMoving[hidden] ~ #simplicityMediaPlayerGalleryControls #simplicityMediaPlayerButtonNext::before {
  padding-top: 0px; /* center horizontally */
}

#simplicityMediaPlayerButtonClose {
  right: 0px;
  width: 3em;
  height: 3em;
  z-index: 70; /* make it above navigation next button */
}

#simplicityMediaPlayer.fullscreen #simplicityMediaPlayerButtonClose {
  --size: 8vw;
  width: max( 3em, var(--size) );
  height: max( 3em, var(--size) );
}

#simplicityMediaPlayerButtonNext:not(.hiddenControl) + #simplicityMediaPlayerButtonClose:not(:hover) {
  /* prevent double-shaded background overlay if next button is shown. */
  /* note that this still fails during transitions. */
  background-color: transparent;
}

#simplicityMediaPlayerButtonClose::before {
  top: 0px; /* needed? */
  right: 0px;
  background-image: url("navClose.svg");
}

#simplicityMediaPlayerButtonPrev {
  left: 0px;
}

#simplicityMediaPlayerButtonPrev::before {
  background-image: url("navPrev.svg");
}

#simplicityMediaPlayerButtonNext {
  right: 0px;
}

#simplicityMediaPlayerButtonNext::before {
  right: 0px;
  background-image: url("navNext.svg");
}

#simplicityMediaPlayerMovingControls,
#simplicityMediaPlayerButtonClose,
#simplicityMediaPlayerButtonPrev,
#simplicityMediaPlayerButtonNext {
  transition-property: opacity, visibility;
  transition-duration: 0.2s;
  transition-timing-function: ease-out;
}

/* set the background here, and the fade in/out, too instead of in ...Inner */
/* This allows ...Inner to be inset a little, so the play button has some space to its left. */
#simplicityMediaPlayerMovingControls {
  position: absolute;
  display: block;
  bottom: 0em;
  width: 100%;
  height: var(--simplicityMPControlsBlockSize);
  background-color: #000000bb;
  outline: none;
  /* There are small gaps between e.g. 'play' and 'seek' where 'prev' and 'next' buttons "shine through" - and eat clicks. */
  /* Just increase z-index of all moving controls, and the gaps don't matter anymore. */
  z-index: 55;
}

#simplicityMediaPlayerMovingControlsInner {
  display: flex;
  align-items: flex-end;
  column-gap: 1%;
  position: absolute;
  left: 0;
  bottom: 0px;
  width: 100%;
  height: var(--simplicityMPControlsBlockSize);
}

#simplicityMediaPlayerMovingControlsInner > *:first-child {
  /* margin-left: 2%; */ /* don't do this: keep play flush to border to profit from fitt's law. */
}

#simplicityMediaPlayerMovingControlsInner > *:last-child {
  /* margin-right: 2%; */ /* don't do this: keep fullscreen exit flush to border to profit from fitt's law. */
}

#simplicityMediaPlayerMovingControls.simplicityMediaPlayerMovingControlsHidden,
.hiddenControl {
  opacity: 0;
  visibility: hidden;
}

#simplicityMediaPlayerButtonClose.hiddenControl,
#simplicityMediaPlayerButtonPrev.hiddenControl,
#simplicityMediaPlayerButtonNext.hiddenControl,
#simplicityMediaPlayerMovingControls.simplicityMediaPlayerMovingControlsHidden {
  transition-duration: 1s;
}

#simplicityMediaPlayerMovingControls.simplicityMediaPlayerMovingControlsHidden {
  /* height: 0px; */ /* do not take up space for video player or controls when image viewer is active */
}

#simplicityMediaPlayer .verticallyCenterBlockWithMargin {
  margin-top: 50%;
  margin-bottom: 50%;
  height: max-content;
}

.blockSize100 {
  height: 100%;
}

/* Note: do not set #simplicityMediaPlayerButtonClose here, it needs to be above. */
.simplicityMediaPlayerItemWrapper,
#simplicityMediaPlayerPlay,
#simplicityMediaPlayerSeeker,
#simplicityMediaPlayerTime,
#simplicityMediaPlayerCurrentTime,
#simplicityMediaPlayerTimeSeparator,
#simplicityMediaPlayerTotalTime,
#simplicityMediaPlayerMute,
#simplicityMediaPlayerVolumeSlider,
#simplicityMediaPlayerFullscreen,
#simplicityMediaPlayerButtonPrev,
#simplicityMediaPlayerButtonNext {
  min-width: 2em;
  height: 100%;
  z-index: 45;
}
.simplicityMediaPlayerItemWrapper {
  z-index: 50; /* allow hover background-color for play, mute and fullscreen to work */
}

#simplicityMediaPlayerCurrentTime,
#simplicityMediaPlayerTimeSeparator,
#simplicityMediaPlayerTotalTime {
  line-height: var(--simplicityMPControlsBlockSize);
}

/* for buttons with text */
.controlButtonText {
  text-align: center;
  line-height: var(--simplicityMPControlsBlockSize);
}

/* for buttons with image */
/* #simplicityMediaPlayerPlay, #simplicityMediaPlayerMute, #simplicityMediaPlayerFullscreen { */
.controlButtonImage {
  display: flex;
  justify-content: center; /* center horizontally */
  width: 1.4em;
  padding-top: 50%; /* inline-align with other items */
  padding-bottom: 50%;
  box-sizing: border-box; /* to make padding make background smaller */
}

.controlButtonImage::before {
  position: absolute;
  top: 0em;
  bottom: 0em;
  width: inherit;
}

#simplicityMediaPlayerPlay::before {
  content: "\0000a0";
  display: block;
  background-image: url("playPlay.svg");
  background-position: center;
  background-repeat: no-repeat;
}

#simplicityMediaPlayerPlay.simplicityMediaPlayerPlayPlaying::before {
  background-image: url("playPause.svg");
}

#simplicityMediaPlayerSeekerWrapper {
  flex-grow: 1;
}

#simplicityMediaPlayerSeeker {
  width: 100%;
  border-left: 0em;
  border-right: 0em;
  border-top: 0em;
  border-bottom: 0em;
  margin-left: 0em;
  margin-right: 0em;
  margin-top: 0em;
  margin-bottom: 0em;
  vertical-align: top;
}

#simplicityMediaPlayerTime {
  min-width: max-content;
}

#simplicityMediaPlayerCurrentTime {
  display: inline;
}

#simplicityMediaPlayerTimeSeparator {
  display: inline;
}

#simplicityMediaPlayerTotalTime {
  display: inline;
}

#simplicityMediaPlayerMute::before {
  content: "\0000a0";
  display: block;
  background-image: url("muteEnable.svg");
  background-position: center;
  background-repeat: no-repeat;
}


#simplicityMediaPlayerMute.simplicityMediaPlayerMuteActive::before {
  background-image: url("muteDisable.svg");
}

#simplicityMediaPlayerVolumeSlider {
  display: inline;
  max-width: 100%;
  margin-left: 0em;
  margin-right: 0em;
  margin-top: 0em;
  margin-bottom: 0em;
}

#simplicityMediaPlayerFullscreen::before {
  content: "\0000a0";
  display: block;
  background-image: url("fullscreenEnter.svg");
  background-position: center;
  background-repeat: no-repeat;
}

#simplicityMediaPlayerFullscreen.simplicityMediaPlayerFullscreenActive::before {
  background-image: url("fullscreenExit.svg");
}

/* ////////// 'PLAY >' overlay: BEGIN           ////////// */

.galleryItemMovingWrapper {
  position: relative;
  display: inline-block;
}

.galleryItem + .galleryItemMovingOverlay::before {
  content: "\0000a0";
  position: absolute;
  background-image: url(playPreview.svg);
  background-position-x: center;
  background-position-y: center;
  background-size: 22%;
  background-repeat: no-repeat;
  top: 0px;
  width: 100%;
  height: 100%;
  /* z-index: 60; */
  pointer-events: none;
}

.galleryItem {
  /* should this be done outside the player, as part of the main Simplicity gallery style? */
  cursor: pointer;
}

/* ////////// 'PLAY >' overlay: END             ////////// */

/* hide visually, without moving it off-screen, and
   keep it available for keyboard and sceen readers  */
UNUSED.visuallyhidden {
  /* .visuallyhidden */
  /* hide visually, without moving it off-screen, and
     keep it available for keyboard and sceen readers  */
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(0px, 0px, 0px, 0px); /* deprecated, only fallback for old browsers. Should not be needed anymore, right? */
  clip-path: inset(50%);
  white-space: nowrap; /* https://a11yproject.com/posts/how-to-hide-content/ */
}

/* on these narrow screens, we need to rotate the player */
/*   so the controls fit the screen, and the video is as large as it can. */
/* NOTE: This literally only works for 230x320px resolution. Anything else controls disappear. */
/*   transform weirdness. */
/* @media screen and ( max-width: 299px ) { */
/* FIXME: remove important... */
@media screen and ( max-width: 260px) and ( max-height: 340px ) and ( orientation: portrait ) {
  #simplicityMediaPlayerMovingElement {
    /* we have to use vw/vh instead of %, as % does not take into account rotation and uses wrong side as base */
    transform: translateX( -50vh ) translateY( -50vw ) rotate( 270deg ) ;
    margin-top: 50vh;
    margin-left: 50vw;
    width: 100vh !important;
    height: 100vw !important;
    max-width: 100vh !important; /* because of rotated with/height, we need to set these here */
    max-height: 100vw !important;
  }

  /* rotate, fullscreen image and center */
  #simplicityMediaPlayerStillElement {
    transform: translateX( -50vh ) translateY( -50vw ) rotate( 270deg );
    top: 50%;
    margin-top: 100vw;
    margin-left: 100vh;
    max-width: 100vh;
    max-height: 100vw;
  }

  #simplicityMediaPlayerMovingControls {
    transform: translateX( -20vh ) translateY( -50vw ) rotate( 270deg );
    top: 0;
    bottom: 0;
    margin-top: 80vh;
    margin-left: 50vw;
  }

  #simplicityMediaPlayerGalleryControls {
    transform: translateX( -50vh ) translateY( -50vw ) rotate( 270deg );
    width: 100vh;
    /* can't say I understand this... but it works */
    /* if height is set to the logical 100vw (logical when rotated), */
    /*   position is off (but only when showing videos)*/
    /* with height: 100vh, it works for still and moving player */
    /*  plus, the weird thing is width: needs to be 100vh (not w) also. */
    height: 100vh;
    margin-top: 50vw;
    margin-left: 50vh;
  }

  #simplicityMediaPlayerButtons > div::before {
    padding-top: 0px; /* reset padding from earlier to center button */
  }

  #simplicityMediaPlayerButtonPrev::before,
  #simplicityMediaPlayerButtonNext::before {
    top: calc( var(--simplicityMPControlsBlockSize) * -1 ); /* reset padding to center horizontally */
  }

  /* not sure why this is changed for fullscreen, */
  /* but these are needed to position controls properly. */
  #simplicityMediaPlayer.fullscreen #simplicityMediaPlayerMovingControls {
    /* bottom: 0px; */
    /* margin-bottom: 1em; */
  }

  #simplicityMediaPlayerMovingControls {
    width: 100vh;
  }

  #simplicityMediaPlayerMovingElement {
    width: 100%;
  }

}