react-player
react-player copied to clipboard
cookpete
Asciinema support
asciinema is a free and open source solution for recording terminal sessions and sharing them on the web.
Since asciinema is a casting format that's basically a text file rather than a video (see https://github.com/asciinema/asciinema/blob/main/doc/asciicast-v2.md), functions like volume and mute are irrelevant.
Important note: In order to correctly render the player, a CSS is needed (see https://github.com/asciinema/asciinema-player/releases/download/v3.5.0/asciinema-player.css). I couldn't find a similar case in any of the other players so I wanted to consult with you as to where you feel we should commit it (or maybe you reckon it's better to include a link tag in the render() function?). For now, I committed it under src/demo/asciinema-player.css just to make the demo app work but of course, that should be changed.
In the demo app, you'll also notice that the player's div doesn't occupy the whole width of its parent even though the style is set thusly:
render () {
const style = {
width: '100%',
height: '100%'
}
return (
<div style={style} ref={this.ref} id={this.playerID} />
)
}
more info about the reason for that can be found here: https://github.com/asciinema/asciinema-player#fit
Hi @cookpete ,
Any thoughts on this? I really do think it could benefit react-player's users.
Cheers,
Hey 👋 , super cool video use case and tech. I'm still wrapping my head around the architecture of react-player, but I know one of the hesitancies Pete has had in merging more playback types is the weight of the default bundle. If you have any insights on that topic let me know. Otherwise I'll weigh in more once I understand the situation better.
I think for the time being it’s fine to merge these extra players, with maybe some emphasis in the Usage part of the readme to make it clear that importing react-player will import every player and inflate your bundle, regardless of whether you use it or not. There is already a suggestion to use individual players (eg react-player/youtube) or react-player/lazy but maybe this needs to be more prominent somehow.
Hi @heff , @cookpete ,
I see some references to that already. To me, it's clear enough but if you feel additional clarifications should be made then of course, I'll all for it.
With regards to ASCIInema specifically, the only question I have (as per my original comment) is:
In order to correctly render the player, a CSS is needed (see https://github.com/asciinema/asciinema-player/releases/download/v3.5.0/asciinema-player.css). I couldn't find a similar case in any of the other players so I wanted to consult with you as to where you feel we should commit it (or maybe you reckon it's better to include a link tag in the render() function?). For now, I committed it under src/demo/asciinema-player.css just to make the demo app work but of course, that should be changed.
Could you share your thoughts?
Cheers,
Hey @jessp01
I see two options:
- Add something to the readme (or somewhere appropriate) to explain that you will need to include
asciinema-player.csssomewhere in your bundle for the player to work – leave it up to the dev to decide how to load it. - Maybe add a
loadStylesutil, similar togetSDK, which adds a<link>tag to the<head>if it has not already been added. Then when you callgetSDKinside theload()method, you can also doloadStyles(STYLESHEET_URL)or similar
Hey @cookpete ,
Add something to the readme (or somewhere appropriate) to explain that you will need to include asciinema-player.css somewhere in your bundle for the player to work – leave it up to the dev to decide how to load it.
If I could trust everyone to read, I'd vote for that but, as I think you'll agree, being well experienced, people mostly don't and then, they report issues... so, I reckon adding a loadStyles() util method is best (and could potentially serve other purposes in future). Do you want to do so or shall I?
Cheers,