Fix Players

src/common/components/VideoPlayer.tsx

@@ -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 <ReactPlayerVimeo {...baseProps} />;
-
-      // YouTube video ID
-      if (youTubeVideoId)
-        baseProps.url = `https://www.youtube.com/watch?v=${youTubeVideoId}`;
-
-      // fallback to YouTube
-      return <ReactPlayerYouTube {...baseProps} />;
-    },
-  };
-});
-
-
-export function VideoPlayer(props: VideoPlayerProps) {
-  return (
-    <React.Suspense fallback={<div>Loading...</div>}>
-      <VideoPlayerDynamic {...props} />
-    </React.Suspense>
-  );
-}

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 <ReactPlayerVimeo {...baseProps} />;
+    },
+  };
+});
+
+
+export function VideoPlayerVimeo(props: VideoPlayerProps) {
+  return (
+    <React.Suspense fallback={<div>Loading...</div>}>
+      <DynamicVimeoPlayer {...props} />
+    </React.Suspense>
+  );
+}

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 <ReactPlayerYouTube {...baseProps} />;
+    },
+  };
+});
+
+
+export function VideoPlayerYouTube(props: VideoPlayerProps) {
+  return (
+    <React.Suspense fallback={<div>Loading...</div>}>
+      <DynamicYouTubePlayer {...props} />
+    </React.Suspense>
+  );
+}

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
     >
-      <VideoPlayer width='100%' youTubeVideoId='MqXzxVokMDk' playing={true} />
+      <VideoPlayerYouTube width='100%' youTubeVideoId='MqXzxVokMDk' playing={true} />
     </ExpanderAccordion>
 
     <Typography level='body-sm'>