Skip to content

Commit 8fdc864

Browse files
deusprogrammerdeusprogrammer
committed
UI Overhaul
1 parent 20da3d4 commit 8fdc864

File tree

5 files changed

+214
-139
lines changed

5 files changed

+214
-139
lines changed

‎release/app/package.json‎

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

‎src/main/main.ts‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -419,10 +419,11 @@ const exportToZip = async (
419419
const deleteClip = (id: string, game: string) => {
420420
console.log('DELETING ' + id + ' FOR GAME ' + game);
421421

422-
const {clip: videoFilePath, subtitle: subFilePath} = getClipPaths(id, game);
422+
const {clip: videoFilePath, subtitle: subFilePath, thumbnail: thumbnailFilePath} = getClipPaths(id, game);
423423

424424
console.log('DELETING ' + videoFilePath);
425425
console.log('DELETING ' + subFilePath);
426+
console.log('DELETING ' + thumbnailFilePath);
426427

427428
// Delete video files
428429
if (fs.existsSync(videoFilePath)) {
@@ -434,6 +435,10 @@ const deleteClip = (id: string, game: string) => {
434435
fs.unlinkSync(subFilePath);
435436
}
436437

438+
if (fs.existsSync(thumbnailFilePath)) {
439+
fs.unlinkSync(thumbnailFilePath);
440+
}
441+
437442
// Remove references to video in collections
438443
Object.keys(collections[game]).forEach((collectionId) => {
439444
collections[game][collectionId] = collections[game][
@@ -596,9 +601,9 @@ const createWindow = async () => {
596601
callback(filePath);
597602
});
598603

599-
protocol.interceptFileProtocol('game', (request, callback) => {
604+
protocol.interceptFileProtocol('game', async (request, callback) => {
600605
let url = request.url.substring(7);
601-
let pattern = /^(rifftrax|whatthedub)\/(.+)\.(mp4|srt)\.*(disabled)*$/;
606+
let pattern = /^(rifftrax|whatthedub)\/(.+)\.(mp4|srt|jpg)$/;
602607

603608
if (url === "batch.tmp.mp4") {
604609
return callback(BATCH_VIDEO_TEMP_FILE);
@@ -623,6 +628,9 @@ const createWindow = async () => {
623628
} else if (ext === 'srt') {
624629
callback(subtitle);
625630
} else if (ext === 'jpg') {
631+
if (!fs.existsSync(thumbnail)) {
632+
await createThumbnail(clip, '00:00:01', thumbnail);
633+
}
626634
callback(thumbnail);
627635
} else {
628636
callback(clip);

‎src/renderer/App.css‎

Lines changed: 81 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
1+
body {
2+
color: white;
3+
background-color: black;
4+
}
5+
16
.App {
27
text-align: center;
38
}
@@ -30,7 +35,7 @@
3035

3136
a {
3237
text-decoration: none;
33-
color: black;
38+
color: white;
3439
}
3540

3641
a:hover {
@@ -39,8 +44,8 @@ a:hover {
3944
}
4045

4146
.active {
42-
background-color: black;
43-
color: white;
47+
background-color: white;
48+
color: black;
4449
}
4550

4651
li {
@@ -186,6 +191,65 @@ button.selected {
186191
}
187192
}
188193

194+
.video-list-element {
195+
border: 1px solid transparent;
196+
border-radius: 10px;
197+
width: 200px;
198+
}
199+
200+
.video-list-element:hover {
201+
border: 1px solid greenyellow;
202+
cursor: pointer;
203+
}
204+
205+
.video-list-element img:hover {
206+
opacity: 0.5;
207+
}
208+
209+
.removable,
210+
.addable,
211+
.openable {
212+
position: relative;
213+
}
214+
215+
.removable:hover::after {
216+
position: absolute;
217+
top: 50%;
218+
left: 50%;
219+
transform: translate(-50%, -50%);
220+
content: 'Remove Clip';
221+
font-size: 1.8rem;
222+
pointer-events: none;
223+
}
224+
225+
.addable:hover::after {
226+
position: absolute;
227+
top: 50%;
228+
left: 50%;
229+
transform: translate(-50%, -50%);
230+
content: 'Add Clip';
231+
font-size: 1.8rem;
232+
pointer-events: none;
233+
}
234+
235+
.openable:hover::after {
236+
position: absolute;
237+
top: 50%;
238+
left: 50%;
239+
transform: translate(-50%, -50%);
240+
content: 'Open';
241+
font-size: 1.8rem;
242+
pointer-events: none;
243+
}
244+
245+
.pack-header {
246+
position: sticky;
247+
top: 0px;
248+
background-color: black;
249+
color: white;
250+
z-index: 10;
251+
}
252+
189253
.clip-pack-edit {
190254
display: grid;
191255
grid-template-columns: 1fr 1fr;
@@ -197,8 +261,21 @@ button.selected {
197261
overflow-y: scroll;
198262
}
199263

200-
.clip-table td:first-child {
264+
.clip-table {
265+
display: grid;
266+
grid-template-columns: repeat(auto-fit, 200px);
267+
gap: 10px;
268+
}
269+
270+
.clip-table > div {
271+
display: flex;
272+
flex-direction: column;
273+
}
274+
275+
.clip-table img {
201276
width: 200px;
277+
height: 200px;
278+
object-fit: contain;
202279
}
203280

204281
.preview-image {

‎src/renderer/routes/CollectionManager.jsx‎

Lines changed: 41 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -272,38 +272,36 @@ export default () => {
272272
<div className="clip-pack-edit">
273273
<div>
274274
<h2>Clip Pack {collectionId}</h2>
275-
<table
276-
style={{ textAlign: 'center', margin: 'auto' }}
277-
>
275+
<div className="clip-table">
278276
{collections[collectionId].map((videoId) => {
279277
return (
280-
<tr>
281-
<td>
282-
<button
283-
type="button"
284-
onClick={() => {
285-
removeFromCollection(
286-
collectionId,
287-
videoId
288-
);
289-
}}
290-
>
291-
-
292-
</button>
293-
</td>
294-
<td>
295-
{videoId.replace(/_/g, ' ')}
296-
</td>
297-
</tr>
278+
<div>
279+
<div
280+
className="video-list-element"
281+
onClick={() => {
282+
removeFromCollection(
283+
collectionId,
284+
videoId
285+
);
286+
}}
287+
>
288+
<div className="removable">
289+
<img
290+
src={`game://${game}/${videoId}.jpg`}
291+
/>
292+
</div>
293+
<div>
294+
{videoId.replace(/_/g, ' ')}
295+
</div>
296+
</div>
297+
</div>
298298
);
299299
})}
300-
</table>
300+
</div>
301301
</div>
302302
<div>
303303
<h2>Videos Not in Clip Pack</h2>
304-
<table
305-
style={{ textAlign: 'center', margin: 'auto' }}
306-
>
304+
<div className="clip-table">
307305
{videos
308306
.filter(
309307
(video) =>
@@ -313,27 +311,27 @@ export default () => {
313311
)
314312
.map(({ _id: videoId }) => {
315313
return (
316-
<tr>
317-
<td>
318-
<button
319-
type="button"
320-
onClick={() => {
321-
addToCollection(
322-
collectionId,
323-
videoId
324-
);
325-
}}
326-
>
327-
+
328-
</button>
329-
</td>
330-
<td>
314+
<div
315+
className="video-list-element"
316+
onClick={() => {
317+
addToCollection(
318+
collectionId,
319+
videoId
320+
);
321+
}}
322+
>
323+
<div className="addable">
324+
<img
325+
src={`game://${game}/${videoId}.jpg`}
326+
/>
327+
</div>
328+
<div>
331329
{videoId.replace(/_/g, ' ')}
332-
</td>
333-
</tr>
330+
</div>
331+
</div>
334332
);
335333
})}
336-
</table>
334+
</div>
337335
</div>
338336
</div>
339337
</div>

0 commit comments

Comments
 (0)