fixed bell

app/src/global.scss

@@ -118,4 +118,23 @@ ngb-typeahead-window {
     &:hover {
       opacity: 1;
     }
+}
+
+
+@keyframes terminalShakeFrames {
+    0% {
+        transform: translateX(0);
     }
+    25% {
+        transform: translateX(5px);
+    }
+    50% {
+        transform: translateX(-5px);
+    }
+    75% {
+        transform: translateX(5px);
+    }
+    100% {
+        transform: translateX(0);
+    }
+}

terminus-terminal/src/api/baseTerminalTab.component.ts

@@ -223,7 +223,7 @@ export class BaseTerminalTabComponent extends BaseTabComponent implements OnInit
             }
         })
         this.bellPlayer = document.createElement('audio')
-        this.bellPlayer.src = require<string>('../bell.ogg')
+        this.bellPlayer.src = require('../bell.ogg').default
 
         this.contextMenuProviders.sort((a, b) => a.weight - b.weight)
     }

terminus-terminal/src/frontends/xtermFrontend.ts

@@ -24,6 +24,7 @@ export class XTermFrontend extends Frontend {
     protected xtermCore: any
     protected enableWebGL = false
     private xterm: Terminal
+    private element?: HTMLElement
     private configuredFontSize = 0
     private configuredLinePadding = 0
     private zoom = 0
@@ -63,6 +64,9 @@ export class XTermFrontend extends Frontend {
                 this.copySelection()
             }
         })
+        this.xterm.onBell(() => {
+            this.bell.next()
+        })
 
         this.xterm.loadAddon(this.fitAddon)
         this.xterm.loadAddon(this.serializeAddon)
@@ -135,6 +139,7 @@ export class XTermFrontend extends Frontend {
 
     async attach (host: HTMLElement): Promise<void> {
         this.configure()
+        this.element = host
 
         this.xterm.open(host)
         this.opened = true
@@ -217,7 +222,12 @@ export class XTermFrontend extends Frontend {
     }
 
     visualBell (): void {
-        this.xtermCore.bell()
+        if (this.element) {
+            this.element.style.animation = 'none'
+            setTimeout(() => {
+                this.element!.style.animation = 'terminalShakeFrames 0.3s ease'
+            })
+        }
     }
 
     scrollToBottom (): void {