diff --git a/js/playlistHtml.js b/js/playlistHtml.tsx similarity index 55% rename from js/playlistHtml.js rename to js/playlistHtml.tsx index 2dda8e2a..46af9f56 100644 --- a/js/playlistHtml.js +++ b/js/playlistHtml.tsx @@ -1,7 +1,15 @@ import React from "react"; import { render } from "react-dom"; -export const getAsDataURI = text => +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 @@ -12,9 +20,36 @@ const noshadeStyle = { 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 => ( +const Playlist = (props: Props) => ( @@ -27,79 +62,79 @@ const Playlist = 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 */}

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