iplement drarrow

TheAlan404 · May 5, 2024 · 96693b5 · 96693b5
1 parent 0ed86f5
commit 96693b5
Show file tree

Hide file tree

Showing 10 changed files with 173 additions and 83 deletions.
diff --git a/src/components/cards/ThumbnailRender.tsx b/src/components/cards/ThumbnailRender.tsx
@@ -1,15 +1,17 @@
-import { AspectRatio, Box, Flex, Image, Text } from "@mantine/core";
+import { AspectRatio, Box, Flex, Image, Loader, Text } from "@mantine/core";
 import { Thumbnail } from "../../api/types/video";
 import { secondsToTimestamp } from "../../utils/timestamp";
 
 export const ThumbnailRender = ({
     thumbnails,
     fallback,
     length,
+    loading,
 }: {
     thumbnails: Thumbnail[],
     fallback?: string,
     length?: number,
+    loading?: boolean,
 }) => {
     const scale = 0.5;
     return (
@@ -31,6 +33,9 @@ export const ThumbnailRender = ({
                         {secondsToTimestamp(length)}
                     </Text>
                 )}
+                {loading && (
+                    <Loader size="xs" />
+                )}
             </Flex>
         </AspectRatio>
     );

diff --git a/src/components/cards/VideoCard.tsx b/src/components/cards/VideoCard.tsx
@@ -6,12 +6,47 @@ import { ChannelCard } from "./ChannelCard";
 import { TextWithTooltip } from "../ui/TextWithTooltip";
 import { DateCard } from "./DateCard";
 import { ViewCountCard } from "./ViewCountCard";
+import { useContext, useEffect, useState } from "react";
+import { usePreference } from "../../api/pref/Preferences";
+import { APIContext } from "../../api/context/APIController";
 
 export const HorizontalVideoCard = ({
-    video,
+    video: originalVideo,
 }: {
     video: VideoInfo,
 }) => {
+    const { sponsorBlockApi } = useContext(APIContext);
+    const useDeArrow = usePreference("useDeArrow");
+    const [dearrowed, setDearrowed] = useState<VideoInfo | null>(null);
+    const [isLoading, setLoading] = useState(false);
+
+    useEffect(() => {
+        if(!useDeArrow) {
+            setLoading(false);
+            setDearrowed(null);
+            return;
+        }
+
+        (async () => {
+            setLoading(true);
+            let res = await sponsorBlockApi.deArrow(originalVideo.id);
+            setDearrowed({
+                ...originalVideo,
+                title: res.titles[0]?.title || originalVideo.title,
+                thumbnails: [
+                    {
+                        width: 0,
+                        height: 0,
+                        url: `https://dearrow-thumb.ajay.app/api/v1/getThumbnail?videoID=${originalVideo.id}`,
+                    }
+                ],
+            });
+            setLoading(false);
+        })();
+    }, [useDeArrow, originalVideo.id]);
+
+    let video = dearrowed || originalVideo;
+
     return (
         <Paper
             withBorder
@@ -28,11 +63,17 @@ export const HorizontalVideoCard = ({
                         thumbnails={video.thumbnails}
                         fallback={`https://img.youtube.com/vi/${video.id}/hqdefault.jpg`}
                         length={video.length}
+                        loading={isLoading}
                     />
                 </Grid.Col>
                 <Grid.Col span="auto">
                     <Stack gap={0} justify="center">
-                        <TextWithTooltip lineClamp={2} fw="bold" fz="sm">
+                        <TextWithTooltip
+                            lineClamp={2}
+                            fw="bold"
+                            fz="sm"
+                            extra={video.title !== originalVideo.title && ("Original Title: " + originalVideo.title)}
+                        >
                             {video.title}
                         </TextWithTooltip>
                         <Group>

diff --git a/src/components/options/comps/PreferencesList.tsx b/src/components/options/comps/PreferencesList.tsx
@@ -41,7 +41,7 @@ export const PreferencesList = () => {
             />
             <Checkbox
                 label="Enable DeArrow"
-                description={"TODO"}
+                description={"Reduce clickbait by using crowdsourced titles and thumbnails"}
                 checked={pref.useDeArrow}
                 onChange={(e) => set({ useDeArrow: e.currentTarget.checked })}
             />

diff --git a/src/components/player/VideoPlayer.tsx b/src/components/player/VideoPlayer.tsx
@@ -37,7 +37,7 @@ export const VideoPlayer = () => {
 
     const hideCallback = useDebouncedCallback(() => {
         setShowControls(false);
-    }, 1000);
+    }, 2000);
 
     const shouldShowControls = (
         keepControlsShown

diff --git a/src/components/tabs/comps/ChaptersTab.tsx b/src/components/tabs/comps/ChaptersTab.tsx
@@ -1,5 +1,5 @@
-import { Accordion, ActionIcon, Button, Grid, Group, Loader, Paper, ScrollArea, Slider, Space, Stack, Text, TextInput, Transition } from "@mantine/core";
-import { useContext, useEffect, useMemo, useState } from "react";
+import { Accordion, ActionIcon, Button, Grid, Group, Loader, Paper, ScrollArea, Slider, Space, Stack, Text, TextInput, Tooltip, Transition } from "@mantine/core";
+import { ForwardedRef, forwardRef, useContext, useEffect, useMemo, useState } from "react";
 import { VideoPlayerContext } from "../../../api/context/VideoPlayerContext";
 import { TimestampButton } from "../../ui/TimestampButton";
 import { useVideoEventListener } from "../../../hooks/useVideoEventListener";
@@ -37,22 +37,22 @@ export const ChaptersTab = () => {
 
     const allGroups = [...new Set(filteredChapters.map(c => c.group)).values()];
 
-    const isCurrentShown = group !== currentChapter?.group && filteredChapters.includes(currentChapter);
+    const isCurrentShown = (allGroups.length == 1 ? true : (group == currentChapter?.group)) && filteredChapters.includes(currentChapter);
 
     const createList = (chapters: Chapter[]) => {
         return chapters.map((chapter, i) => (
             <ChapterButton
                 key={i}
-                chapter={chapter}
+                ref={currentChapter == chapter ? targetRef : undefined}
                 isCurrent={currentChapter == chapter}
-                xref={currentChapter == chapter ? targetRef : undefined}
+                chapter={chapter}
             />
         ));
     };
 
     return (
         <ScrollArea w="100%" maw="100%" h="100%" offsetScrollbars viewportRef={containerRef}>
-            <Stack w="100%" p="xs">
+            <Stack w="100%">
                 {videoInfo ? (
                     <Stack w="100%">
                         <ShowCurrentChapterButton
@@ -62,50 +62,63 @@ export const ChaptersTab = () => {
                                 scrollIntoView({ alignment: "center" })
                             }}
                         />
+
                         {activeChapters.type == "video" && (
-                            <Group justify="center">
+                            <Group justify="center" p="xs">
                                 <Text>
                                     Showing chapters from video description
                                 </Text>
                             </Group>
                         )}
                         {activeChapters.type == "comment" && (
-                            <Group justify="space-between">
+                            <Group justify="space-between" p="xs">
                                 <Text>
                                     Showing chapters from a comment
                                 </Text>
-                                <Button
-                                    variant="light"
-                                    color="violet"
-                                    onClick={() => setActiveChapters("video")}
-                                    leftSection={<IconX />}
-                                >
-                                    Clear
-                                </Button>
-                            </Group>
-                        )}
-
-                        {false && activeChapters.chapters.length > 5 && (
-                            <TextInput
-                                label="Search chapters"
-                                placeholder={randArr(activeChapters.chapters).label + "..."}
-                                value={search}
-                                onChange={(e) => setSearch(e.currentTarget.value)}
-                                onKeyDown={keyboardSfx}
-                                rightSection={(search && (
+                                <Tooltip label="Clear">
                                     <ActionIcon
                                         variant="light"
-                                        color="gray"
-                                        onClick={() => setSearch("")}
+                                        color="violet"
+                                        onClick={() => setActiveChapters("video")}
                                     >
                                         <IconX />
                                     </ActionIcon>
-                                ))}
-                            />
+                                </Tooltip>
+                            </Group>
+                        )}
+
+                        {activeChapters.chapters.length > 5 && (
+                            <Paper
+                                bg="dark.7"
+                                shadow="md"
+                                withBorder
+                                p="xs"
+                                pos="sticky"
+                                style={{ top: "0px", zIndex: 30 }}
+                            >
+                                <Stack>
+                                    <TextInput
+                                        label="Search chapters"
+                                        placeholder={"meow..."}
+                                        value={search}
+                                        onChange={(e) => setSearch(e.currentTarget.value)}
+                                        onKeyDown={keyboardSfx}
+                                        rightSection={(search && (
+                                            <ActionIcon
+                                                variant="light"
+                                                color="gray"
+                                                onClick={() => setSearch("")}
+                                            >
+                                                <IconX />
+                                            </ActionIcon>
+                                        ))}
+                                    />
+                                </Stack>
+                            </Paper>
                         )}
 
                         {allGroups.length == 1 ? (
-                            <Stack>
+                            <Stack p="xs">
                                 {createList(filteredChapters)}
                             </Stack>
                         ) : (
@@ -119,7 +132,7 @@ export const ChaptersTab = () => {
                                             {group}
                                         </Accordion.Control>
                                         <Accordion.Panel>
-                                            <Stack>
+                                            <Stack p="xs">
                                                 {createList(filteredChapters.filter(c => c.group == group))}
                                             </Stack>
                                         </Accordion.Panel>
@@ -181,15 +194,15 @@ const ShowCurrentChapterButton = ({
     )
 }
 
-const ChapterButton = ({
+interface ChapterButtonProps {
+    chapter: Chapter;
+    isCurrent?: boolean;
+};
+
+const ChapterButton = forwardRef<HTMLDivElement, ChapterButtonProps>(({
     chapter,
     isCurrent,
-    xref,
-}: {
-    chapter: Chapter,
-    isCurrent?: boolean,
-    xref?: React.Ref<HTMLDivElement>,
-}) => {
+}, ref) => {
     const { seekTo, videoElement, activeChapters } = useContext(VideoPlayerContext);
     const [progress, setProgress] = useState(0);
 
@@ -206,7 +219,7 @@ const ChapterButton = ({
     };
 
     useEffect(() => {
-        if(!isCurrent) return;
+        if (!isCurrent) return;
 
         videoElement.addEventListener("timeupdate", update);
         return () => videoElement.removeEventListener("timeupdate", update);
@@ -220,7 +233,7 @@ const ChapterButton = ({
             style={{ cursor: "pointer" }}
             className="hoverable"
             bg={isCurrent ? "dark.5" : undefined}
-            ref={xref}
+            ref={ref}
             onClick={() => seekTo(chapter.time)}
         >
             <Stack>
@@ -259,4 +272,4 @@ const ChapterButton = ({
             </Stack>
         </Paper>
     )
-};
+});
diff --git a/src/components/tabs/comps/CommentsTab.tsx b/src/components/tabs/comps/CommentsTab.tsx
@@ -1,4 +1,4 @@
-import { Button, Checkbox, Group, Loader, ScrollArea, Space, Stack, Text } from "@mantine/core";
+import { Button, Checkbox, Group, Loader, Paper, ScrollArea, Space, Stack, Text } from "@mantine/core";
 import { useContext, useEffect, useMemo, useState } from "react";
 import { VideoPlayerContext } from "../../../api/context/VideoPlayerContext";
 import { HorizontalVideoCard } from "../../cards/VideoCard";
@@ -50,13 +50,15 @@ export const CommentsTab = () => {
     return (
         <ScrollArea w="100%" maw="100%" h="100%" type="scroll" scrollbars="y" offsetScrollbars>
             <Stack w="100%" p="xs">
-                <Group justify="space-between">
-                    <Text>
-                    </Text>
-                    <Text>
-                        Showing {comments.length} comments
-                    </Text>
-                </Group>
+                <Paper p="xs" withBorder w="100%" bg="dark.7" style={{ position: "sticky", top: "var(--mantine-spacing-sm)", zIndex: 30 }}>
+                    <Group justify="space-between">
+                        <Text>
+                        </Text>
+                        <Text>
+                            Showing {comments.length} comments
+                        </Text>
+                    </Group>
+                </Paper>
                 {list}
                 <ErrorMessage
                     error={error}

diff --git a/src/components/tabs/comps/RecommendedTab.tsx b/src/components/tabs/comps/RecommendedTab.tsx
@@ -1,4 +1,4 @@
-import { Loader, ScrollArea, Space, Stack, Text } from "@mantine/core";
+import { Checkbox, Group, Loader, Paper, ScrollArea, Space, Stack, Text } from "@mantine/core";
 import React, { useContext, useMemo } from "react";
 import { VideoPlayerContext } from "../../../api/context/VideoPlayerContext";
 import { HorizontalVideoCard } from "../../cards/VideoCard";
@@ -20,10 +20,19 @@ export const RecommendedTab = () => {
             <Stack w="100%" p="xs">
                 {videoInfo ? (
                     <Stack w="100%">
-                        <Text ta="end">
-                            {videoInfo.recommended.length} recommended videos
-                        </Text>
-                        {list}
+                        <Paper p="sm" withBorder w="100%" bg="dark.7" style={{ position: "sticky", top: "var(--mantine-spacing-sm)", zIndex: 30 }}>
+                            <Group w="100%" justify="space-between">
+                                <Checkbox
+                                    label="Autoplay"
+                                />
+                                <Text ta="end">
+                                    {videoInfo.recommended.length} recommended videos
+                                </Text>
+                            </Group>
+                        </Paper>
+                        <Stack>
+                            {list}
+                        </Stack>
                     </Stack>
                 ) : (
                     <Stack w="100%" align="center">

diff --git a/src/components/ui/TextWithTooltip.tsx b/src/components/ui/TextWithTooltip.tsx
@@ -1,20 +1,27 @@
-import { Text, TextProps, Tooltip } from "@mantine/core";
+import { Stack, Text, TextProps, Tooltip } from "@mantine/core";
 import React from "react";
 import { useIsShortened } from "../../hooks/useIsShortened";
 
-export const TextWithTooltip = (props: TextProps & React.PropsWithChildren) => {
-    const { ref, isShortened } = useIsShortened();
+export const TextWithTooltip = (
+    props: TextProps & React.PropsWithChildren & { extra?: string }
+) => {
+    const { ref, isShortened } = useIsShortened<HTMLParagraphElement>();
 
     return (
         <Tooltip
-            label={props.children}
+            label={(
+                <Stack>
+                    {props.children}
+                    <br />
+                    {props.extra}
+                </Stack>
+            )}
             withArrow
-            disabled={!isShortened}
+            disabled={!props.extra && !isShortened}
             multiline
         >
             <Text
                 {...props}
-                // @ts-ignore
                 ref={ref}
             />
         </Tooltip>