Mirrors/webamp
1
0
Fork 0
mirror of https://github.com/captbaritone/webamp.git synced 2026-01-23 02:15:01 +00:00
Code Issues Projects Releases Wiki Activity

Repair Generate HTML Playlist feature

Browse source
This commit is contained in:
Jordan Eldredge 2025-06-19 12:24:56 -07:00
parent a0f5cd2358
commit 415a06f80f
1 changed files with 109 additions and 105 deletions
Download patch file Download diff file Expand all files Collapse all files

214
packages/webamp/js/playlistHtml.tsx
View file

@ -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 <html> tag out to the string creation step in order
// to avoid the warning.
const Playlist = (props: Props) => (
<html>
<head>
<link rel="stylesheet" href="null" />
<style type="text/css">
{`
body { background: #000040; }
.para1 { margin-top: -42px; margin-left: 145px; margin-right: 10px; font-family: "font2, Arial"; font-size: 30px; line-height: 35px; text-align: left; color: #E1E1E1; }
.para2 { margin-top: 15px; margin-left: 15px; margin-right: 50px; font-family: "font1, Arial Black"; font-size: 50px; line-height: 40px; text-align: left; color: #004080; }
`}
</style>
<title>Winamp Generated PlayList</title>
</head>
<Body bgcolor="#000080" topmargin="0" leftmargin="0" text="#FFFFFF">
<Div align="center">
<Div className="para2" align="center">
<p>WINAMP</p>
</Div>
<Div className="para1" align="center">
<p>playlist</p>
</Div>
<>
<Div align="center">
<Div className="para2" align="center">
<p>WINAMP</p>
</Div>
<Hr
align="left"
width="90%"
size="1"
color="#FFBF00"
style={noshadeStyle}
/>
<Div align="right">
<Table border="0" cellSpacing="0" cellPadding="0" width="98%">
{/* Added <tbody> tag */}
<tbody>
<tr>
<td>
<small>
<small>
<Font face="Arial" color="#FFBF00">
{props.numberOfTracks}
</Font>
<Font color="#409FFF" face="Arial">
{" track in playlist, average track length: "}
</Font>
<Font face="Arial" color="#FFBF00">
{props.averageTrackLength}
</Font>
</small>
</small>
<br />
<small>
<small>
<Font color="#409FFF" face="Arial">
{"Playlist length: "}
</Font>
<Font face="Arial" color="#FFBF00">
{props.playlistLengthMinutes}
</Font>
<Font color="#409FFF" face="Arial">
{" minutes "}
</Font>
<Font face="Arial" color="#FFBF00">
{props.playlistLengthSeconds}
</Font>
<Font color="#409FFF" face="Arial">
{" second "}
</Font>
<br />
<Font color="#409FFF" face="Arial">
Right-click <a href="./">here</a> to save this HTML file.
</Font>
</small>
</small>
</td>
</tr>
</tbody>
</Table>
<Div className="para1" align="center">
<p>playlist</p>
</Div>
<blockquote>
<p>
<Font color="#FFBF00" face="Arial">
<big>Playlist files:</big>
</Font>
{/* Added closing tag here */}
</p>
<ul>
<Font face="Arial" color="#FFFFFF">
<small>
{props.tracks.map((track) => (
<span key={track}>
{track}
</Div>
<Hr
align="left"
width="90%"
size="1"
color="#FFBF00"
style={noshadeStyle}
/>
<Div align="right">
<Table border="0" cellSpacing="0" cellPadding="0" width="98%">
{/* Added <tbody> tag */}
<tbody>
<tr>
<td>
<small>
<small>
<Font face="Arial" color="#FFBF00">
{props.numberOfTracks}
</Font>
<Font color="#409FFF" face="Arial">
{" track in playlist, average track length: "}
</Font>
<Font face="Arial" color="#FFBF00">
{props.averageTrackLength}
</Font>
</small>
</small>
<br />
<small>
<small>
<Font color="#409FFF" face="Arial">
{"Playlist length: "}
</Font>
<Font face="Arial" color="#FFBF00">
{props.playlistLengthMinutes}
</Font>
<Font color="#409FFF" face="Arial">
{" minutes "}
</Font>
<Font face="Arial" color="#FFBF00">
{props.playlistLengthSeconds}
</Font>
<Font color="#409FFF" face="Arial">
{" second "}
</Font>
<br />
</span>
))}
{/* Added closing tag here */}
</small>
</Font>
</ul>
</blockquote>
<Hr
align="left"
width="90%"
size="1"
color="#FFBF00"
style={noshadeStyle}
/>
</Body>
</html>
<Font color="#409FFF" face="Arial">
Right-click <a href="./">here</a> to save this HTML file.
</Font>
</small>
</small>
</td>
</tr>
</tbody>
</Table>
</Div>
<blockquote>
<p>
<Font color="#FFBF00" face="Arial">
<big>Playlist files:</big>
</Font>
{/* Added closing tag here */}
</p>
<ul>
<Font face="Arial" color="#FFFFFF">
<small>
{props.tracks.map((track) => (
<span key={track}>
{track}
<br />
</span>
))}
{/* Added closing tag here */}
</small>
</Font>
</ul>
</blockquote>
<Hr
align="left"
width="90%"
size="1"
color="#FFBF00"
style={noshadeStyle}
/>
</>
);
const createPlaylistHTML = (props: Props): string => {
const node = document.createElement("div");
const root = createRoot(node);
root.render(<Playlist {...props} />);
return node.innerHTML;
flushSync(() => {
root.render(<Playlist {...props} />);
});
return `
<html>
<head>
<link rel="stylesheet" href="null" />
<style type="text/css">
body { background: #000040; }
.para1 { margin-top: -42px; margin-left: 145px; margin-right: 10px; font-family: "font2, Arial"; font-size: 30px; line-height: 35px; text-align: left; color: #E1E1E1; }
.para2 { margin-top: 15px; margin-left: 15px; margin-right: 50px; font-family: "font1, Arial Black"; font-size: 50px; line-height: 40px; text-align: left; color: #004080; }
</style>
<title>Winamp Generated PlayList</title>
</head>
<body bgcolor="#000080" topmargin="0" leftmargin="0" text="#FFFFFF">
${node.innerHTML}
</body
</html>`;
};
export const createPlaylistURL = (props: Props): string =>