Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 | 1x 1x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 3x 4x 2x 2x 4x | import React from 'react';
import ReactDOM from 'react-dom';
export interface YoutubeEmbedProps {
left: number;
top: number;
videoID: string;
width?: number;
height?: number;
}
class YoutubeEmbedRenderer {
private static lastComponentContainer: HTMLDivElement | null = null;
private static containers = new Set<HTMLDivElement>();
static render(props: YoutubeEmbedProps): HTMLDivElement {
const componentContainer = document.createElement('div');
document.body.appendChild(componentContainer);
ReactDOM.render(
<YoutubeEmbed {...props}></YoutubeEmbed>,
componentContainer,
);
this.lastComponentContainer = componentContainer;
this.containers.add(componentContainer);
return componentContainer;
}
private static deleteContainer(componentContainer: HTMLDivElement) {
ReactDOM.unmountComponentAtNode(componentContainer);
document.body.removeChild(componentContainer);
}
static delete(componentContainer: HTMLDivElement): void {
this.deleteContainer(componentContainer);
this.containers.delete(componentContainer);
if (componentContainer === this.lastComponentContainer) {
this.lastComponentContainer = null;
}
}
static clear(): void {
this.containers.forEach(con => {
this.deleteContainer(con);
});
this.containers.clear();
}
static deleteLastRenderedComponent(): void {
if (this.lastComponentContainer) {
this.delete(this.lastComponentContainer);
this.lastComponentContainer = null;
}
}
}
function YoutubeEmbed(props: YoutubeEmbedProps) {
return (
<iframe
role="presentation"
style={{...props, position: 'absolute', zIndex: 50}}
frameBorder={0}
allowFullScreen
src={`https://www.youtube.com/embed/${props.videoID}`}
title="YouTube video player"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
></iframe>
);
}
export default YoutubeEmbedRenderer;
|