Migrate examples from Open Video UI for Web (#7)

docusaurus.config.ts

@@ -3,6 +3,7 @@ import { themes as prismThemes } from 'prism-react-renderer';
 import type { Config } from '@docusaurus/types';
 import type * as Preset from '@docusaurus/preset-classic';
 import type * as DocsPlugin from '@docusaurus/plugin-content-docs';
+import type { Configuration as WebpackConfiguration } from 'webpack';
 import { version as webUiVersion } from './open-video-ui/external/web-ui/package.json';
 import path from 'path';
 import fs from 'fs';
@@ -108,6 +109,39 @@ const config: Config = {
         },
       } satisfies DocsPlugin.Options,
     ],
+    () => ({
+      name: 'webpack-plugin',
+      configureWebpack() {
+        return {
+          module: {
+            // https://github.com/WebCoder49/code-input only exports to the global scope.
+            // Insert some `import` and `export` statements where needed.
+            rules: [
+              {
+                test: require.resolve('@webcoder49/code-input/code-input'),
+                loader: 'exports-loader',
+                options: {
+                  type: 'commonjs',
+                  exports: 'single codeInput',
+                },
+              },
+              {
+                test: require.resolve('@webcoder49/code-input/plugins/indent'),
+                loader: 'imports-loader',
+                options: {
+                  type: 'commonjs',
+                  imports: {
+                    syntax: 'single',
+                    name: 'codeInput',
+                    moduleName: '@webcoder49/code-input/code-input',
+                  },
+                },
+              },
+            ],
+          },
+        } satisfies WebpackConfiguration;
+      },
+    }),
   ],
 
   markdown: {

package.json

@@ -18,8 +18,10 @@
     "@docusaurus/core": "3.1.1",
     "@docusaurus/preset-classic": "3.1.1",
     "@mdx-js/react": "^3.0.0",
+    "@webcoder49/code-input": "^2.2.1",
     "clsx": "^2.0.0",
     "prism-react-renderer": "^2.3.0",
+    "prismjs": "^1.29.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
   },
@@ -28,6 +30,8 @@
     "@docusaurus/tsconfig": "3.1.1",
     "@docusaurus/types": "3.1.1",
     "dotenv": "^16.4.4",
+    "exports-loader": "^5.0.0",
+    "imports-loader": "^5.0.0",
     "prettier": "^3.2.4",
     "serve-handler": "^6.1.5",
     "typescript": "~5.3.3"

src/components/CodeInput/index.tsx

@@ -0,0 +1,49 @@
+import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
+import React, { type DetailedHTMLProps, type HTMLAttributes, useEffect } from 'react';
+import type * as CodeInputNamespace from '@webcoder49/code-input/code-input';
+import type * as PrismNamespace from 'prismjs';
+import 'prismjs/themes/prism-okaidia.min.css';
+import '@webcoder49/code-input/code-input.min.css';
+
+let codeInput: typeof CodeInputNamespace;
+let Prism: typeof PrismNamespace;
+if (ExecutionEnvironment.canUseDOM) {
+  // <code-input> can only be loaded inside the browser
+  codeInput = require('@webcoder49/code-input/code-input');
+  Prism = require('prismjs');
+  require('@webcoder49/code-input/plugins/indent');
+  // HACK: <code-input> doesn't handle being loaded lazily (after window load)
+  (codeInput as any).windowLoaded = true;
+}
+
+let codeInputInitialized = false;
+
+function initializeCodeInput() {
+  if (codeInputInitialized) return;
+  // Register our template
+  codeInput.registerTemplate('syntax-highlighted', codeInput.templates.prism(Prism, [new codeInput.plugins.Indent(true, 4)]));
+  codeInputInitialized = true;
+}
+
+export interface CodeInputElement extends CodeInputNamespace.CodeInput {
+  value: string;
+}
+
+export interface Props extends DetailedHTMLProps<HTMLAttributes<CodeInputElement>, CodeInputElement> {
+  template?: string;
+}
+
+declare module 'react' {
+  namespace JSX {
+    interface IntrinsicElements {
+      'code-input': Props;
+    }
+  }
+}
+
+export function CodeInput(props: Props) {
+  useEffect(() => {
+    initializeCodeInput();
+  }, []);
+  return <code-input template="syntax-highlighted" {...props}></code-input>;
+}

theoplayer/static/theoplayer/v6/examples/basic/demo.html

@@ -13,18 +13,18 @@
             width: 100%;
         }
     </style>
-    <link rel="stylesheet" href="https://unpkg.com/theoplayer@6/ui.css"/>
-    <script src="https://unpkg.com/theoplayer@6/THEOplayer.js"></script>
+    <link rel="stylesheet" href="https://cdn.theoplayer.com/dash/theoplayer/ui.css"/>
+    <script src="https://cdn.theoplayer.com/dash/theoplayer/THEOplayer.js"></script>
 </head>
 <body>
 <div id="player" class="video-js theoplayer-skin vjs-16-9"></div>
 <script>
     var player = new THEOplayer.Player(document.querySelector('#player'), {
-        // For demonstration purposes, we use the free unpkg.com CDN.
+        // For demonstration purposes, we use the theoplayer.com CDN.
         // For production use, we recommend hosting THEOplayer yourself
         // and changing this (as well as the <script> and <link> tags above)
         // to point to THEOplayer's location on your own website.
-        libraryLocation: 'https://unpkg.com/theoplayer@6/',
+        libraryLocation: 'https://cdn.theoplayer.com/dash/theoplayer/',
         // Change this property to point to your THEOplayer license file:
         licenseUrl: '/docs/theoplayer-license.txt',
         // Alternatively, uncomment this, change its value to your THEOplayer license, and remove "licenseUrl":