mirror of
https://github.com/hedgedoc/hedgedoc.git
synced 2025-05-27 13:34:28 -04:00
34 lines
1.1 KiB
TypeScript
34 lines
1.1 KiB
TypeScript
/*
|
|
* SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
|
|
*
|
|
* SPDX-License-Identifier: AGPL-3.0-only
|
|
*/
|
|
import { ClickShield } from '../../../components/markdown-renderer/replace-components/click-shield/click-shield'
|
|
import type { IdProps } from '../../../components/markdown-renderer/replace-components/custom-tag-with-id-component-replacer'
|
|
import React from 'react'
|
|
|
|
/**
|
|
* Renders an embedding for https://asciinema.org
|
|
*
|
|
* @param id The id from the asciinema url
|
|
*/
|
|
export const AsciinemaFrame: React.FC<IdProps> = ({ id }) => {
|
|
return (
|
|
<ClickShield
|
|
hoverIcon={'play'}
|
|
targetDescription={'asciinema'}
|
|
fallbackPreviewImageUrl={`https://asciinema.org/a/${id}.png`}
|
|
fallbackBackgroundColor={'#d40000'}
|
|
containerClassName={''}
|
|
data-cypress-id={'click-shield-asciinema'}>
|
|
<span className={'ratio ratio-16x9'}>
|
|
<iframe
|
|
allowFullScreen={true}
|
|
className=''
|
|
title={`asciinema cast ${id}`}
|
|
src={`https://asciinema.org/a/${id}/iframe?autoplay=1`}
|
|
/>
|
|
</span>
|
|
</ClickShield>
|
|
)
|
|
}
|