github/tiktok-dl
1
1
Fork 0
mirror of https://github.com/hansputera/tiktok-dl.git synced 2026-04-05 19:51:57 +02:00
Code Issues 11 Packages Projects Releases Wiki Activity

feat(apps.web#components): added VideoComponent

Browse Source 
Signed-off-by: GitHub <noreply@github.com>
This commit is contained in:
hansputera
2022-05-26 15:06:43 +00:00
committed by GitHub
parent 70ef16badd
commit 49d80969f5
2 changed files with 45 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
apps/web/components/FormInput.tsx
View File

@@ -2,6 +2,7 @@ import React from 'react';
import useSWR, {Fetcher} from 'swr';
import {ExtractedInfo} from 'tiktok-dl-core';
import {getTikTokURL} from '../lib/url';
import {VideoComponent} from './Video';
// // ERRORS ///
/**
@@ -126,7 +127,7 @@ export const FormInputComponent = (): JSX.Element => {
Wait a minute
</p>
) : (
<>{data?.provider}</>
data && <VideoComponent data={data} />
)}
</section>
</section>

43
apps/web/components/Video.tsx Normal file
View File

@@ -0,0 +1,43 @@
import React from 'react';
import type {ExtractedInfoWithProvider} from './FormInput';
export const VideoComponent = ({data}: {data: ExtractedInfoWithProvider}) => {
return (
<React.Fragment>
<h1 className="text-2xl text-center">Your Video Is Ready!</h1>
<div className="grid grid-cols-3 gap-x-1">
{data.video?.thumb && (
<div>
<input
type="image"
src={data.video.thumb}
className="h-64 rounded-md"
/>
</div>
)}
<div>
<video
autoPlay={false}
controls
className="h-64 w-80 rounded-md md:ml-2"
>
<source src={data.video?.urls[0]} />
</video>
</div>
<div className="bg-teal-200 rounded-sm text-center">
<ul className="grid grid-cols-1 gap-1">
<li>
<p className="font-semibold">Download URLs:</p>
</li>
{data.video!.urls.map((url, index) => (
<li>
<a href={url}>Click to Download #{index + 1}</a>
</li>
))}
</ul>
</div>
</div>
<p className="font-sans text-base">Source: {data.provider}</p>
</React.Fragment>
);
};