4141 | {{ $t("startReviewing") }}
4242 div( v-if ="stage === 'review'" )
4343 textarea.uk-textarea ( rows ="20" , v-model ="subtitleReview" )
44- vk-button.uk-margin ( type ="primary" , @click ="saveFile" )
45- | {{ $t("saveFile") }}
44+ .uk-margin
45+ vk-button( @click ="updatePreview" )
46+ | Update Preview
47+ .uk-margin
48+ vk-button( type ="primary" , @click ="saveFile" )
49+ | {{ $t("saveFile") }}
4650 a.hidden ( ref ="download" , href ="" )
4751 .panel
4852 input.hidden (
5256 @change ="readVideo" )
5357 vk-button( @click ="loadVideo" , v-if ="stage === 'prepare'" )
5458 | {{ $t("loadVideo") }}
55- video.video.uk-margin (
56- ref ="video" ,
57- src ="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" ,
58- controls )
59+ video.video #player .uk-margin ( ref ="video" , controls )
60+ source( type ="video/mp4" , ref ="source" , src ="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" )
61+ track( default , kind ="subtitles" , label ="Default" , ref ="caption" , src ="/static/empty.vtt" )
5962 shortcut( v-show ="stage === 'edit'" )
6063</template >
6164
6265<script >
66+ import VTTConverter from ' srt-webvtt'
67+ import Plyr from ' plyr' // Firefox CC is buggy.
68+
6369import Navbar from ' ./components/Navbar'
6470import Shortcut from ' ./components/Shortcut'
6571
@@ -73,6 +79,7 @@ export default {
7379 return {
7480 modalShow: false ,
7581 modalText: ' '
82+ player: new Plyr (' #player'
7683 stage: ' prepare'
7784 subtitleText: ' '
7885 subtitles: [],
@@ -115,7 +122,7 @@ export default {
115122 readVideo (evt ) {
116123 const filename = evt .target .files [0 ];
117124 const url = URL .createObjectURL (filename);
118- this .$refs .video .src = url;
125+ this .$refs .source .src = url;
119126 this .$refs .video .load ();
120127 },
121128 startEdit () {
@@ -133,7 +140,9 @@ export default {
133140 startReview () {
134141 window .removeEventListener (' keypress' this .keyHandler );
135142 this .stage = ' review'
143+ this .$refs .video .currentTime = 0 ;
136144 this .generateSubtitle ();
145+ this .updatePreview ();
137146 },
138147 keyHandler (e ) {
139148 const pressed = String .fromCharCode (e .keyCode ).toLowerCase ();
@@ -192,12 +201,12 @@ export default {
192201 },
193202 timeFormat (secs ) {
194203 if (secs === null ) {
195- return ' 0:0:0,0 '
204+ return ' 00:00:00,000 '
196205 }
197- const hour = Math .floor (secs / 60 / 60 );
198- const min = Math .floor ((secs / 60 ) % 60 );
199- const sec = Math .floor (secs % 60 );
200- const mil = Math .floor ((secs * 1000 ) % 1000 );
206+ const hour = ` ${ Math .floor (secs / 60 / 60 ) } ` . padStart ( 2 , ' 0 '
207+ const min = ` ${ Math .floor ((secs / 60 ) % 60 ) } ` . padStart ( 2 , ' 0 '
208+ const sec = ` ${ Math .floor (secs % 60 ) } ` . padStart ( 2 , ' 0 '
209+ const mil = ` ${ Math .floor ((secs * 1000 ) % 1000 ) } ` . padStart ( 3 , ' 0 '
201210 return ` ${ hour} ${ min} ${ sec} ${ mil} `
202211 },
203212 generateSubtitle () {
@@ -208,6 +217,23 @@ export default {
208217 this .subtitleReview += ` ${ this .subtitles [i]} \n\n `
209218 }
210219 },
220+ async updatePreview () {
221+ const blob = new Blob (
222+ [this .subtitleReview ],
223+ {
224+ type: ' text/plain;charset=utf-8'
225+ },
226+ );
227+ try {
228+ const converter = new VTTConverter (blob);
229+ const url = await converter .getURL ();
230+ this .$refs .caption .setAttribute (' src'
231+ this .$refs .video .load ();
232+ } catch (_e) {
233+ this .modalShow = true ;
234+ this .modalText = ' SRT file is invalid.'
235+ }
236+ },
211237 saveFile () {
212238 const a = this .$refs .download ;
213239 const file = new Blob ([this .subtitleReview ], { type: ' text/plain'
0 commit comments