Merge branch 'store-alt-text' into 'main'

Store alt text along with other imeta, and render it when requested

Closes #172

See merge request soapbox-pub/ditto!464

src/app.ts

@@ -53,7 +53,7 @@ import {
   instanceV2Controller,
 } from '@/controllers/api/instance.ts';
 import { markersController, updateMarkersController } from '@/controllers/api/markers.ts';
-import { mediaController } from '@/controllers/api/media.ts';
+import { mediaController, updateMediaController } from '@/controllers/api/media.ts';
 import { mutesController } from '@/controllers/api/mutes.ts';
 import { notificationsController } from '@/controllers/api/notifications.ts';
 import { createTokenController, oauthAuthorizeController, oauthController } from '@/controllers/api/oauth.ts';
@@ -226,6 +226,10 @@ app.delete('/api/v1/statuses/:id{[0-9a-f]{64}}', requireSigner, deleteStatusCont
 app.get('/api/v1/pleroma/statuses/:id{[0-9a-f]{64}}/quotes', quotesController);
 
 app.post('/api/v1/media', mediaController);
+app.put(
+  '/api/v1/media/:id{[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}}',
+  updateMediaController,
+);
 app.post('/api/v2/media', mediaController);
 
 app.get('/api/v1/timelines/home', requireSigner, homeTimelineController);

src/controllers/api/media.ts

@@ -5,6 +5,7 @@ import { fileSchema } from '@/schema.ts';
 import { parseBody } from '@/utils/api.ts';
 import { renderAttachment } from '@/views/mastodon/attachments.ts';
 import { uploadFile } from '@/utils/upload.ts';
+import { setMediaDescription } from '@/db/unattached-media.ts';
 
 const mediaBodySchema = z.object({
   file: fileSchema,
@@ -13,6 +14,10 @@ const mediaBodySchema = z.object({
   focus: z.string().optional(),
 });
 
+const mediaUpdateSchema = z.object({
+  description: z.string(),
+});
+
 const mediaController: AppController = async (c) => {
   const pubkey = await c.get('signer')?.getPublicKey()!;
   const result = mediaBodySchema.safeParse(await parseBody(c.req.raw));
@@ -32,4 +37,22 @@ const mediaController: AppController = async (c) => {
   }
 };
 
-export { mediaController };
+const updateMediaController: AppController = async (c) => {
+  const result = mediaUpdateSchema.safeParse(await parseBody(c.req.raw));
+  if (!result.success) {
+    return c.json({ error: 'Bad request.', schema: result.error }, 422);
+  }
+  try {
+    const { description } = result.data;
+    if (!await setMediaDescription(c.req.param('id'), description)) {
+      return c.json({ error: 'File with specified ID not found.' }, 404);
+    }
+  } catch (e) {
+    console.error(e);
+    return c.json({ error: 'Failed to set media description.' }, 500);
+  }
+
+  return c.json({ message: 'ok' }, 200);
+};
+
+export { mediaController, updateMediaController };

src/db/unattached-media.ts

@@ -56,6 +56,18 @@ async function getUnattachedMediaByIds(kysely: Kysely<DittoTables>, ids: string[
   }));
 }
 
+async function setMediaDescription(id: string, desc = '') {
+  const { kysely } = await DittoDB.getInstance();
+  const existing = await selectUnattachedMediaQuery(kysely).where('id', '=', id).executeTakeFirst();
+  if (!existing) return false;
+  const parsed = (await JSON.parse(existing.data) as string[][]).filter((itm) => itm[0] !== 'alt');
+  parsed.push(['alt', desc]);
+  await kysely.updateTable('unattached_media')
+    .set({ data: JSON.stringify(parsed) })
+    .execute();
+  return true;
+}
+
 /** Delete rows as an event with media is being created. */
 async function deleteAttachedMedia(pubkey: string, urls: string[]): Promise<void> {
   if (!urls.length) return;
@@ -71,5 +83,6 @@ export {
   deleteUnattachedMediaByUrl,
   getUnattachedMediaByIds,
   insertUnattachedMedia,
+  setMediaDescription,
   type UnattachedMedia,
 };

src/views/mastodon/statuses.ts

@@ -84,7 +84,12 @@ async function renderStatus(event: DittoEvent, opts: RenderStatusOpts): Promise<
 
   const imeta: string[][][] = event.tags
     .filter(([name]) => name === 'imeta')
-    .map(([_, ...entries]) => entries.map((entry) => entry.split(' ')));
+    .map(([_, ...entries]) =>
+      entries.map((entry) => {
+        const split = entry.split(' ');
+        return [split[0], split.splice(1).join(' ')];
+      })
+    );
 
   const media = imeta.length ? imeta : getMediaLinks(links);