mirror of
https://github.com/feeddeck/feeddeck.git
synced 2026-05-23 15:33:25 -05:00
92bea5d715
This commit improves / simplifies the media handling within the app. Until now we always had to provide the type of the media file (item media / source icon) when we wanted to display it. This is now not necessary anymore. Instead we always display the image from it's original path when the url starts with "http://" or "https://". Additionally we also check the platform to proxy the image request on the web. If the image doesn't start with "http://" or "https://" we always try to display the image from the Supabase storage. For this we also adjusted the corresponding Deno function, so that we check if the image starts with "http://" or "https://" before we upload it to the Supabase storage. If this is the case we upload the source icon to the Supabase storage. If the upload fails, we will use the original path of the icon. Last but not least this commit also introduces our own "CachedNetworkImage" widget, which wraps the original "CachedNetworkImage" widget. Our own widget will ensure that we use the correct url for the image request, so that we do not have to use this function all over the app anymore. Later this widget can also be used to introduce our own cache manager.
84 lines
2.2 KiB
TypeScript
84 lines
2.2 KiB
TypeScript
import { SupabaseClient } from '@supabase/supabase-js';
|
|
|
|
import { ISource } from '../../models/source.ts';
|
|
import { fetchWithTimeout } from '../../utils/fetchWithTimeout.ts';
|
|
import { log } from '../../utils/log.ts';
|
|
|
|
/**
|
|
* `uploadSourceIcon` uploads the `icon` of the provided `source` to the
|
|
* Supabase storage, to avoid CORS issues within our web app and to make use of
|
|
* the built-in CDN. If the upload was successfull the path of the uploaded icon
|
|
* is returned. If the upload failed we return the original `icon` path, so that
|
|
* we can still display the icon, from it's original source.
|
|
*/
|
|
export const uploadSourceIcon = async (
|
|
supabaseClient: SupabaseClient,
|
|
source: ISource,
|
|
): Promise<string | undefined> => {
|
|
if (
|
|
!source.icon || source.icon === '' || (!source.icon.startsWith('http://') &&
|
|
!source.icon.startsWith('https://'))
|
|
) {
|
|
return undefined;
|
|
}
|
|
|
|
try {
|
|
const cdnIcon = await uploadFile(
|
|
supabaseClient,
|
|
'sources',
|
|
source.icon,
|
|
`${source.userId}/${source.id}.${source.icon.split('.').pop()}`,
|
|
);
|
|
|
|
if (cdnIcon) {
|
|
return cdnIcon;
|
|
}
|
|
|
|
return source.icon;
|
|
} catch (_) {
|
|
return source.icon;
|
|
}
|
|
};
|
|
|
|
/**
|
|
* `uploadFile` uploads the provided file via it's `sourcePath` to the
|
|
* `targetPath` within the provided `bucket`. For this we have to fetch the file
|
|
* first and then upload it to the Supabase storage.
|
|
*/
|
|
const uploadFile = async (
|
|
supabaseClient: SupabaseClient,
|
|
bucket: string,
|
|
sourcePath: string,
|
|
targetPath: string,
|
|
): Promise<string | undefined> => {
|
|
try {
|
|
const fileResponse = await fetchWithTimeout(
|
|
sourcePath,
|
|
{ method: 'get' },
|
|
5000,
|
|
);
|
|
const file = await fileResponse.blob();
|
|
|
|
const { data: uploadData, error: uploadError } = await supabaseClient
|
|
.storage.from(bucket)
|
|
.upload(
|
|
targetPath,
|
|
file,
|
|
{
|
|
upsert: true,
|
|
},
|
|
);
|
|
if (uploadError) {
|
|
log('error', 'Failed to upload source icon', {
|
|
'error': uploadError,
|
|
});
|
|
return undefined;
|
|
}
|
|
|
|
return uploadData?.path;
|
|
} catch (err) {
|
|
log('error', 'Failed to upload source icon', { 'error': err.toString() });
|
|
return undefined;
|
|
}
|
|
};
|