Merge pull request #23 from jrafaaael/fix/sort-descending

fix: keep latest videos on top of recording list

Author: jrafaaael

src/lib/utils/opfs.ts

@@ -0,0 +1,18 @@
+export async function rename(oldHandle: FileSystemDirectoryHandle, newName: string) {
+	const root = await navigator.storage.getDirectory();
+	const newFolder = await root.getDirectoryHandle(newName, {
+		create: true
+	});
+
+	for await (const [filename] of oldHandle) {
+		const oldFile = await (await oldHandle.getFileHandle(filename)).getFile();
+		const newFile = await newFolder.getFileHandle(filename, { create: true });
+		const writable = await newFile.createWritable();
+
+		await writable.write(oldFile);
+
+		await writable.close();
+	}
+
+	await oldHandle.remove({ recursive: true });
+}

src/routes/(recorder)/+page.svelte

@@ -13,8 +13,14 @@
 		if (!file) return;
 		if (!file.type.includes('video')) return;
 
+		const folderName = new Date().getTime().toString();
 		const filename = file.name;
-		const folderName = file.name.split('.').slice(0, -1).join('.');
+		const filenameWithoutExtension = filename.split('.').slice(0, -1).join('.');
+		const info = {
+			name: filenameWithoutExtension
+		};
+
+		localStorage.setItem(folderName, JSON.stringify(info));
 
 		await saveFile(file, `${folderName}/${filename}`);
 		await goto(folderName);

src/routes/(recorder)/components/recording-list.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
+	import { rename } from '$lib/utils/opfs';
 	import Trash from '$lib/components/icons/trash.svelte';
 
 	let recordings: string[] = [];
@@ -22,12 +23,46 @@
 	}
 
 	onMount(async () => {
-		recordings = await getRecordings();
+		const root = await navigator.storage.getDirectory();
+		const folders: string[] = await getRecordings();
+
+		recordings = await Promise.all(
+			folders.map(async (name) => {
+				/**
+				 * Previously, recordings that were drag-n-drop'd in Videmo were saved with their original filename (can be alphanumeric). However, when users record directly from Chrome,
+				 * their filename is the recording date in UTC (is a number). This is a problem because OPFS sort files alphabetically, so:
+				 * 1. some recordings that were drag-n-drop'd are listed at top of recording list, even if the last user video was recorded directly from Chrome.
+				 * 2. some recordings that were drag-n-drop'd are listed at bottom of recording list, even if this was the latest video in Videmo.
+				 * With this conditional, I rename folders with original filename from drag-n-drop'd recordings and save it with the current date in UTC as filename
+				 * to keep compatibility with the old behavior. However, this create a new problem: users will search their recordings with original name because
+				 * those recordings were saved with this behavior. To solve this, in their associated object value in localStorage, I create a new key called `name` to save the original name.
+				 * This allows me to develop some new features:
+				 * 1. rename recordings
+				 * 2. sort recordings alphabetically and by date
+				 */
+				if (isNaN(Number(name))) {
+					const folder = await root.getDirectoryHandle(name);
+					const newFolderName = new Date().getTime().toString();
+					const info = JSON.parse(localStorage.getItem(name) ?? '{}');
+					const updated = { ...info, name };
+
+					await rename(folder, newFolderName);
+
+					localStorage.removeItem(name);
+					localStorage.setItem(newFolderName, JSON.stringify(updated));
+
+					return newFolderName;
+				}
+
+				return name;
+			})
+		);
 	});
 </script>
 
 {#each recordings as record}
-	{@const folderName = isNaN(Number(record)) ? record : new Date(+record).toLocaleString()}
+	{@const recordingInfo = JSON.parse(localStorage.getItem(record) ?? '{}')}
+	{@const folderName = recordingInfo.name ?? new Date(+record).toLocaleString()}
 	<article class="flex flex-col gap-2">
 		<a href="/{record}">
 			<span class="w-full aspect-video bg-white/5 border border-white/5 rounded-md inline-block" />

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

@@ -7,7 +7,10 @@
 	import { edits } from './stores/edits.store';
 	import { videoStatus } from './stores/video-status.store';
 	import { DEFAULT_VALUE as DEFAULT_BACKGROUND, background } from './stores/background.store';
-	import { appearence } from './stores/general-appearance.store';
+	import {
+		DEFAULT_VALUE as DEFAULT_APPEARENCE,
+		appearence
+	} from './stores/general-appearance.store';
 	import { zooms } from './stores/zooms.store';
 	import Header from './components/header.svelte';
 	import Toolbox from './components/toolbox/toolbox.svelte';
@@ -29,15 +32,11 @@
 				? JSON.parse(localStorage.getItem(folderName)!)
 				: null;
 
-			if (values !== null) {
-				zooms.load(values.zooms);
-				$background = values.background;
-				$appearence = values.appearence;
-				$edits = values.trimmings;
-			} else {
-				zooms.reset();
-				$background = DEFAULT_BACKGROUND!;
-				appearence.reset();
+			zooms.load(values?.zooms ?? []);
+			$background = values?.background ?? DEFAULT_BACKGROUND;
+			$appearence = values?.appearence ?? DEFAULT_APPEARENCE;
+			if (values?.trimmings) {
+				$edits = values?.trimmings;
 			}
 
 			const root = await navigator.storage.getDirectory();
@@ -50,7 +49,7 @@
 				const duration = await getBlobDuration(mp4);
 
 				recording.set({ id: '1', url: mp4, duration });
-				if (!values) {
+				if ($edits.endAt > duration) {
 					edits.set({ startAt: 0, endAt: duration });
 				}
 			}

src/routes/[id]/components/header.svelte

@@ -12,9 +12,9 @@
 
 	export let getFrameAsImage: () => string;
 	export let getMP4: () => Promise<string>;
-	const folderName = isNaN(Number(+$page.params.id))
-		? $page.params.id
-		: new Date(+$page.params.id).toLocaleString();
+	const folderId = $page.params.id;
+	const recordingInfo = JSON.parse(localStorage.getItem(folderId) ?? '{}');
+	const folderName = recordingInfo.name ?? new Date(+folderId).toLocaleString();
 	let extension = writable(EXPORT_OPTIONS.at(0));
 	let isExporting = false;
 

src/routes/[id]/stores/general-appearance.store.ts

@@ -1,6 +1,6 @@
 import { writable } from 'svelte/store';
 
-const DEFAULT_VALUE = {
+export const DEFAULT_VALUE = {
 	padding: 24,
 	cornerRadius: 12,
 	shadow: {