@eluvio/elv-player-js 1.0.140 → 2.0.1

package/lib/static/stylesheets/common.module.scss

@@ -0,0 +1,486 @@
+.spinner {
+  --color-highlight: 55, 132, 235;
+
+  animation: spin 1.5s ease infinite;
+  aspect-ratio: 1;
+  border: 6px solid rgba(#FFF, 30%);
+  border-radius: 100%;
+  border-top-color: #FFF;
+  display: inline-block;
+  height: 100%;
+  width: auto;
+
+  &--light {
+    border-width: 3px;
+  }
+}
+
+.svg {
+  align-items: center;
+  display: flex;
+  height: 100%;
+  justify-content: center;
+}
+
+.user-action-indicator-container {
+  align-items: center;
+  animation: action-indicator-fade-out 0.55s ease;
+  color: #FFF;
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+  height: 100%;
+  inset: 0;
+  justify-content: center;
+  opacity: 0;
+  pointer-events: none;
+  position: absolute;
+  user-select: none;
+  width: 100%;
+}
+
+.user-action-indicator-text {
+  align-items: center;
+  background: rgba(0, 0, 0, 50%);
+  border-radius: 5px;
+  display: flex;
+  font-size: 12px;
+  font-weight: 600;
+  justify-content: center;
+  padding: 10px 15px;
+  width: max-content;
+}
+
+.user-action-indicator {
+  animation: action-indicator-icon-scale 0.5s ease;
+  background: rgba(0, 0, 0, 50%);
+  border-radius: 100%;
+  height: 75px;
+  width: 75px;
+}
+
+.user-action-indicator-icon {
+  padding: 22px;
+
+  svg {
+    height: 100%;
+    width: 100%;
+  }
+}
+
+
+/* Seek Bar */
+
+.seek-container {
+  --progress-height: 3px;
+  --progress-height-expanded: 10px;
+  --progress-height-expanded-mobile: 15px;
+  --color-seek-background: rgba(255, 255, 255, 10%);
+  --color-seek-buffer: rgba(255, 255, 255, 10%);
+  --color-seek-active: rgba(255, 255, 255, 50%);
+  --color-seek-active-focused: #FFF;
+
+  align-items: center;
+  display: flex;
+  height: calc(var(--progress-height-expanded) + 10px);
+  position: relative;
+  transition: height 0.25s ease, opacity 0.25s ease, border-radius 1.25s ease, filter 0.25s ease;
+  transition-delay: 0.25s;
+  width: 100%;
+
+  * {
+    transition: height 0.25s ease, width 0.25s ease, opacity 0.25s ease, border-radius 0.25s ease;
+    transition-delay: 0.25s;
+  }
+
+  &:hover,
+  &:active,
+  &:focus,
+  &:focus-visible,
+  &:has(:focus-visible) {
+    transition-delay: unset;
+
+    .seek-playhead,
+    .seek-buffer,
+    .seek-input {
+      height: var(--progress-height-expanded);
+      transition-delay: unset;
+    }
+
+    .seek-playhead {
+      &::-webkit-progress-value {
+        background-color: var(--color-seek-active-focused);
+        transition-delay: unset;
+      }
+
+      &::-moz-progress-bar {
+        background-color: var(--color-seek-active-focused);
+        transition-delay: unset;
+      }
+    }
+
+    ::-webkit-slider-thumb {
+      height: var(--progress-height-expanded);
+      transition-delay: unset;
+    }
+
+    ::-moz-range-thumb {
+      height: var(--progress-height-expanded);
+      transition-delay: unset;
+    }
+  }
+
+  &:focus-visible,
+  &:has(:focus-visible),
+  &:hover {
+    filter: drop-shadow(0 0 5px var(--color-seek-active-focused));
+  }
+}
+
+.seek-playhead,
+.seek-buffer,
+.seek-input {
+  border-radius: 4px;
+  height: var(--progress-height);
+  left: 0;
+  overflow: hidden;
+  position: absolute;
+  width: 100%;
+}
+
+.seek-playhead {
+  background: transparent;
+
+  &::-webkit-progress-bar {
+    background: transparent;
+  }
+
+  &::-webkit-progress-value {
+    background-color: var(--color-seek-active);
+    transition: background-color 0.5s ease;
+    transition-delay: 0.25s;
+  }
+
+  &::-moz-progress-bar {
+    background-color: var(--color-seek-active);
+    transition: background-color 0.5s ease;
+    transition-delay: 0.25s;
+  }
+}
+
+.seek-buffer {
+  background: var(--color-seek-background);
+
+  &::-webkit-progress-bar {
+    background: transparent;
+  }
+
+  &::-webkit-progress-value {
+    background-color: var(--color-seek-buffer);
+  }
+
+  &::-moz-progress-bar {
+    background-color: var(--color-seek-buffer);
+  }
+}
+
+.seek-input {
+  appearance: none;
+  cursor: pointer;
+  width: 100%;
+  z-index: 10000;
+
+  &::-webkit-slider-runnable-track {
+    background: transparent;
+  }
+
+  &::-webkit-slider-thumb {
+    appearance: none;
+    background-color: var(--color-seek-indicator);
+    border: 0;
+    border-radius: 5px;
+    height: var(--progress-height);
+    transition: height 0.25s ease, width 0.25s ease, opacity 0.25s ease, border-radius 0.25s ease;
+    transition-delay: 0.25s;
+    width: var(--progress-height);
+  }
+
+  &::-moz-range-track {
+    background: transparent;
+  }
+
+  &::-moz-range-thumb {
+    appearance: none;
+    background-color: var(--color-seek-indicator);
+    border: 0;
+    border-radius: 5px;
+    height: var(--progress-height);
+    transition: height 0.25s ease, width 0.25s ease, opacity 0.25s ease, border-radius 0.25s ease;
+    transition-delay: 0.25s;
+    width: var(--progress-height);
+  }
+}
+
+/* Volume */
+
+
+.volume-controls {
+  --color-volume-background: rgba(255, 255, 255, 20%);
+  --color-volume-active: #fff;
+
+  align-items: center;
+  display: flex;
+  height: 100%;
+
+  &:hover,
+  &:focus-visible,
+  &:focus,
+  &:active,
+  &:has(:focus-visible),
+  &:has(:focus),
+  &:has(:active) {
+    .volume-slider {
+      margin-left: 5px !important;
+      width: 80px;
+    }
+  }
+}
+
+.volume-slider {
+  align-items: center;
+  border-radius: 10px;
+  display: flex;
+  height: 10px;
+  overflow: hidden;
+  position: relative;
+  transition: width 0.25s ease, margin 0.25s ease;
+  width: 0;
+}
+
+.volume-input,
+.volume-progress {
+  height: 100%;
+  left: 0;
+  position: absolute;
+  width: 100%;
+}
+
+.volume-progress {
+  background: var(--color-volume-background);
+  height: 3px;
+
+  &::-webkit-progress-bar {
+    background: transparent;
+  }
+
+  &::-webkit-progress-value {
+    background-color: var(--color-volume-active);
+  }
+
+  &::-moz-progress-bar {
+    background-color: var(--color-volume-active);
+  }
+}
+
+.volume-input {
+  appearance: none;
+  cursor: pointer;
+  height: 100%;
+  width: 100%;
+
+  &:focus-visible {
+    border: 1px solid var(--color-highlight);
+  }
+
+  &::-webkit-slider-runnable-track {
+    background: transparent;
+  }
+
+  &::-webkit-slider-thumb {
+    appearance: none;
+    background: transparent;
+    border: 0;
+    height: 0;
+    width: 0;
+  }
+
+  &::-moz-range-track {
+    background: transparent;
+  }
+
+  &::-moz-range-thumb {
+    background: transparent;
+    border: 0;
+    height: 0;
+    width: 0;
+  }
+}
+
+
+/* Menus */
+
+.menu {
+  animation: 0.35s fadein ease;
+  backdrop-filter: blur(10px);
+  background: var(--color-menu-background);
+  border-radius: 10px;
+  bottom: calc(100% + 35px);
+  box-shadow: 0 0 32px 0 rgba(0, 0, 0, 100%);
+  color: var(--color-menu-text);
+  display: grid;
+  gap: 5px;
+
+  /* stylelint-disable-next-line function-name-case */
+  max-height: MIN(700px, CALC(var(--portal-height) * 0.7));
+  max-width: MIN(450px, CALC(var(--portal-width) * 0.8));
+  min-width: 350px;
+  overflow-y: auto;
+  padding: 12px 8px;
+  position: absolute;
+  right: 0;
+  width: max-content;
+
+  .menu-option {
+    /* Needs more specificity to override reset */
+    text-align: left;
+  }
+}
+
+.menu-option {
+  align-items: center;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  display: flex;
+  font-size: 16px;
+  justify-content: space-between;
+  min-height: 45px;
+  padding: 8px 15px;
+  transition: background-color 0.15s ease, color 0.15s ease;
+  width: 100%;
+
+  &.menu-option-back {
+    color: var(--color-menu-text-secondary);
+    justify-content: flex-start;
+  }
+
+  .menu-option-back-icon {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    margin-right: 10px;
+
+    svg {
+      height: 10px;
+    }
+  }
+
+  &:hover,
+  &:focus-visible,
+  .focus-visible {
+    background: var(--color-menu-button-focused);
+    color: var(--color-menu-text);
+    outline: 0!important;
+  }
+
+  &.menu-option-active {
+    background: var(--color-menu-button-active);
+  }
+}
+
+.menu-option-icon {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  padding-left: 30px;
+
+  svg {
+    height: 75%;
+  }
+}
+
+.menu-header {
+  color: var(--color-menu-text-header);
+  font-weight: 500;
+  pointer-events: none;
+  user-select: none;
+}
+
+
+/* Player size/orientation adjustments */
+
+:global(.__eluvio-player--size-sm) {
+  .volume-slider {
+    display: none;
+  }
+
+  .menu {
+    bottom: 75px;
+    max-width: calc(100% - 30px);
+    min-width: calc(100% - 30px);
+    right: 15px;
+  }
+
+  .menu-option {
+    font-size: 14px;
+    min-height: 36px;
+    padding: 5px 10px;
+  }
+
+  .seek-container {
+    &:hover,
+    &:active,
+    &:focus,
+    &:focus-visible,
+    &:has(:focus-visible) {
+      .seek-playhead,
+      .seek-buffer,
+      .seek-input {
+        border-radius: 10px;
+        height: var(--progress-height-expanded-mobile);
+      }
+
+      ::-webkit-slider-thumb {
+        border-radius: 100%;
+        height: var(--progress-height-expanded-mobile);
+        width: var(--progress-height-expanded-mobile);
+      }
+
+      ::-moz-range-thumb {
+        border-radius: 100%;
+        height: var(--progress-height-expanded-mobile);
+        width: var(--progress-height-expanded-mobile);
+      }
+    }
+  }
+}
+
+
+/* Animations */
+
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+@keyframes fadein {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes fadeout {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+
+
+@keyframes action-indicator-fade-out {
+  0% { opacity: 0; }
+  5% { opacity: 0.8; }
+  35% { opacity: 0.8; }
+  100% { opacity: 0; }
+}
+
+@keyframes action-indicator-icon-scale {
+  from { transform: scale(0.5); }
+  to { transform: scale(1); }
+}