From e9f6c15d70a1fb26eccdc8b6a4855418f2cbb198 Mon Sep 17 00:00:00 2001
From: Justin Stephenson <jstephen@redhat.com>
Date: Thu, 6 Jul 2023 10:35:50 -0400
Subject: [PATCH] Add xterm-canvas-addon dependency for rendering

---
 package.json   | 5 +++--
 src/player.jsx | 2 ++
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 8acb00e..1013e6c 100644
--- a/package.json
+++ b/package.json
@@ -47,8 +47,8 @@
   "dependencies": {
     "@patternfly/patternfly": "5.0.0-alpha.64",
     "@patternfly/react-core": "5.0.0-alpha.115",
-    "@patternfly/react-styles": "5.0.0-alpha.16",
     "@patternfly/react-icons": "5.0.0-alpha.19",
+    "@patternfly/react-styles": "5.0.0-alpha.16",
     "@patternfly/react-table": "^5.0.0-alpha.118",
     "@patternfly/react-tokens": "^5.0.0-alpha.14",
     "buffer": "^6.0.3",
@@ -59,6 +59,7 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "throttle-debounce": "^5.0.0",
-    "xterm": "^5.1.0"
+    "xterm": "5.1.0",
+    "xterm-addon-canvas": "^0.4.0"
   }
 }
diff --git a/src/player.jsx b/src/player.jsx
index ff48419..4678d1b 100644
--- a/src/player.jsx
+++ b/src/player.jsx
@@ -19,6 +19,7 @@
 import React from 'react';
 import './player.css';
 import { Terminal as Term } from 'xterm';
+import { CanvasAddon } from 'xterm-addon-canvas';
 import {
     Alert,
     AlertGroup,
@@ -1203,6 +1204,7 @@ export class Player extends React.Component {
         }
         /* Open the terminal */
         this.state.term.open(this.termRef.current);
+        this.state.term.loadAddon(new CanvasAddon());
         window.setInterval(this.sync, 100);
         /* Reset playback */
         this.reset();