idk what google is doing

build.sh

@@ -9,5 +9,6 @@ docker build -f buscribe-api/Dockerfile -t buscribe-api:$VERSION .
 
 docker build -f docker-less/Dockerfile -t lessc .
 docker run --rm -v "$(pwd)"/buscribe-web:/buscribe-web lessc /buscribe-web/style.less > buscribe-web/style.css
+docker run --rm -v "$(pwd)"/professor:/professor lessc /professor/style.less > professor/style.css
 
 docker build -f nginx/Dockerfile -t buscribe-web:$VERSION .

nginx/Dockerfile

@@ -1,4 +1,5 @@
 FROM nginx:latest
 
 COPY buscribe-web /usr/share/nginx/html/buscribe
+COPY professor /usr/share/nginx/html/professor
 COPY nginx/nginx.conf /etc/nginx/nginx.conf

nginx/nginx.conf

@@ -45,6 +45,9 @@ http {
         location /buscribe {
             alias /usr/share/nginx/html/buscribe;
         }
+        location /professor {
+            alias /usr/share/nginx/html/professor;
+        }
 
         location /buscribe/loadingreadyrun/json { proxy_pass http://buscribeapilrr:8010/buscribe/json; }
         location /buscribe/desertbus/json { proxy_pass http://buscribeapidb:8010/buscribe/json; }

professor/professor.html

@@ -15,7 +15,7 @@
 
     <script src="script.js"></script>
 
-
+<!--    <script src="jsrsasign-all-min.js" type="application/javascript"></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>-->
 
@@ -35,6 +35,24 @@
     </video>
 </div>
 
+<!--<div id="g_id_onload"-->
+<!--     data-client_id="164084252563-kaks3no7muqb82suvbubg7r0o87aip7n.apps.googleusercontent.com"-->
+<!--     data-context="signin"-->
+<!--     data-ux_mode="popup"-->
+<!--     data-callback="loggedIn">-->
+<!--</div>-->
+
+<!--<div class="g_id_signin"-->
+<!--     data-type="standard"-->
+<!--     data-shape="rectangular"-->
+<!--     data-theme="outline"-->
+<!--     data-text="signin_with"-->
+<!--     data-size="large"-->
+<!--     data-logo_alignment="left">-->
+<!--</div>-->
+
+<div id="googleLoginButton"></div>
+
 <div id="speakers">
     <label for="speaker_input">Speakers</label><input id="speaker_input">
 </div>
@@ -47,6 +65,9 @@
 <button id="submit_button" onclick="submit()" type="button">Submit</button><span id="update_indicator"></span>
 
 <script src="video.js/dist/video.min.js"></script>
-
+<script src="https://accounts.google.com/gsi/client" async defer></script>
+<script>
+    window.onGoogleLibraryLoad = doGoogle
+</script>
 </body>
 </html>

professor/script.js

@@ -27,13 +27,37 @@ function pageReady() {
     const bgOpacitySelector = document.querySelector('.vjs-bg-opacity > select');
     bgOpacitySelector.value = "0.5"
 
-    fetch(`//localhost:8005/professor/line/${line_id}`)
+    fetch(`//localhost:8011/professor/line/${line_id}`)
         .then(response => response.json())
         .then(fillLineInfo)
         .then(initializePlayer);
 
 }
 
+function doGoogle() {
+    google.accounts.id.initialize({
+        client_id: "164084252563-kaks3no7muqb82suvbubg7r0o87aip7n.apps.googleusercontent.com",
+        callback: loggedIn,
+        auto_select: true
+    });
+    google.accounts.id.renderButton(
+        document.getElementById("googleLoginButton"),
+        {theme: "outline", size: "large"}  // customization attributes
+    );
+    google.accounts.id.prompt(); // also display the One Tap dialog
+}
+
+function loggedIn(response) {
+
+    // credentials = parseJwt(response.credential)
+    // TODO: add specifiers
+    document.cookie = `credentials=${response.credential}`;
+
+    document.getElementById("googleLoginButton").style.display = "none";
+
+    console.log(response);
+}
+
 function fillLineInfo(line_json) {
     // document.getElementById("original_transcription").innerText = line_json.line_data.text;
     line = line_json
@@ -45,7 +69,7 @@ function fillLineInfo(line_json) {
 
 function initializePlayer() {
     videojs.getPlayer("player").src([
-        {src: `//localhost:8005/professor/line/${line_id}/playlist.m3u8`}
+        {src: `//localhost:8011/professor/line/${line_id}/playlist.m3u8`}
     ]);
     videojs.getPlayer("player").addRemoteTextTrack({
         kind: "captions",
@@ -73,7 +97,7 @@ async function submit() {
                 }
             }
 
-            return await fetch("//localhost:8005/professor/speaker",
+            return await fetch("//localhost:8011/professor/speaker",
                 {
                     method: "PUT",
                     headers: {
@@ -86,7 +110,7 @@ async function submit() {
                     .pop(), 10));
         }));
 
-    fetch(`//localhost:8005/professor/line/${line_id}`,
+    fetch(`//localhost:8011/professor/line/${line_id}`,
         {
             method: "POST",
             headers: {
@@ -103,7 +127,7 @@ async function submit() {
 }
 
 $(function () {
-    fetch("//localhost:8005/professor/speaker")
+    fetch("//localhost:8011/professor/speaker")
         .then(response => response.json())
         .then(function (speakers_json) {
             speakers = speakers_json;
@@ -152,4 +176,17 @@ $(function () {
             }
         )
 
-});
+});
+
+function parseJwt(token) {
+    const base64Url = token.split('.')[1];
+    const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
+    const jsonPayload = decodeURIComponent(
+        atob(base64)
+            .split('')
+            .map(function (c) {
+                return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
+            }).join(''));
+
+    return JSON.parse(jsonPayload);
+}