@therealtinhtute/baroiplayer 1.2.1 → 2.0.0-beta.1

package/src/components/player-settings-form.tsx

@@ -1,158 +0,0 @@
-import { useActionState } from "react"
-
-export interface PlayerSettings {
-	volume: number
-	quality: string
-	subtitles: boolean
-	playbackRate: number
-}
-
-interface SettingsState {
-	values: PlayerSettings
-	error?: string
-	success?: boolean
-}
-
-const defaultSettings: PlayerSettings = {
-	volume: 0.8,
-	quality: "auto",
-	subtitles: false,
-	playbackRate: 1
-}
-
-async function updateSettings(
-	prevState: SettingsState,
-	formData: FormData
-): Promise<SettingsState> {
-	try {
-		// Simulate async operation
-		await new Promise((resolve) => setTimeout(resolve, 500))
-
-		const settings: PlayerSettings = {
-			volume: Number(formData.get("volume")) || 0.8,
-			quality: (formData.get("quality") as string) || "auto",
-			subtitles: formData.get("subtitles") === "on",
-			playbackRate: Number(formData.get("playbackRate")) || 1
-		}
-
-		// Validate settings
-		if (settings.volume < 0 || settings.volume > 1) {
-			throw new Error("Volume must be between 0 and 1")
-		}
-
-		if (settings.playbackRate < 0.25 || settings.playbackRate > 2) {
-			throw new Error("Playback rate must be between 0.25 and 2")
-		}
-
-		// Save to localStorage or send to server
-		localStorage.setItem("player-settings", JSON.stringify(settings))
-
-		return {
-			values: settings,
-			success: true
-		}
-	} catch (error) {
-		return {
-			values: prevState.values,
-			error: error instanceof Error ? error.message : "Unknown error"
-		}
-	}
-}
-
-export function PlayerSettingsForm() {
-	const [state, submitAction, isPending] = useActionState(updateSettings, {
-		values: defaultSettings,
-		success: false
-	})
-
-	return (
-		<div className="mx-auto w-full max-w-md">
-			<h3 className="mb-4 font-semibold text-lg text-white">Player Settings</h3>
-
-			<form action={submitAction} className="space-y-4">
-				{state.error && (
-					<div className="rounded-lg border border-red-700 bg-red-900/20 p-3">
-						<p className="text-red-400 text-sm">{state.error}</p>
-					</div>
-				)}
-
-				{state.success && (
-					<div className="rounded-lg border border-green-700 bg-green-900/20 p-3">
-						<p className="text-green-400 text-sm">Settings saved successfully!</p>
-					</div>
-				)}
-
-				<fieldset disabled={isPending} className="space-y-4 disabled:opacity-50">
-					<div>
-						<label htmlFor="volume" className="mb-2 block font-medium text-sm text-white">
-							Volume: {Math.round(state.values.volume * 100)}%
-						</label>
-						<input
-							type="range"
-							id="volume"
-							name="volume"
-							min="0"
-							max="1"
-							step="0.01"
-							defaultValue={state.values.volume}
-							className="h-2 w-full cursor-pointer appearance-none rounded-lg bg-gray-700"
-						/>
-					</div>
-
-					<div>
-						<label htmlFor="quality" className="mb-2 block font-medium text-sm text-white">
-							Quality
-						</label>
-						<select
-							id="quality"
-							name="quality"
-							defaultValue={state.values.quality}
-							className="w-full rounded-lg border border-gray-600 bg-gray-700 p-2 text-white focus:ring-2 focus:ring-blue-500">
-							<option value="auto">Auto</option>
-							<option value="1080p">1080p</option>
-							<option value="720p">720p</option>
-							<option value="480p">480p</option>
-							<option value="360p">360p</option>
-						</select>
-					</div>
-
-					<div>
-						<label htmlFor="playbackRate" className="mb-2 block font-medium text-sm text-white">
-							Playback Rate: {state.values.playbackRate}x
-						</label>
-						<input
-							type="range"
-							id="playbackRate"
-							name="playbackRate"
-							min="0.25"
-							max="2"
-							step="0.25"
-							defaultValue={state.values.playbackRate}
-							className="h-2 w-full cursor-pointer appearance-none rounded-lg bg-gray-700"
-						/>
-					</div>
-
-					<div className="flex items-center">
-						<input
-							type="checkbox"
-							id="subtitles"
-							name="subtitles"
-							defaultChecked={state.values.subtitles}
-							className="h-4 w-4 rounded border-gray-600 bg-gray-700 text-blue-600 focus:ring-blue-500"
-						/>
-						<label htmlFor="subtitles" className="ml-2 font-medium text-sm text-white">
-							Enable Subtitles
-						</label>
-					</div>
-
-					<button
-						type="submit"
-						disabled={isPending}
-						className="w-full rounded-lg bg-blue-600 px-4 py-2 font-medium text-white transition-colors hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 disabled:bg-gray-600">
-						{isPending ? "Saving..." : "Save Settings"}
-					</button>
-				</fieldset>
-			</form>
-		</div>
-	)
-}