Qortal/q-tube
3
0
Fork 1
mirror of https://github.com/Qortal/q-tube.git synced 2025-02-11 17:55:51 +00:00
Code Issues Projects Releases Wiki Activity

Fixed bug where channel page only loaded the first 20 videos.

Browse Source
This commit is contained in:
Qortal Dev 2024-11-05 10:37:10 -07:00
parent 54299f4996
commit bd975e841b
2 changed files with 48 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

92
src/components/Publish/PublishVideo/PublishVideo.tsx
View File

@ -1,25 +1,9 @@
import React, { useEffect, useState } from "react";
import Compressor from "compressorjs";
import {
AddCoverImageButton,
AddLogoIcon,
CodecTypography,
CoverImagePreview,
CrowdfundActionButton,
CrowdfundActionButtonRow,
CustomInputField,
CustomSelect,
LogoPreviewRow,
ModalBody,
NewCrowdfundTitle,
StyledButton,
TimesIcon,
} from "./PublishVideo-styles.tsx";
import { CircularProgress } from "@mui/material";
import AddIcon from "@mui/icons-material/Add";
import AddBoxIcon from "@mui/icons-material/AddBox";
import {
Box,
Button,
CircularProgress,
FormControl,
Input,
InputLabel,
@ -31,40 +15,12 @@ import {
Typography,
useTheme,
} from "@mui/material";
import ShortUniqueId from "short-unique-id";
import { useDispatch, useSelector } from "react-redux";
import AddBoxIcon from "@mui/icons-material/AddBox";
import Compressor from "compressorjs";
import React, { useState } from "react";
import { useDropzone } from "react-dropzone";
import AddIcon from "@mui/icons-material/Add";
import { setNotification } from "../../../state/features/notificationsSlice.ts";
import {
objectToBase64,
objectToFile,
uint8ArrayToBase64,
} from "../../../utils/PublishFormatter.ts";
import { RootState } from "../../../state/store.ts";
import {
upsertVideosBeginning,
addToHashMap,
upsertVideos,
} from "../../../state/features/videoSlice.ts";
import ImageUploader from "../../common/ImageUploader.tsx";
import { useDispatch, useSelector } from "react-redux";
import ShortUniqueId from "short-unique-id";
import { categories, subCategories } from "../../../constants/Categories.ts";
import { MultiplePublish } from "../MultiplePublish/MultiplePublishAll.tsx";
import {
CrowdfundSubTitle,
CrowdfundSubTitleRow,
} from "../EditPlaylist/Upload-styles.tsx";
import { CardContentContainerComment } from "../../common/Comments/Comments-styles.tsx";
import { TextEditor } from "../../common/TextEditor/TextEditor.tsx";
import { extractTextFromHTML } from "../../common/TextEditor/utils.ts";
import {
FiltersCheckbox,
FiltersRow,
FiltersSubContainer,
} from "../../../pages/Home/Components/VideoList-styles.tsx";
import { FrameExtractor } from "../../common/FrameExtractor/FrameExtractor.tsx";
import {
QTUBE_PLAYLIST_BASE,
QTUBE_VIDEO_BASE,
@ -74,7 +30,41 @@ import {
titleFormatter,
videoMaxSize,
} from "../../../constants/Misc.ts";
import {
FiltersCheckbox,
FiltersRow,
FiltersSubContainer,
} from "../../../pages/Home/Components/VideoList-styles.tsx";
import { setNotification } from "../../../state/features/notificationsSlice.ts";
import { RootState } from "../../../state/store.ts";
import { objectToBase64 } from "../../../utils/PublishFormatter.ts";
import { getFileName } from "../../../utils/stringFunctions.ts";
import { CardContentContainerComment } from "../../common/Comments/Comments-styles.tsx";
import { FrameExtractor } from "../../common/FrameExtractor/FrameExtractor.tsx";
import ImageUploader from "../../common/ImageUploader.tsx";
import { TextEditor } from "../../common/TextEditor/TextEditor.tsx";
import { extractTextFromHTML } from "../../common/TextEditor/utils.ts";
import {
CrowdfundSubTitle,
CrowdfundSubTitleRow,
} from "../EditPlaylist/Upload-styles.tsx";
import { MultiplePublish } from "../MultiplePublish/MultiplePublishAll.tsx";
import {
AddCoverImageButton,
AddLogoIcon,
CodecTypography,
CoverImagePreview,
CrowdfundActionButton,
CrowdfundActionButtonRow,
CustomInputField,
LogoPreviewRow,
ModalBody,
NewCrowdfundTitle,
StyledButton,
TimesIcon,
} from "./PublishVideo-styles.tsx";
export const toBase64 = (file: File): Promise<string | ArrayBuffer | null> =>
new Promise((resolve, reject) => {

8
src/pages/Home/Components/VideoListComponentLevel.tsx
View File

@ -2,6 +2,7 @@ import { Box, useTheme } from "@mui/material";
import React, { useEffect, useRef, useState } from "react";
import { useSelector } from "react-redux";
import { useParams } from "react-router-dom";
import LazyLoad from "../../../components/common/LazyLoad.tsx";
import { QTUBE_VIDEO_BASE } from "../../../constants/Identifiers.ts";
import { useFetchVideos } from "../../../hooks/useFetchVideos.tsx";
import { Video } from "../../../state/features/videoSlice.ts";
@ -9,6 +10,7 @@ import { RootState } from "../../../state/store.ts";
import { queue } from "../../../wrappers/GlobalWrapper.tsx";
import { VideoManagerRow } from "./VideoList-styles.tsx";
import VideoList from "./VideoList.tsx";
import { useSignal } from "@preact/signals-react";
interface VideoListProps {
mode?: string;
@ -24,10 +26,11 @@ export const VideoListComponentLevel = ({ mode }: VideoListProps) => {
);
const [videos, setVideos] = React.useState<Video[]>([]);
const isLoading = useSignal(true);
const { getVideo, checkAndUpdateVideo } = useFetchVideos();
const getVideos = React.useCallback(async () => {
isLoading.value = true;
try {
const offset = videos.length;
const url = `/arbitrary/resources/search?mode=ALL&service=DOCUMENT&query=${QTUBE_VIDEO_BASE}_&limit=20&includemetadata=false&reverse=true&excludeblocked=true&name=${paramName}&exactmatchnames=true&offset=${offset}`;
@ -73,8 +76,10 @@ export const VideoListComponentLevel = ({ mode }: VideoListProps) => {
}
}
}
isLoading.value = false;
} catch (error) {
console.log(error);
isLoading.value = false;
}
}, [videos, hashMapVideos]);
@ -102,6 +107,7 @@ export const VideoListComponentLevel = ({ mode }: VideoListProps) => {
}}
>
<VideoList videos={videos} />
<LazyLoad onLoadMore={getVideos} isLoading={isLoading.value}></LazyLoad>
</Box>
</VideoManagerRow>
);