Winamp Generated PlayList

import React from "react"; import { render } from "react-dom"; interface Props { averageTrackLength: string; numberOfTracks: number; playlistLengthSeconds: number; playlistLengthMinutes: number; tracks: string[]; } export const getAsDataURI = (text: string): string => `data:text/html;base64,${window.btoa(text)}`; // Replaces deprecated "noshade" attribute const noshadeStyle = { height: "2px", borderWidth: 0, color: "gray", backgroundColor: "gray", }; // We use all kinds of non-standard attributes and tags. So we create these fake // components to trick Typescript. const Body = (props: any) => { // @ts-ignore return ; }; const Font = (props: any) => { // @ts-ignore return ; }; const Hr = (props: any) => { // @ts-ignore return

; }; const Div = (props: any) => { // @ts-ignore return

; }; const Table = (props: any) => { // @ts-ignore return ; }; // TODO: Move tag out to the string creation step in order // to avoid the warning. const Playlist = (props: Props) => ( Winamp Generated PlayList

WINAMP

playlist

{/* Added tag */}

{props.numberOfTracks} {" track in playlist, average track length: "} {props.averageTrackLength}
{"Playlist length: "} {props.playlistLengthMinutes} {" minutes "} {props.playlistLengthSeconds} {" second "}
Right-click here to save this HTML file.

Playlist files: {/* Added closing tag here */}

{props.tracks.map(track => ( {track}
))} {/* Added closing tag here */}

); const createPlaylistHTML = (props: Props): string => { const node = document.createElement("div"); render(, node); return node.innerHTML; }; export const createPlaylistURL = (props: Props): string => getAsDataURI(createPlaylistHTML(props));