updates

TheAlan404 · May 27, 2024 · 7acb4e4 · 7acb4e4
1 parent f5aa5fa
commit 7acb4e4
Show file tree

Hide file tree

Showing 50 changed files with 422 additions and 117 deletions.
diff --git a/src/api/player/VideoPlayerProvider.tsx b/src/api/player/VideoPlayerProvider.tsx
@@ -16,6 +16,7 @@ export const VideoPlayerProvider = ({
     const videoElement = useMemo(() => {
         let el = document.createElement("video");
         el.autoplay = true;
+        el.crossOrigin = "anonymous";
         el.style.width = "100%";
         el.style.height = "100%";
         return el;

diff --git a/src/api/pref/History.tsx b/src/api/pref/History.tsx
@@ -0,0 +1,26 @@
+import { useLocalStorage } from "@mantine/hooks";
+import { usePreference } from "./Preferences";
+
+export type HistoryItem = {
+    t: "v" | "s",
+    d: string,
+};
+
+export const useNekoTubeHistory = () => {
+    const useLocalHistory = usePreference("useLocalHistory");
+    const [value, setValue] = useLocalStorage<HistoryItem[]>({
+        key: "nekotube:history",
+        defaultValue: [],
+    });
+
+    return {
+        history: value,
+        setHistory: setValue,
+        add: (item: HistoryItem) => {
+            if(!useLocalHistory) return;
+
+            setValue(v => [...v, item]);
+        },
+        clear: () => setValue([]),
+    };
+};
diff --git a/src/api/pref/Preferences.tsx b/src/api/pref/Preferences.tsx
@@ -9,6 +9,7 @@ export interface Preferences {
     useSponsorBlock: boolean;
     useDeArrow: boolean;
     useReturnYoutubeDislike: boolean;
+    useLocalHistory: boolean;
     autoplay: boolean;
 };
 
@@ -20,6 +21,7 @@ export const DefaultPreferences: Preferences = {
     useSponsorBlock: true,
     useDeArrow: false,
     useReturnYoutubeDislike: true,
+    useLocalHistory: true,
     autoplay: true,
 };
 

diff --git a/src/components/cards/ChannelCard.tsx b/src/components/cards/ChannelCard.tsx
@@ -15,7 +15,6 @@ export const ChannelCard = ({
                     src={(channel.thumbnails || [])[(channel.thumbnails || []).length]?.url || ``}
                     imageProps={{ loading: "lazy" }}
                     size="sm"
-                    color="violet"
                 >
                     {getInitials(channel.title)}
                 </Avatar>

diff --git a/src/components/cards/CommentCard.tsx b/src/components/cards/CommentCard.tsx
@@ -1,9 +1,9 @@
-import { ActionIcon, Box, CopyButton, Grid, Group, Paper, Stack, Tooltip } from "@mantine/core";
+import { ActionIcon, Box, Button, 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 { IconArrowDown, IconCopy, IconPencil, IconPinned, IconTableImport, IconTableOff } from "@tabler/icons-react";
 import { parseChapters } from "../../utils/parseChapters";
 import { useContext } from "react";
 import { VideoPlayerContext } from "../../api/player/VideoPlayerContext";
@@ -54,10 +54,19 @@ export const CommentCard = ({
                     />
                 </Box>
                 <Group justify="space-between">
-                    <Group>
+                    <Group gap="xs">
                         <VotingCard
                             {...comment}
                         />
+                        {comment.replyKey && (
+                            <Button
+                                variant="subtle"
+                                size="compact-md"
+                                leftSection={<IconArrowDown />}
+                            >
+                                {comment.replyCount} replies
+                            </Button>
+                        )}
                     </Group>
                     <Group>
                         {hasChapters && (

diff --git a/src/components/cards/VotingCard.tsx b/src/components/cards/VotingCard.tsx
@@ -14,7 +14,6 @@ export const VotingCard = ({
                 <Button
                     leftSection={<IconThumbUp />}
                     variant="subtle"
-                    color="violet"
                     size="compact-md"
                 >
                     {likeCount}
@@ -24,7 +23,6 @@ export const VotingCard = ({
                 <Button
                     leftSection={<IconThumbDown />}
                     variant="subtle"
-                    color="violet"
                     size="compact-md"
                 >
                     {dislikeCount}

diff --git a/src/components/extra/Spectrum.tsx b/src/components/extra/Spectrum.tsx
@@ -0,0 +1,88 @@
+// yippieee
+
+import { Box, BoxProps } from "@mantine/core";
+import { useCanvas } from "../../utils/useCanvas";
+import { useContext, useEffect, useMemo, useRef } from "react";
+import { VideoPlayerContext } from "../../api/player/VideoPlayerContext";
+
+const RAINBOW = [ "#ef5350", "#f48fb1", "#7e57c2", "#2196f3", "#26c6da", "#43a047", "#eeff41", "#f9a825", "#ff5722" ];
+
+export const Spectrum = (props: BoxProps) => {
+    const { videoElement } = useContext(VideoPlayerContext);
+
+    const audioContextRef = useRef<AudioContext>();
+    const analyserRef = useRef<AnalyserNode>();
+
+    useEffect(() => {
+        (async () => {
+            if(audioContextRef.current) {
+                await audioContextRef.current.close();
+            }
+
+            audioContextRef.current = new AudioContext();
+            let source = audioContextRef.current.createMediaElementSource(videoElement);
+            let analyser = audioContextRef.current.createAnalyser();
+
+            analyser.fftSize = 2048 * 2;
+
+            source.connect(analyser);
+            source.connect(audioContextRef.current.destination);
+
+            analyserRef.current = analyser;
+        })();
+    }, [videoElement]);
+
+    const bufferLength = analyserRef.current?.frequencyBinCount || 0;
+    const dataArray = new Uint8Array(bufferLength);
+    let gradientOffset = 0;
+
+    const ref = useCanvas((ctx, dt) => {
+        if(!analyserRef.current) return;
+
+        analyserRef.current.getByteFrequencyData(dataArray);
+
+        if(gradientOffset > ctx.canvas.width / 2) gradientOffset = 0;
+
+        const gradient = ctx.createLinearGradient(
+            (ctx.canvas.width * -0.5) + gradientOffset,
+            0,
+            (ctx.canvas.width * 1.5) + gradientOffset,
+            0
+        );
+        RAINBOW.forEach((c, i, a) => gradient.addColorStop((i / (a.length-1)) / 2, c));
+        RAINBOW.forEach((c, i, a) => gradient.addColorStop((i / (a.length-1) / 2 + 0.5), c));
+
+        gradientOffset += 15;
+
+        ctx.fillStyle = "black";
+        ctx.strokeStyle = gradient;
+        ctx.lineWidth = 2;
+
+        ctx.beginPath();
+        ctx.moveTo(0, ctx.canvas.height);
+
+        let scale = (Math.log(bufferLength) / ctx.canvas.width);
+        for (let i = 1; i < bufferLength; i++) {
+            let x = Math.log(i) / scale;
+            const v = dataArray[i] / 256;
+            const y = v * v * v* (ctx.canvas.height);
+
+            ctx.lineTo(x, ctx.canvas.height - y);
+        }
+
+        ctx.lineTo(ctx.canvas.width, ctx.canvas.height);
+        ctx.stroke();
+    }, [analyserRef.current]);
+
+    return (
+        <Box {...props}>
+            <canvas
+                style={{
+                    width: "100%",
+                    height: "100%",
+                }}
+                ref={ref}
+            />
+        </Box>
+    );
+};
diff --git a/src/components/options/OptionsContext.tsx b/src/components/options/OptionsContext.tsx
@@ -87,7 +87,6 @@ export const OptionsProvider = ({ children }: React.PropsWithChildren) => {
                         {view !== "main" && (
                             <Button
                                 variant="light"
-                                color="violet"
                                 leftSection={<IconArrowLeft />}
                                 onClick={() => setView("main")}
                                 fullWidth

diff --git a/src/components/options/comps/DebuggingSection.tsx b/src/components/options/comps/DebuggingSection.tsx
@@ -11,7 +11,7 @@ export const DebuggingSection = () => {
                 {({ copied, copy }) => (
                     <Button
                         variant="light"
-                        color={copied ? "green" : "violet"}
+                        color={copied ? "green" : undefined}
                         onClick={() => copy()}
                         fullWidth
                     >
@@ -21,7 +21,6 @@ export const DebuggingSection = () => {
             </CopyButton>
             <Button
                 variant="light"
-                color="violet"
                 onClick={() => fetchVideoInfo()}
                 fullWidth
             >

diff --git a/src/components/options/comps/FormatSelect.tsx b/src/components/options/comps/FormatSelect.tsx
@@ -17,7 +17,6 @@ export const FormatSelect = () => {
             <UnstyledButton
                 className="hoverable"
                 variant="subtle"
-                color="violet"
                 onClick={() => setView("formatSelect")}
             >
                 {activeFormat ? (

diff --git a/src/components/options/comps/InstanceSelect.tsx b/src/components/options/comps/InstanceSelect.tsx
@@ -18,7 +18,6 @@ export const InstanceSelect = () => {
             <UnstyledButton
                 className="hoverable"
                 variant="subtle"
-                color="violet"
                 onClick={() => setView("instanceSelect")}
             >
                 <Grid align="center" m="sm">

diff --git a/src/components/options/comps/ThemeSection.tsx b/src/components/options/comps/ThemeSection.tsx
@@ -0,0 +1,35 @@
+import { ColorPicker, ColorSwatch, LoadingOverlay, SimpleGrid, Stack, Tooltip, useMantineTheme } from "@mantine/core";
+import { useColorScheme } from "@mantine/hooks";
+import { IconCheck } from "@tabler/icons-react";
+import { useContext, useEffect, useState } from "react";
+import { ThemeContext } from "../../../theme";
+
+export const ThemeSection = () => {
+    const { primaryColor, setPrimaryColor } = useContext(ThemeContext);
+    const theme = useMantineTheme();
+    const shade = 8;
+
+    return (
+        <Stack w="100%">
+            <SimpleGrid cols={7}>
+                {Object.keys(theme.colors).map((color) => (
+                    <Tooltip 
+                        key={color}
+                        withArrow
+                        label={(
+                            color[0].toUpperCase() + color.slice(1) + (primaryColor == color ? " (Active)" : "")
+                        )}>
+                        <ColorSwatch
+                            color={theme.colors[color][shade]}
+                            onClick={() => {
+                                setPrimaryColor(color);
+                            }}
+                        >
+                            {primaryColor == color && <IconCheck />}
+                        </ColorSwatch>
+                    </Tooltip>
+                ))}
+            </SimpleGrid>
+        </Stack>
+    );
+};
diff --git a/src/components/options/links/ChangeInstanceButton.tsx b/src/components/options/links/ChangeInstanceButton.tsx
@@ -8,7 +8,6 @@ export const ChangeInstanceButton = () => {
 
     return (
         <Button
-            color="violet"
             variant="light"
             leftSection={<IconSettings />}
             onClick={() => {

diff --git a/src/components/options/links/FormatsButton.tsx b/src/components/options/links/FormatsButton.tsx
@@ -10,7 +10,6 @@ export const FormatsButton = () => {
         <Tooltip label="Select Format">
             <ActionIcon
                 variant="light"
-                color="violet"
                 onClick={() => {
                     open();
                     setView("formatSelect");

diff --git a/src/components/options/links/OpenWithButton.tsx b/src/components/options/links/OpenWithButton.tsx
@@ -8,7 +8,6 @@ export const OpenWithButton = (props: ButtonProps) => {
 
     return (
         <Button
-            color="violet"
             variant="light"
             rightSection={<IconExternalLink />}
             onClick={() => {

diff --git a/src/components/options/links/OptionsButton.tsx b/src/components/options/links/OptionsButton.tsx
@@ -10,7 +10,6 @@ export const OptionsButton = () => {
         <Tooltip label="Options (o)">
             <ActionIcon
                 variant="light"
-                color="violet"
                 onClick={() => open()}
             >
                 <IconSettings />

diff --git a/src/components/options/views/InstanceView.tsx b/src/components/options/views/InstanceView.tsx
@@ -171,7 +171,6 @@ const InstanceSearch = ({
                 <Tooltip label="Refresh public instances">
                     <ActionIcon
                         variant="light"
-                        color="violet"
                         onClick={() => refreshAvailableInstances()}
                     >
                         <IconReload />

diff --git a/src/components/options/views/MainView.tsx b/src/components/options/views/MainView.tsx
@@ -8,6 +8,7 @@ import { PreferencesList } from "../comps/PreferencesList";
 import { DebuggingSection } from "../comps/DebuggingSection";
 import { OpenWithButton } from "../links/OpenWithButton";
 import { LoopVideo } from "../comps/LoopVideo";
+import { ThemeSection } from "../comps/ThemeSection";
 
 export const OptionsMainView = () => {
     const { videoInfo } = useContext(VideoPlayerContext);
@@ -30,6 +31,8 @@ export const OptionsMainView = () => {
                     {loaded && <LoopVideo />}
                     <Divider w="100%" label="Preferences" labelPosition="left" />
                     <PreferencesList />
+                    <Divider w="100%" label="Theme" labelPosition="left" />
+                    <ThemeSection />
                     <Divider w="100%" label="Debugging" labelPosition="left" />
                     <DebuggingSection />
                     <Space h="20vh" />

diff --git a/src/components/player/VideoPlayer.tsx b/src/components/player/VideoPlayer.tsx
@@ -3,9 +3,9 @@ import { VideoPlayerContext } from "../../api/player/VideoPlayerContext"
 import { Box, Stack, Transition } from "@mantine/core";
 import { useDebouncedCallback, useHotkeys, useHover, useMergedRef } from "@mantine/hooks";
 import { usePreference } from "../../api/pref/Preferences";
-import { LayoutTop } from "./layout/LayoutTop";
-import { LayoutMiddle } from "./layout/LayoutMiddle";
-import { LayoutBottom } from "./layout/LayoutBottom";
+import { PlayerLayoutTop } from "./layout/LayoutTop";
+import { PlayerLayoutMiddle } from "./layout/LayoutMiddle";
+import { PlayerLayoutBottom } from "./layout/LayoutBottom";
 import { useIsMobile } from "../../hooks/useIsMobile";
 
 export const VideoPlayer = () => {
@@ -117,10 +117,10 @@ export const VideoPlayer = () => {
                         }}
                         className="clickListener"
                     >
-                        <LayoutTop />
-                        <LayoutMiddle />
+                        <PlayerLayoutTop />
+                        <PlayerLayoutMiddle />
                         <div ref={ref}>
-                            <LayoutBottom />
+                            <PlayerLayoutBottom />
                         </div>
                     </Stack>
                 )}

diff --git a/src/components/player/controls/FullscreenButton.tsx b/src/components/player/controls/FullscreenButton.tsx
@@ -10,7 +10,6 @@ export const FullscreenButton = () => {
             <ActionIcon
                 onClick={() => toggle()}
                 variant="light"
-                color="violet"
             >
                 {fullscreen ? (
                     <IconMinimize />

diff --git a/src/components/player/controls/PlayPauseButton.tsx b/src/components/player/controls/PlayPauseButton.tsx
@@ -23,7 +23,6 @@ export const PlayPauseButton = () => {
             <ActionIcon
                 onClick={() => togglePlay()}
                 variant="light"
-                color="violet"
             >
                 {playing ? (
                     <IconPlayerPause />