Browse Source

parse redactions

master
Amélia Liao 3 years ago
parent
commit
660135c060
2 changed files with 83 additions and 9 deletions
  1. +26
    -8
      src/main.tsx
  2. +57
    -1
      style.css

+ 26
- 8
src/main.tsx View File

@ -36,6 +36,8 @@ type IrcMessage = {
content: MessageFrag[] content: MessageFrag[]
} | { } | {
type: 'day_change' type: 'day_change'
} | {
type: 'redacted'
}; };
const URL = /(((?:https?|gopher):\/\/|www\d{0,3}[.]|[a-z0-9.\-]+[.][a-z]{2,4}\/|spotify:track:)((?:\(?[^\s()<>]+\)?)*[^ \s`!\[\]{};:\'".,<>?\xab\xbb\u201c\u201d\u2018\u2019]))/i; const URL = /(((?:https?|gopher):\/\/|www\d{0,3}[.]|[a-z0-9.\-]+[.][a-z]{2,4}\/|spotify:track:)((?:\(?[^\s()<>]+\)?)*[^ \s`!\[\]{};:\'".,<>?\xab\xbb\u201c\u201d\u2018\u2019]))/i;
@ -61,6 +63,10 @@ function parse(s: string): IrcMessage {
return { return {
type: "day_change" type: "day_change"
}; };
} else if (s === "[REDACTED]") {
return {
type: "redacted"
};
} }
const time = s.slice(0, 5); const time = s.slice(0, 5);
@ -93,7 +99,7 @@ function parse(s: string): IrcMessage {
} }
} }
return { return {
time: "no:ts",
time: "error",
type: 'status', type: 'status',
content: [{ content: [{
type: 'error', type: 'error',
@ -106,7 +112,7 @@ const messages = lines.map(l => l.trim()).filter(l => l !== '.' && l !== "").map
type MsgGroup = { type MsgGroup = {
user?: IrcUser, user?: IrcUser,
type: "status" | "message" | "action" | "day_change",
type: "status" | "message" | "action" | "day_change" | "redacted",
messages: IrcMessage[] messages: IrcMessage[]
} }
@ -118,7 +124,7 @@ function group(messages: IrcMessage[]): MsgGroup[] {
let type: "status" | "action" | "message" | undefined = undefined; let type: "status" | "action" | "message" | undefined = undefined;
for (const m of messages) { for (const m of messages) {
if (m.type === "status" || m.type === "day_change") {
if (m.type === "status" || m.type === "day_change" || m.type == "redacted") {
groups.push({ groups.push({
user: discrim, user: discrim,
type: type ?? "message", type: type ?? "message",
@ -188,12 +194,19 @@ const Message = ({ message, inclTs }: { message: IrcMessage, inclTs?: boolean })
</div> </div>
}; };
const prefix = message.type === "action" ? "* " : "";
if (message.type === "redacted") {
return <div class="mg-redacted">
[REDACTED]
</div>;
}
return <div class={`mg-m mg-${message.type}`}> return <div class={`mg-m mg-${message.type}`}>
{ {
(inclTs === undefined || inclTs === true) ? <span class="mg-ts"> {message.time} </span> : undefined (inclTs === undefined || inclTs === true) ? <span class="mg-ts"> {message.time} </span> : undefined
} }
<span class={`mg-txt mg-${message.type}`}> {prefix} {message.content.map(c => render(c))} </span>
<span class={`mg-txt mg-${message.type}`}>
{ message.content.map(c => render(c)) }
</span>
</div> </div>
} }
@ -209,7 +222,7 @@ function renderMessageGroup(m: MsgGroup): HtmlEnt {
<div class="mg-contents"> <div class="mg-contents">
<span class="mg-ts-u"> <span class="mg-ts-u">
<span class="mg-ts-u-u"> {m.user?.name} </span> <span class="mg-ts-u-u"> {m.user?.name} </span>
<span class="mg-ts-u-ts"> {m0.type === "day_change" ? "what" : m0.time} </span>
<span class="mg-ts-u-ts"> {(m0.type === "day_change" || m0.type === "redacted") ? "what" : m0.time} </span>
</span> </span>
<Message message={m.messages[0]} inclTs={false} /> <Message message={m.messages[0]} inclTs={false} />
@ -223,7 +236,7 @@ function renderMessageGroup(m: MsgGroup): HtmlEnt {
</div> </div>
} else { } else {
if (m.messages.length < 1) { if (m.messages.length < 1) {
return <span />
return <hr style="display: none;" />
} }
return <div class="mg-no-user"> return <div class="mg-no-user">
@ -234,7 +247,12 @@ function renderMessageGroup(m: MsgGroup): HtmlEnt {
const rendered = groups.map(renderMessageGroup); const rendered = groups.map(renderMessageGroup);
const elem = <html>
const elem = <html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"></meta>
</head>
<body> <body>
{rendered} {rendered}
<svg id="squircle-container" width="0" height="0"> <svg id="squircle-container" width="0" height="0">


+ 57
- 1
style.css View File

@ -10,6 +10,7 @@ html {
body { body {
font-size: var(--font-size); font-size: var(--font-size);
padding-left: 0.8em; padding-left: 0.8em;
width: 90vw;
} }
.mg-user { .mg-user {
@ -84,5 +85,60 @@ body {
} }
.mg-no-user > .mg-status > .mg-txt { .mg-no-user > .mg-status > .mg-txt {
font-size: 14pt;
font-size: var(--font-size);
}
.mg-sep {
height: 0;
border-top: 1px dotted #666;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
margin-top: 1em;
margin-bottom: 1em;
}
.mg-sep > span {
height: var(--font-size);
background-color: white;
padding-left: 0.5em;
padding-right: 0.5em;
}
@media only screen and (max-width: 768px) {
body {
padding-left: 0;
}
.mg-status {
font-weight: normal;
}
.mg-status > .mg-txt {
font-style: italic;
}
}
.mg-redacted {
height: var(--pfp-height);
width: 100%;
background-color: black;
color: red;
display: flex;
flex-direction: column;
align-items: center;
padding-top: 0.2em;
padding-bottom: 0.2em;
margin-top: 0.1em;
margin-bottom: 0.1em;
font-weight: bold;
font-size: calc(1.2 * var(--font-size));
} }

Loading…
Cancel
Save