chore(site): rename website to site

site/src/examples/react/TimeSlider/BasicTimeSlider.tsx

@@ -0,0 +1,24 @@
+import { TimeSlider } from '@videojs/react';
+import styles from './TimeSlider.module.css';
+
+/**
+ * Basic TimeSlider example demonstrating:
+ * - Progress and pointer visualization
+ * - Horizontal orientation
+ * - CSS Modules for scoped styling
+ * - Data attribute selectors for state-based styling
+ *
+ * Note: This component must be used within a MediaProvider context.
+ * See the usage example in the documentation.
+ */
+export function BasicTimeSlider() {
+  return (
+    <TimeSlider.Root className={styles.root} orientation="horizontal">
+      <TimeSlider.Track className={styles.track}>
+        <TimeSlider.Progress className={styles.progress} />
+        <TimeSlider.Pointer className={styles.pointer} />
+      </TimeSlider.Track>
+      <TimeSlider.Thumb className={styles.thumb} />
+    </TimeSlider.Root>
+  );
+}

site/src/examples/react/TimeSlider/TimeSlider.module.css

@@ -0,0 +1,64 @@
+.root {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Horizontal orientation */
+.root[data-orientation='horizontal'] {
+  width: 100%;
+  min-width: 100px;
+  height: 20px;
+}
+
+/* Vertical orientation */
+.root[data-orientation='vertical'] {
+  width: 20px;
+  height: 100px;
+  flex-direction: column;
+}
+
+.track {
+  position: relative;
+  background-color: rgba(255, 255, 255, 0.2);
+  border-radius: 0.25rem;
+  overflow: hidden;
+}
+
+/* Horizontal track */
+.track[data-orientation='horizontal'] {
+  width: 100%;
+  height: 0.375rem;
+}
+
+/* Vertical track */
+.track[data-orientation='vertical'] {
+  width: 0.375rem;
+  height: 100%;
+}
+
+.progress {
+  background-color: #007bff;
+  border-radius: inherit;
+  position: absolute;
+}
+
+.pointer {
+  background-color: rgba(255, 255, 255, 0.5);
+  position: absolute;
+  pointer-events: none;
+}
+
+.thumb {
+  width: 0.75rem;
+  height: 0.75rem;
+  background-color: #fff;
+  border-radius: 50%;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  transition: transform 150ms ease;
+}
+
+.thumb:hover {
+  transform: scale(1.2);
+}

site/src/examples/react/TimeSlider/TimeSliderDemo.tsx

@@ -0,0 +1,24 @@
+import { MediaContainer, MediaProvider, Video } from '@videojs/react';
+import { BasicTimeSlider } from './BasicTimeSlider';
+
+/**
+ * Demo showing proper MediaProvider usage with TimeSlider.
+ * The MediaProvider wraps the entire media experience and provides
+ * the necessary context for all media components.
+ */
+export function TimeSliderDemo() {
+  return (
+    <MediaProvider>
+      <MediaContainer style={{ maxWidth: '640px', position: 'relative' }}>
+        <Video
+          src="https://stream.mux.com/UZMwOY6MgmhFNXLbSFXAuPKlRPss5XNA.m3u8"
+          poster="https://image.mux.com/UZMwOY6MgmhFNXLbSFXAuPKlRPss5XNA/thumbnail.webp"
+          muted
+        />
+        <div style={{ position: 'absolute', bottom: '1rem', left: '1rem', right: '1rem', zIndex: 10 }}>
+          <BasicTimeSlider />
+        </div>
+      </MediaContainer>
+    </MediaProvider>
+  );
+}