CopyBot/mediacms
1
0
Fork 0
mirror of https://github.com/mediacms-io/mediacms.git synced 2025-11-06 15:38:53 -05:00
Code Issues Packages Projects Releases Wiki Activity

Chapters: Play Preview should not be included for the chapter editor - only Play is needed

Browse Source
This commit is contained in:
Yiannis Christodoulou 2025-10-13 01:24:20 +03:00
parent 622cec680a
commit ee7fb7950c
1 changed files with 49 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
frontend-tools/chapters-editor/client/src/components/EditingTools.tsx
View File

@ -7,12 +7,10 @@ interface EditingToolsProps {
onReset: () => void; onReset: () => void;
onUndo: () => void; onUndo: () => void;
onRedo: () => void; onRedo: () => void;
onPlaySegments: () => void;
onPlay: () => void; onPlay: () => void;
canUndo: boolean; canUndo: boolean;
canRedo: boolean; canRedo: boolean;
isPlaying?: boolean; isPlaying?: boolean;
isPlayingSegments?: boolean;
} }
const EditingTools = ({ const EditingTools = ({
@ -20,12 +18,10 @@ const EditingTools = ({
onReset, onReset,
onUndo, onUndo,
onRedo, onRedo,
onPlaySegments,
onPlay, onPlay,
canUndo, canUndo,
canRedo, canRedo,
isPlaying = false, isPlaying = false,
isPlayingSegments = false,
}: EditingToolsProps) => { }: EditingToolsProps) => {
const [isSmallScreen, setIsSmallScreen] = useState(false); const [isSmallScreen, setIsSmallScreen] = useState(false);
@ -55,52 +51,6 @@ const EditingTools = ({
<div className="flex-container single-row"> <div className="flex-container single-row">
{/* Left side - Play buttons group */} {/* Left side - Play buttons group */}
<div className="button-group play-buttons-group"> <div className="button-group play-buttons-group">
{/* Play Chapters button */}
<button
className={`button segments-button`}
onClick={onPlaySegments}
data-tooltip={
isPlayingSegments ? 'Stop chapters playback' : 'Play chapters in one continuous flow'
}
style={{ fontSize: '0.875rem' }}
>
{isPlayingSegments ? (
<>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<circle cx="12" cy="12" r="10" />
<line x1="10" y1="15" x2="10" y2="9" />
<line x1="14" y1="15" x2="14" y2="9" />
</svg>
<span className="full-text">Stop Preview</span>
<span className="short-text">Stop Preview</span>
</>
) : (
<>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<circle cx="12" cy="12" r="10" />
<polygon points="10 8 16 12 10 16 10 8" />
</svg>
<span className="full-text">Play Preview</span>
<span className="short-text">Play Preview</span>
</>
)}
</button>
{/* Play Preview button */} {/* Play Preview button */}
{/* <button {/* <button
@ -131,16 +81,14 @@ const EditingTools = ({
)} )}
</button> */} </button> */}
{/* Standard Play button (only shown when not in segments playback on small screens) */} {/* Standard Play button */}
{(!isPlayingSegments || !isSmallScreen) && (
<button <button
className={`button play-button ${isPlayingSegments ? 'greyed-out' : ''}`} className="button play-button"
onClick={handlePlay} onClick={handlePlay}
data-tooltip={isPlaying ? 'Pause video' : 'Play full video'} data-tooltip={isPlaying ? 'Pause video' : 'Play full video'}
style={{ fontSize: '0.875rem' }} style={{ fontSize: '0.875rem' }}
disabled={isPlayingSegments}
> >
{isPlaying && !isPlayingSegments ? ( {isPlaying ? (
<> <>
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@ -177,7 +125,6 @@ const EditingTools = ({
</> </>
)} )}
</button> </button>
)}
{/* Segments Playback message (replaces play button during segments playback) */} {/* Segments Playback message (replaces play button during segments playback) */}
{/* {isPlayingSegments && !isSmallScreen && ( {/* {isPlayingSegments && !isSmallScreen && (
@ -209,8 +156,8 @@ const EditingTools = ({
<button <button
className="button" className="button"
aria-label="Undo" aria-label="Undo"
data-tooltip={isPlayingSegments ? 'Disabled during preview' : 'Undo last action'} data-tooltip="Undo last action"
disabled={!canUndo || isPlayingSegments} disabled={!canUndo}
onClick={onUndo} onClick={onUndo}
> >
<svg <svg
@ -230,8 +177,8 @@ const EditingTools = ({
<button <button
className="button" className="button"
aria-label="Redo" aria-label="Redo"
data-tooltip={isPlayingSegments ? 'Disabled during preview' : 'Redo last undone action'} data-tooltip="Redo last undone action"
disabled={!canRedo || isPlayingSegments} disabled={!canRedo}
onClick={onRedo} onClick={onRedo}
> >
<svg <svg
@ -252,8 +199,7 @@ const EditingTools = ({
<button <button
className="button" className="button"
onClick={onReset} onClick={onReset}
data-tooltip={isPlayingSegments ? 'Disabled during preview' : 'Reset to full video'} data-tooltip="Reset to full video"
disabled={isPlayingSegments}
> >
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path <path