mirror of
https://github.com/artegoser/ultyt.git
synced 2024-11-24 04:46:23 +03:00
feat: video component and trending
This commit is contained in:
parent
947bb1735d
commit
3d798eb391
6 changed files with 89 additions and 29 deletions
17
package-lock.json
generated
17
package-lock.json
generated
|
|
@ -8,9 +8,10 @@
|
|||
"name": "ultyt",
|
||||
"version": "0.0.0",
|
||||
"dependencies": {
|
||||
"@heroicons/react": "^2.0.18",
|
||||
"@nextui-org/react": "^2.0.7",
|
||||
"framer-motion": "^10.15.1",
|
||||
"piped-api": "^1.1.2",
|
||||
"piped-api": "^1.1.6",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-router-dom": "^6.14.2"
|
||||
|
|
@ -529,6 +530,14 @@
|
|||
"tslib": "^2.4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@heroicons/react": {
|
||||
"version": "2.0.18",
|
||||
"resolved": "https://registry.npmjs.org/@heroicons/react/-/react-2.0.18.tgz",
|
||||
"integrity": "sha512-7TyMjRrZZMBPa+/5Y8lN0iyvUU/01PeMGX2+RE7cQWpEUIcb4QotzUObFkJDejj/HUH4qjP/eQ0gzzKs2f+6Yw==",
|
||||
"peerDependencies": {
|
||||
"react": ">= 16"
|
||||
}
|
||||
},
|
||||
"node_modules/@humanwhocodes/config-array": {
|
||||
"version": "0.11.10",
|
||||
"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.10.tgz",
|
||||
|
|
@ -4430,9 +4439,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/piped-api": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/piped-api/-/piped-api-1.1.2.tgz",
|
||||
"integrity": "sha512-5eEGjsehCG/uazk6yPzv1FuPm9pe7HYyFBgAzJoHcCLVROwOifk5+qdQMCqEeVL0d5rtdiB2i+KOozZzmsUZqg==",
|
||||
"version": "1.1.6",
|
||||
"resolved": "https://registry.npmjs.org/piped-api/-/piped-api-1.1.6.tgz",
|
||||
"integrity": "sha512-Tyn6/x/nBass469Io5zyILKylQI6sHE0MIYPYgD5nD232TmBF3G0OU+AQrvqU6cCla+Bkff3oFo+4GhnJKeiuA==",
|
||||
"dependencies": {
|
||||
"axios": "^1.4.0"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,9 +10,10 @@
|
|||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@heroicons/react": "^2.0.18",
|
||||
"@nextui-org/react": "^2.0.7",
|
||||
"framer-motion": "^10.15.1",
|
||||
"piped-api": "^1.1.2",
|
||||
"piped-api": "^1.1.6",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-router-dom": "^6.14.2"
|
||||
|
|
|
|||
15
src/App.tsx
15
src/App.tsx
|
|
@ -1,10 +1,9 @@
|
|||
import "./App.css";
|
||||
|
||||
import './App.css'
|
||||
|
||||
import {NextUIProvider} from "@nextui-org/react";
|
||||
import { NextUIProvider } from "@nextui-org/react";
|
||||
import { PipedAPI } from "piped-api";
|
||||
import { BrowserRouter, Route, Routes } from 'react-router-dom';
|
||||
import Trending from './pages/trending';
|
||||
import { BrowserRouter, Route, Routes } from "react-router-dom";
|
||||
import Trending from "./pages/trending";
|
||||
|
||||
declare global {
|
||||
interface Window {
|
||||
|
|
@ -12,7 +11,7 @@ declare global {
|
|||
}
|
||||
}
|
||||
function App() {
|
||||
window.piped_api = new PipedAPI("https://ytapi.dc09.ru");
|
||||
window.piped_api = new PipedAPI(); //"https://ytapi.dc09.ru");
|
||||
|
||||
return (
|
||||
<NextUIProvider>
|
||||
|
|
@ -22,7 +21,7 @@ function App() {
|
|||
</Routes>
|
||||
</BrowserRouter>
|
||||
</NextUIProvider>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
export default App
|
||||
export default App;
|
||||
|
|
|
|||
8
src/components/utils.ts
Normal file
8
src/components/utils.ts
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
export function shortenNumber(number: number) {
|
||||
if (number >= 1000000) {
|
||||
return (number / 1000000).toFixed(2) + "M";
|
||||
} else if (number >= 1000) {
|
||||
return (number / 1000).toFixed(1) + "k";
|
||||
}
|
||||
return number.toString();
|
||||
}
|
||||
47
src/components/video.tsx
Normal file
47
src/components/video.tsx
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
import { Avatar, Card, CardBody, CardHeader, Link } from "@nextui-org/react";
|
||||
import { Video } from "piped-api/dist/types";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { CheckCircleIcon, EyeIcon } from "@heroicons/react/24/solid";
|
||||
import { shortenNumber } from "./utils";
|
||||
export function VideoComponent({ video }: VideoComponentProps) {
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<Card
|
||||
isBlurred
|
||||
isPressable
|
||||
onPress={() => navigate(video.url)}
|
||||
shadow="none"
|
||||
>
|
||||
<CardHeader>
|
||||
<img className="w-full rounded-xl" src={video.thumbnail} />
|
||||
</CardHeader>
|
||||
<CardBody className="flex gap-3 flex-row">
|
||||
<Avatar className="flex-none" src={video.uploaderAvatar} />
|
||||
<div className="flex gap-3 flex-col">
|
||||
<Link color="foreground" href={video.url}>
|
||||
{video.title}
|
||||
</Link>
|
||||
<Link color="foreground" href={video.uploaderUrl}>
|
||||
<div className="flex flex-row items-center">
|
||||
<p className="flex-none text-md">{video.uploaderName}</p>
|
||||
{video.uploaderVerified && (
|
||||
<CheckCircleIcon className="w-6 h-6 p-1" />
|
||||
)}
|
||||
</div>
|
||||
</Link>
|
||||
<div className="flex flex-row items-center">
|
||||
<EyeIcon className="w-6 h-6 p-1" />
|
||||
<p className="flex-none text-md">
|
||||
{`${shortenNumber(video.views)} • ${video.uploadedDate}`}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
type VideoComponentProps = {
|
||||
video: Video;
|
||||
};
|
||||
|
|
@ -1,17 +1,14 @@
|
|||
import { Video } from "piped-api/dist/responses.interface";
|
||||
import { Video } from "piped-api/dist/types";
|
||||
import { useEffect, useState } from "react";
|
||||
import { VideoComponent } from "../components/video";
|
||||
|
||||
import {Avatar, Badge, Card, CardHeader, CardBody, CardFooter, Divider, Link, Image} from "@nextui-org/react";
|
||||
export default function Trending() {
|
||||
|
||||
const [trending, setTrending] = useState([] as Video[]);
|
||||
|
||||
useEffect(() => {
|
||||
async function getTrending(){
|
||||
|
||||
const trending = await window.piped_api.trending("US");
|
||||
async function getTrending() {
|
||||
const trending = await window.piped_api.trending("US"); //await window.piped_api.search("artegoser");
|
||||
setTrending(trending);
|
||||
console.log(trending);
|
||||
}
|
||||
|
||||
if (trending.length === 0) {
|
||||
|
|
@ -19,12 +16,11 @@ export default function Trending() {
|
|||
}
|
||||
});
|
||||
|
||||
return <div className="grid grid-cols-6 gap-4 p-4">{trending.map((video) => <Card key={video.url}>
|
||||
<CardHeader><Image className="w-full" src={video.thumbnail}/></CardHeader>
|
||||
<Divider/>
|
||||
<CardBody className="grid grid-cols-3">
|
||||
<Avatar src={video.uploaderAvatar} />
|
||||
<p className="text-md">{video.uploaderName}</p>
|
||||
</CardBody>
|
||||
</Card>)}</div>;
|
||||
return (
|
||||
<div className="grid md:grid-cols-2 xl:grid-cols-4 2xl:grid-cols-5 gap-2 p-4">
|
||||
{trending.map((video) => (
|
||||
<VideoComponent video={video} key={video.url} />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue