peertube/client/src/sass/player/peertube-skin.scss

@use 'sass:math';
@use '_variables' as *;
@use '_mixins' as *;
@use './_player-variables' as *;

body {
  --embedForegroundColor: #{$primary-foreground-color};

  --embedBigPlayBackgroundColor: #{$primary-background-color};
}

@mixin big-play-button-triangle-size($triangle-size) {
  width: $triangle-size;
  height: $triangle-size;
  top: calc(50% - #{math.div($triangle-size, 2)});
  left: calc(53% - #{math.div($triangle-size, 2)});
}

.video-js.vjs-peertube-skin {
  font-size: $font-size;
  color: pvar(--embedForegroundColor);

  &.disabled {
    cursor: default;
    pointer-events: none;

    .vjs-big-play-button {
      display: none !important;
    }
  }

  .vjs-audio-button {
    display: none;
  }

  .vjs-big-play-button {
    $big-play-width: 1.2em;
    $big-play-height: 1.2em;

    @include margin-left(-(math.div($big-play-width, 2)));

    outline: 0;
    font-size: 6em;

    border: 2px solid #fff;
    border-radius: 100%;

    left: 50%;
    top: 50%;
    width: $big-play-width;
    height: $big-play-height;
    line-height: $big-play-height;
    margin-top: -(math.div($big-play-height, 2));
    transition: 0.2s background-color;

    &::-moz-focus-inner {
      border: 0;
      padding: 0;
    }

    .vjs-icon-placeholder::before {
      @include big-play-button-triangle-size(45px);

      content: '';
      background-image: url('#{$assets-path}/player/images/big-play-button.svg');
    }

    &.focus-visible,
    &:hover {
      background-color: var(--mainColor, #696969);
    }
  }

  // Show poster and controls when playing audio-only content
  &.vjs-playing-audio-only-content {
    .vjs-poster {
      display: block;
      visibility: visible;
    }

    .vjs-control-bar {
      opacity: $primary-foreground-opacity-hover;
    }
  }

  // Do not display poster when video is starting
  // Or if we change resolution manually
  &.vjs-has-autoplay:not(.vjs-has-started),
  &.vjs-updating-resolution {
    .vjs-poster {
      display: none !important;
    }
  }

  // Hide the big play button on autoplay or resolution change
  &.vjs-has-autoplay,
  &.vjs-updating-resolution {
    .vjs-big-play-button {
      display: none !important;
    }
  }

  .vjs-big-play-button {
    background-color: pvar(--embedBigPlayBackgroundColor);
  }

  .vjs-settings-dialog,
  .vjs-control-bar {
    background-color: $primary-background-color;
  }

  .vjs-poster {
    outline: 0;
    background-size: cover;
  }

  @media screen and (max-width: $screen-width-750) {
    .vjs-big-play-button {
      font-size: 5em;
      border-width: 3px;

      .vjs-icon-placeholder::before {
        @include big-play-button-triangle-size(32px);
      }
    }
  }

  @media screen and (max-width: $screen-width-570) {
    .vjs-big-play-button {
      font-size: 4.5em;
      border-width: 2.5px;

      .vjs-icon-placeholder::before {
        @include big-play-button-triangle-size(27px);
      }
    }
  }

  @media screen and (max-width: $screen-width-350) {
    .vjs-big-play-button {
      font-size: 3em;
      border-width: 2px;

      .vjs-icon-placeholder::before {
        @include big-play-button-triangle-size(20px);
      }
    }
  }

  // Theater mode is enabled
  &.vjs-theater-enabled {
    .vjs-theater-control {
      width: 30px;

      .vjs-icon-placeholder {
        transform: scale(0.8);
      }
    }
  }

  // On fullscreen, hide theater control
  &.vjs-fullscreen {
    .vjs-theater-control {
      display: none;
    }
  }
}

// Play/pause animations
.vjs-has-started .vjs-play-control {
  &.vjs-playing {
    animation: remove-pause-button 0.25s ease;
  }

  &.vjs-paused {
    animation: add-play-button 0.25s ease;
  }

  @keyframes remove-pause-button {
    0% {
      transform: rotate(90deg);
    }
    100% {
      transform: rotate(0deg);
    }
  }

  @keyframes add-play-button {
    0% {
      transform: rotate(-90deg);
    }
    100% {
      transform: rotate(0deg);
    }
  }
}

.vjs-error-display {
  display: none;
}

.vjs-custom-error-display {
  font-family: $main-fonts;

  .error-details {
    margin-top: 40px;
    font-size: 80%;
  }
}

.vjs-modal-dialog-content {
  padding-top: 40px !important;
}

// Error display disabled
.vjs-error:not(.vjs-error-display-enabled) {
  .vjs-custom-error-display {
    display: none;
  }

  .vjs-loading-spinner {
    display: block;
  }
}

// Error display enabled
.vjs-error.vjs-error-display-enabled {
  .vjs-custom-error-display {
    display: block;
  }
}