Skip to content

Commit

Permalink
mhm
Browse files Browse the repository at this point in the history
  • Loading branch information
TheAlan404 committed May 6, 2024
1 parent 5c959cc commit c1ebaa2
Show file tree
Hide file tree
Showing 9 changed files with 245 additions and 83 deletions.
17 changes: 10 additions & 7 deletions src/components/cards/CommentCard.tsx
Original file line number Diff line number Diff line change
@@ -1,14 +1,15 @@
import { ActionIcon, CopyButton, Grid, Group, Paper, Stack, Tooltip } from "@mantine/core";
import { ActionIcon, Box, CopyButton, Grid, Group, Paper, Stack, Tooltip } from "@mantine/core";
import { Comment } from "../../api/types/comment";
import { MarkdownText } from "../ui/MarkdownText";
import { ChannelCard } from "./ChannelCard";
import { VotingCard } from "./VotingCard";
import { IconCopy, IconPencil, IconPinned, IconTableImport, IconTableOff } from "@tabler/icons-react";
import { parseChapters, TimestampRegex } from "../../utils/parseChapters";
import { parseChapters } from "../../utils/parseChapters";
import { useContext } from "react";
import { VideoPlayerContext } from "../../api/context/VideoPlayerContext";
import { cleanDescription } from "../../utils/cleanDescription";
import { cleanDescription, textPartsToString } from "../../utils/cleanDescription";
import { DateCard } from "./DateCard";
import { TimestampRegex } from "../../utils/timestamp";

export const CommentCard = ({
comment
Expand Down Expand Up @@ -47,9 +48,11 @@ export const CommentCard = ({
)}
</Group>
</Group>
<MarkdownText
text={comment.content}
/>
<Box fz="sm">
<MarkdownText
text={comment.content}
/>
</Box>
<Group justify="space-between">
<Group>
<VotingCard
Expand All @@ -76,7 +79,7 @@ export const CommentCard = ({
</ActionIcon>
</Tooltip>
)}
<CopyButton value={cleanDescription(comment.content)}>
<CopyButton value={textPartsToString(cleanDescription(comment.content))}>
{({ copied, copy }) => (
<Tooltip label={copied ? "Copied!" : "Copy contents"}>
<ActionIcon
Expand Down
5 changes: 5 additions & 0 deletions src/components/player/VideoPlayer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,11 @@ export const VideoPlayer = () => {
setShowControls(false);
}, 2000);

useEffect(() => {
setShowControls(true);
hideCallback();
}, [playState]);

const shouldShowControls = (
keepControlsShown
|| showControls
Expand Down
22 changes: 22 additions & 0 deletions src/components/ui/ExternalLink.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import { Button } from "@mantine/core";
import { IconExternalLink } from "@tabler/icons-react";

export const ExternalLink = ({
link,
text,
}: {
link: string;
text: string;
}) => (
<Button
variant="light"
color="violet"
size="compact-sm"
leftSection={<IconExternalLink />}
component="a"
href={link}
target="_blank"
>
{text}
</Button>
);
77 changes: 32 additions & 45 deletions src/components/ui/MarkdownText.tsx
Original file line number Diff line number Diff line change
@@ -1,58 +1,45 @@
import { Box, Text, TypographyStylesProvider } from "@mantine/core";
import { Box, Text } from "@mantine/core";
import { useMemo } from "react";
import { TimestampButton } from "./TimestampButton";
import { timestampToSeconds } from "../../utils/timestamp";
import { cleanDescription } from "../../utils/cleanDescription";
import { TimestampRegex } from "../../utils/parseChapters";

const regex = new RegExp("(" + [
"\n",
"<b>.+<\/b>",
"[0-9]{1,2}:[0-9]{1,2}:[0-9]{1,2}",
"[0-9]{1,2}:[0-9]{1,2}",
].join("|") + ")");

const boldRegex = /(<b>)(.+)(<\/b>)/g;

const parts = {
newLine: () => (
<br />
),
text: (v) => (
<Text span>
{v}
</Text>
),
bold: (v) => (
<Text span fw="bold">
{v}
</Text>
),
timestamp: (v) => (
<TimestampButton
time={timestampToSeconds(v)}
/>
),
};
import { ExternalLink } from "./ExternalLink";

export const MarkdownText = ({
text,
}: {
text: string;
}) => {
let elements = useMemo(() => {
let clean = cleanDescription(text);

let list = clean.split(regex);

return list
.filter(x => x)
.map(item => {
if(item == "\n") return parts.newLine();
if(TimestampRegex.test(item)) return parts.timestamp(item);
if(boldRegex.test(item)) return parts.bold(item);

return parts.text(item);
let parts = cleanDescription(text);

return parts
.map(part => {
if(part.type == "newline") return (
<br />
);

if(part.type == "timestamp") return (
<TimestampButton
time={part.time}
/>
);

if(part.type == "link") return (
<ExternalLink
link={part.href}
text={part.href}
/>
);

return (
<Text
span
fw={part.bold ? "bold" : undefined}
fz="sm"
>
{part.data}
</Text>
);
});
}, [text]);

Expand Down
70 changes: 59 additions & 11 deletions src/site/pages/HomePage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,53 @@ import { Accordion, Button, Group, List, Space, Stack, Text, Title } from "@mant
import { ChangeInstanceButton } from "../../components/options/links/ChangeInstanceButton";
import { IconExternalLink } from "@tabler/icons-react";

const CHANGELOGS = `
0.1.2
- DeArrow support
- SearchBar shortcuts for video IDs and URLs
- Implemented the "Open With" section
- Added PokeTube public instances listing
- Aspect ratio is now automatic
- Chapters now can be grouped
- Current chapter now has a progress bar on the chapters tab
- Improved tabs performance
- Improved progress bar performance
0.1.1
- Added WatchPage animations
- Added changelogs and improved homepage
- Chapters based on comments
- Comments copy button
- Jump to current chapter button
- New cool font "borrowed" from Sharkey
`
.split("\n")
.map(x => x.trim())
.filter(x => x)
.reduce<{ version: string; items: string[]; }[]>((prev, cur) => {
if(cur.startsWith("-")) {
return [
...prev.filter((v, i, a) => i !== a.length - 1),
{
version: prev[prev.length - 1].version,
items: [
...prev[prev.length - 1].items,
cur.replace("-", "").trim(),
],
}
]
} else {
return [
...prev,
{
version: cur,
items: [],
}
]
}
}, []);

export const HomePage = () => {
return (
<Stack align="center" w="100%" h="100%" justify="center">
Expand Down Expand Up @@ -56,17 +103,18 @@ export const HomePage = () => {
</Accordion.Control>
<Accordion.Panel>
<List>
<List.Item>
0.1.1
<List withPadding>
<List.Item>Added WatchPage animations</List.Item>
<List.Item>Added changelogs and improved homepage</List.Item>
<List.Item>Chapters based on comments</List.Item>
<List.Item>Comments copy button</List.Item>
<List.Item>Jump to current chapter button</List.Item>
<List.Item>New cool font "borrowed" from Sharkey</List.Item>
</List>
</List.Item>
{CHANGELOGS.map((ver, i) => (
<List.Item key={i}>
{ver.version}
<List withPadding>
{ver.items.map((item, i) => (
<List.Item key={i}>
{item}
</List.Item>
))}
</List>
</List.Item>
))}
</List>
</Accordion.Panel>
</Accordion.Item>
Expand Down
4 changes: 1 addition & 3 deletions src/site/pages/WatchPage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -41,9 +41,7 @@ const WatchPageLayout = ({
aspect?: number;
}) => {
const ref = useRef<HTMLDivElement>(null);
let rect = ref.current ? ref.current.getBoundingClientRect() : null;
// w/h = a , a*h = w
let nice = rect ? (aspect * rect.height) : null;
let nice = ref.current ? (aspect * ref.current.getBoundingClientRect().height) : null;

const per = 0.65;
const { position, separatorProps, setPosition } = useResizable({
Expand Down
83 changes: 82 additions & 1 deletion src/utils/cleanDescription.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,86 @@
import { secondsToTimestamp, timestampToSeconds, TimestampRegex } from "./timestamp";

export type TextPart = {
type: "text";
data: string;
bold: boolean;
italic: boolean;
} | {
type: "newline";
} | {
type: "timestamp";
time: number;
} | {
type: "link",
href: string;
}

export const cleanDescription = (text = "") => {
let parser = new DOMParser();
let doc = parser.parseFromString(text.replaceAll("<br>", "\n"), "text/html");
return doc.documentElement.textContent;

let body = doc.children[0].children[1];
let nodes = [...body.childNodes];

let parts: TextPart[] = [];

for(let node of nodes) {
if(node.nodeType == Node.TEXT_NODE) {
let first = true;
for (let line of node.nodeValue.split("\n")) {
if(!first) {
parts.push({ type: "newline" });
} else {
first = false;
}

if(!line) continue;

parts.push({
type: "text",
data: line,
bold: false,
italic: false,
});
}
} else if(node.nodeType == Node.ELEMENT_NODE) {
if(node.nodeName == "A") {
let el = node as HTMLAnchorElement;
let isTimestamp = TimestampRegex.test(el.textContent);
if(isTimestamp) {
parts.push({
type: "timestamp",
time: timestampToSeconds(el.textContent),
})
} else {
parts.push({
type: "link",
href: el.href,
})
}
} else if(node.nodeName == "B") {
parts.push({
type: "text",
data: node.nodeValue,
bold: true,
italic: false,
});
} else if(node.nodeName == "BR") {
parts.push({ type: "newline" });
} else {
console.log("Unknown tag", node);
}
}
}

return parts;
};

export const textPartsToString = (parts: TextPart[]) => {
return parts.map(part => {
if(part.type == "text") return part.data;
if(part.type == "timestamp") return secondsToTimestamp(part.time);
if(part.type == "link") return part.href;
if(part.type == "newline") return "\n";
}).join("");
}
Loading

0 comments on commit c1ebaa2

Please sign in to comment.