@zcomponent/three-video-player 1.1.4 → 1.1.6

package/lib/components/basevideo.d.ts

@@ -56,6 +56,7 @@ export declare abstract class BaseVideo extends Object3D implements Stream {
     protected _gain: GainNode;
     protected _hadUserEvent: boolean;
     constructor(ctx: ContextManager, constructorProps: BaseVideoConstructorProps);
+    private _updateSize;
     private _updateMute;
     /**
      * The volume of the video, from 0 to 1.

package/lib/components/basevideo.js

@@ -33,6 +33,15 @@ export class BaseVideo extends Object3D {
         this.onWaiting = new Event();
         this.onError = new Event();
         this._hadUserEvent = false;
+        this._updateSize = () => {
+            if (this.videoElement.videoHeight === 0)
+                return;
+            let transparencyAspectFix = 1;
+            if (this.transparent === VideoTransparencyType.sideBySide) {
+                transparencyAspectFix = this.direction.value === SideBySideDirection.LeftRight ? 0.5 : 2;
+            }
+            this.mesh.scale.set((transparencyAspectFix * this.videoElement.videoWidth) / this.videoElement.videoHeight, 1, 1);
+        };
         this._updateMute = () => {
             if (!this.videoElement || !this._hadUserEvent)
                 return;
@@ -119,6 +128,7 @@ export class BaseVideo extends Object3D {
         this.geometry = constructorProps.geometry ?? new THREE.PlaneGeometry();
         registerLoadable(ctx, new Promise((resolve, reject) => {
             videoElement.addEventListener('canplaythrough', () => {
+                this._updateSize();
                 resolve();
             });
             videoElement.addEventListener('error', err => {
@@ -158,13 +168,8 @@ export class BaseVideo extends Object3D {
         }
         this.mesh = new THREE.Mesh(this.geometry, this.material);
         this.element.add(this.mesh);
-        this.videoElement.addEventListener('loadedmetadata', () => {
-            let transparencyAspectFix = 1;
-            if (this.transparent === VideoTransparencyType.sideBySide) {
-                transparencyAspectFix = this.direction.value === SideBySideDirection.LeftRight ? 0.5 : 2;
-            }
-            this.mesh.scale.set((transparencyAspectFix * this.videoElement.videoWidth) / this.videoElement.videoHeight, 1, 1);
-        });
+        this.videoElement.addEventListener('loadeddata', this._updateSize);
+        this.videoElement.addEventListener('loadedmetadata', this._updateSize);
         this.register(this.muted, this._updateMute);
         nextUserEvent(ctx).then(() => {
             this._hadUserEvent = true;
@@ -225,6 +230,8 @@ export class BaseVideo extends Object3D {
         this.videoElement.onplaying = null;
         this.videoElement.onwaiting = null;
         this.videoElement.onerror = null;
+        this.videoElement.src = '';
+        this.videoElement.srcObject = null;
         return super.dispose();
     }
 }

package/lib/components/videoplayer.d.ts

@@ -1,5 +1,5 @@
 import { ContextManager } from '@zcomponent/core';
-import { BaseVideo, BaseVideoConstructorProps } from './basevideo';
+import { BaseVideo, BaseVideoConstructorProps } from '../index';
 export interface VideoConstructorProps extends BaseVideoConstructorProps {
     /** @zprop
      * @zvalues files *.m3u8, *.mp4

package/lib/components/videoplayer.js

@@ -1,7 +1,7 @@
 // TODO- import type and dynamic import later
 import Hls from 'hls.js';
 import { registerLoadable } from '@zcomponent/core';
-import { BaseVideo } from './basevideo';
+import { BaseVideo } from '../index';
 /**
  *
  * Manages the playback and display of a video in a 3D environment.
@@ -27,7 +27,9 @@ export class VideoPlayer extends BaseVideo {
     }
     async load() {
         const isHls = this.constructorProps.source.endsWith('.m3u8');
-        return isHls ? this._loadHlsVideo() : this._loadMp4Video();
+        if (isHls && !this.videoElement.canPlayType('application/vnd.apple.mpegurl'))
+            return this._loadHlsVideo();
+        return this._loadMp4Video();
     }
     async _loadHlsVideo() {
         if (!Hls.isSupported()) {
@@ -90,7 +92,6 @@ export class VideoPlayer extends BaseVideo {
             this.hls.destroy();
             this.hls = null;
         }
-        this.videoElement.src = '';
         return super.dispose();
     }
 }

package/lib/index.d.ts

@@ -1,3 +1,4 @@
+export { BaseVideo, BaseVideoConstructorProps } from './components/basevideo';
 export { VideoTransparencyType } from './components/basevideo';
 export { VideoConstructorProps } from './components/videoplayer';
 export { VideoPlayer } from './components/videoplayer';

package/lib/index.js

@@ -1,2 +1,3 @@
+export { BaseVideo } from './components/basevideo';
 export { VideoTransparencyType } from './components/basevideo';
 export { VideoPlayer } from './components/videoplayer';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zcomponent/three-video-player",
-  "version": "1.1.4",
+  "version": "1.1.6",
   "description": "HLS & MP4 Player for Mattercraft",
   "author": "Zappar Limited",
   "license": "Proprietary",
@@ -19,7 +19,7 @@
     "public/**/*"
   ],
   "scripts": {
-    "build": "rm -rf lib && tsc",
+    "build": "rm -rf lib && tsc && tsc-alias",
     "watch": "tsc -w",
     "prepack": "npm run build",
     "docs": "typedoc --out docs"
@@ -28,8 +28,7 @@
     "hls.js": "^1.5.12"
   },
   "devDependencies": {
-    "@zcomponent/three": "1.26.1-beta",
-    "three": "^0.150.1"
+    "@zcomponent/three": "^1.26.2"
   },
   "peerDependencies": {
     "@zcomponent/three": "1.x",
@@ -55,16 +54,7 @@
     ],
     "plugins": [
       "@semantic-release/commit-analyzer",
-      [
-        "@semantic-release/release-notes-generator",
-        {
-          "writerOpts": {
-            "commitUrlFormat": null,
-            "issueUrlFormat": null,
-            "commitPartial": "* {{#if subject}}{{subject}}{{else}}{{header}}{{/if}}"
-          }
-        }
-      ],
+      "@semantic-release/release-notes-generator",
       "@semantic-release/changelog",
       "@semantic-release/npm",
       "@semantic-release/gitlab",
@@ -74,8 +64,8 @@
         {
           "s3Bucket": {
             "main": "mattercraft-api-docs/prod",
-            "beta": "mattercraft-api-docs/beta",
-            "alpha": "mattercraft-api-docs/alpha"
+            "beta": "mattercraft-api-docs-beta",
+            "alpha": "mattercraft-api-docs-alpha"
           },
           "directoryPath": "../../docs/**/*",
           "objectACL": "",