video.component.scss

@mixin box-shadow($x: 0, $y: 1px, $blur: 3px, $alpha: 0.5) {
  box-shadow: $x $y $blur rgba(0, 0, 0, $alpha);
}

.player {
  background: black;
  height: 522px;

  .container {
    position: relative;
    height: 450px;

    .video {
      position: absolute;
      display: block;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      margin: 0 auto;
      width: 100%;
      height: 100%;
    }

    .preview-line {
      width: 100%;
      width: calc(100% - 16px);
      position: absolute;
      bottom: 0;
      margin: 0 8px;

      .preview {
        position: relative;
        bottom: 0;
        display: block;
        border: 2px solid rgba(28, 28, 28, 0.9);
        border-radius: 2px;
        width: 158px;
        height: 90px;

        app-video-preview {
          position: absolute;
        }

      }
    }

    app-progress-indicator {
      position: absolute;
      margin-left: -24px;
    }

  }

  .controls {
    background: rgba(0, 0, 0, 0.5);
    color: white;
    position: relative;

    .mat-toolbar-row {
      height: 24px;
    }

    .progress {
      width: 100%;
      cursor: pointer;
    }

    .action {
      position: inherit;
      height: 40px;

      .mat-icon-button[disabled][disabled] {
        color: rgba(255, 255, 255, 0.26);
      }

      .time {
        margin-top: 12px;
        padding: 0 6px;
        cursor: all-scroll;
        position: relative;
      }
    }
  }
}

// cinema mode = bigger video player, but not fullscreen
.player.cinema {
  width: 100vw;
  height: 100vh;
  margin: 0;
  top: 0;
  left: 0;
  position: fixed;
  z-index: 999;
  @include box-shadow();

  .container {
    width: 100%;
    height: calc(100% - 80px);
    position: fixed;
    .video {
      max-width: 100%;
    }

    .preview-line {
      position: fixed;
      bottom: 80px;
    }
  }

  .controls {
    position: fixed;
    bottom: 0;
    height: 80px;

    .action {
      margin: 24px 0 0;
    }
  }

}