diff --git a/src/common/components/VideoPlayer.tsx b/src/common/components/VideoPlayer.tsx
deleted file mode 100644
index ede540eb0..000000000
--- a/src/common/components/VideoPlayer.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import * as React from 'react';
-
-import type { YouTubePlayerProps } from 'react-player/youtube';
-
-
-type VideoPlayerProps = YouTubePlayerProps & {
- // make the player responsive
- responsive?: boolean;
- // set this to not set the full URL
- vimeoVideoId?: string;
- // set this to not set the full URL
- youTubeVideoId?: string;
-};
-
-const VideoPlayerDynamic = React.lazy(async () => {
-
- // dynamically import react-player (saves 7kb but still..)
- const { default: ReactPlayerVimeo } = await import('react-player/vimeo');
- const { default: ReactPlayerYouTube } = await import('react-player/youtube');
-
- return {
- default: (props: YouTubePlayerProps) => {
-
- const { responsive, youTubeVideoId, vimeoVideoId, ...baseProps } = props;
-
- // responsive patch
- if (responsive) {
- baseProps.width = '100%';
- baseProps.height = '100%';
- }
-
- // Vimeo Video ID
- if (props.vimeoVideoId)
- baseProps.url = `https://vimeo.com/${props.vimeoVideoId}`;
- if (baseProps.url?.indexOf('vimeo.') > 0)
- return ;
-
- // YouTube video ID
- if (youTubeVideoId)
- baseProps.url = `https://www.youtube.com/watch?v=${youTubeVideoId}`;
-
- // fallback to YouTube
- return ;
- },
- };
-});
-
-
-export function VideoPlayer(props: VideoPlayerProps) {
- return (
- Loading...}>
-
-
- );
-}
\ No newline at end of file
diff --git a/src/common/components/VideoPlayerVimeo.tsx b/src/common/components/VideoPlayerVimeo.tsx
new file mode 100644
index 000000000..71523aac8
--- /dev/null
+++ b/src/common/components/VideoPlayerVimeo.tsx
@@ -0,0 +1,45 @@
+import * as React from 'react';
+
+import type { VimeoPlayerProps as ReactPlayerVimeoProps } from 'react-player/vimeo';
+
+
+type VideoPlayerProps = ReactPlayerVimeoProps & {
+ // make the player responsive
+ responsive?: boolean;
+ // set this to not set the full URL
+ vimeoVideoId?: string;
+};
+
+const DynamicVimeoPlayer = React.lazy(async () => {
+
+ // dynamically import react-player (saves 7kb but still..)
+ const { default: ReactPlayerVimeo } = await import('react-player/vimeo');
+
+ return {
+ default: (props: ReactPlayerVimeoProps) => {
+
+ const { responsive, vimeoVideoId, ...baseProps } = props;
+
+ // responsive patch
+ if (responsive) {
+ baseProps.width = '100%';
+ baseProps.height = '100%';
+ }
+
+ // Vimeo Video ID
+ if (vimeoVideoId)
+ baseProps.url = `https://vimeo.com/${vimeoVideoId}`;
+
+ return ;
+ },
+ };
+});
+
+
+export function VideoPlayerVimeo(props: VideoPlayerProps) {
+ return (
+ Loading...}>
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/common/components/VideoPlayerYouTube.tsx b/src/common/components/VideoPlayerYouTube.tsx
new file mode 100644
index 000000000..92632f722
--- /dev/null
+++ b/src/common/components/VideoPlayerYouTube.tsx
@@ -0,0 +1,45 @@
+import * as React from 'react';
+
+import type { YouTubePlayerProps as ReactPlayerYouTubeProps } from 'react-player/youtube';
+
+
+type VideoPlayerProps = ReactPlayerYouTubeProps & {
+ // make the player responsive
+ responsive?: boolean;
+ // set this to not set the full URL
+ youTubeVideoId?: string;
+};
+
+const DynamicYouTubePlayer = React.lazy(async () => {
+
+ // dynamically import react-player (saves 7kb but still..)
+ const { default: ReactPlayerYouTube } = await import('react-player/youtube');
+
+ return {
+ default: (props: ReactPlayerYouTubeProps) => {
+
+ const { responsive, youTubeVideoId, ...baseProps } = props;
+
+ // responsive patch
+ if (responsive) {
+ baseProps.width = '100%';
+ baseProps.height = '100%';
+ }
+
+ // YouTube Video ID
+ if (youTubeVideoId)
+ baseProps.url = `https://www.youtube.com/watch?v=${youTubeVideoId}`;
+
+ return ;
+ },
+ };
+});
+
+
+export function VideoPlayerYouTube(props: VideoPlayerProps) {
+ return (
+ Loading...}>
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/modules/llms/vendors/lmstudio/LMStudioServiceSetup.tsx b/src/modules/llms/vendors/lmstudio/LMStudioServiceSetup.tsx
index 9c0203496..43e17a09e 100644
--- a/src/modules/llms/vendors/lmstudio/LMStudioServiceSetup.tsx
+++ b/src/modules/llms/vendors/lmstudio/LMStudioServiceSetup.tsx
@@ -10,7 +10,7 @@ import { FormInputKey } from '~/common/components/forms/FormInputKey';
import { InlineError } from '~/common/components/InlineError';
import { Link } from '~/common/components/Link';
import { SetupFormRefetchButton } from '~/common/components/forms/SetupFormRefetchButton';
-import { VideoPlayer } from '~/common/components/VideoPlayer';
+import { VideoPlayerYouTube } from '~/common/components/VideoPlayerYouTube';
import { useLlmUpdateModels } from '../../llm.client.hooks';
import { useServiceSetup } from '../useServiceSetup';
@@ -44,7 +44,7 @@ export function LMStudioServiceSetup(props: { serviceId: DModelsServiceId }) {
expandedVariant='solid'
startCollapsed
>
-
+