xterm-player
v1.1.0
Published
A web player for xterm recording
Maintainers
javacs3Readme
XtermPlayer 中文文档
This repo is intended to provide an alternative asciinema player. The original player is writtern in ClojureScript. I think it's hard for frontend people to contribute that directly. This project is intended to make it easier for people to contribute by using Typescript.
Demo
Usage
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xterm-player@latest/dist/css/xterm-player.min.css" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/xterm.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/xterm-player@latest/dist/js/xterm-player.min.js"></script>
</head>
<body>
<div id="app"></div>
<script>
const div = document.getElementById('app')
const player = new XtermPlayer.XtermPlayer(
'https://raw.githubusercontent.com/JavaCS3/xterm-player/master/assets/1.cast',
div
)
</script>
</body>
</html>Features
- Support orginal asciinema v1, v2 format and features
- Support Terminalizer format
- Support Audio
FAQ
How to record terminal session with audio
$ npm i -g xterm-recorder # install xterm-recorder first
$ xterm-recorder rec # exit terminal session will automatically save your recording to out.castcheck peer project https://github.com/JavaCS3/xterm-recorder for details
How to customize theme
Here is a solarized dark example
const solarized_dark_theme = {
background: '#002b36',
foreground: '#839496',
cursor: '#839496',
cursorAccent: '#839496',
selection: '#073642',
black: '#073642',
brightBlack: '#002b36',
blue: '#268bd2',
brightBlue: '#839496',
red: '#dc322f',
brightRed: '#cb4b16',
green: '#859900',
brightGreen: '#586e75',
yellow: '#b58900',
brightYellow: '#657b83',
magenta: '#d33682',
brightMagenta: '#6c71c4',
cyan: '#2aa198',
brightCyan: '#93a1a1',
white: '#eee8d5',
brightWhite: '#fdf6e3',
}
const player = new XtermPlayer.XtermPlayer(url, div, { theme: solarized_dark_theme })Develop Guide
$ cd <repo> && yarn
$ yarn demo
$ yarn test