patch: default to h.264 #14 @xirreal

#14 (comment)

README.md

@@ -55,7 +55,7 @@ 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!
+### "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 there's 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.
 
@@ -67,6 +67,15 @@ However, we want to give users the option to add it in case it brings additional
 
 > Alternatively, you can also set `addDesc` to true thru the URL query by adding `?addDesc=true` at the end of your URL
 
+### Changing to High Quality
+
+TikTok supports H.265/HEVC (High Efficiency Video Coding) which offers significantly better quality at the same file size compared to H.264, at the cost of compatibility. By default, we use H.264 quality since [many users report issues with embeds breaking with H.265](https://github.com/okdargy/fxTikTok/issues/14), but support enabling H.265.
+
+To enable high quality H.265 playback, add `?hq=true` or use `hq.tnktok.com`:
+|         Before         |        After         |
+| :--------------------: | :------------------: |
+| **www**.t**i**ktok.com | **hq**.t**n**ktok.com |
+
 ### 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.

src/index.ts

@@ -9,6 +9,7 @@ const app = new Hono()
 
 const awemeIdPattern = /^\d{1,19}$/
 const awemeLinkPattern = /\/@?([\w\d_.]*)\/(video|photo|live)\/?(\d{19})?/
+
 // Credit: https://github.com/FixTweet/FxTwitter/blob/main/src/constants.ts#L24
 const BOT_REGEX =
   /bot|facebook|embed|got|firefox\/92|firefox\/38|curl|wget|go-http|yahoo|generator|whatsapp|revoltchat|preview|link|proxy|vkshare|images|analyzer|index|crawl|spider|python|cfnetwork|node|mastodon|http\.rb|ruby|bun\/|fiddler|iframely|steamchaturllookup/i
@@ -26,7 +27,6 @@ async function handleShort(c: any): Promise<Response> {
   const { videoId } = c.req.param()
   let id = videoId.split('.')[0] // for .mp4, .webp, etc.
 
-  // First, we need to find where the vm link goes to
   const res = await fetch('https://vm.tiktok.com/' + id)
   const link = new URL(res.url)
 
@@ -56,7 +56,7 @@ async function handleShort(c: any): Promise<Response> {
 
 async function handleVideo(c: any): Promise<Response> {
   const { videoId } = c.req.param()
-  const { addDesc } = c.req.query()
+  const { addDesc, hq } = c.req.query()
 
   let id = videoId.split('.')[0] // for .mp4, .webp, etc.
 
@@ -126,7 +126,8 @@ async function handleVideo(c: any): Promise<Response> {
 
       const responseContent = await VideoResponse(
         videoInfo,
-        (addDesc || 'false').toLowerCase() == 'true' || url.hostname.includes('a.tnktok.com')
+        (addDesc || 'false').toLowerCase() == 'true' || url.hostname.includes('a.tnktok.com'),
+        (url.hostname.includes('hq.tnktok.com') || (hq || 'false').toLowerCase() == 'true')
       )
       return returnHTMLResponse(responseContent)
     }
@@ -198,8 +199,7 @@ app.get('/generate/alternate', (c) => {
 
 app.get('/generate/video/:videoId', async (c) => {
   const { videoId } = c.req.param()
-  const forceLow =
-    c.req.query('h264') === 'true' || c.req.query('encoder') === 'h264' || c.req.query('quality') === 'h264'
+  const hq = c.req.query('hq') === 'true' || c.req.query('quality') === 'hq'
 
   try {
     // To ensure the video is valid, decrease load on TikWM by checking the video data first
@@ -216,7 +216,7 @@ app.get('/generate/video/:videoId', async (c) => {
 
     const highAvailable = data.video.bitrateInfo.find((bitrate) => bitrate.CodecType.includes('h265'))
 
-    if (highAvailable && !forceLow) {
+    if (hq && highAvailable) {
       return c.redirect(`https://tikwm.com/video/media/hdplay/${videoId}.mp4`)
     } else {
       return c.redirect(`https://tikwm.com/video/media/play/${videoId}.mp4`)

src/templates/pages/VideoResponse.tsx

@@ -3,8 +3,8 @@ import { ItemStruct } from '../../types/Web'
 import { formatNumber } from '../../util/format'
 import { Buffer } from 'node:buffer'
 
-export function VideoResponse(data: ItemStruct, addDesc: Boolean): JSX.Element {
-  let videoUrl = 'https://fxtiktok-rewrite.dargy.workers.dev/generate/video/' + data.id
+export function VideoResponse(data: ItemStruct, addDesc: Boolean, hq: boolean): JSX.Element {
+  let videoUrl = 'https://fxtiktok-rewrite.dargy.workers.dev/generate/video/' + data.id + (hq ? '?hq=true' : '')
   let videoMeta: { name: string; content: string }[] = []
 
   if (data.video.duration !== 0) {

src/tests/video.test.ts

@@ -12,6 +12,18 @@ describe('GET /@i/video/:videoId', () => {
     expect(res.status).toBe(200)
   })
 
+  it('should return 200 (h.265)', async () => {
+    const res = await app.request('/@pr4yforgabs/video/7332187682480590112?hq=true', {
+      method: 'GET',
+      headers: {
+        'User-Agent': 'Mozilla/5.0 (compatible; Discordbot/2.0; +https://discordapp.com)'
+      }
+    })
+
+    expect(res.status).toBe(200)
+    expect(await res.text()).toContain('?hq=true')
+  })
+
   // no discord user agent, redirects
   it('should return 302', async () => {
     const res = await app.request('/@pr4yforgabs/video/7332187682480590112', {
@@ -72,6 +84,15 @@ describe('GET /generate/video/:videoId', () => {
     expect(res.status).toBe(302)
   })
 
+  it('should return 302 (h.265)', async () => {
+    const res = await app.request('/generate/video/7332187682480590112?hq=true', {
+      method: 'GET'
+    })
+
+    expect(res.status).toBe(302)
+    expect(res.headers.get('Location')).toContain('hdplay')
+  })
+
   it('should return 500', async () => {
     const res = await app.request('/generate/video/123', {
       method: 'GET'