test: add test for staticMethods

src/lib/SveltePlayer.svelte

@@ -1,3 +1,36 @@
+<script lang="ts" context="module">
+	import type { Player as PlayerType } from './players/types';
+	import players from './players';
+
+	const customPlayers: PlayerType[] = [];
+
+	export function addCustomPlayer(player: PlayerType) {
+		customPlayers.push(player);
+	}
+
+	export function removeCustomPlayers() {
+		customPlayers.length = 0;
+	}
+
+	export function canPlay(url: PlayerUrl) {
+		for (const Player of [...customPlayers, ...players]) {
+			if (Player.canPlay(url)) {
+				return true;
+			}
+		}
+		return false;
+	}
+
+	export function canEnablePIP(url: PlayerUrl) {
+		for (const Player of [...customPlayers, ...players]) {
+			if (Player.canEnablePIP && Player.canEnablePIP(url)) {
+				return true;
+			}
+		}
+		return false;
+	}
+</script>
+
 <script lang="ts">
 	import type { PlayerMediaRef, SeekToType, SveltePlayerDispatcher } from './types';
 	import type { RecursivePartial } from './players/utility.types';
@@ -13,7 +46,6 @@
 	import merge from 'deepmerge';
 	import memoize from 'memoize-one';
 	import Player from './PlayerMedia.svelte';
-	import players from './players';
 	import Preview from './Preview.svelte';
 	import { defaultConfig } from './props';
 
@@ -44,15 +76,6 @@
 
 	let playerRef: PlayerMediaRef;
 
-	export function canEnablePIP(url: PlayerUrl) {
-		for (const Player of [...players]) {
-			if (Player.canEnablePIP && Player.canEnablePIP(url)) {
-				return true;
-			}
-		}
-		return false;
-	}
-
 	$: showPreviewState = !!light;
 
 	function handleClickPreview(e: Event) {
@@ -138,7 +161,7 @@
 		</Preview>
 	{/if}
 {:else}
-	{#each players as player}
+	{#each [...customPlayers, ...players] as player}
 		{#if player.canPlay(url)}
 			<Player
 				{url}

src/lib/players/index.ts

@@ -19,6 +19,7 @@ import { supportsWebKitPresentationMode } from './utils';
 const players: Player[] = [
 	{
 		key: 'youtube',
+		name: 'YouTube',
 		canPlay: canPlayYoutube,
 		canEnablePIP: undefined,
 		loopOnEnded: undefined,
@@ -29,6 +30,7 @@ const players: Player[] = [
 	},
 	{
 		key: 'soundcloud',
+		name: 'SoundCloud',
 		canPlay: canPlaySoundCloud,
 		canEnablePIP: undefined,
 		loopOnEnded: true,
@@ -39,6 +41,7 @@ const players: Player[] = [
 	},
 	{
 		key: 'vimeo',
+		name: 'Vimeo',
 		canPlay: canPlayVimeo,
 		canEnablePIP: undefined,
 		loopOnEnded: undefined,
@@ -49,6 +52,7 @@ const players: Player[] = [
 	},
 	{
 		key: 'facebook',
+		name: 'Facebook',
 		canPlay: canPlayFacebook,
 		canEnablePIP: undefined,
 		loopOnEnded: true,
@@ -59,6 +63,7 @@ const players: Player[] = [
 	},
 	{
 		key: 'streamable',
+		name: 'Streamable',
 		canPlay: canPlayStreamable,
 		canEnablePIP: undefined,
 		loopOnEnded: undefined,
@@ -69,6 +74,7 @@ const players: Player[] = [
 	},
 	{
 		key: 'wistia',
+		name: 'Wistia',
 		canPlay: canPlayWistia,
 		canEnablePIP: undefined,
 		loopOnEnded: true,
@@ -79,6 +85,7 @@ const players: Player[] = [
 	},
 	{
 		key: 'twitch',
+		name: 'Twitch',
 		canPlay: canPlayTwitch,
 		canEnablePIP: undefined,
 		loopOnEnded: true,
@@ -89,6 +96,7 @@ const players: Player[] = [
 	},
 	{
 		key: 'dailymotion',
+		name: 'DailyMotion',
 		canPlay: canPlayDailyMotion,
 		canEnablePIP: undefined,
 		loopOnEnded: true,
@@ -99,6 +107,7 @@ const players: Player[] = [
 	},
 	{
 		key: 'mixcloud',
+		name: 'Mixcloud',
 		canPlay: canPlayMixcloud,
 		canEnablePIP: undefined,
 		loopOnEnded: true,
@@ -109,6 +118,7 @@ const players: Player[] = [
 	},
 	{
 		key: 'vidyard',
+		name: 'Vidyard',
 		canPlay: canPlayVidyard,
 		canEnablePIP: undefined,
 		loopOnEnded: undefined,
@@ -119,6 +129,7 @@ const players: Player[] = [
 	},
 	{
 		key: 'kaltura',
+		name: 'Kaltura',
 		canPlay: canPlayKaltura,
 		canEnablePIP: undefined,
 		loopOnEnded: undefined,
@@ -129,6 +140,7 @@ const players: Player[] = [
 	},
 	{
 		key: 'file',
+		name: 'FilePlayer',
 		canPlay: canPlayFile,
 		loopOnEnded: undefined,
 		forceLoad: undefined,
@@ -146,6 +158,7 @@ const players: Player[] = [
 	},
 	{
 		key: 'not-implemented',
+		name: 'NotImplemented',
 		loopOnEnded: undefined,
 		forceLoad: undefined,
 		canPlay() {

src/lib/players/types.ts

@@ -52,20 +52,21 @@ export type PlayerInternalPlayer = Omit<FileInternalPlayer, 'player'> & {
 
 export type PlayerGetPlayerKey = keyof PlayerInternalPlayer;
 
-export type PlayerKey =
-	| 'youtube'
-	| 'soundcloud'
-	| 'vimeo'
-	| 'facebook'
-	| 'streamable'
-	| 'wistia'
-	| 'twitch'
-	| 'dailymotion'
-	| 'mixcloud'
-	| 'vidyard'
-	| 'kaltura'
-	| 'file'
-	| 'not-implemented';
+export type PlayerConfig = {
+	youtube: YouTubeConfig;
+	soundcloud: SoundCloudConfig;
+	vimeo: ViemoConfig;
+	facebook: FacebookConfig;
+	streamable: undefined;
+	wistia: WistiaConfig;
+	twitch: TwitchConfig;
+	dailymotion: DailyMotionConfig;
+	mixcloud: MixcloudConfig;
+	vidyard: VidyardConfig;
+	kaltura: undefined;
+	file: FileConfig;
+	'not-implemented': NotImplementedConfig;
+};
 
 export type PlayerUrl = string | YouTubeUrl | FileUrl;
 
@@ -111,22 +112,6 @@ export type PlayerDispatcher = {
 	loaded: undefined;
 };
 
-export type PlayerConfig = {
-	youtube: YouTubeConfig;
-	soundcloud: SoundCloudConfig;
-	vimeo: ViemoConfig;
-	facebook: FacebookConfig;
-	streamable: undefined;
-	wistia: WistiaConfig;
-	twitch: TwitchConfig;
-	dailymotion: DailyMotionConfig;
-	mixcloud: MixcloudConfig;
-	vidyard: VidyardConfig;
-	kaltura: undefined;
-	file: FileConfig;
-	'not-implemented': NotImplementedConfig;
-};
-
 export type PlayerConfigKey = keyof PlayerConfig;
 
 export type PlayerConfigObject = PlayerConfig[PlayerConfigKey];
@@ -175,7 +160,8 @@ export type PlayerRef = {
 export type PlayerComponent = Constructor<SvelteComponent<Partial<PlayerProps>> & PlayerRef>;
 
 export type Player = {
-	key: PlayerKey;
+	key: PlayerConfigKey;
+	name: string;
 	loopOnEnded?: boolean;
 	forceLoad?: boolean;
 	canPlay(url: PlayerUrl): boolean;

src/lib/types.ts

@@ -1,9 +1,4 @@
-import type {
-	PlayerDispatcher,
-	PlayerUrl,
-	PlayerInternalPlayer,
-	PlayerGetPlayerKey
-} from './players/types';
+import type { PlayerDispatcher, PlayerInternalPlayer, PlayerGetPlayerKey } from './players/types';
 
 export type SeekToType = 'seconds' | 'fraction';
 
@@ -21,7 +16,6 @@ export type PreviewDispatcher = {
 };
 
 export type SveltePlayerRef = PlayerMediaRef & {
-	canEnablePIP(url: PlayerUrl): boolean;
 	showPreview(): void;
 };
 

src/routes/+page.svelte

@@ -2,7 +2,7 @@
 	import type { SveltePlayerRef } from '../lib/types';
 	import type { OnProgressProps, PlayerUrl } from '../lib/players/types';
 
-	import SveltePlayer from '../lib/SveltePlayer.svelte';
+	import SveltePlayer, { canPlay } from '../lib/SveltePlayer.svelte';
 	import LoadButton from './LoadButton.svelte';
 	import Duration from './Duration.svelte';
 	import screenfull from 'screenfull';
@@ -166,7 +166,7 @@
 								Show preview
 							</button>
 						{/if}
-						{#if playerRef !== undefined && playerRef.canEnablePIP(url)}
+						{#if canPlay(url)}
 							<label>
 								<input type="checkbox" bind:checked={pip} />
 								{!pip ? 'Disable PiP' : 'Enable PiP'}

src/test/SveltePlayer/staticMethods.test.ts

@@ -0,0 +1,40 @@
+import { canPlay, addCustomPlayer, removeCustomPlayers } from '../../lib/SveltePlayer.svelte';
+
+import { test } from 'vitest';
+
+test('canPlay()', function (t) {
+	t.expect(canPlay('https://www.youtube.com/watch?v=oUFJJNQGwhk')).toStrictEqual(true);
+	t.expect(canPlay('https://youtube.com/shorts/370kwJ-x5TY?feature=share')).toStrictEqual(true);
+	t.expect(canPlay('https://soundcloud.com/miami-nights-1984/accelerated')).toStrictEqual(true);
+	t.expect(canPlay('https://www.facebook.com/facebook/videos/10153231379946729')).toStrictEqual(
+		true
+	);
+	t.expect(canPlay('https://vimeo.com/90509568')).toStrictEqual(true);
+	t.expect(canPlay('https://www.twitch.tv/videos/106400740')).toStrictEqual(true);
+	t.expect(canPlay('https://streamable.com/moo')).toStrictEqual(true);
+	t.expect(canPlay('https://home.wistia.com/medias/e4a27b971d')).toStrictEqual(true);
+	t.expect(canPlay('https://www.dailymotion.com/video/x5e9eog')).toStrictEqual(true);
+	t.expect(canPlay('https://www.mixcloud.com/mixcloud/meet-the-curators')).toStrictEqual(true);
+	t.expect(canPlay('http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4')).toStrictEqual(true);
+	t.expect(canPlay('http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4#t=1')).toStrictEqual(true);
+	t.expect(canPlay('http://example.com/random/path')).toStrictEqual(false);
+});
+
+// TODO: check if player rendered
+test('addCustomPlayer()', async (t) => {
+	t.expect.assertions(2);
+	addCustomPlayer({
+		key: 'not-implemented',
+		name: 'CustomPlayer',
+		canPlay(url) {
+			return /example\.com/.test(String(url));
+		},
+		loadComponent() {
+			return import('../../lib/players/NotImplemented.svelte');
+		}
+	});
+
+	t.expect(canPlay('http://example.com/random/path')).toStrictEqual(true);
+	removeCustomPlayers();
+	t.expect(canPlay('http://example.com/random/path')).toStrictEqual(false);
+});

src/test/players/FilePlayer.test.ts

@@ -52,6 +52,7 @@ afterAll(function () {
 });
 
 test('listeners', async function (t) {
+	t.expect.assertions(4);
 	const addListeners = vi.fn();
 	const removeListeners = vi.fn();
 	const instance = new FilePlayerSvelte({
@@ -904,6 +905,7 @@ test('auto width/height', function (t) {
 });
 
 test('clear srcObject on url change', async function (t) {
+	t.expect.assertions(2);
 	const url = new window.MediaStream();
 	const instance = new FilePlayerSvelte({
 		target: document.body,