shaka-player/ui/less/containers.less

DASH/EME video player library

/** @license
 * Shaka Player
 * Copyright 2016 Google LLC
 * SPDX-License-Identifier: Apache-2.0
 */

/* All of the top-level containers into which various visible features go. */

/* A container for the entire video + controls combo.  This is the auto-setup
 * div which we populate. */
.shaka-video-container {
  .overlay-parent();

  /* Without this, the container somehow winds up being a tad taller than it
   * should be (484px vs 480px). */
  display: flex;

  /* Set a special font for material design icons. */
  .material-icons-round {
    font-family: "Material Icons Round";
    font-size: 24px;
  }

  /* Set the fonts for all other content. */
  font-family: @general-font-family;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}

/* Each browser has a different prefixed pseudo-class for fullscreened elements.
 * Define the properties of a fullscreened element in a mixin, then apply to
 * each of the browser-specific pseudo-classes.
 * NOTE: These fullscreen pseudo-classes can't be combined with commas into a
 * single delcaration.  Browsers ignore the rest of the list once they hit one
 * pseudo-class they don't support. */
.fullscreen-container() {
  .fill-container();

  background-color: @general-background-color-opaque;

  .shaka-text-container {
    /* In fullscreen mode, the text displayer's font size should be relative to
     * the either window height or width (whichever is smaller), instead of a
     * fixed size. */
    font-size: 4.4vmin;
  }
}
.shaka-video-container:fullscreen { .fullscreen-container(); }
.shaka-video-container:-webkit-full-screen { .fullscreen-container(); }
.shaka-video-container:-moz-full-screen { .fullscreen-container(); }
.shaka-video-container:-ms-fullscreen { .fullscreen-container(); }

/* The actual video element.  Sits inside .shaka-video-container and gives it a
 * size in non-fullscreen mode.  In fullscreen mode, the sizing relationship
 * flips.  CSS is just great like that.  :-( */
.shaka-video {
  /* At the moment, nothing special is required here.
   * Note that this should NOT be an overlay-child, as its size could dictate
   * the size of the container for some applications. */
}

/* A container for all controls, including the giant play button, seek bar, etc.
 * Sits inside .shaka-video-container, on top of (Z axis) .shaka-video, and
 * below (Y axis) .shaka-play-button-container. */
.shaka-controls-container {
  .overlay-child();

  .hide-when-shaka-controls-disabled();

  /* Without this, the controls container overflows the video container. */
  box-sizing: border-box;

  /* A flex container, to make layout of children easier to reason about. */
  display: flex;

  /* Defines in which direction the children should flow. */
  flex-direction: column;

  /* Pushes the children toward the bottom of the container. */
  justify-content: flex-end;

  /* Centers children horizontally. */
  align-items: center;

  /* By default, do not allow any of our controls to shrink.
   * Specific controls can use .shrinkable() to override. */
  * { .unshrinkable(); }

  /* Position the controls container in front of the text container, so that
   * the text container doesn't interfere with the control buttons. */
  z-index: 1;

  &[casting="true"] {
    /* Hide fullscreen button while casting. */
    .shaka-fullscreen-button {
      .hidden();
    }
  }
}

/* A container for all canvas for LCEVC decoding
 * Sits inside .shaka-video-container, on top of (Z axis) .shaka-video, and
 * below (Y axis) .shaka-play-button-container. */
.shaka-canvas-container {
  .overlay-child();

  /* Make sure pointer events can reach the video element in the case of native
   * controls. */
  pointer-events: none;
}

/* A container for VR
 * Sits inside .shaka-video-container, on top of (Z axis) .shaka-video, and
 * below (Y axis) .shaka-play-button-container. */
.shaka-vr-canvas-container {
  .overlay-child();

  /* Make sure pointer events can reach the video element in the case of native
   * controls. */
  pointer-events: none;
}

/* Container for controls positioned at the bottom of the video container:
 * controls button panel and the seek bar. */
.shaka-bottom-controls {
  width: @bottom-controls-width;
  padding: 0;

  /* Position the bottom panel in front of other controls (play button and
   * spinner containers).
   * TODO: A different layout arrangement might be a better solution for this.
   * Need to experiment.
   */
  z-index: 1;
}

/* This is the container for the horizontal row of controls above the seek bar.
 * It sits above (Y axis) the seek bar, and below (Y axis) the giant play button
 * in the middle. */
.shaka-controls-button-panel {
  /* Fill the space horizontally, with no extra padding or margin. */
  padding: 0;
  margin: 0;

  /* This is itself a flex container, with children layed out horizontally. */
  display: flex;
  flex-direction: row;

  /* Push children to the right. */
  justify-content: flex-end;

  /* Center children vertically. */
  align-items: center;

  /* TODO: Document why. */
  overflow: hidden;
  min-width: 48px;

  /* Make sure we don't inherit odd font sizes and styles from the environment.
   * TODO: When did this happen?  What forced us to do this? */
  font-size: 12px;
  font-weight: normal;
  font-style: normal;

  /* Make sure contents cannot be selected. */
  .unselectable();

  .show-when-controls-shown();

  /* All buttons, divs, and other controls directly inside this panel should
   * have these characteristics by default. */
  & > * {
    /* White text or button icons. */
    color: @general-font-color;

    /* 48px tall controls. */
    height: 48px;
    width: 48px;

    /* Consistent alignment of buttons. */
    line-height: 0.5;

    padding: 0 2px;

    /* Transparent backgrounds, no borders, and a pointer when you mouse over
     * them. */
    background: transparent;
    border: 0;
    cursor: pointer;
    opacity: 0.9;
    transition: opacity cubic-bezier(0.4, 0, 0.6, 1) 100ms;
    text-shadow: 0 0 2px @general-background-color;

    &.material-icons-round {
      font-size: 34px;
    }

    &.shaka-mute-button {
      font-size: 28px;
    }

    &.shaka-overflow-menu-button {
      font-size: 24px !important;
      position: relative;
    }

    &:hover {
      opacity: 1;
    }
  }
}

/* Buttons hide certain items if they are found inside the control panel */
.shaka-controls-button-panel .shaka-overflow-menu-only {
  display: none;
}

/* The container for the giant play button.  Sits above (Y axis) the
 * other video controls and seek bar, in the middle of the video frame, on top
 * of (Z axis) the video. */
.shaka-play-button-container {
  /* Take up as much space as possible, but shrink (vertically) to accomodate
   * the controls at the bottom. */
  margin: 0;
  .fill-container();
  .shrinkable();
  .absolute-position();

  /* Keep the play button in the middle of this container. */
  display: flex;
  justify-content: center;
  align-items: center;
}

.shaka-statistics-container {
  overflow-x: hidden;
  overflow-y: auto;

  scrollbar-color: @general-font-color @general-background-color;
  scrollbar-width: thin;

  min-width: 300px;

  color: @general-font-color;
  background-color: rgba(35, 35, 35, 90%);

  font-size: @general-font-size;

  padding: 5px 10px;
  border-radius: 2px;

  position: absolute;
  z-index: 2;
  left: 15px;
  top: 15px;

  max-height: calc(100% - 115px);

  /* Fades out with the other controls. */
  .show-when-controls-shown();

  div {
    display: flex;
    justify-content: space-between;
  }

  span {
    color: rgb(150, 150, 150);
  }
}

.shaka-ad-statistics-container {
  overflow-x: hidden;
  overflow-y: auto;

  scrollbar-color: @general-font-color @general-background-color;
  scrollbar-width: thin;

  min-width: 150px;

  color: @general-font-color;
  background-color: rgba(35, 35, 35, 90%);

  font-size: @general-font-size;

  padding: 5px 10px;
  border-radius: 2px;

  position: absolute;
  z-index: 2;
  right: 15px;
  top: 15px;

  max-height: calc(100% - 115px);

  /* Fades out with the other controls. */
  .show-when-controls-shown();

  div {
    display: flex;
    justify-content: space-between;
  }

  span {
    color: rgb(150, 150, 150);
  }
}

.shaka-context-menu {
  /* It's okay to add a vertical scroll if there are too many items, but
   * horizontal scrolling is not allowed. */
  overflow-x: hidden;
  overflow-y: auto;

  /* Don't wrap text to the next line. */
  white-space: nowrap;

  /* Styles for the menu itself. */
  background: rgba(28, 28, 28, 90%);
  border-radius: 2px;
  min-width: 190px;

  /* The menus fade out with the other controls. */
  .show-when-controls-shown();

  /* When displayed as a flex container, elements inside will flow in a
   * vertical column. */
  display: flex;
  flex-direction: column;
  align-items: stretch;

  /* Where the menu appears. */
  position: absolute;
  z-index: 3;

  button {
    font-size: @general-font-size;
    background: transparent;
    color: @general-font-color;
    border: none;
    min-height: 30px;
    padding: 10px;

    /* The button itself is a flex container, with children center-aligned. */
    display: flex;
    align-items: center;

    /* When hovered, the button's background is highlighted. */
    &:hover {
      background: rgba(255, 255, 255, 10%);
    }

    /* The button is clickable, showing cursor pointer */
    cursor: pointer;

    /* The label inside button is also showing cursor pointer  */
    label {
      cursor: pointer;
      margin-left: 5px;
    }

    .shaka-keyboard-navigation &:focus {
      background: rgba(255, 255, 255, 10%);
    }

    .shaka-current-selection-span {
      display: none;
    }
  }
}

.shaka-scrim-container {
  margin: 0;
  width: 100%;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  .shrinkable();
  .show-when-controls-shown();

  height: 61px;

  /* A black gradient at the bottom, behind the controls, but only so high. */
  background: linear-gradient(rgba(0, 0, 0, 0%) 0, rgba(0, 0, 0, 50%) 100%);
}

.shaka-text-container {
  .absolute-position();

  /* Make sure the text container doesn't steal pointer events from another
   * layer, such as the ad container.  There is nothing interactive in this
   * layer, so this should be fine. */
  pointer-events: none;

  /* Place the text container on the bottom of the video container. */
  bottom: 0%;
  width: 100%;
  min-width: 48px;

  /* When the controls fade in or out, it takes 600ms. Thus, when the text
   * container adjusts to the presence or absence of controls, we should wait
   * briefly, so the captions don't end up appearing behind the controls.
   * Instead of being a gradual animation, this is a fast animation with a
   * significant delay, since the captions moving around is a little
   * distracting. */
  transition: bottom cubic-bezier(0.4, 0, 0.6, 1) 100ms;
  transition-delay: 500ms;

  /* These are defaults which are overridden by JS or cue styles. */
  font-size: 20px;
  line-height: 1.4;  // relative to font size.
  color: @general-font-color;

  span.shaka-text-wrapper {
    display: inline;
    background: none;
  }
}

.shaka-controls-container[shown="true"] ~ .shaka-text-container {
  /* Disable the transition delay when moving the captions up, so that the
   * controls don't appear over the captions. */
  transition-delay: 0ms;
}

/* The buffering spinner. */
.shaka-spinner-container {
  .absolute-position();
  .fill-container();
  .hide-when-shaka-controls-disabled();

  flex-shrink: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.shaka-hidden-fast-forward-container,
.shaka-hidden-rewind-container {
  height: 100%;
  width: 40%;
  .shrinkable();
}

.shaka-hidden-fast-forward-container {
  /* Keep the fast forward button to the right of this container. */
  .absolute-position();
  left: 60%;
}

.shaka-hidden-rewind-container {
  /* keep the rewind button to the left */
  .absolute-position();
}

.shaka-video-container.no-cursor {
  cursor: none !important;

  * {
    cursor: none !important;
  }
}