Git Product home page Git Product logo

xterm-player's Introduction

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

  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

xterm-player's People

Contributors

actions-user avatar dependabot[bot] avatar forest0 avatar javacs3 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

xterm-player's Issues

style suggestion

  1. i think change Icons.Pause to Icons.Play when state=="Paused" looks better.
    src/ui/PlayerView.ts
      case 'Paused':
        this._bigButton.style.display = 'block'
        // change icon
        this._bigButton.innerHTML = Icons.Play
        this._spinner.style.display = 'none'
        break
  1. better close rate-setting-box after changed rate
    src/ui/ControlBarView.ts
    addDisposableDomListener(this._playbackRate, 'click', () => {
      this._playbackRateSettingBox.classList.toggle('xp-setting-box-open')
    })
    this._playbackRateItems.forEach(item => {
      addDisposableDomListener(item, 'click', () => {
        this._player.playbackRate = parseFloat(item.dataset['rate'] || '1')
        // add this
        this._playbackRateSettingBox.classList.toggle('xp-setting-box-open')
      })
    })

Add error UI state

when xterm-player url invalid or remote responding error, UI should show a error notification

Question: How is unicode handled?

Sorry, rather a question than an issue.

Looked at the format of asciinema v2 which looks to be utf8-unicoded.
"it's UTF-8 encoded JSON string, with all non-printable Unicode codepoints encoded as \uXXXX"

Looked thru the code to figure out how this is handled and passed to xterm.write that seems to expect utf16.
If you could point out where this is dealt with I would really appreciate it!

Audio support

  1. video/audio must be synced
  2. play/pause/seek
  3. do NOT need to support every browser. most popular browsers must be supported (Chrome, Safari)

Selection will be cleared while playing

Due to current framing strategy, xterm-player will refresh whole terminal if moving from a frame to next frame.

xterm-player/src/Player.ts

Lines 151 to 161 in 2462cdb

const frame = this._queue.frame(now)
if (this._lastframe === frame && now > this._lasttime) {
writeSync(this._term, frame.data(now, this._lasttime))
} else {
this._term.reset()
if (frame.prev) {
writeSync(this._term, frame.prev.snapshot() + frame.data(now))
} else {
writeSync(this._term, frame.data(now))
}
}

Refine player UI

  1. UI should be responsive designed to match different window size
  2. Mobile doesn't have to be supported currently
  • space key to toggle play/pause
  • left/right key to seek backward/forward
  • key events should be captured in whole player element level
  • control bar show up when mouse enter in the player
  • control bar fade off when mouse leave the player
  • when the player is paused there should be some hints like a paused overlay tint
  • when the player continue playing from the paused status, the overlay tint should be removed
  • the player width/height should have limit. should not expand as much as possible

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.