@x-plat/design-system 0.5.4 → 0.5.5

package/dist/components/Video/index.css

@@ -14,11 +14,9 @@
   max-height: 100%;
   object-fit: contain;
   vertical-align: middle;
-}
-.lib-xplat-video.custom-overlay > video {
   cursor: pointer;
 }
-.lib-xplat-video.custom-overlay > .play-overlay {
+.lib-xplat-video > .center-play {
   position: absolute;
   top: 0;
   left: 0;
@@ -32,9 +30,10 @@
   cursor: pointer;
   padding: 0;
   color: var(--semantic-icon-inverse);
-  transition: opacity 0.2s ease, background-color 0.2s ease;
+  transition: opacity 0.2s ease;
+  pointer-events: none;
 }
-.lib-xplat-video.custom-overlay > .play-overlay::before {
+.lib-xplat-video > .center-play::before {
   content: "";
   position: absolute;
   inset: 0;
@@ -42,31 +41,214 @@
   opacity: 0;
   transition: opacity 0.2s ease;
 }
-.lib-xplat-video.custom-overlay > .play-overlay:hover::before,
-.lib-xplat-video.custom-overlay > .play-overlay:focus-visible::before {
-  opacity: 1;
-}
-.lib-xplat-video.custom-overlay > .play-overlay:focus-visible {
-  outline: 2px solid var(--semantic-interaction-focus-ring);
-  outline-offset: 2px;
-}
-.lib-xplat-video.custom-overlay > .play-overlay > .play-icon {
+.lib-xplat-video > .center-play > .center-play-icon {
   position: relative;
   z-index: 1;
   display: flex;
-  align-items: center;
-  justify-content: center;
   font-size: 64px;
   filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
 }
-.lib-xplat-video.custom-overlay > .play-overlay.is-playing {
+.lib-xplat-video > .center-play.is-playing {
   opacity: 0;
-  pointer-events: none;
 }
-.lib-xplat-video.custom-overlay > .play-overlay.is-loading .play-icon {
+.lib-xplat-video > .center-play.is-loading .center-play-icon {
   opacity: 0.6;
 }
-.lib-xplat-video.custom-overlay:hover > .play-overlay.is-playing {
+.lib-xplat-video > .controls {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  padding: var(--spacing-space-2) var(--spacing-space-3);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-space-1);
+  background:
+    linear-gradient(
+      to top,
+      rgba(0, 0, 0, 0.7),
+      rgba(0, 0, 0, 0));
+  color: var(--semantic-icon-inverse);
+  opacity: 0;
+  transition: opacity 0.2s ease;
+  pointer-events: none;
+}
+.lib-xplat-video:hover > .controls,
+.lib-xplat-video:focus-within > .controls {
   opacity: 1;
   pointer-events: auto;
 }
+.lib-xplat-video .controls-row {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-space-2);
+}
+.lib-xplat-video .control-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  border-radius: var(--spacing-radius-sm);
+  transition: background-color 0.15s ease;
+}
+.lib-xplat-video .control-btn:hover {
+  background-color: rgba(255, 255, 255, 0.15);
+}
+.lib-xplat-video .control-btn:focus-visible {
+  outline: 2px solid var(--semantic-interaction-focus-ring);
+  outline-offset: 2px;
+}
+.lib-xplat-video .controls-spacer {
+  margin-left: auto;
+}
+.lib-xplat-video .control-btn.is-active {
+  background-color: rgba(255, 255, 255, 0.25);
+}
+.lib-xplat-video .rate-group {
+  position: relative;
+}
+.lib-xplat-video .rate-group .rate-btn {
+  width: auto;
+  padding: 0 var(--spacing-space-2);
+  font-size: 12px;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+.lib-xplat-video .rate-group .rate-menu {
+  position: absolute;
+  bottom: calc(100% + var(--spacing-space-1));
+  right: 0;
+  margin: 0;
+  padding: var(--spacing-space-1);
+  list-style: none;
+  background-color: rgba(0, 0, 0, 0.85);
+  border-radius: var(--spacing-radius-sm);
+  min-width: 64px;
+}
+.lib-xplat-video .rate-group .rate-menu .rate-item {
+  width: 100%;
+  padding: var(--spacing-space-1) var(--spacing-space-2);
+  border: none;
+  background: transparent;
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+  border-radius: var(--spacing-radius-xs);
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+}
+.lib-xplat-video .rate-group .rate-menu .rate-item:hover {
+  background-color: rgba(255, 255, 255, 0.15);
+}
+.lib-xplat-video .rate-group .rate-menu .rate-item.is-active {
+  color: var(--semantic-surface-brand-default);
+  font-weight: 600;
+}
+.lib-xplat-video .time {
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+.lib-xplat-video .volume-group {
+  display: flex;
+  align-items: center;
+}
+.lib-xplat-video .volume-group .volume-slider {
+  width: 0;
+  opacity: 0;
+  transition: width 0.2s ease, opacity 0.2s ease;
+}
+.lib-xplat-video .volume-group:hover .volume-slider,
+.lib-xplat-video .volume-group:focus-within .volume-slider {
+  width: 80px;
+  opacity: 1;
+  margin-left: var(--spacing-space-1);
+}
+.lib-xplat-video .seekbar,
+.lib-xplat-video .volume-slider {
+  -webkit-appearance: none;
+  appearance: none;
+  background: transparent;
+  cursor: pointer;
+}
+.lib-xplat-video .seekbar:focus,
+.lib-xplat-video .volume-slider:focus {
+  outline: none;
+}
+.lib-xplat-video .seekbar::-webkit-slider-thumb,
+.lib-xplat-video .volume-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: #fff;
+  border: none;
+  cursor: pointer;
+}
+.lib-xplat-video .seekbar::-moz-range-thumb,
+.lib-xplat-video .volume-slider::-moz-range-thumb {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: #fff;
+  border: none;
+  cursor: pointer;
+}
+.lib-xplat-video .seekbar {
+  width: 100%;
+  height: 4px;
+}
+.lib-xplat-video .seekbar::-webkit-slider-runnable-track {
+  height: 4px;
+  border-radius: 2px;
+  background:
+    linear-gradient(
+      to right,
+      var(--semantic-surface-brand-default) 0%,
+      var(--semantic-surface-brand-default) var(--progress, 0%),
+      rgba(255, 255, 255, 0.4) var(--progress, 0%),
+      rgba(255, 255, 255, 0.4) var(--buffered, 0%),
+      rgba(255, 255, 255, 0.2) var(--buffered, 0%),
+      rgba(255, 255, 255, 0.2) 100%);
+}
+.lib-xplat-video .seekbar::-moz-range-track {
+  height: 4px;
+  border-radius: 2px;
+  background: rgba(255, 255, 255, 0.2);
+}
+.lib-xplat-video .seekbar::-moz-range-progress {
+  height: 4px;
+  border-radius: 2px;
+  background: var(--semantic-surface-brand-default);
+}
+.lib-xplat-video .volume-slider {
+  height: 4px;
+}
+.lib-xplat-video .volume-slider::-webkit-slider-runnable-track {
+  height: 4px;
+  border-radius: 2px;
+  background:
+    linear-gradient(
+      to right,
+      #fff 0%,
+      #fff var(--volume, 0%),
+      rgba(255, 255, 255, 0.3) var(--volume, 0%),
+      rgba(255, 255, 255, 0.3) 100%);
+}
+.lib-xplat-video .volume-slider::-moz-range-track {
+  height: 4px;
+  border-radius: 2px;
+  background: rgba(255, 255, 255, 0.3);
+}
+.lib-xplat-video .volume-slider::-moz-range-progress {
+  height: 4px;
+  border-radius: 2px;
+  background: #fff;
+}

package/dist/components/Video/index.d.cts

@@ -3,6 +3,17 @@ import React from 'react';
 interface VideoProps extends Omit<React.VideoHTMLAttributes<HTMLVideoElement>, "children" | "className" | "controls"> {
     src: string;
     poster?: string;
+    autoPlay?: boolean;
+    loop?: boolean;
+    muted?: boolean;
+    playsInline?: boolean;
+    showControls?: boolean;
+    showCenterPlay?: boolean;
+    playbackRates?: number[];
+    showCaptions?: boolean;
+    showPip?: boolean;
+    showDownload?: boolean;
+    downloadFileName?: string;
 }
 declare const Video: React.ForwardRefExoticComponent<VideoProps & React.RefAttributes<HTMLVideoElement>>;
 

package/dist/components/Video/index.d.ts

@@ -3,6 +3,17 @@ import React from 'react';
 interface VideoProps extends Omit<React.VideoHTMLAttributes<HTMLVideoElement>, "children" | "className" | "controls"> {
     src: string;
     poster?: string;
+    autoPlay?: boolean;
+    loop?: boolean;
+    muted?: boolean;
+    playsInline?: boolean;
+    showControls?: boolean;
+    showCenterPlay?: boolean;
+    playbackRates?: number[];
+    showCaptions?: boolean;
+    showPip?: boolean;
+    showDownload?: boolean;
+    downloadFileName?: string;
 }
 declare const Video: React.ForwardRefExoticComponent<VideoProps & React.RefAttributes<HTMLVideoElement>>;