@therealtinhtute/baroiplayer 1.2.1 → 2.0.0-beta.1

package/dist/package.json

@@ -0,0 +1,3 @@
+{
+	"type": "commonjs"
+}

package/package.json

@@ -1,116 +1,112 @@
 {
-	"name": "@therealtinhtute/baroiplayer",
-	"version": "1.2.1",
-	"private": false,
-	"type": "module",
-	"description": "A customizable media player component library for React",
-	"sideEffects": false,
-	"exports": {
-		".": {
-			"development": {
-				"types": "./src/index.ts",
-				"default": "./src/index.ts"
-			},
-			"types": "./src/index.ts",
-			"import": "./dist/index.mjs",
-			"require": "./dist/index.js",
-			"default": "./dist/index.mjs"
-		},
-		"./globals.css": "./src/styles/globals.css",
-		"./minimal-player.css": "./src/styles/minimal-player.css",
-		"./dist/*": "./dist/*",
-		"./lib/*": "./src/lib/*.ts",
-		"./components/*": "./src/components/*.tsx",
-		"./hooks/*": "./src/hooks/*.ts",
-		"./types/*": "./src/types/*.ts"
-	},
-	"main": "./dist/index.js",
-	"module": "./dist/index.mjs",
-	"types": "./src/index.ts",
-	"files": ["dist", "src", "README.md", "LICENSE"],
-	"scripts": {
-		"build": "vite build",
-		"build:analyze": "vite build --mode analyze",
-		"build:watch": "vite build --watch",
-		"dev": "vite build --watch",
-		"prepublishOnly": "bun run build && bun run lint",
-		"publish:beta": "npm publish --tag beta",
-		"publish:next": "npm publish --tag next",
-		"lint": "biome lint .",
-		"check-types": "tsc --noEmit",
-		"test": "vitest",
-		"test:watch": "vitest --watch",
-		"test:coverage": "vitest --coverage",
-		"size-limit": "size-limit",
-		"bundle-analyzer": "vite-bundle-analyzer dist"
-	},
-	"dependencies": {
-		"@radix-ui/react-progress": "^1.1.7",
-		"@radix-ui/react-slider": "^1.3.5",
-		"@radix-ui/react-tooltip": "^1.2.7",
-		"clsx": "^2.1.1",
-		"react-player": "^3.3.1",
-		"tailwind-merge": "^3.6.0",
-		"web-vitals": "^4.2.4"
-	},
-	"devDependencies": {
-		"@rp/typescript-config": "workspace:*",
-		"@tailwindcss/postcss": "4.3.2",
-		"@testing-library/jest-dom": "^6.9.1",
-		"@testing-library/react": "^16.3.2",
-		"@testing-library/user-event": "^14.5.2",
-		"@types/node": "^20",
-		"@types/react": "^19.2.17",
-		"@types/react-dom": "^19.2.3",
-		"@vitejs/plugin-react": "^6.0.3",
-		"@vitest/coverage-v8": "^4.1.10",
-		"babel-plugin-react-compiler": "^1.0.0",
-		"jsdom": "^29.1.1",
-		"lightningcss": "^1.30.1",
-		"rollup-plugin-analyzer": "^4.0.0",
-		"rollup-plugin-bundle-analyzer": "^1.1.0",
-		"@size-limit/file": "^12.1.0",
-		"size-limit": "^12.1.0",
-		"tailwindcss": "4.3.2",
-		"ts-morph": "^27.0.0",
-		"typescript": "^5.9.3",
-		"vite": "^8.1.4",
-		"vite-bundle-analyzer": "^0.13.1",
-		"vitest": "^4.1.10"
-	},
-	"peerDependencies": {
-		"react": ">=18.0.0",
-		"react-dom": ">=18.0.0",
-		"tailwindcss": ">=4.0.0"
-	},
-	"peerDependenciesMeta": {
-		"tailwindcss": {
-			"optional": true
-		}
-	},
-	"keywords": [
-		"react",
-		"media-player",
-		"video-player",
-		"audio-player",
-		"typescript",
-		"hls",
-		"streaming",
-		"accessibility",
-		"tailwindcss",
-		"react-19"
-	],
-	"author": "Baroi Team",
-	"license": "MIT",
-	"repository": {
-		"type": "git",
-		"url": "git+https://github.com/ryanphanrp/baroiplayer.git"
-	},
-	"homepage": "https://github.com/ryanphanrp/baroiplayer#readme",
-	"bugs": {
-		"url": "https://github.com/ryanphanrp/baroiplayer/issues"
-	},
-	"engines": {
-		"node": ">=20.19.0"
-	}
+  "name": "@therealtinhtute/baroiplayer",
+  "version": "2.0.0-beta.1",
+  "private": false,
+  "type": "module",
+  "description": "A customizable media player component library for React",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "development": {
+        "types": "./src/index.ts",
+        "default": "./src/index.ts"
+      },
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js",
+      "default": "./dist/index.mjs"
+    },
+    "./globals.css": "./src/styles/globals.css",
+    "./minimal-player.css": "./src/styles/minimal-player.css",
+    "./dist/*": "./dist/*"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "src",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "vite build",
+    "build:analyze": "vite build --mode analyze",
+    "build:watch": "vite build --watch",
+    "dev": "vite build --watch",
+    "prepublishOnly": "bun run build && bun run lint",
+    "publish:beta": "npm publish --tag beta",
+    "publish:next": "npm publish --tag next",
+    "lint": "biome lint .",
+    "check-types": "tsc --noEmit",
+    "test": "vitest",
+    "test:watch": "vitest --watch",
+    "test:coverage": "vitest --coverage",
+    "size-limit": "size-limit",
+    "bundle-analyzer": "vite-bundle-analyzer dist"
+  },
+  "devDependencies": {
+    "@rp/typescript-config": "workspace:*",
+    "@size-limit/esbuild": "12.1.0",
+    "@size-limit/file": "^12.1.0",
+    "@tailwindcss/postcss": "4.3.2",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/node": "^20",
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
+    "@videojs/react": "10.0.0-rc.2",
+    "@vitejs/plugin-react": "^6.0.3",
+    "@vitest/coverage-v8": "^4.1.10",
+    "babel-plugin-react-compiler": "^1.0.0",
+    "jsdom": "^29.1.1",
+    "lightningcss": "^1.30.1",
+    "rollup-plugin-analyzer": "^4.0.0",
+    "rollup-plugin-bundle-analyzer": "^1.1.0",
+    "size-limit": "^12.1.0",
+    "tailwindcss": "4.3.2",
+    "ts-morph": "^27.0.0",
+    "typescript": "^5.9.3",
+    "vite": "^8.1.4",
+    "vite-bundle-analyzer": "^0.13.1",
+    "vite-plugin-dts": "^5.1.1",
+    "vitest": "^4.1.10"
+  },
+  "peerDependencies": {
+    "@videojs/react": "10.0.0-rc.2",
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0",
+    "tailwindcss": ">=4.0.0"
+  },
+  "peerDependenciesMeta": {
+    "tailwindcss": {
+      "optional": true
+    }
+  },
+  "keywords": [
+    "react",
+    "media-player",
+    "video-player",
+    "audio-player",
+    "typescript",
+    "hls",
+    "streaming",
+    "accessibility",
+    "tailwindcss",
+    "react-19"
+  ],
+  "author": "Baroi Team",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ryanphanrp/baroiplayer.git"
+  },
+  "homepage": "https://github.com/ryanphanrp/baroiplayer#readme",
+  "bugs": {
+    "url": "https://github.com/ryanphanrp/baroiplayer/issues"
+  },
+  "engines": {
+    "node": ">=20.19.0"
+  }
 }

package/src/components/variants/gradient/gradient-audio.tsx

@@ -0,0 +1,47 @@
+"use client"
+
+import "@videojs/react/audio/skin.css"
+import "./gradient-skin.css"
+import { Audio, AudioPlayer } from "@videojs/react/audio"
+import { Container, Dialog, ErrorDialog } from "@videojs/react"
+import { GradientAudioIcon } from "./gradient-glyphs"
+import { GradientControls } from "./gradient-controls"
+
+export interface GradientAudioProps {
+	src: string
+	className?: string
+	autoPlay?: boolean
+	loop?: boolean
+	title?: string
+}
+
+/**
+ * Gradient audio skin on Video.js v10 — `AudioPlayer` + `Audio` from the preset, with the
+ * same ejected skin layer and glyph bindings as `GradientVideo`.
+ */
+export function GradientAudio({ src, className, autoPlay, loop, title }: GradientAudioProps) {
+	return (
+		<AudioPlayer title={title}>
+			<Container className={`gradient-skin gradient-audio ${className ?? ""}`} data-theme="gradient" data-preset="audio">
+				<div className="gradient-audio-head">
+					<GradientAudioIcon size={44} className="gradient-audio-icon" />
+					{title ? <p className="gradient-audio-title">{title}</p> : null}
+				</div>
+				<Audio src={src} autoPlay={autoPlay} loop={loop} className="gradient-audio-element" />
+				<ErrorDialog.Root>
+					<Dialog.Backdrop className="media-dialog-backdrop" />
+					<Dialog.Popup className="media-dialog-popup">
+						<div className="media-dialog-content">
+							<ErrorDialog.Title className="media-dialog-title" />
+							<ErrorDialog.Description className="media-dialog-description" />
+						</div>
+						<div className="media-dialog-actions">
+							<ErrorDialog.Close className="media-dialog-close">Dismiss</ErrorDialog.Close>
+						</div>
+					</Dialog.Popup>
+				</ErrorDialog.Root>
+				<GradientControls audio />
+			</Container>
+		</AudioPlayer>
+	)
+}

package/src/components/variants/gradient/gradient-controls.tsx

@@ -0,0 +1,254 @@
+"use client"
+
+import {
+	CaptionsButton,
+	Controls,
+	FullscreenButton,
+	Menu,
+	MuteButton,
+	PiPButton,
+	PlayButton,
+	PlaybackRateButton,
+	SeekButton,
+	Time,
+	TimeSlider,
+	Tooltip,
+	VolumeSlider,
+	useCaptionsOptions,
+	usePlaybackRateOptions,
+	useQualityOptions
+} from "@videojs/react"
+import {
+	GradientBackward10Icon,
+	GradientCaptionsOffIcon,
+	GradientCaptionsOnIcon,
+	GradientCheckIcon,
+	GradientExitFullscreenIcon,
+	GradientForward10Icon,
+	GradientFullscreenIcon,
+	GradientPauseIcon,
+	GradientPiPEnterIcon,
+	GradientPiPExitIcon,
+	GradientPlayIcon,
+	GradientSettingsIcon,
+	GradientSliderThumbIcon,
+	GradientSpeedIcon,
+	GradientVolumeLevelIcon,
+	GradientVolumeMutedIcon
+} from "./gradient-glyphs"
+
+const GLYPH_SIZE = 22
+
+function PlayPauseGlyph({ paused }: { paused: boolean }) {
+	return paused ? (
+		<GradientPlayIcon size={GLYPH_SIZE} />
+	) : (
+		<GradientPauseIcon size={GLYPH_SIZE} />
+	)
+}
+
+function VolumeGlyph({ muted, volumeLevel }: { muted: boolean; volumeLevel: "off" | "low" | "medium" | "high" }) {
+	return muted ? (
+		<GradientVolumeMutedIcon size={GLYPH_SIZE} />
+	) : (
+		<GradientVolumeLevelIcon level={volumeLevel} size={GLYPH_SIZE} />
+	)
+}
+
+function CaptionsGlyph({ showing }: { showing: boolean }) {
+	return showing ? (
+		<GradientCaptionsOnIcon size={GLYPH_SIZE} />
+	) : (
+		<GradientCaptionsOffIcon size={GLYPH_SIZE} />
+	)
+}
+
+/** The v1 `SliderIcon` glyph as the seek + volume thumb. */
+function GradientThumb() {
+	return <GradientSliderThumbIcon size={14} />
+}
+
+function SettingsMenu() {
+	const rates = usePlaybackRateOptions()
+	const qualities = useQualityOptions()
+	const captions = useCaptionsOptions()
+	const rateOptions = rates?.options ?? []
+	const qualityOptions = qualities?.options ?? []
+	const captionOptions = captions?.options ?? []
+	return (
+		<Menu.Root>
+			<Menu.Trigger className="gradient-control-btn gradient-settings-trigger" aria-label="Settings">
+				<GradientSettingsIcon size={GLYPH_SIZE} />
+			</Menu.Trigger>
+			<Menu.Popup className="gradient-menu-popup">
+				<Menu.Content className="gradient-menu">
+					{rateOptions.length > 0 && rates && (
+						<>
+							<Menu.Group>
+								<Menu.GroupLabel>Playback speed</Menu.GroupLabel>
+								<Menu.RadioGroup value={rates.value} onValueChange={rates.setValue}>
+									{rateOptions.map((rate) => (
+										<Menu.RadioItem key={rate.value} value={rate.value} className="gradient-menu-item">
+											<Menu.ItemIndicator>
+												<GradientCheckIcon size={14} />
+											</Menu.ItemIndicator>
+											<span className="gradient-menu-label">{rate.label}</span>
+										</Menu.RadioItem>
+									))}
+								</Menu.RadioGroup>
+							</Menu.Group>
+							<Menu.Separator />
+						</>
+					)}
+					{qualityOptions.length > 0 && qualities && (
+						<>
+							<Menu.Group>
+								<Menu.GroupLabel>Quality</Menu.GroupLabel>
+								<Menu.RadioGroup value={qualities.value} onValueChange={qualities.setValue}>
+									{qualityOptions.map((quality) => (
+										<Menu.RadioItem key={quality.value} value={quality.value} className="gradient-menu-item">
+											<Menu.ItemIndicator>
+												<GradientCheckIcon size={14} />
+											</Menu.ItemIndicator>
+											<span className="gradient-menu-label">{quality.label}</span>
+										</Menu.RadioItem>
+									))}
+								</Menu.RadioGroup>
+							</Menu.Group>
+							<Menu.Separator />
+						</>
+					)}
+					{captionOptions.length > 0 && captions && (
+						<Menu.Group>
+							<Menu.GroupLabel>Captions</Menu.GroupLabel>
+							<Menu.RadioGroup value={captions.value} onValueChange={captions.setValue}>
+								{captionOptions.map((caption) => (
+									<Menu.RadioItem key={caption.value} value={caption.value} className="gradient-menu-item">
+										<Menu.ItemIndicator>
+											<GradientCheckIcon size={14} />
+										</Menu.ItemIndicator>
+										<span className="gradient-menu-label">{caption.label}</span>
+									</Menu.RadioItem>
+								))}
+							</Menu.RadioGroup>
+						</Menu.Group>
+					)}
+				</Menu.Content>
+			</Menu.Popup>
+		</Menu.Root>
+	)
+}
+
+export function GradientControls({ audio = false }: { audio?: boolean }) {
+	return (
+		<Controls.Root visibility={audio ? "always" : undefined}>
+			<Controls.Backdrop className="gradient-controls-backdrop" />
+			<Controls.Content className="gradient-controls gradient-controls-content">
+				<Tooltip.Provider>
+					<Controls.Group className="gradient-controls-primary">
+						<Tooltip.Root>
+							<Tooltip.Trigger
+								className="gradient-tooltip-trigger"
+								render={
+									<PlayButton
+										className="gradient-control-btn"
+										render={(buttonProps, state) => (
+											<button {...buttonProps}>
+												<PlayPauseGlyph paused={state.paused} />
+											</button>
+										)}
+									/>
+								}
+							/>
+							<Tooltip.Popup className="gradient-tooltip">
+								<Tooltip.Label>Play / Pause</Tooltip.Label>
+							</Tooltip.Popup>
+						</Tooltip.Root>
+						<SeekButton
+							seconds={-10}
+							className="gradient-control-btn"
+							render={(props) => (
+								<button {...props} aria-label="Rewind 10 seconds">
+									<GradientBackward10Icon size={GLYPH_SIZE} />
+								</button>
+							)}
+						/>
+						<SeekButton
+							seconds={10}
+							className="gradient-control-btn"
+							render={(props) => (
+								<button {...props} aria-label="Forward 10 seconds">
+									<GradientForward10Icon size={GLYPH_SIZE} />
+								</button>
+							)}
+						/>
+						<MuteButton
+							className="gradient-control-btn"
+							render={(props, state) => (
+								<button {...props}>
+									<VolumeGlyph muted={state.muted} volumeLevel={state.volumeLevel} />
+								</button>
+							)}
+						/>
+						<VolumeSlider.Root className="gradient-volume-slider">
+							<VolumeSlider.Track className="gradient-slider-track" />
+							<VolumeSlider.Fill className="gradient-slider-fill" />
+							<VolumeSlider.Thumb className="gradient-slider-thumb" render={(thumbProps) => <div {...thumbProps}><GradientThumb /></div>} />
+						</VolumeSlider.Root>
+					</Controls.Group>
+					<Controls.Group className="gradient-controls-time">
+						<Time.Group>
+							<Time.Value type="current" className="gradient-time" />
+							<Time.Separator className="gradient-time-sep">/</Time.Separator>
+							<Time.Value type="duration" className="gradient-time" />
+						</Time.Group>
+						<TimeSlider.Root className="gradient-seekbar">
+							<TimeSlider.Track className="gradient-slider-track" />
+							<TimeSlider.Fill className="gradient-slider-fill" />
+							<TimeSlider.Thumb className="gradient-slider-thumb" render={(thumbProps) => <div {...thumbProps}><GradientThumb /></div>} />
+						</TimeSlider.Root>
+					</Controls.Group>
+					<Controls.Group className="gradient-controls-secondary">
+						<CaptionsButton
+							className="gradient-control-btn"
+							render={(props, state) => (
+								<button {...props} aria-label="Captions">
+									<CaptionsGlyph showing={state.subtitlesShowing} />
+								</button>
+							)}
+						/>
+						<PlaybackRateButton
+							className="gradient-control-btn"
+							render={(props, state) => (
+								<button {...props} aria-label={`Playback speed ${state.rate}x`}>
+									<GradientSpeedIcon size={GLYPH_SIZE} />
+								</button>
+							)}
+						/>
+						<SettingsMenu />
+						{!audio && (
+							<>
+								<PiPButton
+									className="gradient-control-btn"
+									render={(props, state) => (
+										<button {...props} aria-label="Picture in picture">
+											{state.pip ? <GradientPiPExitIcon size={GLYPH_SIZE} /> : <GradientPiPEnterIcon size={GLYPH_SIZE} />}
+										</button>
+									)}
+								/>
+								<FullscreenButton
+									className="gradient-control-btn"
+									render={(props, state) => (
+										<button {...props} aria-label="Fullscreen">
+											{state.fullscreen ? <GradientExitFullscreenIcon size={GLYPH_SIZE} /> : <GradientFullscreenIcon size={GLYPH_SIZE} />}
+										</button>
+									)}
+								/>
+							</>
+						)}
+					</Controls.Group>
+				</Tooltip.Provider>
+			</Controls.Content>
+		</Controls.Root>
+	)
+}

package/src/components/variants/gradient/gradient-glyphs.test.tsx

@@ -0,0 +1,69 @@
+import { render } from "@testing-library/react"
+import { describe, expect, it } from "vitest"
+import {
+	GradientAudioIcon,
+	GradientBackward10Icon,
+	GradientCaptionsOffIcon,
+	GradientCaptionsOnIcon,
+	GradientCheckIcon,
+	GradientExitFullscreenIcon,
+	GradientForward10Icon,
+	GradientFullscreenIcon,
+	GradientPiPEnterIcon,
+	GradientPiPExitIcon,
+	GradientPlayIcon,
+	GradientQualityIcon,
+	GradientSettingsIcon,
+	GradientSliderThumbIcon,
+	GradientSpeedIcon,
+	GradientSpinnerIcon,
+	GradientVolumeLevelIcon,
+	GradientVolumeMutedIcon
+} from "./gradient-glyphs"
+
+const ALL_GLYPHS = [
+	GradientAudioIcon,
+	GradientBackward10Icon,
+	GradientCaptionsOffIcon,
+	GradientCaptionsOnIcon,
+	GradientCheckIcon,
+	GradientExitFullscreenIcon,
+	GradientForward10Icon,
+	GradientFullscreenIcon,
+	GradientPiPEnterIcon,
+	GradientPiPExitIcon,
+	GradientPlayIcon,
+	GradientQualityIcon,
+	GradientSettingsIcon,
+	GradientSliderThumbIcon,
+	GradientSpeedIcon,
+	GradientSpinnerIcon,
+	GradientVolumeMutedIcon
+]
+
+describe("gradient glyphs", () => {
+	it("renders every bound v1 glyph as an svg", () => {
+		for (const Glyph of ALL_GLYPHS) {
+			const { container } = render(<Glyph />)
+			expect(container.querySelector("svg"), Glyph.name).not.toBeNull()
+		}
+	})
+
+	it("switches the volume glyph by level", () => {
+		const off = render(<GradientVolumeLevelIcon level="off" />)
+		const low = render(<GradientVolumeLevelIcon level="low" />)
+		const medium = render(<GradientVolumeLevelIcon level="medium" />)
+		const high = render(<GradientVolumeLevelIcon level="high" />)
+		expect(off.container.querySelector("svg")).not.toBeNull()
+		expect(low.container.querySelector("svg")).not.toBeNull()
+		expect(medium.container.querySelector("svg")).not.toBeNull()
+		expect(high.container.querySelector("svg")).not.toBeNull()
+	})
+
+	it("forwards size to the svg", () => {
+		const { container } = render(<GradientPlayIcon size={18} />)
+		const svg = container.querySelector("svg")
+		expect(svg?.getAttribute("width")).toBe("18")
+		expect(svg?.getAttribute("height")).toBe("18")
+	})
+})