OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Trying to create a Video Editor in React.js and my grid isn't scrolling correctly

  • Thread starter Thread starter user25721863
  • Start date Start date
U

user25721863

Guest
Video Editor WIP Picture I am creating a Video Editor like web app and I am specifically focusing on the timeline component and how I am laying that out in html and css within my Timeline.jsx. I can below provide some of the code:

Code:
<div className='timeline-container'> 
                        
                        
                        <div className='timeline' ref={timelineRef} onMouseMove={handleMouseMove} onClick={handleTimelineClick}>
                            
                                <div className="timecode-widget" onDoubleClick={toggleDisplayMode}>
                                    {displayMode === 'timecode' 
                                        ? `TC: ${formatTimecode(currentFrame, timelineFPS)}`
                                        : `Fr: ${currentFrame}`
                                    }
                                </div>
                                <div className='track-names-container'>
                                    {renderEntityTrackName()}
                                    {renderTrackNames()}
                                </div>

                                <div className='timeline-track-container'>
                            
                                    <div className="timeline-header">
                                        <div className="timeline-ruler">
                                                {selectedTimeline ? (
                                                rulerItems.map((timecode, index) => (
                                                    <div key={`ruler-${index}`} className="ruler-item" style={{ width: `${timecode.width}px`, flex: `none` }}>
                                                        <span>{timecode.timecode}</span>
                                                    </div>
                                                ))
                                            ) : (
                                                <div className="ruler-item"></div>
                                            )}
                                        </div>
                                        <div className="ghost-playhead" style={{ left: `${ghostPlayheadPosition}px` }}></div>
                                        <div 
                                            className="playhead" 
                                            style={{ left: `${playheadPosition}px` }}
                                            onMouseDown={(e) => e.preventDefault()}
                                            onMouseMove={handlePlayheadDrag}
                                        ></div>
                                        <div 
                                            className="playhead-tail" 
                                            style={{ left: `${playheadPosition+scale}px` }}
                                            onMouseDown={(e) => e.preventDefault()}
                                            onMouseMove={handlePlayheadDrag}
                                        ></div>
                                    </div>

                                    <div className='timeline-solved-track'>
                                        {renderEntityTracks()}
                                    </div>
                                    
                                    <div className='timeline-tracks'>
                                        {selectedTimeline ? (
                                                renderTracks()
                                            ) : (
                                                <div className="track-placeholder"></div>
                                        )}
                                    </div>
                                </div>
                        </div>
                    </div>

the css for this is as follows:

Code:
.timeline-container {
    display: flex;
    width: 99vw;
    gap: 3px;
    height: 525px;
    align-items: flex-start;
    flex-direction: row;
}

.timeline {
    width: 100%;
    height: 100%;
    display: grid;
    overflow-x: hidden;
    overflow-y: hidden;
    column-gap: 10px;
    grid-template-columns: 150px 1fr;
    grid-template-rows: 37px 45px 1fr;
    border-radius: 10px;
    row-gap: 2px;

  }


.timeline-tracks {
    display: grid;
    grid-column: span 2;
    grid-row: 3;
    //grid-template-columns: 150px 1fr;
    grid-auto-rows: min-content;
    row-gap: 3px;
    overflow: visible;
    column-gap: 10px;

}

.timeline-solved-track {
    display: grid;
    grid-row: 2;
    grid-column: span 2;
    //grid-template-columns: 150px 1fr;
    grid-auto-rows: min-content;
    row-gap: 3px;
    /* overflow-y: scroll; */
    column-gap: 10px;
    //overflow-x: hidden;
    overflow-y: visible;
    position:sticky;
    
    .track {
        height: 45px;
        min-height: 45px;
        background-color: #003006b2;
        margin-top: 0;
    }

}

.timeline-track-names {
    grid-column: 1;
    text-align: center;
    font-size: 9pt;
    align-content: center;
    background-color: #1D2833;
    border-bottom: #bbbbbb69 0.5px solid;
    max-height: 156px;
    height: 65px;

}

.timeline-track-names-solves {
    height: 45px;
    grid-column: 1;
    text-align: center;
    font-size: 9pt;
    align-content: center;

    background-color: #1fb601a9;
    border-bottom: #bbbbbb69 0.5px solid;
    max-height: 156px;
}

.timeline-track-container {
    grid-column: 2;
    grid-row: 1;
    overflow-x: scroll;
    height: 525px;
}

.timeline-header {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    align-items: center;
    position: sticky;
    width: 100%;
    background-color: #131B22;
    grid-column: 2;
    grid-row: 1;
    height: 37px;
    
}

.timeline-ruler {
    display: flex;
    position: relative;
    width: 100%;
    height: 35px;
    background-color: #131B22;

}

This gives me pretty much what a want which is a 2 column by 3 row grid which I then have my timeline header in the first row the solve track(a permanent video track) in the second row and my dynamic video tracks in third row with the track names running along side the video track. However with this set up I have to choose between scrolling in the y-axis which will move the timeline header which I don't want it must remain static on y axis move then when we need to scrub left and right the header needs to move with the tracks on the x axis. I have tried so many configurations of grid I need someone to take a look perhaps simplify the div structure and css so that the track names only move up and down and not left and right and the header only moves left and right but not up and down.

I have tried stripping it down to a more basic html and css structure and it still didn't work.

Code:
<div class="video-editor">
    <div class="header">Timeline Ruler</div>
    <div class="content">
        <div class="sidebar">
            <div class="track-name">Track 1</div>
            <div class="track-name">Track 2</div>
            <div class="track-name">Track 3</div>

        </div>
        <div class="tracks-container">
            <div class="track">Track 1 Content</div>
            <div class="track">Track 2 Content</div>
            <div class="track">Track 3 Content</div>

        </div>
    </div>
</div>

with the following css:

Code:
.video-editor {
    display: grid;
    grid-template-rows: auto 1fr;
    height: 100vh;
}

.header {
    grid-row: 1;
    background: #333;
    color: white;
    padding: 10px;
    position: sticky;
    top: 0;
    z-index: 10;
}

.content {
    grid-row: 2;
    display: flex;
    overflow: auto;
    position: relative;
}

.sidebar {
    background: #444;
    color: white;
    position: sticky;
    left: 0;
    top: 0;
    height: 100%;
    overflow-y: auto;
}

.track-name {
    padding: 10px;
    border-bottom: 1px solid #555;
}

.tracks-container {
    flex: 1;
    overflow: auto;
    display: flex;
    flex-direction: column;
}

.track {
    min-height: 50px;
    border-bottom: 1px solid #ccc;
}

Give me a more simply layout but it simply doesn't work as I need it to. I am now looking into custom DOM JS for synchronizing scrolls but is it really needed for what I want it to do ?

<p><a href="https://i.sstatic.net/82Wi2YjT.png" rel="nofollow noreferrer">Video Editor WIP Picture</a> I am creating a Video Editor like web app and I am specifically focusing on the timeline component and how I am laying that out in html and css within my Timeline.jsx. I can below provide some of the code:</p>
<pre><code><div className='timeline-container'>


<div className='timeline' ref={timelineRef} onMouseMove={handleMouseMove} onClick={handleTimelineClick}>

<div className="timecode-widget" onDoubleClick={toggleDisplayMode}>
{displayMode === 'timecode'
? `TC: ${formatTimecode(currentFrame, timelineFPS)}`
: `Fr: ${currentFrame}`
}
</div>
<div className='track-names-container'>
{renderEntityTrackName()}
{renderTrackNames()}
</div>

<div className='timeline-track-container'>

<div className="timeline-header">
<div className="timeline-ruler">
{selectedTimeline ? (
rulerItems.map((timecode, index) => (
<div key={`ruler-${index}`} className="ruler-item" style={{ width: `${timecode.width}px`, flex: `none` }}>
<span>{timecode.timecode}</span>
</div>
))
) : (
<div className="ruler-item"></div>
)}
</div>
<div className="ghost-playhead" style={{ left: `${ghostPlayheadPosition}px` }}></div>
<div
className="playhead"
style={{ left: `${playheadPosition}px` }}
onMouseDown={(e) => e.preventDefault()}
onMouseMove={handlePlayheadDrag}
></div>
<div
className="playhead-tail"
style={{ left: `${playheadPosition+scale}px` }}
onMouseDown={(e) => e.preventDefault()}
onMouseMove={handlePlayheadDrag}
></div>
</div>

<div className='timeline-solved-track'>
{renderEntityTracks()}
</div>

<div className='timeline-tracks'>
{selectedTimeline ? (
renderTracks()
) : (
<div className="track-placeholder"></div>
)}
</div>
</div>
</div>
</div>
</code></pre>
<p>the css for this is as follows:</p>
<pre><code>.timeline-container {
display: flex;
width: 99vw;
gap: 3px;
height: 525px;
align-items: flex-start;
flex-direction: row;
}

.timeline {
width: 100%;
height: 100%;
display: grid;
overflow-x: hidden;
overflow-y: hidden;
column-gap: 10px;
grid-template-columns: 150px 1fr;
grid-template-rows: 37px 45px 1fr;
border-radius: 10px;
row-gap: 2px;

}


.timeline-tracks {
display: grid;
grid-column: span 2;
grid-row: 3;
//grid-template-columns: 150px 1fr;
grid-auto-rows: min-content;
row-gap: 3px;
overflow: visible;
column-gap: 10px;

}

.timeline-solved-track {
display: grid;
grid-row: 2;
grid-column: span 2;
//grid-template-columns: 150px 1fr;
grid-auto-rows: min-content;
row-gap: 3px;
/* overflow-y: scroll; */
column-gap: 10px;
//overflow-x: hidden;
overflow-y: visible;
position:sticky;

.track {
height: 45px;
min-height: 45px;
background-color: #003006b2;
margin-top: 0;
}

}

.timeline-track-names {
grid-column: 1;
text-align: center;
font-size: 9pt;
align-content: center;
background-color: #1D2833;
border-bottom: #bbbbbb69 0.5px solid;
max-height: 156px;
height: 65px;

}

.timeline-track-names-solves {
height: 45px;
grid-column: 1;
text-align: center;
font-size: 9pt;
align-content: center;

background-color: #1fb601a9;
border-bottom: #bbbbbb69 0.5px solid;
max-height: 156px;
}

.timeline-track-container {
grid-column: 2;
grid-row: 1;
overflow-x: scroll;
height: 525px;
}

.timeline-header {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
align-items: center;
position: sticky;
width: 100%;
background-color: #131B22;
grid-column: 2;
grid-row: 1;
height: 37px;

}

.timeline-ruler {
display: flex;
position: relative;
width: 100%;
height: 35px;
background-color: #131B22;

}
</code></pre>
<p>This gives me pretty much what a want which is a 2 column by 3 row grid which I then have my timeline header in the first row the solve track(a permanent video track) in the second row and my dynamic video tracks in third row with the track names running along side the video track. However with this set up I have to choose between scrolling in the y-axis which will move the timeline header which I don't want it must remain static on y axis move then when we need to scrub left and right the header needs to move with the tracks on the x axis. I have tried so many configurations of grid I need someone to take a look perhaps simplify the div structure and css so that the track names only move up and down and not left and right and the header only moves left and right but not up and down.</p>
<p>I have tried stripping it down to a more basic html and css structure and it still didn't work.</p>
<pre><code><div class="video-editor">
<div class="header">Timeline Ruler</div>
<div class="content">
<div class="sidebar">
<div class="track-name">Track 1</div>
<div class="track-name">Track 2</div>
<div class="track-name">Track 3</div>

</div>
<div class="tracks-container">
<div class="track">Track 1 Content</div>
<div class="track">Track 2 Content</div>
<div class="track">Track 3 Content</div>

</div>
</div>
</div>
</code></pre>
<p>with the following css:</p>
<pre><code>.video-editor {
display: grid;
grid-template-rows: auto 1fr;
height: 100vh;
}

.header {
grid-row: 1;
background: #333;
color: white;
padding: 10px;
position: sticky;
top: 0;
z-index: 10;
}

.content {
grid-row: 2;
display: flex;
overflow: auto;
position: relative;
}

.sidebar {
background: #444;
color: white;
position: sticky;
left: 0;
top: 0;
height: 100%;
overflow-y: auto;
}

.track-name {
padding: 10px;
border-bottom: 1px solid #555;
}

.tracks-container {
flex: 1;
overflow: auto;
display: flex;
flex-direction: column;
}

.track {
min-height: 50px;
border-bottom: 1px solid #ccc;
}
</code></pre>
<p>Give me a more simply layout but it simply doesn't work as I need it to. I am now looking into custom DOM JS for synchronizing scrolls but is it really needed for what I want it to do ?</p>
 
Top