Coder/whishper
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
pluja
2023-09-29 19:23:15 +02:00
parent edbc38b535
commit 21ac9ae51a
12 changed files with 63 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/lib/components/EditorSegment.svelte
View File

@@ -216,21 +216,21 @@
<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>
@@ -238,7 +238,7 @@
</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">

15
frontend/src/lib/components/ModalTranslationForm.svelte
View File

@@ -1,8 +1,7 @@
<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;
@@ -10,7 +9,7 @@
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>

7
frontend/src/lib/utils.js
View File

@@ -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) {

3
frontend/src/routes/+layout.js
View File

@@ -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);

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

@@ -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

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

@@ -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>