discord-message-transcript 1.3.1-dev.3.35 → 1.3.2-dev.0.49

package/dist/renderers/html/html copy.js

@@ -1,371 +0,0 @@
-import { CustomError } from "../../core/error";
-import { markdownToHTML } from "../../core/markdown";
-import { JsonButtonStyle, JsonComponentType } from "../../types/types";
-import { ACTIONROW_CSS, ATTACHMENT_CSS, BUTTON_CSS, COMPONENTS_CSS, COMPONENTSV2_CSS, DEFAULT_CSS, EMBED_CSS, MESSAGE_CSS } from "./css";
-const COUNT_UNIT = ["KB", "MB", "GB", "TB"];
-const BUTTON_COLOR = ["black", "#5865f2", "gray", "lime", "red", "black", "#5865f2"];
-export class Html {
-    guild;
-    channel;
-    messages;
-    options;
-    dateFormat;
-    constructor(data, options) {
-        this.guild = data.guild;
-        this.channel = data.channel;
-        this.messages = data.messages;
-        this.options = options;
-        try {
-            this.dateFormat = new Intl.DateTimeFormat(options.localDate, {
-                timeZone: options.timeZone,
-                day: '2-digit',
-                month: '2-digit',
-                year: 'numeric',
-                hour: '2-digit',
-                minute: '2-digit',
-                second: '2-digit'
-            });
-        }
-        catch (error) {
-            throw new CustomError("[discord-message-transcript] Invalid LocalDate and/or TimeZone.");
-        }
-    }
-    headerBuilder() {
-        return `
-        <div style="display: flex;  gap: 1.5rem; align-items: center;">
-            ${this.channel.img ? `<img src="${this.channel.img}" style="width: 7rem; height: 7rem; border-radius: 50%;">` : ""}
-            <div style="display: flex; flex-direction: column; justify-content: center; gap: 1.25rem;">
-                ${this.guild ? `<div id="guild" class="line">
-                    <h4>Guild: </h4>
-                    <h4 style="font-weight: normal;">${this.guild.name}</h4>
-                </div>` : ""}
-                ${this.channel.parent ? `<div id="category" class="line">
-                    <h4>Category: </h4>
-                    <h4 style="font-weight: normal;">${this.channel.parent.name}</h4>
-                </div>` : ""}
-                <div id="channel" class="line">
-                    <h4>Channel: </h4>
-                    <h4 style="font-weight: normal;">${this.channel.name}</h4>
-                </div>
-                ${this.channel.topic ? `<div id="topic" class="line">
-                    <h4>Topic: </h4>
-                    <h4 style="font-weight: normal;">${this.channel.topic}</h4>
-                </div>` : ""}
-            </div>
-        </div>
-        `;
-    }
-    messagesBuilder() {
-        return this.messages.map(message => {
-            const date = new Date(message.createdTimestamp);
-            message.content = markdownToHTML(message.content, message.mentions, this.dateFormat);
-            message.attachments;
-            return `
-<div class="messageDiv" id="${message.id}>
-    ${message.references && message.references.messageId ?
-                `<div class="messageReply" data-id="${message.references.messageId}">
-        <svg class="messageReplySvg"><use href="#reply-icon"></use></svg>
-        <img class="messageReplyImg">
-        ${message.author.bot ? `<p class="badgeReply">APP</p>` : ""}
-        <div class="messageReplyText"></div>
-    </div>` : ""}
-    <div class="messageBotton">
-        <img src="${message.author.avatarURL}" class="messageImg">
-        <div class="messageDivRight">
-            <div class="messageUser">
-                <h3 class="messageUsername" style="color: ${message.member?.displayHexColor ?? "#dbdee1"}">${message.member?.displayName ?? message.author.displayName}</h3>
-                ${message.author.bot ? `<p class="badge">APP</p>` : ""}
-                ${message.author.system ? `<p class="badge">SYSTEM</p>` : ""}
-                ${message.author.guildTag ? `<p class="badgeTag">${message.author.guildTag}</p>` : ""}
-                <p class="messageTimeStamp">${this.dateFormat.format(date)}</p>
-            </div>
-            <div class="messageContent"">${message.content}</div>
-            ${message.embeds.length > 0 ? this.embedBuilder(message, message.embeds) : ""}
-            ${message.attachments.length > 0 ? this.attachmentBuilder(message.attachments) : ""}
-            ${message.components.length > 0 ? this.componentBuilder(message, message.components) : ""}
-        </div>
-    </div>
-</div>
-        `;
-        }).join("");
-    }
-    toHTML() {
-        return `
-<!DOCTYPE html>
-<html lang="pt-BR"></html>
-<head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>${this.options.fileName}</title>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.11.1/build/styles/atom-one-dark.min.css">
-    <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.11.1/build/highlight.min.js"></script>
-    <style>
-    ${DEFAULT_CSS}
-    ${MESSAGE_CSS}
-    ${this.options.includeEmbeds ? EMBED_CSS : ""}
-    ${this.options.includeButtons || this.options.includeComponents ? ACTIONROW_CSS : ""}
-    ${this.options.includeAttachments || this.options.includeV2Components ? ATTACHMENT_CSS : ""}
-    ${this.options.includeButtons || this.options.includeV2Components ? BUTTON_CSS : ""}
-    ${this.options.includeComponents ? COMPONENTS_CSS : ""}
-    ${this.options.includeV2Components ? COMPONENTSV2_CSS : ""}
-    </style>
-</head>
-<body>
-    ${this.svgBuilder()}
-    <header>
-        ${this.headerBuilder()}
-    </header>
-    <main style="display: flex; flex-direction: column; gap: 1.75rem; padding: 2.25rem;">
-       ${this.messagesBuilder()}
-    </main>
-    <footer>
-        <br>
-        <h2>Transcript generated by <a href="https://github.com/HenriqueMairesse/discord-channel-transcript">discord-channel-transcript</a></h2>
-    </footer>
-    <script>
-        document.addEventListener('click', function (event) {
-            const spoiler = event.target.closest('.spoilerMsg, .spoilerAttachment');
-            if (spoiler && !spoiler.classList.contains('revealed')) {
-                event.preventDefault();
-                event.stopPropagation();
-                spoiler.classList.add('revealed');
-            }
-
-            const selectorInput = event.target.closest('.selectorInput');
-            document.querySelectorAll('.selector').forEach(selector => {
-                if (!selector.contains(event.target)) {
-                    selector.classList.remove('active');
-                }
-            });
-
-            if (selectorInput) {
-                const selector = selectorInput.closest('.selector');
-                if (selector) {
-                    selector.classList.toggle('active');
-                }
-            }
-        });
-        document.addEventListener('DOMContentLoaded', function (event) {
-            hljs.highlightAll();
-            
-        });
-    </script>
-</body>
-</html>     
-`;
-    }
-    embedBuilder(message, embeds) {
-        return embeds.map(embed => {
-            const embedAuthor = embed.author ? (embed.author.url ? `<a class="embedHeaderRightAuthorName" href="${embed.author.url}" target="_blank">${embed.author.name}</a>` : `<p class="embedHeaderRightAuthorName">${embed.author.name}</p>`) : "";
-            const embedTitle = embed.title ? (embed.url ? `<a class="embedHeaderRightTitle" href="${embed.url}" target="_blank">${embed.title}</a>` : `<p class="embedHeaderRightTitle">${embed.title}</p>`) : "";
-            return embed.type != "poll_result" ? `
-                <div class="embed" style="${embed.hexColor ? `border-left-color: ${embed.hexColor}` : ''}">
-                    ${embed.author || embed.title || embed.thumbnail ? `
-                    <div class="embedHeader">
-                        <div class="embedHeaderRight">
-                            ${embed.author ? `
-                            <div class="embedHeaderRightAuthor">
-                                ${embed.author.iconURL ? `<img class="embedHeaderRightAuthorImg" src="${embed.author.iconURL}">` : ""}
-                                ${embedAuthor}
-                            </div>` : ""}
-                            ${embedTitle}
-                        </div>
-                        ${embed.thumbnail ? `<img class="embedHeaderThumbnail" src="${embed.thumbnail.url}">` : ""}
-                    </div>` : ""}
-                    ${embed.description ? `<div class="embedDescription">${markdownToHTML(embed.description, message.mentions, this.dateFormat)}</div>` : ""}
-                    ${embed.fields && embed.fields.length > 0 ? `
-                    <div class="embedFields">
-                        ${embed.fields.map(field => `
-                        <div class="embedFieldsField" style="${field.inline ? 'display: inline-block;' : ''}">
-                            <p class="embedFieldsFieldTitle">${field.name}</p>
-                            <p class="embedFieldsFieldValue">${markdownToHTML(field.value, message.mentions, this.dateFormat)}</p>
-                        </div>`).join("")}
-                    </div>` : ""}
-                    ${embed.image ? `
-                    <div class="embedImage">
-                        <img src="${embed.image.url}">
-                    </div>` : ""}
-                    ${embed.footer || embed.timestamp ? `
-                    <div class="embedFooter">
-                        ${embed.footer?.iconURL ? `<img class="embedFooterImg" src="${embed.footer.iconURL}">` : ""}
-                        ${embed.footer?.text || embed.timestamp ? `<p class="embedFooterText">${embed.footer?.text ?? ''}${embed.footer?.text && embed.timestamp ? ' | ' : ''}${embed.timestamp ? this.dateFormat.format(new Date(embed.timestamp)) : ''}</p>` : ""}
-                    </div>` : ""}
-                </div>
-            ` : ``;
-        }).join("");
-    }
-    attachmentBuilder(attachments) {
-        return attachments.map(attachment => {
-            let html = "";
-            if (attachment.contentType?.startsWith('image/')) {
-                html = `<img class="attachmentImage" src="${attachment.url}">`;
-            }
-            else if (attachment.contentType?.startsWith('video/')) {
-                html = `<video class="attachmentVideo" controls src="${attachment.url}"></video>`;
-            }
-            else if (attachment.contentType?.startsWith('audio/')) {
-                html = `<audio class="attachmentAudio" controls src="${attachment.url}"></audio>`;
-            }
-            else {
-                let fileSize = attachment.size / 1024;
-                let count = 0;
-                while (fileSize > 512 && count < COUNT_UNIT.length - 1) {
-                    fileSize = fileSize / 1024;
-                    count++;
-                }
-                html = `
-                    <div class="attachmentFile">
-                        <div class="attachmentFileInfo">
-                            <p class="attachmentFileName">${attachment.name ?? 'attachment'}</p>
-                            <div class="attachmentFileSize">${fileSize.toFixed(2)} ${COUNT_UNIT[count]}</div>
-                        </div>
-                        <a class="attachmentDownload" href="${attachment.url}" target="_blank">
-                            <svg class="attachmentDownloadIcon"><use href="#download-icon"></use></svg>
-                        </a>
-                    </div>
-                `;
-            }
-            return this.spoilerAttachmentBuilder(attachment.spoiler, html);
-        }).join("");
-    }
-    componentBuilder(message, components) {
-        return components.map(component => {
-            switch (component.type) {
-                case JsonComponentType.ActionRow: {
-                    if (!component.components[0])
-                        return "";
-                    return `
-                    <div class="actionRow">
-                        ${component.components[0].type == JsonComponentType.Button ? component.components.map(button => {
-                        return button.type == JsonComponentType.Button ? this.buttonBuilder(button) : "";
-                    }).join("") : this.selectorBuilder(component.components[0])}
-                    </div>
-                    `;
-                }
-                case JsonComponentType.Container: {
-                    const html = `
-                    <div class="container" style="${component.hexAccentColor ? `border-left-color: ${component.hexAccentColor}` : ''}">
-                        ${this.componentBuilder(message, component.components)}
-                    </div>
-                    `;
-                    return this.spoilerAttachmentBuilder(component.spoiler, html);
-                }
-                case JsonComponentType.File: {
-                    let fileSize = (component.size ?? 0) / 1024;
-                    let count = 0;
-                    while (fileSize > 512 && count < COUNT_UNIT.length - 1) {
-                        fileSize = fileSize / 1024;
-                        count++;
-                    }
-                    const html = `
-                        <div class="attachmentFile">
-                            <div class="attachmentFileInfo">
-                                <p class="attachmentFileName">${component.fileName ?? 'file'}</p>
-                                <div class="attachmentFileSize">${fileSize.toFixed(2)} ${COUNT_UNIT[count]}</div>
-                            </div>
-                            <a class="attachmentDownload" href="${component.url ?? ''}" target="_blank">
-                                <svg class="attachmentDownloadIcon"><use href="#download-icon"></use></svg>
-                            </a>
-                        </div>
-                    `;
-                    return this.spoilerAttachmentBuilder(component.spoiler, html);
-                }
-                case JsonComponentType.MediaGallery: {
-                    return `
-                    <div class="mediaGallery"> 
-                        ${component.items.map(image => {
-                        return `
-                            <div class="mediaGalleryItem"> 
-                                ${this.spoilerAttachmentBuilder(image.spoiler, `<img class="mediaGalleryImg" src="${image.media.url}">`)}
-                            </div>
-                            `;
-                    }).join("")}
-                    </div>
-                    `;
-                }
-                case JsonComponentType.Section: {
-                    return `
-                    <div class="section">
-                        <div class="sectionLeft">
-                            ${this.componentBuilder(message, component.components)}
-                        </div>
-                        <div class="sectionRight">
-                            ${component.accessory.type == JsonComponentType.Button ? this.buttonBuilder(component.accessory)
-                        : component.accessory.type == JsonComponentType.Thumbnail ? this.spoilerAttachmentBuilder(component.accessory.spoiler, `
-                            <img class="sectionThumbnail" src="${component.accessory.media.url}">
-                            `) : ""}
-                        </div>
-                    </div> 
-                    `;
-                }
-                case JsonComponentType.Separator: {
-                    return `<hr>`;
-                }
-                case JsonComponentType.TextDisplay: {
-                    return markdownToHTML(component.content, message.mentions, this.dateFormat);
-                }
-                default:
-                    return ``;
-            }
-        }).join("");
-    }
-    buttonBuilder(button) {
-        return `
-        <div class="button" style="background-color: ${BUTTON_COLOR[button.style]}">
-            ${button.style == JsonButtonStyle.Link ? `
-            <a class="buttonLink" href="${button.url}" target="_blank">
-                ${button.emoji ? `<p class="buttonEmoji">${button.emoji}</p>` : ""}
-                ${button.label ? `<p class="buttonLabel">${button.label}</p>` : ""}
-                <svg class="buttonLinkIcon"><use href="#link-icon"></use></svg>
-            </a>` : `
-                ${button.emoji ? `<p class="buttonEmoji">${button.emoji}</p>` : ""}
-                ${button.label ? `<p class="buttonLabel">${button.label}</p>` : ""}
-            `}
-        </div>
-        `;
-    }
-    selectorBuilder(selector) {
-        return `
-        <div class="selector">
-            <div class="selectorInput">
-                <p class="selectorInputText">${selector.placeholder}</p>
-            </div>
-            <div class="selectorOptionMenu">
-                ${selector.type == JsonComponentType.StringSelect ? selector.options.map(option => {
-            return `
-                    <div class="selectorOption">
-                        ${option.emoji ? `<p class="selectorOptionEmoji">${option.emoji}</p>` : ""}
-                        <div class="selectorOptionRight">
-                            <p class="selectorOptionTitle">${option.label}</p>
-                            ${option.description ? `<p class="selectorOptionDesc">${option.description}</p>` : ""}
-                        </div>
-                    </div>
-                    `;
-        }).join("") : ""}
-            </div>
-        </div>
-        `;
-    }
-    spoilerAttachmentBuilder(spoiler, html) {
-        return spoiler ? `<div class="spoilerAttachment"><div class="spoilerAttachmentOverlay">SPOILER</div><div class="spoilerAttachmentContent">${html}</div></div>` : html;
-    }
-    svgBuilder() {
-        return `
-    <svg style="display: none;">
-        <defs>
-            <symbol id="reply-icon" viewBox="0 0 16 16" fill="none">
-                <g transform="rotate(90 8 8)">
-                    <path d="M6 2V9C6 11.5 8.5 14 11 14H14" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
-                </g>
-            </symbol>
-            ${this.options.includeAttachments ? `<symbol id="download-icon" viewBox="0 -960 960 960">
-                <path d="m720-120 160-160-56-56-64 64v-167h-80v167l-64-64-56 56 160 160ZM560 0v-80h320V0H560ZM240-160q-33 0-56.5-23.5T160-240v-560q0-33 23.5-56.5T240-880h280l240 240v121h-80v-81H480v-200H240v560h240v80H240Zm0-80v-560 560Z"/>
-            </symbol> ` : ""}
-            ${this.options.includeButtons ? `<symbol id="link-icon" viewBox="0 -960 960 960" fill="#e3e3e3">
-                <path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h280v80H200v560h560v-280h80v280q0 33-23.5 56.5T760-120H200Zm188-212-56-56 372-372H560v-80h280v280h-80v-144L388-332Z"/>
-            </symbol>` : ""}
-        </defs>
-    </svg>
-    `;
-    }
-}

package/dist/renderers/html/html-backup.d.ts

@@ -1,19 +0,0 @@
-import { JsonData, JsonDataChannel, JsonDataGuild, JsonMessage, TranscriptOptions } from "../../types/types";
-export declare class Html {
-    guild: JsonDataGuild | null;
-    channel: JsonDataChannel;
-    messages: JsonMessage[];
-    options: TranscriptOptions;
-    dateFormat: Intl.DateTimeFormat;
-    constructor(data: JsonData, options: TranscriptOptions);
-    private headerBuilder;
-    private messagesBuilder;
-    toHTML(): string;
-    private embedBuilder;
-    private attachmentBuilder;
-    private componentBuilder;
-    private buttonBuilder;
-    private selectorBuilder;
-    private spoilerAttachmentBuilder;
-    private svgBuilder;
-}