Merge branch 'dev' into once-support

packages/assets/src/loader/parsers/textures/loadVideo.ts

@@ -17,7 +17,7 @@ const validVideoMIMEs = [
 ];
 
 /**
- * Configuration for the `loadVideo` loader paarser.
+ * Configuration for the `loadVideo` loader parser.
  * @memberof PIXI
  * @see PIXI.loadVideo
  */
@@ -29,6 +29,32 @@ export interface LoadVideoConfig
      * @default true
      */
     defaultAutoPlay: boolean;
+
+    /**
+     * How many times a second to update the texture of the loaded video by default.
+     * If 0, `requestVideoFrameCallback` is used to update the texture.
+     * If `requestVideoFrameCallback` is not available, the texture is updated every render.
+     * @default 0
+     */
+    defaultUpdateFPS: number;
+
+    /**
+     * When set to `true`, the loaded video will loop by default.
+     * @default false
+     */
+    defaultLoop: boolean;
+
+    /**
+     * When set to `true`, the loaded video will be muted.
+     * @default false
+     */
+    defaultMuted: boolean;
+
+    /**
+     * When set to `true`, opening the video on mobile devices is prevented.
+     * @default true
+     */
+    defaultPlaysinline: boolean;
 }
 
 /**
@@ -45,6 +71,10 @@ export const loadVideo = {
 
     config: {
         defaultAutoPlay: true,
+        defaultUpdateFPS: 0,
+        defaultLoop: false,
+        defaultMuted: false,
+        defaultPlaysinline: true,
     },
 
     test(url: string): boolean
@@ -66,7 +96,12 @@ export const loadVideo = {
         {
             const options = {
                 autoPlay: this.config.defaultAutoPlay,
+                updateFPS: this.config.defaultUpdateFPS,
+                loop: this.config.defaultLoop,
+                muted: this.config.defaultMuted,
+                playsinline: this.config.defaultPlaysinline,
                 ...loadAsset?.data?.resourceOptions,
+                autoLoad: true,
             };
             const src = new VideoResource(blobURL, options);
 

packages/core/src/textures/BaseTexture.ts

@@ -16,7 +16,16 @@ const defaultBufferOptions = {
     alphaMode: ALPHA_MODES.NPM,
 };
 
-export type ImageSource = HTMLImageElement | HTMLVideoElement | ImageBitmap | ICanvas;
+/**
+ * Value types for the constructor of {@link PIXI.BaseTexture}, including:
+ * - `HTMLImageElement`
+ * - `HTMLVideoElement`
+ * - `ImageBitmap`
+ * - {@link PIXI.ICanvas}
+ * - `VideoFrame`
+ * @memberof PIXI
+ */
+export type ImageSource = HTMLImageElement | HTMLVideoElement | ImageBitmap | ICanvas | VideoFrame;
 
 export interface IBaseTextureOptions<RO = any>
 {
@@ -251,7 +260,7 @@ export class BaseTexture<R extends Resource = Resource, RO = IAutoDetectOptions>
     };
 
     /**
-     * @param {PIXI.Resource|HTMLImageElement|HTMLVideoElement|ImageBitmap|ICanvas|string} [resource=null] -
+     * @param {PIXI.Resource|PIXI.ImageSource|string} [resource=null] -
      *        The current resource to use, for things that aren't Resource objects, will be converted
      *        into a Resource.
      * @param options - Collection of options, default options inherited from {@link PIXI.BaseTexture.defaultOptions}.
@@ -643,7 +652,7 @@ export class BaseTexture<R extends Resource = Resource, RO = IAutoDetectOptions>
      * source is an image url or an image element and not in the base texture
      * cache, it will be created and loaded.
      * @static
-     * @param {HTMLImageElement|HTMLVideoElement|ImageBitmap|PIXI.ICanvas|string|string[]} source - The
+     * @param {PIXI.ImageSource|string|string[]} source - The
      *        source to create base texture from.
      * @param options - See {@link PIXI.BaseTexture}'s constructor for options.
      * @param {string} [options.pixiIdPrefix=pixiid] - If a source has no id, this is the prefix of the generated id

packages/core/src/textures/resources/BaseImageResource.ts

@@ -14,7 +14,7 @@ export class BaseImageResource extends Resource
 {
     /**
      * The source element.
-     * @member {HTMLImageElement|HTMLVideoElement|ImageBitmap|PIXI.ICanvas}
+     * @member {PIXI.ImageSourcee}
      * @readonly
      */
     public source: ImageSource;
@@ -28,13 +28,13 @@ export class BaseImageResource extends Resource
     public noSubImage: boolean;
 
     /**
-     * @param {HTMLImageElement|HTMLVideoElement|ImageBitmap|PIXI.ICanvas} source
+     * @param {PIXI.ImageSourcee} source
      */
     constructor(source: ImageSource)
     {
         const sourceAny = source as any;
-        const width = sourceAny.naturalWidth || sourceAny.videoWidth || sourceAny.width;
-        const height = sourceAny.naturalHeight || sourceAny.videoHeight || sourceAny.height;
+        const width = sourceAny.naturalWidth || sourceAny.videoWidth || sourceAny.displayWidth || sourceAny.width;
+        const height = sourceAny.naturalHeight || sourceAny.videoHeight || sourceAny.displayHeight || sourceAny.height;
 
         super(width, height);
 
@@ -65,7 +65,7 @@ export class BaseImageResource extends Resource
      * @param renderer - Upload to the renderer
      * @param baseTexture - Reference to parent texture
      * @param glTexture
-     * @param {HTMLImageElement|HTMLVideoElement|ImageBitmap|PIXI.ICanvas} [source] - (optional)
+     * @param {PIXI.ImageSourcee} [source] - (optional)
      * @returns - true is success
      */
     override upload(renderer: Renderer, baseTexture: BaseTexture, glTexture: GLTexture, source?: ImageSource): boolean

packages/core/src/textures/resources/VideoFrameResource.ts

@@ -0,0 +1,27 @@
+import { BaseImageResource } from './BaseImageResource';
+
+/**
+ * Resource type for VideoFrame.
+ * @memberof PIXI
+ */
+export class VideoFrameResource extends BaseImageResource
+{
+    /**
+     * @param source - Image element to use
+     */
+    // eslint-disable-next-line @typescript-eslint/no-useless-constructor
+    constructor(source: VideoFrame)
+    {
+        super(source);
+    }
+
+    /**
+     * Used to auto-detect the type of resource.
+     * @param {*} source - The source object
+     * @returns {boolean} `true` if source is an VideoFrame
+     */
+    static test(source: unknown): source is VideoFrame
+    {
+        return !!globalThis.VideoFrame && source instanceof globalThis.VideoFrame;
+    }
+}

packages/core/src/textures/resources/VideoResource.ts

@@ -68,7 +68,8 @@ export class VideoResource extends BaseImageResource
      * @param {boolean} [options.autoLoad=true] - Start loading the video immediately
      * @param {boolean} [options.autoPlay=true] - Start playing video immediately
      * @param {number} [options.updateFPS=0] - How many times a second to update the texture from the video.
-     * Leave at 0 to update at every render.
+     * If 0, `requestVideoFrameCallback` is used to update the texture.
+     * If `requestVideoFrameCallback` is not available, the texture is updated every render.
      * @param {boolean} [options.crossorigin=true] - Load image using cross origin
      * @param {boolean} [options.loop=false] - Loops the video
      * @param {boolean} [options.muted=false] - Mutes the video audio, useful for autoplay
@@ -419,7 +420,8 @@ export class VideoResource extends BaseImageResource
     }
 
     /**
-     * How many times a second to update the texture from the video. Leave at 0 to update at every render.
+     * How many times a second to update the texture from the video. If 0, `requestVideoFrameCallback` is used to
+     * update the texture. If `requestVideoFrameCallback` is not available, the texture is updated every render.
      * A lower fps can help performance, as updating the texture at 60fps on a 30ps video may not be efficient.
      */
     get updateFPS(): number

packages/core/src/textures/resources/index.ts

@@ -6,6 +6,7 @@ import { CubeResource } from './CubeResource';
 import { ImageBitmapResource } from './ImageBitmapResource';
 import { ImageResource } from './ImageResource';
 import { SVGResource } from './SVGResource';
+import { VideoFrameResource } from './VideoFrameResource';
 import { VideoResource } from './VideoResource';
 
 export * from './BaseImageResource';
@@ -16,6 +17,7 @@ INSTALLED.push(
     ImageResource,
     CanvasResource,
     VideoResource,
+    VideoFrameResource,
     SVGResource,
     BufferResource,
     CubeResource,

packages/core/test/autoDetectResource.tests.ts

@@ -17,7 +17,7 @@ describe('autoDetectResource', () =>
     it('should have installed resources', () =>
     {
         expect(INSTALLED).toBeArray();
-        expect(INSTALLED.length).toEqual(8);
+        expect(INSTALLED.length).toEqual(9);
     });
 
     it('should auto-detect canvas element', () =>

packages/extensions/src/index.ts

@@ -121,13 +121,13 @@ const normalizePriority = (ext: ExtensionFormatLoose | any, defaultPriority: num
 const extensions = {
 
     /** @ignore */
-    _addHandlers: {} as Record<ExtensionType, ExtensionHandler>,
+    _addHandlers: {} as Partial<Record<ExtensionType, ExtensionHandler>>,
 
     /** @ignore */
-    _removeHandlers: {} as Record<ExtensionType, ExtensionHandler>,
+    _removeHandlers: {} as Partial<Record<ExtensionType, ExtensionHandler>>,
 
     /** @ignore */
-    _queue: {} as Record<ExtensionType, ExtensionFormat[]>,
+    _queue: {} as Partial<Record<ExtensionType, ExtensionFormat[]>>,
 
     /**
      * Remove extensions from PixiJS.
@@ -162,11 +162,11 @@ const extensions = {
                 if (!handlers[type])
                 {
                     queue[type] = queue[type] || [];
-                    queue[type].push(ext);
+                    queue[type]?.push(ext);
                 }
                 else
                 {
-                    handlers[type](ext);
+                    handlers[type]?.(ext);
                 }
             });
         });
@@ -203,7 +203,7 @@ const extensions = {
         // Process any plugins that have been registered before the handler
         if (queue[type])
         {
-            queue[type].forEach((ext) => onAdd(ext));
+            queue[type]?.forEach((ext) => onAdd(ext));
             delete queue[type];
         }
 
@@ -221,11 +221,17 @@ const extensions = {
         return this.handle(type,
             (extension) =>
             {
-                map[extension.name] = extension.ref;
+                if (extension.name)
+                {
+                    map[extension.name] = extension.ref;
+                }
             },
             (extension) =>
             {
-                delete map[extension.name];
+                if (extension.name)
+                {
+                    delete map[extension.name];
+                }
             }
         );
     },

packages/extensions/test/extensions.tests.ts

@@ -20,10 +20,10 @@ describe('extensions', () =>
 {
     afterEach(() =>
     {
-        extensions['_addHandlers'][exampleType] = undefined;
-        extensions['_removeHandlers'][exampleType] = undefined;
-        extensions['_addHandlers'][exampleType2] = undefined;
-        extensions['_removeHandlers'][exampleType2] = undefined;
+        delete extensions['_addHandlers'][exampleType];
+        delete extensions['_removeHandlers'][exampleType];
+        delete extensions['_addHandlers'][exampleType2];
+        delete extensions['_removeHandlers'][exampleType2];
     });
 
     describe('handle', () =>