diff --git a/packages/webamp/js/playlistHtml.tsx b/packages/webamp/js/playlistHtml.tsx index e9d013b0..595f7222 100644 --- a/packages/webamp/js/playlistHtml.tsx +++ b/packages/webamp/js/playlistHtml.tsx @@ -1,4 +1,5 @@ import { createRoot } from "react-dom/client"; +import { flushSync } from "react-dom"; interface Props { averageTrackLength: string; @@ -49,119 +50,122 @@ const Table = (props: any) => { // TODO: Move tag out to the string creation step in order // to avoid the warning. const Playlist = (props: Props) => ( - - - - - Winamp Generated PlayList - - -
-
-

WINAMP

-
-
-

playlist

-
+ <> +
+
+

WINAMP

-
-
- - {/* 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

-
-

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

-
    - - - {props.tracks.map((track) => ( - - {track} +
+
+
+ + {/* Added tag */} + + + + + +
+ + + + {props.numberOfTracks} + + + {" track in playlist, average track length: "} + + + {props.averageTrackLength} + + + +
+ + + + {"Playlist length: "} + + + {props.playlistLengthMinutes} + + + {" minutes "} + + + {props.playlistLengthSeconds} + + + {" second "} +
- - ))} - {/* Added closing tag here */} - - - - -
- - + + 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"); const root = createRoot(node); - root.render(); - return node.innerHTML; + flushSync(() => { + root.render(); + }); + return ` + + + + + Winamp Generated PlayList + + + ${node.innerHTML} + `; }; export const createPlaylistURL = (props: Props): string =>