THEOplayer · MattiasBuelens · Mar 19, 2024 · Mar 13, 2024 · Mar 13, 2024 · Mar 13, 2024
@@ -97,7 +97,7 @@ const config: Config = {
           v4: {
             label: fs.readFileSync(path.join(__dirname, 'theoplayer_versioned_docs/version-v4/version.txt'), 'utf8').trim(),
             banner: 'unmaintained',
-            noIndex: true
+            noIndex: true,
           },
         },
       } satisfies DocsPlugin.Options,
@@ -299,7 +299,7 @@ const config: Config = {
     prism: {
       theme: prismThemes.github,
       darkTheme: prismThemes.dracula,
-      additionalLanguages: ['java', 'groovy', 'objectivec', 'brightscript'],
+      additionalLanguages: ['java', 'groovy', 'objectivec', 'brightscript', 'bash'],
     },
   } satisfies Preset.ThemeConfig,
 };

@@ -1,5 +1,7 @@
 ---
+description: Start building your UI in just a few minutes!
 sidebar_position: 1
+sidebar_custom_props: { 'icon': '🚀' }
 ---
 
 # Getting started

@@ -26,23 +26,35 @@ const sidebars: SidebarsConfig = {
         title: 'Open Video UI for Web',
       },
       items: [
-        { type: 'doc', id: 'web/getting-started' },
+        { type: 'doc', id: 'external/web-ui/docs/getting-started' },
         {
           type: 'category',
           label: 'How-to guides',
+          description: 'Learn how to integrate our rich set of features into your own UI.',
+          customProps: {
+            icon: '📖',
+          },
           link: { type: 'generated-index', slug: 'web/guides' },
           items: [{ type: 'autogenerated', dirName: 'external/web-ui/docs/guides' }],
         },
         {
           type: 'category',
           label: 'Examples',
+          description: 'Find inspiration for your UI from our live demos!',
+          customProps: {
+            icon: '🛝',
+          },
           link: { type: 'generated-index', slug: 'web/examples' },
           items: [{ type: 'autogenerated', dirName: 'external/web-ui/docs/examples' }],
         },
         { type: 'doc', id: 'external/web-ui/CHANGELOG' },
         {
           type: 'link',
           label: 'API reference',
+          description: 'Discover all components provided by Open Video UI for Web.',
+          customProps: {
+            icon: '*️⃣',
+          },
           href: 'https://theoplayer.github.io/web-ui/api/',
         },
       ],
@@ -60,19 +72,37 @@ const sidebars: SidebarsConfig = {
         title: 'Open Video UI for React',
       },
       items: [
-        { type: 'doc', id: 'react/getting-started' },
+        { type: 'doc', id: 'external/web-ui/docs/react/getting-started' },
         {
           type: 'category',
           label: 'How-to guides',
+          description: 'Learn how to integrate our rich set of features into your own UI.',
+          customProps: {
+            icon: '📖',
+          },
           link: { type: 'generated-index', slug: 'react/guides' },
           items: [
             // { type: 'autogenerated', dirName: 'external/web-ui/docs/guides' }
           ],
         },
+        {
+          type: 'category',
+          label: 'Examples',
+          description: 'Find inspiration for your UI from our live demos!',
+          customProps: {
+            icon: '🛝',
+          },
+          link: { type: 'generated-index', slug: 'react/examples' },
+          items: [{ type: 'autogenerated', dirName: 'external/web-ui/docs/react/examples' }],
+        },
         { type: 'doc', id: 'external/web-ui/react/CHANGELOG' },
         {
           type: 'link',
           label: 'API reference',
+          description: 'Discover all components and hooks provided by Open Video UI for React.',
+          customProps: {
+            icon: '*️⃣',
+          },
           href: 'https://theoplayer.github.io/web-ui/react-api/',
         },
       ],
@@ -94,13 +124,21 @@ const sidebars: SidebarsConfig = {
         {
           type: 'category',
           label: 'How-to guides',
+          description: 'Learn how to integrate our rich set of features into your own UI.',
+          customProps: {
+            icon: '📖',
+          },
           link: { type: 'generated-index', slug: 'android/guides' },
           items: [{ type: 'autogenerated', dirName: 'external/android-ui/docs/guides' }],
         },
         { type: 'doc', id: 'external/android-ui/CHANGELOG' },
         {
           type: 'link',
           label: 'API reference',
+          description: 'Discover all components provided by Open Video UI for Android.',
+          customProps: {
+            icon: '*️⃣',
+          },
           href: 'https://theoplayer.github.io/android-ui/api/',
         },
       ],
+9 −0		CHANGELOG.md
+6 −4		README.md
+18 −11		docs/components/Example.tsx
+0 −5		docs/examples/_category_.json
+1 −0		docs/examples/ads.mdx
+1 −0		docs/examples/custom-ui.mdx
+1 −0		docs/examples/default-ui.mdx
+1 −0		docs/examples/nitflex.mdx
+1 −0		docs/examples/portrait.mdx
+1 −0		docs/examples/styling.mdx
+143 −0		docs/getting-started.mdx
+57 −0		docs/react/components/ReactExample.tsx
+80 −0		docs/react/examples/custom-ui.mdx
+40 −0		docs/react/examples/default-ui.mdx
+8 −0		docs/react/examples/shared.module.css
+120 −0		docs/react/getting-started.mdx
+267 −0		docs/static/open-video-ui/v1/examples/react/custom-ui/demo.html
+106 −0		docs/static/open-video-ui/v1/examples/react/default-ui/demo.html
+44 −0		docs/static/open-video-ui/v1/examples/react/utils.js
+0 −4		docs/static/open-video-ui/v1/examples/web/portrait/portrait.css
+6 −6		package-lock.json
+1 −1		package.json
+12 −0		react/CHANGELOG.md
+6 −4		react/README.md
+2 −2		react/package.json
+5 −6		react/src/DefaultUI.tsx
+7 −8		react/src/UIContainer.tsx
+16 −0		react/src/components/SlotContainer.tsx
+1 −0		react/src/components/index.ts
+1 −28		react/src/slotted.tsx
+3 −3		react/test/ssr.test.mjs
+2 −1		src/UIContainer.ts
+11 −5		src/components/MenuGroup.ts
+2 −2		src/components/RadioGroup.ts
+11 −0		src/components/SlotContainer.css
+39 −0		src/components/SlotContainer.ts
+1 −0		src/components/index.ts
+14 −0		src/util/CommonUtils.ts