Skip to content

Commit a5e2408

Browse files
deusprogrammerdeusprogrammer
committed
Fixed scaling problems
1 parent 23390f0 commit a5e2408

File tree

7 files changed

+273
-303
lines changed

7 files changed

+273
-303
lines changed

‎release/app/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "dub-editor-sa-electron",
3-
"version": "2.4.1-beta",
3+
"version": "2.4.2-beta",
44
"description": "A dub editor for What the Dub and Rifftrax games by Wide Right Studios",
55
"license": "MIT",
66
"author": {

‎src/renderer/App.css‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,12 @@
11
body {
22
color: white;
33
background-color: black;
4+
padding: 0px;
5+
margin: 0px;
6+
}
7+
8+
body * {
9+
box-sizing: content-box;
410
}
511

612
.App {
@@ -76,6 +82,7 @@ li {
7682
.top-pane {
7783
display: flex;
7884
flex-direction: row;
85+
height: 75vh;
7986
}
8087

8188
.video-window {
@@ -88,12 +95,14 @@ li {
8895
}
8996

9097
.subtitle-window {
91-
flex-grow: 1;
98+
flex-grow: 0;
9299
flex-shrink: 0;
100+
width: 50%;
93101
}
94102

95103
.timeline {
96104
flex-grow: 1;
105+
height: 25vh;
97106
}
98107

99108
.selected {
@@ -144,7 +153,7 @@ button.selected {
144153
}
145154

146155
.subtitle-list {
147-
height: 200px;
156+
height: 100px;
148157
overflow-y: scroll;
149158
}
150159

@@ -200,10 +209,6 @@ button.selected {
200209
}
201210
}
202211

203-
.subtitle-window table td:nth-child(2) {
204-
width: 250px;
205-
}
206-
207212
.subtitle-window input {
208213
width: 100%;
209214
}

‎src/renderer/components/ClipList.jsx‎

Lines changed: 70 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,10 @@ import { useEffect, useState } from 'react';
33
import { Link } from 'react-router-dom';
44

55
let convertMillisecondsToTimestamp = (milliseconds) => {
6+
if (milliseconds === undefined || milliseconds === null) {
7+
return '';
8+
}
9+
610
let seconds = milliseconds / 1000;
711
let h = Math.floor(seconds / 3600);
812
let m = Math.floor((seconds % 3600) / 60);
@@ -29,7 +33,7 @@ export default ({
2933
let currentClipObject = clips[currentClip];
3034

3135
let videoLengthMs = videoLength * 1000;
32-
let defaultClipSize = videoLengthMs * 0.1;
36+
let defaultClipSize = videoLengthMs * 0.1; // The recommended maximum length
3337

3438
return (
3539
<div className="subtitle-window">
@@ -65,7 +69,7 @@ export default ({
6569
<h3>Clips</h3>
6670
<div className="subtitle-list">
6771
<table>
68-
<thead>
72+
<thead style={{position: "sticky", top: "0px", backgroundColor: "black"}}>
6973
<tr>
7074
<th>Index</th>
7175
<th>In</th>
@@ -122,77 +126,75 @@ export default ({
122126
rowIndex: 0,
123127
startTime: parseInt(currentSliderPosition),
124128
endTime:
125-
parseInt(currentSliderPosition) + defaultClipSize,
129+
Math.min(parseInt(currentSliderPosition) + defaultClipSize, videoLengthMs),
126130
});
127131
}}
128132
>
129133
Add Clip
130134
</button>
131-
{currentClipObject ? (
132-
<>
133-
<h3>Clip Editor</h3>
134-
<div className="subtitle-editor">
135-
<table style={{ margin: 'auto' }}>
136-
<tr>
137-
<td>
138-
<label>Start</label>
139-
</td>
140-
<td>
141-
{convertMillisecondsToTimestamp(
142-
currentClipObject.startTime
143-
)}
144-
</td>
145-
<td>
146-
<button
147-
title="i"
148-
onClick={() => {
149-
onClipsChange(
150-
'edit',
151-
{
152-
...currentClipObject,
153-
startTime:
154-
currentSliderPosition,
155-
},
156-
currentClip
157-
);
158-
}}
159-
>
160-
Set at Play Head
161-
</button>
162-
</td>
163-
</tr>
164-
<tr>
165-
<td>
166-
<label>End</label>
167-
</td>
168-
<td>
169-
{convertMillisecondsToTimestamp(
170-
currentClipObject.endTime
171-
)}
172-
</td>
173-
<td>
174-
<button
175-
title="o"
176-
onClick={() => {
177-
onClipsChange(
178-
'edit',
179-
{
180-
...currentClipObject,
181-
endTime:
182-
currentSliderPosition,
183-
},
184-
currentClip
185-
);
186-
}}
187-
>
188-
Set at Play Head
189-
</button>
190-
</td>
191-
</tr>
192-
</table>
193-
</div>
194-
</>
195-
) : null}
135+
<h3>Clip Editor</h3>
136+
<div className="subtitle-editor">
137+
<table style={{ margin: 'auto' }}>
138+
<tr>
139+
<td>
140+
<label>Start</label>
141+
</td>
142+
<td>
143+
{convertMillisecondsToTimestamp(
144+
currentClipObject?.startTime
145+
)}
146+
</td>
147+
<td>
148+
<button
149+
title="i"
150+
onClick={() => {
151+
onClipsChange(
152+
'edit',
153+
{
154+
...currentClipObject,
155+
startTime:
156+
currentSliderPosition,
157+
},
158+
currentClip
159+
);
160+
}}
161+
disabled={!currentClipObject}
162+
>
163+
Set at Play Head
164+
</button>
165+
</td>
166+
</tr>
167+
<tr>
168+
<td>
169+
<label>End</label>
170+
</td>
171+
<td>
172+
{convertMillisecondsToTimestamp(
173+
currentClipObject?.endTime
174+
)}
175+
</td>
176+
<td>
177+
<button
178+
title="o"
179+
onClick={() => {
180+
onClipsChange(
181+
'edit',
182+
{
183+
...currentClipObject,
184+
endTime:
185+
currentSliderPosition,
186+
},
187+
currentClip
188+
);
189+
}}
190+
disabled={!currentClipObject}
191+
>
192+
Set at Play Head
193+
</button>
194+
</td>
195+
</tr>
196+
</table>
197+
</div>
196198
</div>
197199
);
198200
};

0 commit comments

Comments
 (0)