simplify specifying drive ids

website/src/lib/components/embedding/Embedding.svelte

@@ -20,7 +20,11 @@
     import type { GPXFile } from 'gpx';
     import { selection } from '$lib/components/file-list/Selection';
     import { ListFileItem } from '$lib/components/file-list/FileList';
-	import { allowedEmbeddingBasemaps, type EmbeddingOptions } from './Embedding';
+    import {
+        allowedEmbeddingBasemaps,
+        getFilesFromEmbeddingOptions,
+        type EmbeddingOptions
+    } from './Embedding';
     import { mode, setMode } from 'mode-watcher';
 
     $embedding = true;
@@ -55,7 +59,7 @@
         });
 
         let downloads: Promise<GPXFile | null>[] = [];
-		options.files.forEach((url) => {
+        getFilesFromEmbeddingOptions(options).forEach((url) => {
             downloads.push(
                 fetch(url)
                     .then((response) => response.blob())
@@ -96,7 +100,8 @@
                     );
 
                     ids.push(id);
-					let fileBounds = statistics.getStatisticsFor(new ListFileItem(id)).global.bounds;
+                    let fileBounds = statistics.getStatisticsFor(new ListFileItem(id)).global
+                        .bounds;
 
                     bounds.southWest.lat = Math.min(bounds.southWest.lat, fileBounds.southWest.lat);
                     bounds.southWest.lon = Math.min(bounds.southWest.lon, fileBounds.southWest.lon);
@@ -138,7 +143,10 @@
             }
         });
 
-		if (options.basemap !== $currentBasemap && allowedEmbeddingBasemaps.includes(options.basemap)) {
+        if (
+            options.basemap !== $currentBasemap &&
+            allowedEmbeddingBasemaps.includes(options.basemap)
+        ) {
             $currentBasemap = options.basemap;
         }
 
@@ -224,7 +232,7 @@
             geolocate={false}
             hash={useHash}
         />
-		<OpenIn bind:files={options.files} />
+        <OpenIn bind:files={options.files} bind:ids={options.ids} />
         <LayerControl />
         <GPXLayers />
         {#if $fileObservers.size > 1}

website/src/lib/components/embedding/Embedding.ts

@@ -4,6 +4,7 @@ import { basemaps } from '$lib/assets/layers';
 export type EmbeddingOptions = {
     token: string;
     files: string[];
+    ids: string[];
     basemap: string;
     elevation: {
         show: boolean;
@@ -27,6 +28,7 @@ export type EmbeddingOptions = {
 export const defaultEmbeddingOptions = {
     token: '',
     files: [],
+    ids: [],
     basemap: 'mapboxOutdoors',
     elevation: {
         show: true,
@@ -92,6 +94,10 @@ export const allowedEmbeddingBasemaps = Object.keys(basemaps).filter(
     (basemap) => !['ordnanceSurvey'].includes(basemap)
 );
 
+export function getFilesFromEmbeddingOptions(options: EmbeddingOptions): string[] {
+    return options.files.concat(options.ids.map((id) => getURLForGoogleDriveFile(id)));
+}
+
 export function getURLForGoogleDriveFile(fileId: string): string {
     return `https://www.googleapis.com/drive/v3/files/${fileId}?alt=media&key=AIzaSyA2ZadQob_hXiT2VaYIkAyafPvz_4ZMssk`;
 }
@@ -99,12 +105,13 @@ export function getURLForGoogleDriveFile(fileId: string): string {
 export function convertOldEmbeddingOptions(options: URLSearchParams): any {
     let newOptions: any = {
         token: PUBLIC_MAPBOX_TOKEN,
-		files: []
+        files: [],
+        ids: [],
     };
     if (options.has('state')) {
         let state = JSON.parse(options.get('state')!);
         if (state.ids) {
-			newOptions.files.push(...state.ids.map(getURLForGoogleDriveFile));
+            newOptions.ids.push(...state.ids);
         }
         if (state.urls) {
             newOptions.files.push(...state.urls);

website/src/lib/components/embedding/EmbeddingPlayground.svelte

@@ -35,15 +35,21 @@
     ];
 
     let files = options.files[0];
-    let driveIds = '';
+    $: {
-    $: if (files || driveIds) {
         let urls = files.split(',');
         urls = urls.filter((url) => url.length > 0);
-        let ids = driveIds.split(',');
-        ids = ids.filter((id) => id.length > 0);
-        urls.push(...ids.map(getURLForGoogleDriveFile));
         if (JSON.stringify(urls) !== JSON.stringify(options.files)) {
             options.files = urls;
+            console.log(options.files);
+        }
+    }
+    let driveIds = '';
+    $: {
+        let ids = driveIds.split(',');
+        ids = ids.filter((id) => id.length > 0);
+        if (JSON.stringify(ids) !== JSON.stringify(options.ids)) {
+            options.ids = ids;
+            console.log(options.ids);
         }
     }
 

website/src/lib/components/embedding/OpenIn.svelte

@@ -5,12 +5,17 @@
     import { _, locale } from 'svelte-i18n';
 
     export let files: string[];
+    export let ids: string[];
 </script>
 
 <Button
     variant="ghost"
     class="absolute top-0 flex-wrap h-fit bg-background font-semibold rounded-md py-1 px-2 gap-1.5 xs:text-base mt-2.5 ml-2.5 mr-12"
-	href="{getURLForLanguage($locale, '/app')}?files={encodeURIComponent(JSON.stringify(files))}"
+    href="{getURLForLanguage($locale, '/app')}?{files.length > 0
+        ? `files=${encodeURIComponent(JSON.stringify(files))}`
+        : ''}{files.length > 0 && ids.length > 0 ? '&' : ''}{ids.length > 0
+        ? `ids=${encodeURIComponent(JSON.stringify(ids))}`
+        : ''}"
     target="_blank"
 >
     {$_('menu.open_in')}

website/src/routes/[[language]]/app/+page.svelte

@@ -17,6 +17,7 @@
     import { page } from '$app/stores';
     import { languages } from '$lib/languages';
     import { getURLForLanguage } from '$lib/utils';
+    import { getURLForGoogleDriveFile } from '$lib/components/embedding/Embedding';
 
     const {
         verticalFileView,
@@ -30,11 +31,13 @@
     onMount(() => {
         observeFilesFromDatabase();
 
-        let files = JSON.parse($page.url.searchParams.get('files') || '[]');
+        let files: string[] = JSON.parse($page.url.searchParams.get('files') || '[]');
+        let ids: string[] = JSON.parse($page.url.searchParams.get('ids') || '[]');
+        let urls: string[] = files.concat(ids.map(getURLForGoogleDriveFile));
 
-        if (files.length > 0) {
+        if (urls.length > 0) {
             let downloads: Promise<File | null>[] = [];
-            files.forEach((url) => {
+            urls.forEach((url) => {
                 downloads.push(
                     fetch(url)
                         .then((response) => response.blob())