Merge pull request #84 from kamecha/feature/view-file-sixel

画像を取得して、sixelで表示できるようにする
kamecha · Aug 30, 2024 · 8c6fce9 · 8c6fce9
2 parents bbbca38 + 1fcd5bc
commit 8c6fce9
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 0 deletions.
diff --git a/denops/traqvim/main.ts b/denops/traqvim/main.ts
@@ -4,6 +4,7 @@ import {
   channelsRecursive,
   channelTimeline,
   channelUUID,
+  downloadFile,
   getStamp,
   getUser,
   homeChannelId,
@@ -44,6 +45,21 @@ export async function main(denops: Denops) {
   // oauthの仮オブジェクト
   let oauth: OAuth;
   denops.dispatcher = {
+    async getFile(fileId: unknown): Promise<unknown> {
+      assert(fileId, is.String);
+      const file: Uint8Array = await downloadFile(fileId);
+      // denops-sixel-view.vimのsixel_viewがUint8Arrayを受け取れる必要がある
+      const sixel = await denops.dispatch("sixel_view", "img2sixel", file);
+      assert(
+        sixel,
+        is.ObjectOf({
+          data: is.String,
+          height: is.Number,
+          width: is.Number,
+        }),
+      );
+      return sixel;
+    },
     setupOAuth(): Promise<unknown> {
       helper.echo(denops, "setup...");
       // OAuthの設定を行う

diff --git a/denops/traqvim/model.ts b/denops/traqvim/model.ts
@@ -369,3 +369,20 @@ export const getStamp = async (
   }
   return stamp;
 };
+
+export const downloadFile = async (
+  fileId: string,
+): Promise<Uint8Array> => {
+  try {
+    const fileRes = await api.fetchWithToken(
+      "GET",
+      "/files/" + fileId,
+      {},
+    );
+    const blob = await fileRes.blob();
+    return new Uint8Array(await blob.arrayBuffer());
+  } catch (e) {
+    console.error(e);
+  }
+  return new Uint8Array();
+};
diff --git a/doc/traqvim.jax b/doc/traqvim.jax
@@ -257,6 +257,50 @@ type		(string)
     Default: "all"
 
 
+==============================================================================
+FAQ						*traqvim-faq*
+
+
+FAQ 1:						|traqvim-faq-1|
+    How to display image with sixel?
+
+------------------------------------------------------------------------------
+						*traqvim-faq-1*
+Q: How to display image with sixel?
+
+A: install `denops-sixel-view.vim` plugin. and you have to set function like
+bellow.
+
+https://github.com/gw31415/denops-sixel-view.vim
+
+>
+	" Clear the image like <C-l>
+	function s:clear() abort
+		call sixel_view#clear()
+	endfunction
+
+	function s:preview_img(fileId) abort
+		" download the file and convert it to sixel data
+		let sixel = denops#request("traqvim", "getFile", [a:fileId])
+		call sixel_view#view_sixel(sixel['data'], 0, 0)
+	endfunction
+
+	function s:preview_cursor_img() abort
+		let cursor_url = getline('.')
+		let fileId = matchstr(cursor_url, 'https://q.trap.jp/files/\zs.*')
+		call s:preview_img(fileId)
+		" Close the image by moving the cursor
+		autocmd CursorMoved,BufLeave <buffer> ++once call s:clear()
+	endfunction
+
+	function s:traqvim_setting()
+		nnoremap <buffer><silent> K
+					\ <Cmd>call <SID>preview_cursor_img()<CR>
+	endfunction
+
+	autocmd FileType traqvim call s:traqvim_setting()
+<
+
 ==============================================================================
 TODO						*traqvim-todo*