From d2ac897898f43b082a4ae880a162eac84f32e6d9 Mon Sep 17 00:00:00 2001
From: Jesse Portnoy <jesse@packman.io>
Date: Mon, 24 Jul 2023 04:11:05 +0100
Subject: [PATCH 01/10] Almost there..

---
 README.md                 |  3 +-
 src/demo/App.js           |  8 ++++
 src/patterns.js           |  2 +
 src/players/Asciinema.js  | 90 +++++++++++++++++++++++++++++++++++++++
 src/players/index.js      |  6 +++
 test/players/Asciinema.js | 64 ++++++++++++++++++++++++++++
 yarn.lock                 |  6 +--
 7 files changed, 175 insertions(+), 4 deletions(-)
 create mode 100644 src/players/Asciinema.js
 create mode 100644 test/players/Asciinema.js

diff --git a/README.md b/README.md
index fe13637a..b091e3dc 100644
--- a/README.md
+++ b/README.md
@@ -18,7 +18,7 @@
 </p>
 
 <p align='center'>
-  A React component for playing a variety of URLs, including file paths, YouTube, Facebook, Twitch, SoundCloud, Streamable, Vimeo, Wistia, Mixcloud, DailyMotion and Kaltura. Not using React? <a href='#standalone-player'>No problem.</a>
+  A React component for playing a variety of URLs, including file paths, YouTube, Facebook, Twitch, SoundCloud, Streamable, Vimeo, Wistia, Mixcloud, DailyMotion, Kaltura and asciinema. Not using React? <a href='#standalone-player'>No problem.</a>
 </p>
 
 ### Migrating to ReactPlayer `v2.0`
@@ -337,6 +337,7 @@ You can also specify a `type` for each source by using objects with `src` and `t
 * DailyMotion videos use the [DailyMotion Player API](https://developer.dailymotion.com/player)
 * Vidyard videos use the [Vidyard Player API](https://knowledge.vidyard.com/hc/en-us/articles/360019034753-Using-the-Vidyard-Player-API)
 * Kaltura's `react-player` implementation uses the embed.ly [`Player.js`](https://github.com/embedly/player.js) API but Kaltura specific APIs are also available, see [Kaltura Player API](http://player.kaltura.com/docs/index.php?path=kwidget)
+* Asciinema casts use the [Asciinema API](https://github.com/asciinema/asciinema-player#api)
 * [Supported file types](https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats) are playing using [`<video>`](https://developer.mozilla.org/en/docs/Web/HTML/Element/video) or [`<audio>`](https://developer.mozilla.org/en/docs/Web/HTML/Element/audio) elements
   * HLS streams are played using [`hls.js`](https://github.com/video-dev/hls.js)
   * DASH streams are played using [`dash.js`](https://github.com/Dash-Industry-Forum/dash.js)
diff --git a/src/demo/App.js b/src/demo/App.js
index db33900e..47a83d7b 100644
--- a/src/demo/App.js
+++ b/src/demo/App.js
@@ -4,6 +4,7 @@ import { hot } from 'react-hot-loader'
 import screenfull from 'screenfull'
 
 import './reset.css'
+import './asciinema-player.css'
 import './defaults.css'
 import './range.css'
 import './App.css'
@@ -356,6 +357,13 @@ class App extends Component {
                   {this.renderLoadButton('https://cdnapisec.kaltura.com/p/2507381/sp/250738100/embedIframeJs/uiconf_id/44372392/partner_id/2507381?iframeembed=true&playerId=kaltura_player_1605622336&entry_id=1_i1jmzcn3', 'Test B')}
                 </td>
               </tr>
+              <tr>
+                <th>Asciinema</th>
+                <td>
+                  {this.renderLoadButton('https://asciinema.org/a/597732.cast', 'Test A')}
+                  {this.renderLoadButton('https://asciinema.org/a/596325.cast', 'Test B')}
+                </td>
+              </tr>
               <tr>
                 <th>Files</th>
                 <td>
diff --git a/src/patterns.js b/src/patterns.js
index 8549eb49..c57f70df 100644
--- a/src/patterns.js
+++ b/src/patterns.js
@@ -13,6 +13,7 @@ export const MATCH_URL_DAILYMOTION = /^(?:(?:https?):)?(?:\/\/)?(?:www\.)?(?:(?:
 export const MATCH_URL_MIXCLOUD = /mixcloud\.com\/([^/]+\/[^/]+)/
 export const MATCH_URL_VIDYARD = /vidyard.com\/(?:watch\/)?([a-zA-Z0-9-_]+)/
 export const MATCH_URL_KALTURA = /^https?:\/\/[a-zA-Z]+\.kaltura.(com|org)\/p\/([0-9]+)\/sp\/([0-9]+)00\/embedIframeJs\/uiconf_id\/([0-9]+)\/partner_id\/([0-9]+)(.*)entry_id.([a-zA-Z0-9-_].*)$/
+export const MATCH_URL_ASCIINEMA = /asciinema.org\/a\/([a-zA-Z0-9-_]+)\.cast/
 export const AUDIO_EXTENSIONS = /\.(m4a|m4b|mp4a|mpga|mp2|mp2a|mp3|m2a|m3a|wav|weba|aac|oga|spx)($|\?)/i
 export const VIDEO_EXTENSIONS = /\.(mp4|og[gv]|webm|mov|m4v)(#t=[,\d+]+)?($|\?)/i
 export const HLS_EXTENSIONS = /\.(m3u8)($|\?)/i
@@ -60,5 +61,6 @@ export const canPlay = {
   mixcloud: url => MATCH_URL_MIXCLOUD.test(url),
   vidyard: url => MATCH_URL_VIDYARD.test(url),
   kaltura: url => MATCH_URL_KALTURA.test(url),
+  asciinema: url => MATCH_URL_ASCIINEMA.test(url),
   file: canPlayFile
 }
diff --git a/src/players/Asciinema.js b/src/players/Asciinema.js
new file mode 100644
index 00000000..f9103a8f
--- /dev/null
+++ b/src/players/Asciinema.js
@@ -0,0 +1,90 @@
+import React, { Component } from 'react'
+
+import { callPlayer, getSDK } from '../utils'
+import { canPlay, MATCH_URL_ASCIINEMA } from '../patterns'
+
+const SDK_URL = 'http://localhost/asciinema-player.js'
+const SDK_GLOBAL = 'AsciinemaPlayer'
+
+export default class Asciinema extends Component {
+  static displayName = 'Asciinema'
+  static canPlay = canPlay.asciinema
+  static loopOnEnded = true
+  callPlayer = callPlayer
+
+  componentDidMount () {
+    this.props.onMount && this.props.onMount(this)
+    if (this.props.url) {
+      if (!this.props.id) {
+        this.playerID = 'asciinema_player'
+      } else {
+        this.playerID = this.props.id
+      }
+    }
+  }
+
+  load (url) {
+    getSDK(SDK_URL, SDK_GLOBAL).then(AsciinemaPlayer => {
+      if (this.player) {
+        return
+      }
+      this.player = AsciinemaPlayer.create(url, this.div)
+      this.player.addEventListener('play', this.props.onReady)
+      this.player.addEventListener('playing', this.props.onPlay)
+      this.player.addEventListener('pause', this.props.onPause)
+      this.player.addEventListener('ended', this.props.onEnded)
+      this.player.addEventListener('seek', this.props.onSeek)
+    })
+  }
+
+  play () {
+    this.callPlayer('play')
+  }
+
+  pause () {
+    this.callPlayer('pause')
+  }
+
+  stop () {
+    this.callPlayer('pause')
+  }
+
+  seekTo (seconds) {
+    this.callPlayer('seek', seconds)
+  }
+
+  setVolume (fraction) {
+  }
+
+  mute = () => {
+  }
+
+  unmute = () => {
+  }
+
+  getDuration () {
+    return this.callPlayer('getDuration')
+  }
+
+  getCurrentTime () {
+    return this.callPlayer('getCurrentTime')
+  }
+
+  getSecondsLoaded () {
+    return null
+  }
+
+  ref = div => {
+    this.div = div
+  }
+
+  render () {
+    const style = {
+      width: '73%',
+      height: '100%'
+    }
+    return (
+      <div style={style} ref={this.ref} id={this.playerID} />
+    )
+  }
+}
diff --git a/src/players/index.js b/src/players/index.js
index 0513b47c..29a247fb 100644
--- a/src/players/index.js
+++ b/src/players/index.js
@@ -69,6 +69,12 @@ export default [
     canPlay: canPlay.kaltura,
     lazyPlayer: lazy(() => import(/* webpackChunkName: 'reactPlayerKaltura' */'./Kaltura'))
   },
+  {
+    key: 'asciinema',
+    name: 'Asciinema',
+    canPlay: canPlay.asciinema,
+    lazyPlayer: lazy(() => import(/* webpackChunkName: 'reactPlayerAsciinema' */'./Asciinema'))
+  },
   {
     key: 'file',
     name: 'FilePlayer',
diff --git a/test/players/Asciinema.js b/test/players/Asciinema.js
new file mode 100644
index 00000000..fe9300af
--- /dev/null
+++ b/test/players/Asciinema.js
@@ -0,0 +1,64 @@
+import React from 'react'
+import test from 'ava'
+import sinon from 'sinon'
+import { configure, shallow } from 'enzyme'
+import Adapter from 'enzyme-adapter-react-16'
+import testPlayerMethods from '../helpers/testPlayerMethods'
+import * as utils from '../../src/utils'
+import Asciinema from '../../src/players/Asciinema'
+import { MATCH_URL_ASCIINEMA } from '../../src/patterns'
+
+configure({ adapter: new Adapter() })
+
+const TEST_URL = 'https://asciinema.org/a/597732.cast'
+const TEST_CONFIG = {
+  options: {}
+}
+
+const PLAYER_ID = TEST_URL.match(MATCH_URL_ASCIINEMA)[1]
+
+testPlayerMethods(Asciinema, {
+  play: 'play',
+  pause: 'pause',
+  stop: 'pause',
+  seekTo: 'seek',
+  getDuration: 'getDuration',
+  getCurrentTime: 'getCurrentTime',
+  getSecondsLoaded: null
+}, { config: TEST_CONFIG })
+
+test('load()', t => {
+  class Player {
+    constructor (id, options) {
+      t.true(id === PLAYER_ID)
+    }
+
+    addEventListener = (event, fn) => {
+      if (event === 'play') setTimeout(fn, 100)
+    }
+  }
+  const getSDK = sinon.stub(utils, 'getSDK').resolves({ Player })
+  return new Promise(resolve => {
+    const onReady = () => {
+      t.pass()
+      resolve()
+    }
+    const instance = shallow(
+      <Asciinema url={TEST_URL} onReady={onReady} config={TEST_CONFIG} />
+    ).instance()
+    instance.load(TEST_URL)
+    t.true(getSDK.calledOnce)
+    getSDK.restore()
+  })
+})
+
+test('render()', t => {
+  const style = {
+    width: '73%',
+    height: '100%'
+  }
+  const wrapper = shallow(<Asciinema url={TEST_URL} config={TEST_CONFIG} />)
+  t.true(wrapper.contains(
+    <div style={style} id={PLAYER_ID} />
+  ))
+})
diff --git a/yarn.lock b/yarn.lock
index c3fd3fb9..d398efde 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2326,9 +2326,9 @@ caniuse-api@^3.0.0:
     lodash.uniq "^4.5.0"
 
 caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001317:
-  version "1.0.30001402"
-  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001402.tgz"
-  integrity sha512-Mx4MlhXO5NwuvXGgVb+hg65HZ+bhUYsz8QtDGDo2QmaJS2GBX47Xfi2koL86lc8K+l+htXeTEB/Aeqvezoo6Ew==
+  version "1.0.30001517"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001517.tgz"
+  integrity sha512-Vdhm5S11DaFVLlyiKu4hiUTkpZu+y1KA/rZZqVQfOD5YdDT/eQKlkt7NaE0WGOFgX32diqt9MiP9CAiFeRklaA==
 
 chalk@^2.0.0, chalk@^2.1.0, chalk@^2.3.0, chalk@^2.4.1, chalk@^2.4.2:
   version "2.4.2"

From 1975d65a0307eef5ba21a56e6b704816779391be Mon Sep 17 00:00:00 2001
From: Jesse Portnoy <jesse@packman.io>
Date: Tue, 25 Jul 2023 21:44:21 +0100
Subject: [PATCH 02/10] Units pass.

---
 src/demo/App.js               |    2 +-
 src/demo/asciinema-player.css | 2703 +++++++++++++++++++++++++++++++++
 src/patterns.js               |    2 +-
 src/players/Asciinema.js      |   24 +-
 src/players/Kaltura.js        |    4 +-
 test/players/Asciinema.js     |   48 +-
 6 files changed, 2746 insertions(+), 37 deletions(-)
 create mode 100644 src/demo/asciinema-player.css

diff --git a/src/demo/App.js b/src/demo/App.js
index 47a83d7b..673c7ccf 100644
--- a/src/demo/App.js
+++ b/src/demo/App.js
@@ -360,7 +360,7 @@ class App extends Component {
               <tr>
                 <th>Asciinema</th>
                 <td>
-                  {this.renderLoadButton('https://asciinema.org/a/597732.cast', 'Test A')}
+                  {this.renderLoadButton('https://asciinema.org/a/597732', 'Test A')}
                   {this.renderLoadButton('https://asciinema.org/a/596325.cast', 'Test B')}
                 </td>
               </tr>
diff --git a/src/demo/asciinema-player.css b/src/demo/asciinema-player.css
new file mode 100644
index 00000000..442534c5
--- /dev/null
+++ b/src/demo/asciinema-player.css
@@ -0,0 +1,2703 @@
+div.ap-wrapper {
+  outline: none;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+}
+div.ap-wrapper .title-bar {
+  display: none;
+  top: -78px;
+  transition: top 0.15s linear;
+  position: absolute;
+  left: 0;
+  right: 0;
+  box-sizing: content-box;
+  font-size: 20px;
+  line-height: 1em;
+  padding: 15px;
+  font-family: sans-serif;
+  color: white;
+  background-color: rgba(0, 0, 0, 0.8);
+}
+div.ap-wrapper .title-bar img {
+  vertical-align: middle;
+  height: 48px;
+  margin-right: 16px;
+}
+div.ap-wrapper .title-bar a {
+  color: white;
+  text-decoration: underline;
+}
+div.ap-wrapper .title-bar a:hover {
+  text-decoration: none;
+}
+div.ap-wrapper:fullscreen {
+  background-color: #000;
+  width: 100%;
+  align-items: center;
+}
+div.ap-wrapper:fullscreen div.ap-player {
+  position: static;
+}
+div.ap-wrapper:fullscreen .title-bar {
+  display: initial;
+}
+div.ap-wrapper:fullscreen.hud .title-bar {
+  top: 0;
+}
+div.ap-wrapper div.ap-player {
+  text-align: left;
+  display: inline-block;
+  padding: 0px;
+  position: relative;
+  box-sizing: content-box;
+  overflow: hidden;
+  max-width: 100%;
+  border-radius: 4px;
+  font-size: 15px;
+}
+pre.ap-terminal {
+  box-sizing: content-box;
+  overflow: hidden;
+  padding: 0;
+  margin: 0px;
+  display: block;
+  white-space: pre;
+  border: 0;
+  word-wrap: normal;
+  word-break: normal;
+  border-radius: 0;
+  border-style: solid;
+  cursor: text;
+  border-width: 0.75em;
+  font-family: Consolas, Menlo, 'Bitstream Vera Sans Mono', monospace, 'Powerline Symbols';
+  font-variant-ligatures: none;
+}
+pre.ap-terminal .ap-line {
+  letter-spacing: normal;
+  overflow: hidden;
+}
+pre.ap-terminal .ap-line span {
+  padding: 0;
+  display: inline-block;
+  height: 100%;
+}
+pre.ap-terminal .ap-line {
+  display: block;
+  width: 200%;
+}
+pre.ap-terminal .ap-line .ap-cursor-a {
+  display: inline-block;
+}
+pre.ap-terminal .ap-line .ap-cursor-b {
+  display: none;
+  border-radius: 0.05em;
+}
+pre.ap-terminal .ap-line .ap-blink {
+  visibility: hidden;
+}
+pre.ap-terminal.ap-cursor .ap-line .ap-cursor-a {
+  display: none;
+}
+pre.ap-terminal.ap-cursor .ap-line .ap-cursor-b {
+  display: inline-block;
+}
+pre.ap-terminal.ap-blink .ap-line .ap-blink {
+  visibility: visible;
+}
+pre.ap-terminal .ap-bright {
+  font-weight: bold;
+}
+pre.ap-terminal .ap-faint {
+  opacity: 0.5;
+}
+pre.ap-terminal .ap-underline {
+  text-decoration: underline;
+}
+pre.ap-terminal .ap-italic {
+  font-style: italic;
+}
+pre.ap-terminal .ap-strikethrough {
+  text-decoration: line-through;
+}
+div.ap-player div.ap-control-bar {
+  width: 100%;
+  height: 32px;
+  display: flex;
+  justify-content: space-between;
+  align-items: stretch;
+  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, #000000 25%, #000000 100%);
+  color: #bbb;
+  box-sizing: content-box;
+  line-height: 1;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  opacity: 0;
+  transition: opacity 0.15s linear;
+  user-select: none;
+  z-index: 30;
+}
+div.ap-player div.ap-control-bar * {
+  box-sizing: inherit;
+  font-size: 0;
+  font-family: Helvetica, Arial, sans-serif;
+  font-weight: bold;
+}
+div.ap-control-bar svg.ap-icon path {
+  fill: #bbb;
+}
+div.ap-control-bar span.ap-playback-button {
+  display: block;
+  flex: 0 0 auto;
+  cursor: pointer;
+  height: 12px;
+  width: 12px;
+  padding: 10px;
+}
+div.ap-control-bar span.ap-playback-button svg {
+  height: 12px;
+  width: 12px;
+}
+div.ap-control-bar span.ap-timer {
+  display: block;
+  flex: 0 0 auto;
+  width: 50px;
+  height: 100%;
+  text-align: center;
+  font-size: 11px;
+  line-height: 34px;
+  cursor: default;
+}
+div.ap-control-bar span.ap-timer span {
+  display: inline-block;
+  font-size: inherit;
+}
+div.ap-control-bar span.ap-timer .ap-time-remaining {
+  display: none;
+}
+div.ap-control-bar span.ap-timer:hover .ap-time-elapsed {
+  display: none;
+}
+div.ap-control-bar span.ap-timer:hover .ap-time-remaining {
+  display: inline;
+}
+div.ap-control-bar .ap-progressbar {
+  display: block;
+  flex: 1 1 auto;
+  height: 100%;
+  padding: 0 10px;
+}
+div.ap-control-bar .ap-progressbar .ap-bar {
+  display: block;
+  position: relative;
+  cursor: default;
+  height: 100%;
+  font-size: 0;
+}
+div.ap-control-bar .ap-progressbar .ap-bar .ap-gutter {
+  display: block;
+  position: absolute;
+  top: 15px;
+  left: 0;
+  right: 0;
+  height: 3px;
+  background-color: #333;
+}
+div.ap-control-bar .ap-progressbar .ap-bar .ap-gutter .ap-gutter-fill {
+  display: inline-block;
+  height: 100%;
+  background-color: #bbb;
+  border-radius: 3px;
+  z-index: 10;
+}
+div.ap-control-bar.ap-seekable .ap-progressbar .ap-bar {
+  cursor: pointer;
+}
+div.ap-control-bar .ap-fullscreen-button {
+  display: block;
+  flex: 0 0 auto;
+  width: 14px;
+  height: 14px;
+  padding: 9px;
+  cursor: pointer;
+}
+div.ap-control-bar .ap-fullscreen-button svg {
+  width: 14px;
+  height: 14px;
+}
+div.ap-control-bar .ap-fullscreen-button svg:first-child {
+  display: inline;
+}
+div.ap-control-bar .ap-fullscreen-button svg:last-child {
+  display: none;
+}
+div.ap-wrapper.ap-hud .ap-control-bar {
+  opacity: 1;
+}
+div.ap-wrapper:fullscreen .ap-fullscreen-button svg:first-child {
+  display: none;
+}
+div.ap-wrapper:fullscreen .ap-fullscreen-button svg:last-child {
+  display: inline;
+}
+span.ap-progressbar span.ap-marker-container {
+  display: block;
+  top: 0;
+  bottom: 0;
+  width: 21px;
+  position: absolute;
+  margin-left: -10px;
+  z-index: 9;
+}
+span.ap-marker-container span.ap-marker {
+  display: block;
+  top: 13px;
+  bottom: 12px;
+  left: 7px;
+  right: 7px;
+  background-color: #555;
+  position: absolute;
+  transition: top 0.1s, bottom 0.1s, left 0.1s, right 0.1s, background-color 0.1s;
+  border-radius: 50%;
+}
+span.ap-marker-container span.ap-marker.ap-marker-past {
+  background-color: #bbb;
+}
+span.ap-marker-container span.ap-marker:hover,
+span.ap-marker-container:hover span.ap-marker {
+  background-color: #bbb;
+  top: 11px;
+  bottom: 10px;
+  left: 5px;
+  right: 5px;
+}
+span.ap-marker-container span.ap-marker-tooltip {
+  visibility: hidden;
+  background-color: #333;
+  color: #bbb;
+  text-align: center;
+  padding: 2px 8px 0px 8px;
+  border-radius: 4px;
+  position: absolute;
+  z-index: 1;
+  white-space: nowrap;
+  /* Prevents the text from wrapping and makes sure the tooltip width adapts to the text length */
+  font-size: 11px;
+  line-height: 2em;
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+}
+span.ap-marker-container:hover span.ap-marker-tooltip {
+  visibility: visible;
+}
+.ap-player .ap-overlay {
+  z-index: 10;
+  background-repeat: no-repeat;
+  background-position: center;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.ap-player .ap-overlay-start {
+  cursor: pointer;
+}
+.ap-player .ap-overlay-start .ap-play-button {
+  font-size: 0px;
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  text-align: center;
+  color: white;
+  height: 80px;
+  max-height: 66%;
+  margin: auto;
+}
+.ap-player .ap-overlay-start .ap-play-button div {
+  height: 100%;
+}
+.ap-player .ap-overlay-start .ap-play-button div span {
+  height: 100%;
+  display: block;
+}
+.ap-player .ap-overlay-start .ap-play-button div span svg {
+  height: 100%;
+}
+.ap-player .ap-overlay-loading .ap-loader {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  display: inline-block;
+  position: relative;
+  border: 10px solid;
+  border-color: rgba(255, 255, 255, 0.15) rgba(255, 255, 255, 0.25) rgba(255, 255, 255, 0.35) rgba(255, 255, 255, 0.5);
+  box-sizing: border-box;
+  animation: ap-loader-rotation 1s linear infinite;
+}
+.ap-player .ap-overlay-offline span {
+  font-family: Consolas, Menlo, 'Bitstream Vera Sans Mono', monospace, 'Powerline Symbols';
+  font-variant-ligatures: none;
+  font-size: 2em;
+}
+.ap-player .ap-overlay-offline span .ap-line {
+  letter-spacing: normal;
+  overflow: hidden;
+}
+.ap-player .ap-overlay-offline span .ap-line span {
+  padding: 0;
+  display: inline-block;
+  height: 100%;
+}
+.ap-player .ap-overlay-error span {
+  font-size: 8em;
+}
+@keyframes ap-loader-rotation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+.ap-terminal .fg-16 {
+  color: #000000;
+}
+.ap-terminal .bg-16 {
+  background-color: #000000;
+}
+.ap-terminal .fg-17 {
+  color: #00005f;
+}
+.ap-terminal .bg-17 {
+  background-color: #00005f;
+}
+.ap-terminal .fg-18 {
+  color: #000087;
+}
+.ap-terminal .bg-18 {
+  background-color: #000087;
+}
+.ap-terminal .fg-19 {
+  color: #0000af;
+}
+.ap-terminal .bg-19 {
+  background-color: #0000af;
+}
+.ap-terminal .fg-20 {
+  color: #0000d7;
+}
+.ap-terminal .bg-20 {
+  background-color: #0000d7;
+}
+.ap-terminal .fg-21 {
+  color: #0000ff;
+}
+.ap-terminal .bg-21 {
+  background-color: #0000ff;
+}
+.ap-terminal .fg-22 {
+  color: #005f00;
+}
+.ap-terminal .bg-22 {
+  background-color: #005f00;
+}
+.ap-terminal .fg-23 {
+  color: #005f5f;
+}
+.ap-terminal .bg-23 {
+  background-color: #005f5f;
+}
+.ap-terminal .fg-24 {
+  color: #005f87;
+}
+.ap-terminal .bg-24 {
+  background-color: #005f87;
+}
+.ap-terminal .fg-25 {
+  color: #005faf;
+}
+.ap-terminal .bg-25 {
+  background-color: #005faf;
+}
+.ap-terminal .fg-26 {
+  color: #005fd7;
+}
+.ap-terminal .bg-26 {
+  background-color: #005fd7;
+}
+.ap-terminal .fg-27 {
+  color: #005fff;
+}
+.ap-terminal .bg-27 {
+  background-color: #005fff;
+}
+.ap-terminal .fg-28 {
+  color: #008700;
+}
+.ap-terminal .bg-28 {
+  background-color: #008700;
+}
+.ap-terminal .fg-29 {
+  color: #00875f;
+}
+.ap-terminal .bg-29 {
+  background-color: #00875f;
+}
+.ap-terminal .fg-30 {
+  color: #008787;
+}
+.ap-terminal .bg-30 {
+  background-color: #008787;
+}
+.ap-terminal .fg-31 {
+  color: #0087af;
+}
+.ap-terminal .bg-31 {
+  background-color: #0087af;
+}
+.ap-terminal .fg-32 {
+  color: #0087d7;
+}
+.ap-terminal .bg-32 {
+  background-color: #0087d7;
+}
+.ap-terminal .fg-33 {
+  color: #0087ff;
+}
+.ap-terminal .bg-33 {
+  background-color: #0087ff;
+}
+.ap-terminal .fg-34 {
+  color: #00af00;
+}
+.ap-terminal .bg-34 {
+  background-color: #00af00;
+}
+.ap-terminal .fg-35 {
+  color: #00af5f;
+}
+.ap-terminal .bg-35 {
+  background-color: #00af5f;
+}
+.ap-terminal .fg-36 {
+  color: #00af87;
+}
+.ap-terminal .bg-36 {
+  background-color: #00af87;
+}
+.ap-terminal .fg-37 {
+  color: #00afaf;
+}
+.ap-terminal .bg-37 {
+  background-color: #00afaf;
+}
+.ap-terminal .fg-38 {
+  color: #00afd7;
+}
+.ap-terminal .bg-38 {
+  background-color: #00afd7;
+}
+.ap-terminal .fg-39 {
+  color: #00afff;
+}
+.ap-terminal .bg-39 {
+  background-color: #00afff;
+}
+.ap-terminal .fg-40 {
+  color: #00d700;
+}
+.ap-terminal .bg-40 {
+  background-color: #00d700;
+}
+.ap-terminal .fg-41 {
+  color: #00d75f;
+}
+.ap-terminal .bg-41 {
+  background-color: #00d75f;
+}
+.ap-terminal .fg-42 {
+  color: #00d787;
+}
+.ap-terminal .bg-42 {
+  background-color: #00d787;
+}
+.ap-terminal .fg-43 {
+  color: #00d7af;
+}
+.ap-terminal .bg-43 {
+  background-color: #00d7af;
+}
+.ap-terminal .fg-44 {
+  color: #00d7d7;
+}
+.ap-terminal .bg-44 {
+  background-color: #00d7d7;
+}
+.ap-terminal .fg-45 {
+  color: #00d7ff;
+}
+.ap-terminal .bg-45 {
+  background-color: #00d7ff;
+}
+.ap-terminal .fg-46 {
+  color: #00ff00;
+}
+.ap-terminal .bg-46 {
+  background-color: #00ff00;
+}
+.ap-terminal .fg-47 {
+  color: #00ff5f;
+}
+.ap-terminal .bg-47 {
+  background-color: #00ff5f;
+}
+.ap-terminal .fg-48 {
+  color: #00ff87;
+}
+.ap-terminal .bg-48 {
+  background-color: #00ff87;
+}
+.ap-terminal .fg-49 {
+  color: #00ffaf;
+}
+.ap-terminal .bg-49 {
+  background-color: #00ffaf;
+}
+.ap-terminal .fg-50 {
+  color: #00ffd7;
+}
+.ap-terminal .bg-50 {
+  background-color: #00ffd7;
+}
+.ap-terminal .fg-51 {
+  color: #00ffff;
+}
+.ap-terminal .bg-51 {
+  background-color: #00ffff;
+}
+.ap-terminal .fg-52 {
+  color: #5f0000;
+}
+.ap-terminal .bg-52 {
+  background-color: #5f0000;
+}
+.ap-terminal .fg-53 {
+  color: #5f005f;
+}
+.ap-terminal .bg-53 {
+  background-color: #5f005f;
+}
+.ap-terminal .fg-54 {
+  color: #5f0087;
+}
+.ap-terminal .bg-54 {
+  background-color: #5f0087;
+}
+.ap-terminal .fg-55 {
+  color: #5f00af;
+}
+.ap-terminal .bg-55 {
+  background-color: #5f00af;
+}
+.ap-terminal .fg-56 {
+  color: #5f00d7;
+}
+.ap-terminal .bg-56 {
+  background-color: #5f00d7;
+}
+.ap-terminal .fg-57 {
+  color: #5f00ff;
+}
+.ap-terminal .bg-57 {
+  background-color: #5f00ff;
+}
+.ap-terminal .fg-58 {
+  color: #5f5f00;
+}
+.ap-terminal .bg-58 {
+  background-color: #5f5f00;
+}
+.ap-terminal .fg-59 {
+  color: #5f5f5f;
+}
+.ap-terminal .bg-59 {
+  background-color: #5f5f5f;
+}
+.ap-terminal .fg-60 {
+  color: #5f5f87;
+}
+.ap-terminal .bg-60 {
+  background-color: #5f5f87;
+}
+.ap-terminal .fg-61 {
+  color: #5f5faf;
+}
+.ap-terminal .bg-61 {
+  background-color: #5f5faf;
+}
+.ap-terminal .fg-62 {
+  color: #5f5fd7;
+}
+.ap-terminal .bg-62 {
+  background-color: #5f5fd7;
+}
+.ap-terminal .fg-63 {
+  color: #5f5fff;
+}
+.ap-terminal .bg-63 {
+  background-color: #5f5fff;
+}
+.ap-terminal .fg-64 {
+  color: #5f8700;
+}
+.ap-terminal .bg-64 {
+  background-color: #5f8700;
+}
+.ap-terminal .fg-65 {
+  color: #5f875f;
+}
+.ap-terminal .bg-65 {
+  background-color: #5f875f;
+}
+.ap-terminal .fg-66 {
+  color: #5f8787;
+}
+.ap-terminal .bg-66 {
+  background-color: #5f8787;
+}
+.ap-terminal .fg-67 {
+  color: #5f87af;
+}
+.ap-terminal .bg-67 {
+  background-color: #5f87af;
+}
+.ap-terminal .fg-68 {
+  color: #5f87d7;
+}
+.ap-terminal .bg-68 {
+  background-color: #5f87d7;
+}
+.ap-terminal .fg-69 {
+  color: #5f87ff;
+}
+.ap-terminal .bg-69 {
+  background-color: #5f87ff;
+}
+.ap-terminal .fg-70 {
+  color: #5faf00;
+}
+.ap-terminal .bg-70 {
+  background-color: #5faf00;
+}
+.ap-terminal .fg-71 {
+  color: #5faf5f;
+}
+.ap-terminal .bg-71 {
+  background-color: #5faf5f;
+}
+.ap-terminal .fg-72 {
+  color: #5faf87;
+}
+.ap-terminal .bg-72 {
+  background-color: #5faf87;
+}
+.ap-terminal .fg-73 {
+  color: #5fafaf;
+}
+.ap-terminal .bg-73 {
+  background-color: #5fafaf;
+}
+.ap-terminal .fg-74 {
+  color: #5fafd7;
+}
+.ap-terminal .bg-74 {
+  background-color: #5fafd7;
+}
+.ap-terminal .fg-75 {
+  color: #5fafff;
+}
+.ap-terminal .bg-75 {
+  background-color: #5fafff;
+}
+.ap-terminal .fg-76 {
+  color: #5fd700;
+}
+.ap-terminal .bg-76 {
+  background-color: #5fd700;
+}
+.ap-terminal .fg-77 {
+  color: #5fd75f;
+}
+.ap-terminal .bg-77 {
+  background-color: #5fd75f;
+}
+.ap-terminal .fg-78 {
+  color: #5fd787;
+}
+.ap-terminal .bg-78 {
+  background-color: #5fd787;
+}
+.ap-terminal .fg-79 {
+  color: #5fd7af;
+}
+.ap-terminal .bg-79 {
+  background-color: #5fd7af;
+}
+.ap-terminal .fg-80 {
+  color: #5fd7d7;
+}
+.ap-terminal .bg-80 {
+  background-color: #5fd7d7;
+}
+.ap-terminal .fg-81 {
+  color: #5fd7ff;
+}
+.ap-terminal .bg-81 {
+  background-color: #5fd7ff;
+}
+.ap-terminal .fg-82 {
+  color: #5fff00;
+}
+.ap-terminal .bg-82 {
+  background-color: #5fff00;
+}
+.ap-terminal .fg-83 {
+  color: #5fff5f;
+}
+.ap-terminal .bg-83 {
+  background-color: #5fff5f;
+}
+.ap-terminal .fg-84 {
+  color: #5fff87;
+}
+.ap-terminal .bg-84 {
+  background-color: #5fff87;
+}
+.ap-terminal .fg-85 {
+  color: #5fffaf;
+}
+.ap-terminal .bg-85 {
+  background-color: #5fffaf;
+}
+.ap-terminal .fg-86 {
+  color: #5fffd7;
+}
+.ap-terminal .bg-86 {
+  background-color: #5fffd7;
+}
+.ap-terminal .fg-87 {
+  color: #5fffff;
+}
+.ap-terminal .bg-87 {
+  background-color: #5fffff;
+}
+.ap-terminal .fg-88 {
+  color: #870000;
+}
+.ap-terminal .bg-88 {
+  background-color: #870000;
+}
+.ap-terminal .fg-89 {
+  color: #87005f;
+}
+.ap-terminal .bg-89 {
+  background-color: #87005f;
+}
+.ap-terminal .fg-90 {
+  color: #870087;
+}
+.ap-terminal .bg-90 {
+  background-color: #870087;
+}
+.ap-terminal .fg-91 {
+  color: #8700af;
+}
+.ap-terminal .bg-91 {
+  background-color: #8700af;
+}
+.ap-terminal .fg-92 {
+  color: #8700d7;
+}
+.ap-terminal .bg-92 {
+  background-color: #8700d7;
+}
+.ap-terminal .fg-93 {
+  color: #8700ff;
+}
+.ap-terminal .bg-93 {
+  background-color: #8700ff;
+}
+.ap-terminal .fg-94 {
+  color: #875f00;
+}
+.ap-terminal .bg-94 {
+  background-color: #875f00;
+}
+.ap-terminal .fg-95 {
+  color: #875f5f;
+}
+.ap-terminal .bg-95 {
+  background-color: #875f5f;
+}
+.ap-terminal .fg-96 {
+  color: #875f87;
+}
+.ap-terminal .bg-96 {
+  background-color: #875f87;
+}
+.ap-terminal .fg-97 {
+  color: #875faf;
+}
+.ap-terminal .bg-97 {
+  background-color: #875faf;
+}
+.ap-terminal .fg-98 {
+  color: #875fd7;
+}
+.ap-terminal .bg-98 {
+  background-color: #875fd7;
+}
+.ap-terminal .fg-99 {
+  color: #875fff;
+}
+.ap-terminal .bg-99 {
+  background-color: #875fff;
+}
+.ap-terminal .fg-100 {
+  color: #878700;
+}
+.ap-terminal .bg-100 {
+  background-color: #878700;
+}
+.ap-terminal .fg-101 {
+  color: #87875f;
+}
+.ap-terminal .bg-101 {
+  background-color: #87875f;
+}
+.ap-terminal .fg-102 {
+  color: #878787;
+}
+.ap-terminal .bg-102 {
+  background-color: #878787;
+}
+.ap-terminal .fg-103 {
+  color: #8787af;
+}
+.ap-terminal .bg-103 {
+  background-color: #8787af;
+}
+.ap-terminal .fg-104 {
+  color: #8787d7;
+}
+.ap-terminal .bg-104 {
+  background-color: #8787d7;
+}
+.ap-terminal .fg-105 {
+  color: #8787ff;
+}
+.ap-terminal .bg-105 {
+  background-color: #8787ff;
+}
+.ap-terminal .fg-106 {
+  color: #87af00;
+}
+.ap-terminal .bg-106 {
+  background-color: #87af00;
+}
+.ap-terminal .fg-107 {
+  color: #87af5f;
+}
+.ap-terminal .bg-107 {
+  background-color: #87af5f;
+}
+.ap-terminal .fg-108 {
+  color: #87af87;
+}
+.ap-terminal .bg-108 {
+  background-color: #87af87;
+}
+.ap-terminal .fg-109 {
+  color: #87afaf;
+}
+.ap-terminal .bg-109 {
+  background-color: #87afaf;
+}
+.ap-terminal .fg-110 {
+  color: #87afd7;
+}
+.ap-terminal .bg-110 {
+  background-color: #87afd7;
+}
+.ap-terminal .fg-111 {
+  color: #87afff;
+}
+.ap-terminal .bg-111 {
+  background-color: #87afff;
+}
+.ap-terminal .fg-112 {
+  color: #87d700;
+}
+.ap-terminal .bg-112 {
+  background-color: #87d700;
+}
+.ap-terminal .fg-113 {
+  color: #87d75f;
+}
+.ap-terminal .bg-113 {
+  background-color: #87d75f;
+}
+.ap-terminal .fg-114 {
+  color: #87d787;
+}
+.ap-terminal .bg-114 {
+  background-color: #87d787;
+}
+.ap-terminal .fg-115 {
+  color: #87d7af;
+}
+.ap-terminal .bg-115 {
+  background-color: #87d7af;
+}
+.ap-terminal .fg-116 {
+  color: #87d7d7;
+}
+.ap-terminal .bg-116 {
+  background-color: #87d7d7;
+}
+.ap-terminal .fg-117 {
+  color: #87d7ff;
+}
+.ap-terminal .bg-117 {
+  background-color: #87d7ff;
+}
+.ap-terminal .fg-118 {
+  color: #87ff00;
+}
+.ap-terminal .bg-118 {
+  background-color: #87ff00;
+}
+.ap-terminal .fg-119 {
+  color: #87ff5f;
+}
+.ap-terminal .bg-119 {
+  background-color: #87ff5f;
+}
+.ap-terminal .fg-120 {
+  color: #87ff87;
+}
+.ap-terminal .bg-120 {
+  background-color: #87ff87;
+}
+.ap-terminal .fg-121 {
+  color: #87ffaf;
+}
+.ap-terminal .bg-121 {
+  background-color: #87ffaf;
+}
+.ap-terminal .fg-122 {
+  color: #87ffd7;
+}
+.ap-terminal .bg-122 {
+  background-color: #87ffd7;
+}
+.ap-terminal .fg-123 {
+  color: #87ffff;
+}
+.ap-terminal .bg-123 {
+  background-color: #87ffff;
+}
+.ap-terminal .fg-124 {
+  color: #af0000;
+}
+.ap-terminal .bg-124 {
+  background-color: #af0000;
+}
+.ap-terminal .fg-125 {
+  color: #af005f;
+}
+.ap-terminal .bg-125 {
+  background-color: #af005f;
+}
+.ap-terminal .fg-126 {
+  color: #af0087;
+}
+.ap-terminal .bg-126 {
+  background-color: #af0087;
+}
+.ap-terminal .fg-127 {
+  color: #af00af;
+}
+.ap-terminal .bg-127 {
+  background-color: #af00af;
+}
+.ap-terminal .fg-128 {
+  color: #af00d7;
+}
+.ap-terminal .bg-128 {
+  background-color: #af00d7;
+}
+.ap-terminal .fg-129 {
+  color: #af00ff;
+}
+.ap-terminal .bg-129 {
+  background-color: #af00ff;
+}
+.ap-terminal .fg-130 {
+  color: #af5f00;
+}
+.ap-terminal .bg-130 {
+  background-color: #af5f00;
+}
+.ap-terminal .fg-131 {
+  color: #af5f5f;
+}
+.ap-terminal .bg-131 {
+  background-color: #af5f5f;
+}
+.ap-terminal .fg-132 {
+  color: #af5f87;
+}
+.ap-terminal .bg-132 {
+  background-color: #af5f87;
+}
+.ap-terminal .fg-133 {
+  color: #af5faf;
+}
+.ap-terminal .bg-133 {
+  background-color: #af5faf;
+}
+.ap-terminal .fg-134 {
+  color: #af5fd7;
+}
+.ap-terminal .bg-134 {
+  background-color: #af5fd7;
+}
+.ap-terminal .fg-135 {
+  color: #af5fff;
+}
+.ap-terminal .bg-135 {
+  background-color: #af5fff;
+}
+.ap-terminal .fg-136 {
+  color: #af8700;
+}
+.ap-terminal .bg-136 {
+  background-color: #af8700;
+}
+.ap-terminal .fg-137 {
+  color: #af875f;
+}
+.ap-terminal .bg-137 {
+  background-color: #af875f;
+}
+.ap-terminal .fg-138 {
+  color: #af8787;
+}
+.ap-terminal .bg-138 {
+  background-color: #af8787;
+}
+.ap-terminal .fg-139 {
+  color: #af87af;
+}
+.ap-terminal .bg-139 {
+  background-color: #af87af;
+}
+.ap-terminal .fg-140 {
+  color: #af87d7;
+}
+.ap-terminal .bg-140 {
+  background-color: #af87d7;
+}
+.ap-terminal .fg-141 {
+  color: #af87ff;
+}
+.ap-terminal .bg-141 {
+  background-color: #af87ff;
+}
+.ap-terminal .fg-142 {
+  color: #afaf00;
+}
+.ap-terminal .bg-142 {
+  background-color: #afaf00;
+}
+.ap-terminal .fg-143 {
+  color: #afaf5f;
+}
+.ap-terminal .bg-143 {
+  background-color: #afaf5f;
+}
+.ap-terminal .fg-144 {
+  color: #afaf87;
+}
+.ap-terminal .bg-144 {
+  background-color: #afaf87;
+}
+.ap-terminal .fg-145 {
+  color: #afafaf;
+}
+.ap-terminal .bg-145 {
+  background-color: #afafaf;
+}
+.ap-terminal .fg-146 {
+  color: #afafd7;
+}
+.ap-terminal .bg-146 {
+  background-color: #afafd7;
+}
+.ap-terminal .fg-147 {
+  color: #afafff;
+}
+.ap-terminal .bg-147 {
+  background-color: #afafff;
+}
+.ap-terminal .fg-148 {
+  color: #afd700;
+}
+.ap-terminal .bg-148 {
+  background-color: #afd700;
+}
+.ap-terminal .fg-149 {
+  color: #afd75f;
+}
+.ap-terminal .bg-149 {
+  background-color: #afd75f;
+}
+.ap-terminal .fg-150 {
+  color: #afd787;
+}
+.ap-terminal .bg-150 {
+  background-color: #afd787;
+}
+.ap-terminal .fg-151 {
+  color: #afd7af;
+}
+.ap-terminal .bg-151 {
+  background-color: #afd7af;
+}
+.ap-terminal .fg-152 {
+  color: #afd7d7;
+}
+.ap-terminal .bg-152 {
+  background-color: #afd7d7;
+}
+.ap-terminal .fg-153 {
+  color: #afd7ff;
+}
+.ap-terminal .bg-153 {
+  background-color: #afd7ff;
+}
+.ap-terminal .fg-154 {
+  color: #afff00;
+}
+.ap-terminal .bg-154 {
+  background-color: #afff00;
+}
+.ap-terminal .fg-155 {
+  color: #afff5f;
+}
+.ap-terminal .bg-155 {
+  background-color: #afff5f;
+}
+.ap-terminal .fg-156 {
+  color: #afff87;
+}
+.ap-terminal .bg-156 {
+  background-color: #afff87;
+}
+.ap-terminal .fg-157 {
+  color: #afffaf;
+}
+.ap-terminal .bg-157 {
+  background-color: #afffaf;
+}
+.ap-terminal .fg-158 {
+  color: #afffd7;
+}
+.ap-terminal .bg-158 {
+  background-color: #afffd7;
+}
+.ap-terminal .fg-159 {
+  color: #afffff;
+}
+.ap-terminal .bg-159 {
+  background-color: #afffff;
+}
+.ap-terminal .fg-160 {
+  color: #d70000;
+}
+.ap-terminal .bg-160 {
+  background-color: #d70000;
+}
+.ap-terminal .fg-161 {
+  color: #d7005f;
+}
+.ap-terminal .bg-161 {
+  background-color: #d7005f;
+}
+.ap-terminal .fg-162 {
+  color: #d70087;
+}
+.ap-terminal .bg-162 {
+  background-color: #d70087;
+}
+.ap-terminal .fg-163 {
+  color: #d700af;
+}
+.ap-terminal .bg-163 {
+  background-color: #d700af;
+}
+.ap-terminal .fg-164 {
+  color: #d700d7;
+}
+.ap-terminal .bg-164 {
+  background-color: #d700d7;
+}
+.ap-terminal .fg-165 {
+  color: #d700ff;
+}
+.ap-terminal .bg-165 {
+  background-color: #d700ff;
+}
+.ap-terminal .fg-166 {
+  color: #d75f00;
+}
+.ap-terminal .bg-166 {
+  background-color: #d75f00;
+}
+.ap-terminal .fg-167 {
+  color: #d75f5f;
+}
+.ap-terminal .bg-167 {
+  background-color: #d75f5f;
+}
+.ap-terminal .fg-168 {
+  color: #d75f87;
+}
+.ap-terminal .bg-168 {
+  background-color: #d75f87;
+}
+.ap-terminal .fg-169 {
+  color: #d75faf;
+}
+.ap-terminal .bg-169 {
+  background-color: #d75faf;
+}
+.ap-terminal .fg-170 {
+  color: #d75fd7;
+}
+.ap-terminal .bg-170 {
+  background-color: #d75fd7;
+}
+.ap-terminal .fg-171 {
+  color: #d75fff;
+}
+.ap-terminal .bg-171 {
+  background-color: #d75fff;
+}
+.ap-terminal .fg-172 {
+  color: #d78700;
+}
+.ap-terminal .bg-172 {
+  background-color: #d78700;
+}
+.ap-terminal .fg-173 {
+  color: #d7875f;
+}
+.ap-terminal .bg-173 {
+  background-color: #d7875f;
+}
+.ap-terminal .fg-174 {
+  color: #d78787;
+}
+.ap-terminal .bg-174 {
+  background-color: #d78787;
+}
+.ap-terminal .fg-175 {
+  color: #d787af;
+}
+.ap-terminal .bg-175 {
+  background-color: #d787af;
+}
+.ap-terminal .fg-176 {
+  color: #d787d7;
+}
+.ap-terminal .bg-176 {
+  background-color: #d787d7;
+}
+.ap-terminal .fg-177 {
+  color: #d787ff;
+}
+.ap-terminal .bg-177 {
+  background-color: #d787ff;
+}
+.ap-terminal .fg-178 {
+  color: #d7af00;
+}
+.ap-terminal .bg-178 {
+  background-color: #d7af00;
+}
+.ap-terminal .fg-179 {
+  color: #d7af5f;
+}
+.ap-terminal .bg-179 {
+  background-color: #d7af5f;
+}
+.ap-terminal .fg-180 {
+  color: #d7af87;
+}
+.ap-terminal .bg-180 {
+  background-color: #d7af87;
+}
+.ap-terminal .fg-181 {
+  color: #d7afaf;
+}
+.ap-terminal .bg-181 {
+  background-color: #d7afaf;
+}
+.ap-terminal .fg-182 {
+  color: #d7afd7;
+}
+.ap-terminal .bg-182 {
+  background-color: #d7afd7;
+}
+.ap-terminal .fg-183 {
+  color: #d7afff;
+}
+.ap-terminal .bg-183 {
+  background-color: #d7afff;
+}
+.ap-terminal .fg-184 {
+  color: #d7d700;
+}
+.ap-terminal .bg-184 {
+  background-color: #d7d700;
+}
+.ap-terminal .fg-185 {
+  color: #d7d75f;
+}
+.ap-terminal .bg-185 {
+  background-color: #d7d75f;
+}
+.ap-terminal .fg-186 {
+  color: #d7d787;
+}
+.ap-terminal .bg-186 {
+  background-color: #d7d787;
+}
+.ap-terminal .fg-187 {
+  color: #d7d7af;
+}
+.ap-terminal .bg-187 {
+  background-color: #d7d7af;
+}
+.ap-terminal .fg-188 {
+  color: #d7d7d7;
+}
+.ap-terminal .bg-188 {
+  background-color: #d7d7d7;
+}
+.ap-terminal .fg-189 {
+  color: #d7d7ff;
+}
+.ap-terminal .bg-189 {
+  background-color: #d7d7ff;
+}
+.ap-terminal .fg-190 {
+  color: #d7ff00;
+}
+.ap-terminal .bg-190 {
+  background-color: #d7ff00;
+}
+.ap-terminal .fg-191 {
+  color: #d7ff5f;
+}
+.ap-terminal .bg-191 {
+  background-color: #d7ff5f;
+}
+.ap-terminal .fg-192 {
+  color: #d7ff87;
+}
+.ap-terminal .bg-192 {
+  background-color: #d7ff87;
+}
+.ap-terminal .fg-193 {
+  color: #d7ffaf;
+}
+.ap-terminal .bg-193 {
+  background-color: #d7ffaf;
+}
+.ap-terminal .fg-194 {
+  color: #d7ffd7;
+}
+.ap-terminal .bg-194 {
+  background-color: #d7ffd7;
+}
+.ap-terminal .fg-195 {
+  color: #d7ffff;
+}
+.ap-terminal .bg-195 {
+  background-color: #d7ffff;
+}
+.ap-terminal .fg-196 {
+  color: #ff0000;
+}
+.ap-terminal .bg-196 {
+  background-color: #ff0000;
+}
+.ap-terminal .fg-197 {
+  color: #ff005f;
+}
+.ap-terminal .bg-197 {
+  background-color: #ff005f;
+}
+.ap-terminal .fg-198 {
+  color: #ff0087;
+}
+.ap-terminal .bg-198 {
+  background-color: #ff0087;
+}
+.ap-terminal .fg-199 {
+  color: #ff00af;
+}
+.ap-terminal .bg-199 {
+  background-color: #ff00af;
+}
+.ap-terminal .fg-200 {
+  color: #ff00d7;
+}
+.ap-terminal .bg-200 {
+  background-color: #ff00d7;
+}
+.ap-terminal .fg-201 {
+  color: #ff00ff;
+}
+.ap-terminal .bg-201 {
+  background-color: #ff00ff;
+}
+.ap-terminal .fg-202 {
+  color: #ff5f00;
+}
+.ap-terminal .bg-202 {
+  background-color: #ff5f00;
+}
+.ap-terminal .fg-203 {
+  color: #ff5f5f;
+}
+.ap-terminal .bg-203 {
+  background-color: #ff5f5f;
+}
+.ap-terminal .fg-204 {
+  color: #ff5f87;
+}
+.ap-terminal .bg-204 {
+  background-color: #ff5f87;
+}
+.ap-terminal .fg-205 {
+  color: #ff5faf;
+}
+.ap-terminal .bg-205 {
+  background-color: #ff5faf;
+}
+.ap-terminal .fg-206 {
+  color: #ff5fd7;
+}
+.ap-terminal .bg-206 {
+  background-color: #ff5fd7;
+}
+.ap-terminal .fg-207 {
+  color: #ff5fff;
+}
+.ap-terminal .bg-207 {
+  background-color: #ff5fff;
+}
+.ap-terminal .fg-208 {
+  color: #ff8700;
+}
+.ap-terminal .bg-208 {
+  background-color: #ff8700;
+}
+.ap-terminal .fg-209 {
+  color: #ff875f;
+}
+.ap-terminal .bg-209 {
+  background-color: #ff875f;
+}
+.ap-terminal .fg-210 {
+  color: #ff8787;
+}
+.ap-terminal .bg-210 {
+  background-color: #ff8787;
+}
+.ap-terminal .fg-211 {
+  color: #ff87af;
+}
+.ap-terminal .bg-211 {
+  background-color: #ff87af;
+}
+.ap-terminal .fg-212 {
+  color: #ff87d7;
+}
+.ap-terminal .bg-212 {
+  background-color: #ff87d7;
+}
+.ap-terminal .fg-213 {
+  color: #ff87ff;
+}
+.ap-terminal .bg-213 {
+  background-color: #ff87ff;
+}
+.ap-terminal .fg-214 {
+  color: #ffaf00;
+}
+.ap-terminal .bg-214 {
+  background-color: #ffaf00;
+}
+.ap-terminal .fg-215 {
+  color: #ffaf5f;
+}
+.ap-terminal .bg-215 {
+  background-color: #ffaf5f;
+}
+.ap-terminal .fg-216 {
+  color: #ffaf87;
+}
+.ap-terminal .bg-216 {
+  background-color: #ffaf87;
+}
+.ap-terminal .fg-217 {
+  color: #ffafaf;
+}
+.ap-terminal .bg-217 {
+  background-color: #ffafaf;
+}
+.ap-terminal .fg-218 {
+  color: #ffafd7;
+}
+.ap-terminal .bg-218 {
+  background-color: #ffafd7;
+}
+.ap-terminal .fg-219 {
+  color: #ffafff;
+}
+.ap-terminal .bg-219 {
+  background-color: #ffafff;
+}
+.ap-terminal .fg-220 {
+  color: #ffd700;
+}
+.ap-terminal .bg-220 {
+  background-color: #ffd700;
+}
+.ap-terminal .fg-221 {
+  color: #ffd75f;
+}
+.ap-terminal .bg-221 {
+  background-color: #ffd75f;
+}
+.ap-terminal .fg-222 {
+  color: #ffd787;
+}
+.ap-terminal .bg-222 {
+  background-color: #ffd787;
+}
+.ap-terminal .fg-223 {
+  color: #ffd7af;
+}
+.ap-terminal .bg-223 {
+  background-color: #ffd7af;
+}
+.ap-terminal .fg-224 {
+  color: #ffd7d7;
+}
+.ap-terminal .bg-224 {
+  background-color: #ffd7d7;
+}
+.ap-terminal .fg-225 {
+  color: #ffd7ff;
+}
+.ap-terminal .bg-225 {
+  background-color: #ffd7ff;
+}
+.ap-terminal .fg-226 {
+  color: #ffff00;
+}
+.ap-terminal .bg-226 {
+  background-color: #ffff00;
+}
+.ap-terminal .fg-227 {
+  color: #ffff5f;
+}
+.ap-terminal .bg-227 {
+  background-color: #ffff5f;
+}
+.ap-terminal .fg-228 {
+  color: #ffff87;
+}
+.ap-terminal .bg-228 {
+  background-color: #ffff87;
+}
+.ap-terminal .fg-229 {
+  color: #ffffaf;
+}
+.ap-terminal .bg-229 {
+  background-color: #ffffaf;
+}
+.ap-terminal .fg-230 {
+  color: #ffffd7;
+}
+.ap-terminal .bg-230 {
+  background-color: #ffffd7;
+}
+.ap-terminal .fg-231 {
+  color: #ffffff;
+}
+.ap-terminal .bg-231 {
+  background-color: #ffffff;
+}
+.ap-terminal .fg-232 {
+  color: #080808;
+}
+.ap-terminal .bg-232 {
+  background-color: #080808;
+}
+.ap-terminal .fg-233 {
+  color: #121212;
+}
+.ap-terminal .bg-233 {
+  background-color: #121212;
+}
+.ap-terminal .fg-234 {
+  color: #1c1c1c;
+}
+.ap-terminal .bg-234 {
+  background-color: #1c1c1c;
+}
+.ap-terminal .fg-235 {
+  color: #262626;
+}
+.ap-terminal .bg-235 {
+  background-color: #262626;
+}
+.ap-terminal .fg-236 {
+  color: #303030;
+}
+.ap-terminal .bg-236 {
+  background-color: #303030;
+}
+.ap-terminal .fg-237 {
+  color: #3a3a3a;
+}
+.ap-terminal .bg-237 {
+  background-color: #3a3a3a;
+}
+.ap-terminal .fg-238 {
+  color: #444444;
+}
+.ap-terminal .bg-238 {
+  background-color: #444444;
+}
+.ap-terminal .fg-239 {
+  color: #4e4e4e;
+}
+.ap-terminal .bg-239 {
+  background-color: #4e4e4e;
+}
+.ap-terminal .fg-240 {
+  color: #585858;
+}
+.ap-terminal .bg-240 {
+  background-color: #585858;
+}
+.ap-terminal .fg-241 {
+  color: #626262;
+}
+.ap-terminal .bg-241 {
+  background-color: #626262;
+}
+.ap-terminal .fg-242 {
+  color: #6c6c6c;
+}
+.ap-terminal .bg-242 {
+  background-color: #6c6c6c;
+}
+.ap-terminal .fg-243 {
+  color: #767676;
+}
+.ap-terminal .bg-243 {
+  background-color: #767676;
+}
+.ap-terminal .fg-244 {
+  color: #808080;
+}
+.ap-terminal .bg-244 {
+  background-color: #808080;
+}
+.ap-terminal .fg-245 {
+  color: #8a8a8a;
+}
+.ap-terminal .bg-245 {
+  background-color: #8a8a8a;
+}
+.ap-terminal .fg-246 {
+  color: #949494;
+}
+.ap-terminal .bg-246 {
+  background-color: #949494;
+}
+.ap-terminal .fg-247 {
+  color: #9e9e9e;
+}
+.ap-terminal .bg-247 {
+  background-color: #9e9e9e;
+}
+.ap-terminal .fg-248 {
+  color: #a8a8a8;
+}
+.ap-terminal .bg-248 {
+  background-color: #a8a8a8;
+}
+.ap-terminal .fg-249 {
+  color: #b2b2b2;
+}
+.ap-terminal .bg-249 {
+  background-color: #b2b2b2;
+}
+.ap-terminal .fg-250 {
+  color: #bcbcbc;
+}
+.ap-terminal .bg-250 {
+  background-color: #bcbcbc;
+}
+.ap-terminal .fg-251 {
+  color: #c6c6c6;
+}
+.ap-terminal .bg-251 {
+  background-color: #c6c6c6;
+}
+.ap-terminal .fg-252 {
+  color: #d0d0d0;
+}
+.ap-terminal .bg-252 {
+  background-color: #d0d0d0;
+}
+.ap-terminal .fg-253 {
+  color: #dadada;
+}
+.ap-terminal .bg-253 {
+  background-color: #dadada;
+}
+.ap-terminal .fg-254 {
+  color: #e4e4e4;
+}
+.ap-terminal .bg-254 {
+  background-color: #e4e4e4;
+}
+.ap-terminal .fg-255 {
+  color: #eeeeee;
+}
+.ap-terminal .bg-255 {
+  background-color: #eeeeee;
+}
+.asciinema-theme-asciinema {
+  background-color: #121314;
+}
+.asciinema-theme-asciinema pre.ap-terminal {
+  color: #CCCCCC;
+  background-color: #121314;
+  border-color: #121314;
+}
+.asciinema-theme-asciinema .fg-default {
+  color: #CCCCCC;
+}
+.asciinema-theme-asciinema .fg-bg {
+  color: #121314;
+}
+.asciinema-theme-asciinema .bg-default {
+  background-color: #121314;
+}
+.asciinema-theme-asciinema .bg-fg {
+  background-color: #CCCCCC;
+}
+.asciinema-theme-asciinema .fg-0 {
+  color: hsl(0, 0%, 0%);
+}
+.asciinema-theme-asciinema .bg-0 {
+  background-color: hsl(0, 0%, 0%);
+}
+.asciinema-theme-asciinema .fg-1 {
+  color: hsl(343, 70%, 55%);
+}
+.asciinema-theme-asciinema .bg-1 {
+  background-color: hsl(343, 70%, 55%);
+}
+.asciinema-theme-asciinema .fg-2 {
+  color: hsl(103, 70%, 44%);
+}
+.asciinema-theme-asciinema .bg-2 {
+  background-color: hsl(103, 70%, 44%);
+}
+.asciinema-theme-asciinema .fg-3 {
+  color: hsl(43, 70%, 55%);
+}
+.asciinema-theme-asciinema .bg-3 {
+  background-color: hsl(43, 70%, 55%);
+}
+.asciinema-theme-asciinema .fg-4 {
+  color: hsl(193, 70%, 49.5%);
+}
+.asciinema-theme-asciinema .bg-4 {
+  background-color: hsl(193, 70%, 49.5%);
+}
+.asciinema-theme-asciinema .fg-5 {
+  color: hsl(283, 70%, 60.5%);
+}
+.asciinema-theme-asciinema .bg-5 {
+  background-color: hsl(283, 70%, 60.5%);
+}
+.asciinema-theme-asciinema .fg-6 {
+  color: hsl(163, 70%, 60.5%);
+}
+.asciinema-theme-asciinema .bg-6 {
+  background-color: hsl(163, 70%, 60.5%);
+}
+.asciinema-theme-asciinema .fg-7 {
+  color: hsl(0, 0%, 85%);
+}
+.asciinema-theme-asciinema .bg-7 {
+  background-color: hsl(0, 0%, 85%);
+}
+.asciinema-theme-asciinema .fg-8 {
+  color: hsl(0, 0%, 30%);
+}
+.asciinema-theme-asciinema .bg-8 {
+  background-color: hsl(0, 0%, 30%);
+}
+.asciinema-theme-asciinema .fg-9 {
+  color: hsl(343, 70%, 55%);
+}
+.asciinema-theme-asciinema .bg-9 {
+  background-color: hsl(343, 70%, 55%);
+}
+.asciinema-theme-asciinema .fg-10 {
+  color: hsl(103, 70%, 44%);
+}
+.asciinema-theme-asciinema .bg-10 {
+  background-color: hsl(103, 70%, 44%);
+}
+.asciinema-theme-asciinema .fg-11 {
+  color: hsl(43, 70%, 55%);
+}
+.asciinema-theme-asciinema .bg-11 {
+  background-color: hsl(43, 70%, 55%);
+}
+.asciinema-theme-asciinema .fg-12 {
+  color: hsl(193, 70%, 49.5%);
+}
+.asciinema-theme-asciinema .bg-12 {
+  background-color: hsl(193, 70%, 49.5%);
+}
+.asciinema-theme-asciinema .fg-13 {
+  color: hsl(283, 70%, 60.5%);
+}
+.asciinema-theme-asciinema .bg-13 {
+  background-color: hsl(283, 70%, 60.5%);
+}
+.asciinema-theme-asciinema .fg-14 {
+  color: hsl(163, 70%, 60.5%);
+}
+.asciinema-theme-asciinema .bg-14 {
+  background-color: hsl(163, 70%, 60.5%);
+}
+.asciinema-theme-asciinema .fg-15 {
+  color: hsl(0, 0%, 100%);
+}
+.asciinema-theme-asciinema .bg-15 {
+  background-color: hsl(0, 0%, 100%);
+}
+.asciinema-theme-asciinema .ap-overlay-loading .ap-loader {
+  border-color: rgba(204, 204, 204, 0.3) rgba(204, 204, 204, 0.5) rgba(204, 204, 204, 0.7) #cccccc;
+}
+.asciinema-theme-asciinema .fg-8,
+.asciinema-theme-asciinema .fg-9,
+.asciinema-theme-asciinema .fg-10,
+.asciinema-theme-asciinema .fg-11,
+.asciinema-theme-asciinema .fg-12,
+.asciinema-theme-asciinema .fg-13,
+.asciinema-theme-asciinema .fg-14,
+.asciinema-theme-asciinema .fg-15 {
+  font-weight: bold;
+}
+.asciinema-theme-tango {
+  background-color: #121314;
+}
+.asciinema-theme-tango pre.ap-terminal {
+  color: #CCCCCC;
+  background-color: #121314;
+  border-color: #121314;
+}
+.asciinema-theme-tango .fg-default {
+  color: #CCCCCC;
+}
+.asciinema-theme-tango .fg-bg {
+  color: #121314;
+}
+.asciinema-theme-tango .bg-default {
+  background-color: #121314;
+}
+.asciinema-theme-tango .bg-fg {
+  background-color: #CCCCCC;
+}
+.asciinema-theme-tango .fg-0 {
+  color: #000000;
+}
+.asciinema-theme-tango .bg-0 {
+  background-color: #000000;
+}
+.asciinema-theme-tango .fg-1 {
+  color: #CC0000;
+}
+.asciinema-theme-tango .bg-1 {
+  background-color: #CC0000;
+}
+.asciinema-theme-tango .fg-2 {
+  color: #4E9A06;
+}
+.asciinema-theme-tango .bg-2 {
+  background-color: #4E9A06;
+}
+.asciinema-theme-tango .fg-3 {
+  color: #C4A000;
+}
+.asciinema-theme-tango .bg-3 {
+  background-color: #C4A000;
+}
+.asciinema-theme-tango .fg-4 {
+  color: #3465A4;
+}
+.asciinema-theme-tango .bg-4 {
+  background-color: #3465A4;
+}
+.asciinema-theme-tango .fg-5 {
+  color: #75507B;
+}
+.asciinema-theme-tango .bg-5 {
+  background-color: #75507B;
+}
+.asciinema-theme-tango .fg-6 {
+  color: #06989A;
+}
+.asciinema-theme-tango .bg-6 {
+  background-color: #06989A;
+}
+.asciinema-theme-tango .fg-7 {
+  color: #D3D7CF;
+}
+.asciinema-theme-tango .bg-7 {
+  background-color: #D3D7CF;
+}
+.asciinema-theme-tango .fg-8 {
+  color: #555753;
+}
+.asciinema-theme-tango .bg-8 {
+  background-color: #555753;
+}
+.asciinema-theme-tango .fg-9 {
+  color: #EF2929;
+}
+.asciinema-theme-tango .bg-9 {
+  background-color: #EF2929;
+}
+.asciinema-theme-tango .fg-10 {
+  color: #8AE234;
+}
+.asciinema-theme-tango .bg-10 {
+  background-color: #8AE234;
+}
+.asciinema-theme-tango .fg-11 {
+  color: #FCE94F;
+}
+.asciinema-theme-tango .bg-11 {
+  background-color: #FCE94F;
+}
+.asciinema-theme-tango .fg-12 {
+  color: #729FCF;
+}
+.asciinema-theme-tango .bg-12 {
+  background-color: #729FCF;
+}
+.asciinema-theme-tango .fg-13 {
+  color: #AD7FA8;
+}
+.asciinema-theme-tango .bg-13 {
+  background-color: #AD7FA8;
+}
+.asciinema-theme-tango .fg-14 {
+  color: #34E2E2;
+}
+.asciinema-theme-tango .bg-14 {
+  background-color: #34E2E2;
+}
+.asciinema-theme-tango .fg-15 {
+  color: #EEEEEC;
+}
+.asciinema-theme-tango .bg-15 {
+  background-color: #EEEEEC;
+}
+.asciinema-theme-tango .ap-overlay-loading .ap-loader {
+  border-color: rgba(204, 204, 204, 0.3) rgba(204, 204, 204, 0.5) rgba(204, 204, 204, 0.7) #cccccc;
+}
+.asciinema-theme-tango .fg-8,
+.asciinema-theme-tango .fg-9,
+.asciinema-theme-tango .fg-10,
+.asciinema-theme-tango .fg-11,
+.asciinema-theme-tango .fg-12,
+.asciinema-theme-tango .fg-13,
+.asciinema-theme-tango .fg-14,
+.asciinema-theme-tango .fg-15 {
+  font-weight: bold;
+}
+.asciinema-theme-solarized-dark {
+  background-color: #002b36;
+}
+.asciinema-theme-solarized-dark pre.ap-terminal {
+  color: #839496;
+  background-color: #002b36;
+  border-color: #002b36;
+}
+.asciinema-theme-solarized-dark .fg-default {
+  color: #839496;
+}
+.asciinema-theme-solarized-dark .fg-bg {
+  color: #002b36;
+}
+.asciinema-theme-solarized-dark .bg-default {
+  background-color: #002b36;
+}
+.asciinema-theme-solarized-dark .bg-fg {
+  background-color: #839496;
+}
+.asciinema-theme-solarized-dark .fg-0 {
+  color: #073642;
+}
+.asciinema-theme-solarized-dark .bg-0 {
+  background-color: #073642;
+}
+.asciinema-theme-solarized-dark .fg-1 {
+  color: #dc322f;
+}
+.asciinema-theme-solarized-dark .bg-1 {
+  background-color: #dc322f;
+}
+.asciinema-theme-solarized-dark .fg-2 {
+  color: #859900;
+}
+.asciinema-theme-solarized-dark .bg-2 {
+  background-color: #859900;
+}
+.asciinema-theme-solarized-dark .fg-3 {
+  color: #b58900;
+}
+.asciinema-theme-solarized-dark .bg-3 {
+  background-color: #b58900;
+}
+.asciinema-theme-solarized-dark .fg-4 {
+  color: #268bd2;
+}
+.asciinema-theme-solarized-dark .bg-4 {
+  background-color: #268bd2;
+}
+.asciinema-theme-solarized-dark .fg-5 {
+  color: #d33682;
+}
+.asciinema-theme-solarized-dark .bg-5 {
+  background-color: #d33682;
+}
+.asciinema-theme-solarized-dark .fg-6 {
+  color: #2aa198;
+}
+.asciinema-theme-solarized-dark .bg-6 {
+  background-color: #2aa198;
+}
+.asciinema-theme-solarized-dark .fg-7 {
+  color: #eee8d5;
+}
+.asciinema-theme-solarized-dark .bg-7 {
+  background-color: #eee8d5;
+}
+.asciinema-theme-solarized-dark .fg-8 {
+  color: #002b36;
+}
+.asciinema-theme-solarized-dark .bg-8 {
+  background-color: #002b36;
+}
+.asciinema-theme-solarized-dark .fg-9 {
+  color: #cb4b16;
+}
+.asciinema-theme-solarized-dark .bg-9 {
+  background-color: #cb4b16;
+}
+.asciinema-theme-solarized-dark .fg-10 {
+  color: #586e75;
+}
+.asciinema-theme-solarized-dark .bg-10 {
+  background-color: #586e75;
+}
+.asciinema-theme-solarized-dark .fg-11 {
+  color: #657b83;
+}
+.asciinema-theme-solarized-dark .bg-11 {
+  background-color: #657b83;
+}
+.asciinema-theme-solarized-dark .fg-12 {
+  color: #839496;
+}
+.asciinema-theme-solarized-dark .bg-12 {
+  background-color: #839496;
+}
+.asciinema-theme-solarized-dark .fg-13 {
+  color: #6c71c4;
+}
+.asciinema-theme-solarized-dark .bg-13 {
+  background-color: #6c71c4;
+}
+.asciinema-theme-solarized-dark .fg-14 {
+  color: #93a1a1;
+}
+.asciinema-theme-solarized-dark .bg-14 {
+  background-color: #93a1a1;
+}
+.asciinema-theme-solarized-dark .fg-15 {
+  color: #fdf6e3;
+}
+.asciinema-theme-solarized-dark .bg-15 {
+  background-color: #fdf6e3;
+}
+.asciinema-theme-solarized-dark .ap-overlay-loading .ap-loader {
+  border-color: rgba(131, 148, 150, 0.3) rgba(131, 148, 150, 0.5) rgba(131, 148, 150, 0.7) #839496;
+}
+.asciinema-theme-solarized-light {
+  background-color: #fdf6e3;
+}
+.asciinema-theme-solarized-light pre.ap-terminal {
+  color: #657b83;
+  background-color: #fdf6e3;
+  border-color: #fdf6e3;
+}
+.asciinema-theme-solarized-light .fg-default {
+  color: #657b83;
+}
+.asciinema-theme-solarized-light .fg-bg {
+  color: #fdf6e3;
+}
+.asciinema-theme-solarized-light .bg-default {
+  background-color: #fdf6e3;
+}
+.asciinema-theme-solarized-light .bg-fg {
+  background-color: #657b83;
+}
+.asciinema-theme-solarized-light .fg-0 {
+  color: #073642;
+}
+.asciinema-theme-solarized-light .bg-0 {
+  background-color: #073642;
+}
+.asciinema-theme-solarized-light .fg-1 {
+  color: #dc322f;
+}
+.asciinema-theme-solarized-light .bg-1 {
+  background-color: #dc322f;
+}
+.asciinema-theme-solarized-light .fg-2 {
+  color: #859900;
+}
+.asciinema-theme-solarized-light .bg-2 {
+  background-color: #859900;
+}
+.asciinema-theme-solarized-light .fg-3 {
+  color: #b58900;
+}
+.asciinema-theme-solarized-light .bg-3 {
+  background-color: #b58900;
+}
+.asciinema-theme-solarized-light .fg-4 {
+  color: #268bd2;
+}
+.asciinema-theme-solarized-light .bg-4 {
+  background-color: #268bd2;
+}
+.asciinema-theme-solarized-light .fg-5 {
+  color: #d33682;
+}
+.asciinema-theme-solarized-light .bg-5 {
+  background-color: #d33682;
+}
+.asciinema-theme-solarized-light .fg-6 {
+  color: #2aa198;
+}
+.asciinema-theme-solarized-light .bg-6 {
+  background-color: #2aa198;
+}
+.asciinema-theme-solarized-light .fg-7 {
+  color: #eee8d5;
+}
+.asciinema-theme-solarized-light .bg-7 {
+  background-color: #eee8d5;
+}
+.asciinema-theme-solarized-light .fg-8 {
+  color: #002b36;
+}
+.asciinema-theme-solarized-light .bg-8 {
+  background-color: #002b36;
+}
+.asciinema-theme-solarized-light .fg-9 {
+  color: #cb4b16;
+}
+.asciinema-theme-solarized-light .bg-9 {
+  background-color: #cb4b16;
+}
+.asciinema-theme-solarized-light .fg-10 {
+  color: #586e75;
+}
+.asciinema-theme-solarized-light .bg-10 {
+  background-color: #586e75;
+}
+.asciinema-theme-solarized-light .fg-11 {
+  color: #657c83;
+}
+.asciinema-theme-solarized-light .bg-11 {
+  background-color: #657c83;
+}
+.asciinema-theme-solarized-light .fg-12 {
+  color: #839496;
+}
+.asciinema-theme-solarized-light .bg-12 {
+  background-color: #839496;
+}
+.asciinema-theme-solarized-light .fg-13 {
+  color: #6c71c4;
+}
+.asciinema-theme-solarized-light .bg-13 {
+  background-color: #6c71c4;
+}
+.asciinema-theme-solarized-light .fg-14 {
+  color: #93a1a1;
+}
+.asciinema-theme-solarized-light .bg-14 {
+  background-color: #93a1a1;
+}
+.asciinema-theme-solarized-light .fg-15 {
+  color: #fdf6e3;
+}
+.asciinema-theme-solarized-light .bg-15 {
+  background-color: #fdf6e3;
+}
+.asciinema-theme-solarized-light .ap-overlay-loading .ap-loader {
+  border-color: rgba(101, 123, 131, 0.3) rgba(101, 123, 131, 0.5) rgba(101, 123, 131, 0.7) #657b83;
+}
+.asciinema-theme-solarized-light .ap-overlay-start .ap-play-button svg .ap-play-btn-fill {
+  fill: #dc322f;
+}
+.asciinema-theme-solarized-light .ap-overlay-start .ap-play-button svg .ap-play-btn-stroke {
+  stroke: #dc322f;
+}
+.asciinema-theme-seti {
+  background-color: #111213;
+}
+.asciinema-theme-seti pre.ap-terminal {
+  color: #cacecd;
+  background-color: #111213;
+  border-color: #111213;
+}
+.asciinema-theme-seti .fg-default {
+  color: #cacecd;
+}
+.asciinema-theme-seti .fg-bg {
+  color: #111213;
+}
+.asciinema-theme-seti .bg-default {
+  background-color: #111213;
+}
+.asciinema-theme-seti .bg-fg {
+  background-color: #cacecd;
+}
+.asciinema-theme-seti .fg-0 {
+  color: #323232;
+}
+.asciinema-theme-seti .bg-0 {
+  background-color: #323232;
+}
+.asciinema-theme-seti .fg-1 {
+  color: #c22832;
+}
+.asciinema-theme-seti .bg-1 {
+  background-color: #c22832;
+}
+.asciinema-theme-seti .fg-2 {
+  color: #8ec43d;
+}
+.asciinema-theme-seti .bg-2 {
+  background-color: #8ec43d;
+}
+.asciinema-theme-seti .fg-3 {
+  color: #e0c64f;
+}
+.asciinema-theme-seti .bg-3 {
+  background-color: #e0c64f;
+}
+.asciinema-theme-seti .fg-4 {
+  color: #43a5d5;
+}
+.asciinema-theme-seti .bg-4 {
+  background-color: #43a5d5;
+}
+.asciinema-theme-seti .fg-5 {
+  color: #8b57b5;
+}
+.asciinema-theme-seti .bg-5 {
+  background-color: #8b57b5;
+}
+.asciinema-theme-seti .fg-6 {
+  color: #8ec43d;
+}
+.asciinema-theme-seti .bg-6 {
+  background-color: #8ec43d;
+}
+.asciinema-theme-seti .fg-7 {
+  color: #eeeeee;
+}
+.asciinema-theme-seti .bg-7 {
+  background-color: #eeeeee;
+}
+.asciinema-theme-seti .fg-8 {
+  color: #323232;
+}
+.asciinema-theme-seti .bg-8 {
+  background-color: #323232;
+}
+.asciinema-theme-seti .fg-9 {
+  color: #c22832;
+}
+.asciinema-theme-seti .bg-9 {
+  background-color: #c22832;
+}
+.asciinema-theme-seti .fg-10 {
+  color: #8ec43d;
+}
+.asciinema-theme-seti .bg-10 {
+  background-color: #8ec43d;
+}
+.asciinema-theme-seti .fg-11 {
+  color: #e0c64f;
+}
+.asciinema-theme-seti .bg-11 {
+  background-color: #e0c64f;
+}
+.asciinema-theme-seti .fg-12 {
+  color: #43a5d5;
+}
+.asciinema-theme-seti .bg-12 {
+  background-color: #43a5d5;
+}
+.asciinema-theme-seti .fg-13 {
+  color: #8b57b5;
+}
+.asciinema-theme-seti .bg-13 {
+  background-color: #8b57b5;
+}
+.asciinema-theme-seti .fg-14 {
+  color: #8ec43d;
+}
+.asciinema-theme-seti .bg-14 {
+  background-color: #8ec43d;
+}
+.asciinema-theme-seti .fg-15 {
+  color: #ffffff;
+}
+.asciinema-theme-seti .bg-15 {
+  background-color: #ffffff;
+}
+.asciinema-theme-seti .ap-overlay-loading .ap-loader {
+  border-color: rgba(202, 206, 205, 0.3) rgba(202, 206, 205, 0.5) rgba(202, 206, 205, 0.7) #cacecd;
+}
+.asciinema-theme-seti .fg-8,
+.asciinema-theme-seti .fg-9,
+.asciinema-theme-seti .fg-10,
+.asciinema-theme-seti .fg-11,
+.asciinema-theme-seti .fg-12,
+.asciinema-theme-seti .fg-13,
+.asciinema-theme-seti .fg-14,
+.asciinema-theme-seti .fg-15 {
+  font-weight: bold;
+}
+/* Based on Monokai from base16 collection - https://github.com/chriskempson/base16 */
+.asciinema-theme-monokai {
+  background-color: #272822;
+}
+.asciinema-theme-monokai pre.ap-terminal {
+  color: #f8f8f2;
+  background-color: #272822;
+  border-color: #272822;
+}
+.asciinema-theme-monokai .fg-default {
+  color: #f8f8f2;
+}
+.asciinema-theme-monokai .fg-bg {
+  color: #272822;
+}
+.asciinema-theme-monokai .bg-default {
+  background-color: #272822;
+}
+.asciinema-theme-monokai .bg-fg {
+  background-color: #f8f8f2;
+}
+.asciinema-theme-monokai .fg-0 {
+  color: #272822;
+}
+.asciinema-theme-monokai .bg-0 {
+  background-color: #272822;
+}
+.asciinema-theme-monokai .fg-1 {
+  color: #f92672;
+}
+.asciinema-theme-monokai .bg-1 {
+  background-color: #f92672;
+}
+.asciinema-theme-monokai .fg-2 {
+  color: #a6e22e;
+}
+.asciinema-theme-monokai .bg-2 {
+  background-color: #a6e22e;
+}
+.asciinema-theme-monokai .fg-3 {
+  color: #f4bf75;
+}
+.asciinema-theme-monokai .bg-3 {
+  background-color: #f4bf75;
+}
+.asciinema-theme-monokai .fg-4 {
+  color: #66d9ef;
+}
+.asciinema-theme-monokai .bg-4 {
+  background-color: #66d9ef;
+}
+.asciinema-theme-monokai .fg-5 {
+  color: #ae81ff;
+}
+.asciinema-theme-monokai .bg-5 {
+  background-color: #ae81ff;
+}
+.asciinema-theme-monokai .fg-6 {
+  color: #a1efe4;
+}
+.asciinema-theme-monokai .bg-6 {
+  background-color: #a1efe4;
+}
+.asciinema-theme-monokai .fg-7 {
+  color: #f8f8f2;
+}
+.asciinema-theme-monokai .bg-7 {
+  background-color: #f8f8f2;
+}
+.asciinema-theme-monokai .fg-8 {
+  color: #75715e;
+}
+.asciinema-theme-monokai .bg-8 {
+  background-color: #75715e;
+}
+.asciinema-theme-monokai .fg-9 {
+  color: #f92672;
+}
+.asciinema-theme-monokai .bg-9 {
+  background-color: #f92672;
+}
+.asciinema-theme-monokai .fg-10 {
+  color: #a6e22e;
+}
+.asciinema-theme-monokai .bg-10 {
+  background-color: #a6e22e;
+}
+.asciinema-theme-monokai .fg-11 {
+  color: #f4bf75;
+}
+.asciinema-theme-monokai .bg-11 {
+  background-color: #f4bf75;
+}
+.asciinema-theme-monokai .fg-12 {
+  color: #66d9ef;
+}
+.asciinema-theme-monokai .bg-12 {
+  background-color: #66d9ef;
+}
+.asciinema-theme-monokai .fg-13 {
+  color: #ae81ff;
+}
+.asciinema-theme-monokai .bg-13 {
+  background-color: #ae81ff;
+}
+.asciinema-theme-monokai .fg-14 {
+  color: #a1efe4;
+}
+.asciinema-theme-monokai .bg-14 {
+  background-color: #a1efe4;
+}
+.asciinema-theme-monokai .fg-15 {
+  color: #f9f8f5;
+}
+.asciinema-theme-monokai .bg-15 {
+  background-color: #f9f8f5;
+}
+.asciinema-theme-monokai .ap-overlay-loading .ap-loader {
+  border-color: rgba(248, 248, 242, 0.3) rgba(248, 248, 242, 0.5) rgba(248, 248, 242, 0.7) #f8f8f2;
+}
+.asciinema-theme-monokai .fg-8,
+.asciinema-theme-monokai .fg-9,
+.asciinema-theme-monokai .fg-10,
+.asciinema-theme-monokai .fg-11,
+.asciinema-theme-monokai .fg-12,
+.asciinema-theme-monokai .fg-13,
+.asciinema-theme-monokai .fg-14,
+.asciinema-theme-monokai .fg-15 {
+  font-weight: bold;
+}
+/*
+  Based on Nord: https://github.com/arcticicestudio/nord
+  Via: https://github.com/neilotoole/asciinema-theme-nord
+ */
+.asciinema-theme-nord {
+  background-color: #2E3440;
+}
+.asciinema-theme-nord pre.ap-terminal {
+  color: #ECEFF4;
+  background-color: #2E3440;
+  border-color: #2E3440;
+}
+.asciinema-theme-nord .fg-default {
+  color: #ECEFF4;
+}
+.asciinema-theme-nord .fg-bg {
+  color: #2E3440;
+}
+.asciinema-theme-nord .bg-default {
+  background-color: #2E3440;
+}
+.asciinema-theme-nord .bg-fg {
+  background-color: #ECEFF4;
+}
+.asciinema-theme-nord .fg-0 {
+  color: #3B4252;
+}
+.asciinema-theme-nord .bg-0 {
+  background-color: #3B4252;
+}
+.asciinema-theme-nord .fg-1 {
+  color: #BF616A;
+}
+.asciinema-theme-nord .bg-1 {
+  background-color: #BF616A;
+}
+.asciinema-theme-nord .fg-2 {
+  color: #A3BE8C;
+}
+.asciinema-theme-nord .bg-2 {
+  background-color: #A3BE8C;
+}
+.asciinema-theme-nord .fg-3 {
+  color: #EBCB8B;
+}
+.asciinema-theme-nord .bg-3 {
+  background-color: #EBCB8B;
+}
+.asciinema-theme-nord .fg-4 {
+  color: #81A1C1;
+}
+.asciinema-theme-nord .bg-4 {
+  background-color: #81A1C1;
+}
+.asciinema-theme-nord .fg-5 {
+  color: #B48EAD;
+}
+.asciinema-theme-nord .bg-5 {
+  background-color: #B48EAD;
+}
+.asciinema-theme-nord .fg-6 {
+  color: #88C0D0;
+}
+.asciinema-theme-nord .bg-6 {
+  background-color: #88C0D0;
+}
+.asciinema-theme-nord .fg-7 {
+  color: #ECEFF4;
+}
+.asciinema-theme-nord .bg-7 {
+  background-color: #ECEFF4;
+}
+.asciinema-theme-nord .fg-8 {
+  color: #3B4252;
+}
+.asciinema-theme-nord .bg-8 {
+  background-color: #3B4252;
+}
+.asciinema-theme-nord .fg-9 {
+  color: #BF616A;
+}
+.asciinema-theme-nord .bg-9 {
+  background-color: #BF616A;
+}
+.asciinema-theme-nord .fg-10 {
+  color: #A3BE8C;
+}
+.asciinema-theme-nord .bg-10 {
+  background-color: #A3BE8C;
+}
+.asciinema-theme-nord .fg-11 {
+  color: #EBCB8B;
+}
+.asciinema-theme-nord .bg-11 {
+  background-color: #EBCB8B;
+}
+.asciinema-theme-nord .fg-12 {
+  color: #81A1C1;
+}
+.asciinema-theme-nord .bg-12 {
+  background-color: #81A1C1;
+}
+.asciinema-theme-nord .fg-13 {
+  color: #B48EAD;
+}
+.asciinema-theme-nord .bg-13 {
+  background-color: #B48EAD;
+}
+.asciinema-theme-nord .fg-14 {
+  color: #88C0D0;
+}
+.asciinema-theme-nord .bg-14 {
+  background-color: #88C0D0;
+}
+.asciinema-theme-nord .fg-15 {
+  color: #ECEFF4;
+}
+.asciinema-theme-nord .bg-15 {
+  background-color: #ECEFF4;
+}
+.asciinema-theme-nord .ap-overlay-loading .ap-loader {
+  border-color: rgba(236, 239, 244, 0.3) rgba(236, 239, 244, 0.5) rgba(236, 239, 244, 0.7) #eceff4;
+}
+.asciinema-theme-nord .fg-8,
+.asciinema-theme-nord .fg-9,
+.asciinema-theme-nord .fg-10,
+.asciinema-theme-nord .fg-11,
+.asciinema-theme-nord .fg-12,
+.asciinema-theme-nord .fg-13,
+.asciinema-theme-nord .fg-14,
+.asciinema-theme-nord .fg-15 {
+  font-weight: bold;
+}
diff --git a/src/patterns.js b/src/patterns.js
index c57f70df..2ed96d81 100644
--- a/src/patterns.js
+++ b/src/patterns.js
@@ -13,7 +13,7 @@ export const MATCH_URL_DAILYMOTION = /^(?:(?:https?):)?(?:\/\/)?(?:www\.)?(?:(?:
 export const MATCH_URL_MIXCLOUD = /mixcloud\.com\/([^/]+\/[^/]+)/
 export const MATCH_URL_VIDYARD = /vidyard.com\/(?:watch\/)?([a-zA-Z0-9-_]+)/
 export const MATCH_URL_KALTURA = /^https?:\/\/[a-zA-Z]+\.kaltura.(com|org)\/p\/([0-9]+)\/sp\/([0-9]+)00\/embedIframeJs\/uiconf_id\/([0-9]+)\/partner_id\/([0-9]+)(.*)entry_id.([a-zA-Z0-9-_].*)$/
-export const MATCH_URL_ASCIINEMA = /asciinema.org\/a\/([a-zA-Z0-9-_]+)\.cast/
+export const MATCH_URL_ASCIINEMA = /asciinema.org\/a\/([a-zA-Z0-9-_]+)(\.cast)?/
 export const AUDIO_EXTENSIONS = /\.(m4a|m4b|mp4a|mpga|mp2|mp2a|mp3|m2a|m3a|wav|weba|aac|oga|spx)($|\?)/i
 export const VIDEO_EXTENSIONS = /\.(mp4|og[gv]|webm|mov|m4v)(#t=[,\d+]+)?($|\?)/i
 export const HLS_EXTENSIONS = /\.(m3u8)($|\?)/i
diff --git a/src/players/Asciinema.js b/src/players/Asciinema.js
index f9103a8f..87e1852a 100644
--- a/src/players/Asciinema.js
+++ b/src/players/Asciinema.js
@@ -16,7 +16,7 @@ export default class Asciinema extends Component {
     this.props.onMount && this.props.onMount(this)
     if (this.props.url) {
       if (!this.props.id) {
-        this.playerID = 'asciinema_player'
+        this.playerID = this.props.url.match(MATCH_URL_ASCIINEMA)[1]
       } else {
         this.playerID = this.props.id
       }
@@ -24,11 +24,23 @@ export default class Asciinema extends Component {
   }
 
   load (url) {
+    if (this.player) {
+      // return
+      this.stop()
+    }
+
     getSDK(SDK_URL, SDK_GLOBAL).then(AsciinemaPlayer => {
       if (this.player) {
         return
       }
-      this.player = AsciinemaPlayer.create(url, this.div)
+      if (!url.endsWith('.cast')) {
+        url = url + '.cast'
+      }
+
+      this.player = AsciinemaPlayer.create(url, this.div, {
+        loop: this.props.loop
+        // theme: 'solarized-dark'
+      })
       this.player.addEventListener('play', this.props.onReady)
       this.player.addEventListener('playing', this.props.onPlay)
       this.player.addEventListener('pause', this.props.onPause)
@@ -46,7 +58,6 @@ export default class Asciinema extends Component {
   }
 
   stop () {
-    this.callPlayer('pause')
   }
 
   seekTo (seconds) {
@@ -54,12 +65,15 @@ export default class Asciinema extends Component {
   }
 
   setVolume (fraction) {
+    console.log('Not supported')
   }
 
   mute = () => {
+    console.log('Not supported')
   }
 
   unmute = () => {
+    console.log('Not supported')
   }
 
   getDuration () {
@@ -70,10 +84,6 @@ export default class Asciinema extends Component {
     return this.callPlayer('getCurrentTime')
   }
 
-  getSecondsLoaded () {
-    return null
-  }
-
   ref = div => {
     this.div = div
   }
diff --git a/src/players/Kaltura.js b/src/players/Kaltura.js
index ebba77b7..72301968 100644
--- a/src/players/Kaltura.js
+++ b/src/players/Kaltura.js
@@ -106,11 +106,11 @@ export default class Kaltura extends Component {
       <iframe
         ref={this.ref}
         src={this.props.url}
-        frameBorder='0'
+        frameborder='0'
         scrolling='no'
         style={style}
         allow='encrypted-media; autoplay; fullscreen;'
-        referrerPolicy='no-referrer-when-downgrade'
+        referrerpolicy='no-referrer-when-downgrade'
       />
     )
   }
diff --git a/test/players/Asciinema.js b/test/players/Asciinema.js
index fe9300af..8b38b1f9 100644
--- a/test/players/Asciinema.js
+++ b/test/players/Asciinema.js
@@ -8,6 +8,8 @@ import * as utils from '../../src/utils'
 import Asciinema from '../../src/players/Asciinema'
 import { MATCH_URL_ASCIINEMA } from '../../src/patterns'
 
+global.window = {}
+
 configure({ adapter: new Adapter() })
 
 const TEST_URL = 'https://asciinema.org/a/597732.cast'
@@ -23,33 +25,27 @@ testPlayerMethods(Asciinema, {
   stop: 'pause',
   seekTo: 'seek',
   getDuration: 'getDuration',
-  getCurrentTime: 'getCurrentTime',
-  getSecondsLoaded: null
+  getCurrentTime: 'getCurrentTime'
 }, { config: TEST_CONFIG })
 
-test('load()', t => {
-  class Player {
-    constructor (id, options) {
-      t.true(id === PLAYER_ID)
-    }
-
-    addEventListener = (event, fn) => {
-      if (event === 'play') setTimeout(fn, 100)
-    }
+test('load()', async t => {
+  const AsciinemaPlayer = {
+    create: () => ({
+      ready: Promise.resolve(),
+      addEventListener: (event, fn) => {
+        if (event === 'play') setTimeout(fn, 100)
+      }
+    })
   }
-  const getSDK = sinon.stub(utils, 'getSDK').resolves({ Player })
-  return new Promise(resolve => {
-    const onReady = () => {
-      t.pass()
-      resolve()
-    }
-    const instance = shallow(
-      <Asciinema url={TEST_URL} onReady={onReady} config={TEST_CONFIG} />
-    ).instance()
-    instance.load(TEST_URL)
-    t.true(getSDK.calledOnce)
-    getSDK.restore()
-  })
+
+  const getSDK = sinon.stub(utils, 'getSDK').resolves(AsciinemaPlayer)
+  const onReady = () => t.pass()
+  const instance = shallow(
+    <Asciinema url={TEST_URL} id={PLAYER_ID} onReady={onReady} config={TEST_CONFIG} />
+  ).instance()
+  instance.load(TEST_URL)
+  t.true(getSDK.calledOnce)
+  getSDK.restore()
 })
 
 test('render()', t => {
@@ -57,8 +53,8 @@ test('render()', t => {
     width: '73%',
     height: '100%'
   }
-  const wrapper = shallow(<Asciinema url={TEST_URL} config={TEST_CONFIG} />)
+  const wrapper = shallow(<Asciinema url={TEST_URL} id={PLAYER_ID} />)
   t.true(wrapper.contains(
-    <div style={style} id={PLAYER_ID} />
+    <div style={style} />
   ))
 })

From 43154f14bdaf89e27822516c9da2f5cc86594f0e Mon Sep 17 00:00:00 2001
From: Jesse Portnoy <jesse@packman.io>
Date: Tue, 25 Jul 2023 21:54:11 +0100
Subject: [PATCH 03/10] cleanup.

---
 src/players/Asciinema.js  | 1 +
 test/players/Asciinema.js | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/players/Asciinema.js b/src/players/Asciinema.js
index 87e1852a..7de72fc9 100644
--- a/src/players/Asciinema.js
+++ b/src/players/Asciinema.js
@@ -33,6 +33,7 @@ export default class Asciinema extends Component {
       if (this.player) {
         return
       }
+
       if (!url.endsWith('.cast')) {
         url = url + '.cast'
       }
diff --git a/test/players/Asciinema.js b/test/players/Asciinema.js
index 8b38b1f9..31832387 100644
--- a/test/players/Asciinema.js
+++ b/test/players/Asciinema.js
@@ -12,7 +12,7 @@ global.window = {}
 
 configure({ adapter: new Adapter() })
 
-const TEST_URL = 'https://asciinema.org/a/597732.cast'
+const TEST_URL = 'https://asciinema.org/a/597732'
 const TEST_CONFIG = {
   options: {}
 }

From f939da765689a819c2fdd62c014aa23cb2cbd8fc Mon Sep 17 00:00:00 2001
From: Jesse Portnoy <jesse@packman.io>
Date: Tue, 25 Jul 2023 22:34:17 +0100
Subject: [PATCH 04/10] sort out the width and height.

---
 src/demo/App.js           |  2 +-
 src/players/Asciinema.js  | 13 ++++++++++---
 test/players/Asciinema.js |  5 +++--
 3 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/demo/App.js b/src/demo/App.js
index 673c7ccf..4209af87 100644
--- a/src/demo/App.js
+++ b/src/demo/App.js
@@ -361,7 +361,7 @@ class App extends Component {
                 <th>Asciinema</th>
                 <td>
                   {this.renderLoadButton('https://asciinema.org/a/597732', 'Test A')}
-                  {this.renderLoadButton('https://asciinema.org/a/596325.cast', 'Test B')}
+                  {this.renderLoadButton('https://asciinema.org/a/595695.cast', 'Test B')}
                 </td>
               </tr>
               <tr>
diff --git a/src/players/Asciinema.js b/src/players/Asciinema.js
index 7de72fc9..bdd5706e 100644
--- a/src/players/Asciinema.js
+++ b/src/players/Asciinema.js
@@ -3,7 +3,7 @@ import React, { Component } from 'react'
 import { callPlayer, getSDK } from '../utils'
 import { canPlay, MATCH_URL_ASCIINEMA } from '../patterns'
 
-const SDK_URL = 'http://localhost/asciinema-player.js'
+const SDK_URL = 'https://github.com/asciinema/asciinema-player/releases/download/v3.5.0/asciinema-player.min.js'
 const SDK_GLOBAL = 'AsciinemaPlayer'
 
 export default class Asciinema extends Component {
@@ -11,6 +11,7 @@ export default class Asciinema extends Component {
   static canPlay = canPlay.asciinema
   static loopOnEnded = true
   callPlayer = callPlayer
+  secondsLoaded = null
 
   componentDidMount () {
     this.props.onMount && this.props.onMount(this)
@@ -39,7 +40,9 @@ export default class Asciinema extends Component {
       }
 
       this.player = AsciinemaPlayer.create(url, this.div, {
-        loop: this.props.loop
+        loop: this.props.loop,
+        fit: 'both'
+        // terminalFontSize: 'small'
         // theme: 'solarized-dark'
       })
       this.player.addEventListener('play', this.props.onReady)
@@ -85,13 +88,17 @@ export default class Asciinema extends Component {
     return this.callPlayer('getCurrentTime')
   }
 
+  getSecondsLoaded () {
+    return this.secondsLoaded
+  }
+
   ref = div => {
     this.div = div
   }
 
   render () {
     const style = {
-      width: '73%',
+      width: '100%',
       height: '100%'
     }
     return (
diff --git a/test/players/Asciinema.js b/test/players/Asciinema.js
index 31832387..4da4375c 100644
--- a/test/players/Asciinema.js
+++ b/test/players/Asciinema.js
@@ -25,7 +25,8 @@ testPlayerMethods(Asciinema, {
   stop: 'pause',
   seekTo: 'seek',
   getDuration: 'getDuration',
-  getCurrentTime: 'getCurrentTime'
+  getCurrentTime: 'getCurrentTime',
+  getSecondsLoaded: null
 }, { config: TEST_CONFIG })
 
 test('load()', async t => {
@@ -50,7 +51,7 @@ test('load()', async t => {
 
 test('render()', t => {
   const style = {
-    width: '73%',
+    width: '100%',
     height: '100%'
   }
   const wrapper = shallow(<Asciinema url={TEST_URL} id={PLAYER_ID} />)

From 4a088bf9c758f0a588e2d8d774a3d87a814707a8 Mon Sep 17 00:00:00 2001
From: Jesse Portnoy <jesse@packman.io>
Date: Tue, 25 Jul 2023 22:35:13 +0100
Subject: [PATCH 05/10] .

---
 src/players/Asciinema.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/players/Asciinema.js b/src/players/Asciinema.js
index bdd5706e..5ec8141c 100644
--- a/src/players/Asciinema.js
+++ b/src/players/Asciinema.js
@@ -42,8 +42,6 @@ export default class Asciinema extends Component {
       this.player = AsciinemaPlayer.create(url, this.div, {
         loop: this.props.loop,
         fit: 'both'
-        // terminalFontSize: 'small'
-        // theme: 'solarized-dark'
       })
       this.player.addEventListener('play', this.props.onReady)
       this.player.addEventListener('playing', this.props.onPlay)

From e4c7bdcfa1396ddc97a6c047efd2d66b81cb6f1b Mon Sep 17 00:00:00 2001
From: Jesse Portnoy <jesse@packman.io>
Date: Tue, 25 Jul 2023 23:47:33 +0100
Subject: [PATCH 06/10] Support `startAt` and `poster` props

---
 src/players/Asciinema.js  | 15 +++++++++------
 test/players/Asciinema.js |  6 ++++--
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/players/Asciinema.js b/src/players/Asciinema.js
index 5ec8141c..64d31559 100644
--- a/src/players/Asciinema.js
+++ b/src/players/Asciinema.js
@@ -16,11 +16,7 @@ export default class Asciinema extends Component {
   componentDidMount () {
     this.props.onMount && this.props.onMount(this)
     if (this.props.url) {
-      if (!this.props.id) {
-        this.playerID = this.props.url.match(MATCH_URL_ASCIINEMA)[1]
-      } else {
-        this.playerID = this.props.id
-      }
+      this.playerID = this.props.id ? this.props.id : this.props.url.match(MATCH_URL_ASCIINEMA)[1]
     }
   }
 
@@ -39,9 +35,16 @@ export default class Asciinema extends Component {
         url = url + '.cast'
       }
 
+      const poster = this.props.poster ? this.props.poster : 'npt:00:10'
+      const fit = this.props.fit ? this.props.fit : 'both'
+      const fontSize = this.props.fontSize ? this.props.fit : 'small'
+
       this.player = AsciinemaPlayer.create(url, this.div, {
         loop: this.props.loop,
-        fit: 'both'
+        fit: fit,
+        poster: poster,
+        startAt: this.props.startAt,
+        fontSize: fontSize
       })
       this.player.addEventListener('play', this.props.onReady)
       this.player.addEventListener('playing', this.props.onPlay)
diff --git a/test/players/Asciinema.js b/test/players/Asciinema.js
index 4da4375c..72b46e3e 100644
--- a/test/players/Asciinema.js
+++ b/test/players/Asciinema.js
@@ -18,6 +18,8 @@ const TEST_CONFIG = {
 }
 
 const PLAYER_ID = TEST_URL.match(MATCH_URL_ASCIINEMA)[1]
+const POSTER = 'npt:1:23'
+const START_AT = 7
 
 testPlayerMethods(Asciinema, {
   play: 'play',
@@ -42,7 +44,7 @@ test('load()', async t => {
   const getSDK = sinon.stub(utils, 'getSDK').resolves(AsciinemaPlayer)
   const onReady = () => t.pass()
   const instance = shallow(
-    <Asciinema url={TEST_URL} id={PLAYER_ID} onReady={onReady} config={TEST_CONFIG} />
+    <Asciinema url={TEST_URL} id={PLAYER_ID} onReady={onReady} poster={POSTER} startAt={START_AT} />
   ).instance()
   instance.load(TEST_URL)
   t.true(getSDK.calledOnce)
@@ -54,7 +56,7 @@ test('render()', t => {
     width: '100%',
     height: '100%'
   }
-  const wrapper = shallow(<Asciinema url={TEST_URL} id={PLAYER_ID} />)
+  const wrapper = shallow(<Asciinema url={TEST_URL} id={PLAYER_ID} poster={POSTER} startAt={START_AT} fit='both' fontSize='medium' />)
   t.true(wrapper.contains(
     <div style={style} />
   ))

From 75a85d6d560bf83ebb2e05d17de3dafe01a8f243 Mon Sep 17 00:00:00 2001
From: Jesse Portnoy <jesse@packman.io>
Date: Tue, 25 Jul 2023 23:58:34 +0100
Subject: [PATCH 07/10] Docs

---
 src/players/Asciinema.js  | 4 ++--
 test/players/Asciinema.js | 8 +++++++-
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/players/Asciinema.js b/src/players/Asciinema.js
index 64d31559..f94cd5a2 100644
--- a/src/players/Asciinema.js
+++ b/src/players/Asciinema.js
@@ -37,14 +37,14 @@ export default class Asciinema extends Component {
 
       const poster = this.props.poster ? this.props.poster : 'npt:00:10'
       const fit = this.props.fit ? this.props.fit : 'both'
-      const fontSize = this.props.fontSize ? this.props.fit : 'small'
+      const fontSize = this.props.fontSize ? this.props.fontSize : 'small'
 
       this.player = AsciinemaPlayer.create(url, this.div, {
         loop: this.props.loop,
         fit: fit,
         poster: poster,
         startAt: this.props.startAt,
-        fontSize: fontSize
+        terminalFontSize: fontSize
       })
       this.player.addEventListener('play', this.props.onReady)
       this.player.addEventListener('playing', this.props.onPlay)
diff --git a/test/players/Asciinema.js b/test/players/Asciinema.js
index 72b46e3e..41c7e0f9 100644
--- a/test/players/Asciinema.js
+++ b/test/players/Asciinema.js
@@ -18,8 +18,14 @@ const TEST_CONFIG = {
 }
 
 const PLAYER_ID = TEST_URL.match(MATCH_URL_ASCIINEMA)[1]
+// https://github.com/asciinema/asciinema-player#poster
 const POSTER = 'npt:1:23'
+// https://github.com/asciinema/asciinema-player#startat
 const START_AT = 7
+// https://github.com/asciinema/asciinema-player#terminalfontsize
+const FONT_SIZE = 'medium'
+// https://github.com/asciinema/asciinema-player#fit
+const FIT = 'both'
 
 testPlayerMethods(Asciinema, {
   play: 'play',
@@ -56,7 +62,7 @@ test('render()', t => {
     width: '100%',
     height: '100%'
   }
-  const wrapper = shallow(<Asciinema url={TEST_URL} id={PLAYER_ID} poster={POSTER} startAt={START_AT} fit='both' fontSize='medium' />)
+  const wrapper = shallow(<Asciinema url={TEST_URL} id={PLAYER_ID} poster={POSTER} startAt={START_AT} fit={FIT} fontSize={FONT_SIZE} />)
   t.true(wrapper.contains(
     <div style={style} />
   ))

From 4133b7ff901083b6fc28789c18e677b86d899c96 Mon Sep 17 00:00:00 2001
From: Jesse Portnoy <jesse@packman.io>
Date: Wed, 26 Jul 2023 00:34:05 +0100
Subject: [PATCH 08/10] Support controls as prop.

---
 src/players/Asciinema.js  | 4 +++-
 test/players/Asciinema.js | 4 +++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/players/Asciinema.js b/src/players/Asciinema.js
index f94cd5a2..5488f50d 100644
--- a/src/players/Asciinema.js
+++ b/src/players/Asciinema.js
@@ -38,13 +38,15 @@ export default class Asciinema extends Component {
       const poster = this.props.poster ? this.props.poster : 'npt:00:10'
       const fit = this.props.fit ? this.props.fit : 'both'
       const fontSize = this.props.fontSize ? this.props.fontSize : 'small'
+      const controls = this.props.controls ? this.props.controls : true
 
       this.player = AsciinemaPlayer.create(url, this.div, {
         loop: this.props.loop,
         fit: fit,
         poster: poster,
         startAt: this.props.startAt,
-        terminalFontSize: fontSize
+        terminalFontSize: fontSize,
+        controls: controls
       })
       this.player.addEventListener('play', this.props.onReady)
       this.player.addEventListener('playing', this.props.onPlay)
diff --git a/test/players/Asciinema.js b/test/players/Asciinema.js
index 41c7e0f9..84b5ac82 100644
--- a/test/players/Asciinema.js
+++ b/test/players/Asciinema.js
@@ -26,6 +26,8 @@ const START_AT = 7
 const FONT_SIZE = 'medium'
 // https://github.com/asciinema/asciinema-player#fit
 const FIT = 'both'
+// https://github.com/asciinema/asciinema-player#controls
+const CONTROLS = true
 
 testPlayerMethods(Asciinema, {
   play: 'play',
@@ -62,7 +64,7 @@ test('render()', t => {
     width: '100%',
     height: '100%'
   }
-  const wrapper = shallow(<Asciinema url={TEST_URL} id={PLAYER_ID} poster={POSTER} startAt={START_AT} fit={FIT} fontSize={FONT_SIZE} />)
+  const wrapper = shallow(<Asciinema url={TEST_URL} id={PLAYER_ID} poster={POSTER} startAt={START_AT} fit={FIT} fontSize={FONT_SIZE} controls={CONTROLS} />)
   t.true(wrapper.contains(
     <div style={style} />
   ))

From e251cc703f117675a61592a42b3f96fbf2086b98 Mon Sep 17 00:00:00 2001
From: Jesse Portnoy <jesse@packman.io>
Date: Wed, 26 Jul 2023 15:50:46 +0100
Subject: [PATCH 09/10] Support config via standard props.js mechanism

---
 src/players/Asciinema.js  | 21 ++++++++-------------
 src/props.js              | 13 +++++++++++++
 test/players/Asciinema.js | 24 +++++++++++-------------
 3 files changed, 32 insertions(+), 26 deletions(-)

diff --git a/src/players/Asciinema.js b/src/players/Asciinema.js
index 5488f50d..aa749431 100644
--- a/src/players/Asciinema.js
+++ b/src/players/Asciinema.js
@@ -35,19 +35,14 @@ export default class Asciinema extends Component {
         url = url + '.cast'
       }
 
-      const poster = this.props.poster ? this.props.poster : 'npt:00:10'
-      const fit = this.props.fit ? this.props.fit : 'both'
-      const fontSize = this.props.fontSize ? this.props.fontSize : 'small'
-      const controls = this.props.controls ? this.props.controls : true
-
-      this.player = AsciinemaPlayer.create(url, this.div, {
-        loop: this.props.loop,
-        fit: fit,
-        poster: poster,
-        startAt: this.props.startAt,
-        terminalFontSize: fontSize,
-        controls: controls
-      })
+      // AsciinemaPlayer config documentation: https://github.com/asciinema/asciinema-player#options
+      const playerConfig = this.props.config
+      playerConfig.loop = this.props.loop
+      playerConfig.speed = this.props.playbackRate
+      if (this.props.controls === true) {
+        playerConfig.controls = this.props.controls
+      }
+      this.player = AsciinemaPlayer.create(url, this.div, playerConfig)
       this.player.addEventListener('play', this.props.onReady)
       this.player.addEventListener('playing', this.props.onPlay)
       this.player.addEventListener('pause', this.props.onPause)
diff --git a/src/props.js b/src/props.js
index b0874fd7..01c83ad9 100644
--- a/src/props.js
+++ b/src/props.js
@@ -76,6 +76,14 @@ export const propTypes = {
       options: object,
       playerId: string
     }),
+    asciinema: shape({
+      fit: string,
+      poster: string,
+      startAt: oneOfType([string, number]),
+      terminalFontSize: string,
+      idleTimeLimit: number,
+      controls: oneOfType([string, bool])
+    }),
     vidyard: shape({
       options: object
     })
@@ -191,6 +199,11 @@ export const defaultProps = {
       options: {},
       playerId: null
     },
+    asciinema: {
+      fit: 'both',
+      poster: 'npt:00:10',
+      controls: 'auto'
+    },
     vidyard: {
       options: {}
     }
diff --git a/test/players/Asciinema.js b/test/players/Asciinema.js
index 84b5ac82..fe1c6f6d 100644
--- a/test/players/Asciinema.js
+++ b/test/players/Asciinema.js
@@ -13,21 +13,18 @@ global.window = {}
 configure({ adapter: new Adapter() })
 
 const TEST_URL = 'https://asciinema.org/a/597732'
+const LOOP = true
+const RATE = 1.5
 const TEST_CONFIG = {
-  options: {}
+  fit: 'both',
+  poster: 'npt:1:21',
+  controls: true,
+  startAt: 7,
+  idleTimeLimit: 2,
+  terminalFontSize: 'medium'
 }
 
 const PLAYER_ID = TEST_URL.match(MATCH_URL_ASCIINEMA)[1]
-// https://github.com/asciinema/asciinema-player#poster
-const POSTER = 'npt:1:23'
-// https://github.com/asciinema/asciinema-player#startat
-const START_AT = 7
-// https://github.com/asciinema/asciinema-player#terminalfontsize
-const FONT_SIZE = 'medium'
-// https://github.com/asciinema/asciinema-player#fit
-const FIT = 'both'
-// https://github.com/asciinema/asciinema-player#controls
-const CONTROLS = true
 
 testPlayerMethods(Asciinema, {
   play: 'play',
@@ -52,7 +49,7 @@ test('load()', async t => {
   const getSDK = sinon.stub(utils, 'getSDK').resolves(AsciinemaPlayer)
   const onReady = () => t.pass()
   const instance = shallow(
-    <Asciinema url={TEST_URL} id={PLAYER_ID} onReady={onReady} poster={POSTER} startAt={START_AT} />
+    <Asciinema url={TEST_URL} id={PLAYER_ID} onReady={onReady} config={TEST_CONFIG} loop={LOOP} playbackRate={RATE} controls />
   ).instance()
   instance.load(TEST_URL)
   t.true(getSDK.calledOnce)
@@ -64,7 +61,8 @@ test('render()', t => {
     width: '100%',
     height: '100%'
   }
-  const wrapper = shallow(<Asciinema url={TEST_URL} id={PLAYER_ID} poster={POSTER} startAt={START_AT} fit={FIT} fontSize={FONT_SIZE} controls={CONTROLS} />)
+
+  const wrapper = shallow(<Asciinema url={TEST_URL} id={PLAYER_ID} config={TEST_CONFIG} loop={LOOP} playbackRate={RATE} controls />)
   t.true(wrapper.contains(
     <div style={style} />
   ))

From 3d5c6ea356a376f1165235350f6b2ca6a480e11c Mon Sep 17 00:00:00 2001
From: Jesse Portnoy <jesse@packman.io>
Date: Thu, 27 Jul 2023 23:22:11 +0100
Subject: [PATCH 10/10] Accidentally lower-cased `frameborder` and
 `referrerpolicy` somehow.. reverting.

---
 src/players/Kaltura.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/players/Kaltura.js b/src/players/Kaltura.js
index 72301968..ebba77b7 100644
--- a/src/players/Kaltura.js
+++ b/src/players/Kaltura.js
@@ -106,11 +106,11 @@ export default class Kaltura extends Component {
       <iframe
         ref={this.ref}
         src={this.props.url}
-        frameborder='0'
+        frameBorder='0'
         scrolling='no'
         style={style}
         allow='encrypted-media; autoplay; fullscreen;'
-        referrerpolicy='no-referrer-when-downgrade'
+        referrerPolicy='no-referrer-when-downgrade'
       />
     )
   }