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

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;