Merge pull request #78 from hyperaudio/73-downloadable-captions

73 downloadable captions
hyperaudio · Mar 15, 2022 · 9827b6f · 9827b6f
2 parents 2049011 + cbc5816
commit 9827b6f
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 5 deletions.
diff --git a/wp-hyperaudio/hyperaudio-admin.php b/wp-hyperaudio/hyperaudio-admin.php
@@ -15,6 +15,7 @@ function hyperaudio_load_admin_script($hook)
 		return;
 	}
 
+  wp_enqueue_script('caption', plugins_url('/js/caption.js', __FILE__), false, '1.0.0', false);
   wp_enqueue_script( 'converter', plugin_dir_url( __FILE__ ) . '/js/converter.js', array( 'jquery' ), '1.0.0', true );
 
 }
@@ -143,6 +144,21 @@ function hyperaudio_options_page()
       padding: 4px;
     }
 
+    .sub-holder {
+      font-size: 80%;
+      padding-top: 16px;
+      display: none;
+    }
+
+    .sub-btn {
+      margin-right: 16px;
+    }
+
+    .sub-download {
+      padding-right: 16px;
+      display: none;
+    }
+
   </style>
 </head>
 <body>
@@ -266,13 +282,18 @@ function hyperaudio_options_page()
     <div class="box target-content">
       <textarea id="htranscript" class="entry-content" rows="40" cols="54"></textarea>
       <div style="display:none" id="rtranscript" contentEditable></div>
-    </div>
 
-  </div>
+      <div id="generate-captions" class="sub-holder">
+        <button class="sub-btn" id="gen-subs">Generate Captions</button>
+        <a class="sub-download" id="download-vtt" href="" download="hyperaudio.vtt">Download WebVTT ⬇</a>
+        <a class="sub-download" id="download-srt" href="" download="hyperaudio.srt">Download SRT ⬇</a>
+      </div>
 
+    </div>
+
+  </div>
+
   <div class="footer">
   </div>
 </div>
-<?php } ?>
-
-
+<?php } ?>
diff --git a/wp-hyperaudio/js/converter.js b/wp-hyperaudio/js/converter.js
@@ -55,6 +55,27 @@ $(document).ready(function() {
 
   function renderTranscript() {
     $('#rtranscript').html($('#htranscript').val());
+
+    //document.getElementById("gen-subs").addEventListener("click", genSubs);
+    $('#gen-subs').click(genSubs);
+    //document.getElementById("generate-captions").style.display = 'inline';
+    $('#generate-captions').show();
+
+    function genSubs(){
+      var cap1 = caption();
+      var subs = cap1.init("rtranscript", null, null, null);
+      //console.log(subs.vtt);
+      //console.log(subs.srt);
+      //var downloadLinkVtt = document.getElementById("download-vtt");
+      //downloadLinkVtt.setAttribute("href", 'data:text/vtt,'+encodeURIComponent(subs.vtt));
+      //downloadLinkVtt.style.display = 'inline';
+      $('#download-vtt').attr("href", 'data:text/vtt,'+encodeURIComponent(subs.vtt)).show();
+
+      //var downloadLinkSrt = document.getElementById("download-srt");
+      //downloadLinkSrt.setAttribute("href", 'data:text/vtt,'+encodeURIComponent(subs.srt));
+      //downloadLinkSrt.style.display = 'inline';
+      $('#download-srt').attr("href", 'data:text/vtt,'+encodeURIComponent(subs.srt)).show();
+    };
   }
 
   String.prototype.replaceAll = function(search, replacement) {