Skip to content

Commit c69e9ce

Browse files
authored
feat: add Spotify and Twitch support (#1956)
1 parent a315b5f commit c69e9ce

File tree

6 files changed

+65
-4
lines changed

6 files changed

+65
-4
lines changed

examples/react/src/App.tsx

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -238,6 +238,9 @@ const App = () => {
238238
},
239239
vimeo: {
240240
color: 'ffffff'
241+
},
242+
spotify: {
243+
preferVideo: true
241244
}
242245
}}
243246
onLoadStart={() => console.log('onLoadStart')}
@@ -467,6 +470,19 @@ const App = () => {
467470
{renderLoadButton('https://home.wistia.com/medias/bq6epni33s', 'Test C')}
468471
</td>
469472
</tr>
473+
<tr>
474+
<th>Spotify</th>
475+
<td>
476+
{renderLoadButton('https://open.spotify.com/episode/5Jo9ncrz2liWiKj8inZwD2', 'Test A')}
477+
</td>
478+
</tr>
479+
<tr>
480+
<th>Twitch</th>
481+
<td>
482+
{renderLoadButton('https://www.twitch.tv/videos/106400740', 'Test A')}
483+
{renderLoadButton('https://www.twitch.tv/kronovi', 'Test B')}
484+
</td>
485+
</tr>
470486
<tr>
471487
<th>Custom</th>
472488
<td>

package-lock.json

Lines changed: 14 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,8 @@
5555
"dash-video-element": "^0.1.5",
5656
"deepmerge": "^4.0.0",
5757
"hls-video-element": "^1.5.5",
58+
"spotify-audio-element": "^1.0.1",
59+
"twitch-video-element": "^0.1.0",
5860
"vimeo-video-element": "^1.5.1",
5961
"wistia-video-element": "^1.3.2",
6062
"youtube-video-element": "^1.6.0"

src/patterns.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ export const MATCH_URL_YOUTUBE =
1010
export const MATCH_URL_VIMEO = /vimeo\.com\/(?!progressive_redirect).+/;
1111
export const MATCH_URL_WISTIA =
1212
/(?:wistia\.(?:com|net)|wi\.st)\/(?:medias|embed)\/(?:iframe\/)?([^?]+)/;
13+
export const MATCH_URL_SPOTIFY = /open\.spotify\.com\/(\w+)\/(\w+)/i;
14+
export const MATCH_URL_TWITCH = /(?:www\.|go\.)?twitch\.tv\/([a-zA-Z0-9_]+|(videos?\/|\?video=)\d+)($|\?)/;
1315

1416
const canPlayFile = (url: string, test: (u: string) => boolean) => {
1517
if (Array.isArray(url)) {
@@ -36,4 +38,6 @@ export const canPlay = {
3638
vimeo: (url: string) =>
3739
MATCH_URL_VIMEO.test(url) && !VIDEO_EXTENSIONS.test(url) && !HLS_EXTENSIONS.test(url),
3840
wistia: (url: string) => MATCH_URL_WISTIA.test(url),
41+
spotify: (url: string) => MATCH_URL_SPOTIFY.test(url),
42+
twitch: (url: string) => MATCH_URL_TWITCH.test(url),
3943
};

src/players.ts

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,24 @@ const Players: PlayerEntry[] = [
6666
() => import(/* webpackChunkName: 'reactPlayerWistia' */ 'wistia-video-element/react')
6767
) as React.LazyExoticComponent<React.ComponentType<VideoElementProps>>,
6868
},
69+
{
70+
key: 'spotify',
71+
name: 'Spotify',
72+
canPlay: canPlay.spotify,
73+
canEnablePIP: () => false,
74+
player: lazy(
75+
() => import(/* webpackChunkName: 'reactPlayerSpotify' */ 'spotify-audio-element/react')
76+
) as React.LazyExoticComponent<React.ComponentType<VideoElementProps>>,
77+
},
78+
{
79+
key: 'twitch',
80+
name: 'Twitch',
81+
canPlay: canPlay.twitch,
82+
canEnablePIP: () => false,
83+
player: lazy(
84+
() => import(/* webpackChunkName: 'reactPlayerTwitch' */ 'twitch-video-element/react')
85+
) as React.LazyExoticComponent<React.ComponentType<VideoElementProps>>,
86+
},
6987
{
7088
key: 'html',
7189
name: 'html',

src/types.ts

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,9 @@
11
import type { MediaHTMLAttributes, SyntheticEvent } from 'react';
2+
import type HlsVideoElement from 'hls-video-element';
3+
import type SpotifyAudioElement from 'spotify-audio-element';
4+
import type YouTubeVideoElement from 'youtube-video-element';
5+
import type VimeoVideoElement from 'vimeo-video-element';
6+
import type TwitchVideoElement from 'twitch-video-element';
27

38
interface VideoHTMLAttributes<T> extends MediaHTMLAttributes<T> {
49
height?: number | string | undefined;
@@ -39,11 +44,13 @@ export interface PreviewProps {
3944
}
4045

4146
export interface Config {
42-
html?: Record<string, unknown>;
43-
hls?: Record<string, unknown>;
4447
dash?: Record<string, unknown>;
48+
hls?: HlsVideoElement['config'];
49+
html?: Record<string, unknown>;
4550
mux?: Record<string, unknown>;
46-
youtube?: Record<string, unknown>;
47-
vimeo?: Record<string, unknown>;
51+
spotify?: SpotifyAudioElement['config'];
52+
twitch?: TwitchVideoElement['config'];
53+
vimeo?: VimeoVideoElement['config'];
4854
wistia?: Record<string, unknown>;
55+
youtube?: YouTubeVideoElement['config'];
4956
}

0 commit comments

Comments
 (0)