[WIP] Refactor/plugins

.github/workflows/test.yml

@@ -0,0 +1,60 @@
+name: Test
+
+on:
+  push:
+    branches: [ main, dev ]
+  pull_request:
+    branches: [ main, dev ]
+
+jobs:
+  test:
+    name: Test (${{ matrix.os }} - ${{ matrix.browser }})
+    continue-on-error: true
+    runs-on: ${{ matrix.os }}
+    strategy:
+      matrix:
+        os: [ubuntu-latest, windows-latest, macos-latest]
+        browser: [chrome, firefox, edge, safari]
+        include:
+          - os: ubuntu-latest
+            browser: chrome
+          - os: ubuntu-latest
+            browser: firefox
+          - os: windows-latest
+            browser: chrome
+          - os: windows-latest
+            browser: edge
+          - os: macos-latest
+            browser: safari
+        exclude:
+          - os: ubuntu-latest
+            browser: edge
+          - os: ubuntu-latest
+            browser: safari
+          - os: windows-latest
+            browser: firefox
+          - os: windows-latest
+            browser: safari
+          - os: macos-latest
+            browser: chrome
+          - os: macos-latest
+            browser: firefox
+          - os: macos-latest
+            browser: edge
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run tests
+        run: npm run test:${{ matrix.browser }}
+        env:
+          TEST_HEADLESS: ${{ matrix.browser != 'safari' }}

.gitignore

@@ -33,3 +33,10 @@ docs/api/
 test/dist/
 .eslintcache
 .yo-rc.json
+
+# VitePress
+docs/.vitepress/cache/
+docs/.vitepress/dist/
+docs/.vitepress/temp/
+docs/public/*.bundle.js
+__screenshots__

docs/.vitepress/config.ts

@@ -0,0 +1,80 @@
+import { defineConfig, Plugin } from 'vitepress';
+import copyDistPlugin from './plugins/copydist';
+import { resolve } from 'path';
+import { fileURLToPath } from 'url';
+import container from 'markdown-it-container';
+import monaco from 'vite-plugin-monaco-editor';
+
+function renderExample(tokens: any[], idx: number) {
+  const token = tokens[idx]
+  if (token.nesting === 1) {
+    return `<ceeblue-plugin-example>`;
+  }
+
+  return '</ceeblue-plugin-example>';
+}
+
+
+export default defineConfig({
+  title: 'Video.js Plugin',
+  description: 'Videojs set of plugins for playing streams from the Ceeblue cloud',
+  head: [
+    ['link', { rel: 'icon', href: '/favicon.ico' }],
+    ['meta', { name: 'theme-color', content: '#646cff' }]
+  ],
+  themeConfig: {
+    logo: {
+      src: '/logo.svg',
+      alt: 'Ceeblue Logo'
+    },
+    nav: [
+      { text: 'Getting Started', link: '/' },
+      { text: 'Examples', link: '/examples/' },
+      { text: 'Demo', link: 'https://ceeblue-demo-mirror.pages.dev/' },
+      { text: 'API', link: 'https://docs.ceeblue.net/reference/welcome-to-the-ceeblue-streaming-cloud-api' }
+    ],
+    sidebar: [
+      {
+        text: 'Guide',
+        items: [
+          { text: 'Getting Started', link: '/' }
+        ]
+      },
+      {
+        text: 'Examples',
+        items: [
+          { text: 'Simple player', link: '/examples/simple' },
+        ]
+      },
+      {
+        text: 'API',
+        items: [
+          { text: 'API Reference', link: 'https://docs.ceeblue.net/reference/welcome-to-the-ceeblue-streaming-cloud-api' }
+        ]
+      }
+    ],
+    socialLinks: [
+      { icon: 'github', link: 'https://github.com/ceebluetv/videojs-plugins' }
+    ]
+  },
+  vite: {
+    plugins: [
+      copyDistPlugin(resolve(fileURLToPath(import.meta.url), '..', '..', '..')),
+      // @ts-expect-error - monaco has bad exports
+      monaco.default({
+        languageWorkers: ['typescript', 'css', 'html', 'json'],
+        customDistPath() {
+          return resolve(fileURLToPath(import.meta.url), '..', '..', 'public');
+        }
+      }),
+    ],
+    ssr: {
+      noExternal: ['monaco-editor']
+    }
+  },
+  markdown: {
+    config: (md) => {
+      md.use(container, 'example', { render: renderExample })
+    }
+  }
+})

docs/.vitepress/plugins/copydist.ts

@@ -0,0 +1,27 @@
+import { existsSync, mkdirSync, readdirSync, copyFileSync } from 'fs'
+import { resolve, join } from 'path'
+
+/**
+ * A simple plugin to copy the dist folder to the public folder.
+ * Because vitepress doesn't support multiple public folders (with vite-multiple-assets plugin).
+ */
+export default function copyDistPlugin(base: string) {
+  return {
+    name: 'copy-dist',
+    configureServer() {
+      const distPath = resolve(base, 'dist')
+      const publicPath = resolve(base, 'docs', 'public', 'dist')
+
+      if (!existsSync(publicPath)) {
+        mkdirSync(publicPath, { recursive: true })
+      }
+
+      readdirSync(distPath).forEach(file => {
+        copyFileSync(
+          join(distPath, file),
+          join(publicPath, file)
+        )
+      })
+    }
+  }
+}

docs/.vitepress/theme/custom.css

@@ -0,0 +1,19 @@
+:root {
+  --vp-c-brand: #646cff;
+  --vp-c-brand-light: #747bff;
+  --vp-c-brand-lighter: #9499ff;
+  --vp-c-brand-dark: #535bf2;
+  --vp-c-brand-darker: #454ce1;
+}
+
+/* Logo styling */
+.VPNavBarTitle .logo {
+  height: 32px;
+  margin-right: 8px;
+}
+
+.VPNavBarTitle {
+  display: flex;
+  align-items: center;
+}
+

docs/.vitepress/theme/exampleEditorViewer.ts

@@ -0,0 +1,82 @@
+import * as monaco from 'monaco-editor'
+
+class CeebluePluginExample extends HTMLElement {
+  #editor: monaco.editor.IStandaloneCodeEditor | undefined = undefined;
+  #wrapper: HTMLElement | undefined = undefined;
+  #observer: MutationObserver | undefined = undefined;
+
+  connectedCallback () {
+    const codeEl = this.querySelector('pre code');
+    const initial = (codeEl
+      ? codeEl.textContent
+      : this.textContent?.trim()) || '';
+
+    this.#wrapper = document.createElement('div')
+    Object.assign(this.#wrapper.style, {
+      display: 'grid',
+      gap: '1rem',
+      gridTemplateColumns: '1fr',
+      fontFamily: 'system-ui, sans-serif',
+      marginTop: '1rem'
+    })
+
+    const style = document.createElement('style');
+    style.textContent = `
+      @media (max-width: 768px) {
+        .ceeblue-plugin-example-wrapper {
+          grid-template-columns: 1fr;
+        }
+      }
+    `
+    document.head.appendChild(style)
+    this.#wrapper.classList.add('ceeblue-plugin-example-wrapper')
+
+    const frame = Object.assign(document.createElement('iframe'), {
+      style: 'width:100%;aspect-ratio:16/9.2;border:1px solid #ccc;border-radius:6px;'
+    })
+    const editorBox = Object.assign(document.createElement('div'), {
+      style: 'height:400px;border:1px solid #ccc;border-radius:6px;'
+    })
+    this.#wrapper.append(frame, editorBox)
+
+    this.insertAdjacentElement('afterend', this.#wrapper)
+    this.style.display = 'none';
+
+    // Initialize editor with theme based on current document class
+    const isDark = document.documentElement.classList.contains('dark')
+    this.#editor = monaco.editor.create(editorBox, {
+      value: initial,
+      language: 'html',
+      theme: isDark ? 'vs-dark' : 'vs',
+      automaticLayout: true
+    })
+
+    // VitePress theme change observer
+    this.#observer = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
+          const isDark = document.documentElement.classList.contains('dark')
+          monaco.editor.setTheme(isDark ? 'vs-dark' : 'vs')
+        }
+      })
+    })
+
+    this.#observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['class']
+    })
+
+    const render = () => (frame.srcdoc = this.#editor?.getValue() || '')
+    render()
+    this.#editor.onDidChangeModelContent(render)
+  }
+
+  disconnectedCallback () {
+    this.#observer?.disconnect()
+    this.#editor?.dispose()
+    this.#wrapper?.remove()
+  }
+}
+
+customElements.define('ceeblue-plugin-example', CeebluePluginExample)
+export default CeebluePluginExample

docs/.vitepress/theme/index.ts

@@ -0,0 +1,9 @@
+import DefaultTheme from 'vitepress/theme';
+import './custom.css';
+
+export default {
+  ...DefaultTheme,
+  enhanceApp({ app }) {
+
+  }
+}

docs/examples/index.md

@@ -0,0 +1,22 @@
+# Examples
+
+This section provides practical examples of how to use Ceeblue Video.js Plugin in different scenarios.
+
+## Available Examples
+
+- [Simple player](/examples/simple) - Simple setup with default configuration
+
+## Running Examples Locally
+
+To run these examples locally:
+
+1. Clone the repository
+2. Install dependencies:
+   ```bash
+   npm install
+   ```
+3. Start the development server:
+   ```bash
+   npm run docs:dev
+   ```
+4. Navigate to the examples section in the documentation