Add PeerTube player support

examples/react/src/App.tsx

@@ -504,6 +504,12 @@ const App = () => {
                 {renderLoadButton('https://www.tiktok.com/@scout2015/video/6718335390845095173', 'Test B')}
               </td>
             </tr>
+            <tr>
+              <th>PeerTube</th>
+              <td>
+                {renderLoadButton('https://video.mshparisnord.fr/w/p/aWDVVLYnVGutCDQogoEDf4', 'Test A')}
+              </td>
+            </tr>
             <tr>
               <th>Custom</th>
               <td>

package.json

@@ -54,6 +54,7 @@
     "cloudflare-video-element": "^1.3.4",
     "dash-video-element": "^0.3.0",
     "hls-video-element": "^1.5.9",
+    "peertube-video-element": "^1.1.0",
     "spotify-audio-element": "^1.0.3",
     "tiktok-video-element": "^0.1.1",
     "twitch-video-element": "^0.1.5",

src/patterns.ts

@@ -13,6 +13,8 @@ export const MATCH_URL_WISTIA =
 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\/(?:player\/v1\/|share\/video\/|@[^/]+\/video\/)([0-9]+)/;
+export const MATCH_URL_PEERTUBE = /(?:videos\/(?:watch|embed)|\/w)\/([^/?#&\s]+)/;
+
 
 const canPlayFile = (url: string, test: (u: string) => boolean) => {
   if (Array.isArray(url)) {
@@ -42,4 +44,5 @@ export const canPlay = {
   spotify: (url: string) => MATCH_URL_SPOTIFY.test(url),
   twitch: (url: string) => MATCH_URL_TWITCH.test(url),
   tiktok: (url: string) => MATCH_URL_TIKTOK.test(url),
+  peertube: (url: string)=> MATCH_URL_PEERTUBE.test(url)
 };

src/players.ts

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

src/types.ts

@@ -5,6 +5,7 @@ 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';
+import type PeerTubeVideoElement from 'peertube-video-element';
 
 interface VideoHTMLAttributes<T> extends MediaHTMLAttributes<T> {
   height?: number | string | undefined;
@@ -55,4 +56,5 @@ export interface Config {
   vimeo?: VimeoVideoElement['config'];
   wistia?: Record<string, unknown>;
   youtube?: YouTubeVideoElement['config'];
+  peertube?: PeerTubeVideoElement['config'];
 }