javacs3 / xterm-player Goto Github PK

• press up/down key to volume up/down if has audio
• control bar should have playbackRate control [0.5x 1.0x 1.25x 2.0x]

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

• click volume icon to toggle mute state
• volume icon should hook to current volume/mute state

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

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)

Actually, xterm.js provides lots of options that can be used to customize terminal(e.g., many people want to change font or theme.), can we expose all or some of options in xterm.ITerminalOptions to user?

Depending on xtermjs/xterm.js#2713 Currently xterm-serialize-addon doesn't support alternate buffer serialization

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

A possible way to fix this issue needs re-implement Audio system via Web Audio API which require a lot of efforts

looks like a webpack 4 bug
https://medium.com/@JakeXiao/window-is-undefined-in-umd-library-output-for-webpack4-858af1b881df

• Manually publish a pkg to registry
• Automate the process of pkg publishing

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!

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

2. 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')
      })
    })