fix: Disable Segment Tools and Reset Preview State During Playback (#1305)

* fix: Disable Segment Tools and Reset Preview State During Playback

* chore: remove some unnecessary comments

* chore: build assets

* fix: do not display the handles (left/right) on preview mode

* fix: Disable all tools on preview mode (undo, redo, reset, etc.)

* Update README.md

* feat: Prettier configuration for video editor

* Update README.md

* Update .prettierrc

* style: Format entire codebase (video-editor) with Prettier

* fix: During segments playback mode, disable button interactions but keep hover working

* feat: Add yarn format

* prettier format

* Update package.json

* feat: Install prettier and improve formatting

* build assets

* Update version.py 6.2.0
This commit is contained in:
Yiannis Christodoulou
2025-07-01 15:33:39 +03:00
committed by GitHub
parent 83f3eec940
commit 4f1c4a2b4c
38 changed files with 2959 additions and 2305 deletions

View File

@@ -1,5 +1,5 @@
import React, { useState, useEffect } from 'react';
import '../styles/IOSPlayPrompt.css';
import React, { useState, useEffect } from "react";
import "../styles/IOSPlayPrompt.css";
interface MobilePlayPromptProps {
videoRef: React.RefObject<HTMLVideoElement>;
@@ -13,7 +13,9 @@ const MobilePlayPrompt: React.FC<MobilePlayPromptProps> = ({ videoRef, onPlay })
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);
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
@@ -31,9 +33,9 @@ const MobilePlayPrompt: React.FC<MobilePlayPromptProps> = ({ videoRef, onPlay })
setIsVisible(false);
};
video.addEventListener('play', handlePlay);
video.addEventListener("play", handlePlay);
return () => {
video.removeEventListener('play', handlePlay);
video.removeEventListener("play", handlePlay);
};
}, [videoRef]);
@@ -62,11 +64,8 @@ const MobilePlayPrompt: React.FC<MobilePlayPromptProps> = ({ videoRef, onPlay })
<li>Then you'll be able to use all timeline controls</li>
</ol>
</div> */}
<button
className="mobile-play-button"
onClick={handlePlayClick}
>
<button className="mobile-play-button" onClick={handlePlayClick}>
Click to start editing...
</button>
</div>
@@ -74,4 +73,4 @@ const MobilePlayPrompt: React.FC<MobilePlayPromptProps> = ({ videoRef, onPlay })
);
};
export default MobilePlayPrompt;
export default MobilePlayPrompt;