CodeHub MCPcopy Index your code

hub / github.com/JavaCS3/xterm-player

github.com/JavaCS3/xterm-player @v1.1.0

Chat with this repo

repository ↗ · DeepWiki ↗ · release v1.1.0 ↗ · + Follow

273 symbols 550 edges 28 files 0 documented · 0%

What it actually does AI analysis from the code graph — generated when you open this

loading…

README

XtermPlayer

本项目的设计初衷是提供asciinema-player的替代品。asciinema-player 是用ClojureScript实现的，我认为这门语言过于小众，大部分前端工程师很难直接参与贡献。因此本项目希望利用Typescript让项目的贡献变得简单一点。当然还远不止这些！

Demo展示

demo-gif

使用方法

<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/xterm@4.4.0/lib/xterm.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/xterm-player@latest/dist/js/xterm-player.min.js"></script>
  </head>
  <body>





    <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>

功能特色

支持 asciinema v1, v2 文件格式和功能
支持 Terminalizer 文件格式
支持嵌入音频

常见问题

如何录制一个带有声音的终端录屏

$ npm i -g xterm-recorder   # 首先安装 xterm-recorder
$ xterm-recorder rec        # 进程退出后会自动保存至 out.cast

更多使用方法请查阅 https://github.com/JavaCS3/xterm-recorder

如何自定义主题

这里是一个 solarized dark 主题的例子

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 })

如何开发

$ cd <repo> && yarn
$ yarn demo
$ yarn test

Extension points exported contracts — how you extend this code

IDisposable (Interface)

(no doc) [6 implementers]

ICastParser (Interface)

(no doc) [8 implementers]

src/CastParser.ts

ITicker (Interface)

(no doc) [6 implementers]

IDisposable (Interface)

(no doc) [6 implementers]

typings/xterm-player.d.ts

IFrame (Interface)

(no doc) [4 implementers]

IComponent (Interface)

(no doc) [3 implementers]

src/ui/Types.ts

IEventEmitter (Interface)

(no doc) [1 implementers]

Window (Interface)

src/global.d.ts

Core symbols most depended-on inside this repo

src/ui/DomHelper.ts

Shape

Method 157

Function 56

Class 42

Interface 18

Languages

TypeScript100%

Modules by API surface

src/Timer.ts89 symbols

docs/bundle.min.js41 symbols

src/Frame.ts35 symbols

src/Player.ts26 symbols

src/CastParser.ts15 symbols

src/ui/ControlBarView.ts13 symbols

src/Events.ts10 symbols

src/ui/PlayerView.ts8 symbols

src/Utils.ts8 symbols

src/ui/ProgressBarView.ts7 symbols

typings/xterm-player.d.ts6 symbols

src/ui/DomHelper.ts5 symbols

For agents

$ claude mcp add xterm-player \
  -- python -m otcore.mcp_server <graph>

⬇ download graph artifact