Initial commit: modern React video player library

Add all source files for a feature-rich, reusable video player built with React, TypeScript, and Vite. Includes core components, context, hooks, utilities, styles, demo app, and configuration files.
2025-10-29 07:49:06 +03:00
parent d68df70124
commit b57b24d051
47 changed files with 4414 additions and 0 deletions
@@ -0,0 +1,104 @@
+.volume-control {
+  display: flex;
+  align-items: center;
+  gap: var(--player-spacing-sm);
+  position: relative;
+}
+
+.volume-slider-container {
+  position: relative;
+  width: 0;
+  height: 6px;
+  background-color: var(--player-progress-bg);
+  border-radius: var(--player-radius-full);
+  overflow: visible;
+  transition: width var(--player-transition-normal) ease, opacity var(--player-transition-normal) ease;
+  opacity: 0;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+.volume-slider-container.visible {
+  width: 100px;
+  opacity: 1;
+}
+
+.volume-slider {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transform: translateY(-50%);
+  -webkit-appearance: none;
+  appearance: none;
+  background: transparent;
+  cursor: pointer;
+  z-index: 2;
+}
+
+.volume-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background-color: var(--player-primary);
+  cursor: pointer;
+  box-shadow: 0 0 6px rgba(0, 0, 0, 0.4), 0 0 0 2px rgba(255, 255, 255, 0.1);
+  transition: transform var(--player-transition-fast) ease, box-shadow var(--player-transition-fast) ease;
+}
+
+.volume-slider::-webkit-slider-thumb:hover {
+  transform: scale(1.15);
+  box-shadow: 0 0 8px rgba(239, 68, 68, 0.6), 0 0 0 3px rgba(255, 255, 255, 0.15);
+}
+
+.volume-slider::-moz-range-thumb {
+  width: 16px;
+  height: 16px;
+  border: none;
+  border-radius: 50%;
+  background-color: var(--player-primary);
+  cursor: pointer;
+  box-shadow: 0 0 6px rgba(0, 0, 0, 0.4), 0 0 0 2px rgba(255, 255, 255, 0.1);
+  transition: transform var(--player-transition-fast) ease, box-shadow var(--player-transition-fast) ease;
+}
+
+.volume-slider::-moz-range-thumb:hover {
+  transform: scale(1.15);
+  box-shadow: 0 0 8px rgba(239, 68, 68, 0.6), 0 0 0 3px rgba(255, 255, 255, 0.15);
+}
+
+.volume-slider:focus {
+  outline: none;
+}
+
+.volume-slider:focus-visible::-webkit-slider-thumb {
+  outline: 2px solid var(--player-primary);
+  outline-offset: 2px;
+}
+
+.volume-slider:focus-visible::-moz-range-thumb {
+  outline: 2px solid var(--player-primary);
+  outline-offset: 2px;
+}
+
+.volume-slider-fill {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  background: linear-gradient(90deg, var(--player-primary) 0%, var(--player-primary-hover) 100%);
+  pointer-events: none;
+  transition: width 0.1s ease;
+  z-index: 1;
+  border-radius: var(--player-radius-full);
+  box-shadow: 0 0 8px rgba(239, 68, 68, 0.4);
+}
+
+/* Mobile: Show slider vertically */
+@media (max-width: 640px) {
+  .volume-slider-container.visible {
+    width: 70px;
+  }
+}