small design decisions
This commit is contained in:
parent
48f3928c6d
commit
35529895ed
@ -1,65 +1,78 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { getKeyVault, loggedIn } from "$lib/auth";
|
import { getKeyVault, loggedIn } from "$lib/auth";
|
||||||
import { decrypt, uint8ToHex } from "$lib/crypto";
|
import { decrypt, uint8ToHex } from "$lib/crypto";
|
||||||
import { onMount } from "svelte";
|
import { onMount } from "svelte";
|
||||||
|
|
||||||
let entryUrls = $state<any[] | null>(null);
|
let entryUrls = $state<any[] | null>(null);
|
||||||
let videoSrc = $state<string | null>(null);
|
let videoSrc = $state<string | null>(null);
|
||||||
|
|
||||||
onMount(() => {
|
onMount(() => {
|
||||||
if (typeof window !== 'object') return;
|
if (typeof window !== "object") return;
|
||||||
|
|
||||||
if (!loggedIn()) {
|
if (!loggedIn()) {
|
||||||
window.location.href = '/login';
|
window.location.href = "/login";
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const vault = getKeyVault();
|
const vault = getKeyVault();
|
||||||
fetch(`/api/log?pubkey=${encodeURIComponent(uint8ToHex(vault!.pubKey))}`).then(async res => {
|
fetch(
|
||||||
if (!res.ok) return;
|
`/api/log?pubkey=${encodeURIComponent(uint8ToHex(vault!.pubKey))}`,
|
||||||
|
).then(async (res) => {
|
||||||
|
if (!res.ok) return;
|
||||||
|
|
||||||
entryUrls = (await res.json() as any[]).sort((a, b) => b.date.localeCompare(a.date));
|
entryUrls = ((await res.json()) as any[]).sort((a, b) =>
|
||||||
console.log(entryUrls);
|
b.date.localeCompare(a.date),
|
||||||
});
|
);
|
||||||
|
console.log(entryUrls);
|
||||||
});
|
});
|
||||||
|
});
|
||||||
|
|
||||||
const update = async (date: string) => {
|
const update = async (date: string) => {
|
||||||
videoSrc = '';
|
videoSrc = "";
|
||||||
|
|
||||||
const entry = entryUrls?.find((e) => e.date === date);
|
|
||||||
if (!entry) return;
|
|
||||||
|
|
||||||
const res = await fetch(entry.url);
|
const entry = entryUrls?.find((e) => e.date === date);
|
||||||
if (!res.ok) return;
|
if (!entry) return;
|
||||||
const cipherBuffer = await res.bytes();
|
|
||||||
console.log(cipherBuffer);
|
|
||||||
|
|
||||||
const vault = getKeyVault()!;
|
const res = await fetch(entry.url);
|
||||||
const videoData = await decrypt(vault.symmKey, new Uint8Array(cipherBuffer));
|
if (!res.ok) return;
|
||||||
|
const cipherBuffer = await res.bytes();
|
||||||
|
console.log(cipherBuffer);
|
||||||
|
|
||||||
const blob = new Blob([videoData], { type: 'video/webm' });
|
const vault = getKeyVault()!;
|
||||||
videoSrc = URL.createObjectURL(blob);
|
const videoData = await decrypt(
|
||||||
};
|
vault.symmKey,
|
||||||
|
new Uint8Array(cipherBuffer),
|
||||||
|
);
|
||||||
|
|
||||||
|
const blob = new Blob([videoData], { type: "video/webm" });
|
||||||
|
videoSrc = URL.createObjectURL(blob);
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
<svelte:head>
|
<svelte:head>
|
||||||
<title>Somri Wormhole - Go back in time!</title>
|
<title>Sonri Wormhole - Go back in time!</title>
|
||||||
</svelte:head>
|
</svelte:head>
|
||||||
|
|
||||||
<div class="rh-screen p-4 flex flex-col items-center">
|
<div class="absolute z-1 top-0 left-0 right-0 m-auto w-fit bg-white rounded-3xl mt-6">
|
||||||
<div class="shrink-0">
|
<input
|
||||||
<input type="date"
|
type="date"
|
||||||
class="px-4 py-2 rounded-full bg-white min-w-0"
|
class="px-4 py-2 rounded-full bg-white min-w-0"
|
||||||
onchange={(e) => update((e.target as any).value)}>
|
onchange={(e) => update((e.target as any).value)}
|
||||||
</div>
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="grow w-full pt-3 flex flex-col items-center justify-items-stretch overflow-hidden">
|
<div class="rh-screen p-4 flex flex-col items-center">
|
||||||
<video src={videoSrc} controls
|
<div
|
||||||
class="h-full w-full min-w-0 min-h-0 max-w-[70vh] object-cover rounded-[40px] bg-[#303030]">
|
class="grow w-full flex flex-col items-center justify-items-stretch overflow-hidden"
|
||||||
<track kind="captions" />
|
>
|
||||||
</video>
|
<video
|
||||||
</div>
|
src={videoSrc}
|
||||||
|
controls
|
||||||
|
class="h-full w-full min-w-0 min-h-0 max-w-[70vh] object-cover rounded-[40px] bg-[#303030]"
|
||||||
|
>
|
||||||
|
<track kind="captions" />
|
||||||
|
</video>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- <button class="fixed bg-[#e14c2f] rounded-xl top-3 right-3 p-1 cursor-pointer">
|
<!-- <button class="fixed bg-[#e14c2f] rounded-xl top-3 right-3 p-1 cursor-pointer">
|
||||||
|
@ -3,6 +3,8 @@
|
|||||||
import { deriveKeyVault, encodeKeyVault } from "$lib/crypto";
|
import { deriveKeyVault, encodeKeyVault } from "$lib/crypto";
|
||||||
import { onMount } from "svelte";
|
import { onMount } from "svelte";
|
||||||
|
|
||||||
|
let loading = $state(false);
|
||||||
|
|
||||||
const onSubmit = async (e: SubmitEvent) => {
|
const onSubmit = async (e: SubmitEvent) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
|
||||||
@ -10,9 +12,14 @@
|
|||||||
const passkey = formData.get('passkey') as string;
|
const passkey = formData.get('passkey') as string;
|
||||||
if (!passkey) return;
|
if (!passkey) return;
|
||||||
|
|
||||||
|
loading = true;
|
||||||
await login(passkey, !!formData.get('persistent'));
|
try {
|
||||||
window.location.href = '/today';
|
await login(passkey, !!formData.get('persistent'));
|
||||||
|
window.location.href = '/today';
|
||||||
|
return;
|
||||||
|
} finally {
|
||||||
|
loading = false;
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
onMount(() => {
|
onMount(() => {
|
||||||
@ -25,11 +32,11 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<svelte:head>
|
<svelte:head>
|
||||||
<title>Somri Login</title>
|
<title>Sonri Login</title>
|
||||||
</svelte:head>
|
</svelte:head>
|
||||||
|
|
||||||
<div class="absolute left-0 right-0 m-auto p-6 max-w-[400px] font-serif">
|
<div class="absolute left-0 right-0 m-auto p-6 max-w-[400px] font-serif">
|
||||||
<form method="POST" class="p-6 rounded-3xl bg-white flex flex-col gap-2"
|
<form method="POST" class={`p-6 rounded-3xl bg-white flex flex-col gap-2 ${loading ? 'blur-md' : ''} duration-300`}
|
||||||
onsubmit={onSubmit}
|
onsubmit={onSubmit}
|
||||||
>
|
>
|
||||||
<h1 class="text-3xl font-bold p-2">Login</h1>
|
<h1 class="text-3xl font-bold p-2">Login</h1>
|
||||||
@ -37,7 +44,7 @@
|
|||||||
<input type="password" name="passkey" placeholder="Passkey"
|
<input type="password" name="passkey" placeholder="Passkey"
|
||||||
class="text-xl px-3 py-1 rounded-3xl outline-none bg-[#00000010]">
|
class="text-xl px-3 py-1 rounded-3xl outline-none bg-[#00000010]">
|
||||||
|
|
||||||
<div class="p-2">
|
<div class="p-2 pt-0">
|
||||||
<input id="persistent" name="persistent" type="checkbox">
|
<input id="persistent" name="persistent" type="checkbox">
|
||||||
<label for="persistent">Stay signed in</label>
|
<label for="persistent">Stay signed in</label>
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user