@shohojdhara/atomix 0.1.30 → 0.2.1

package/src/styles/06-components/_components.video-player.scss

@@ -0,0 +1,623 @@
+// ============================================================================
+// VIDEO PLAYER COMPONENT
+// ============================================================================
+
+@use '../01-settings/settings.config' as *;
+@use '../01-settings/settings.video-player' as *;
+@use '../01-settings/settings.colors' as *;
+
+.c-video-player {
+  --atomix-video-player-bg: #{$video-player-bg};
+  --atomix-video-player-border-radius: #{$video-player-border-radius};
+  --atomix-video-player-controls-padding: #{$video-player-controls-padding};
+  --atomix-video-player-progress-height: #{$video-player-progress-height};
+  --atomix-video-player-button-size: #{$video-player-button-size};
+  --atomix-video-player-font-size: #{$video-player-font-size};
+  --atomix-video-player-transition: #{$video-player-transition};
+  --atomix-video-player-volume-width: #{$video-player-volume-width};
+  --atomix-video-player-volume-width-mobile: #{$video-player-volume-width-mobile};
+  --atomix-video-player-volume-height: #{$video-player-volume-height};
+  --atomix-video-player-volume-height-hover: #{$video-player-volume-height-hover};
+  --atomix-video-player-volume-thumb-size: #{$video-player-volume-thumb-size};
+  --atomix-video-player-volume-bg: #{$video-player-volume-bg};
+  --atomix-video-player-volume-bg-hover: #{$video-player-volume-bg-hover};
+  --atomix-video-player-volume-fill: #{$video-player-volume-fill};
+  --atomix-video-player-volume-fill-hover: #{$video-player-volume-fill-hover};
+  --atomix-video-player-volume-fill-active: #{$video-player-volume-fill-active};
+  --atomix-video-player-subtitle-bg: #{$video-player-subtitle-bg};
+  --atomix-video-player-subtitle-color: #{$video-player-subtitle-color};
+  --atomix-video-player-subtitle-font-size: #{$video-player-subtitle-font-size};
+  --atomix-video-player-subtitle-font-weight: #{$video-player-subtitle-font-weight};
+  --atomix-video-player-subtitle-line-height: #{$video-player-subtitle-line-height};
+  --atomix-video-player-subtitle-border-radius: #{$video-player-subtitle-border-radius};
+  --atomix-video-player-subtitle-text-shadow: #{$video-player-subtitle-text-shadow};
+  --atomix-video-player-subtitle-box-shadow: #{$video-player-subtitle-box-shadow};
+
+  position: relative;
+  width: 100%;
+  background: var(--#{$prefix}-video-player-bg, #000);
+  border-radius: var(--#{$prefix}-video-player-border-radius, 0.5rem);
+  overflow: hidden;
+  font-family: var(--#{$prefix}-font-family-base);
+
+  // &:focus-within,
+  // &:focus {
+  //   outline: 2px solid var(--#{$prefix}primary);
+  //   outline-offset: 2px;
+  // }
+
+  // Video element
+  &__video {
+    width: 100%;
+    height: 100%;
+    display: block;
+    object-fit: cover;
+
+    // Subtitle styling
+    &::cue {
+      background: var(--#{$prefix}video-player-subtitle-bg);
+      color: var(--#{$prefix}video-player-subtitle-color);
+      font-size: var(--#{$prefix}video-player-subtitle-font-size);
+      font-weight: var(--#{$prefix}video-player-subtitle-font-weight);
+      line-height: var(--#{$prefix}video-player-subtitle-line-height);
+      padding: var(--#{$prefix}video-player-subtitle-padding);
+      border-radius: var(--#{$prefix}video-player-subtitle-border-radius);
+      text-shadow: var(--#{$prefix}video-player-subtitle-text-shadow);
+      white-space: pre-line;
+      text-align: center;
+      width: auto;
+      height: auto;
+      display: inline-block;
+      box-shadow: var(--#{$prefix}video-player-subtitle-box-shadow);
+    }
+
+    &::cue(.large) {
+      font-size: calc(var(--#{$prefix}video-player-subtitle-font-size) * 1.2);
+      padding: calc(var(--#{$prefix}video-player-subtitle-padding) * 1.3);
+    }
+
+    &::cue(.small) {
+      font-size: calc(var(--#{$prefix}video-player-subtitle-font-size) * 0.85);
+      padding: calc(var(--#{$prefix}video-player-subtitle-padding) * 0.8);
+    }
+  }
+
+  // YouTube variant
+  &--youtube {
+    .c-video-player__video {
+      border: none;
+    }
+
+    // Hide custom controls for YouTube
+    .c-video-player__controls {
+      display: none;
+    }
+  }
+
+  // Loading state
+  &__loading {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 2;
+  }
+
+  &__spinner {
+    width: 2.5rem;
+    height: 2.5rem;
+    border: 3px solid rgba(255, 255, 255, 0.3);
+    border-top: 3px solid var(--#{$prefix}primary);
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+  }
+
+  @keyframes spin {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+  // Controls container
+  &__controls {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
+    padding: 1.25rem 1rem 1rem;
+    opacity: 0;
+    visibility: hidden;
+    transition: all 0.3s ease;
+    z-index: 3;
+
+    &--visible {
+      opacity: 1;
+      visibility: visible;
+    }
+  }
+
+  // Progress container
+  &__progress-container {
+    margin-bottom: 0.75rem;
+  }
+
+  &__progress-bar {
+    position: relative;
+    height: 0.25rem;
+    background: rgba(255, 255, 255, 0.3);
+    border-radius: 0.125rem;
+    cursor: pointer;
+    transition: height 0.2s ease;
+
+    &:hover {
+      height: 0.375rem;
+    }
+  }
+
+  &__progress-buffered {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    background: rgba(255, 255, 255, 0.5);
+    border-radius: 0.125rem;
+    transition: width 0.1s ease;
+  }
+
+  &__progress-played {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    background: var(--#{$prefix}primary);
+    border-radius: 0.125rem;
+    transition: width 0.1s ease;
+  }
+
+  &__progress-thumb {
+    position: absolute;
+    top: 50%;
+    width: 0.75rem;
+    height: 0.75rem;
+    background: var(--#{$prefix}primary);
+    border-radius: 50%;
+    transform: translate(-50%, -50%);
+    opacity: 0;
+    transition: opacity 0.2s ease;
+
+    .c-video-player__progress-bar:hover & {
+      opacity: 1;
+    }
+  }
+
+  // Controls row
+  &__controls-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.5rem;
+  }
+
+  &__controls-left,
+  &__controls-right {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  // Control buttons
+  &__control-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 2.5rem;
+    height: 2.5rem;
+    background: transparent;
+    border: none;
+    color: var(--#{$prefix}primary);
+    border-radius: 0.25rem;
+    cursor: pointer;
+    transition: all 0.2s ease;
+
+    &:hover {
+      background: rgba(255, 255, 255, 0.2);
+    }
+
+    &:focus {
+      outline: 2px solid var(--#{$prefix}primary);
+      outline-offset: 2px;
+    }
+
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    svg {
+      width: 1.25rem;
+      height: 1.25rem;
+    }
+  }
+
+  // Volume control
+  &__volume-container {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    position: relative;
+  }
+
+  &__volume-slider {
+    width: var(--#{$prefix}video-player-volume-width, 5rem);
+    opacity: 0;
+    visibility: hidden;
+    transform: translateX(-0.5rem);
+    transition: all 0.2s ease;
+    padding: 0.5rem;
+    margin: -0.5rem;
+
+    .c-video-player__volume-container:hover &,
+    .c-video-player__volume-container:focus-within & {
+      opacity: 1;
+      visibility: visible;
+      transform: translateX(0);
+    }
+  }
+
+  &__volume-bar {
+    position: relative;
+    height: var(--#{$prefix}video-player-volume-height, 0.25rem);
+    background: var(--#{$prefix}video-player-volume-bg, rgba(255, 255, 255, 0.3));
+    border-radius: 0.125rem;
+    cursor: pointer;
+    transition: all 0.2s ease;
+
+    &:hover,
+    &:focus-within {
+      height: var(--#{$prefix}-video-player-volume-height-hover, 0.375rem);
+      background: var(--#{$prefix}-video-player-volume-bg-hover, rgba(255, 255, 255, 0.5));
+    }
+
+    &:active {
+      background: var(--#{$prefix}-video-player-volume-bg-hover, rgba(255, 255, 255, 0.5));
+    }
+
+    &:focus {
+      outline: 2px solid var(--#{$prefix}primary);
+      outline-offset: 2px;
+    }
+  }
+
+  &__volume-fill {
+    position: relative;
+    height: 100%;
+    background: var(--#{$prefix}-video-player-volume-fill, var(--#{$prefix}primary));
+    border-radius: 0.125rem;
+    transition: all 0.1s ease;
+
+    .c-video-player__volume-bar:hover & {
+      background: var(--#{$prefix}-video-player-volume-fill-hover, var(--#{$prefix}primary));
+    }
+
+    .c-video-player__volume-bar:active & {
+      background: var(--#{$prefix}-video-player-volume-fill-active, var(--#{$prefix}primary));
+    }
+
+    &::after {
+      content: '';
+      position: absolute;
+      top: 50%;
+      right: calc(var(--#{$prefix}video-player-volume-thumb-size, 0.75rem) / -2);
+      width: var(--#{$prefix}video-player-volume-thumb-size, 0.75rem);
+      height: var(--#{$prefix}video-player-volume-thumb-size, 0.75rem);
+      background: white;
+      border: 2px solid var(--#{$prefix}video-player-volume-fill, var(--#{$prefix}primary));
+      border-radius: 50%;
+      transform: translateY(-50%);
+      opacity: 0;
+      transition: all 0.2s ease;
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+    }
+
+    .c-video-player__volume-bar:hover &::after,
+    .c-video-player__volume-bar:focus-within &::after {
+      opacity: 1;
+      transform: translateY(-50%) scale(1.1);
+    }
+  }
+
+  // Time display
+  &__time-display {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    color: white;
+    font-size: 0.875rem;
+    font-weight: 500;
+    min-width: 5rem;
+  }
+
+  // Settings menu
+  &__settings-container {
+    position: relative;
+  }
+
+  &__settings-menu {
+    position: absolute;
+    bottom: 3.125rem;
+    right: 0;
+    min-width: 12.5rem;
+    background: rgba(var(--#{$prefix}primary-rgb), 0.7);
+    border-radius: 0.5rem;
+    padding: 0.5rem;
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+  }
+
+  &__settings-tabs {
+    display: flex;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    margin-bottom: 0.5rem;
+  }
+
+  &__settings-tab {
+    flex: 1;
+    padding: 0.5rem 0.75rem;
+    background: transparent;
+    border: none;
+    color: rgba(255, 255, 255, 0.7);
+    font-size: 0.75rem;
+    cursor: pointer;
+    transition: color 0.2s ease;
+
+    &--active {
+      color: white;
+      border-bottom: 2px solid var(--#{$prefix}primary);
+    }
+
+    &:hover {
+      color: white;
+    }
+  }
+
+  &__settings-content {
+    max-height: 12.5rem;
+    overflow-y: auto;
+  }
+
+  &__settings-options {
+    display: flex;
+    flex-direction: column;
+    gap: 0.125rem;
+  }
+
+  &__settings-option {
+    padding: 0.5rem 0.75rem;
+    background: transparent;
+    border: none;
+    color: rgba(255, 255, 255, 0.8);
+    font-size: 0.875rem;
+    text-align: left;
+    cursor: pointer;
+    border-radius: 0.25rem;
+    transition: all 0.2s ease;
+
+    &:hover {
+      background: rgba(255, 255, 255, 0.1);
+      color: white;
+    }
+
+    &--active {
+      background: var(--#{$prefix}primary);
+      color: white;
+    }
+  }
+
+  // Responsive design
+  @media (max-width: 768px) {
+    &__controls {
+      padding: 1rem 0.75rem 0.75rem;
+    }
+
+    &__controls-row {
+      gap: 0.25rem;
+    }
+
+    &__controls-left,
+    &__controls-right {
+      gap: 0.25rem;
+    }
+
+    &__control-button {
+      width: 2.25rem;
+      height: 2.25rem;
+
+      svg {
+        width: 1.125rem;
+        height: 1.125rem;
+      }
+    }
+
+    &__volume-slider {
+      width: var(--#{$prefix}video-player-volume-width-mobile, 3.75rem);
+      opacity: 1;
+      visibility: visible;
+      transform: translateX(0);
+      padding: 0.25rem;
+      margin: -0.25rem;
+    }
+
+    &__volume-bar {
+      height: var(--#{$prefix}video-player-volume-height-hover, 0.375rem);
+    }
+
+    &__time-display {
+      font-size: 0.75rem;
+      min-width: 4.375rem;
+    }
+
+    &__settings-menu {
+      min-width: 10rem;
+      right: -1.25rem;
+    }
+
+    // Mobile subtitle adjustments
+    &__video::cue {
+      font-size: #{$video-player-subtitle-font-size-mobile};
+      padding: calc(#{$video-player-subtitle-padding-y} * 0.8)
+        calc(#{$video-player-subtitle-padding-x} * 0.8);
+    }
+
+    &__subtitles {
+      bottom: 4rem;
+      max-width: 95%;
+
+      &-text {
+        font-size: #{$video-player-subtitle-font-size-mobile};
+        padding: calc(#{$video-player-subtitle-padding-y} * 0.8)
+          calc(#{$video-player-subtitle-padding-x} * 0.8);
+      }
+    }
+  }
+
+  // Fullscreen styles
+  &:fullscreen {
+    .c-video-player__controls {
+      padding: 1.5rem 1.25rem 1.25rem;
+    }
+
+    .c-video-player__control-button {
+      width: 3rem;
+      height: 3rem;
+
+      svg {
+        width: 1.5rem;
+        height: 1.5rem;
+      }
+    }
+
+    .c-video-player__time-display {
+      font-size: 1rem;
+    }
+
+    // Fullscreen subtitle adjustments
+    .c-video-player__video::cue {
+      font-size: #{$video-player-subtitle-font-size-fullscreen};
+      padding: calc(#{$video-player-subtitle-padding-y} * 1.3)
+        calc(#{$video-player-subtitle-padding-x} * 1.3);
+    }
+
+    .c-video-player__subtitles {
+      bottom: 6rem;
+
+      &-text {
+        font-size: #{$video-player-subtitle-font-size-fullscreen};
+        padding: calc(#{$video-player-subtitle-padding-y} * 1.3)
+          calc(#{$video-player-subtitle-padding-x} * 1.3);
+      }
+    }
+  }
+
+  // Picture-in-picture styles
+  &:picture-in-picture {
+    .c-video-player__controls {
+      display: none;
+    }
+  }
+
+  // Dark theme support
+  @media (prefers-color-scheme: dark) {
+    --#{$prefix}-video-player-bg: #000;
+  }
+
+  // Light theme support
+  @media (prefers-color-scheme: light) {
+    --#{$prefix}-video-player-bg: #000;
+  }
+
+  // High contrast mode
+  @media (prefers-contrast: high) {
+    .c-video-player__progress-bar {
+      background: rgba(255, 255, 255, 0.8);
+    }
+
+    .c-video-player__control-button {
+      border: 1px solid rgba(255, 255, 255, 0.5);
+    }
+  }
+
+  // Ambient mode
+  &--ambient {
+    overflow: visible;
+  }
+
+  &__ambient-canvas {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 120%;
+    height: 120%;
+    z-index: -1;
+    filter: blur(40px);
+    pointer-events: none;
+    display: none;
+  }
+
+  &--ambient &__ambient-canvas {
+    display: block;
+  }
+
+  // Subtitle track styling (fallback for browsers that don't support ::cue)
+  &__subtitles {
+    position: absolute;
+    bottom: 5rem;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: var(--#{$prefix}-video-player-subtitles-z, 4);
+    pointer-events: none;
+    text-align: center;
+    max-width: 90%;
+    width: auto;
+    height: auto;
+
+    &-text {
+      display: inline-block;
+      background: var(--#{$prefix}-video-player-subtitle-bg);
+      color: var(--#{$prefix}-video-player-subtitle-color);
+      font-size: var(--#{$prefix}-video-player-subtitle-font-size);
+      font-weight: var(--#{$prefix}video-player-subtitle-font-weight);
+      line-height: var(--#{$prefix}video-player-subtitle-line-height);
+      padding: var(--#{$prefix}video-player-subtitle-padding);
+      border-radius: var(--#{$prefix}video-player-subtitle-border-radius);
+      text-shadow: var(--#{$prefix}video-player-subtitle-text-shadow);
+      margin: 0.125rem;
+      white-space: pre-line;
+      word-wrap: break-word;
+      max-width: 100%;
+      box-shadow: var(--#{$prefix}video-player-subtitle-box-shadow);
+    }
+  }
+
+  // Reduced motion
+  @media (prefers-reduced-motion: reduce) {
+    .c-video-player__controls,
+    .c-video-player__progress-played,
+    .c-video-player__progress-buffered,
+    .c-video-player__volume-fill {
+      transition: none;
+    }
+
+    .c-video-player__spinner {
+      animation: none;
+    }
+
+    &--ambient .c-video-player__ambient-canvas {
+      display: none;
+    }
+  }
+}

package/src/styles/06-components/_index.scss

@@ -8,6 +8,7 @@
 @forward 'components.button';
 @forward 'components.datepicker';
 @forward 'components.card';
+@forward 'components.chart';
 @forward 'components.checkbox-group';
 @forward 'components.checkbox';
 @forward 'components.color-mode-toggle';
@@ -37,6 +38,7 @@
 @forward 'components.select';
 @forward 'components.side-menu';
 @forward 'components.skeleton';
+@forward 'components.slider';
 @forward 'components.spinner';
 @forward 'components.steps';
 @forward 'components.tabs';
@@ -45,5 +47,6 @@
 @forward 'components.toggle';
 @forward 'components.tooltip';
 @forward 'components.upload';
+@forward 'components.video-player';
 @forward 'components.photoviewer';
 @forward 'components.image-gallery';