Skip to content

JavaCS3/xterm-player

Folders and files

NameName
Last commit message
Last commit date
Apr 8, 2020
Apr 4, 2020
Apr 3, 2020
Apr 12, 2020
Apr 12, 2020
Mar 25, 2020
Apr 11, 2020
Apr 11, 2020
Apr 22, 2019
Mar 21, 2020
Mar 21, 2020
Mar 4, 2020
Mar 6, 2020
Apr 22, 2019
Mar 30, 2020
Apr 12, 2020
Apr 12, 2020
Mar 24, 2020
Mar 4, 2020
Apr 11, 2020
Mar 22, 2020
Sep 9, 2020

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