Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

blur logic for start value and blur clock confirmation fix #897

Merged
merged 1 commit into from
Mar 18, 2024
Merged

blur logic for start value and blur clock confirmation fix #897

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 30 additions & 17 deletions src/components/bits/TrackEditorSideMenu/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,11 +41,20 @@ const TrackEditorSideMenu = props => {
const [endInputHighlight, setEndInputHighlight] = useState(false)
const [blurInputHighlight, setBlurInputHighlight] = useState(false)
const [trIndex, setTrIndex] = useState(0)
const [startTimeInputValue, setStartTimeInputValue] = useState(``)

useEffect(() => {
setEvent(singleEvent)
}, [index, event, singleEvent])

useEffect(() => {
if (event.type === `Censor`){
const startInputTimeValue = document.getElementsByClassName(`censor-time-input-0`)
if (startInputTimeValue && startInputTimeValue[0] && startInputTimeValue[0].value!== null)
setStartTimeInputValue(startInputTimeValue[0].value)
}
}, [setStartTimeInputValue, handleEditCensor, index, event.type])

const editEvent = (side, time, value, layer, ind, type) => {
const ev = {...event}
if (side === `beg`) {
Expand Down Expand Up @@ -120,7 +129,7 @@ const TrackEditorSideMenu = props => {
const displayTime = convertSecondsToHMS(videoCurrentTime, videoLength)
setConfirmationMessage(`Change blur time to current time? (${displayTime})`)
setStartOrEnd(`blur`)
setTrIndex(parseInt(e.target.id.split(`-`)[1]))
setTrIndex(e.target.id.split(`-`)[1]).toString()
setEvent(event)
setBlurInputHighlight(true)
setStartInputHighlight(false)
Expand Down Expand Up @@ -225,6 +234,7 @@ const TrackEditorSideMenu = props => {
setEventSeek(true)
handleEventPosition(event.position[e][0])
setActiveCensorPosition(e)
setBlurInputHighlight(true)
}
const start = event.start
const end = event.end
Expand All @@ -251,7 +261,7 @@ const TrackEditorSideMenu = props => {
type='text'
className={`side-tab-input ${startInputHighlight ? `blue-highlight` : ``}`}
style={{ padding: event.type === `Pause` ? `0 50px 0 10px` : `0 10px`}}
value={`${convertSecondsToHMS(start, videoLength)}`}
value={event.type === `Censor` ? startTimeInputValue : convertSecondsToHMS(start, videoLength)}
onKeyUp={e => e.stopPropagation()}
onChange={e => handleEditEventBeginTimeChange(e, `onChange`)}
onBlur={e => handleEditEventBeginTimeChange(e, `onBlur`)}
Expand All @@ -263,20 +273,23 @@ const TrackEditorSideMenu = props => {
})
}
onMouseLeave={() => toggleTip()}
disabled={event.type === `Censor`}
/>
<div className={`clock`}
onMouseEnter={e => handleShowTip(`startclock`,
{
x: e.target.getBoundingClientRect().x - 15,
y: e.target.getBoundingClientRect().y + 20,
width: e.currentTarget.offsetWidth + 40,
})
}
onMouseLeave={() => toggleTip()}
style={{ right: event.type === `Pause` ? `63px` : `30px`}}
>
<i className='fa fa-clock fa-lg' onClick={(e) => handleShowConfirmation(e, `start`)}></i>
</div>
{event.type !== `Censor` && ( // Conditionally render the <i> element if event.type is not 'Censor'
<div className={`clock`}
onMouseEnter={e => handleShowTip(`startclock`,
{
x: e.target.getBoundingClientRect().x - 15,
y: e.target.getBoundingClientRect().y + 20,
width: e.currentTarget.offsetWidth + 40,
})
}
onMouseLeave={() => toggleTip()}
style={{ right: event.type === `Pause` ? `63px` : `30px`}}
>
<i className='fa fa-clock fa-lg' onClick={(e) => handleShowConfirmation(e, `start`)}></i>
</div>
)}
<input
type='text'
className= {`side-tab-input end-input ${endInputHighlight ? `blue-highlight` : ``}`}
Expand Down Expand Up @@ -376,12 +389,12 @@ const TrackEditorSideMenu = props => {
{event.type === `Censor` &&
Object.keys(event.position).sort((a, b) => parseFloat(event.position[a][0]) - parseFloat(event.position[b][0])).map((item, i) => (
<React.Fragment key={item}>
<tr className={`${activeCensorPosition === item && `censorActive`}`} >
<tr className={`${activeCensorPosition === item && `censor-active`}`} >
<td id={`time-td-${item}`} className={`td-one`}>
<span className={`flex-box`}>
<input
id={`censorTimeInput-${item}`}
className={`censor-row ${blurInputHighlight ? `blue-highlight` : ``} `}
className={`censor-row ${blurInputHighlight ? `blue-highlight` : ``} censor-time-input-${i}`}
type='text'
defaultValue={`${convertSecondsToHMS(parseFloat(event.position[item][0]), videoLength)}`}
onKeyUp={e => e.stopPropagation()}
Expand Down
Loading