Add video playback controls for an improved viewing experience

Introduce new UI elements and functionality to the video player, including play/pause, volume, and fullscreen controls, enhancing user interaction.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: d7424866-83d1-4486-a212-ac12b4c7becf
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/d7424866-83d1-4486-a212-ac12b4c7becf/4PEnB52

client/src/components/video-modal.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from "react";
-import { X, Share2, Edit3 } from "lucide-react";
+import { X, Share2, Edit3, Play, Pause, Volume2, VolumeX, Maximize } from "lucide-react";
 import { type Video } from "@shared/schema";
 import { Button } from "@/components/ui/button";
 import { apiRequest } from "@/lib/queryClient";
@@ -417,6 +417,61 @@ export default function VideoModal({ video, isOpen, onClose }: VideoModalProps)
             Your browser does not support the video tag.
           </video>
           
+          {/* Central Play/Pause Button */}
+          {!isPlaying && showControls && (
+            <div className="absolute inset-0 flex items-center justify-center">
+              <Button
+                onClick={togglePlay}
+                variant="ghost"
+                size="icon"
+                className="w-20 h-20 rounded-full bg-black/50 hover:bg-black/70 text-white border-2 border-white/20 hover:border-white/40 transition-all duration-200"
+                data-testid="button-play-center"
+              >
+                <Play className="w-8 h-8 ml-1" />
+              </Button>
+            </div>
+          )}
+
+          {/* Bottom Control Bar */}
+          {showControls && (
+            <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 via-black/60 to-transparent p-4">
+              <div className="flex items-center gap-4">
+                {/* Play/Pause Button */}
+                <Button
+                  onClick={togglePlay}
+                  variant="ghost"
+                  size="icon"
+                  className="text-white hover:text-bunny-blue transition-colors"
+                  data-testid="button-play-pause"
+                >
+                  {isPlaying ? <Pause className="w-5 h-5" /> : <Play className="w-5 h-5" />}
+                </Button>
+
+                {/* Volume Control */}
+                <Button
+                  onClick={toggleMute}
+                  variant="ghost"
+                  size="icon"
+                  className="text-white hover:text-bunny-blue transition-colors"
+                  data-testid="button-volume"
+                >
+                  {isMuted ? <VolumeX className="w-5 h-5" /> : <Volume2 className="w-5 h-5" />}
+                </Button>
+
+                {/* Fullscreen Button */}
+                <Button
+                  onClick={toggleFullscreen}
+                  variant="ghost"
+                  size="icon"
+                  className="text-white hover:text-bunny-blue transition-colors ml-auto"
+                  data-testid="button-fullscreen"
+                >
+                  <Maximize className="w-5 h-5" />
+                </Button>
+              </div>
+            </div>
+          )}
+
           {/* Quality Indicator */}
           {hlsRef.current && (
             <QualityIndicator 
@@ -525,7 +580,7 @@ export default function VideoModal({ video, isOpen, onClose }: VideoModalProps)
           </div>
           </div>
 
-          <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-6">
+          <div className="absolute bottom-16 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-6 pointer-events-none">
             <h3 
               className="text-xl font-semibold mb-2 text-white"
               data-testid="text-modal-title"