diff --git a/app/scroll-optimization.css b/app/scroll-optimization.css index 495095a..80dd5fa 100644 --- a/app/scroll-optimization.css +++ b/app/scroll-optimization.css @@ -23,12 +23,16 @@ .video-card-wrapper { /* CSS containment for isolation */ contain: layout style paint; - - /* Content visibility for lazy rendering */ - content-visibility: auto; - - /* Reduce layout shifts */ - contain-intrinsic-size: auto 400px; +} + +@supports (content-visibility: auto) { + .video-card-wrapper { + /* Content visibility for lazy rendering */ + content-visibility: auto; + + /* Reduce layout shifts */ + contain-intrinsic-size: auto 400px; + } } /* Reduce repaints on images */ diff --git a/app/styles/base.css b/app/styles/base.css index cdee9b1..9eef2e6 100644 --- a/app/styles/base.css +++ b/app/styles/base.css @@ -54,6 +54,7 @@ select:focus-visible { } ::-webkit-scrollbar-thumb { + background: rgba(128, 128, 128, 0.5); background: color-mix(in srgb, var(--glass-bg) 80%, transparent); border-radius: var(--radius-full); border: 2px solid transparent; @@ -61,6 +62,7 @@ select:focus-visible { } ::-webkit-scrollbar-thumb:hover { + background: rgba(0, 122, 255, 0.6); background: color-mix(in srgb, var(--accent-color) 60%, transparent); background-clip: padding-box; } @@ -74,6 +76,7 @@ select:focus-visible { } .search-history-dropdown::-webkit-scrollbar-thumb { + background: rgba(128, 128, 128, 0.5); background: color-mix(in srgb, var(--glass-bg) 80%, transparent); border-radius: var(--radius-full); } @@ -118,8 +121,13 @@ nav:where(.sticky, .fixed), animation: fadeInUp 0.2s ease-out; } +@supports (content-visibility: auto) { + img { + content-visibility: auto; + } +} + img { - content-visibility: auto; transform: translateZ(0); } diff --git a/app/styles/glass.css b/app/styles/glass.css index 2ead853..828dece 100644 --- a/app/styles/glass.css +++ b/app/styles/glass.css @@ -26,6 +26,7 @@ .glass-input:focus { outline: none; border-color: var(--accent-color); + box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.3); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 30%, transparent); } diff --git a/app/styles/search-history.css b/app/styles/search-history.css index c6d70e1..bc087a0 100644 --- a/app/styles/search-history.css +++ b/app/styles/search-history.css @@ -50,11 +50,14 @@ } .search-history-item:hover { + background: rgba(0, 122, 255, 0.1); background: color-mix(in srgb, var(--accent-color) 10%, transparent); } .search-history-item.highlighted { + background: rgba(0, 122, 255, 0.15); background: color-mix(in srgb, var(--accent-color) 15%, transparent); + box-shadow: inset 0 0 0 1px rgba(0, 122, 255, 0.3); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-color) 30%, transparent); } @@ -75,6 +78,7 @@ } .search-history-remove:hover { + background: rgba(128, 128, 128, 0.2); background: color-mix(in srgb, var(--text-color-secondary) 20%, transparent); color: var(--text-color); transform: scale(1.1); diff --git a/app/styles/video-player.css b/app/styles/video-player.css index 65df158..a8dd9f0 100644 --- a/app/styles/video-player.css +++ b/app/styles/video-player.css @@ -2,6 +2,7 @@ .spinner { width: 48px; height: 48px; + border: 5px solid rgba(128, 128, 128, 0.35); border: 5px solid color-mix(in srgb, var(--glass-bg) 50%, transparent); border-top-color: var(--accent-color); border-radius: var(--radius-full); diff --git a/components/player/DesktopVideoPlayer.tsx b/components/player/DesktopVideoPlayer.tsx index 0f965fa..db845dc 100644 --- a/components/player/DesktopVideoPlayer.tsx +++ b/components/player/DesktopVideoPlayer.tsx @@ -10,6 +10,7 @@ import { DesktopControlsWrapper } from './desktop/DesktopControlsWrapper'; import { DesktopOverlayWrapper } from './desktop/DesktopOverlayWrapper'; import { usePlayerSettings } from './hooks/usePlayerSettings'; import { useIsIOS, useIsMobile } from '@/lib/hooks/mobile/useDeviceDetection'; +import { useDoubleTap } from '@/lib/hooks/mobile/useDoubleTap'; import './web-fullscreen.css'; interface DesktopVideoPlayerProps { @@ -141,6 +142,7 @@ export function DesktopVideoPlayer({ const { handleMouseMove, + handleTouchToggleControls, togglePlay, handlePlay, handlePause, @@ -149,6 +151,28 @@ export function DesktopVideoPlayer({ handleVideoError, } = logic; + // Mobile double-tap gesture for skip forward/backward + const { handleTap } = useDoubleTap({ + onSingleTap: handleTouchToggleControls, + onDoubleTapLeft: () => { + logic.skipBackward(); + handleMouseMove(); // Reset 3s auto-hide timer + }, + onDoubleTapRight: () => { + logic.skipForward(); + handleMouseMove(); // Reset 3s auto-hide timer + }, + onSkipContinueLeft: () => { + logic.skipBackward(); + handleMouseMove(); + }, + onSkipContinueRight: () => { + logic.skipForward(); + handleMouseMove(); + }, + isSkipModeActive: data.showSkipForwardIndicator || data.showSkipBackwardIndicator, + }); + return (