Merge pull request #256 from asciinema/original-theme

Use original recording theme when available unless theme option used
asciinema · Feb 15, 2024 · 43ea580 · 43ea580
2 parents e31ba14 + c491798
commit 43ea580
Show file tree

Hide file tree

Showing 12 changed files with 42 additions and 11 deletions.
diff --git a/src/components/Player.js b/src/components/Player.js
@@ -40,6 +40,7 @@ export default props => {
  const [duration, setDuration] = createSignal(undefined);
  const [markers, setMarkers] = createStore([]);
  const [userActive, setUserActive] = createSignal(false);
+ const [originalTheme, setOriginalTheme] = createSignal(undefined);
 
  const terminalCols = () =>
  terminalSize().cols || 80;
@@ -92,9 +93,10 @@ export default props => {
  }
  }
 
- core.addEventListener('init', ({ cols, rows, duration, poster, markers }) => {
+ core.addEventListener('init', ({ cols, rows, duration, theme, poster, markers }) => {
  resize({ cols, rows });
  setDuration(duration);
+ setOriginalTheme(theme);
  setMarkers(markers);
  setPoster(poster);
  });
@@ -384,11 +386,22 @@ export default props => {
  style['height'] = `${size.height}px`;
  }
 
+ const theme = originalTheme();
+
+ if (theme !== undefined && (props.theme === undefined || props.theme === null)) {
+ style['--term-color-foreground'] = theme.foreground;
+ style['--term-color-background'] = theme.background;
+
+ theme.palette.forEach((color, i) => {
+ style[`--term-color-${i}`] = color;
+ });
+ }
+
  return style;
  }
 
  const playerClass = () =>
- `ap-player asciinema-theme-${props.theme ?? 'asciinema'}`;
+ `ap-player asciinema-player-theme-${props.theme ?? 'asciinema'}`;
 
  const terminalScale = () =>
  terminalElementSize()?.scale;

diff --git a/src/core.js b/src/core.js
@@ -414,6 +414,7 @@ class Core {
  rows: this.rows,
  duration: this.duration,
  markers: this.markers,
+ theme: meta.theme,
  poster
  });
  }

diff --git a/src/driver/recording.js b/src/driver/recording.js
@@ -45,7 +45,7 @@ function recording(src, { feed, onInput, onMarker, now, setTimeout, setState, lo
  .filter(e => e[1] === 'm')
  .map(e => [e[0], e[2].label]);
 
- return { cols, rows, duration, poster, markers };
+ return { cols, rows, duration, theme: recording.theme, poster, markers };
  }
 
  function doFetch({ url, data, fetchOpts = {} }) {

diff --git a/src/less/themes/_asciinema.less b/src/less/themes/_asciinema.less
@@ -1,4 +1,4 @@
-.asciinema-theme-asciinema {
+.asciinema-player-theme-asciinema {
  @basehue: -17;
  @saturation: 70%;
  @lightness: 55%;

diff --git a/src/less/themes/_dracula.less b/src/less/themes/_dracula.less
@@ -2,7 +2,7 @@
  Based on Dracula: https://draculatheme.com
  */
 
-.asciinema-theme-dracula {
+.asciinema-player-theme-dracula {
  --term-color-foreground: #f8f8f2;
  --term-color-background: #282a36;
 

diff --git a/src/less/themes/_monokai.less b/src/less/themes/_monokai.less
@@ -1,6 +1,6 @@
 /* Based on Monokai from base16 collection - https://github.com/chriskempson/base16 */
 
-.asciinema-theme-monokai {
+.asciinema-player-theme-monokai {
  --term-color-foreground: #f8f8f2;
  --term-color-background: #272822;
 

diff --git a/src/less/themes/_nord.less b/src/less/themes/_nord.less
@@ -3,7 +3,7 @@
  Via: https://github.com/neilotoole/asciinema-theme-nord
  */
 
-.asciinema-theme-nord {
+.asciinema-player-theme-nord {
  --term-color-foreground: #eceff4;
  --term-color-background: #2e3440;
 

diff --git a/src/less/themes/_seti.less b/src/less/themes/_seti.less
@@ -1,4 +1,4 @@
-.asciinema-theme-seti {
+.asciinema-player-theme-seti {
  --term-color-foreground: #cacecd;
  --term-color-background: #111213;
 

diff --git a/src/less/themes/_solarized-dark.less b/src/less/themes/_solarized-dark.less
@@ -2,7 +2,7 @@
  Based on Solarized Dark: https://ethanschoonover.com/solarized/
  */
 
-.asciinema-theme-solarized-dark {
+.asciinema-player-theme-solarized-dark {
  --term-color-foreground: #839496;
  --term-color-background: #002b36;
 

diff --git a/src/less/themes/_solarized-light.less b/src/less/themes/_solarized-light.less
@@ -2,7 +2,7 @@
  Based on Solarized Light: https://ethanschoonover.com/solarized/
  */
 
-.asciinema-theme-solarized-light {
+.asciinema-player-theme-solarized-light {
  --term-color-foreground: #657b83;
  --term-color-background: #fdf6e3;
 

diff --git a/src/less/themes/_tango.less b/src/less/themes/_tango.less
@@ -2,7 +2,7 @@
  Based on Tango: https://en.wikipedia.org/wiki/Tango_Desktop_Project
  */
 
-.asciinema-theme-tango {
+.asciinema-player-theme-tango {
  --term-color-foreground: #cccccc;
  --term-color-background: #121314;
 

diff --git a/src/parser/asciicast.js b/src/parser/asciicast.js
@@ -71,11 +71,28 @@ function parseAsciicastV2(header, events) {
  return {
  cols: header.width,
  rows: header.height,
+ theme: parseTheme(header.theme),
  events,
  idleTimeLimit: header.idle_time_limit
  }
 }
 
+function parseTheme(theme) {
+ const colorRegex = /^#[0-9A-Fa-f]{6}$/;
+ const paletteRegex = /^(#[0-9A-Fa-f]{6}:){7,}#[0-9A-Fa-f]{6}$/;
+ const fg = theme?.fg;
+ const bg = theme?.bg;
+ const palette = theme?.palette;
+
+ if (colorRegex.test(fg) && colorRegex.test(bg) && paletteRegex.test(palette)) {
+ return {
+ foreground: fg,
+ background: bg,
+ palette: palette.split(':')
+ }
+ }
+}
+
 function unparseAsciicastV2(recording) {
  const header = JSON.stringify({
  version: 2,