This commit is contained in:
Jin Yucong 2024-07-05 14:36:50 +08:00
parent 5b1aaee605
commit 3b737a078a
63 changed files with 1132 additions and 1853 deletions

View file

@ -1,9 +1,9 @@
/* eslint-disable @next/next/no-img-element */
import { PlayCircle, PlayIcon, PlusIcon, VideoIcon } from 'lucide-react';
import { useState } from 'react';
import Lightbox, { GenericSlide, VideoSlide } from 'yet-another-react-lightbox';
import 'yet-another-react-lightbox/styles.css';
import { Message } from './ChatWindow';
import { PlayCircle, PlayIcon, PlusIcon, VideoIcon } from "lucide-react";
import { useState } from "react";
import Lightbox, { GenericSlide, VideoSlide } from "yet-another-react-lightbox";
import "yet-another-react-lightbox/styles.css";
import { Message } from "./ChatWindow";
type Video = {
url: string;
@ -12,25 +12,19 @@ type Video = {
iframe_src: string;
};
declare module 'yet-another-react-lightbox' {
declare module "yet-another-react-lightbox" {
export interface VideoSlide extends GenericSlide {
type: 'video-slide';
type: "video-slide";
src: string;
iframe_src: string;
}
interface SlideTypes {
'video-slide': VideoSlide;
"video-slide": VideoSlide;
}
}
const Searchvideos = ({
query,
chat_history,
}: {
query: string;
chat_history: Message[];
}) => {
const Searchvideos = ({ query, chat_history }: { query: string; chat_history: Message[] }) => {
const [videos, setVideos] = useState<Video[] | null>(null);
const [loading, setLoading] = useState(false);
const [open, setOpen] = useState(false);
@ -43,24 +37,21 @@ const Searchvideos = ({
onClick={async () => {
setLoading(true);
const chatModelProvider = localStorage.getItem('chatModelProvider');
const chatModel = localStorage.getItem('chatModel');
const chatModelProvider = localStorage.getItem("chatModelProvider");
const chatModel = localStorage.getItem("chatModel");
const res = await fetch(
`${process.env.NEXT_PUBLIC_API_URL}/videos`,
{
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
query: query,
chat_history: chat_history,
chat_model_provider: chatModelProvider,
chat_model: chatModel,
}),
const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/videos`, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
);
body: JSON.stringify({
query: query,
chat_history: chat_history,
chat_model_provider: chatModelProvider,
chat_model: chatModel,
}),
});
const data = await res.json();
@ -69,7 +60,7 @@ const Searchvideos = ({
setSlides(
videos.map((video: Video) => {
return {
type: 'video-slide',
type: "video-slide",
iframe_src: video.iframe_src,
src: video.img_src,
};
@ -104,11 +95,7 @@ const Searchvideos = ({
<div
onClick={() => {
setOpen(true);
setSlides([
slides[i],
...slides.slice(0, i),
...slides.slice(i + 1),
]);
setSlides([slides[i], ...slides.slice(0, i), ...slides.slice(i + 1)]);
}}
className="relative transition duration-200 active:scale-95 hover:scale-[1.02] cursor-pointer"
key={i}
@ -128,11 +115,7 @@ const Searchvideos = ({
<div
onClick={() => {
setOpen(true);
setSlides([
slides[i],
...slides.slice(0, i),
...slides.slice(i + 1),
]);
setSlides([slides[i], ...slides.slice(0, i), ...slides.slice(i + 1)]);
}}
className="relative transition duration-200 active:scale-95 hover:scale-[1.02] cursor-pointer"
key={i}
@ -163,9 +146,7 @@ const Searchvideos = ({
/>
))}
</div>
<p className="text-black/70 dark:text-white/70 text-xs">
View {videos.length - 3} more
</p>
<p className="text-black/70 dark:text-white/70 text-xs">View {videos.length - 3} more</p>
</button>
)}
</div>
@ -175,7 +156,7 @@ const Searchvideos = ({
slides={slides}
render={{
slide: ({ slide }) =>
slide.type === 'video-slide' ? (
slide.type === "video-slide" ? (
<div className="h-full w-full flex flex-row items-center justify-center">
<iframe
src={slide.iframe_src}