@jupyterlab/video-extension 4.5.0-alpha.2

package/README.md

@@ -0,0 +1,3 @@
+# video-extension
+
+An extension for JupyterLab which provides a video file viewer.

package/lib/index.d.ts

@@ -0,0 +1,102 @@
+/**
+ * @packageDocumentation
+ * @module video-extension
+ */
+import { JupyterFrontEndPlugin } from '@jupyterlab/application';
+import { ABCWidgetFactory, DocumentRegistry, DocumentWidget, IDocumentWidget } from '@jupyterlab/docregistry';
+import { Contents } from '@jupyterlab/services';
+import { Widget } from '@lumino/widgets';
+/**
+ * A video viewer widget.
+ */
+export declare class VideoViewer extends Widget {
+    /**
+     * Construct a new video viewer widget.
+     */
+    constructor(options: VideoViewer.IOptions);
+    /**
+     * Dispose of the resources held by the widget.
+     */
+    dispose(): void;
+    /**
+     * Handle `resize` messages for the widget.
+     */
+    protected onResize(msg: Widget.ResizeMessage): void;
+    /**
+     * Update the video source.
+     */
+    private _updateVideo;
+    private _context;
+    private _video;
+    private _contentsManager;
+}
+/**
+ * The namespace for VideoViewer class statics.
+ */
+export declare namespace VideoViewer {
+    /**
+     * The options used to create a video viewer widget.
+     */
+    interface IOptions {
+        /**
+         * The document context for the video being rendered by the widget.
+         */
+        context: DocumentRegistry.Context;
+        /**
+         * The contents manager.
+         */
+        contentsManager: Contents.IManager;
+    }
+}
+/**
+ * A document widget for videos.
+ */
+export declare class VideoDocumentWidget extends DocumentWidget<VideoViewer> {
+    constructor(options: VideoDocumentWidget.IOptions);
+}
+/**
+ * The namespace for VideoDocumentWidget class statics.
+ */
+export declare namespace VideoDocumentWidget {
+    /**
+     * The options used to create a video document widget.
+     */
+    interface IOptions extends DocumentWidget.IOptions<VideoViewer> {
+    }
+}
+/**
+ * A widget factory for video viewers.
+ */
+export declare class VideoViewerFactory extends ABCWidgetFactory<IDocumentWidget<VideoViewer>> {
+    /**
+     * Construct a new video viewer factory.
+     */
+    constructor(options: VideoViewerFactory.IOptions);
+    /**
+     * Create a new widget given a context.
+     */
+    protected createNewWidget(context: DocumentRegistry.Context): IDocumentWidget<VideoViewer>;
+    private _contentsManager;
+}
+/**
+ * The namespace for VideoViewerFactory class statics.
+ */
+export declare namespace VideoViewerFactory {
+    /**
+     * The options used to create a video viewer factory.
+     */
+    interface IOptions extends DocumentRegistry.IWidgetFactoryOptions {
+        /**
+         * The contents manager.
+         */
+        contentsManager: Contents.IManager;
+    }
+}
+/**
+ * The video extension.
+ */
+declare const plugin: JupyterFrontEndPlugin<void>;
+/**
+ * Export the plugin as default.
+ */
+export default plugin;

package/lib/index.js

@@ -0,0 +1,216 @@
+/* -----------------------------------------------------------------------------
+| Copyright (c) Jupyter Development Team.
+| Distributed under the terms of the Modified BSD License.
+|----------------------------------------------------------------------------*/
+/**
+ * @packageDocumentation
+ * @module video-extension
+ */
+import { ILayoutRestorer } from '@jupyterlab/application';
+import { WidgetTracker } from '@jupyterlab/apputils';
+import { ABCWidgetFactory, DocumentWidget } from '@jupyterlab/docregistry';
+import { IDefaultDrive, RestContentProvider } from '@jupyterlab/services';
+import { ITranslator } from '@jupyterlab/translation';
+import { Widget } from '@lumino/widgets';
+/**
+ * The class name added to a video viewer.
+ */
+const VIDEO_CLASS = 'jp-VideoViewer';
+/**
+ * The name of the factory that creates video widgets.
+ */
+const FACTORY_VIDEO = 'VideoViewer';
+/**
+ * Content provider ID for video streaming
+ */
+const VIDEO_CONTENT_PROVIDER_ID = 'video-provider';
+/**
+ * Get video file types from the document registry
+ */
+function getVideoFileTypes(docRegistry) {
+    const videoFileTypes = [];
+    // Find all video file types
+    for (const fileType of docRegistry.fileTypes()) {
+        if (fileType.mimeTypes.some(mimeType => mimeType.startsWith('video/'))) {
+            videoFileTypes.push(fileType.name);
+        }
+    }
+    return videoFileTypes;
+}
+/**
+ * A video viewer widget.
+ */
+export class VideoViewer extends Widget {
+    /**
+     * Construct a new video viewer widget.
+     */
+    constructor(options) {
+        super();
+        this.addClass(VIDEO_CLASS);
+        this._context = options.context;
+        this._contentsManager = options.contentsManager;
+        this._video = document.createElement('video');
+        this._video.controls = true;
+        this.node.appendChild(this._video);
+        void this._context.ready.then(() => {
+            void this._updateVideo();
+        });
+        this._context.model.contentChanged.connect(this._updateVideo, this);
+    }
+    /**
+     * Dispose of the resources held by the widget.
+     */
+    dispose() {
+        if (this.isDisposed) {
+            return;
+        }
+        super.dispose();
+    }
+    /**
+     * Handle `resize` messages for the widget.
+     */
+    onResize(msg) {
+        super.onResize(msg);
+        if (this._video) {
+            this._video.style.width = '100%';
+            this._video.style.height = '100%';
+        }
+    }
+    /**
+     * Update the video source.
+     */
+    async _updateVideo() {
+        // Use getDownloadUrl for proper URL encoding and security tokens
+        const videoUrl = await this._contentsManager.getDownloadUrl(this._context.path);
+        this._video.src = videoUrl;
+    }
+}
+/**
+ * A document widget for videos.
+ */
+export class VideoDocumentWidget extends DocumentWidget {
+    constructor(options) {
+        super(options);
+    }
+}
+/**
+ * A widget factory for video viewers.
+ */
+export class VideoViewerFactory extends ABCWidgetFactory {
+    /**
+     * Construct a new video viewer factory.
+     */
+    constructor(options) {
+        super(options);
+        this._contentsManager = options.contentsManager;
+    }
+    /**
+     * Create a new widget given a context.
+     */
+    createNewWidget(context) {
+        const content = new VideoViewer({
+            context,
+            contentsManager: this._contentsManager
+        });
+        const widget = new VideoDocumentWidget({
+            content,
+            context
+        });
+        return widget;
+    }
+}
+/**
+ * A content provider for video files.
+ *
+ * This overrides the default behavior of the RestContentProvider to not include the file content.
+ */
+class VideoContentProvider extends RestContentProvider {
+    constructor(options) {
+        super(options);
+    }
+    /**
+     * Get a file or directory.
+     *
+     * @param localPath - The path to the file.
+     * @param options - The options used to fetch the file.
+     *
+     * @returns A promise which resolves with the file content.
+     */
+    async get(localPath, options) {
+        return super.get(localPath, { ...options, content: false });
+    }
+}
+/**
+ * The video extension.
+ */
+const plugin = {
+    id: '@jupyterlab/video-extension:plugin',
+    description: 'Adds a viewer for video files',
+    autoStart: true,
+    requires: [ITranslator, IDefaultDrive],
+    optional: [ILayoutRestorer],
+    activate: (app, translator, defaultDrive, restorer) => {
+        const trans = translator.load('jupyterlab');
+        const { contents, serverSettings } = app.serviceManager;
+        // Get video file types from the document registry
+        const videoFileTypes = getVideoFileTypes(app.docRegistry);
+        // Register the video stream content provider once
+        const registry = defaultDrive.contentProviderRegistry;
+        if (registry) {
+            const videoContentProvider = new VideoContentProvider({
+                apiEndpoint: '/api/contents',
+                serverSettings
+            });
+            registry.register(VIDEO_CONTENT_PROVIDER_ID, videoContentProvider);
+        }
+        // Create tracker for all video widgets
+        const tracker = new WidgetTracker({
+            namespace: 'videoviewer'
+        });
+        // Create single factory for all video types
+        const factory = new VideoViewerFactory({
+            name: FACTORY_VIDEO,
+            label: trans.__('Video Viewer'),
+            fileTypes: videoFileTypes,
+            defaultFor: videoFileTypes,
+            readOnly: true,
+            translator,
+            modelName: 'base64',
+            contentProviderId: VIDEO_CONTENT_PROVIDER_ID,
+            contentsManager: contents
+        });
+        app.docRegistry.addWidgetFactory(factory);
+        factory.widgetCreated.connect(async (sender, widget) => {
+            // Track the widget
+            void tracker.add(widget);
+            // Notify the widget tracker if restore data needs to update
+            widget.context.pathChanged.connect(() => {
+                void tracker.save(widget);
+            });
+            // Set appropriate icon based on file type from document registry
+            const fileTypes = app.docRegistry.getFileTypesForPath(widget.context.path);
+            const videoFileType = fileTypes.find(ft => ft.mimeTypes.some(mimeType => mimeType.startsWith('video/')));
+            if (videoFileType) {
+                widget.title.icon = videoFileType.icon;
+                widget.title.iconClass = videoFileType.iconClass || '';
+                widget.title.iconLabel = videoFileType.iconLabel || '';
+            }
+        });
+        if (restorer) {
+            // Handle state restoration for all video types
+            void restorer.restore(tracker, {
+                command: 'docmanager:open',
+                args: widget => ({
+                    path: widget.context.path,
+                    factory: FACTORY_VIDEO
+                }),
+                name: widget => widget.context.path
+            });
+        }
+    }
+};
+/**
+ * Export the plugin as default.
+ */
+export default plugin;
+//# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@jupyterlab/video-extension",
+  "version": "4.5.0-alpha.2",
+  "description": "JupyterLab - Video File Viewer Extension",
+  "homepage": "https://github.com/jupyterlab/jupyterlab",
+  "bugs": {
+    "url": "https://github.com/jupyterlab/jupyterlab/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/jupyterlab/jupyterlab.git"
+  },
+  "license": "BSD-3-Clause",
+  "author": "Project Jupyter",
+  "sideEffects": [
+    "style/**/*"
+  ],
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "style": "style/index.css",
+  "directories": {
+    "lib": "lib/"
+  },
+  "files": [
+    "lib/*.{d.ts,js,js.map}",
+    "style/*.*",
+    "src/**/*.{ts,tsx}"
+  ],
+  "scripts": {
+    "build": "tsc -b",
+    "build:test": "tsc --build tsconfig.test.json",
+    "clean": "rimraf lib tsconfig.tsbuildinfo",
+    "test": "jest",
+    "test:cov": "jest --collect-coverage",
+    "test:debug": "node --inspect-brk ../../node_modules/.bin/jest --runInBand",
+    "test:debug:watch": "node --inspect-brk ../../node_modules/.bin/jest --runInBand --watch",
+    "watch": "tsc -b --watch"
+  },
+  "dependencies": {
+    "@jupyterlab/application": "^4.5.0-alpha.2",
+    "@jupyterlab/apputils": "^4.6.0-alpha.2",
+    "@jupyterlab/docregistry": "^4.5.0-alpha.2",
+    "@jupyterlab/services": "^7.5.0-alpha.2",
+    "@jupyterlab/translation": "^4.5.0-alpha.2",
+    "@lumino/widgets": "^2.7.1"
+  },
+  "devDependencies": {
+    "@jupyterlab/testutils": "^4.5.0-alpha.2",
+    "@types/jest": "^29.2.0",
+    "@types/webpack-env": "^1.18.0",
+    "jest": "^29.2.0",
+    "rimraf": "~5.0.5",
+    "typescript": "~5.5.4"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "jupyterlab": {
+    "extension": true
+  },
+  "styleModule": "style/index.js"
+}

package/src/index.ts

@@ -0,0 +1,329 @@
+/* -----------------------------------------------------------------------------
+| Copyright (c) Jupyter Development Team.
+| Distributed under the terms of the Modified BSD License.
+|----------------------------------------------------------------------------*/
+/**
+ * @packageDocumentation
+ * @module video-extension
+ */
+
+import {
+  ILayoutRestorer,
+  JupyterFrontEnd,
+  JupyterFrontEndPlugin
+} from '@jupyterlab/application';
+import { WidgetTracker } from '@jupyterlab/apputils';
+import {
+  ABCWidgetFactory,
+  DocumentRegistry,
+  DocumentWidget,
+  IDocumentWidget
+} from '@jupyterlab/docregistry';
+import {
+  Contents,
+  IDefaultDrive,
+  RestContentProvider
+} from '@jupyterlab/services';
+import { ITranslator } from '@jupyterlab/translation';
+import { Widget } from '@lumino/widgets';
+
+/**
+ * The class name added to a video viewer.
+ */
+const VIDEO_CLASS = 'jp-VideoViewer';
+
+/**
+ * The name of the factory that creates video widgets.
+ */
+const FACTORY_VIDEO = 'VideoViewer';
+
+/**
+ * Content provider ID for video streaming
+ */
+const VIDEO_CONTENT_PROVIDER_ID = 'video-provider';
+
+/**
+ * Get video file types from the document registry
+ */
+function getVideoFileTypes(docRegistry: DocumentRegistry): string[] {
+  const videoFileTypes: string[] = [];
+
+  // Find all video file types
+  for (const fileType of docRegistry.fileTypes()) {
+    if (fileType.mimeTypes.some(mimeType => mimeType.startsWith('video/'))) {
+      videoFileTypes.push(fileType.name);
+    }
+  }
+
+  return videoFileTypes;
+}
+
+/**
+ * A video viewer widget.
+ */
+export class VideoViewer extends Widget {
+  /**
+   * Construct a new video viewer widget.
+   */
+  constructor(options: VideoViewer.IOptions) {
+    super();
+    this.addClass(VIDEO_CLASS);
+    this._context = options.context;
+    this._contentsManager = options.contentsManager;
+
+    this._video = document.createElement('video');
+    this._video.controls = true;
+
+    this.node.appendChild(this._video);
+
+    void this._context.ready.then(() => {
+      void this._updateVideo();
+    });
+
+    this._context.model.contentChanged.connect(this._updateVideo, this);
+  }
+
+  /**
+   * Dispose of the resources held by the widget.
+   */
+  dispose(): void {
+    if (this.isDisposed) {
+      return;
+    }
+    super.dispose();
+  }
+
+  /**
+   * Handle `resize` messages for the widget.
+   */
+  protected onResize(msg: Widget.ResizeMessage): void {
+    super.onResize(msg);
+    if (this._video) {
+      this._video.style.width = '100%';
+      this._video.style.height = '100%';
+    }
+  }
+
+  /**
+   * Update the video source.
+   */
+  private async _updateVideo(): Promise<void> {
+    // Use getDownloadUrl for proper URL encoding and security tokens
+    const videoUrl = await this._contentsManager.getDownloadUrl(
+      this._context.path
+    );
+    this._video.src = videoUrl;
+  }
+
+  private _context: DocumentRegistry.Context;
+  private _video: HTMLVideoElement;
+  private _contentsManager: Contents.IManager;
+}
+
+/**
+ * The namespace for VideoViewer class statics.
+ */
+export namespace VideoViewer {
+  /**
+   * The options used to create a video viewer widget.
+   */
+  export interface IOptions {
+    /**
+     * The document context for the video being rendered by the widget.
+     */
+    context: DocumentRegistry.Context;
+
+    /**
+     * The contents manager.
+     */
+    contentsManager: Contents.IManager;
+  }
+}
+
+/**
+ * A document widget for videos.
+ */
+export class VideoDocumentWidget extends DocumentWidget<VideoViewer> {
+  constructor(options: VideoDocumentWidget.IOptions) {
+    super(options);
+  }
+}
+
+/**
+ * The namespace for VideoDocumentWidget class statics.
+ */
+export namespace VideoDocumentWidget {
+  /**
+   * The options used to create a video document widget.
+   */
+  export interface IOptions extends DocumentWidget.IOptions<VideoViewer> {}
+}
+
+/**
+ * A widget factory for video viewers.
+ */
+export class VideoViewerFactory extends ABCWidgetFactory<
+  IDocumentWidget<VideoViewer>
+> {
+  /**
+   * Construct a new video viewer factory.
+   */
+  constructor(options: VideoViewerFactory.IOptions) {
+    super(options);
+    this._contentsManager = options.contentsManager;
+  }
+
+  /**
+   * Create a new widget given a context.
+   */
+  protected createNewWidget(
+    context: DocumentRegistry.Context
+  ): IDocumentWidget<VideoViewer> {
+    const content = new VideoViewer({
+      context,
+      contentsManager: this._contentsManager
+    });
+    const widget = new VideoDocumentWidget({
+      content,
+      context
+    });
+    return widget;
+  }
+
+  private _contentsManager: Contents.IManager;
+}
+
+/**
+ * The namespace for VideoViewerFactory class statics.
+ */
+export namespace VideoViewerFactory {
+  /**
+   * The options used to create a video viewer factory.
+   */
+  export interface IOptions extends DocumentRegistry.IWidgetFactoryOptions {
+    /**
+     * The contents manager.
+     */
+    contentsManager: Contents.IManager;
+  }
+}
+
+/**
+ * A content provider for video files.
+ *
+ * This overrides the default behavior of the RestContentProvider to not include the file content.
+ */
+class VideoContentProvider extends RestContentProvider {
+  constructor(options: RestContentProvider.IOptions) {
+    super(options);
+  }
+
+  /**
+   * Get a file or directory.
+   *
+   * @param localPath - The path to the file.
+   * @param options - The options used to fetch the file.
+   *
+   * @returns A promise which resolves with the file content.
+   */
+  async get(
+    localPath: string,
+    options?: Contents.IFetchOptions
+  ): Promise<Contents.IModel> {
+    return super.get(localPath, { ...options, content: false });
+  }
+}
+
+/**
+ * The video extension.
+ */
+const plugin: JupyterFrontEndPlugin<void> = {
+  id: '@jupyterlab/video-extension:plugin',
+  description: 'Adds a viewer for video files',
+  autoStart: true,
+  requires: [ITranslator, IDefaultDrive],
+  optional: [ILayoutRestorer],
+  activate: (
+    app: JupyterFrontEnd,
+    translator: ITranslator,
+    defaultDrive: Contents.IDrive,
+    restorer: ILayoutRestorer | null
+  ): void => {
+    const trans = translator.load('jupyterlab');
+    const { contents, serverSettings } = app.serviceManager;
+
+    // Get video file types from the document registry
+    const videoFileTypes = getVideoFileTypes(app.docRegistry);
+
+    // Register the video stream content provider once
+    const registry = defaultDrive.contentProviderRegistry;
+    if (registry) {
+      const videoContentProvider = new VideoContentProvider({
+        apiEndpoint: '/api/contents',
+        serverSettings
+      });
+      registry.register(VIDEO_CONTENT_PROVIDER_ID, videoContentProvider);
+    }
+
+    // Create tracker for all video widgets
+    const tracker = new WidgetTracker<IDocumentWidget<VideoViewer>>({
+      namespace: 'videoviewer'
+    });
+
+    // Create single factory for all video types
+    const factory = new VideoViewerFactory({
+      name: FACTORY_VIDEO,
+      label: trans.__('Video Viewer'),
+      fileTypes: videoFileTypes,
+      defaultFor: videoFileTypes,
+      readOnly: true,
+      translator,
+      modelName: 'base64',
+      contentProviderId: VIDEO_CONTENT_PROVIDER_ID,
+      contentsManager: contents
+    });
+
+    app.docRegistry.addWidgetFactory(factory);
+
+    factory.widgetCreated.connect(async (sender, widget) => {
+      // Track the widget
+      void tracker.add(widget);
+
+      // Notify the widget tracker if restore data needs to update
+      widget.context.pathChanged.connect(() => {
+        void tracker.save(widget);
+      });
+
+      // Set appropriate icon based on file type from document registry
+      const fileTypes = app.docRegistry.getFileTypesForPath(
+        widget.context.path
+      );
+      const videoFileType = fileTypes.find(ft =>
+        ft.mimeTypes.some(mimeType => mimeType.startsWith('video/'))
+      );
+
+      if (videoFileType) {
+        widget.title.icon = videoFileType.icon;
+        widget.title.iconClass = videoFileType.iconClass || '';
+        widget.title.iconLabel = videoFileType.iconLabel || '';
+      }
+    });
+
+    if (restorer) {
+      // Handle state restoration for all video types
+      void restorer.restore(tracker, {
+        command: 'docmanager:open',
+        args: widget => ({
+          path: widget.context.path,
+          factory: FACTORY_VIDEO
+        }),
+        name: widget => widget.context.path
+      });
+    }
+  }
+};
+
+/**
+ * Export the plugin as default.
+ */
+export default plugin;

package/style/base.css

@@ -0,0 +1,22 @@
+/*-----------------------------------------------------------------------------
+| Copyright (c) Jupyter Development Team.
+| Distributed under the terms of the Modified BSD License.
+|----------------------------------------------------------------------------*/
+
+/**
+ * Base styles for video viewer
+ */
+
+.jp-RenderedVideo {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+
+.jp-RenderedVideo > video {
+  width: 100%;
+  height: auto;
+  object-fit: contain;
+}

package/style/index.css

@@ -0,0 +1,11 @@
+/*-----------------------------------------------------------------------------
+| Copyright (c) Jupyter Development Team.
+| Distributed under the terms of the Modified BSD License.
+|----------------------------------------------------------------------------*/
+
+/* This file was auto-generated by ensurePackage() in @jupyterlab/buildutils */
+@import url('~@lumino/widgets/style/index.css');
+@import url('~@jupyterlab/apputils/style/index.css');
+@import url('~@jupyterlab/docregistry/style/index.css');
+@import url('~@jupyterlab/application/style/index.css');
+@import url('./base.css');

package/style/index.js

@@ -0,0 +1,12 @@
+/*-----------------------------------------------------------------------------
+| Copyright (c) Jupyter Development Team.
+| Distributed under the terms of the Modified BSD License.
+|----------------------------------------------------------------------------*/
+
+/* This file was auto-generated by ensurePackage() in @jupyterlab/buildutils */
+import '@lumino/widgets/style/index.js';
+import '@jupyterlab/apputils/style/index.js';
+import '@jupyterlab/docregistry/style/index.js';
+import '@jupyterlab/application/style/index.js';
+
+import './base.css';