Tagging API

3 years ago · c53af71e99
parent 6e81bbf629
commit c53af71e99
5 changed files with 108 additions and 1 deletions
--- a/professor-api/professor_api/professor_api.py
+++ b/professor-api/professor_api/professor_api.py
@ -1,8 +1,9 @@
 import re
+import urllib.parse

 import flask
 from common import database
-from flask import jsonify, request
+from flask import jsonify, request, copy_current_request_context
 from psycopg2.extras import execute_values

 app = flask.Flask('buscribe')
@ -22,6 +23,26 @@ def get_line(line_id):
                "line_data": line.transcription_json}


+@app.route('/professor/line/<int:line_id>/playlist.m3u8', methods=["GET"])
+def get_playlist(line_id):
+    db_conn = app.db_manager.get_conn()
+
+    line = database.query(db_conn, "SELECT * FROM buscribe_transcriptions WHERE id = %(id)s;", id=line_id).fetchone()
+
+    if line is None:
+        return "Line not found.", 404
+    else:
+        start_time_iso = line.start_time.isoformat()
+        end_time_iso = line.end_time.isoformat()
+        duration = line.end_time - line.start_time
+        return f"""#EXTM3U
+#EXT-X-TARGETDURATION:{duration.total_seconds()}
+#EXT-X-PROGRAM-DATE-TIME:{start_time_iso}
+#EXTINF:{duration.total_seconds()}
+//localhost/cut/desertbus/source.ts?start={urllib.parse.quote_plus(start_time_iso)}&end={urllib.parse.quote_plus(end_time_iso)}&type=rough&allow_holes=true
+#EXT-X-ENDLIST"""
+
+
@app.route('/professor/line/<int:line_id>', methods=["POST"])
 def update_line(line_id):
    db_conn = app.db_manager.get_conn()
--- a/professor/constants.less
+++ b/professor/constants.less
@ -0,0 +1,2 @@
+@sans-serif: Tahoma, sans-serif;
+@serif: Georgia, Garamond, serif;
--- a/professor/professor.html
+++ b/professor/professor.html
@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Buscribe -- Professor</title>
+
+    <link href="video.js/dist/video-js.min.css" rel="stylesheet">
+    <link href="videojs-hls-quality-selector/dist/videojs-hls-quality-selector.css" rel="stylesheet">
+
+    <link href="style.css" rel="stylesheet">
+
+    <script src="script.js"></script>
+
+    <!--    <script src="videojs-contrib-quality-levels/dist/videojs-contrib-quality-levels.min.js"></script>-->
+    <!--    <script src="videojs-hls-quality-selector/dist/videojs-hls-quality-selector.min.js"></script>-->
+
+</head>
+<body onload="pageReady()">
+
+<div id="PlayerContainer">
+    <video id="player"
+           class="video-js"
+           controls
+           preload="auto"
+           width="900"
+           height="420"
+    >
+        <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that
+            <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
+    </video>
+</div>
+
+<div id="speakers">
+
+</div>
+
+<div id="transcription">
+    <p id="original_transcription"></p>
+</div>
+
+<script src="video.js/dist/video.min.js"></script>
+
+</body>
+</html>
--- a/professor/script.js
+++ b/professor/script.js
@ -0,0 +1,34 @@
+function pageReady() {
+
+    const params = new URLSearchParams(document.location.search.substring(1));
+    line_id = parseInt(params.get("line"), 10);
+
+    videojs("player", {
+            // src: "test.m3u8",
+            controls: true,
+            autoplay: false,
+            width: 900,
+            height: 420,
+            playbackRates: [0.5, 1, 1.25, 1.5, 2],
+            inactivityTimeout: 0,
+            controlBar: {
+                fullscreenToggle: true,
+                volumePanel: {
+                    inline: false,
+                },
+            }
+        },
+        function () {
+            this.src({src: `//localhost:8005/professor/line/${line_id}/playlist.m3u8`});
+        });
+
+    fetch(`//localhost:8005/professor/line/${line_id}`)
+        .then(response => response.json())
+        .then(fillLineInfo)
+
+}
+
+function fillLineInfo(line_json) {
+    document.getElementById("original_transcription").innerText = line_json.line_data.text
+
+}
--- a/professor/style.less
+++ b/professor/style.less
@ -0,0 +1,6 @@
+body {
+  color: aliceblue;
+  background: dimgray;
+
+  max-width: 900px;
+}