From 8fbcc4344306980d283e90a6892460b34764272b Mon Sep 17 00:00:00 2001 From: dargy Date: Tue, 27 Aug 2024 16:29:28 -0500 Subject: [PATCH] feat: support json+oembed caption #13 --- README.md | 12 ++++++++++++ src/index.ts | 7 ++++++- src/templates/pages/VideoResponse.tsx | 24 +++--------------------- src/util/generateAlternate.tsx | 9 +++++---- 4 files changed, 26 insertions(+), 26 deletions(-) diff --git a/README.md b/README.md index 581c2d7..bad8258 100644 --- a/README.md +++ b/README.md @@ -49,6 +49,18 @@ Don't want all that statistic clutter on your embed and only want the video or i > Alternatively, you can also set `isDirect` to true thru the URL query by adding `?isDirect=true` at the end of your URL +### I don't see the video's caption! + +By default, we put the description into the `og:description` tag but Discord removes that from the embed if theres a video inside the embed. We decided not to add it to the top like what [tfxktok.com](https://tfxktok.com) does to prevent the embed from getting too cluttered with hashtags. + +But, we want to give the option for users to add it in case it brings additional context to the video. You can change your URL to `a.tnktok.com` to add the description to the top. + +| Before | After | +| :--------------------: | :------------------: | +| **www**.t**i**ktok.com | **a**.t**n**ktok.com | + +> Alternatively, you can also set `addDesc` to true thru the URL query by adding `?addDesc=true` at the end of your URL + ### Why use tnktok.com? We check all the boxes for being one of the best TikTok embedding services with many features that others don't have. Here's a table comparing our service, tnktok.com, with the other TikTok embedding services as well as TikTok's default embeds. diff --git a/src/index.ts b/src/index.ts index 8998160..783cb90 100644 --- a/src/index.ts +++ b/src/index.ts @@ -80,6 +80,8 @@ async function handleShort(c: any): Promise { async function handleVideo(c: any): Promise { const { videoId } = c.req.param() + const { addDesc } = c.req.query() + let id = videoId.split('.')[0] // for .mp4, .webp, etc. // If the user agent is a bot, redirect to the TikTok page @@ -146,7 +148,10 @@ async function handleVideo(c: any): Promise { return returnHTMLResponse(responseContent, 200) } - const responseContent = await VideoResponse(videoInfo) + const responseContent = await VideoResponse( + videoInfo, + (addDesc || 'false').toLowerCase() == 'true' || url.hostname.includes('a.tnktok.com') + ) return returnHTMLResponse(responseContent) } } catch (e) { diff --git a/src/templates/pages/VideoResponse.tsx b/src/templates/pages/VideoResponse.tsx index 1772287..769de1b 100644 --- a/src/templates/pages/VideoResponse.tsx +++ b/src/templates/pages/VideoResponse.tsx @@ -2,27 +2,8 @@ import MetaHelper from '../../util/metaHelper' import { ItemStruct } from '../../types/Web' import { formatNumber } from '../../util/format' -export function VideoResponse(data: ItemStruct): JSX.Element { +export function VideoResponse(data: ItemStruct, addDesc: Boolean): JSX.Element { let videoUrl = 'https://fxtiktok-rewrite.dargy.workers.dev/generate/video/' + data.id - - // NOTE - This snippet was used to get a dynamic URL from the TikTok API but now we are mainly using web scraping to get the video data, which doesn't provide a dynamic URL - /* - if (data.video.duration > 0 && data.videos_addr) { - const awemeVideo = data.videos_addr.find((url) => - url.includes("/aweme/v1/play"), - ); - - if (awemeVideo) { - const url = new URL(awemeVideo); - - const videoId = url.searchParams.get("video_id"); - const fileId = url.searchParams.get("file_id"); - - videoUrl = `https://${url.hostname}/aweme/v1/play/?video_id=${videoId}&file_id=${fileId}&item_id=${data.aweme_id}`; - } - } - */ - let videoMeta: { name: string; content: string }[] = [] if (data.video.duration !== 0) { @@ -131,7 +112,8 @@ export function VideoResponse(data: ItemStruct): JSX.Element { ], { unique_id: data.author.uniqueId, - nickname: data.author.nickname + nickname: data.author.nickname, + ...(addDesc ? { description: data.desc } : {}) } )} diff --git a/src/util/generateAlternate.tsx b/src/util/generateAlternate.tsx index 6382ab9..4ecee8f 100644 --- a/src/util/generateAlternate.tsx +++ b/src/util/generateAlternate.tsx @@ -9,15 +9,16 @@ export default function generateAlternate(c: Context): { provider_url: string title: string } { - const { unique_id, nickname } = c.req.query() + const { unique_id, nickname, description } = c.req.query() + const showSponsor = Math.random() < 0.01 // 1 in 100 chance to show sponsor message, gotta break even somehow return { version: '1.0', type: 'link', author_name: `${decodeURIComponent(nickname)} (@${decodeURIComponent(unique_id)})`, - author_url: `https://www.tiktok.com/${unique_id ? '@' + unique_id : ''}`, - provider_name: 'fxTikTok - Embed with s/i/n', - provider_url: 'https://github.com/okdargy/fxTikTok', + author_url: `https://www.tiktok.com${unique_id ? '/@' + unique_id : ''}`, + provider_name: `${description ? '\n\n' + decodeURIComponent(description) : showSponsor ? 'Use fxTikTok often? Consider supporting us on GitHub!' : 'fxTikTok - Embed with s/i/n'}`, + provider_url: showSponsor ? 'https://github.com/sponsors/okdargy' : 'https://github.com/okdargy/fxTikTok', title: `TikTok by @${unique_id}` } }