more stuff

TheAlan404 · May 19, 2024 · f5aa5fa · f5aa5fa
1 parent 915fb75
commit f5aa5fa
Show file tree

Hide file tree

Showing 11 changed files with 88 additions and 34 deletions.
diff --git a/src/api/platforms/invid/invidious.ts b/src/api/platforms/invid/invidious.ts
@@ -59,8 +59,6 @@ export class InvidiousAPIProvider implements APIProvider {
     async search(q: string) {
         let data: InvidiousRenderer[] = await this.request("search", { query: { q } });
 
-        console.log(data);
-
         return {
             key: null,
             results: data.filter(x => x.type == "video")
@@ -77,8 +75,6 @@ export class InvidiousAPIProvider implements APIProvider {
     getVideoInfo = async (id: string) => {
         let v: InvidiousVideoData = await this.request(`videos/${id}`);
 
-        console.log({ invidiousVideoData: v });
-
         return {
             id,
             title: v.title,

diff --git a/src/api/player/VideoPlayerProvider.tsx b/src/api/player/VideoPlayerProvider.tsx
@@ -8,6 +8,7 @@ import { parseChapters } from "../../utils/parseChapters";
 import { clamp } from "@mantine/hooks";
 import { PreferencesContext } from "../pref/Preferences";
 import { ActiveChapterList } from "../types/chapter";
+import { useNavigate } from "react-router-dom";
 
 export const VideoPlayerProvider = ({
     children
@@ -27,6 +28,8 @@ export const VideoPlayerProvider = ({
     } = useContext(APIContext);
     const { pref } = useContext(PreferencesContext);
 
+    const navigate = useNavigate();
+
     const [videoID, setVideoID] = useState<string | null>(null);
     const [videoInfo, setVideoInfo] = useState<VideoData | null>(null);
     const [activeChapters, setActiveChapters] = useState<ActiveChapterList>({
@@ -175,7 +178,7 @@ export const VideoPlayerProvider = ({
             let id = videoInfo.recommended[0]?.id;
             if(!id) return;
 
-            setVideoID(id);
+            navigate({ pathname: "/watch", search: "?"+new URLSearchParams({ v: id }).toString() });
         }, waitDuration);
     });
 

diff --git a/src/components/cards/CommentCard.tsx b/src/components/cards/CommentCard.tsx
@@ -7,7 +7,7 @@ import { IconCopy, IconPencil, IconPinned, IconTableImport, IconTableOff } from
 import { parseChapters } from "../../utils/parseChapters";
 import { useContext } from "react";
 import { VideoPlayerContext } from "../../api/player/VideoPlayerContext";
-import { cleanDescription, textPartsToString } from "../../utils/cleanDescription";
+import { parseFormattedText, textPartsToString } from "../../utils/parseFormattedText";
 import { DateCard } from "./DateCard";
 import { TimestampRegex } from "../../utils/timestamp";
 
@@ -79,7 +79,7 @@ export const CommentCard = ({
                                 </ActionIcon>
                             </Tooltip>
                         )}
-                        <CopyButton value={textPartsToString(cleanDescription(comment.content))}>
+                        <CopyButton value={textPartsToString(parseFormattedText(comment.content))}>
                             {({ copied, copy }) => (
                                 <Tooltip label={copied ? "Copied!" : "Copy contents"}>
                                     <ActionIcon

diff --git a/src/components/player/VideoPlayer.tsx b/src/components/player/VideoPlayer.tsx
@@ -6,8 +6,10 @@ import { usePreference } from "../../api/pref/Preferences";
 import { LayoutTop } from "./layout/LayoutTop";
 import { LayoutMiddle } from "./layout/LayoutMiddle";
 import { LayoutBottom } from "./layout/LayoutBottom";
+import { useIsMobile } from "../../hooks/useIsMobile";
 
 export const VideoPlayer = () => {
+    const isMobile = useIsMobile();
     const {
         videoElement,
         seekToChapterOffset,
@@ -80,6 +82,11 @@ export const VideoPlayer = () => {
             }}
             onClick={(e) => {
                 if(!e.currentTarget.classList.contains("clickListener")) return;
+                if(isMobile && !shouldShowControls) {
+                    setShowControls(true);
+                    hideCallback();
+                    return;
+                }
                 let xPer = e.clientX / containerRef.current.getBoundingClientRect().width;
                 if(xPer == 0 || xPer == 1) return;
                 togglePlay();

diff --git a/src/components/player/controls/PlayPauseButton.tsx b/src/components/player/controls/PlayPauseButton.tsx
@@ -1,22 +1,31 @@
-import { useContext } from "react";
+import { useContext, useState } from "react";
 import { VideoPlayerContext } from "../../../api/player/VideoPlayerContext";
 import { ActionIcon, Tooltip } from "@mantine/core";
 import { IconPlayerPlay, IconPlayerPause } from "@tabler/icons-react";
+import { useVideoEventListener } from "../../../hooks/useVideoEventListener";
+import { useIsMobile } from "../../../hooks/useIsMobile";
 
 export const PlayPauseButton = () => {
-    const { playState, togglePlay } = useContext(VideoPlayerContext);
+    const isMobile = useIsMobile();
+    const { videoElement, playState, togglePlay } = useContext(VideoPlayerContext);
+    let playing = playState == "playing";
+    //let [playing, setPlaying] = useState(!videoElement.paused);
+    let disabled = playState == "loading" || playState == "error";
+
+    //useVideoEventListener(videoElement, "play", () => setPlaying(true));
+    //useVideoEventListener(videoElement, "pause", () => setPlaying(false));
 
     return (
         <Tooltip
-            disabled={playState == "loading" || playState == "error"}
-            label={playState == "playing" ? "Pause (k)" : "Play (k)"}
+            disabled={disabled}
+            label={playing ? "Pause (k)" : "Play (k)"}
         >
             <ActionIcon
                 onClick={() => togglePlay()}
                 variant="light"
                 color="violet"
             >
-                {playState == "playing" ? (
+                {playing ? (
                     <IconPlayerPause />
                 ) : (
                     <IconPlayerPlay />

diff --git a/src/components/player/controls/PlayerTimestamp.tsx b/src/components/player/controls/PlayerTimestamp.tsx
@@ -3,39 +3,64 @@ import { VideoPlayerContext } from "../../../api/player/VideoPlayerContext";
 import { useVideoEventListener } from "../../../hooks/useVideoEventListener";
 import { CopyButton, Group, Text, Tooltip } from "@mantine/core";
 import { secondsToTimestamp } from "../../../utils/timestamp";
+import { useIsMobile } from "../../../hooks/useIsMobile";
+import { useDisclosure } from "@mantine/hooks";
 
 export const PlayerTimestamp = () => {
     const { videoElement, activeChapters } = useContext(VideoPlayerContext);
+    const [showRemaining, { toggle: toggleRemaining }] = useDisclosure(false);
     const [progress, setProgress] = useState(0);
-
+    
     useVideoEventListener(videoElement, "timeupdate", () => {
         setProgress(videoElement.currentTime);
     });
-
+    
     const progressText = secondsToTimestamp(progress);
     const currentChapter = activeChapters.chapters[activeChapters.chapters.findIndex((x) => x.time > progress) - 1];
+
+    const isMobile = useIsMobile();
+    const fz = isMobile ? "xs" : "md";
 
     return (
-        <Group>
+        <Group
+            gap={isMobile ? "5px" : "xs"}
+            style={{ userSelect: "none" }}
+            wrap="nowrap"
+        >
             <CopyButton value={progressText}>
                 {({ copied, copy }) => (
                     <Tooltip
                         label={copied ? "Copied!" : "Click to copy"}
                     >
-                        <Text onClick={() => copy()} span>
+                        <Text
+                            fz={fz}
+                            onClick={() => copy()} 
+                            style={{ cursor: "pointer" }}
+                            span
+                        >
                             {progressText}
                         </Text>
                     </Tooltip>
                 )}
             </CopyButton>
-            <Text span>
+            <Text span fz={fz} c="dimmed">
                 /
             </Text>
-            <Text span>
-                {secondsToTimestamp(videoElement.duration || 0)}
+            <Text
+                span
+                fz={fz}
+                c="dimmed"
+                onClick={() => toggleRemaining()}
+                style={{ cursor: "pointer" }}
+            >
+                {secondsToTimestamp(showRemaining ? (
+                    Math.ceil(videoElement.duration || 0) - progress
+                ) : (
+                    videoElement.duration || 0
+                ))} {showRemaining && "rem."}
             </Text>
             {currentChapter && (
-                <Text>
+                <Text fz={fz}>
                     {currentChapter.label}
                 </Text>
             )}

diff --git a/src/components/player/layout/LayoutBottom.tsx b/src/components/player/layout/LayoutBottom.tsx
@@ -7,28 +7,33 @@ import { FormatsButton } from "../../options/links/FormatsButton";
 import { OptionsButton } from "../../options/links/OptionsButton";
 import { ToggleSidebarButton } from "../../tabs/links/ToggleSidebarButton";
 import { FullscreenButton } from "../controls/FullscreenButton";
+import { useIsMobile } from "../../../hooks/useIsMobile";
 
 export const LayoutBottom = (props: StackProps) => {
+    const isMobile = useIsMobile();
+
+    let gap = isMobile ? "5px" : "xs";
+
     return (
         <Stack
-            gap="xs"
-            p="xs"
+            gap={gap}
+            p={gap}
             w="100%"
             onClick={(e) => e.stopPropagation()}
             {...props}
         >
             <ProgressBar />
 
-            <Group justify="space-between">
-                <Group>
+            <Group justify="space-between" wrap="nowrap">
+                <Group gap={gap} wrap="nowrap">
                     <PlayPauseButton />
                     <VolumeControls />
                     <PlayerTimestamp />
                 </Group>
-                <Group>
-                    <FormatsButton />
+                <Group gap={gap} wrap="nowrap">
+                    {!isMobile && <FormatsButton />}
                     <OptionsButton />
-                    <ToggleSidebarButton />
+                    {!isMobile && <ToggleSidebarButton />}
                     <FullscreenButton />
                 </Group>
             </Group>

diff --git a/src/components/player/layout/LayoutTop.tsx b/src/components/player/layout/LayoutTop.tsx
@@ -2,9 +2,11 @@ import { Grid, Group, Loader, Stack, Text, Title } from "@mantine/core";
 import { IconAlertTriangle } from "@tabler/icons-react";
 import { useContext } from "react";
 import { VideoPlayerContext } from "../../../api/player/VideoPlayerContext";
+import { useIsMobile } from "../../../hooks/useIsMobile";
 
 export const LayoutTop = () => {
     const { playState, videoInfo } = useContext(VideoPlayerContext);
+    const isMobile = useIsMobile();
 
     return (
         <Stack
@@ -22,14 +24,14 @@ export const LayoutTop = () => {
                 </Grid.Col>
                 <Grid.Col span="auto">
                     <Stack gap={0}>
-                        <Title order={4}>
+                        <Title order={isMobile ? 6 : 4}>
                             {!videoInfo ? (
                                 playState == "error" ? "Error" : "Loading..."
                             ) : (
                                 videoInfo?.title || "Loading..."
                             )}
                         </Title>
-                        <Text c="dimmed">
+                        <Text c="dimmed" fz={isMobile ? "xs" : undefined}>
                             {playState == "error" && (
                                 videoInfo ? "playback error" : "error while fetching details"
                             )}

diff --git a/src/components/ui/MarkdownText.tsx b/src/components/ui/MarkdownText.tsx
@@ -1,7 +1,7 @@
 import { Box, Button, Text } from "@mantine/core";
 import { useMemo } from "react";
 import { TimestampButton } from "./TimestampButton";
-import { cleanDescription } from "../../utils/cleanDescription";
+import { parseFormattedText } from "../../utils/parseFormattedText";
 import { ExternalLink } from "./ExternalLink";
 
 export const MarkdownText = ({
@@ -10,7 +10,7 @@ export const MarkdownText = ({
     text: string;
 }) => {
     let elements = useMemo(() => {
-        let parts = cleanDescription(text);
+        let parts = parseFormattedText(text);
 
         return parts
             .map(part => {

diff --git a/src/utils/parseChapters.ts b/src/utils/parseChapters.ts
@@ -1,10 +1,10 @@
 import { Chapter } from "../api/types/chapter";
-import { cleanDescription } from "./cleanDescription";
+import { parseFormattedText } from "./parseFormattedText";
 
 const trimChapterName = (s: string) => s.trim().startsWith("-") ? s.trim().replace("-", "").trim() : s.trim();
 
 export const parseChapters = (description: string): Chapter[] => {
-    let parts = cleanDescription(description);
+    let parts = parseFormattedText(description);
     let chapters: Chapter[] = [];
 
     let group = "";

diff --git a/src/utils/cleanDescription.ts → src/utils/parseFormattedText.ts b/src/utils/cleanDescription.ts → src/utils/parseFormattedText.ts
@@ -25,7 +25,7 @@ export type TextPart = {
     time?: number;
 };
 
-export const cleanDescription = (text = "") => {
+export const parseFormattedText = (text = "") => {
     let parser = new DOMParser();
     let doc = parser.parseFromString(text.replaceAll("<br>", "\n"), "text/html");
 
@@ -100,6 +100,13 @@ export const cleanDescription = (text = "") => {
                         href: href,
                     })
                 }
+            } else if(node.nodeName == "I") {
+                parts.push({
+                    type: "text",
+                    data: node.nodeValue,
+                    bold: false,
+                    italic: true,
+                });
             } else if(node.nodeName == "B") {
                 parts.push({
                     type: "text",