From 3701c6cbc129f60b2925cf154f751946ab85150e Mon Sep 17 00:00:00 2001 From: Marcin Kulik Date: Wed, 14 Feb 2024 11:02:31 +0100 Subject: [PATCH 1/2] Use original recording theme when available unless theme option used Closes #249 --- src/components/Player.js | 15 ++++++++++++++- src/core.js | 1 + src/driver/recording.js | 2 +- src/parser/asciicast.js | 17 +++++++++++++++++ 4 files changed, 33 insertions(+), 2 deletions(-) diff --git a/src/components/Player.js b/src/components/Player.js index baf0cc75..32c5fbfc 100644 --- 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,6 +386,17 @@ 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; } diff --git a/src/core.js b/src/core.js index 414c0acb..28966fdf 100644 --- 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 index adfd01be..8cd8fe24 100644 --- 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/parser/asciicast.js b/src/parser/asciicast.js index babb2671..df8bec7b 100644 --- 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, From c4917985d95331dd692ab1b3a183c096fac7ee8a Mon Sep 17 00:00:00 2001 From: Marcin Kulik Date: Wed, 14 Feb 2024 21:22:54 +0100 Subject: [PATCH 2/2] Change theme CSS class names from `asciinema-theme-*` to `asciinema-player-theme-*` --- src/components/Player.js | 2 +- src/less/themes/_asciinema.less | 2 +- src/less/themes/_dracula.less | 2 +- src/less/themes/_monokai.less | 2 +- src/less/themes/_nord.less | 2 +- src/less/themes/_seti.less | 2 +- src/less/themes/_solarized-dark.less | 2 +- src/less/themes/_solarized-light.less | 2 +- src/less/themes/_tango.less | 2 +- 9 files changed, 9 insertions(+), 9 deletions(-) diff --git a/src/components/Player.js b/src/components/Player.js index 32c5fbfc..5165bfd0 100644 --- a/src/components/Player.js +++ b/src/components/Player.js @@ -401,7 +401,7 @@ export default props => { } 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/less/themes/_asciinema.less b/src/less/themes/_asciinema.less index 46b481ef..daf83ae9 100644 --- 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 index a373f84a..406c945c 100644 --- 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 index 07ddeba4..972bbd61 100644 --- 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 index 8201b25d..756cda4d 100644 --- 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 index a2cc5aad..12300ff4 100644 --- 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 index f44e6fd2..2bc97873 100644 --- 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 index 3559107a..3bf707e7 100644 --- 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 index 383edae4..ec6868e4 100644 --- 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;