From a471806025a2a892671215f5b59c9a66e677e2d5 Mon Sep 17 00:00:00 2001 From: Wesley Luyten Date: Wed, 16 Jul 2025 09:39:50 -0500 Subject: [PATCH 1/2] feat: add tiktok support fix #1193 --- examples/react/src/App.tsx | 19 +++++++++++++++++++ package-lock.json | 7 +++++++ package.json | 1 + src/patterns.ts | 2 ++ src/players.ts | 9 +++++++++ src/types.ts | 2 ++ 6 files changed, 40 insertions(+) diff --git a/examples/react/src/App.tsx b/examples/react/src/App.tsx index 78fdfa1d..548e4fa9 100644 --- a/examples/react/src/App.tsx +++ b/examples/react/src/App.tsx @@ -241,6 +241,18 @@ const App = () => { }, spotify: { preferVideo: true + }, + tiktok: { + fullscreen_button: true, + progress_bar: true, + play_button: true, + volume_control: true, + timestamp: false, + music_info: false, + description: false, + rel: false, + native_context_menu: true, + closed_caption: false, } }} onLoadStart={() => console.log('onLoadStart')} @@ -483,6 +495,13 @@ const App = () => { {renderLoadButton('https://www.twitch.tv/kronovi', 'Test B')} + + TikTok + + {renderLoadButton('https://www.tiktok.com/@_luwes/video/7527476667770522893', 'Test A')} + {renderLoadButton('https://www.tiktok.com/@scout2015/video/6718335390845095173', 'Test B')} + + Custom diff --git a/package-lock.json b/package-lock.json index 5f00987d..b2234324 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,6 +15,7 @@ "deepmerge": "^4.0.0", "hls-video-element": "^1.5.6", "spotify-audio-element": "^1.0.2", + "tiktok-video-element": "^0.1.0", "twitch-video-element": "^0.1.1", "vimeo-video-element": "^1.5.2", "wistia-video-element": "^1.3.3", @@ -3481,6 +3482,12 @@ "resolved": "scripts/tester", "link": true }, + "node_modules/tiktok-video-element": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/tiktok-video-element/-/tiktok-video-element-0.1.0.tgz", + "integrity": "sha512-PVWUlpDdQ/LPXi7x4/furfD7Xh1L72CgkGCaMsZBIjvxucMGm1DDPJdM9IhWBFfo6tuR4cYVO/v596r6GG/lvQ==", + "license": "MIT" + }, "node_modules/tr46": { "version": "0.0.3", "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz", diff --git a/package.json b/package.json index 813edf88..5f168dbe 100644 --- a/package.json +++ b/package.json @@ -56,6 +56,7 @@ "deepmerge": "^4.0.0", "hls-video-element": "^1.5.6", "spotify-audio-element": "^1.0.2", + "tiktok-video-element": "^0.1.0", "twitch-video-element": "^0.1.1", "vimeo-video-element": "^1.5.2", "wistia-video-element": "^1.3.3", diff --git a/src/patterns.ts b/src/patterns.ts index 8d824450..ac919bd6 100644 --- a/src/patterns.ts +++ b/src/patterns.ts @@ -12,6 +12,7 @@ export const MATCH_URL_WISTIA = /(?:wistia\.(?:com|net)|wi\.st)\/(?:medias|embed)\/(?:iframe\/)?([^?]+)/; export const MATCH_URL_SPOTIFY = /open\.spotify\.com\/(\w+)\/(\w+)/i; export const MATCH_URL_TWITCH = /(?:www\.|go\.)?twitch\.tv\/([a-zA-Z0-9_]+|(videos?\/|\?video=)\d+)($|\?)/; +export const MATCH_URL_TIKTOK = /tiktok\.com\/(?:@[^/]+\/video\/)?(\d+)(?:\/([\w-]+))?/; const canPlayFile = (url: string, test: (u: string) => boolean) => { if (Array.isArray(url)) { @@ -40,4 +41,5 @@ export const canPlay = { wistia: (url: string) => MATCH_URL_WISTIA.test(url), spotify: (url: string) => MATCH_URL_SPOTIFY.test(url), twitch: (url: string) => MATCH_URL_TWITCH.test(url), + tiktok: (url: string) => MATCH_URL_TIKTOK.test(url), }; diff --git a/src/players.ts b/src/players.ts index 04bd2f4f..10a4d1e6 100644 --- a/src/players.ts +++ b/src/players.ts @@ -84,6 +84,15 @@ const Players: PlayerEntry[] = [ () => import(/* webpackChunkName: 'reactPlayerTwitch' */ 'twitch-video-element/react') ) as React.LazyExoticComponent>, }, + { + key: 'tiktok', + name: 'TikTok', + canPlay: canPlay.tiktok, + canEnablePIP: () => false, + player: lazy( + () => import(/* webpackChunkName: 'reactPlayerTiktok' */ 'tiktok-video-element/react') + ) as React.LazyExoticComponent>, + }, { key: 'html', name: 'html', diff --git a/src/types.ts b/src/types.ts index ad4773a9..411f4f2b 100644 --- a/src/types.ts +++ b/src/types.ts @@ -4,6 +4,7 @@ import type SpotifyAudioElement from 'spotify-audio-element'; import type YouTubeVideoElement from 'youtube-video-element'; import type VimeoVideoElement from 'vimeo-video-element'; import type TwitchVideoElement from 'twitch-video-element'; +import type TikTokVideoElement from 'tiktok-video-element'; interface VideoHTMLAttributes extends MediaHTMLAttributes { height?: number | string | undefined; @@ -49,6 +50,7 @@ export interface Config { html?: Record; mux?: Record; spotify?: SpotifyAudioElement['config']; + tiktok?: TikTokVideoElement['config']; twitch?: TwitchVideoElement['config']; vimeo?: VimeoVideoElement['config']; wistia?: Record; From 18542139bec025fccf32d05f6a2c5d986ae72ac8 Mon Sep 17 00:00:00 2001 From: Wesley Luyten Date: Wed, 16 Jul 2025 09:41:44 -0500 Subject: [PATCH 2/2] fix: upgrade Vimeo and Twitch with bug fixes --- package-lock.json | 16 ++++++++-------- package.json | 4 ++-- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/package-lock.json b/package-lock.json index b2234324..46e4dc39 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,8 +16,8 @@ "hls-video-element": "^1.5.6", "spotify-audio-element": "^1.0.2", "tiktok-video-element": "^0.1.0", - "twitch-video-element": "^0.1.1", - "vimeo-video-element": "^1.5.2", + "twitch-video-element": "^0.1.2", + "vimeo-video-element": "^1.5.3", "wistia-video-element": "^1.3.3", "youtube-video-element": "^1.6.1" }, @@ -3495,9 +3495,9 @@ "dev": true }, "node_modules/twitch-video-element": { - "version": "0.1.1", - "resolved": "https://registry.npmjs.org/twitch-video-element/-/twitch-video-element-0.1.1.tgz", - "integrity": "sha512-m3V0+qBboBQKljT73GD1Yo8ebO8yBVyoEBUVcGqeNQfnhWKPHvyxEivYQPiEHrMmy+wLodZI4jLWQDs4hOR/Pg==", + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/twitch-video-element/-/twitch-video-element-0.1.2.tgz", + "integrity": "sha512-/up4KiWiTYiav+CUo+/DbV8JhP4COwEKSo8h1H/Zft/5NzZ/ZiIQ48h7erFKvwzalN0GfkEGGIfwIzAO0h7FHQ==", "license": "MIT" }, "node_modules/type-detect": { @@ -3699,9 +3699,9 @@ } }, "node_modules/vimeo-video-element": { - "version": "1.5.2", - "resolved": "https://registry.npmjs.org/vimeo-video-element/-/vimeo-video-element-1.5.2.tgz", - "integrity": "sha512-ws/CN1vJdvgmBHkudn8k4uBYx7nYEBUxml86X6TVMvFFHoXn41sPCVIKq0osN3/7bNygn+fjMxraqK1+Z8T90w==", + "version": "1.5.3", + "resolved": "https://registry.npmjs.org/vimeo-video-element/-/vimeo-video-element-1.5.3.tgz", + "integrity": "sha512-OQWyGS9nTouMqfRJyvmAm/n6IRhZ7x3EfPAef+Q+inGBeHa3SylDbtyeB/rEBd4B/T/lcYBW3rjaD9W2DRYkiQ==", "license": "MIT", "dependencies": { "@vimeo/player": "2.29.0" diff --git a/package.json b/package.json index 5f168dbe..df2d3e43 100644 --- a/package.json +++ b/package.json @@ -57,8 +57,8 @@ "hls-video-element": "^1.5.6", "spotify-audio-element": "^1.0.2", "tiktok-video-element": "^0.1.0", - "twitch-video-element": "^0.1.1", - "vimeo-video-element": "^1.5.2", + "twitch-video-element": "^0.1.2", + "vimeo-video-element": "^1.5.3", "wistia-video-element": "^1.3.3", "youtube-video-element": "^1.6.1" },