@fantinodavide/discord-html-transcripts
Version:
A nicely formatted html transcript generator for discord.js.
204 lines • 8.18 kB
JavaScript
"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
var ownKeys = function(o) {
ownKeys = Object.getOwnPropertyNames || function (o) {
var ar = [];
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
return ar;
};
return ownKeys(o);
};
return function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
__setModuleDefault(result, mod);
return result;
};
})();
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.V2Container = V2Container;
exports.V2TextDisplay = V2TextDisplay;
exports.V2Separator = V2Separator;
exports.V2Section = V2Section;
exports.V2Thumbnail = V2Thumbnail;
exports.V2MediaGallery = V2MediaGallery;
exports.V2Button = V2Button;
exports.V2ButtonContainer = V2ButtonContainer;
const react_1 = __importDefault(require("react"));
const content_1 = __importStar(require("./content"));
function V2Container({ accentColor, children }) {
const containerStyle = {
width: '100%',
};
const contentStyle = Object.assign({}, (accentColor && {
borderLeft: `0px solid ${accentColor}`,
}));
return (react_1.default.createElement("div", { style: containerStyle },
react_1.default.createElement("div", { className: "discord-v2container", style: contentStyle }, children)));
}
function V2TextDisplay({ content, style = 'paragraph', context }) {
const getTextStyle = () => {
switch (style) {
case 'heading1':
return {
fontSize: '2rem',
fontWeight: '700',
lineHeight: '1.25',
color: '#ffffff',
marginBottom: '8px',
marginTop: '0',
};
case 'heading2':
return {
fontSize: '1.5rem',
fontWeight: '600',
lineHeight: '1.25',
color: '#ffffff',
marginBottom: '6px',
marginTop: '0',
};
case 'heading3':
return {
fontSize: '1.25rem',
fontWeight: '600',
lineHeight: '1.25',
color: '#ffffff',
marginBottom: '4px',
marginTop: '0',
};
default:
return {
fontSize: '16px',
lineHeight: '1.375',
color: '#dcddde',
marginBottom: '8px',
};
}
};
return (react_1.default.createElement("div", { style: getTextStyle() },
react_1.default.createElement(content_1.default, { content: content, context: Object.assign(Object.assign({}, context), { type: content_1.RenderType.NORMAL }) })));
}
function V2Separator({ spacing = 'medium' }) {
const getSpacing = () => {
switch (spacing) {
case 'small': return '8px';
case 'large': return '24px';
default: return '16px';
}
};
return (react_1.default.createElement("div", { style: { margin: `${getSpacing()} 0` } },
react_1.default.createElement("hr", { style: {
border: 'none',
height: '1px',
backgroundColor: '#3f4147',
margin: 0
} })));
}
function V2Section({ text, accessory, context }) {
return (react_1.default.createElement("div", { style: {
display: 'flex',
alignItems: 'flex-start',
gap: '12px',
marginBottom: '8px'
} },
text && (react_1.default.createElement("div", { style: { flex: 1 } },
react_1.default.createElement(V2TextDisplay, { content: text.content, style: text.style, context: context }))),
accessory && (react_1.default.createElement("div", null, accessory))));
}
function V2Thumbnail({ url, altText }) {
return (react_1.default.createElement("div", null,
react_1.default.createElement("img", { src: url, alt: altText || 'Thumbnail', style: {
maxWidth: '80px',
maxHeight: '80px',
borderRadius: '4px',
objectFit: 'cover',
}, loading: "lazy" })));
}
function V2MediaGallery({ items }) {
const getGridColumns = (itemCount) => {
if (itemCount === 1)
return 1;
if (itemCount === 2)
return 2;
if (itemCount <= 4)
return 2;
return 3;
};
const gridColumns = getGridColumns(items.length);
return (react_1.default.createElement("div", { style: {
display: 'grid',
gridTemplateColumns: `repeat(${gridColumns}, 1fr)`,
gap: '4px',
margin: '8px 0',
maxWidth: '400px',
} }, items.map((item, index) => (react_1.default.createElement("div", { key: index }, item.type === 'image' ? (react_1.default.createElement("img", { src: item.url, alt: item.altText || `Media ${index + 1}`, style: {
width: '100%',
height: '120px',
objectFit: 'cover',
borderRadius: '4px',
}, loading: "lazy" })) : (react_1.default.createElement("video", { src: item.url, style: {
width: '100%',
height: '120px',
objectFit: 'cover',
borderRadius: '4px',
}, controls: true, preload: "metadata" })))))));
}
function V2Button({ label, style = 'secondary', disabled = false }) {
const getButtonStyle = () => {
const baseStyle = {
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center',
padding: '8px 16px',
borderRadius: '4px',
border: 'none',
fontSize: '14px',
fontWeight: '500',
cursor: disabled ? 'not-allowed' : 'pointer',
textDecoration: 'none',
minHeight: '32px',
opacity: disabled ? 0.5 : 1,
transition: 'all 0.15s ease',
};
switch (style) {
case 'primary':
return Object.assign(Object.assign({}, baseStyle), { backgroundColor: '#5865f2', color: '#ffffff' });
case 'danger':
return Object.assign(Object.assign({}, baseStyle), { backgroundColor: '#da373c', color: '#ffffff' });
case 'success':
return Object.assign(Object.assign({}, baseStyle), { backgroundColor: '#3ba55c', color: '#ffffff' });
default:
return Object.assign(Object.assign({}, baseStyle), { backgroundColor: '#4f545c', color: '#ffffff' });
}
};
return (react_1.default.createElement("button", { style: getButtonStyle(), disabled: disabled }, label));
}
function V2ButtonContainer({ children }) {
return (react_1.default.createElement("div", { style: {
display: 'flex',
gap: '8px',
flexWrap: 'wrap',
marginTop: '12px',
} }, children));
}
//# sourceMappingURL=v2Components.js.map