feat: Video Trimmer and more

frontend-tools/video-editor/client/src/components/IOSPlayPrompt.tsx

@@ -0,0 +1,77 @@
+import React, { useState, useEffect } from 'react';
+import '../styles/IOSPlayPrompt.css';
+
+interface MobilePlayPromptProps {
+  videoRef: React.RefObject<HTMLVideoElement>;
+  onPlay: () => void;
+}
+
+const MobilePlayPrompt: React.FC<MobilePlayPromptProps> = ({ videoRef, onPlay }) => {
+  const [isVisible, setIsVisible] = useState(false);
+
+  // Check if the device is mobile
+  useEffect(() => {
+    const checkIsMobile = () => {
+      // More comprehensive check for mobile/tablet devices
+      return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Mobile|mobile|CriOS/i.test(navigator.userAgent);
+    };
+
+    // Always show for mobile devices on each visit
+    const isMobile = checkIsMobile();
+    setIsVisible(isMobile);
+  }, []);
+
+  // Close the prompt when video plays
+  useEffect(() => {
+    const video = videoRef.current;
+    if (!video) return;
+
+    const handlePlay = () => {
+      // Just close the prompt when video plays
+      setIsVisible(false);
+    };
+
+    video.addEventListener('play', handlePlay);
+    return () => {
+      video.removeEventListener('play', handlePlay);
+    };
+  }, [videoRef]);
+
+  const handlePlayClick = () => {
+    onPlay();
+    // Prompt will be closed by the play event handler
+  };
+
+  if (!isVisible) return null;
+
+  return (
+    <div className="mobile-play-prompt-overlay">
+      <div className="mobile-play-prompt">
+        {/* <h3>Mobile Device Notice</h3>
+        
+        <p>
+          For the best video editing experience on mobile devices, you need to <strong>play the video first</strong> before 
+          using the timeline controls.
+        </p>
+        
+        <div className="mobile-prompt-instructions">
+          <p>Please follow these steps:</p>
+          <ol>
+            <li>Tap the button below to start the video</li>
+            <li>After the video starts, you can pause it</li>
+            <li>Then you'll be able to use all timeline controls</li>
+          </ol>
+        </div> */}
+        
+        <button 
+          className="mobile-play-button"
+          onClick={handlePlayClick}
+        >
+          Click to start editing...
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default MobilePlayPrompt;