@eluvio/elv-player-js 1.0.140 → 2.0.1

package/src/static/stylesheets/player.scss

@@ -1,1065 +0,0 @@
-// sass-lint:disable function-name-format
-
-$white: #fff;
-$gray: #717171;
-$black: #000;
-
-$background-color: $black;
-$controls-color: rgba(0, 0, 0, 0.8);
-$modal-background-color: rgba(0, 0, 0, 0.5);
-$menu-color: rgba(0, 0, 0, 0.8);
-$menu-active-color: rgba(255, 255, 255, 0.1);
-$button-color: #fff;
-$button-inactive-color: rgba($white, 0.7);
-$button-active-color: #3784eb;
-$button-color: rgba($white, 1);
-$form-button-color: #ddd;
-$form-submit-color: #3784eb;
-$progress-color: #3784eb;
-$slider-color: rgba($gray, 0.5);
-$hotspot-color: rgba($gray, 0.3);
-$focus-color: rgba(225, 225, 255, 0.7);
-$border-color: #252525;
-$modal-color: #121212;
-$seek-indicator-color: rgba(100, 100, 100, 0.15);
-$error-color: #a32;
-$controls-padding: 5px;
-$button-height: 35px;
-
-@keyframes fade-out {
-  0% {
-    opacity: 1;
-  }
-
-  100% {
-    opacity: 0;
-  }
-}
-
-.eluvio-player {
-  align-items: center;
-  display: flex;
-  height: 100%;
-  justify-content: center;
-  max-height: 100%;
-  max-width: 100%;
-  object-fit: contain;
-  position: relative;
-  width: 100%;
-
-  &--error {
-    background-color: $black;
-
-    .eluvio-player__big-play-button {
-      display: none;
-    }
-  }
-
-  &__error-message {
-    align-items: center;
-    display: flex;
-    height: 100%;
-    justify-content: center;
-    letter-spacing: 0.05em;
-    padding: 20px;
-    position: absolute;
-    user-select: none;
-    width: 100%;
-    z-index: 1;
-  }
-
-  &__error-message__text {
-    color: $error-color;
-    font-size: 20px;
-    font-weight: 300;
-    max-width: 600px;
-    text-align: center;
-  }
-
-  // Seek indicator
-  &--seek-left,
-  &--seek-right {
-    &::after {
-      animation: fade-out 0.5s ease;
-      content: "";
-      height: 100%;
-      opacity: 0;
-      pointer-events: none;
-      position: absolute;
-      transition: background-color 1s ease;
-      width: 100%;
-      z-index: 100;
-    }
-  }
-
-  &--seek-left {
-    &::after {
-      background: linear-gradient(90deg, $seek-indicator-color, transparent 15%);
-    }
-  }
-
-  &--seek-right {
-    &::after {
-      background: linear-gradient(90deg, transparent 85%, $seek-indicator-color);
-    }
-  }
-
-  &.eluvio-player-restarted {
-    .eluvio-player__big-play-button {
-      display: none;
-    }
-  }
-
-  * {
-    box-sizing: border-box;
-    font-family: "Helvetica Neue", Helvetica, sans-serif;
-    overscroll-behavior-y: contain; // sass-lint:disable-line no-misspelled-properties
-  }
-
-  // sass-lint:disable force-attribute-nesting no-qualifying-elements
-  input[type="range"],
-  button {
-    background: transparent;
-    border: 0;
-    cursor: pointer;
-    justify-content: center;
-
-    &:hover {
-      opacity: 1;
-    }
-
-    &:disabled {
-      opacity: 0.5;
-    }
-
-    &:focus {
-      outline: 0;
-    }
-
-    &.focus-visible {
-      box-shadow: 0 0 2px $focus-color;
-      outline: 0;
-    }
-  }
-
-  input[type="range"] {
-    -webkit-tap-highlight-color: transparent;
-    appearance: none;
-    background: transparent;
-    border-radius: 3px;
-    height: 3px;
-    margin: 0;
-    padding: 15px 0;
-    z-index: 100;
-
-    &::-webkit-slider-thumb {
-      appearance: none;
-      height: 15px;
-      opacity: 0;
-      width: 15px;
-    }
-
-    &::-moz-range-thumb {
-      appearance: none;
-      height: 15px;
-      opacity: 0;
-      width: 15px;
-    }
-
-    &::-webkit-slider-runnable-track {
-      -webkit-tap-highlight-color: transparent;
-      background: transparent;
-      height: 3px;
-    }
-
-    &::-moz-range-track {
-      -webkit-tap-highlight-color: transparent;
-      background: transparent;
-      height: 3px;
-    }
-  }
-
-  // sass-lint:enable force-attribute-nesting no-qualifying-elements
-
-  progress {
-    appearance: none;
-    background-color: transparent;
-    border: 0;
-    border-radius: 3px;
-    height: 3px;
-  }
-
-  ::-webkit-progress-value {
-    background-color: $progress-color;
-  }
-
-  ::-webkit-progress-bar {
-    background-color: transparent;
-  }
-
-  ::-moz-progress-bar {
-    background-color: $progress-color;
-  }
-
-  &__poster-image {
-    cursor: pointer;
-    height: 100%;
-    left: 0;
-    object-fit: contain;
-    object-position: center;
-    position: absolute;
-    top: 0;
-    width: 100%;
-  }
-
-  &__video {
-    background: $background-color;
-    height: 100%;
-    margin: auto;
-    object-fit: contain;
-    object-position: center;
-    width: 100%;
-    z-index: 1;
-  }
-
-  &__watermark {
-    height: 15px;
-    pointer-events: none;
-    position: absolute;
-    right: 15px;
-    top: 15px;
-    width: auto;
-    z-index: 10;
-  }
-
-  &__account-watermark {
-    color: $white;
-    font-size: 8px;
-    opacity: 0.5;
-    pointer-events: none;
-    position: absolute;
-    right: 15px;
-    top: 15px;
-    z-index: 10;
-  }
-
-  &__hidden-audio-controls {
-    bottom: 10px;
-    height: max-content;
-    left: 10px;
-    opacity: 1;
-    position: absolute;
-    transition: opacity 0.25s linear;
-    width: max-content;
-    z-index: 10;
-
-    button {
-      background: $controls-color;
-      border-radius: 100%;
-      padding: 6px;
-    }
-  }
-
-  &__title-container {
-    background: linear-gradient(rgba(0, 0, 0, 0.5) 75%, transparent);
-    color: #fff;
-    display: grid;
-    gap: 5px;
-    padding: 10px 10px 20px;
-    position: absolute;
-    top: 0;
-    user-select: none;
-    width: 100%;
-    z-index: 2;
-  }
-
-  &__title {
-    font-size: 20px;
-    padding-right: 100px;
-  }
-
-  &__description {
-    font-size: 12px;
-    padding-right: 100px;
-  }
-
-  &__controls {
-    align-items: center;
-    background: $controls-color;
-    bottom: 0;
-    display: flex;
-    height: max-content;
-    padding: $controls-padding;
-    position: absolute;
-    transition: opacity 0.25s linear;
-    width: 100%;
-    z-index: 10;
-
-    &__button {
-      -webkit-tap-highlight-color: transparent;
-      color: $button-color;
-      height: $button-height;
-      max-height: $button-height;
-      max-width: $button-height;
-      min-height: $button-height;
-      min-width: $button-height;
-      overflow: visible;
-      padding: 6px;
-      transition: opacity 0.25s linear, color 0.1s ease;
-      width: $button-height;
-
-      &:not(:last-child) {
-        margin-right: 2px;
-      }
-
-      &:disabled {
-        opacity: 0.5;
-      }
-
-      &-volume {
-        // Move volume button closer to volume slider
-        padding-right: 0;
-      }
-
-      &--active {
-        color: $button-active-color;
-      }
-
-      svg {
-        height: 100%;
-        max-height: 100%;
-        max-width: 100%;
-        overflow: visible;
-        width: 100%;
-      }
-    }
-
-    &__button-multiview-spinning {
-      svg {
-        animation: spin 1s ease-in-out infinite;
-      }
-    }
-
-    &__volume-container {
-      flex: 1 1 auto;
-      max-width: 75px;
-      min-width: 0;
-    }
-
-    &__volume {
-      // sass-lint:disable no-important
-      background-color: $slider-color !important;
-      // sass-lint:enable no-important
-
-      &::-webkit-progress-value {
-        background-color: $button-color;
-      }
-
-      &::-moz-progress-bar {
-        background-color: $button-color;
-      }
-    }
-
-    &__slider-container {
-      align-items: center;
-      display: flex;
-      flex: 1 1 auto;
-      height: 100%;
-      justify-content: center;
-      min-width: 0;
-      position: relative;
-    }
-
-    &__slider-container__input,
-    &__slider-container__progress {
-      flex: 1 1 auto;
-      left: 0;
-      margin: 0 5px;
-      min-width: 0;
-      position: absolute;
-      width: calc(100% - 10px);
-    }
-
-    &__slider-container__input {
-      width: 100%;
-      z-index: 0;
-    }
-
-    &__slider-container__progress {
-      pointer-events: none;
-      z-index: 2;
-    }
-
-    &__progress-buffer {
-      // sass-lint:disable no-important
-      background-color: $slider-color !important;
-      // sass-lint:enable no-important
-      z-index: 1;
-
-      &::-webkit-progress-value {
-        background-color: $slider-color;
-      }
-
-      &::-moz-progress-bar {
-        background-color: $slider-color;
-      }
-    }
-
-    &__time {
-      color: $button-color;
-      font-size: 11px;
-      text-align: center;
-      width: 55px;
-    }
-
-    &__right-buttons {
-      align-items: center;
-      display: flex;
-      flex-wrap: nowrap;
-      height: 100%;
-    }
-
-    &.eluvio-player__controls-no-progress {
-      .eluvio-player__controls__time,
-      .eluvio-player__controls__progress-slider {
-        visibility: hidden;
-      }
-    }
-
-    &__tooltip {
-      background: $controls-color;
-      border-radius: 3px;
-      bottom: 45px;
-      color: $button-color;
-      font-size: 14px;
-      font-weight: 300;
-      max-height: calc(100% - 54px);
-      max-width: 225px;
-      min-height: 20px;
-      opacity: 1;
-      padding: 10px 5px;
-      pointer-events: none;
-      position: absolute;
-      right: 10px;
-      text-align: center;
-      transition: opacity 0.1s linear;
-      user-select: none;
-      z-index: 100;
-
-      * {
-        line-height: 1.2em;
-      }
-
-      &:empty {
-        display: none;
-        opacity: 0;
-      }
-
-      svg {
-        height: 20px;
-        margin-bottom: 5px;
-        width: auto;
-      }
-    }
-
-    &__settings-menu {
-      background: $menu-color;
-      border-radius: 3px 0 0;
-      bottom: CALC(#{$button-height} + #{$controls-padding} + #{$controls-padding});
-      color: $button-color;
-      max-height: MIN(90%, 100% - CALC(25px + #{$button-height} + #{$controls-padding} + #{$controls-padding}));
-      min-height: 20px;
-      overflow-y: auto;
-      position: absolute;
-      right: 0;
-      width: 250px;
-      z-index: 100;
-
-      &-hidden {
-        display: none;
-      }
-
-      button {
-        border: 1px solid transparent;
-      }
-
-      &__close {
-        align-items: center;
-        display: none;
-        height: 20px;
-        justify-content: center;
-        padding: 0;
-        position: absolute;
-        right: 20px;
-        top: 20px;
-        width: 20px;
-
-        * {
-          color: $button-color;
-        }
-      }
-
-      &__title {
-        font-size: 16px;
-        margin-bottom: 5px;
-        padding: 9px 20px;
-        user-select: none;
-      }
-
-      &__option {
-        border: 1px solid transparent;
-        color: $button-inactive-color;
-        cursor: pointer;
-        display: block;
-        font-size: 14px;
-        height: max-content;
-        line-height: 1.4;
-        max-width: 100%;
-        overflow-x: hidden;
-        padding: 9px 20px;
-        text-align: left;
-        text-overflow: ellipsis;
-        transition: background-color 0.05s linear;
-        width: 100%;
-
-        &-back {
-          align-items: center;
-          display: flex;
-          position: relative;
-          width: 100%;
-        }
-
-        &-back__icon {
-          align-items: center;
-          display: flex;
-          height: 100%;
-          left: 20px;
-          margin-right: 5px;
-          position: absolute;
-          width: 15px;
-
-          svg {
-            height: 100%;
-            width: 100%;
-          }
-        }
-
-        &-back__text {
-          padding-inline: 25px;
-          width: 100%;
-        }
-
-        &-selected {
-          color: $white;
-          font-weight: 500;
-        }
-
-        &:hover {
-          background: $menu-active-color;
-          color: $white;
-        }
-
-        &.focus-visible {
-          border: 1px solid $focus-color;
-        }
-      }
-    }
-  }
-
-  &__big-play-button {
-    max-height: 100px;
-    max-width: 100px;
-    min-height: 100px;
-    min-width: 100px;
-    position: absolute;
-    z-index: 10;
-
-    svg {
-      height: 100%;
-      opacity: 0.7;
-      overflow: visible;
-      padding: 2px;
-      transition: opacity 0.1s linear;
-      width: 100%;
-      z-index: 11;
-    }
-
-    &:hover {
-      svg {
-        opacity: 1;
-      }
-    }
-  }
-
-  &:fullscreen {
-    margin: 0;
-    padding: 0;
-  }
-
-  &__hls-options-form-container {
-    align-items: center;
-    background-color: $modal-background-color;
-    bottom: 0;
-    display: flex;
-    justify-content: center;
-    left: 0;
-    position: absolute;
-    right: 0;
-    top: 0;
-    z-index: 100;
-  }
-
-  &__hls-options-form {
-    background-color: $menu-color;
-    border-radius: 5px;
-    color: $white;
-    display: flex;
-    flex-direction: column;
-    height: 400px;
-    max-height: 100%;
-    max-width: 100%;
-    padding: 30px 30px 20px;
-    width: 500px;
-
-    &__title {
-      font-size: 16px;
-      margin-top: 0;
-    }
-
-    &__input {
-      background-color: $menu-color;
-      border: 1px solid $border-color;
-      color: $white;
-      flex: 1 1 100%;
-      font-size: 14px;
-      padding: 0.5rem;
-      width: 100%;
-
-      &:focus {
-        outline: none;
-      }
-
-      &.focus-visible {
-        outline: 1px solid $focus-color;
-      }
-
-      &--invalid {
-        border: 1px solid $error-color;
-      }
-    }
-
-    &__api-info {
-      align-items: center;
-      display: flex;
-      font-size: 10px;
-      justify-content: space-between;
-      padding: 3px;
-    }
-
-    &__version {
-      opacity: 0.5;
-    }
-
-    &__api-link {
-      color: $white;
-    }
-
-    &__actions {
-      align-items: center;
-      display: flex;
-      justify-content: flex-end;
-      margin-top: 10px;
-    }
-
-    button {
-      &.eluvio-player__hls-options-form__action {
-        align-items: center;
-        background-color: $form-button-color;
-        border-radius: 3px;
-        color: $black;
-        cursor: pointer;
-        display: flex;
-        height: 30px;
-        justify-content: center;
-        width: 100px;
-
-        &.focus-visible {
-          border: 1px solid $focus-color;
-          box-shadow: 2px 2px 5px $focus-color;
-        }
-
-        &:disabled {
-          opacity: 0.5;
-        }
-
-        &:not(:last-child) {
-          margin-right: 10px;
-        }
-      }
-
-      &.eluvio-player__hls-options-form__submit {
-        background-color: $form-submit-color;
-        color: $white;
-      }
-    }
-  }
-
-  &__ticket-modal {
-    align-items: center;
-    background: $background-color;
-    display: flex;
-    height: 100%;
-    justify-content: center;
-    position: absolute;
-    width: 100%;
-
-    &__form {
-      align-items: center;
-      background: $modal-color;
-      border: 2px solid $border-color;
-      border-radius: 3px;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      padding: 20px 30px;
-      width: 300px;
-
-      &__text,
-      &__error-text,
-      &__input {
-        margin-bottom: 10px;
-      }
-
-      &__text {
-        color: $button-color;
-        font-size: 16px;
-        font-weight: 300;
-        letter-spacing: 0.05em;
-      }
-
-      &__error-text {
-        color: $error-color;
-        font-size: 16px;
-
-        &:empty {
-          display: none;
-        }
-      }
-
-      &__input {
-        background: $white;
-        border: 0;
-        border-radius: 3px;
-        font-size: 18px;
-        font-weight: bold;
-        letter-spacing: 0.16em;
-        margin: 5px 0 15px;
-        min-height: 36px;
-        padding: 0 10px;
-        text-align: center;
-        width: 100%;
-      }
-
-      &__submit {
-        border-radius: 3px;
-        color: $button-color;
-        font-size: 14px;
-        font-weight: 500;
-        height: 40px;
-        letter-spacing: 0.1em;
-        text-transform: uppercase;
-        width: 100%;
-
-        &:disabled {
-          color: $slider-color;
-        }
-      }
-
-      button {
-        &.eluvio-player__ticket-modal__form__submit {
-          // Higher specificity
-          background: $border-color;
-          margin: 0;
-        }
-      }
-    }
-  }
-
-  &__hotspot-overlay {
-    bottom: 0;
-    left: 0;
-    position: absolute;
-    right: 0;
-    top: 0;
-    z-index: 5;
-
-    &__target {
-      align-items: center;
-      cursor: pointer;
-      display: flex;
-      justify-content: center;
-      position: absolute;
-      transition: background-color 0.3s;
-
-      &__title {
-        color: $button-color;
-        display: none;
-        font-size: 24px;
-        font-weight: 300;
-        letter-spacing: 0.08em;
-        transition: letter-spacing 5s;
-      }
-
-      &:hover {
-        background-color: $hotspot-color;
-
-        .eluvio-player__hotspot-overlay__target__title {
-          display: block;
-          text-shadow: 1px 1px $gray;
-        }
-      }
-
-      &-switching {
-        animation: hotspot-select 1s ease-out;
-      }
-    }
-
-    &-visible {
-      .eluvio-player__hotspot-overlay__target {
-        background-color: $hotspot-color;
-      }
-
-      .eluvio-player__hotspot-overlay__target__title {
-        display: block;
-        text-shadow: 1px 1px $gray;
-      }
-    }
-  }
-
-  &.eluvio-player-xl {
-    .eluvio-player__title {
-      font-size: 28px;
-    }
-
-    .eluvio-player__description {
-      font-size: 16px;
-    }
-
-    .eluvio-player__controls {
-      padding: CALC(#{$controls-padding} * 1.5);
-
-      &__tooltip {
-        bottom: 65px;
-      }
-    }
-
-    .eluvio-player__controls__settings-menu {
-      bottom: CALC(5px + #{$button-height} + #{$controls-padding} + #{$controls-padding});
-    }
-  }
-
-  &.eluvio-player-m,
-  &.eluvio-player-s {
-    .eluvio-player__error-message__text {
-      font-size: 18px;
-    }
-
-
-    .eluvio-player__watermark {
-      height: 10px;
-      top: 10px;
-    }
-
-    .eluvio-player__controls {
-      padding: CALC(#{$controls-padding} * 0.5);
-    }
-
-    .eluvio-player__controls__button {
-      &:not(.eluvio-player__big-play-button) {
-        height: CALC(#{$button-height} * 0.9);
-        max-height: CALC(#{$button-height} * 0.9);
-        max-width: CALC(#{$button-height} * 0.9);
-        min-height: CALC(#{$button-height} * 0.9);
-        min-width: CALC(#{$button-height} * 0.9);
-      }
-    }
-
-    .eluvio-player__controls__settings-menu {
-      bottom: CALC(#{$button-height * 0.9} + #{$controls-padding});
-      max-height: MIN(90%, 100% - CALC(25px + #{$button-height * 0.9} + #{$controls-padding}));
-      right: 0;
-    }
-
-    .eluvio-player__controls__volume-container {
-      display: none;
-    }
-
-    .eluvio-player__big-play-button {
-      max-height: 55px;
-      max-width: 55px;
-      min-height: 55px;
-      min-width: 55px;
-    }
-
-    .eluvio-player__ticket-modal {
-      &__form {
-        max-height: 70%;
-        max-width: 70%;
-      }
-    }
-
-    .eluvio-player__hotspot-overlay {
-      .eluvio-player__hotspot-overlay__target {
-        .eluvio-player__hotspot-overlay__target__title {
-          font-size: 16px;
-        }
-      }
-    }
-  }
-
-  &.eluvio-player-s {
-    .eluvio-player__error-message__text {
-      font-size: 14px;
-    }
-
-    .eluvio-player__controls__time {
-      display: none;
-    }
-
-    .eluvio-player__controls__tooltip {
-      font-size: 10px;
-      max-width: 180px;
-
-      svg {
-        height: 15px;
-        width: 15px;
-      }
-    }
-
-    .eluvio-player__controls__settings-menu {
-      align-items: center;
-      height: 100%;
-      max-height: 100%;
-      padding: 80px 0 100px;
-      right: 0;
-      top: 0;
-      width: 100%;
-
-      &__title,
-      &__option {
-        font-size: 20px;
-        margin-bottom: 5px;
-        text-align: center;
-
-        &-back {
-          margin-bottom: 20px;
-        }
-      }
-
-      &__close {
-        display: flex;
-        z-index: 100;
-      }
-    }
-
-    // Small width, but landscape
-    &.eluvio-player-landscape {
-      .eluvio-player__controls__settings-menu {
-        padding: 20px 0 50px;
-
-        &__title,
-        &__option {
-          font-size: 14px;
-          margin-bottom: 5px;
-          text-align: center;
-
-          &-back {
-            margin-bottom: 20px;
-          }
-        }
-
-        &__close {
-          display: flex;
-        }
-      }
-    }
-
-    .eluvio-player__hls-options-form {
-      padding: 10px;
-
-      &__title {
-        font-size: 12px;
-        margin-bottom: 5px;
-      }
-
-      &__input {
-        font-size: 12px;
-      }
-
-      &__action {
-        font-size: 12px;
-        height: 20px;
-        width: 60px;
-      }
-    }
-
-    .eluvio-player__hotspot-overlay {
-      .eluvio-player__hotspot-overlay__target {
-        .eluvio-player__hotspot-overlay__target__title {
-          font-size: 14px;
-        }
-      }
-    }
-  }
-}
-
-// sass-lint:disable no-important
-.-elv-fade-in,
-.-elv-fade-out {
-  transition: opacity 0.25s linear;
-}
-
-.-elv-fade-out {
-  opacity: 0 !important;
-  pointer-events: none !important;
-}
-
-.-elv-fade-in {
-  opacity: 1;
-}
-
-.-elv-no-cursor {
-  cursor: none !important;
-
-  * {
-    cursor: none !important;
-  }
-}
-
-// sass-lint:disable no-color-literals
-@keyframes hotspot-select {
-  0% {
-    background-color: rgba(255, 255, 255, 0.2);
-    opacity: 1;
-  }
-
-  50% {
-    background-color: rgba(255, 255, 255, 0.7);
-    opacity: 0.7;
-  }
-
-  100% {
-    background-color: rgba(255, 255, 255, 0);
-    opacity: 0;
-  }
-}
-
-@keyframes spin {
-  0%   {
-    transform: rotate(0deg);
-  }
-
-  100% {
-    transform: rotate(360deg);
-  }
-}