Imagekit video player

.github/workflows/deploy-examples.yml

@@ -0,0 +1,60 @@
+name: Deploy JavaScript Examples to GitHub Pages
+
+on:
+  push:
+    branches:
+      - dev # Or your default branch, e.g., 'main'
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  build-and-deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      # Enable Corepack to use the yarn version defined in package.json
+      - name: Enable Corepack
+        run: corepack enable
+
+
+      - name: Set up Node.js and Yarn
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'yarn'
+
+      - name: Install root dependencies
+        # This single command installs dependencies for the entire monorepo using Yarn.
+        # It respects your yarn.lock file and workspace setup.
+        run: yarn install --immutable
+
+      - name: Build all packages
+        # This runs the "build" script in your root package.json,
+        # which in turn runs `lerna run build`.
+        run: yarn run build
+
+      - name: Set up GitHub Pages
+        uses: actions/configure-pages@v5
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          # The path is correct, pointing to your example app's build output
+          path: './examples/javascript/dist'
+
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

.github/workflows/publish.yml

@@ -0,0 +1,86 @@
+name: Publish NPM
+
+on:
+  workflow_dispatch:
+    inputs:
+      tag:
+        description: NPM dist tag (alpha, beta, latest)
+        required: true
+        default: 'alpha'
+        type: choice
+        options:
+          - alpha
+          - beta
+          - latest
+
+  release:
+    types: [published]
+
+jobs:
+  publish:
+    name: publish
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      id-token: write
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v6
+        with:
+          fetch-depth: 0
+
+      - name: Enable Corepack
+        run: corepack enable
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          registry-url: 'https://registry.npmjs.org'
+          cache: 'yarn'
+
+      - name: Install dependencies
+        run: |
+          yarn install --immutable
+
+      - name: Build packages
+        run: |
+          yarn build
+
+      - name: Determine NPM tag
+        id: npm-tag
+        run: |
+          if [ -n "${{ github.event.inputs.tag }}" ]; then
+            NPM_TAG="${{ github.event.inputs.tag }}"
+          elif [ "${{ github.event_name }}" == "release" ]; then
+            # For releases, use 'latest' tag unless version contains alpha/beta
+            RELEASE_TAG="${{ github.event.release.tag_name }}"
+            if [[ "$RELEASE_TAG" == *"alpha"* ]] || [[ "$RELEASE_TAG" == *"-alpha"* ]]; then
+              NPM_TAG="alpha"
+            elif [[ "$RELEASE_TAG" == *"beta"* ]] || [[ "$RELEASE_TAG" == *"-beta"* ]]; then
+              NPM_TAG="beta"
+            else
+              NPM_TAG="latest"
+            fi
+          else
+            NPM_TAG="alpha"
+          fi
+
+          echo "tag=$NPM_TAG" >> $GITHUB_OUTPUT
+
+      - name: Publish to NPM
+        run: |
+          cp README.md packages/video-player/
+          cd packages/video-player
+
+          # Publish with the specified tag
+          npm publish --tag ${{ steps.npm-tag.outputs.tag }} --access public
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+
+      - name: Output published version
+        run: |
+          cd packages/video-player
+          PUBLISHED_VERSION=$(node -p "require('./package.json').version")
+          echo "✅ Published @imagekit/video-player@${PUBLISHED_VERSION} with tag: ${{ steps.npm-tag.outputs.tag }}"

.gitignore

@@ -0,0 +1,4 @@
+node_modules
+dist
+old-code
+.yarn

.nvmrc

@@ -0,0 +1 @@
+v20.19.2

.vscode/settings.json

@@ -0,0 +1,2 @@
+{
+}

.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

README.md

@@ -1 +1,36 @@
-# imagekit-video-player
+ImageKit.io
+ImageKit.io Video Player
+[![Node CI](https://img.shields.io/badge/Node-CI-blue)](https://github.com/imagekit-developer/imagekit-video-player)
+[![npm version](https://img.shields.io/npm/v/@imagekit/video-player.svg)](https://www.npmjs.com/package/@imagekit/video-player)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+[![Twitter Follow](https://img.shields.io/twitter/follow/imagekitio?style=social)](https://twitter.com/imagekitio)
+
+## Introduction
+
+ImageKit's video player is an advanced video player built on top of [Video.js 8.20.0](https://videojs.org/guides) delivering enhanced features for a seamless, interactive video experience. It's fully integrated with ImageKit's video delivery and transformation solution.
+
+## Key features
+
+- **Video transformations**: Apply ImageKit video transformations at the player level or per-video level.
+- **Adaptive bitrate streaming**: Full support for HLS and MPEG-DASH with automatic generation of streaming representations.
+- **Subtitles and chapters**: Easy addition of subtitles, captions, and chapter markers for better video navigation.
+- **Player enhancements**: Floating player when scrolled out of view, and seek thumbnails on the progress bar.
+- **Custom branding**: Add a clickable logo to brand your video player.
+- **Playlists and recommendations**: Create playlists with scrollable widgets or show recommended videos when playback ends.
+- **Shoppable Video**: Make videos shoppable by displaying product images alongside videos.
+
+## Installation
+
+You can install the SDK in your project using npm or yarn.
+
+```bash
+npm install @imagekit/video-player
+```
+
+## TypeScript support
+
+The SDK is written in TypeScript, offering first-class TypeScript support. Enjoy excellent type safety and IntelliSense in your IDE. You can use it in your TypeScript projects without any additional configuration.
+
+## Documentation
+
+Refer to the [ImageKit official documentation](https://imagekit.io/docs/video-player/overview) for more details on how to use the SDK.

examples/javascript/index.html

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>ImageKit Video Player Examples</title>
+  <link rel="stylesheet" href="src/style.css" />
+</head>
+
+<body>
+  <div class="container">
+    <h1>ImageKit Video Player Examples</h1>
+    <p>Select a feature below to see a live demonstration and its implementation code.</p>
+    <nav class="example-nav">
+      <ul>
+        <li><a href="pages/shoppable.html">Shoppable Video</a></li>
+        <li><a href="pages/playlist.html">Playlist</a></li>
+        <li><a href="pages/recommendations.html">Recommendations</a></li>
+        <li><a href="pages/floating-window.html">Floating Window</a></li>
+        <li><a href="pages/chapters.html">Chapters</a></li>
+        <li><a href="pages/subtitles.html">Subtitles</a></li>
+        <li><a href="pages/seek-thumbnails.html">Seek thumbnails</a></li>
+        <li><a href="pages/abs.html">ABS</a></li>
+        <li><a href="pages/logo.html">Logo Button</a></li>
+        <li><a href="pages/try-it-yourself.html">Try It Yourself</a></li>
+      </ul>
+    </nav>
+  </div>
+  <script type="module"></script>
+</body>
+
+</html>

examples/javascript/package.json

@@ -0,0 +1,24 @@
+{
+    "name": "javascript-example",
+    "version": "1.0.0",
+    "private": true,
+    "scripts": {
+        "dev": "vite",
+        "build": "vite build",
+        "serve": "vite preview"
+    },
+    "devDependencies": {
+        "@types/cors": "^2.8.17",
+        "@types/express": "^4.17.21",
+        "@types/node": "^20.14.2",
+        "typescript": "^5.2.2",
+        "vite": "^5.2.0"
+    },
+    "dependencies": {
+        "@imagekit/video-player": "workspace:*",
+        "cors": "^2.8.5",
+        "dotenv": "^16.4.5",
+        "express": "^4.19.2",
+        "imagekit": "^3.1.5"
+    }
+}

examples/javascript/pages/abs.html

@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>ABS Example</title>
+    <link rel="stylesheet" href="/src/style.css" />
+</head>
+
+<body>
+    <div class="container">
+        <a href="../" class="back-link">&larr; Back to examples</a>
+        <h1>ABS Example</h1>
+        <h2>DASH</h2>
+        <video id="player" class="video-js" controls preload="auto" width="960" height="540"></video>
+        <h2>HLS</h2>
+        <video id="player-2" class="video-js" controls preload="auto" width="960" height="540"></video>
+        <h2>Example Code</h2>
+        <div class="code-block">
+            <pre><code id="code-display" class="language-javascript"></code></pre>
+        </div>
+    </div>
+    <script type="module" src="/src/abs.ts"></script>
+</body>
+
+</html>

examples/javascript/pages/chapters.html

@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Chapters Example</title>
+    <link rel="stylesheet" href="/src/style.css" />
+    <style>
+        .tabs {
+            display: flex;
+            gap: 10px;
+            margin: 20px 0;
+            border-bottom: 2px solid #ddd;
+        }
+        .tab-button {
+            padding: 10px 20px;
+            background: none;
+            border: none;
+            border-bottom: 3px solid transparent;
+            cursor: pointer;
+            font-size: 16px;
+            color: #666;
+            transition: all 0.3s;
+        }
+        .tab-button:hover {
+            color: #333;
+        }
+        .tab-button.active {
+            color: #0066cc;
+            border-bottom-color: #0066cc;
+            font-weight: bold;
+        }
+        .tab-content {
+            display: none;
+        }
+        .tab-content.active {
+            display: block;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <a href="../" class="back-link">&larr; Back to examples</a>
+        <h1>Chapters Example</h1>
+        <p>This example demonstrates three different ways to configure chapters:</p>
+        <div class="tabs">
+            <button class="tab-button active" data-tab="auto">Auto-generate (AI)</button>
+            <button class="tab-button" data-tab="url">VTT URL</button>
+            <button class="tab-button" data-tab="manual">Manual Object</button>
+        </div>
+        <video id="player" class="video-js" controls preload="auto" width="960" height="540"></video>
+        <h2>Example Code</h2>
+        <div class="code-block">
+            <pre><code id="code-display" class="language-javascript"></code></pre>
+        </div>
+    </div>
+    <script type="module" src="/src/chapters.ts"></script>
+</body>
+</html>

examples/javascript/pages/floating-window.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Floating Window Example</title>
+    <link rel="stylesheet" href="/src/style.css" />
+</head>
+<body>
+    <div class="container">
+        <a href="../" class="back-link">&larr; Back to examples</a>
+        <h1>Floating Window Example</h1>
+        <p>Scroll down the page to see the player shrink and float in the corner.</p>
+        <video id="player" class="video-js" controls preload="auto" width="960" height="540"></video>
+        <h2>Example Code</h2>
+        <div class="code-block">
+            <pre><code id="code-display" class="language-javascript"></code></pre>
+        </div>
+        <div style="height: 2000px; padding-top: 2rem; border-top: 1px solid #ddd; margin-top: 2rem;">
+            <h2>Scroll down to test...</h2>
+            <p>As you scroll down and the main player leaves the viewport, it will automatically float into the corner so you can keep watching.</p>
+        </div>
+    </div>
+    <script type="module" src="/src/floating-window.ts"></script>
+</body>
+</html>