feat: add tiktok support (#1961)

* feat: add tiktok support
fix #1193

* fix: upgrade Vimeo and Twitch with bug fixes

Author: luwes

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')}
               </td>
             </tr>
+            <tr>
+              <th>TikTok</th>
+              <td>
+                {renderLoadButton('https://www.tiktok.com/@_luwes/video/7527476667770522893', 'Test A')}
+                {renderLoadButton('https://www.tiktok.com/@scout2015/video/6718335390845095173', 'Test B')}
+              </td>
+            </tr>
             <tr>
               <th>Custom</th>
               <td>

package-lock.json

@@ -56,8 +56,9 @@
     "deepmerge": "^4.0.0",
     "hls-video-element": "^1.5.6",
     "spotify-audio-element": "^1.0.2",
-    "twitch-video-element": "^0.1.1",
-    "vimeo-video-element": "^1.5.2",
+    "tiktok-video-element": "^0.1.0",
+    "twitch-video-element": "^0.1.2",
+    "vimeo-video-element": "^1.5.3",
     "wistia-video-element": "^1.3.3",
     "youtube-video-element": "^1.6.1"
   },

package.json

@@ -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),
 };

src/patterns.ts

@@ -84,6 +84,15 @@ const Players: PlayerEntry[] = [
       () => import(/* webpackChunkName: 'reactPlayerTwitch' */ 'twitch-video-element/react')
     ) as React.LazyExoticComponent<React.ComponentType<VideoElementProps>>,
   },
+  {
+    key: 'tiktok',
+    name: 'TikTok',
+    canPlay: canPlay.tiktok,
+    canEnablePIP: () => false,
+    player: lazy(
+      () => import(/* webpackChunkName: 'reactPlayerTiktok' */ 'tiktok-video-element/react')
+    ) as React.LazyExoticComponent<React.ComponentType<VideoElementProps>>,
+  },
   {
     key: 'html',
     name: 'html',

src/players.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<T> extends MediaHTMLAttributes<T> {
   height?: number | string | undefined;
@@ -49,6 +50,7 @@ export interface Config {
   html?: Record<string, unknown>;
   mux?: Record<string, unknown>;
   spotify?: SpotifyAudioElement['config'];
+  tiktok?: TikTokVideoElement['config'];
   twitch?: TwitchVideoElement['config'];
   vimeo?: VimeoVideoElement['config'];
   wistia?: Record<string, unknown>;