@therealtinhtute/baroiplayer 1.0.8 → 1.2.0

package/src/components/examples/volume-orientation-demo.tsx

@@ -4,89 +4,81 @@ import { useState } from "react"
 import { SimpleMinimalPlayer } from "../variants/minimal/SimpleMinimalPlayer"
 
 export function VolumeOrientationDemo() {
-  const [orientation, setOrientation] = useState<"horizontal" | "vertical">("horizontal")
-  
-  return (
-    <div className="min-h-screen bg-gray-950 p-8">
-      <div className="mx-auto max-w-5xl space-y-8">
-        <div className="text-center">
-          <h1 className="mb-4 font-bold text-3xl text-white">
-            Enhanced Volume Control Demo
-          </h1>
-          <p className="mb-6 text-gray-400">
-            Small gradient volume slider with horizontal/vertical orientation
-          </p>
-          
-          {/* Orientation toggle */}
-          <div className="mb-8 flex justify-center gap-4">
-            <button
-              onClick={() => setOrientation("horizontal")}
-              className={`rounded-lg px-4 py-2 transition-colors ${
-                orientation === "horizontal" 
-                  ? "bg-cyan-600 text-white" 
-                  : "bg-gray-800 text-gray-400 hover:bg-gray-700"
-              }`}
-            >
-              Horizontal (Default)
-            </button>
-            <button
-              onClick={() => setOrientation("vertical")}
-              className={`rounded-lg px-4 py-2 transition-colors ${
-                orientation === "vertical" 
-                  ? "bg-cyan-600 text-white" 
-                  : "bg-gray-800 text-gray-400 hover:bg-gray-700"
-              }`}
-            >
-              Vertical
-            </button>
-          </div>
-        </div>
+	const [orientation, setOrientation] = useState<"horizontal" | "vertical">("horizontal")
 
-        {/* Demo Player */}
-        <div className="aspect-video overflow-hidden rounded-lg bg-black">
-          <SimpleMinimalPlayer
-            src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
-            poster="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg"
-            crossOrigin="anonymous"
-            className="h-full w-full"
-            volumeOrientation={orientation}
-          />
-        </div>
+	return (
+		<div className="min-h-screen bg-gray-950 p-8">
+			<div className="mx-auto max-w-5xl space-y-8">
+				<div className="text-center">
+					<h1 className="mb-4 font-bold text-3xl text-white">Enhanced Volume Control Demo</h1>
+					<p className="mb-6 text-gray-400">
+						Small gradient volume slider with horizontal/vertical orientation
+					</p>
 
-        {/* Features list */}
-        <div className="mt-8 grid gap-6 md:grid-cols-2">
-          <div className="rounded-lg bg-gray-900 p-6">
-            <h3 className="mb-3 font-semibold text-lg text-white">
-              Horizontal Mode (Default)
-            </h3>
-            <ul className="space-y-2 text-gray-400 text-sm">
-              <li>• Slider appears beside the volume button</li>
-              <li>• Expands horizontally on hover</li>
-              <li>• Cyan to blue gradient (4px height)</li>
-              <li>• Smooth 300ms transition</li>
-              <li>• White thumb appears on hover</li>
-            </ul>
-          </div>
-          
-          <div className="rounded-lg bg-gray-900 p-6">
-            <h3 className="mb-3 font-semibold text-lg text-white">
-              Vertical Mode
-            </h3>
-            <ul className="space-y-2 text-gray-400 text-sm">
-              <li>• Slider appears above the volume button</li>
-              <li>• Expands vertically on hover</li>
-              <li>• Same gradient rotated 90°</li>
-              <li>• Shows percentage value</li>
-              <li>• Dark backdrop for visibility</li>
-            </ul>
-          </div>
-        </div>
+					{/* Orientation toggle */}
+					<div className="mb-8 flex justify-center gap-4">
+						<button
+							onClick={() => setOrientation("horizontal")}
+							className={`rounded-lg px-4 py-2 transition-colors ${
+								orientation === "horizontal"
+									? "bg-cyan-600 text-white"
+									: "bg-gray-800 text-gray-400 hover:bg-gray-700"
+							}`}>
+							Horizontal (Default)
+						</button>
+						<button
+							onClick={() => setOrientation("vertical")}
+							className={`rounded-lg px-4 py-2 transition-colors ${
+								orientation === "vertical"
+									? "bg-cyan-600 text-white"
+									: "bg-gray-800 text-gray-400 hover:bg-gray-700"
+							}`}>
+							Vertical
+						</button>
+					</div>
+				</div>
 
-        {/* Code example */}
-        <div className="rounded-lg bg-gray-900 p-6">
-          <h3 className="mb-3 font-semibold text-lg text-white">Usage Example</h3>
-          <pre className="overflow-x-auto text-gray-300 text-sm">
-            <code>{`// Default horizontal orientation
+				{/* Demo Player */}
+				<div className="aspect-video overflow-hidden rounded-lg bg-black">
+					<SimpleMinimalPlayer
+						src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
+						poster="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg"
+						crossOrigin="anonymous"
+						className="h-full w-full"
+						volumeOrientation={orientation}
+					/>
+				</div>
+
+				{/* Features list */}
+				<div className="mt-8 grid gap-6 md:grid-cols-2">
+					<div className="rounded-lg bg-gray-900 p-6">
+						<h3 className="mb-3 font-semibold text-lg text-white">Horizontal Mode (Default)</h3>
+						<ul className="space-y-2 text-gray-400 text-sm">
+							<li>• Slider appears beside the volume button</li>
+							<li>• Expands horizontally on hover</li>
+							<li>• Cyan to blue gradient (4px height)</li>
+							<li>• Smooth 300ms transition</li>
+							<li>• White thumb appears on hover</li>
+						</ul>
+					</div>
+
+					<div className="rounded-lg bg-gray-900 p-6">
+						<h3 className="mb-3 font-semibold text-lg text-white">Vertical Mode</h3>
+						<ul className="space-y-2 text-gray-400 text-sm">
+							<li>• Slider appears above the volume button</li>
+							<li>• Expands vertically on hover</li>
+							<li>• Same gradient rotated 90°</li>
+							<li>• Shows percentage value</li>
+							<li>• Dark backdrop for visibility</li>
+						</ul>
+					</div>
+				</div>
+
+				{/* Code example */}
+				<div className="rounded-lg bg-gray-900 p-6">
+					<h3 className="mb-3 font-semibold text-lg text-white">Usage Example</h3>
+					<pre className="overflow-x-auto text-gray-300 text-sm">
+						<code>{`// Default horizontal orientation
 <VolumeControl
   volume={volume}
   isMuted={isMuted}
@@ -106,9 +98,9 @@ export function VolumeOrientationDemo() {
   onShowVolumeSlider={setShowSlider}
   orientation="vertical"
 />`}</code>
-          </pre>
-        </div>
-      </div>
-    </div>
-  )
+					</pre>
+				</div>
+			</div>
+		</div>
+	)
 }

package/src/components/icon-demo.tsx

@@ -1,209 +1,196 @@
-import { useState } from 'react'
-import { 
-  IconProvider, 
-  PlayIcon, 
-  PauseIcon, 
-  VolumeIcon, 
-  VolumeOffIcon, 
-  SettingsIcon, 
-  FullscreenIcon,
-  LoadingIcon,
-  PlayPauseIcon 
-} from '../icons'
+import { useState } from "react"
+import {
+	FullscreenIcon,
+	IconProvider,
+	LoadingIcon,
+	PauseIcon,
+	PlayIcon,
+	PlayPauseIcon,
+	SettingsIcon,
+	VolumeIcon,
+	VolumeOffIcon
+} from "../icons"
 
 export function IconSystemDemo() {
-  const [isPlaying, setIsPlaying] = useState(false)
-  const [volume, setVolume] = useState(0.8)
-  const [theme, setTheme] = useState({
-    size: 24,
-    strokeWidth: 2,
-    color: 'currentColor'
-  })
+	const [isPlaying, setIsPlaying] = useState(false)
+	const [volume, setVolume] = useState(0.8)
+	const [theme, setTheme] = useState({
+		size: 24,
+		strokeWidth: 2,
+		color: "currentColor"
+	})
 
-  const customPlayIcon = ({ className, ...props }: any) => (
-    <svg 
-      className={className}
-      width="24" 
-      height="24" 
-      viewBox="0 0 24 24" 
-      fill="none"
-      {...props}
-    >
-      <circle cx="12" cy="12" r="10" fill="#ff6b6b" />
-      <polygon points="10 8 16 12 10 16 10 8" fill="white" />
-    </svg>
-  )
+	const customPlayIcon = ({ className, ...props }: any) => (
+		<svg className={className} width="24" height="24" viewBox="0 0 24 24" fill="none" {...props}>
+			<circle cx="12" cy="12" r="10" fill="#ff6b6b" />
+			<polygon points="10 8 16 12 10 16 10 8" fill="white" />
+		</svg>
+	)
 
-  return (
-    <div className="min-h-screen bg-gray-950 p-8">
-      <div className="mx-auto max-w-4xl">
-        <h1 className="mb-8 text-center font-bold text-3xl text-white">
-          Icon System Demo
-        </h1>
-        
-        {/* Theme Controls */}
-        <div className="mb-8 rounded-lg bg-gray-800 p-6">
-          <h2 className="mb-4 font-semibold text-white text-xl">Theme Configuration</h2>
-          <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
-            <div>
-              <label className="mb-2 block font-medium text-sm text-white">
-                Size: {theme.size}
-              </label>
-              <input
-                type="range"
-                min="16"
-                max="48"
-                value={theme.size}
-                onChange={(e) => setTheme(prev => ({ ...prev, size: Number(e.target.value) }))}
-                className="h-2 w-full cursor-pointer appearance-none rounded-lg bg-gray-700"
-              />
-            </div>
-            <div>
-              <label className="mb-2 block font-medium text-sm text-white">
-                Stroke Width: {theme.strokeWidth}
-              </label>
-              <input
-                type="range"
-                min="1"
-                max="4"
-                step="0.5"
-                value={theme.strokeWidth}
-                onChange={(e) => setTheme(prev => ({ ...prev, strokeWidth: Number(e.target.value) }))}
-                className="h-2 w-full cursor-pointer appearance-none rounded-lg bg-gray-700"
-              />
-            </div>
-            <div>
-              <label className="mb-2 block font-medium text-sm text-white">Color</label>
-              <select
-                value={theme.color}
-                onChange={(e) => setTheme(prev => ({ ...prev, color: e.target.value }))}
-                className="w-full rounded-lg border border-gray-600 bg-gray-700 p-2 text-white"
-              >
-                <option value="currentColor">Current Color</option>
-                <option value="#ffffff">White</option>
-                <option value="#06b6d4">Cyan</option>
-                <option value="#f59e0b">Amber</option>
-                <option value="#ef4444">Red</option>
-              </select>
-            </div>
-          </div>
-        </div>
+	return (
+		<div className="min-h-screen bg-gray-950 p-8">
+			<div className="mx-auto max-w-4xl">
+				<h1 className="mb-8 text-center font-bold text-3xl text-white">Icon System Demo</h1>
 
-        <div className="grid grid-cols-1 gap-8 lg:grid-cols-2">
-          {/* Default Icons */}
-          <div className="rounded-lg bg-gray-800 p-6">
-            <h2 className="mb-4 font-semibold text-white text-xl">Default Icons</h2>
-            <IconProvider theme={theme}>
-              <div className="grid grid-cols-4 gap-4 text-white">
-                <div className="flex flex-col items-center space-y-2">
-                  <PlayIcon />
-                  <span className="text-xs">Play</span>
-                </div>
-                <div className="flex flex-col items-center space-y-2">
-                  <PauseIcon />
-                  <span className="text-xs">Pause</span>
-                </div>
-                <div className="flex flex-col items-center space-y-2">
-                  <VolumeIcon />
-                  <span className="text-xs">Volume</span>
-                </div>
-                <div className="flex flex-col items-center space-y-2">
-                  <VolumeOffIcon />
-                  <span className="text-xs">Mute</span>
-                </div>
-                <div className="flex flex-col items-center space-y-2">
-                  <SettingsIcon />
-                  <span className="text-xs">Settings</span>
-                </div>
-                <div className="flex flex-col items-center space-y-2">
-                  <FullscreenIcon />
-                  <span className="text-xs">Fullscreen</span>
-                </div>
-                <div className="flex flex-col items-center space-y-2">
-                  <LoadingIcon />
-                  <span className="text-xs">Loading</span>
-                </div>
-                <div className="flex flex-col items-center space-y-2">
-                  <PlayPauseIcon isPlaying={isPlaying} />
-                  <span className="text-xs">Play/Pause</span>
-                </div>
-              </div>
-            </IconProvider>
-          </div>
+				{/* Theme Controls */}
+				<div className="mb-8 rounded-lg bg-gray-800 p-6">
+					<h2 className="mb-4 font-semibold text-white text-xl">Theme Configuration</h2>
+					<div className="grid grid-cols-1 gap-4 md:grid-cols-3">
+						<div>
+							<label className="mb-2 block font-medium text-sm text-white">
+								Size: {theme.size}
+							</label>
+							<input
+								type="range"
+								min="16"
+								max="48"
+								value={theme.size}
+								onChange={(e) => setTheme((prev) => ({ ...prev, size: Number(e.target.value) }))}
+								className="h-2 w-full cursor-pointer appearance-none rounded-lg bg-gray-700"
+							/>
+						</div>
+						<div>
+							<label className="mb-2 block font-medium text-sm text-white">
+								Stroke Width: {theme.strokeWidth}
+							</label>
+							<input
+								type="range"
+								min="1"
+								max="4"
+								step="0.5"
+								value={theme.strokeWidth}
+								onChange={(e) =>
+									setTheme((prev) => ({ ...prev, strokeWidth: Number(e.target.value) }))
+								}
+								className="h-2 w-full cursor-pointer appearance-none rounded-lg bg-gray-700"
+							/>
+						</div>
+						<div>
+							<label className="mb-2 block font-medium text-sm text-white">Color</label>
+							<select
+								value={theme.color}
+								onChange={(e) => setTheme((prev) => ({ ...prev, color: e.target.value }))}
+								className="w-full rounded-lg border border-gray-600 bg-gray-700 p-2 text-white">
+								<option value="currentColor">Current Color</option>
+								<option value="#ffffff">White</option>
+								<option value="#06b6d4">Cyan</option>
+								<option value="#f59e0b">Amber</option>
+								<option value="#ef4444">Red</option>
+							</select>
+						</div>
+					</div>
+				</div>
 
-          {/* Custom Icons */}
-          <div className="rounded-lg bg-gray-800 p-6">
-            <h2 className="mb-4 font-semibold text-white text-xl">Custom Icons</h2>
-            <IconProvider 
-              theme={theme}
-              icons={{
-                play: customPlayIcon
-              }}
-            >
-              <div className="grid grid-cols-4 gap-4 text-white">
-                <div className="flex flex-col items-center space-y-2">
-                  <PlayIcon />
-                  <span className="text-xs">Custom Play</span>
-                </div>
-                <div className="flex flex-col items-center space-y-2">
-                  <PauseIcon />
-                  <span className="text-xs">Default Pause</span>
-                </div>
-                <div className="flex flex-col items-center space-y-2">
-                  <VolumeIcon />
-                  <span className="text-xs">Default Volume</span>
-                </div>
-                <div className="flex flex-col items-center space-y-2">
-                  <SettingsIcon />
-                  <span className="text-xs">Default Settings</span>
-                </div>
-              </div>
-            </IconProvider>
-          </div>
-        </div>
+				<div className="grid grid-cols-1 gap-8 lg:grid-cols-2">
+					{/* Default Icons */}
+					<div className="rounded-lg bg-gray-800 p-6">
+						<h2 className="mb-4 font-semibold text-white text-xl">Default Icons</h2>
+						<IconProvider theme={theme}>
+							<div className="grid grid-cols-4 gap-4 text-white">
+								<div className="flex flex-col items-center space-y-2">
+									<PlayIcon />
+									<span className="text-xs">Play</span>
+								</div>
+								<div className="flex flex-col items-center space-y-2">
+									<PauseIcon />
+									<span className="text-xs">Pause</span>
+								</div>
+								<div className="flex flex-col items-center space-y-2">
+									<VolumeIcon />
+									<span className="text-xs">Volume</span>
+								</div>
+								<div className="flex flex-col items-center space-y-2">
+									<VolumeOffIcon />
+									<span className="text-xs">Mute</span>
+								</div>
+								<div className="flex flex-col items-center space-y-2">
+									<SettingsIcon />
+									<span className="text-xs">Settings</span>
+								</div>
+								<div className="flex flex-col items-center space-y-2">
+									<FullscreenIcon />
+									<span className="text-xs">Fullscreen</span>
+								</div>
+								<div className="flex flex-col items-center space-y-2">
+									<LoadingIcon />
+									<span className="text-xs">Loading</span>
+								</div>
+								<div className="flex flex-col items-center space-y-2">
+									<PlayPauseIcon isPlaying={isPlaying} />
+									<span className="text-xs">Play/Pause</span>
+								</div>
+							</div>
+						</IconProvider>
+					</div>
 
-        {/* Interactive Demo */}
-        <div className="mt-8 rounded-lg bg-gray-800 p-6">
-          <h2 className="mb-4 font-semibold text-white text-xl">Interactive Media Player Demo</h2>
-          <IconProvider theme={{ ...theme, size: 32 }}>
-            <div className="flex items-center justify-center space-x-6 text-white">
-              <button
-                onClick={() => setIsPlaying(!isPlaying)}
-                className="rounded-full bg-blue-600 p-3 transition-colors hover:bg-blue-700"
-                aria-label={isPlaying ? 'Pause' : 'Play'}
-              >
-                <PlayPauseIcon isPlaying={isPlaying} />
-              </button>
-              
-              <button
-                onClick={() => setVolume(volume > 0 ? 0 : 0.8)}
-                className="rounded-full bg-gray-600 p-3 transition-colors hover:bg-gray-700"
-                aria-label={volume > 0 ? 'Mute' : 'Unmute'}
-              >
-                {volume > 0 ? <VolumeIcon /> : <VolumeOffIcon />}
-              </button>
-              
-              <button
-                className="rounded-full bg-gray-600 p-3 transition-colors hover:bg-gray-700"
-                aria-label="Settings"
-              >
-                <SettingsIcon />
-              </button>
-              
-              <button
-                className="rounded-full bg-gray-600 p-3 transition-colors hover:bg-gray-700"
-                aria-label="Fullscreen"
-              >
-                <FullscreenIcon />
-              </button>
-            </div>
-          </IconProvider>
-          
-          <div className="mt-4 text-center text-gray-400 text-sm">
-            Status: {isPlaying ? 'Playing' : 'Paused'} | Volume: {volume > 0 ? 'On' : 'Muted'}
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
+					{/* Custom Icons */}
+					<div className="rounded-lg bg-gray-800 p-6">
+						<h2 className="mb-4 font-semibold text-white text-xl">Custom Icons</h2>
+						<IconProvider
+							theme={theme}
+							icons={{
+								play: customPlayIcon
+							}}>
+							<div className="grid grid-cols-4 gap-4 text-white">
+								<div className="flex flex-col items-center space-y-2">
+									<PlayIcon />
+									<span className="text-xs">Custom Play</span>
+								</div>
+								<div className="flex flex-col items-center space-y-2">
+									<PauseIcon />
+									<span className="text-xs">Default Pause</span>
+								</div>
+								<div className="flex flex-col items-center space-y-2">
+									<VolumeIcon />
+									<span className="text-xs">Default Volume</span>
+								</div>
+								<div className="flex flex-col items-center space-y-2">
+									<SettingsIcon />
+									<span className="text-xs">Default Settings</span>
+								</div>
+							</div>
+						</IconProvider>
+					</div>
+				</div>
+
+				{/* Interactive Demo */}
+				<div className="mt-8 rounded-lg bg-gray-800 p-6">
+					<h2 className="mb-4 font-semibold text-white text-xl">Interactive Media Player Demo</h2>
+					<IconProvider theme={{ ...theme, size: 32 }}>
+						<div className="flex items-center justify-center space-x-6 text-white">
+							<button
+								onClick={() => setIsPlaying(!isPlaying)}
+								className="rounded-full bg-blue-600 p-3 transition-colors hover:bg-blue-700"
+								aria-label={isPlaying ? "Pause" : "Play"}>
+								<PlayPauseIcon isPlaying={isPlaying} />
+							</button>
+
+							<button
+								onClick={() => setVolume(volume > 0 ? 0 : 0.8)}
+								className="rounded-full bg-gray-600 p-3 transition-colors hover:bg-gray-700"
+								aria-label={volume > 0 ? "Mute" : "Unmute"}>
+								{volume > 0 ? <VolumeIcon /> : <VolumeOffIcon />}
+							</button>
+
+							<button
+								className="rounded-full bg-gray-600 p-3 transition-colors hover:bg-gray-700"
+								aria-label="Settings">
+								<SettingsIcon />
+							</button>
+
+							<button
+								className="rounded-full bg-gray-600 p-3 transition-colors hover:bg-gray-700"
+								aria-label="Fullscreen">
+								<FullscreenIcon />
+							</button>
+						</div>
+					</IconProvider>
+
+					<div className="mt-4 text-center text-gray-400 text-sm">
+						Status: {isPlaying ? "Playing" : "Paused"} | Volume: {volume > 0 ? "On" : "Muted"}
+					</div>
+				</div>
+			</div>
+		</div>
+	)
+}

package/src/components/icons/svg-icons/ArrowLeftIcon.tsx

@@ -1,18 +1,18 @@
-import React from 'react'
-import { SVGProps } from 'react'
+import React from "react"
+import { SVGProps } from "react"
 
 const ArrowLeftIcon = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    xmlns='http://www.w3.org/2000/svg'
-    aria-hidden='true'
-    className='iconify iconify--ic'
-    width='24'
-    height='24'
-    viewBox='0 0 24 24'
-    style={{ width: '100%', height: '100%' }}
-    {...props}>
-    <path fill='currentColor' d='M17.77 3.77 16 2 6 12l10 10 1.77-1.77L9.54 12z' />
-  </svg>
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		aria-hidden="true"
+		className="iconify iconify--ic"
+		width="24"
+		height="24"
+		viewBox="0 0 24 24"
+		style={{ width: "100%", height: "100%" }}
+		{...props}>
+		<path fill="currentColor" d="M17.77 3.77 16 2 6 12l10 10 1.77-1.77L9.54 12z" />
+	</svg>
 )
 
 export default ArrowLeftIcon