@realsee/vreo 2.6.4-alpha.2 → 2.6.4-alpha.3

package/lib/fivePlugins/ModelTVVideoPlugin/index.js

@@ -5,7 +5,7 @@ function _regeneratorDefine2(e, r, n, t) { var i = Object.defineProperty; try {
 import * as THREE from 'three';
 export var ModelTVVideoPlugin = function ModelTVVideoPlugin(five, _ref) {
   var videoElement = _ref.videoElement,
-    canPlay = _ref.canPlay;
+    mediaManager = _ref.mediaManager;
   var listeners = [];
   var on = function on(name, callback) {
     listeners.push(function () {
@@ -23,62 +23,115 @@ export var ModelTVVideoPlugin = function ModelTVVideoPlugin(five, _ref) {
     enabled: false,
     videoElement: videoElement
   };
+  var session;
+  var output;
+  var removeReady;
+  var stop = function stop() {
+    var _removeReady;
+    ++generation;
+    (_removeReady = removeReady) === null || _removeReady === void 0 || _removeReady();
+    removeReady = undefined;
+    if (output) {
+      output.muted = true;
+      output.pause();
+    }
+    output = undefined;
+    session = undefined;
+    state.enabled = false;
+    state.videoMeshes.forEach(function (mesh) {
+      mesh.geometry.dispose();
+      mesh.material.dispose();
+      five.scene.remove(mesh);
+    });
+    state.videoMeshes = [];
+    five.needsRender = true;
+  };
+  var controller = mediaManager === null || mediaManager === void 0 ? void 0 : mediaManager.createController({
+    label: 'vreo-model-video',
+    onCancel: stop
+  });
+  var bind = function bind(userAction, audible) {
+    var _state$videoTexture, _controller$begin;
+    var element = (_state$videoTexture = state.videoTexture) === null || _state$videoTexture === void 0 ? void 0 : _state$videoTexture.image;
+    if (!element) return undefined;
+    var next = (_controller$begin = controller === null || controller === void 0 ? void 0 : controller.begin({
+      userAction: userAction,
+      audible: audible
+    })) !== null && _controller$begin !== void 0 ? _controller$begin : undefined;
+    if (controller && !next) return undefined;
+    session = next;
+    return output = next ? next.bind(element) : element;
+  };
   var setMuted = function setMuted(muted) {
-    if (state.videoTexture) {
-      if (!muted && canPlay && !canPlay()) return;
-      state.videoTexture.image.muted = muted;
-      if (state.enabled && (!canPlay || canPlay())) void state.videoTexture.image.play();
+    var userAction = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    var wasEnabled = state.enabled;
+    var media = !muted ? bind(userAction, true) : output;
+    if (!media) return;
+    media.muted = muted;
+    if (wasEnabled && !state.enabled) {
+      state.enabled = true;
+      state.videoMeshes = createPanoVideoMeshes();
+      state.videoMeshes.forEach(function (mesh) {
+        return five.scene.add(mesh);
+      });
     }
+    var run = session;
+    var current = generation;
+    if (state.enabled) void media.play().catch(function (error) {
+      if (current === generation && !(run !== null && run !== void 0 && run.signal.aborted)) {
+        disable();
+        console.error(error);
+      }
+    });
   };
   var getMuted = function getMuted() {
-    if (state.videoTexture) return state.videoTexture.image.muted;else return true;
+    var _output$muted, _output;
+    return (_output$muted = (_output = output) === null || _output === void 0 ? void 0 : _output.muted) !== null && _output$muted !== void 0 ? _output$muted : true;
   };
   var enable = function enable() {
-    if (disposed || state.enabled || canPlay && !canPlay()) return;
-    if (!state.videoTexture) return;
+    if (disposed || state.enabled || !state.videoTexture) return;
+    var media = bind(false, false);
+    if (!media) return;
+    var current = generation;
+    var run = session;
+    var element = state.videoTexture.image;
+    var valid = function valid() {
+      return current === generation && !disposed && state.enabled && !(run !== null && run !== void 0 && run.signal.aborted);
+    };
     state.enabled = true;
     state.videoMeshes = createPanoVideoMeshes();
     state.videoMeshes.forEach(function (mesh) {
       return five.scene.add(mesh);
     });
-    var play = function play() {
-      if (!state.videoTexture || !state.enabled || canPlay && !canPlay()) return;
-      var _timeupdate = function timeupdate() {
-        var _state$videoTexture;
-        if (!state.videoTexture) return;
-        (_state$videoTexture = state.videoTexture) === null || _state$videoTexture === void 0 || _state$videoTexture.image.removeEventListener('timeupdate', _timeupdate);
-        state.videoTextureEnabled = true;
-        state.videoMeshes.forEach(function (mesh) {
-          if (mesh.material.map !== state.videoTexture) mesh.material.map = state.videoTexture;
-        });
-        five.needsRender = true;
-      };
-      state.videoTexture.image.addEventListener('timeupdate', _timeupdate);
-      if (state.videoTexture && state.videoMeshes.length) {
-        state.videoTexture.image.play();
-      }
+    var _timeupdate = function timeupdate() {
+      element.removeEventListener('timeupdate', _timeupdate);
+      if (!valid()) return;
+      state.videoTextureEnabled = true;
+      state.videoMeshes.forEach(function (mesh) {
+        mesh.material.map = state.videoTexture;
+      });
+      five.needsRender = true;
     };
-    if (five.model.loaded) play();else {
-      return five.once('modelLoaded', function () {
-        return play();
+    var _play = function play() {
+      five.off('modelLoaded', _play);
+      if (!valid()) return;
+      element.addEventListener('timeupdate', _timeupdate);
+      void media.play().catch(function (error) {
+        if (valid()) {
+          disable();
+          console.error(error);
+        }
       });
-    }
+    };
+    removeReady = function removeReady() {
+      five.off('modelLoaded', _play);
+      element.removeEventListener('timeupdate', _timeupdate);
+    };
+    if (five.model.loaded) _play();else five.on('modelLoaded', _play);
   };
   var disable = function disable() {
-    if (state.videoTexture) {
-      state.videoTexture.image.muted = true;
-      state.videoTexture.image.pause();
-    }
-    if (!state.enabled) return;
-    state.enabled = false;
-    state.videoMeshes.forEach(function (mesh) {
-      mesh.geometry.dispose();
-      mesh.material.dispose();
-      five.scene.remove(mesh);
-      if (state.videoTexture) state.videoTexture.image.pause();
-    });
-    state.videoMeshes = [];
-    five.needsRender = true;
+    controller === null || controller === void 0 || controller.cancel();
+    stop();
   };
   var createPanoVideoMeshes = function createPanoVideoMeshes() {
     return state.rectPoints.map(function (points, index) {
@@ -131,15 +184,22 @@ export var ModelTVVideoPlugin = function ModelTVVideoPlugin(five, _ref) {
     return texture;
   };
   var getVideoTexture = function getVideoTexture(source, video) {
+    var valid = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : function () {
+      return true;
+    };
     return new Promise(function (resolve, reject) {
       var xhr = new XMLHttpRequest();
       xhr.onreadystatechange = function () {
         if (xhr.readyState == 4) {
+          if (!valid()) {
+            reject(new DOMException('Playback cancelled', 'AbortError'));
+            return;
+          }
           if (xhr.status == 200) {
             var url = window.URL || window.webkitURL;
             video = video || document.createElement('video');
             video.crossOrigin = 'anonymous';
-            video.autoplay = true;
+            video.autoplay = false;
             video.muted = true;
             video.loop = true;
             video.playsInline = true;
@@ -186,7 +246,9 @@ export var ModelTVVideoPlugin = function ModelTVVideoPlugin(five, _ref) {
               state.videoElement = videoElement;
             }
             _context.n = 1;
-            return getVideoTexture(state.videoSource, state.videoElement);
+            return getVideoTexture(state.videoSource, state.videoElement, function () {
+              return !disposed && current === generation;
+            });
           case 1:
             texture = _context.v;
             if (!(disposed || current !== generation)) {
@@ -224,7 +286,7 @@ export var ModelTVVideoPlugin = function ModelTVVideoPlugin(five, _ref) {
       _raycaster$intersectO2 = _slicedToArray(_raycaster$intersectO, 1),
       intersect = _raycaster$intersectO2[0];
     if (!!intersect && /^video/.test(intersect.object.name)) {
-      if (state.videoTexture) setMuted(!state.videoTexture.image.muted);
+      if (state.videoTexture) setMuted(!state.videoTexture.image.muted, true);
       return false;
     }
   });
@@ -266,6 +328,7 @@ export var ModelTVVideoPlugin = function ModelTVVideoPlugin(five, _ref) {
     disposed = true;
     ++generation;
     disable();
+    controller === null || controller === void 0 || controller.dispose();
     listeners.splice(0).forEach(function (remove) {
       return remove();
     });

package/lib/index.d.ts

@@ -1,2 +1,2 @@
 export { Player } from './Player';
-export type { AudioIntent, AudioStopReason, AudioLease, AudioSource, AudioFocusHost } from './Player/AudioFocus';
+export type { PlaybackManager, PlaybackController, PlaybackSession, MediaOperations } from './Player/playback-types';

package/lib/shared-utils/Audio.js

@@ -107,8 +107,9 @@ var IAudio = /*#__PURE__*/function (_Audio) {
     _defineProperty(_this, "realSrc", '');
     _defineProperty(_this, "inited", false);
     _this.realSrc = src !== null && src !== void 0 ? src : '';
+    _this.muted = true;
     _superPropGet((_this, IAudio), "addEventListener", _this, 3)(['ended', function () {
-      _this.src = '';
+      if (_this.src === blankAudioSrc) _this.src = '';
     }]);
     var init = function init() {
       return initAudio(_this);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@realsee/vreo",
-  "version": "2.6.4-alpha.2",
+  "version": "2.6.4-alpha.3",
   "type": "module",
   "description": "Vreo (VR Video 缩写) 是基于如视三维渲染引擎 Five 和 用户界面构建库 React 实现的如视 3D 空间剧本播放器。",
   "keywords": [
@@ -79,7 +79,7 @@
     "test:audio-focus": "node --test test/audio-focus.test.mjs"
   },
   "peerDependencies": {
-    "@realsee/dnalogel": "3.81.10-alpha.0",
+    "@realsee/dnalogel": "3.81.10-alpha.1",
     "@realsee/five": "^6.4.0-alpha.1",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
@@ -92,7 +92,7 @@
     "@babel/preset-env": "^7.16.4",
     "@babel/preset-react": "^7.16.0",
     "@babel/preset-typescript": "^7.16.0",
-    "@realsee/dnalogel": "3.81.10-alpha.0",
+    "@realsee/dnalogel": "3.81.10-alpha.1",
     "@realsee/five": "^6.4.0-alpha.38",
     "@tweenjs/tween.js": "18.6.4",
     "@types/node": "^18.11.17",

package/lib/Player/AudioFocus.d.ts

@@ -1,36 +0,0 @@
-export type AudioIntent = 'user' | 'auto';
-export type AudioStopReason = 'preempted' | 'paused' | 'closed' | 'replaced' | 'disposed';
-export interface AudioLease {
-    readonly signal: AbortSignal;
-    isCurrent(): boolean;
-    release(): void;
-}
-export interface AudioSource {
-    acquire(intent: AudioIntent): AudioLease | null;
-    cancel(reason: AudioStopReason): void;
-    dispose(): void;
-}
-export interface AudioFocusHost {
-    register(options: {
-        label: string;
-        stop(reason: AudioStopReason): void;
-    }): AudioSource;
-}
-/** One narration owns the outer lease; member tracks never compete with it. */
-export declare class NarrationAudioFocus {
-    private onStop;
-    private disposed;
-    private source?;
-    private lease?;
-    private task?;
-    private members;
-    constructor(host: AudioFocusHost | undefined, onStop: () => void);
-    get active(): boolean;
-    capture(): () => boolean;
-    acquire(intent: AudioIntent): boolean;
-    add(stop: (reason: AudioStopReason) => void): () => void;
-    stop(reason: AudioStopReason): void;
-    cancel(reason: AudioStopReason): void;
-    dispose(): void;
-    readonly host: AudioFocusHost;
-}

package/lib/Player/AudioFocus.js

@@ -1,139 +0,0 @@
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-/** One narration owns the outer lease; member tracks never compete with it. */
-export var NarrationAudioFocus = /*#__PURE__*/function () {
-  function NarrationAudioFocus(host, onStop) {
-    var _this = this;
-    _classCallCheck(this, NarrationAudioFocus);
-    _defineProperty(this, "disposed", false);
-    _defineProperty(this, "members", new Set());
-    _defineProperty(this, "host", {
-      register: function register(_ref) {
-        var stop = _ref.stop;
-        var disposed = false;
-        var child;
-        var cancel = function cancel(reason) {
-          var _child;
-          (_child = child) === null || _child === void 0 || _child.abort();
-          child = undefined;
-          stop(reason);
-        };
-        var remove = _this.add(cancel);
-        return {
-          acquire: function acquire() {
-            var _child2;
-            if (disposed || !_this.active) return null;
-            (_child2 = child) === null || _child2 === void 0 || _child2.abort();
-            var current = child = new AbortController();
-            var valid = _this.capture();
-            return {
-              signal: current.signal,
-              isCurrent: function isCurrent() {
-                return valid() && child === current && !current.signal.aborted;
-              },
-              release: function release() {
-                if (child === current) {
-                  current.abort();
-                  child = undefined;
-                }
-              }
-            };
-          },
-          cancel: cancel,
-          dispose: function dispose() {
-            if (disposed) return;
-            disposed = true;
-            cancel('disposed');
-            remove();
-          }
-        };
-      }
-    });
-    this.onStop = onStop;
-    this.source = host === null || host === void 0 ? void 0 : host.register({
-      label: 'vreo',
-      stop: function stop(reason) {
-        return _this.stop(reason);
-      }
-    });
-  }
-  return _createClass(NarrationAudioFocus, [{
-    key: "active",
-    get: function get() {
-      var _this$lease;
-      return !!this.task && !this.task.signal.aborted && (!this.source || !!((_this$lease = this.lease) !== null && _this$lease !== void 0 && _this$lease.isCurrent()));
-    }
-  }, {
-    key: "capture",
-    value: function capture() {
-      var _this2 = this;
-      var task = this.task;
-      return function () {
-        return !!task && task === _this2.task && _this2.active;
-      };
-    }
-  }, {
-    key: "acquire",
-    value: function acquire(intent) {
-      var _this$source;
-      if (this.disposed) return false;
-      if (this.active) return true;
-      var lease = (_this$source = this.source) === null || _this$source === void 0 ? void 0 : _this$source.acquire(intent);
-      if (this.source && !lease) return false;
-      this.lease = lease !== null && lease !== void 0 ? lease : undefined;
-      this.task = new AbortController();
-      return true;
-    }
-  }, {
-    key: "add",
-    value: function add(stop) {
-      var _this3 = this;
-      this.members.add(stop);
-      return function () {
-        _this3.members.delete(stop);
-      };
-    }
-  }, {
-    key: "stop",
-    value: function stop(reason) {
-      var _this$task;
-      (_this$task = this.task) === null || _this$task === void 0 || _this$task.abort();
-      this.task = undefined;
-      var errors = [];
-      try {
-        this.onStop();
-      } catch (error) {
-        errors.push(error);
-      }
-      for (var _i = 0, _arr = _toConsumableArray(this.members); _i < _arr.length; _i++) {
-        var _stop = _arr[_i];
-        try {
-          _stop(reason);
-        } catch (error) {
-          errors.push(error);
-        }
-      }
-      if (errors.length) throw errors[0];
-    }
-  }, {
-    key: "cancel",
-    value: function cancel(reason) {
-      var _this$source2;
-      this.stop(reason);
-      (_this$source2 = this.source) === null || _this$source2 === void 0 || _this$source2.cancel(reason);
-      this.lease = undefined;
-    }
-  }, {
-    key: "dispose",
-    value: function dispose() {
-      var _this$source3;
-      if (this.disposed) return;
-      this.disposed = true;
-      this.cancel('disposed');
-      (_this$source3 = this.source) === null || _this$source3 === void 0 || _this$source3.dispose();
-      this.members.clear();
-    }
-  }]);
-}();