Integrate UI customization documentation into OptiView Player

.gitmodules

@@ -154,14 +154,14 @@
 	branch = main
     shallow = true
 [submodule "web-ui"]
-    path = open-video-ui/external/web-ui
+	path = theoplayer/external/web-ui
     url = https://github.com/THEOplayer/web-ui.git
     branch = main
 [submodule "android-ui"]
-    path = open-video-ui/external/android-ui
+	path = theoplayer/external/android-ui
     url = https://github.com/THEOplayer/android-ui.git
     branch = main
 [submodule "react-native-theoplayer-ui"]
-	path = open-video-ui/external/react-native-theoplayer-ui
+	path = theoplayer/external/react-native-theoplayer-ui
 	url = https://github.com/THEOplayer/react-native-theoplayer-ui.git
 	branch = main

.mdxlintignore

@@ -16,7 +16,5 @@ theolive_versioned_docs/*/api/
 # Submodules
 theoplayer/external/
 theoplayer_versioned_docs/*/external/
-open-video-ui/external/
-open-video-ui_versioned_docs/*/external/
 # Not part of the site
 .agents/

.prettierignore

@@ -28,5 +28,3 @@ theolive_versioned_docs/*/api/
 # Submodules
 theoplayer/external/
 theoplayer_versioned_docs/*/external/
-open-video-ui/external/
-open-video-ui_versioned_docs/*/external/

ads_versioned_docs/version-v1/getting-started/android.mdx

@@ -92,7 +92,7 @@ theoPlayerView.player.source = SourceDescription.Builder(
 
 ## Integrating with Open Video UI
 
-When using the [Open Video UI for Android](/open-video-ui/android/), you need to create and add the `TheoAdsIntegration` before creating your `DefaultUI` or `UIController`. You can then create an OptiView Ads-enabled source and set it as `player.source`:
+When using the [Open Video UI for Android](/theoplayer/ui/android/open-video-ui/), you need to create and add the `TheoAdsIntegration` before creating your `DefaultUI` or `UIController`. You can then create an OptiView Ads-enabled source and set it as `player.source`:
 
 ```kotlin
 import androidx.activity.compose.setContent

ads_versioned_docs/version-v1/getting-started/web.mdx

@@ -72,7 +72,7 @@ player.source = {
 
 ## Integrating with Open Video UI
 
-OptiView Ads works seamlessly together with [Open Video UI for Web](/open-video-ui/web/). You can pass your OptiView Ads-enabled source directly to the UI's `source` property:
+OptiView Ads works seamlessly together with [Open Video UI for Web](/theoplayer/ui/web/open-video-ui/). You can pass your OptiView Ads-enabled source directly to the UI's `source` property:
 
 ```html
 <theoplayer-default-ui></theoplayer-default-ui>

docusaurus.config.ts

@@ -9,7 +9,6 @@ import type * as ClientRedirectsPlugin from '@docusaurus/plugin-client-redirects
 import type * as OpenApiPlugin from 'docusaurus-plugin-openapi-docs/src/types';
 import type { Props as PlatformSidebarNavbarItemProps } from './src/theme/NavbarItem/PlatformSidebarNavbarItem';
 import type { Configuration as WebpackConfiguration } from 'webpack';
-import { version as webUiVersion } from './open-video-ui/external/web-ui/package.json';
 import sidebarItemsGenerator from './src/plugin/sidebarItemsGenerator';
 import remarkLinkRewrite from './src/plugin/remarkLinkRewrite';
 import openApiLinkRewrite from './src/plugin/openApiLinkRewrite';
@@ -265,23 +264,6 @@ const config: Config = {
         },
       } satisfies OpenApiPlugin.PluginOptions,
     ],
-    [
-      '@docusaurus/plugin-content-docs',
-      {
-        ...docsConfigBase,
-        id: 'open-video-ui',
-        path: 'open-video-ui',
-        routeBasePath: '/open-video-ui',
-        sidebarPath: './sidebarsOpenVideoUI.ts',
-        lastVersion: 'current',
-        versions: {
-          current: {
-            label: webUiVersion,
-          },
-        },
-        sidebarItemsGenerator,
-      } satisfies DocsPlugin.Options,
-    ],
     [
       '@docusaurus/plugin-content-docs',
       {
@@ -435,7 +417,31 @@ const config: Config = {
       {
         redirects: [...redirectsMillicast, ...redirectsAds, ...redirectsTHEOPlayer],
         createRedirects(existingPath) {
-          if (existingPath.startsWith('/theoplayer/how-to-guides/web/uplynk/')) {
+          const uiPathMatch = existingPath.match(/^\/theoplayer\/ui\/(web|android|ios|react-native|roku)(\/.*)?$/);
+          if (uiPathMatch) {
+            const [, platform, suffix = ''] = uiPathMatch;
+            const oldPrefix = `/theoplayer/how-to-guides/${platform}/ui`;
+            const oldPaths = [`${oldPrefix}${suffix}`];
+            if (suffix === '' || suffix === '/' || ['/open-video-ui/', '/open-video-ui/react/', '/chromeless/', '/default-ui/'].includes(suffix)) {
+              oldPaths.push(`${oldPrefix}${suffix}${suffix.endsWith('/') ? '' : '/'}introduction/`);
+            }
+            if (platform === 'web' && suffix.startsWith('/open-video-ui/react/') && suffix !== '/open-video-ui/react/') {
+              oldPaths.push(suffix);
+            } else if (
+              platform === 'web' &&
+              suffix.startsWith('/open-video-ui/') &&
+              !suffix.startsWith('/open-video-ui/react/') &&
+              suffix !== '/open-video-ui/' &&
+              suffix !== '/open-video-ui/getting-started/'
+            ) {
+              oldPaths.push(suffix.replace('/open-video-ui/', '/open-video-ui/web/'));
+            } else if (platform === 'android' && suffix.startsWith('/open-video-ui/') && suffix !== '/open-video-ui/') {
+              oldPaths.push(suffix.replace('/open-video-ui/', '/open-video-ui/android/'));
+            } else if (platform === 'react-native' && suffix.startsWith('/open-video-ui/') && suffix !== '/open-video-ui/') {
+              oldPaths.push(suffix.replace('/open-video-ui/', '/open-video-ui/react-native/'));
+            }
+            return oldPaths;
+          } else if (existingPath.startsWith('/theoplayer/how-to-guides/web/uplynk/')) {
             return [existingPath.replace('/theoplayer/how-to-guides/web/uplynk/', '/theoplayer/how-to-guides/miscellaneous/verizon-media/')];
           } else if (existingPath.startsWith('/theolive/v1/api/')) {
             return [existingPath.replace('/theolive/v1/api/', '/theolive/api/')];
@@ -454,7 +460,7 @@ const config: Config = {
         // Generates /llms.txt, /llms-full.txt, /<product>/llms.txt, /<product>/llms-full.txt and a .md twin of every page
         llmsTxt: {
           siteTitle: 'Dolby OptiView Documentation',
-          siteDescription: 'Developer documentation for Dolby OptiView Player, Open Video UI, Live, Real-time, Ads and Ad Engine.',
+          siteDescription: 'Developer documentation for Dolby OptiView Player, Live, Real-time, Ads and Ad Engine.',
           content: {
             enableMarkdownFiles: true,
             relativePaths: false,
@@ -478,7 +484,7 @@ const config: Config = {
             slug: 'theoplayer',
             title: 'Dolby OptiView Player',
             description:
-              'Dolby OptiView Player (formerly THEOplayer) enables you to deploy cutting-edge video playback experiences, efficiently and on any device, including on web, mobile, smart TVs, set-top-boxes and gaming consoles.',
+              "Dolby OptiView Player (formerly THEOplayer) enables you to deploy cutting-edge video playback experiences on any device. Use the basic default UI, customize your player with Open Video UI's ready-made components, or build a complete UI from scratch with the chromeless player.",
             platformSidebars: {
               web: 'Web SDK',
               android: 'Android SDK',
@@ -489,18 +495,6 @@ const config: Config = {
               roku: 'Roku SDK',
             },
           },
-          {
-            slug: 'open-video-ui',
-            title: 'Open Video UI',
-            description:
-              'The Open Video UI provides component libraries for building a world-class video player experience powered by the OptiView Player SDK, with dedicated libraries for web, Android and React Native.',
-            platformSidebars: {
-              web: 'Web',
-              android: 'Android',
-              react: 'React',
-              'react-native': 'React Native',
-            },
-          },
           {
             slug: 'theolive',
             title: 'Dolby OptiView Live',
@@ -529,12 +523,15 @@ const config: Config = {
       } satisfies LlmsTxtOptions,
     ],
     [
-      (_context, options: { webpack: (isServer: boolean) => WebpackConfiguration }) => ({
-        name: 'webpack-plugin',
-        configureWebpack(_config, isServer) {
-          return options.webpack(isServer);
-        },
-      }),
+      (_context: unknown, pluginOptions: unknown) => {
+        const options = pluginOptions as { webpack: (isServer: boolean) => WebpackConfiguration };
+        return {
+          name: 'webpack-plugin',
+          configureWebpack(_config: WebpackConfiguration, isServer: boolean) {
+            return options.webpack(isServer);
+          },
+        };
+      },
       {
         webpack: (isServer: boolean): WebpackConfiguration => ({
           optimization: {
@@ -559,26 +556,38 @@ const config: Config = {
       const parsedDocPath = parseDocPath(params.filePath)!;
       const { docPluginId } = parsedDocPath;
       let { docPath } = parsedDocPath;
+      const uiDocMatch = docPath.match(/^how-to-guides\/(web|android|ios|react-native|roku)\/ui\/(.+)\.mdx?$/);
+      if (docPluginId === 'theoplayer' && uiDocMatch) {
+        const [, platform, path] = uiDocMatch;
+        const uiPath = path === 'introduction' ? '' : path.replace(/\/introduction$/, '');
+        frontMatter.slug = `/ui/${platform}/${uiPath}`;
+      }
+      if (docPath.startsWith('external/web-ui/') && typeof frontMatter.slug === 'string') {
+        frontMatter.slug = frontMatter.slug
+          .replace(/^\/web(?=\/|$)/, '/ui/web/open-video-ui')
+          .replace(/^\/react(?=\/|$)/, '/ui/web/open-video-ui/react');
+      }
       if (!frontMatter.slug && docPath.startsWith('external/')) {
         // Add a slug to all external doc pages
         frontMatter.slug = docPath
           // Remove extension
           .replace('external/', '')
           .replace(/\.mdx?$/, '')
           // Map external projects to desired URLs
-          .replace('web-ui/docs/', '/web/')
-          .replace('android-ui/docs/', '/android/')
-          .replace('web-ui/CHANGELOG', '/web/changelog')
-          .replace('web-ui/react/CHANGELOG', '/react/changelog')
-          .replace('android-ui/CHANGELOG', '/android/changelog')
+          .replace('web-ui/docs/react/', '/ui/web/open-video-ui/react/')
+          .replace('web-ui/docs/', '/ui/web/open-video-ui/')
+          .replace('android-ui/docs/', '/ui/android/open-video-ui/')
+          .replace('web-ui/react/CHANGELOG', '/ui/web/open-video-ui/react/changelog')
+          .replace('web-ui/CHANGELOG', '/ui/web/open-video-ui/changelog')
+          .replace('android-ui/CHANGELOG', '/ui/android/open-video-ui/changelog')
           .replace('react-native-theoplayer/CHANGELOG', '/changelog/react-native')
           .replace('react-native-theoplayer/doc/', '/getting-started/frameworks/react-native/')
           .replace('flutter-theoplayer-sdk/flutter_theoplayer_sdk/flutter_theoplayer_sdk/', 'flutter-theoplayer-sdk/flutter_theoplayer_sdk/')
           .replace('flutter-theoplayer-sdk/flutter_theoplayer_sdk/CHANGELOG', '/flutter/changelog')
           .replace('flutter-theoplayer-sdk/flutter_theoplayer_sdk/README', '/getting-started/frameworks/flutter/getting-started')
           .replace('flutter-theoplayer-sdk/doc/', '/flutter/guides/')
-          .replace('react-native-theoplayer-ui/CHANGELOG', '/react-native/changelog')
-          .replace('react-native-theoplayer-ui/doc/', '/react-native/')
+          .replace('react-native-theoplayer-ui/CHANGELOG', '/ui/react-native/open-video-ui/changelog')
+          .replace('react-native-theoplayer-ui/doc/', '/ui/react-native/open-video-ui/')
           .replace(/react-native-connectors\/([^/]+)\/CHANGELOG/, '/connectors/react-native/$1/changelog')
           .replace(/react-native-connectors\/([^/]+)\/README/, '/connectors/react-native/$1/getting-started')
           .replace(/react-native-connectors\/([^/]+)\/doc\//, '/connectors/react-native/$1/')
@@ -599,7 +608,7 @@ const config: Config = {
         // Fix changelog titles
         frontMatter.title ??= 'Changelog';
         if (!frontMatter.description) {
-          if (docPluginId === 'open-video-ui') {
+          if (docPath.includes('web-ui/') || docPath.includes('android-ui/') || docPath.includes('react-native-theoplayer-ui/')) {
             frontMatter.description = "Find out what's new in Open Video UI.";
           } else if (docPluginId === 'theoplayer' && !docPath.includes('connector')) {
             frontMatter.description = "Find out what's new in the OptiView Player.";
@@ -617,7 +626,7 @@ const config: Config = {
       } else if (docPath.endsWith('readme.md')) {
         frontMatter.title ??= 'Getting started';
         if (!frontMatter.description) {
-          if (docPluginId === 'open-video-ui') {
+          if (docPath.includes('web-ui/') || docPath.includes('android-ui/') || docPath.includes('react-native-theoplayer-ui/')) {
             frontMatter.description = 'Start building your UI in just a few minutes!';
           } else if (docPath.includes('connector')) {
             frontMatter.description = 'Set up your connector in just a few minutes!';
@@ -631,7 +640,7 @@ const config: Config = {
     },
   },
 
-  staticDirectories: ['static', 'theoplayer/static', 'ads/static', 'adengine/static', 'open-video-ui/external/web-ui/docs/static'],
+  staticDirectories: ['static', 'theoplayer/static', 'ads/static', 'adengine/static', 'theoplayer/external/web-ui/docs/static'],
 
   themeConfig: {
     // TODO OpenGraph image for OptiView?
@@ -657,27 +666,13 @@ const config: Config = {
       },
       items: [
         {
-          type: 'dropdown',
+          type: 'custom-platformSidebar',
+          docsPluginId: 'theoplayer',
           label: 'Player',
           href: '/theoplayer',
+          activeBasePath: '/theoplayer',
           position: 'left',
-          items: [
-            {
-              type: 'custom-platformSidebar',
-              docsPluginId: 'theoplayer',
-              label: 'OptiView Player',
-              href: '/theoplayer',
-              activeBasePath: '/theoplayer',
-            } satisfies PlatformSidebarNavbarItemProps,
-            {
-              type: 'custom-platformSidebar',
-              docsPluginId: 'open-video-ui',
-              label: 'Open Video UI',
-              href: '/open-video-ui',
-              activeBasePath: '/open-video-ui',
-            } satisfies PlatformSidebarNavbarItemProps,
-          ],
-        },
+        } satisfies PlatformSidebarNavbarItemProps,
         {
           type: 'dropdown',
           label: 'Ads',
@@ -762,6 +757,9 @@ const config: Config = {
       apiKey: '415e178afdd1c3ea819b42fb9a6a1c99',
       indices: [{ name: 'theoplayer' }],
       contextualSearch: true,
+      searchPage: {
+        path: 'search',
+      },
       replaceSearchResultPathname: {
         from: '/docs/',
         to: process.env.DOCUSAURUS_BASE_URL || '/docs/',
@@ -818,7 +816,11 @@ function isMarkdownUrl(href: string): boolean {
 }
 
 function externalDocUrl(docPath: string): string {
-  const [, projectName, externalDocPath] = docPath.match(/\bexternal\/([^/]+)\/(.+)$/);
+  const match = docPath.match(/\bexternal\/([^/]+)\/(.+)$/);
+  if (!match) {
+    throw new Error(`Invalid external documentation path: ${docPath}`);
+  }
+  const [, projectName, externalDocPath] = match;
   return `https://github.com/THEOplayer/${projectName}/blob/-/${externalDocPath}`;
 }