Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

JavaCS3/xterm-player

Open more actions menu

Repository files navigation

CI codecov npm version downloads gitter chat

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

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

  1. Support orginal asciinema v1, v2 format and features
  2. Support Terminalizer format
  3. 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.cast

check 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 })
// or just use builtin theme
const player = new XtermPlayer.XtermPlayer(url, div, { theme: XtermPlayer.XtermPlayer.THEME_SOLARIZED_DARK })

Develop Guide

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

Packages

 
 
 

Contributors 3

  •  
  •  
  •  
Morty Proxy This is a proxified and sanitized view of the page, visit original site.