Watch videos with subtitles #55: Fix srt parser.

filimo · Nov 7, 2019 · d41d605 · d41d605
1 parent afde4f8
commit d41d605
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 12 deletions.
diff --git a/ReaderTranslator/Components/VideoPlayer/index.html b/ReaderTranslator/Components/VideoPlayer/index.html
@@ -1,9 +1,12 @@
 <html>
    <body>
-      <video controls="" autoplay="" src="videos/Timeless.[S01E01].XviD.LostFilm.[qqss44].mp4" type="video/x-m4v" class="media-document mac video" style="width: 100%;"></video>
+      <video controls="" autoplay="" src="videos/Dark.Matter.s01e01.rus.eng.CasStudio.mp4" type="video/x-m4v" class="media-document mac video" style="width: 100%;"></video>
       <button id="play">Play</button>
       <div style="white-space: pre-line; background-color: black; color: white;font-size: x-large;overflow: auto;height: 500;" id="srt"></div>
       <script type="text/javascript" src="jquery.js"></script>
+      <script type="text/javascript">
+  	    let srtPath = 'videos/Dark.Matter.s01e01.rus.eng.CasStudio.srt'
+      </script>
       <script type="text/javascript" src="index.js"></script>
    </body>
 </html>
diff --git a/ReaderTranslator/Components/VideoPlayer/index.js b/ReaderTranslator/Components/VideoPlayer/index.js
@@ -14,13 +14,13 @@
 
   var parseSRT = function(f) {
     var matches
-    var pattern = /(\d+)\n([\d:,]+)\s+-{2}\>\s+([\d:,]+)\n([\s\S]*?(?=\n{2}|$))/gm;
+    var pattern = /(\d+)\n([\d:,]+)\s+-{2}\>\s+([\d:,]+)\n([\s\S]*?\n(?=\n{2}|$))/gm;
     var toLineObj = function(group) {
       return {
         line: group[1],
         start: toTime(group[2]),
         end: toTime(group[3]),
-        content: group[4]
+        content: group[4].replace(/\n/gm, ' ')
       };
     }
 
@@ -39,7 +39,7 @@
   }
 
   let start = async function() {
-    let srtData = await $.get('videos/Timeless - 1x01 - Pilot.HDTV.KILLERS.en.srt')
+    let srtData = await $.get(srtPath)
     let srt = parseSRT(srtData)
 
     let $srt = document.querySelector('#srt')
@@ -60,7 +60,7 @@
     $video.ontimeupdate = function() {
         let time = parseInt($video.currentTime)
         let elm = srt.find(item=> {
-          return time >= item.start && time <= item.end
+          return time >= item.start && time < item.end
         })
         if(elm) {
           let $elm = $srt.querySelector(`[start="${elm.start}"]`)

diff --git a/ReaderTranslator/Components/ViewRepresentable/Scripts/reader-translator.js b/ReaderTranslator/Components/ViewRepresentable/Scripts/reader-translator.js
@@ -300,20 +300,39 @@
             }
         }
 
-        $play.addEventListener('click', event => play(event))                      
+        $play.addEventListener('click', event => play(event))   
+
         window.addEventListener('keydown', event => {
-            if(event.keyCode == 80) play(event) // 'p' key
+            if(event.keyCode == 191) play(event) // '?' key
             if(event.keyCode == 188) { // "<" key
                 event.preventDefault()
                 let $elm = document.querySelector('[current=true]')
                 let $prevElm = $elm.previousElementSibling
 
-                let text = `${($elm.prevElm || {}).textContent} ${$elm.textContent}`
+                if($prevElm) {
+                    let text = `${$prevElm.textContent} ${$elm.textContent}`
 
-                $video.pause()
-                sendIn100('selectionchange', 'document', event, text)
-                if($elm.previousElementSibling) $elm.previousElementSibling.click()
-            }                
+                    $video.pause()
+                    sendIn100('selectionchange', 'document', event, text)
+                    $prevElm.click()
+                }
+            }
+
+            if(event.key == 'ArrowLeft') {
+                event.preventDefault() //
+                let $elm = document.querySelector('[current=true]')
+                let $prevElm = $elm.previousElementSibling
+
+                if($prevElm) $prevElm.click()
+            }
+
+            if(event.key == 'ArrowRight') {
+                event.preventDefault()
+                let $elm = document.querySelector('[current=true]')
+                let $nextElm = $elm.nextElementSibling
+
+                if($nextElm) $nextElm.click()
+            }
         })
     })
  })()