@if (playerActive) {
  <div id="player" [style]="'max-width:'+maxWidth+';max-height:'+maxHeight" (mouseover)="controlShowed = true"
       (mouseleave)="controlShowed = false" #player>
    <video (mouseout)="showVolRange = false" (mouseover)="showVolRange = false" [class.upScale]="videoFullscreen"
           [style]="'max-width:'+maxWidth+';height:'+maxHeight+';border-radius: 15px'" (pause)="videoPlaying = false"
           (play)="videoPlaying = true" #video (timeupdate)="watched = videoHMSFormat(video.currentTime)"
           (loadedmetadata)="videoPlayer = video; video.style.display = 'block'; videoLoaded = true"
           (click)="videoPlaying ? video.pause() : video.play(); videoPlaying = !videoPlaying"
           (dblclick)="videoFullscreen ? exitFullScreen() : player.requestFullscreen(); videoFullscreen = !videoFullscreen"
           [src]="src"></video>

    <button tuiButton appearance="icon" class="picInPic" (click)="video.requestPictureInPicture();">
      <tui-icon icon="@tui.picture-in-picture"></tui-icon>
    </button>

    <div id="controlsHolder">
      <div id="controls">
        <div id="buttons">
          <button tuiButton appearance="icon"
                  (mouseover)="showVolRange = false"
                  (click)="videoPlaying ? video.pause() : video.play();" id="left">
            @if (videoPlaying) {
              <tui-icon icon="@tui.pause"></tui-icon>
            } @else {
              <tui-icon icon="@tui.play"></tui-icon>
            }
          </button>
          <div id="right">
            <button
              type="button"
              tuiButton appearance="icon"
              tuiDropdownAppearance="neutral"
              tuiDropdownDirection="top"
              tuiDropdownLimitWidth="fixed"
              tuiIconButton
            >
              @if (video.volume == 0) {
                <tui-icon icon="@tui.volume-off"></tui-icon>
              } @else if (video.volume > .75) {
                <tui-icon icon="@tui.volume-2"></tui-icon>
              } @else if (video.volume >= .50 && video.volume < .74) {
                <tui-icon icon="@tui.volume-1"></tui-icon>
              } @else {
                <tui-icon icon="@tui.volume"></tui-icon>
              }
            </button>
            <input
              tuiSlider
              type="range"
              value="100"
              (input)="setVolume(volume)"
              [(ngModel)]="volume"
            />
            <button tuiButton appearance="icon"
                    (mouseover)="showVolRange = false"
                    (click)="videoFullscreen ? exitFullScreen() : player.requestFullscreen(); videoFullscreen = !videoFullscreen">
              @if (videoFullscreen) {
                <tui-icon icon="@tui.minimize"></tui-icon>
              } @else {
                <tui-icon icon="@tui.maximize"></tui-icon>
              }
            </button>
          </div>
        </div>
        <div id="info">
          <span>{{ watched }}</span>
          <progress class="timeProgress" (click)="jump($event)" [max]="video.duration" [value]="video.currentTime"
                    tuiProgressBar size="xs"></progress>
        </div>
      </div>
    </div>
  </div>

} @else {
  <div class="player_preview">
    @if (thumbnailOverwrite) {
      <img [style]="'max-width:'+maxWidth+';max-height:'+maxHeight+';border-radius: 15px'" [src]="thumbnailOverwrite"/>
    } @else {
      <oimg [height]="maxHeight" [width]="maxWidth" style="border-radius: 15px; object-fit: cover"
            [src]="src+'_thumbnail.png'"></oimg>
    }
    <button tuiButton (click)="playVideo()">
      <tui-icon icon="@tui.play"></tui-icon>
    </button>
  </div>
}