parse redactions

4 years ago · 660135c060
--- a/src/main.tsx
+++ b/src/main.tsx
@ -36,6 +36,8 @@ type IrcMessage = {
  content: MessageFrag[]
 } | {
  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;
@ -61,6 +63,10 @@ function parse(s: string): IrcMessage {
    return {
      type: "day_change"
    };
  } else if (s === "[REDACTED]") {
    return {
      type: "redacted"
    };
  }

  const time = s.slice(0, 5);
@ -93,7 +99,7 @@ function parse(s: string): IrcMessage {
    }
  }
  return {
    time: "no:ts",
    time: "error",
    type: 'status',
    content: [{
      type: 'error',
@ -106,7 +112,7 @@ const messages = lines.map(l => l.trim()).filter(l => l !== '.' && l !== "").map

 type MsgGroup = {
  user?: IrcUser,
  type: "status" | "message" | "action" | "day_change",
  type: "status" | "message" | "action" | "day_change" | "redacted",
  messages: IrcMessage[]
 }

@ -118,7 +124,7 @@ function group(messages: IrcMessage[]): MsgGroup[] {
  let type: "status" | "action" | "message" | undefined = undefined;

  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({
        user: discrim,
        type: type ?? "message",
@ -188,12 +194,19 @@ const Message = ({ message, inclTs }: { message: IrcMessage, inclTs?: boolean })
    </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}`}>
    {
      (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>
 }

@ -209,7 +222,7 @@ function renderMessageGroup(m: MsgGroup): HtmlEnt {
      <div class="mg-contents">
        <span class="mg-ts-u">
          <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>

        <Message message={m.messages[0]} inclTs={false} />
@ -223,7 +236,7 @@ function renderMessageGroup(m: MsgGroup): HtmlEnt {
    </div>
  } else {
    if (m.messages.length < 1) {
      return <span />
      return <hr style="display: none;" />
    }

    return <div class="mg-no-user">
@ -234,7 +247,12 @@ function renderMessageGroup(m: MsgGroup): HtmlEnt {

 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>
    {rendered}
    <svg id="squircle-container" width="0" height="0">
--- a/style.css
+++ b/style.css
@ -10,6 +10,7 @@ html {
 body {
  font-size: var(--font-size);
  padding-left: 0.8em;
  width: 90vw;
 }

 .mg-user {
@ -84,5 +85,60 @@ body {
 }

 .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));
 }