html: add option to toggle sixel

html/src/components/app.tsx

@@ -17,6 +17,7 @@ const clientOptions = {
     disableLeaveAlert: false,
     disableResizeOverlay: false,
     enableZmodem: false,
+    enableSixel: false,
     titleFixed: null,
 } as ClientOptions;
 const termOptions = {

html/src/components/terminal/index.tsx

@@ -12,8 +12,6 @@ import { ZmodemAddon } from '../zmodem';
 import 'xterm/css/xterm.css';
 import worker from 'xterm-addon-image/lib/xterm-addon-image-worker';
 
-const imageWorkerUrl = window.URL.createObjectURL(new Blob([worker], { type: 'text/javascript' }));
-
 interface TtydTerminal extends Terminal {
     fit(): void;
 }
@@ -44,6 +42,7 @@ export interface ClientOptions {
     disableLeaveAlert: boolean;
     disableResizeOverlay: boolean;
     enableZmodem: boolean;
+    enableSixel: boolean;
     titleFixed: string;
 }
 
@@ -204,7 +203,6 @@ export class Xterm extends Component<Props, State> {
         terminal.loadAddon(fitAddon);
         terminal.loadAddon(overlayAddon);
         terminal.loadAddon(new WebLinksAddon());
-        terminal.loadAddon(new ImageAddon(imageWorkerUrl));
 
         terminal.onTitleChange(data => {
             if (data && data !== '' && !this.titleFixed) {
@@ -354,6 +352,15 @@ export class Xterm extends Component<Props, State> {
                         console.log(`[ttyd] Zmodem enabled`);
                     }
                     break;
+                case 'enableSixel':
+                    if (value) {
+                        const imageWorkerUrl = window.URL.createObjectURL(
+                            new Blob([worker], { type: 'text/javascript' })
+                        );
+                        terminal.loadAddon(new ImageAddon(imageWorkerUrl));
+                        console.log(`[ttyd] Sixel enabled`);
+                    }
+                    break;
                 case 'titleFixed':
                     if (!value || value === '') return;
                     console.log(`[ttyd] setting fixed title: ${value}`);