diff --git a/src/util/platform.ts b/src/util/platform.ts index 65a67d9101d2..1a0d61e07797 100644 --- a/src/util/platform.ts +++ b/src/util/platform.ts @@ -1,4 +1,5 @@ -import type { GlobalDoc, GlobalVersion } from '@docusaurus/plugin-content-docs/client'; +import { type GlobalDoc, type GlobalVersion, useActivePluginAndVersion } from '@docusaurus/plugin-content-docs/client'; +import { useBaseUrlUtils } from '@docusaurus/useBaseUrl'; /** * The names of SDK platforms. @@ -19,16 +20,23 @@ interface PlatformDescription { label: string; shortLabel?: string; description: string; + gettingStartedDoc: string; icon: string; minVersion: number; } +interface PlatformDescriptionWithUrl extends PlatformDescription { + baseUrl: string; + gettingStartedDocUrl: string; +} + const theoplayerPlatforms: readonly PlatformDescription[] = [ { platform: 'web', label: 'THEOplayer Web SDK', shortLabel: 'Web SDK', description: 'For desktop and mobile web browsers, and smart TVs like Tizen and WebOS', + gettingStartedDoc: 'getting-started/sdks/web/getting-started', icon: 'web', minVersion: 1, }, @@ -37,6 +45,7 @@ const theoplayerPlatforms: readonly PlatformDescription[] = [ label: 'THEOplayer Android SDK', shortLabel: 'Android SDK', description: 'For smartphones, tablets and Android TVs', + gettingStartedDoc: 'getting-started/sdks/android/getting-started', icon: 'android', minVersion: 1, }, @@ -45,6 +54,7 @@ const theoplayerPlatforms: readonly PlatformDescription[] = [ label: 'THEOplayer iOS & tvOS SDK', shortLabel: 'iOS & tvOS SDK', description: 'For iPhone, iPad and Apple TV', + gettingStartedDoc: 'getting-started/sdks/ios/getting-started', icon: 'apple', minVersion: 1, }, @@ -53,6 +63,7 @@ const theoplayerPlatforms: readonly PlatformDescription[] = [ label: 'THEOplayer React Native SDK', shortLabel: 'React Native SDK', description: 'For cross-platform apps targeting web, Android and iOS', + gettingStartedDoc: 'getting-started/frameworks/react-native/getting-started', icon: 'react', minVersion: 1, }, @@ -61,6 +72,7 @@ const theoplayerPlatforms: readonly PlatformDescription[] = [ label: 'THEOplayer Flutter SDK', shortLabel: 'Flutter SDK', description: 'For cross-platform apps targeting web, Android and iOS', + gettingStartedDoc: 'getting-started/frameworks/flutter/getting-started', icon: 'flutter', minVersion: 7, }, @@ -69,6 +81,7 @@ const theoplayerPlatforms: readonly PlatformDescription[] = [ label: 'THEOplayer Chromecast SDK', shortLabel: 'Chromecast SDK', description: 'For custom Chromecast receiver apps', + gettingStartedDoc: 'getting-started/sdks/chromecast/getting-started', icon: 'chromecast', minVersion: 1, }, @@ -77,6 +90,7 @@ const theoplayerPlatforms: readonly PlatformDescription[] = [ label: 'THEOplayer Roku SDK', shortLabel: 'Roku SDK', description: 'For Roku smart TVs', + gettingStartedDoc: 'getting-started/sdks/roku/getting-started', icon: 'roku', minVersion: 1, }, @@ -87,6 +101,7 @@ const openVideoUiPlatforms: readonly PlatformDescription[] = [ platform: 'web', label: 'Open Video UI for Web', description: 'For desktop and mobile web browsers using Web Components', + gettingStartedDoc: 'web/getting-started', icon: 'web', minVersion: 1, }, @@ -94,6 +109,7 @@ const openVideoUiPlatforms: readonly PlatformDescription[] = [ platform: 'android', label: 'Open Video UI for Android', description: 'For Android smartphones and tablets using Jetpack Compose', + gettingStartedDoc: 'android/getting-started', icon: 'android', minVersion: 1, }, @@ -101,6 +117,7 @@ const openVideoUiPlatforms: readonly PlatformDescription[] = [ platform: 'react', label: 'Open Video UI for React', description: 'For web apps using React components', + gettingStartedDoc: 'react/getting-started', icon: 'react', minVersion: 1, }, @@ -109,6 +126,7 @@ const openVideoUiPlatforms: readonly PlatformDescription[] = [ label: 'React Native THEOplayer UI', shortLabel: 'React Native UI', description: 'For cross-platform apps using React Native components', + gettingStartedDoc: 'react-native/getting-started', icon: 'react', minVersion: 1, }, @@ -133,6 +151,17 @@ export function getPlatformsByVersion(docsPluginId: string, version?: string): r return platforms; } +export function usePlatforms(): readonly PlatformDescriptionWithUrl[] { + const { activePlugin, activeVersion } = useActivePluginAndVersion({ failfast: true }); + const { withBaseUrl } = useBaseUrlUtils(); + if (!activeVersion) return []; + return getPlatformsByVersion(activePlugin.pluginId, activeVersion.name).map((desc) => ({ + ...desc, + baseUrl: withBaseUrl(`${activeVersion.path}/${desc.platform}`), + gettingStartedDocUrl: withBaseUrl(`${activeVersion.path}/${desc.gettingStartedDoc}`), + })); +} + type PlatformDescriptionsByName = Record; const theoplayerPlatformsByName = Object.fromEntries(theoplayerPlatforms.map((desc) => [desc.platform, desc])) as PlatformDescriptionsByName; const openVideoUiPlatformsByName = Object.fromEntries(openVideoUiPlatforms.map((desc) => [desc.platform, desc])) as PlatformDescriptionsByName; diff --git a/theoplayer/getting-started/index.mdx b/theoplayer/getting-started/index.mdx index 70cd89638e9d..f0b85addb311 100644 --- a/theoplayer/getting-started/index.mdx +++ b/theoplayer/getting-started/index.mdx @@ -13,20 +13,13 @@ Our dedicated guides help you get started right away. import DocCardList from '@theme/DocCardList'; -import useBaseUrl from '@docusaurus/useBaseUrl'; -import { getPlatformsByVersion } from '@site/src/util/platform'; +import { usePlatforms } from '@site/src/util/platform'; { - const href = - desc.platform === 'react-native' || desc.platform === 'flutter' - ? `theoplayer/getting-started/frameworks/${desc.platform}/getting-started` - : `theoplayer/getting-started/sdks/${desc.platform}/getting-started`; - return { - type: 'link', - label: desc.label, - customProps: { icon: desc.icon }, - href: useBaseUrl(href), - }; - })} + items={usePlatforms().map((desc) => ({ + type: 'link', + label: desc.label, + customProps: { icon: desc.icon }, + href: desc.gettingStartedDocUrl, + }))} /> diff --git a/theoplayer/index.mdx b/theoplayer/index.mdx index c1d76174201b..856d5cba19c7 100644 --- a/theoplayer/index.mdx +++ b/theoplayer/index.mdx @@ -8,16 +8,15 @@ sidebar_position: 1 import Intro from './shared/_intro.mdx'; import DocCardList from '@theme/DocCardList'; -import useBaseUrl from '@docusaurus/useBaseUrl'; -import { getPlatformsByVersion } from '@site/src/util/platform'; +import { usePlatforms } from '@site/src/util/platform'; ({ + items={usePlatforms().map((desc) => ({ type: 'link', label: desc.label, description: desc.description, customProps: { icon: desc.icon }, - href: useBaseUrl(`theoplayer/${desc.platform}`), + href: desc.baseUrl, }))} /> diff --git a/theoplayer_versioned_docs/version-v4/getting-started/index.mdx b/theoplayer_versioned_docs/version-v4/getting-started/index.mdx index e5c3cf3c7b3d..f0b85addb311 100644 --- a/theoplayer_versioned_docs/version-v4/getting-started/index.mdx +++ b/theoplayer_versioned_docs/version-v4/getting-started/index.mdx @@ -13,20 +13,13 @@ Our dedicated guides help you get started right away. import DocCardList from '@theme/DocCardList'; -import useBaseUrl from '@docusaurus/useBaseUrl'; -import { getPlatformsByVersion } from '@site/src/util/platform'; +import { usePlatforms } from '@site/src/util/platform'; { - const href = - desc.platform === 'react-native' || desc.platform === 'flutter' - ? `theoplayer/v4/getting-started/frameworks/${desc.platform}/getting-started` - : `theoplayer/v4/getting-started/sdks/${desc.platform}/getting-started`; - return { - type: 'link', - label: desc.label, - customProps: { icon: desc.icon }, - href: useBaseUrl(href), - }; - })} + items={usePlatforms().map((desc) => ({ + type: 'link', + label: desc.label, + customProps: { icon: desc.icon }, + href: desc.gettingStartedDocUrl, + }))} /> diff --git a/theoplayer_versioned_docs/version-v4/index.mdx b/theoplayer_versioned_docs/version-v4/index.mdx index 738c4b51294f..856d5cba19c7 100644 --- a/theoplayer_versioned_docs/version-v4/index.mdx +++ b/theoplayer_versioned_docs/version-v4/index.mdx @@ -8,16 +8,15 @@ sidebar_position: 1 import Intro from './shared/_intro.mdx'; import DocCardList from '@theme/DocCardList'; -import useBaseUrl from '@docusaurus/useBaseUrl'; -import { getPlatformsByVersion } from '@site/src/util/platform'; +import { usePlatforms } from '@site/src/util/platform'; ({ + items={usePlatforms().map((desc) => ({ type: 'link', label: desc.label, description: desc.description, customProps: { icon: desc.icon }, - href: useBaseUrl(`theoplayer/v4/${desc.platform}`), + href: desc.baseUrl, }))} /> diff --git a/theoplayer_versioned_docs/version-v6/getting-started/index.mdx b/theoplayer_versioned_docs/version-v6/getting-started/index.mdx index c09046916250..f0b85addb311 100644 --- a/theoplayer_versioned_docs/version-v6/getting-started/index.mdx +++ b/theoplayer_versioned_docs/version-v6/getting-started/index.mdx @@ -13,20 +13,13 @@ Our dedicated guides help you get started right away. import DocCardList from '@theme/DocCardList'; -import useBaseUrl from '@docusaurus/useBaseUrl'; -import { getPlatformsByVersion } from '@site/src/util/platform'; +import { usePlatforms } from '@site/src/util/platform'; { - const href = - desc.platform === 'react-native' || desc.platform === 'flutter' - ? `theoplayer/v6/getting-started/frameworks/${desc.platform}/getting-started` - : `theoplayer/v6/getting-started/sdks/${desc.platform}/getting-started`; - return { - type: 'link', - label: desc.label, - customProps: { icon: desc.icon }, - href: useBaseUrl(href), - }; - })} + items={usePlatforms().map((desc) => ({ + type: 'link', + label: desc.label, + customProps: { icon: desc.icon }, + href: desc.gettingStartedDocUrl, + }))} /> diff --git a/theoplayer_versioned_docs/version-v6/index.mdx b/theoplayer_versioned_docs/version-v6/index.mdx index 6861cf1ba84a..856d5cba19c7 100644 --- a/theoplayer_versioned_docs/version-v6/index.mdx +++ b/theoplayer_versioned_docs/version-v6/index.mdx @@ -8,16 +8,15 @@ sidebar_position: 1 import Intro from './shared/_intro.mdx'; import DocCardList from '@theme/DocCardList'; -import useBaseUrl from '@docusaurus/useBaseUrl'; -import { getPlatformsByVersion } from '@site/src/util/platform'; +import { usePlatforms } from '@site/src/util/platform'; ({ + items={usePlatforms().map((desc) => ({ type: 'link', label: desc.label, description: desc.description, customProps: { icon: desc.icon }, - href: useBaseUrl(`theoplayer/v6/${desc.platform}`), + href: desc.baseUrl, }))} /> diff --git a/theoplayer_versioned_docs/version-v7/getting-started/index.mdx b/theoplayer_versioned_docs/version-v7/getting-started/index.mdx index 70cd89638e9d..f0b85addb311 100644 --- a/theoplayer_versioned_docs/version-v7/getting-started/index.mdx +++ b/theoplayer_versioned_docs/version-v7/getting-started/index.mdx @@ -13,20 +13,13 @@ Our dedicated guides help you get started right away. import DocCardList from '@theme/DocCardList'; -import useBaseUrl from '@docusaurus/useBaseUrl'; -import { getPlatformsByVersion } from '@site/src/util/platform'; +import { usePlatforms } from '@site/src/util/platform'; { - const href = - desc.platform === 'react-native' || desc.platform === 'flutter' - ? `theoplayer/getting-started/frameworks/${desc.platform}/getting-started` - : `theoplayer/getting-started/sdks/${desc.platform}/getting-started`; - return { - type: 'link', - label: desc.label, - customProps: { icon: desc.icon }, - href: useBaseUrl(href), - }; - })} + items={usePlatforms().map((desc) => ({ + type: 'link', + label: desc.label, + customProps: { icon: desc.icon }, + href: desc.gettingStartedDocUrl, + }))} /> diff --git a/theoplayer_versioned_docs/version-v7/index.mdx b/theoplayer_versioned_docs/version-v7/index.mdx index c1d76174201b..856d5cba19c7 100644 --- a/theoplayer_versioned_docs/version-v7/index.mdx +++ b/theoplayer_versioned_docs/version-v7/index.mdx @@ -8,16 +8,15 @@ sidebar_position: 1 import Intro from './shared/_intro.mdx'; import DocCardList from '@theme/DocCardList'; -import useBaseUrl from '@docusaurus/useBaseUrl'; -import { getPlatformsByVersion } from '@site/src/util/platform'; +import { usePlatforms } from '@site/src/util/platform'; ({ + items={usePlatforms().map((desc) => ({ type: 'link', label: desc.label, description: desc.description, customProps: { icon: desc.icon }, - href: useBaseUrl(`theoplayer/${desc.platform}`), + href: desc.baseUrl, }))} /> diff --git a/theoplayer_versioned_docs/version-v8/getting-started/index.mdx b/theoplayer_versioned_docs/version-v8/getting-started/index.mdx index 70cd89638e9d..f0b85addb311 100644 --- a/theoplayer_versioned_docs/version-v8/getting-started/index.mdx +++ b/theoplayer_versioned_docs/version-v8/getting-started/index.mdx @@ -13,20 +13,13 @@ Our dedicated guides help you get started right away. import DocCardList from '@theme/DocCardList'; -import useBaseUrl from '@docusaurus/useBaseUrl'; -import { getPlatformsByVersion } from '@site/src/util/platform'; +import { usePlatforms } from '@site/src/util/platform'; { - const href = - desc.platform === 'react-native' || desc.platform === 'flutter' - ? `theoplayer/getting-started/frameworks/${desc.platform}/getting-started` - : `theoplayer/getting-started/sdks/${desc.platform}/getting-started`; - return { - type: 'link', - label: desc.label, - customProps: { icon: desc.icon }, - href: useBaseUrl(href), - }; - })} + items={usePlatforms().map((desc) => ({ + type: 'link', + label: desc.label, + customProps: { icon: desc.icon }, + href: desc.gettingStartedDocUrl, + }))} /> diff --git a/theoplayer_versioned_docs/version-v8/index.mdx b/theoplayer_versioned_docs/version-v8/index.mdx index c1d76174201b..856d5cba19c7 100644 --- a/theoplayer_versioned_docs/version-v8/index.mdx +++ b/theoplayer_versioned_docs/version-v8/index.mdx @@ -8,16 +8,15 @@ sidebar_position: 1 import Intro from './shared/_intro.mdx'; import DocCardList from '@theme/DocCardList'; -import useBaseUrl from '@docusaurus/useBaseUrl'; -import { getPlatformsByVersion } from '@site/src/util/platform'; +import { usePlatforms } from '@site/src/util/platform'; ({ + items={usePlatforms().map((desc) => ({ type: 'link', label: desc.label, description: desc.description, customProps: { icon: desc.icon }, - href: useBaseUrl(`theoplayer/${desc.platform}`), + href: desc.baseUrl, }))} /> diff --git a/theoplayer_versioned_docs/version-v9/getting-started/index.mdx b/theoplayer_versioned_docs/version-v9/getting-started/index.mdx index 70cd89638e9d..f0b85addb311 100644 --- a/theoplayer_versioned_docs/version-v9/getting-started/index.mdx +++ b/theoplayer_versioned_docs/version-v9/getting-started/index.mdx @@ -13,20 +13,13 @@ Our dedicated guides help you get started right away. import DocCardList from '@theme/DocCardList'; -import useBaseUrl from '@docusaurus/useBaseUrl'; -import { getPlatformsByVersion } from '@site/src/util/platform'; +import { usePlatforms } from '@site/src/util/platform'; { - const href = - desc.platform === 'react-native' || desc.platform === 'flutter' - ? `theoplayer/getting-started/frameworks/${desc.platform}/getting-started` - : `theoplayer/getting-started/sdks/${desc.platform}/getting-started`; - return { - type: 'link', - label: desc.label, - customProps: { icon: desc.icon }, - href: useBaseUrl(href), - }; - })} + items={usePlatforms().map((desc) => ({ + type: 'link', + label: desc.label, + customProps: { icon: desc.icon }, + href: desc.gettingStartedDocUrl, + }))} /> diff --git a/theoplayer_versioned_docs/version-v9/index.mdx b/theoplayer_versioned_docs/version-v9/index.mdx index c1d76174201b..856d5cba19c7 100644 --- a/theoplayer_versioned_docs/version-v9/index.mdx +++ b/theoplayer_versioned_docs/version-v9/index.mdx @@ -8,16 +8,15 @@ sidebar_position: 1 import Intro from './shared/_intro.mdx'; import DocCardList from '@theme/DocCardList'; -import useBaseUrl from '@docusaurus/useBaseUrl'; -import { getPlatformsByVersion } from '@site/src/util/platform'; +import { usePlatforms } from '@site/src/util/platform'; ({ + items={usePlatforms().map((desc) => ({ type: 'link', label: desc.label, description: desc.description, customProps: { icon: desc.icon }, - href: useBaseUrl(`theoplayer/${desc.platform}`), + href: desc.baseUrl, }))} />