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 > - +