@therealtinhtute/baroiplayer 1.2.1 → 2.0.0-beta.1

package/src/styles/minimal-player.css

@@ -1,621 +0,0 @@
-/**
- * Minimal Media Player Styles - Fixed without @apply
- * Uses cyan-700 as primary color
- */
-
-@layer components {
-	/* Main player container */
-	.minimal-player {
-		position: relative;
-		overflow: hidden;
-		border-radius: 0.5rem;
-		background-color: #000000;
-	}
-
-	/* Control bar styles */
-	.minimal-control-bar {
-		background: linear-gradient(
-			to top,
-			rgba(0, 0, 0, 0.95) 0%,
-			rgba(0, 0, 0, 0.7) 50%,
-			transparent 100%
-		);
-	}
-
-	/* Button styles - cyan-700 primary */
-	.minimal-btn {
-		display: inline-flex;
-		align-items: center;
-		justify-content: center;
-		height: 2.5rem;
-		width: 2.5rem;
-		border-radius: 9999px;
-		color: #ffffff;
-		transition: all 200ms;
-		background: none !important;
-		border: none !important;
-		outline: none !important;
-	}
-
-	.minimal-btn:hover {
-		color: #67e8f9;
-		transform: scale(1.1);
-	}
-
-	.minimal-btn:active {
-		transform: scale(0.95);
-	}
-
-	.minimal-btn:focus-visible {
-		box-shadow: 0 0 0 2px #000000, 0 0 0 4px #06b6d4;
-	}
-
-	/* Active/highlighted button state */
-	.minimal-btn.text-cyan-500 {
-		color: #22d3ee;
-	}
-
-	.minimal-btn.text-cyan-500:hover {
-		color: #67e8f9;
-	}
-
-	/* Larger button variant */
-	.minimal-btn-lg {
-		height: 3.5rem;
-		width: 3.5rem;
-	}
-
-	/* Center play button */
-	.minimal-center-play {
-		position: absolute;
-		top: 50%;
-		left: 50%;
-		transform: translate(-50%, -50%);
-		height: 5rem;
-		width: 5rem;
-		border-radius: 9999px;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		color: #ffffff;
-		transition: all 300ms;
-		background: none !important;
-		border: none !important;
-	}
-
-	.minimal-center-play:hover {
-		color: #67e8f9;
-		transform: translate(-50%, -50%) scale(1.1);
-	}
-
-	/* Seek bar styles */
-	.minimal-seekbar {
-		position: relative;
-		height: 0.25rem;
-		background-color: rgba(255, 255, 255, 0.2);
-		border-radius: 9999px;
-		cursor: pointer;
-		transition: all 200ms;
-		opacity: 1;
-	}
-
-	/* Always show seekbar but enhance on hover */
-	.minimal-seekbar:hover {
-		height: 0.375rem;
-	}
-
-	.minimal-seekbar-buffered {
-		position: absolute;
-		top: 0;
-		height: 100%;
-		background: linear-gradient(90deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.3));
-		border-radius: 9999px;
-		transition: all 200ms ease-out;
-	}
-
-	.minimal-seekbar-progress {
-		position: absolute;
-		top: 0;
-		left: 0;
-		height: 100%;
-		border-radius: 9999px;
-		background: linear-gradient(90deg, rgb(6, 182, 212), rgb(14, 116, 144));
-	}
-
-	.minimal-seekbar-thumb {
-		position: absolute;
-		top: 50%;
-		transform: translateY(-50%);
-		width: 1rem;
-		height: 1rem;
-		background-color: #06b6d4;
-		border-radius: 9999px;
-		box-shadow: 0 10px 15px -3px rgba(6, 182, 212, 0.5), 0 4px 6px -2px rgba(6, 182, 212, 0.5);
-		opacity: 0;
-		transform: translateY(-50%) scale(0);
-		transition: all 200ms;
-		border: 2px solid white;
-	}
-
-	/* Seeking state styles */
-	.minimal-seekbar-seeking {
-		opacity: 0.8;
-	}
-
-	.minimal-seekbar-progress-seeking {
-		animation: seekingPulse 1s ease-in-out infinite;
-	}
-
-	@keyframes seekingPulse {
-		0%,
-		100% {
-			opacity: 1;
-		}
-		50% {
-			opacity: 0.6;
-		}
-	}
-
-	.minimal-seekbar-thumb-seeking {
-		background-color: #22d3ee;
-		animation: thumbPulse 0.8s ease-in-out infinite;
-	}
-
-	@keyframes thumbPulse {
-		0%,
-		100% {
-			transform: translateY(-50%) scale(1);
-		}
-		50% {
-			transform: translateY(-50%) scale(1.2);
-		}
-	}
-
-	/* Hover indicator */
-	.minimal-seekbar-hover-indicator {
-		position: absolute;
-		top: 0;
-		width: 2px;
-		height: 100%;
-		background-color: rgba(255, 255, 255, 0.5);
-		pointer-events: none;
-		transition: opacity 150ms;
-	}
-
-	/* Ripple effect */
-	.minimal-seekbar-ripple {
-		position: absolute;
-		width: 20px;
-		height: 20px;
-		border-radius: 50%;
-		background-color: rgba(6, 182, 212, 0.3);
-		transform: translate(-50%, -50%);
-		pointer-events: none;
-		animation: ripple 600ms ease-out;
-	}
-
-	@keyframes ripple {
-		from {
-			width: 0;
-			height: 0;
-			opacity: 1;
-		}
-		to {
-			width: 40px;
-			height: 40px;
-			opacity: 0;
-		}
-	}
-
-	.minimal-seekbar:hover .minimal-seekbar-thumb,
-	.minimal-seekbar-thumb.active {
-		opacity: 1;
-		transform: translateY(-50%) scale(1);
-	}
-
-	/* Volume Control Styles */
-	.volume-control-wrapper {
-		position: relative;
-	}
-
-	.volume-control-wrapper:hover .volume-slider-horizontal-wrapper {
-		width: 6rem;
-		opacity: 1;
-	}
-
-	/* Horizontal Volume Slider */
-	.volume-slider-track-horizontal {
-		position: relative;
-		height: 0.25rem;
-		width: 100%;
-		border-radius: 9999px;
-		cursor: pointer;
-		background-color: rgba(255, 255, 255, 0.2);
-		transition: all 200ms;
-	}
-
-	.volume-slider-track-horizontal:hover {
-		height: 0.375rem;
-	}
-
-	.volume-slider-fill-horizontal {
-		position: absolute;
-		top: 0;
-		left: 0;
-		height: 100%;
-		border-radius: 9999px;
-		transition: all 100ms ease-out;
-		background: linear-gradient(
-			90deg,
-			rgb(6, 182, 212) 0%,
-			rgb(14, 116, 144) 50%,
-			rgb(8, 145, 178) 100%
-		);
-		box-shadow: 0 0 8px rgba(6, 182, 212, 0.4);
-	}
-
-	.volume-slider-thumb-horizontal {
-		position: absolute;
-		top: 50%;
-		transform: translate(-50%, -50%);
-		width: 0.75rem;
-		height: 0.75rem;
-		background-color: #ffffff;
-		border-radius: 9999px;
-		opacity: 0;
-		transform: translate(-50%, -50%) scale(0);
-		transition: all 200ms;
-		box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-		border: 1.5px solid rgb(6, 182, 212);
-	}
-
-	.group:hover .volume-slider-thumb-horizontal,
-	.volume-slider-thumb-horizontal.active {
-		opacity: 1;
-		transform: translate(-50%, -50%) scale(1);
-	}
-
-	/* Vertical Volume Slider */
-	.volume-slider-track-vertical {
-		position: relative;
-		width: 0.25rem;
-		height: 6rem;
-		border-radius: 9999px;
-		cursor: pointer;
-		background-color: rgba(255, 255, 255, 0.2);
-		transition: all 200ms;
-	}
-
-	.volume-slider-track-vertical:hover {
-		width: 0.375rem;
-	}
-
-	.volume-slider-fill-vertical {
-		position: absolute;
-		bottom: 0;
-		left: 0;
-		width: 100%;
-		border-radius: 9999px;
-		transition: all 100ms ease-out;
-		background: linear-gradient(
-			180deg,
-			rgb(6, 182, 212) 0%,
-			rgb(14, 116, 144) 50%,
-			rgb(8, 145, 178) 100%
-		);
-		box-shadow: 0 0 8px rgba(6, 182, 212, 0.4);
-	}
-
-	.volume-slider-thumb-vertical {
-		position: absolute;
-		left: 50%;
-		transform: translate(-50%, 50%);
-		width: 0.75rem;
-		height: 0.75rem;
-		background-color: #ffffff;
-		border-radius: 9999px;
-		opacity: 0;
-		transform: translate(-50%, 50%) scale(0);
-		transition: all 200ms;
-		box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-		border: 1.5px solid rgb(6, 182, 212);
-	}
-
-	.group:hover .volume-slider-thumb-vertical,
-	.volume-slider-thumb-vertical.active {
-		opacity: 1;
-		transform: translate(-50%, 50%) scale(1);
-	}
-
-	/* Hover effects for better interactivity */
-	.volume-slider-track-horizontal:active,
-	.volume-slider-track-vertical:active {
-		opacity: 0.9;
-	}
-
-	/* Legacy volume styles */
-	.minimal-volume {
-		display: flex;
-		align-items: center;
-		gap: 0.5rem;
-	}
-
-	.minimal-volume-slider {
-		width: 0;
-		opacity: 0;
-		transition: all 300ms;
-	}
-
-	.minimal-volume:hover .minimal-volume-slider {
-		width: 6rem;
-		opacity: 1;
-	}
-
-	.minimal-volume-track {
-		height: 0.25rem;
-		background-color: rgba(255, 255, 255, 0.2);
-		border-radius: 9999px;
-	}
-
-	.minimal-volume-fill {
-		height: 100%;
-		background-color: #06b6d4;
-		border-radius: 9999px;
-	}
-
-	/* Time display */
-	.minimal-time {
-		color: #ffffff;
-		font-size: 0.875rem;
-		font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo,
-			monospace;
-		user-select: none;
-	}
-
-	@media (max-width: 640px) {
-		.minimal-time {
-			display: none;
-		}
-	}
-
-	@media (min-width: 640px) {
-		.minimal-time {
-			display: block;
-		}
-	}
-
-	/* Loading states and animations */
-	.minimal-loading {
-		position: absolute;
-		inset: 0;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		background-color: rgba(0, 0, 0, 0.8);
-		z-index: 50;
-		animation: fadeIn 200ms ease-out;
-	}
-
-	/* Spinner animation */
-	.minimal-loading-spinner {
-		animation: spin 1s linear infinite;
-	}
-
-	.minimal-spinner {
-		width: 3rem;
-		height: 3rem;
-		border: 4px solid rgba(255, 255, 255, 0.2);
-		border-top-color: #06b6d4;
-		border-radius: 9999px;
-		animation: spin 1s linear infinite;
-	}
-
-	@keyframes spin {
-		from {
-			transform: rotate(0deg);
-		}
-		to {
-			transform: rotate(360deg);
-		}
-	}
-
-	/* Dots animation */
-	.minimal-loading-dot {
-		animation: pulse 1.4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-	}
-
-	@keyframes pulse {
-		0%,
-		100% {
-			opacity: 1;
-			transform: scale(1);
-		}
-		50% {
-			opacity: 0.3;
-			transform: scale(0.8);
-		}
-	}
-
-	/* Skeleton animation */
-	.minimal-loading-skeleton {
-		animation: shimmer 2s ease-in-out infinite;
-		background: linear-gradient(
-			90deg,
-			rgba(255, 255, 255, 0.1) 0%,
-			rgba(255, 255, 255, 0.2) 50%,
-			rgba(255, 255, 255, 0.1) 100%
-		);
-		background-size: 200% 100%;
-	}
-
-	@keyframes shimmer {
-		0% {
-			background-position: -200% center;
-		}
-		100% {
-			background-position: 200% center;
-		}
-	}
-
-	/* Fade animations */
-	@keyframes fadeIn {
-		from {
-			opacity: 0;
-			transform: scale(0.95);
-		}
-		to {
-			opacity: 1;
-			transform: scale(1);
-		}
-	}
-
-	@keyframes fadeOut {
-		from {
-			opacity: 1;
-			transform: scale(1);
-		}
-		to {
-			opacity: 0;
-			transform: scale(0.95);
-		}
-	}
-
-	/* Quality/Speed buttons */
-	.minimal-quality-btn,
-	.minimal-speed-btn {
-		padding: 0.375rem 0.75rem;
-		border-radius: 0.375rem;
-		background-color: rgba(255, 255, 255, 0.1);
-		color: #ffffff;
-		font-size: 0.875rem;
-		font-weight: 500;
-		transition: all 200ms;
-		border: none !important;
-	}
-
-	.minimal-quality-btn:hover,
-	.minimal-speed-btn:hover {
-		background-color: rgba(14, 116, 144, 0.3);
-	}
-
-	/* Control visibility animations */
-	.minimal-controls-visible {
-		opacity: 1;
-		transform: translateY(0);
-	}
-
-	.minimal-controls-hidden {
-		opacity: 0;
-		transform: translateY(0.5rem);
-		pointer-events: none;
-	}
-
-	/* Settings dropdown */
-	.minimal-settings-dropdown {
-		position: absolute;
-		bottom: 100%;
-		right: 0;
-		margin-bottom: 0.5rem;
-		background-color: #1f2937;
-		border-radius: 0.5rem;
-		box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-		border: 1px solid #374151;
-		min-width: 200px;
-		padding: 0.5rem 0;
-		animation: slideUp 0.2s ease-out;
-	}
-
-	@keyframes slideUp {
-		from {
-			opacity: 0;
-			transform: translateY(10px);
-		}
-		to {
-			opacity: 1;
-			transform: translateY(0);
-		}
-	}
-
-	/* Subtitle display */
-	.minimal-subtitle-display {
-		position: absolute;
-		bottom: 5rem;
-		left: 0;
-		right: 0;
-		text-align: center;
-		padding: 0 1rem;
-		pointer-events: none;
-		z-index: 35;
-	}
-
-	.minimal-subtitle-text {
-		display: inline-block;
-		background-color: rgba(0, 0, 0, 0.75);
-		color: #ffffff;
-		padding: 0.5rem 1rem;
-		border-radius: 0.375rem;
-		font-size: 1.125rem;
-		font-weight: 500;
-		text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
-	}
-
-	/* Screenshot button special effect */
-	.minimal-btn-screenshot:active {
-		animation: flash 0.3s;
-	}
-
-	@keyframes flash {
-		0%,
-		100% {
-			opacity: 1;
-		}
-		50% {
-			opacity: 0.5;
-			background-color: rgba(255, 255, 255, 0.3);
-		}
-	}
-
-	/* Remove all default borders */
-	.minimal-player * {
-		border-color: transparent !important;
-	}
-
-	.minimal-player button {
-		border: none !important;
-		outline: none !important;
-	}
-}
-
-/* Cyan-700 color scheme override */
-@layer base {
-	.minimal-player {
-		--primary: rgb(14, 116, 144);
-		--primary-light: rgb(6, 182, 212);
-		--primary-dark: rgb(21, 94, 117);
-		--primary-hover: rgba(14, 116, 144, 0.3);
-		--primary-active: rgba(14, 116, 144, 0.4);
-	}
-}
-
-/* Z-index management */
-@layer utilities {
-	.z-40 {
-		z-index: 40;
-	}
-	.z-45 {
-		z-index: 45;
-	}
-	.z-50 {
-		z-index: 50;
-	}
-
-	/* Border utilities */
-	.border-3 {
-		border-width: 3px;
-	}
-
-	/* Backdrop blur utilities - removed for performance */
-	.backdrop-blur-xs {
-		/* backdrop-filter: blur(2px); */
-	}
-}

package/src/styles/pixel-art.css

@@ -1,41 +0,0 @@
-/* Pixel Art Styles for Media Player */
-.pixel-button {
-	image-rendering: pixelated;
-	image-rendering: -moz-crisp-edges;
-	image-rendering: crisp-edges;
-	font-family: "Courier New", "Monaco", "Menlo", monospace;
-	letter-spacing: 0.05em;
-}
-
-.pixel-button svg {
-	image-rendering: pixelated;
-	image-rendering: -moz-crisp-edges;
-	image-rendering: crisp-edges;
-	filter: contrast(1.2) brightness(1.1);
-}
-
-.pixel-button:hover svg {
-	filter: contrast(1.3) brightness(1.2) drop-shadow(0 0 2px rgba(255, 255, 255, 0.3));
-}
-
-.pixel-progress {
-	image-rendering: pixelated;
-	image-rendering: -moz-crisp-edges;
-	image-rendering: crisp-edges;
-}
-
-.pixel-progress [role="slider"] {
-	image-rendering: pixelated;
-	image-rendering: -moz-crisp-edges;
-	image-rendering: crisp-edges;
-	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 2px 4px
-		rgba(0, 0, 0, 0.5);
-}
-
-.pixel-time-display {
-	text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.8), -1px -1px 0 rgba(0, 0, 0, 0.8), 1px -1px 0
-		rgba(0, 0, 0, 0.8), -1px 1px 0 rgba(0, 0, 0, 0.8);
-	image-rendering: pixelated;
-	image-rendering: -moz-crisp-edges;
-	image-rendering: crisp-edges;
-}