16
16
< script src ="FileChooser.js " type ="text/javascript "> </ script >
17
17
< script src ="fcut-utils.js " type ="text/javascript "> </ script >
18
18
</ head > < body >
19
- < div id ="app ">
19
+ < div id ="app " tabindex =" 0 " v-on:keyup =" pages.dispatchKey($event) " >
20
20
< page name ="home ">
21
21
< div class ="padded ">
22
22
< div class ="bar-flex-row ">
23
23
< button v-on:click ="openProject().then(function() { pages.navigateTo('preview'); }) " title ="Select FCut Project file to open "> < i class ="fas fa-file "> </ i > </ button >
24
24
< button v-on:click ="saveProject() " title ="Select FCut Project file to save as "> < i class ="fas fa-save "> </ i > </ button >
25
25
< span class ="bar-flex-row-content "> </ span >
26
- < button v-on:click ="pages.navigateTo('about ') "> < i class ="fas fa-question "> </ i > </ button >
26
+ < button v-on:click ="pages.navigateTo('help ') "> < i class ="fas fa-question "> </ i > </ button >
27
27
</ div >
28
28
< h2 > Fast FFmpeg Cutter (Preview)</ h2 >
29
29
< div class ="flow ">
@@ -53,14 +53,13 @@ <h2>Fast FFmpeg Cutter (Preview)</h2>
53
53
</ div >
54
54
</ div >
55
55
</ page >
56
- < page name ="preview " eclass ="scroll " v-on:page-show ="arguments[0].$el.focus() ">
57
- < div tabindex ="0 " v-on:keyup.e ="pages.navigateTo('export') "
58
- v-on:keyup.t ="bars.time = !bars.time " v-on:keyup.c ="bars.cut = !bars.cut " v-on:keyup.s ="bars.bsearch = !bars.bsearch " v-on:keyup.p ="bars.project = !bars.project "
59
- v-on:keyup.delete ="removePart(partIndex) " v-on:keyup.enter ="split() "
60
- v-on:keyup.left ="move(-step) " v-on:keyup.right ="move(step) "
61
- v-on:keyup.up ="move(-60) " v-on:keyup.down ="move(60) "
62
- v-on:keyup.page-up ="move(-period) " v-on:keyup.page-down ="move(period) "
63
- v-on:keyup.home ="navigateTo(0) " v-on:keyup.end ="navigateTo(duration) ">
56
+ < page name ="preview " eclass ="scroll " v-on:page-key-e ="pages.navigateTo('export') "
57
+ v-on:page-key-t ="bars.time = !bars.time " v-on:page-key-c ="bars.cut = !bars.cut " v-on:page-key-s ="bars.bsearch = !bars.bsearch " v-on:page-key-p ="bars.project = !bars.project "
58
+ v-on:page-key-delete ="removePart(partIndex) " v-on:page-key-enter ="split() "
59
+ v-on:page-key-left ="move(-step) " v-on:page-key-right ="move(step) "
60
+ v-on:page-key-up ="move(-60) " v-on:page-key-down ="move(60) "
61
+ v-on:page-key-pageup ="move(-period) " v-on:page-key-pagedown ="move(period) "
62
+ v-on:page-key-home ="navigateTo(0) " v-on:page-key-end ="navigateTo(duration) ">
64
63
< img v-bind:style ="{ height: aspectRatio > 0 ? (Math.floor(10000 / aspectRatio) / 100) + 'vw' : undefined } " class ="preview " :src ="previewSrc " v-on:click ="navigateOnPreviewClick " />
65
64
< div class ="overlay padded ">
66
65
< div class ="bar-flex-row ">
@@ -84,9 +83,9 @@ <h2>Fast FFmpeg Cutter (Preview)</h2>
84
83
</ div >
85
84
< div v-if ="bars.time " class ="button-bar " title ="Preview time ">
86
85
< a href ="# " v-on:click ="navigateTo(0) " class ="time " title ="Go to start "> 0:00</ a >
87
- < button v-on:click ="move(-period) " title ="Move backard one period "> < i class ="fas fa-backward "> </ i > </ button >
88
- < button v-on:click ="move(-60) " title ="Move backard one minute "> < i class ="fas fa-fast-backward "> </ i > </ button >
89
- < button v-on:click ="move(-step) " title ="Move backard one step "> < i class ="fas fa-step-backward "> </ i > </ button >
86
+ < button v-on:click ="move(-period) " title ="Move backward one period "> < i class ="fas fa-backward "> </ i > </ button >
87
+ < button v-on:click ="move(-60) " title ="Move backward one minute "> < i class ="fas fa-fast-backward "> </ i > </ button >
88
+ < button v-on:click ="move(-step) " title ="Move backward one step "> < i class ="fas fa-step-backward "> </ i > </ button >
90
89
< input type ="text " v-model ="timeHMS " class ="time " title ="Preview time " />
91
90
< button v-on:click ="move(step) " title ="Move forward one step "> < i class ="fas fa-step-forward "> </ i > </ button >
92
91
< button v-on:click ="move(60) " title ="Move forward one minute "> < i class ="fas fa-fast-forward "> </ i > </ button >
@@ -102,11 +101,12 @@ <h2>Fast FFmpeg Cutter (Preview)</h2>
102
101
< a href ="# " v-on:click ="navigateTo(partEndTime) " class ="time " title ="Go to period end "> {{ formatHMS(partEndTime) }}</ a >
103
102
< button v-on:click ="movePart(partIndex, partIndex + 1) " v-bind:disabled ="partIndex === parts.length - 1 " title ="Move the part forward "> < i class ="fas fa-arrow-right "> </ i > </ button >
104
103
< button v-on:click ="split() " title ="Cut the part in 2 at preview time "> < i class ="fas fa-cut "> </ i > Split</ button >
104
+ < button v-on:click ="join() " v-bind:disabled ="!canJoin " title ="Join the 2 parts "> < i class ="fas fa-paperclip "> </ i > Join</ button >
105
105
</ div >
106
106
< div v-if ="bars.bsearch " class ="button-bar " title ="Binary search ">
107
107
< input type ="text " v-model ="stepHMS " class ="time " title ="Step " />
108
108
< input type ="text " v-model ="periodHMS " class ="time " title ="Period " />
109
- < button v-on:click ="findNext(false) " title ="Move backard "> < i class ="fas fa-angle-double-left "> </ i > Back</ button >
109
+ < button v-on:click ="findNext(false) " title ="Move backward "> < i class ="fas fa-angle-double-left "> </ i > Back</ button >
110
110
< button v-on:click ="findNext(true) " title ="Move forward "> < i class ="fas fa-angle-double-right "> </ i > Next</ button >
111
111
< div class ="time " title ="Search period " style ="display: inline-block; ">
112
112
< i v-if ="findPeriod === 0 " class ="fas fa-check "> </ i >
@@ -128,7 +128,6 @@ <h2>Fast FFmpeg Cutter (Preview)</h2>
128
128
< button v-on:click ="saveProject() " title ="Select FCut Project file to save as "> < i class ="fas fa-save "> </ i > Save as...</ button >
129
129
< button v-on:click ="pages.navigateTo('export') "> < i class ="fas fa-cogs "> </ i > Export...</ button >
130
130
</ div >
131
- </ div >
132
131
</ page >
133
132
< page name ="export ">
134
133
< div class ="padded ">
@@ -248,7 +247,7 @@ <h2>Export</h2>
248
247
< div class ="padded ">
249
248
< div class ="bar-flex-row ">
250
249
< span class ="bar-flex-row-content "> </ span >
251
- < button v-on:click ="pages.navigateTo('about ') "> < i class ="fas fa-question "> </ i > </ button >
250
+ < button v-on:click ="pages.navigateTo('help ') "> < i class ="fas fa-question "> </ i > </ button >
252
251
</ div >
253
252
< h2 > Missing Configuration</ h2 >
254
253
< p > It seems that some configuration is missing or invalid.</ p >
@@ -257,9 +256,14 @@ <h2>Missing Configuration</h2>
257
256
or on the < a href ="https://github.com/javalikescript/fcut/releases/download/v0.3.0/ffmpeg-x86_64-windows.zip " target ="_blank "> FCut github</ a > .</ li >
258
257
</ div >
259
258
</ page >
260
- < page name ="about ">
259
+ < page name ="help ">
261
260
< div class ="padded ">
262
261
< button v-on:click ="pages.navigateBack() "> < i class ="fas fa-arrow-left "> </ i > </ button >
262
+ < h2 > Help</ h2 >
263
+ < p > Fast Cut allows to visually cut and join videos then export them losslessly.</ p >
264
+ < p > The binary search helps you to find a cut time quickly,
265
+ use the forward and backward buttons to indicate the cut location,
266
+ the time shows how close you are from the cut point.</ p >
263
267
< h2 > About</ h2 >
264
268
< p > A < a href ="https://github.com/javalikescript/luajls " target ="_blank "> luajls</ a > application, see < a href ="https://github.com/javalikescript/fcut " target ="_blank "> sources</ a > .</ p >
265
269
< p > This application uses the following external software/libraries</ p >
0 commit comments