Variables
Const EmbedPlayer
EmbedPlayer: ComponentClass<object & StyledComponentProps<"embedIFrame" | "embedInfoAvatar" | "embedInfoText" | "embedSelect" | "embedToolbar">, any> | FunctionComponent<object & StyledComponentProps<"embedIFrame" | "embedInfoAvatar" | "embedInfoText" | "embedSelect" | "embedToolbar">> = withStyles(styles)(class extends React.Component<EmbedPlayerProps, EmbedPlayerState> {constructor(props: EmbedPlayerProps) {super(props);this.state = {currentEmbedSelected: 0,embedSelectionOpen: false,};}public setCurrentEmbed(embedIndex: number) {this.setState({currentEmbedSelected: embedIndex});}public render() {const {classes, embeds} = this.props;const {currentEmbedSelected, embedSelectionOpen} = this.state;const currentEmbed = embeds[currentEmbedSelected];const handleEmbedSelectOpen = () => this.setState({embedSelectionOpen: true});const handleEmbedSelectClose = () => this.setState({embedSelectionOpen: false});const handleEmbedSelectChange = (event: React.ChangeEvent<HTMLSelectElement>) =>this.setCurrentEmbed(parseInt(event.target.value, 10));const embedSelectInputProps = {id: "embed-selection-control",name: _("episode__switch_embed"),};let embeddedPlayer;if (currentEmbed)embeddedPlayer = (<StableIFramesrc={currentEmbed.url}className={classes.embedIFrame}allowFullScreen/>);return (<><Paper><Toolbar className={classes.embedToolbar}><Tooltip title={_("episode__embedded_stream__warning")} placement="bottom"><span><Typographyvariant="h6"color="textSecondary"style={{display: "inline"}}noWrap>{_("episode__embedded_stream")} <HelpOutlineIcon fontSize="small" color="secondary"/></Typography></span></Tooltip><FormControl><InputLabel htmlFor="embed-selection-control">{_("episode__switch_embed")}</InputLabel><SelectclassName={classes.embedSelect}open={embedSelectionOpen}onOpen={handleEmbedSelectOpen}onClose={handleEmbedSelectClose}value={currentEmbedSelected}onChange={handleEmbedSelectChange}inputProps={embedSelectInputProps}>{this.renderEmbedProviders()}</Select></FormControl></Toolbar></Paper><WithRatio ratio={16 / 9}>{embeddedPlayer}</WithRatio></>);}private renderEmbedProviders() {const {classes, embeds} = this.props;const onAvatarError = (event: React.SyntheticEvent<any>) => (event.target as Element).remove();const renderEmbedIcon = (embed: EmbedInfo) => (<ListItemAvatar><Avatarsrc={embed.icon}className={classes.embedInfoAvatar}onError={onAvatarError}/></ListItemAvatar>);return (embeds.map((embed, index) => (<MenuItem value={index} key={embed.url}>{embed.icon && renderEmbedIcon(embed)}<ListItemText className={classes.embedInfoText}>{embed.name} {embed.number}</ListItemText></MenuItem>)));}},)
Const Player
Player: ComponentClass<object & StyledComponentProps<"plyrContainer">, any> | FunctionComponent<object & StyledComponentProps<"plyrContainer">> = withStyles(styles)(class extends React.Component<PlayerProps> {public player?: Plyr;public componentDidMount() {const {eventListener, options} = this.props;// normal autoplay only works when muted and doesn't fire "ended" event!const autoplay = options.autoplay;options.autoplay = false;const domNode = ReactDOM.findDOMNode(this);if (!(domNode && domNode.firstChild))throw new Error("Couldn't find dom node");this.player = new Plyr(domNode.firstChild as HTMLElement, options);if (eventListener) {for (const [event, handler] of Object.entries(eventListener)) {if (!handler) continue;this.player.on(event as PlyrEvents, handler);}}if (autoplay) Promise.resolve(this.player.play()).catch();}public componentWillUnmount() {if (this.player) this.player.destroy();}public renderSource(): Array<React.ReactElement<any>> {// currently plyr breaks when not supplying a video type, this defaulting to video/mp4return this.props.sources.map((source, index) => (<sourcekey={index}src={source.url}type={source.type || "video/mp4"}/>));}public render() {const {classes} = this.props;return (<div className={classes.plyrContainer}><video poster={this.props.poster} playsInline controls>{this.renderSource()}</video></div>);}},)
Const SnackbarListener
SnackbarListener: ComponentClass<object, any> & object = withSnackbar((props: SnackbarListenerProps & withSnackbarProps) => {// this isn't another function, tslint, it's just a wrapped component.// you can just chill.// tslint:disable-next-line:react-hooks-nestinguseSubscription(props.snackbarMessage$, (msg: SnackbarMessage) => {const action = msg.action;if (isSnackbarAction(action)) {const buttonProps: ButtonProps = {color: "secondary",size: "small",};if (action.buttonProps)Object.assign(buttonProps, action.buttonProps);msg.action = (<Button {...buttonProps}>{action.text}</Button>);if (action.onClick)msg.onClickAction = action.onClick;}props.enqueueSnackbar(msg.message, msg);});return null;},)
Const WithRatio
WithRatio: ComponentClass<object & StyledComponentProps<"ratioContainer" | "ratioSpacer">, any> | FunctionComponent<object & StyledComponentProps<"ratioContainer" | "ratioSpacer">> = withStyles(styles)(class extends React.Component<WithRatioProps> {public render() {const {classes, children, ratio} = this.props;return (<Paper className={classes.ratioSpacer} style={{paddingBottom: `${100 * (1 / ratio)}%`}}><div className={classes.ratioContainer}>{children}</div></Paper>);}},)
Const embedProviders
embed
Providers: EmbedProvider[] = [{hostname: "mystream.to",match: /(\w+\.)?mystream.to/,name: "MyStream",},{hostname: "fembed.com",icon: "https://www.fembed.com/asset/default/img/favicon.png",name: "Fembed",},{hostname: "mp4upload.com",name: "Mp4Upload",},{hostname: "openload.co",match: /(oload\.tv)|(openload\.co)/,name: "openload",},{hostname: "rapidvideo.com",name: "RapidVideo",},{hostname: "stream.moe",icon: "https://stream.moe/themes/flow/frontend_assets/images/icons/favicon/favicon.ico",name: "Stream.moe",},{hostname: "streamango.com",match: /streamango\.(com|tv)/,name: "streamango",},].map(provider => {const embed = createEmbedProvider(provider.hostname, provider);embed.external = false;return embed;})Const embedProvidersByID
embedProvidersByID: object = embedProviders.reduce((prev, current) => {prev[current.id] = current;return prev;}, {} as { [id: string]: EmbedProvider })
Const tldMatcher
tldMatcher: RegExp = /\.\w+$/
Const useStyles
useStyles: function = makeStyles((theme: Theme) => ({chip: {margin: `${theme.spacing(.5)} ${theme.spacing(.25)}`,},chipFocused: {backgroundColor: emphasize(theme.palette.type === "light" ? theme.palette.grey[300] : theme.palette.grey[700],0.08,),},divider: {height: theme.spacing(2),},input: {display: "flex",padding: 0,},noOptionsMessage: {padding: `${theme.spacing(1)} ${theme.spacing(2)}`,},paper: {left: 0,marginTop: theme.spacing(1),position: "absolute",right: 0,zIndex: 2,},placeholder: {fontSize: 16,left: 2,position: "absolute",},root: {flexGrow: 1,height: 250,},singleValue: {fontSize: 16,},valueContainer: {alignItems: "center",display: "flex",flex: 1,flexWrap: "wrap",overflow: "hidden",},}))
Type declaration
-
- (props?: any): ClassNameMap<ClassKeyOfStyles<S>>
-
Parameters
Returns ClassNameMap<ClassKeyOfStyles<S>>
Const wwwMatcher
wwwMatcher: RegExp = /^www\./
React components.