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): added music information

Browse Source 
Signed-off-by: GitHub <noreply@github.com>
This commit is contained in:
hansputera
2022-06-06 05:48:34 +00:00
committed by GitHub
parent e340a15726
commit 70c03adfb6
2 changed files with 47 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -35,7 +35,9 @@ export const FormInputComponent = (): JSX.Element => {
const [error, setError] = React.useState<string | Error>();
const [submitted, setSubmit] = React.useState<boolean>(false);
const {data, mutate} = useSWR(
submitted && (!error || !(error as string).length) && url.length
submitted &&
(!error || !(error as string).length) &&
/^http(s?)(:\/\/)([a-z]+\.)*tiktok\.com\/(.+)$/gi.test(url)
? [
'/api/download',
{
@@ -59,21 +61,24 @@ export const FormInputComponent = (): JSX.Element => {
url.length
) {
setError(new InvalidUrlError('Invalid TikTok Video URL'));
} else {
// submit event trigger.
if (submitted && !error) {
mutate();
}
try {
const u = getTikTokURL(url);
if (!u) {
setError(new InvalidUrlError('Invalid TikTok URL'));
return;
}
console.log(u);
setUrl(u);
} catch {
setError(new InvalidUrlError('Invalid TikTok Video URL'));
}
} else {
// submit event trigger.
if (submitted && !error) {
mutate();
}
setError(undefined);
}
@@ -123,7 +128,7 @@ export const FormInputComponent = (): JSX.Element => {
</div>
</form>
<section className="mt-3">
<section className="mt-3 mb-3">
{submitted && !data ? (
<p className={'text-base font-sans text-blue-500'}>
Wait a minute

48
apps/web/components/Video.tsx
View File

@@ -5,16 +5,7 @@ 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 className="grid grid-cols-3 gap-3">
<div>
<video
autoPlay={false}
@@ -26,18 +17,49 @@ export const VideoComponent = ({data}: {data: ExtractedInfoWithProvider}) => {
</div>
<div className="bg-teal-200 rounded-sm text-center">
<ul className="grid grid-cols-1 gap-1">
<li>
<li key="download-url">
<p className="font-semibold">Download URLs:</p>
</li>
{data.video!.urls.map((url, index) => (
<li>
<li key={index}>
<a href={url}>Click to Download #{index + 1}</a>
</li>
))}
</ul>
</div>
{data.music && (
<div className="bg-light-500 rounded-sm text-center">
<ul className="grid grid-cols-1 gap-1">
<li key="music-head">
<p className="font-semibold">Music:</p>
</li>
<li key="music-url">
Music URL:{' '}
<a
href={data.music.url}
className="text-blue-500 uppercase"
target="_blank"
>
Click here
</a>
</li>
{data.music.author && (
<li key="music-author">
Music Author: {data.music.author}
</li>
)}
{data.music.title && (
<li key="music-title">
Music Title: {data.music.title}
</li>
)}
</ul>
</div>
)}
</div>
<p className="font-sans text-base">Source: {data.provider}</p>
<p className="font-sans text-base mt-2">
&copy; Source: {data.provider}
</p>
</React.Fragment>
);
};