remove unused build args, use env variables (#14)

docker-compose.dev.yml

@@ -21,8 +21,4 @@ services:
 
   whishper-frontend:
     build: 
-      context: ./frontend
-      args:
-        PUBLIC_API_HOST: ${WHISHPER_HOST}
-        PUBLIC_TRANSLATION_API_HOST: ""
-        PUBLIC_INTERNAL_API_HOST: "http://nginx:80"
+      context: ./frontend

docker-compose.yml

@@ -90,9 +90,9 @@ services:
       - .env
     restart: unless-stopped
     environment:
-      PUBLIC_INTERNAL_API_HOST: "http://nginx:80"
-      PUBLIC_TRANSLATION_API_HOST: ""
-      PUBLIC_API_HOST: ${WHISHPER_HOST:-}
+      INTERNAL_API_HOST: "http://nginx:80"
+      VITE_TRANSLATION_API_HOST: ""
+      VITE_API_HOST: ${WHISHPER_HOST:-}
     depends_on:
       transcription-api:
         condition: service_healthy

frontend/Dockerfile

@@ -1,13 +1,5 @@
 FROM node:alpine as build
 
-ARG PUBLIC_API_HOST
-ARG PUBLIC_TRANSLATION_API_HOST
-ARG PUBLIC_INTERNAL_API_HOST
-
-ENV PUBLIC_API_HOST=$PUBLIC_API_HOST
-ENV PUBLIC_TRANSLATION_API_HOST=$PUBLIC_TRANSLATION_API_HOST
-ENV PUBLIC_INTERNAL_API_HOST=$PUBLIC_INTERNAL_API_HOST
-
 WORKDIR /app
 COPY . .
 RUN yarn
@@ -17,13 +9,6 @@ RUN ls -al
 
 FROM node:alpine as production
 
-ARG PUBLIC_API_HOST
-ARG PUBLIC_TRANSLATION_API_HOST
-ARG PUBLIC_INTERNAL_API_HOST
-
-ENV PUBLIC_API_HOST=$PUBLIC_API_HOST
-ENV PUBLIC_TRANSLATION_API_HOST=$PUBLIC_TRANSLATION_API_HOST
-ENV PUBLIC_INTERNAL_API_HOST=$PUBLIC_INTERNAL_API_HOST
 ENV BODY_SIZE_LIMIT=0
 
 WORKDIR /app

frontend/package.json

@@ -27,6 +27,7 @@
 	},
 	"type": "module",
 	"dependencies": {
+		"dotenv": "^16.3.1",
 		"svelte-french-toast": "^1.2.0"
 	}
 }

frontend/src/lib/components/EditorSegment.svelte

@@ -216,29 +216,29 @@
 		<div
 			bind:textContent={segment.text}
 			on:input={handleKeystrokes}
-			class="border-2 font-mono font-bold rounded-lg p-3 max-w-md bg-base-100"
+			class="max-w-md p-3 font-mono font-bold border-2 rounded-lg bg-base-100"
 			class:border-error={getCps(segment) > 16}
 			contenteditable="true"
 		/>
 	</td>
 	<td>
 		<div>
-			<span class="flex flex-col text-xs flex-grow">
+			<span class="flex flex-col flex-grow text-xs">
 				<span class:text-error={getCps(segment) > 16}>
-					<span class="whitespace-nowrap font-mono font-bold">
+					<span class="font-mono font-bold whitespace-nowrap">
 						CPS: {getCps(segment)}
 					</span>
 				</span>
 				<span>
-					<span class="whitespace-nowrap font-mono font-bold">
+					<span class="font-mono font-bold whitespace-nowrap">
 						Duration: {Math.round((segment.end - segment.start) * 100) / 100}s
 					</span>
 				</span>
 			</span>
 		</div>
 	</td>
 	<td
-		class="space-x-1 flex flex-col items-center justify-center space-y-2 md:space-y-0 align-middle lg:flex-row"
+		class="flex flex-col items-center justify-center space-x-1 space-y-2 align-middle md:space-y-0 lg:flex-row"
 	>
 		<!-- Add above -->
 		<span class="tooltip" data-tip="Insert Above">

frontend/src/lib/components/ModalTranslationForm.svelte

@@ -1,16 +1,15 @@
 <script>
     import { onMount } from 'svelte';
     import toast from 'svelte-french-toast';
-    import { CLIENT_API_HOST } from '$lib/utils';
-    import { PUBLIC_TRANSLATION_API_HOST } from '$env/static/public';
+    import { CLIENT_API_HOST, TRANSLATION_API_HOST } from '$lib/utils';
     export let tr;
 
     let targetLanguage = null;
 
     let availableLanguages = [];
     const getAvailableLangs = () => {
         const fetchLanguages = () => {
-            fetch(`${PUBLIC_TRANSLATION_API_HOST}/languages`)
+            fetch(`${TRANSLATION_API_HOST}/languages`)
             .then(res => res.json())
             .then(data => {
                 if (data) {
@@ -46,15 +45,15 @@
 </script>
 
 <dialog id="modalTranslation" class="modal">
-    <form method="dialog" class="modal-box flex flex-col items-center justify-center">
-        <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
+    <form method="dialog" class="flex flex-col items-center justify-center modal-box">
+        <button class="absolute btn btn-sm btn-circle btn-ghost right-2 top-2">✕</button>
         {#if tr}
-            <h1 class="text-center font-bold mt-2 pb-2">
+            <h1 class="pb-2 mt-2 font-bold text-center">
                 Translate
             </h1>
             <div>
                 <!-- Language picker -->
-                <div class="form-control w-full max-w-xs">
+                <div class="w-full max-w-xs form-control">
                     <label for="target-lan" class="label">
                       <span class="label-text">Target language</span>
                     </label>
@@ -75,7 +74,7 @@
                     </select>
                 </div>
                 <!-- End language picker-->
-                <button on:click={handleTranslate(tr.id)} class="btn btn-active btn-primary mt-5">Translate</button>
+                <button on:click={handleTranslate(tr.id)} class="mt-5 btn btn-active btn-primary">Translate</button>
             </div>
         {/if}
     </form>

frontend/src/lib/utils.js

@@ -1,9 +1,10 @@
 import {transcriptions} from './stores';
-import { PUBLIC_API_HOST } from '$env/static/public';
 import { dev } from '$app/environment';
+import { browser } from '$app/environment';
 
-export const CLIENT_API_HOST = `${dev ? PUBLIC_API_HOST : ""}`;
-export const CLIENT_WS_HOST = `${dev ? PUBLIC_API_HOST.replace("http://", "").replace("https://", "") : ""}`;
+export let CLIENT_API_HOST = browser ? `${dev ? import.meta.env.VITE_API_HOST : ""}` : `${process.env.INTERNAL_API_HOST}`;
+export let CLIENT_WS_HOST = browser ? `${dev ? import.meta.env.VITE_API_HOST.replace("http://", "").replace("https://", "") : ""}` :  `${dev ? process.env.INTERNAL_API_HOST.replace("http://", "").replace("https://", "") : ""}`;
+export let TRANSLATION_API_HOST = browser ? `${dev ? import.meta.env.VITE_TRANSLATION_API_HOST : ""}` : `${dev ? process.env.VITE_TRANSLATION_API_HOST : ""}`;
 
 // URL Validator
 export const validateURL = function (url) {

frontend/src/routes/+layout.js

@@ -1,12 +1,11 @@
 import { transcriptions } from '$lib/stores';
 import { browser, dev } from '$app/environment';
-import { PUBLIC_INTERNAL_API_HOST } from '$env/static/public';
 import { CLIENT_API_HOST } from '$lib/utils';
 
 /** @type {import('./$types').PageLoad} */
 export async function load({ fetch }) {
     // Use different endpoints for server-side and client-side
-    const endpoint = browser ? `${CLIENT_API_HOST}/api/transcriptions` : `${PUBLIC_INTERNAL_API_HOST}/api/transcriptions`;
+    const endpoint = browser ? `${CLIENT_API_HOST}/api/transcriptions` : `${process.env.INTERNAL_API_HOST}/api/transcriptions`;
     console.log(endpoint);
 
     const response = await fetch(endpoint);

frontend/src/routes/editor/[id]/+page.js

@@ -1,6 +1,5 @@
 /** @type {import('./$types').PageLoad} */
 import { currentTranscription } from '$lib/stores';
-import { PUBLIC_INTERNAL_API_HOST } from '$env/static/public';
 import { CLIENT_API_HOST } from '$lib/utils';
 import { browser } from '$app/environment';
 
@@ -9,7 +8,7 @@ export async function load({params}) {
     let id = params.id;
     // Use different endpoints for server-side and client-side
 
-    const endpoint = browser ? `${CLIENT_API_HOST}/api/transcriptions` : `${PUBLIC_INTERNAL_API_HOST}/api/transcriptions`;
+    const endpoint = browser ? `${CLIENT_API_HOST}/api/transcriptions` : `${process.env.INTERNAL_API_HOST}/api/transcriptions`;
     const response = await fetch(`${endpoint}/${id}`);
     const ts = await response.json();
     // Set currentTranscription to the fetched transcription

frontend/src/routes/editor/[id]/+page.svelte

@@ -11,28 +11,29 @@
 	let canPlay = false;
 	$: if(canPlay && video && Math.abs(video.currentTime - $currentVideoPlayerTime) > tolerance) {
 		console.log(video.currentTime, $currentVideoPlayerTime)
+		// When testing in Chrome, it works, just see https://stackoverflow.com/a/67584611
         video.currentTime = $currentVideoPlayerTime;
     }
 </script>
 
 <Toaster />
 {#if $currentTranscription}
-	<div class="grid grid-cols-3 h-screen overflow-hidden">
-		<div class="col-span-1 bg-transparent overflow-hidden">
-			<div class="h-full w-full relative">
+	<div class="grid h-screen grid-cols-3 overflow-hidden">
+		<div class="col-span-1 overflow-hidden bg-transparent">
+			<div class="relative w-full h-full">
 				<video id="video" 
 					   controls
 					   bind:this={video}
-					   on:timeupdate={(e) => $currentVideoPlayerTime.set(e.target.currentTime)}
+					   on:timeupdate={(e) => $currentVideoPlayerTime = e.target.currentTime}
 					   on:canplay={() => canPlay = true}
 					   on:loadedmetadata={() => canPlay = true}
-					   class="absolute top-0 left-0 h-full w-full">
+					   class="absolute top-0 left-0 w-full h-full">
 					<source src="{CLIENT_API_HOST}/api/video/{$currentTranscription.fileName}" type="video/mp4" />
 					<track kind="captions" />
 				</video>
 			</div>
 		</div>
-		<div class="col-span-2 bg-content overflow-auto">
+		<div class="col-span-2 overflow-auto bg-content">
 			<Editor />
 		</div>
 	</div>

frontend/svelte.config.js

@@ -1,6 +1,9 @@
 //import adapter from '@sveltejs/adapter-auto';
 import adapterNode from '@sveltejs/adapter-node';
 import { vitePreprocess } from '@sveltejs/kit/vite';
+import dotenv from 'dotenv';
+
+dotenv.config();
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
   kit: {