sebastjan/videofolxtv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Visually indicate video navigation direction with animated dots

Browse Source 
Update VideoPage component to add visual feedback for video navigation. A state variable `activeDot` controls the styling of navigation dots, changing to a gradient when a direction is selected and returning to a default style after a short delay. This provides users with a visual cue indicating the direction of video transitions.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 2cd2c0bc-434c-4bc9-ad3f-b99d3897a0d1
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/2cd2c0bc-434c-4bc9-ad3f-b99d3897a0d1/OdlP8Wj
This commit is contained in:
sebastjanartic 2025-09-03 09:03:39 +00:00
parent 2a0faf1521
commit 5716c576c6
1 changed files with 25 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
client/src/pages/VideoPage.tsx
View File

@ -57,6 +57,7 @@ export default function VideoPage() {
const [showShareMenu, setShowShareMenu] = useState(false);
const [touchStart, setTouchStart] = useState(0);
const [touchEnd, setTouchEnd] = useState(0);
const [activeDot, setActiveDot] = useState<'left' | 'center' | 'right'>('center');
const [searchQuery, setSearchQuery] = useState("");
const [viewMode, setViewMode] = useState<"grid" | "list">("grid");
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
@ -123,6 +124,14 @@ export default function VideoPage() {
const currentIndex = getCurrentVideoIndex();
if (currentIndex === -1) return;
// Show direction feedback on dots
setActiveDot(direction === 'next' ? 'right' : 'left');
// Return to center after 300ms
setTimeout(() => {
setActiveDot('center');
}, 300);
let newIndex;
if (direction === 'next') {
newIndex = currentIndex + 1 >= allVideos.length ? 0 : currentIndex + 1;
@ -570,7 +579,11 @@ export default function VideoPage() {
{/* Left dot */}
<button
onClick={() => navigateToVideo('prev')}
className="rounded-full transition-colors duration-300 ease-in-out bg-white/25 hover:bg-white/40"
className={`rounded-full transition-colors duration-300 ease-in-out ${
activeDot === 'left'
? 'bg-gradient-to-r from-purple-500 to-blue-500'
: 'bg-white/25 hover:bg-white/40'
}`}
style={{
width: '8px',
height: '8px',
@ -579,9 +592,13 @@ export default function VideoPage() {
}}
aria-label="Previous video"
/>
{/* Center dot - always active */}
{/* Center dot */}
<button
className="rounded-full bg-gradient-to-r from-purple-500 to-blue-500"
className={`rounded-full transition-colors duration-300 ease-in-out ${
activeDot === 'center'
? 'bg-gradient-to-r from-purple-500 to-blue-500'
: 'bg-white/25'
}`}
style={{
width: '8px',
height: '8px',
@ -593,7 +610,11 @@ export default function VideoPage() {
{/* Right dot */}
<button
onClick={() => navigateToVideo('next')}
className="rounded-full transition-colors duration-300 ease-in-out bg-white/25 hover:bg-white/40"
className={`rounded-full transition-colors duration-300 ease-in-out ${
activeDot === 'right'
? 'bg-gradient-to-r from-purple-500 to-blue-500'
: 'bg-white/25 hover:bg-white/40'
}`}
style={{
width: '8px',
height: '8px',