fcr-ui-scene 3.8.1-beta → 3.8.2

package/lib-es/modules/action-bar/waiting-scene/view.js

@@ -0,0 +1,116 @@
+import "core-js/modules/es.symbol.js";
+import "core-js/modules/es.array.filter.js";
+import "core-js/modules/es.array.for-each.js";
+import "core-js/modules/es.array.push.js";
+import "core-js/modules/es.object.define-properties.js";
+import "core-js/modules/es.object.define-property.js";
+import "core-js/modules/es.object.get-own-property-descriptor.js";
+import "core-js/modules/es.object.get-own-property-descriptors.js";
+import "core-js/modules/es.object.keys.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/esnext.iterator.constructor.js";
+import "core-js/modules/esnext.iterator.filter.js";
+import "core-js/modules/esnext.iterator.for-each.js";
+import "core-js/modules/web.dom-collections.for-each.js";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { FcrButton } from 'agora-ui-foundation/lib/components/button';
+import { FcrPopover } from 'agora-ui-foundation/lib/components/popover';
+import { useI18n } from 'agora-ui-foundation/lib/i18n';
+import { observer } from 'mobx-react';
+import { useContext, useEffect, useMemo, useState } from 'react';
+import ReactDOM from 'react-dom';
+import DeviceControl from '../../components/device-control';
+import { LeaveMeeting } from '../../components/leave-meeting';
+import { LeaveMeetingPortal } from '../../components/leave-meeting/portal';
+import { ActionBarItemPlacement } from '../components/placement';
+import { ActionBarContext } from './store.base';
+import { actionBarClassName } from '../constants';
+import '../index.css';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+var End = observer(function (props) {
+  var opened = props.opened,
+    setOpenedState = props.setOpenedState;
+  var _useContext = useContext(ActionBarContext),
+    stateBarLeaveMeeting = _useContext.stateBarLeaveMeeting,
+    setStateBarLeaveMeeting = _useContext.setStateBarLeaveMeeting;
+  var transI18n = useI18n();
+  var leaveMeetingContent = /*#__PURE__*/_jsx(LeaveMeeting, {
+    setPopoverOpened: function setPopoverOpened(value) {
+      if (value === false) {
+        setOpenedState(false);
+        setStateBarLeaveMeeting(false);
+      }
+    }
+  });
+  var LeaveMeetingPortals = function LeaveMeetingPortals() {
+    var portalContent = /*#__PURE__*/_jsx(LeaveMeetingPortal, {
+      children: leaveMeetingContent
+    });
+    return /*#__PURE__*/ReactDOM.createPortal(portalContent, document.body);
+  };
+  var buttonProps = useMemo(function () {
+    return opened ? {
+      type: 'gray'
+    } : {
+      styleType: 'danger'
+    };
+  }, [opened]);
+  useEffect(function () {
+    if (!stateBarLeaveMeeting) return;
+    setOpenedState(false);
+    var container = document.getElementById('fcr-action-bar--leave-meeting-portal');
+    var handleClickOutside = function handleClickOutside(event) {
+      if (!(container !== null && container !== void 0 && container.contains(event.target))) {
+        setStateBarLeaveMeeting(false);
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return function () {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [stateBarLeaveMeeting]);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(FcrPopover, {
+      showArrow: false,
+      overlayClassName: "fcr-action-bar--device-popover fcr-action-bar--leave-popover",
+      overlayInnerStyle: {
+        width: 280
+      },
+      visible: opened,
+      onVisibleChange: setOpenedState,
+      trigger: "click",
+      placement: "topRight",
+      content: leaveMeetingContent,
+      children: /*#__PURE__*/_jsx(FcrButton, _objectSpread(_objectSpread({
+        shape: "rounded",
+        size: "XS"
+      }, buttonProps), {}, {
+        children: opened ? transI18n('fmt_toolbar_button_cancel') : transI18n('fmt_toolbar_button_leave')
+      }))
+    }), stateBarLeaveMeeting && LeaveMeetingPortals()]
+  });
+});
+export var FcrActionBarWaitingScene = function FcrActionBarWaitingScene() {
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    endOpened = _useState2[0],
+    setEndOpenedState = _useState2[1];
+  return /*#__PURE__*/_jsx("div", {
+    className: actionBarClassName,
+    children: /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(ActionBarItemPlacement, {
+        placement: "left",
+        children: !endOpened && /*#__PURE__*/_jsx(DeviceControl, {})
+      }), /*#__PURE__*/_jsx(ActionBarItemPlacement, {
+        placement: "right",
+        children: /*#__PURE__*/_jsx(End, {
+          opened: endOpened,
+          setOpenedState: setEndOpenedState
+        })
+      })]
+    })
+  });
+};

package/lib-es/modules/audio-stream/index.js

@@ -0,0 +1,393 @@
+import "core-js/modules/es.reflect.construct.js";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import "core-js/modules/es.array.concat.js";
+import "core-js/modules/es.array.find.js";
+import "core-js/modules/es.array.for-each.js";
+import "core-js/modules/es.array.includes.js";
+import "core-js/modules/es.array.iterator.js";
+import "core-js/modules/es.array.map.js";
+import "core-js/modules/es.map.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/es.string.iterator.js";
+import "core-js/modules/esnext.iterator.constructor.js";
+import "core-js/modules/esnext.iterator.find.js";
+import "core-js/modules/esnext.iterator.for-each.js";
+import "core-js/modules/esnext.iterator.map.js";
+import "core-js/modules/esnext.map.delete-all.js";
+import "core-js/modules/esnext.map.emplace.js";
+import "core-js/modules/esnext.map.every.js";
+import "core-js/modules/esnext.map.filter.js";
+import "core-js/modules/esnext.map.find.js";
+import "core-js/modules/esnext.map.find-key.js";
+import "core-js/modules/esnext.map.includes.js";
+import "core-js/modules/esnext.map.key-of.js";
+import "core-js/modules/esnext.map.map-keys.js";
+import "core-js/modules/esnext.map.map-values.js";
+import "core-js/modules/esnext.map.merge.js";
+import "core-js/modules/esnext.map.reduce.js";
+import "core-js/modules/esnext.map.some.js";
+import "core-js/modules/esnext.map.update.js";
+import "core-js/modules/web.dom-collections.for-each.js";
+import "core-js/modules/web.dom-collections.iterator.js";
+import "core-js/modules/web.timers.js";
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+import { UIModule } from '../../base';
+import { FcrRoomConnectorType, FcrStreamType } from 'fcr-core';
+import { FcrUIAction } from '../../utilities/constant';
+import { createLogger } from '../../utilities/logger';
+import { FcrUIObjectKeys } from '../../object-manager';
+var EventType = /*#__PURE__*/function (EventType) {
+  EventType["START"] = "start";
+  EventType["STOP"] = "stop";
+  return EventType;
+}(EventType || {});
+var INIT_MAIN_ROOM_VOLUME_SUPPRESS_PERCENT = 25; // 初始主房间音量抑制的百分比
+
+export var AudioStreamUIModule = /*#__PURE__*/function (_UIModule) {
+  function AudioStreamUIModule(parentNode) {
+    var _this;
+    _classCallCheck(this, AudioStreamUIModule);
+    _this = _callSuper(this, AudioStreamUIModule, [parentNode]);
+    _defineProperty(_this, "logger", createLogger({
+      prefix: 'AudioStreamUIModule'
+    }));
+    _defineProperty(_this, "_isPstn", false);
+    _defineProperty(_this, "_disposers", []);
+    _defineProperty(_this, "_indicateTimerId", null);
+    _defineProperty(_this, "_volumeTimerId", null);
+    _defineProperty(_this, "_streamControlObserverMap", new Map());
+    _defineProperty(_this, "_turnOnMainRoomAudio", function () {
+      var streamControl = _this._streamControl;
+      if (streamControl) {
+        var streamList = streamControl.getStreamList();
+        // 订阅主房间音频
+        _this._handleRemoteAudio(streamControl, streamList
+        //  'turnOnMainRoomAudio'
+        );
+        if (_this._streamObserver) {
+          streamControl.addObserver(_this._streamObserver);
+        }
+        // 监听主房间音频
+      }
+    });
+    _defineProperty(_this, "_turnOffMainRoomAudio", function () {
+      var streamControl = _this._streamControl;
+      var streamList = streamControl.getStreamList();
+      if (streamControl && streamList) {
+        // 取消订阅主房间音频
+        _this._handleStopAudio(streamControl, streamList);
+      }
+      if (_this._streamObserver) {
+        // 取消监听主房间音频
+        streamControl.removeObserver(_this._streamObserver);
+      }
+    });
+    // 切换主房间音频
+    _defineProperty(_this, "_toggleMainRemoteAudio", function (event) {
+      // this._isMainRoomAudioOff = event !== EventType.START;
+      _this._deviceProvider.setMainRoomAudioOff(event !== EventType.START);
+      if (_this._deviceProvider.isAudioConnected) {
+        if (!_this._deviceProvider.isMainRoomAudioOff) {
+          _this._turnOnMainRoomAudio();
+        } else {
+          _this._turnOffMainRoomAudio();
+        }
+      }
+    });
+    // 切换翻译官房间音频
+    _defineProperty(_this, "_toggleInterperterRemoteAudio", function (roomControl, event) {
+      var _ref = roomControl.getRoomInfo() || {},
+        roomId = _ref.roomId;
+      var roomStreamControl = roomControl.getStreamControl();
+      if (roomId) {
+        if (event === EventType.START) {
+          _this.logger.info("".concat(roomId, "  addObserver ").concat(!_this._streamControlObserverMap.has(roomId) ? 'succeed' : 'fail', " "));
+          if (!_this._streamControlObserverMap.has(roomId)) {
+            var streamObserver = _this._createStreamObserver(roomStreamControl);
+            _this._streamControlObserverMap.set(roomId, {
+              streamObserver: streamObserver,
+              roomStreamControl: roomStreamControl
+            });
+            roomStreamControl.addObserver(streamObserver);
+          }
+          _this._handleRemoteAudio(roomStreamControl, roomStreamControl.getStreamList());
+        }
+        if (event === EventType.STOP) {
+          var _ref2 = _this._streamControlObserverMap.get(roomId) || {},
+            _streamObserver = _ref2.streamObserver;
+          _this.logger.info("".concat(roomId, "  removeObserver ").concat(!!_streamObserver ? 'succeed' : 'fail', " "));
+          if (_streamObserver) {
+            roomStreamControl.removeObserver(_streamObserver);
+            _this._streamControlObserverMap["delete"](roomId);
+          }
+          _this._handleStopAudio(roomStreamControl, roomStreamControl.getStreamList());
+        }
+      }
+    });
+    _defineProperty(_this, "_handleRemoteAudio", function (streamControl, streams
+    // key: string,
+    ) {
+      if (_this._isPstn) {
+        streamControl.getStreamList().forEach(function (stream) {
+          // stop playing all remote audio streams
+          if (stream.owner.userId !== _this._localUser.userId) {
+            _this.logger.info('stop play remote audio', stream.streamId);
+            streamControl.stopPlayRemoteAudioStream(stream.streamId);
+          }
+        });
+      } else {
+        streams.forEach(function (stream) {
+          if (stream.owner.userId !== _this._localUser.userId) {
+            var isAudioPublished = stream.streamType === FcrStreamType.AUDIO || stream.streamType === FcrStreamType.BOTH;
+
+            // const isAudioDeviceStarted = stream.audioSourceState === FcrMediaSourceState.OPEN;
+
+            if (isAudioPublished) {
+              _this.logger.info('start play remote audio', stream.streamId);
+              streamControl.startPlayRemoteAudioStream(stream.streamId);
+            } else {
+              _this.logger.info('stop play remote audio', stream.streamId);
+              streamControl.stopPlayRemoteAudioStream(stream.streamId);
+            }
+          }
+        });
+      }
+    });
+    _defineProperty(_this, "_handleStopAudio", function (streamControl, streams) {
+      streams.forEach(function (stream) {
+        if (stream.owner.userId !== _this._localUser.userId) {
+          _this.logger.info('stop play remote audio', stream.streamId);
+          streamControl.stopPlayRemoteAudioStream(stream.streamId);
+        }
+      });
+    });
+    _defineProperty(_this, "_hasLocalPstnStream", function (streams) {
+      var pstnStream = streams.find(function (stream) {
+        return stream.connectorType === FcrRoomConnectorType.PSTN && stream.owner.userId === _this._localUser.userId;
+      });
+      return !!pstnStream;
+    });
+    _defineProperty(_this, "_handleUiEvent", function (action, payload) {
+      switch (action) {
+        // 切换语言房间订阅  ( 翻译官切换收听语言房间 为输出的语音房间时 单独出发订阅订阅 )
+        case FcrUIAction.TOGGLE_INTERPRETER_REMOTE_AUDIO:
+          _this._toggleInterperterRemoteAudio(payload.roomControl, payload.event);
+          break;
+        //  切换收主房间(原声)订阅
+        case FcrUIAction.TOGGLE_MAINROOM_REMOTE_AUDIO:
+          _this._toggleMainRemoteAudio(payload.event);
+          break;
+      }
+    });
+    _defineProperty(_this, "_handleJoinInterpretingRoomSuccess", function (param) {
+      if (param.isToggleInterperterRemoteAudio) {
+        _this._toggleInterperterRemoteAudio(param.control, EventType.START);
+      }
+    });
+    _defineProperty(_this, "_handleLeaveInterpretingRoom", function (param) {
+      if (param.isToggleInterperterRemoteAudio) {
+        _this._toggleInterperterRemoteAudio(param.control, EventType.STOP);
+      }
+    });
+    _defineProperty(_this, "_createStreamObserver", function (streamControl) {
+      var onStreamsAdded = function onStreamsAdded(_roomId, events) {
+        var streams = events.map(function (event) {
+          return event.modifiedStream;
+        });
+        if (!_this._isPstn && _this._hasLocalPstnStream(streams)) {
+          _this.logger.info("PSTN stream is created");
+          _this._isPstn = true;
+          _this.logger.info('found local PSTN stream, close microphone');
+          // close microphone as audio input and output through mobile phone
+          _this._deviceProvider.setMicrophoneEnabled(false);
+          _this.logger.info('found local PSTN stream, stop play all remote audio');
+          _this._handleRemoteAudio(streamControl, streamControl.getStreamList());
+        } else {
+          _this._handleRemoteAudio(streamControl, streams);
+        }
+      };
+      var onStreamsUpdated = function onStreamsUpdated(_roomId, events) {
+        var streams = events.map(function (event) {
+          return event.modifiedStream;
+        });
+        if (!_this._isPstn && _this._hasLocalPstnStream(streams)) {
+          _this.logger.info('PSTN stream is updated');
+          _this._isPstn = true;
+          _this.logger.info('found local PSTN stream, close microphone');
+          // close microphone as audio input and output through mobile phone
+          _this._deviceProvider.setMicrophoneEnabled(false);
+          _this.logger.info('found local PSTN stream, stop play all remote audio');
+          _this._handleRemoteAudio(streamControl, streamControl.getStreamList()
+          // '_handleStreamsUpdated11111',
+          );
+        } else {
+          _this._handleRemoteAudio(streamControl, streams
+          // '_handleStreamsUpdated22222'
+          );
+        }
+      };
+      var onStreamsRemoved = function onStreamsRemoved(_roomId, events) {
+        var streams = events.map(function (event) {
+          return event.modifiedStream;
+        });
+        if (_this._hasLocalPstnStream(streams)) {
+          _this.logger.info('PSTN stream is removed');
+          _this._isPstn = false;
+          _this._handleRemoteAudio(streamControl, streamControl.getStreamList()
+          // '_handleStreamsRemoved',
+          );
+        }
+        events.forEach(function (event) {
+          if (event.modifiedStream.owner.userId === _this._localUser.userId) {
+            return;
+          }
+          _this.logger.info('stop play remote audio', event.modifiedStream.streamId);
+          _this._streamControl.stopPlayRemoteAudioStream(event.modifiedStream.streamId);
+        });
+      };
+      return {
+        onStreamsAdded: onStreamsAdded,
+        onStreamsUpdated: onStreamsUpdated,
+        onStreamsRemoved: onStreamsRemoved
+      };
+    });
+    _defineProperty(_this, "_setMainRoomStreamVolume", function (volume) {
+      /**
+       * TODO 待音量增益的逻辑调整后，再使用
+       * const speakerVolume = (volume / 100) * this._deviceProvider.speakerVolume;
+       */
+      var speakerVolume = volume;
+      var mainStreamControl = _this._streamControl;
+      mainStreamControl.getStreamList().forEach(function (stream) {
+        var needSetVolume = [FcrStreamType.AUDIO, FcrStreamType.BOTH].includes(stream.streamType);
+        if (needSetVolume) {
+          mainStreamControl.adjustRemoteAudioStreamVolume(stream.streamId, speakerVolume);
+        }
+      });
+      _this._clearTimer();
+    });
+    _defineProperty(_this, "_restoreVolumeByMainRoom", function () {
+      if (_this._volumeTimerId) return;
+      var endValue = 100; // 恢复后的音量百分比
+      var duration = 2000; // 在 2 秒内逐渐放大
+      var interval = 50; // 更新间隔为 50ms
+
+      var volume = INIT_MAIN_ROOM_VOLUME_SUPPRESS_PERCENT;
+      var steps = (endValue - INIT_MAIN_ROOM_VOLUME_SUPPRESS_PERCENT) / (duration / interval);
+      _this._volumeTimerId = setInterval(function () {
+        volume += steps;
+        if (volume >= endValue) {
+          volume = endValue;
+          _this._clearTimer();
+        }
+        _this._setMainRoomStreamVolume(volume);
+      }, interval);
+    });
+    _this.parentNode = parentNode;
+    _this._eventObserver = {
+      onEvent: _this._handleUiEvent
+    };
+    _this._interpreterObserver = {
+      onJoinInterpretingRoomSuccess: _this._handleJoinInterpretingRoomSuccess,
+      onLeaveInterpretingRoom: _this._handleLeaveInterpretingRoom,
+      onSubscribeLanguageVolumePrioritized: function onSubscribeLanguageVolumePrioritized(enable) {
+        if (enable) {
+          // HLD: 主房输出音量设置为25，语言房间设置输出音频为100
+          _this._setMainRoomStreamVolume(INIT_MAIN_ROOM_VOLUME_SUPPRESS_PERCENT);
+        } else {
+          // PRD: 参会人听到的是译员的声音及轻微的原始音频声音。当语言频道内 6 秒内没有译员发言，原始音频的音量将在接下来的 2 秒内逐渐放大到正常音量。
+          if (!_this._indicateTimerId) {
+            _this._indicateTimerId = setTimeout(function () {
+              _this._restoreVolumeByMainRoom();
+            }, 6000);
+          }
+        }
+      }
+    };
+    _this._deviceObserver = {
+      onAudioConnected: function onAudioConnected() {
+        if (!_this._deviceProvider.isMainRoomAudioOff) {
+          _this._turnOnMainRoomAudio();
+        }
+      },
+      onAudioDisconnected: function onAudioDisconnected() {
+        if (!_this._deviceProvider.isMainRoomAudioOff) {
+          _this._turnOffMainRoomAudio();
+        }
+      },
+      onSpeakerVolumeChanged: function onSpeakerVolumeChanged(volume) {
+        if (_this._indicateTimerId) {
+          _this._setMainRoomStreamVolume(INIT_MAIN_ROOM_VOLUME_SUPPRESS_PERCENT);
+        }
+      }
+    };
+    return _this;
+  }
+  _inherits(AudioStreamUIModule, _UIModule);
+  return _createClass(AudioStreamUIModule, [{
+    key: "_localUser",
+    get: function get() {
+      return this._userControl.getLocalUser();
+    }
+  }, {
+    key: "onNodeWillActive",
+    value: function onNodeWillActive() {
+      var objectManager = this.objectManager;
+      var mainRoomControl = objectManager.getObject(FcrUIObjectKeys.P_MAIN_ROOM_CONTROL_PROVIDER).mainRoomControl;
+      var interpreterProvider = objectManager.getObject(FcrUIObjectKeys.P_INTERPRETER_PROVIDER);
+      var eventProvider = objectManager.getObject(FcrUIObjectKeys.P_EVENT_PROVIDER);
+      var deviceProvider = objectManager.getObject(FcrUIObjectKeys.P_DEVICE_PROVIDER);
+      this._streamControl = mainRoomControl.getStreamControl();
+      this._userControl = mainRoomControl.getUserControl();
+      this._interpreterProvider = interpreterProvider;
+      this._eventProvider = eventProvider;
+      this._deviceProvider = deviceProvider;
+      var streams = this._streamControl.getStreamList();
+      this._isPstn = this._hasLocalPstnStream(streams);
+      this._streamObserver = this._createStreamObserver(this._streamControl);
+      this._deviceProvider.addObserver(this._deviceObserver);
+      this._interpreterProvider.addObserver(this._interpreterObserver);
+      this._eventProvider.addObserver(this._eventObserver);
+      if (!this._deviceProvider.isMainRoomAudioOff && this._deviceProvider.isAudioConnected) {
+        this._turnOnMainRoomAudio();
+      }
+    }
+  }, {
+    key: "nodeWillInactive",
+    value: function nodeWillInactive() {
+      this._disposers.forEach(function (disposer) {
+        return disposer();
+      });
+      this._disposers = [];
+      this._eventProvider.removeObserver(this._eventObserver);
+      this._interpreterProvider.removeObserver(this._interpreterObserver);
+      this._streamControl.removeObserver(this._streamObserver);
+      this._deviceProvider.removeObserver(this._deviceObserver);
+      this._streamControlObserverMap.forEach(function (_ref3) {
+        var roomStreamControl = _ref3.roomStreamControl,
+          streamObserver = _ref3.streamObserver;
+        roomStreamControl.removeObserver(streamObserver);
+      });
+      this._streamControlObserverMap.clear();
+      this._clearTimer();
+    }
+  }, {
+    key: "_clearTimer",
+    value: function _clearTimer() {
+      if (this._indicateTimerId) {
+        clearTimeout(this._indicateTimerId);
+        this._indicateTimerId = null;
+      }
+      if (this._volumeTimerId) {
+        clearInterval(this._volumeTimerId);
+        this._volumeTimerId = null;
+      }
+    }
+  }]);
+}(UIModule);

package/lib-es/modules/caption/draggable-container/index.css

@@ -0,0 +1,10 @@
+.fcr-draggable-subtitles-container {
+  width: calc(100% - 10px);
+  /* height: calc(100% - 34px - 55px); */
+  position: absolute;
+  /* top: 34px;
+  bottom: 55px; */
+  left: 5px;
+  right: 5px;
+  margin: auto 0;
+}

package/lib-es/modules/caption/draggable-container/index.js

@@ -0,0 +1,159 @@
+import "core-js/modules/es.symbol.js";
+import "core-js/modules/es.symbol.description.js";
+import "core-js/modules/es.symbol.iterator.js";
+import "core-js/modules/es.error.cause.js";
+import "core-js/modules/es.error.to-string.js";
+import "core-js/modules/es.array.from.js";
+import "core-js/modules/es.array.is-array.js";
+import "core-js/modules/es.array.iterator.js";
+import "core-js/modules/es.array.slice.js";
+import "core-js/modules/es.date.to-string.js";
+import "core-js/modules/es.function.name.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/es.regexp.exec.js";
+import "core-js/modules/es.regexp.test.js";
+import "core-js/modules/es.regexp.to-string.js";
+import "core-js/modules/es.string.iterator.js";
+import "core-js/modules/web.dom-collections.iterator.js";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+import "core-js/modules/es.array.concat.js";
+import { useState, useEffect, useRef } from 'react';
+import { observer } from 'mobx-react';
+import { Rnd } from 'react-rnd';
+import './index.css';
+import { jsx as _jsx } from "react/jsx-runtime";
+var minWidth = 440;
+var actionBarHeight = 55;
+var stateBarHeight = 34;
+var bottomOffsetCompensation = 22;
+var offsetHeight = actionBarHeight + stateBarHeight + bottomOffsetCompensation;
+var style = {
+  top: stateBarHeight,
+  bottom: actionBarHeight,
+  height: "calc(100% - ".concat(stateBarHeight, "px - ").concat(actionBarHeight, "px)")
+};
+var enableResizing = {
+  top: false,
+  right: true,
+  bottom: false,
+  left: true,
+  topRight: false,
+  bottomRight: false,
+  bottomLeft: false,
+  topLeft: false
+};
+export var DraggableContainer = observer(function (_ref) {
+  var children = _ref.children;
+  var parentRef = useRef(null);
+  var preParentHeight = useRef(0);
+  var preParentWidth = useRef(0);
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    position = _useState2[0],
+    setPosition = _useState2[1];
+  var _useState3 = useState({
+      width: 750,
+      height: 'auto'
+    }),
+    _useState4 = _slicedToArray(_useState3, 2),
+    size = _useState4[0],
+    setSize = _useState4[1];
+  var onDrag = function onDrag(_, data) {
+    setPosition(data);
+  };
+  var onResize = function onResize(e, dir, elementRef, delta, position) {
+    setSize({
+      width: elementRef.offsetWidth,
+      height: size.height
+    });
+    if (dir === 'left') {
+      setPosition(position);
+    }
+  };
+  var resizeObserverCallback = function resizeObserverCallback(entries) {
+    var _iterator = _createForOfIteratorHelper(entries),
+      _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var entry = _step.value;
+        var _entry$contentRect = entry.contentRect,
+          resizedParentWidth = _entry$contentRect.width,
+          resizedParentHeight = _entry$contentRect.height;
+        if (preParentWidth.current !== resizedParentWidth || preParentHeight.current !== resizedParentHeight) {
+          var defaultSizeHeight = 94;
+          if (position) {
+            var scaleX = (position.x + size.width / 2) / preParentWidth.current;
+            var scaley = (position.y + defaultSizeHeight / 2) / preParentHeight.current;
+            var newY = resizedParentHeight * scaley - defaultSizeHeight / 2;
+            setPosition({
+              x: resizedParentWidth * scaleX - size.width / 2,
+              y: resizedParentHeight - newY < offsetHeight ? resizedParentHeight - offsetHeight : newY
+            });
+          }
+        }
+        preParentWidth.current = resizedParentWidth;
+        preParentHeight.current = resizedParentHeight;
+
+        // if (position && resizedParentWidth < size.width + position.x) {
+        //   const isResize = size.width > resizedParentWidth;
+        //   setPosition({
+        //     x: isResize ? 0 : resizedParentWidth - size.width,
+        //     y: position.y,
+        //   });
+        //   setSize({
+        //     width: isResize ? resizedParentWidth : size.width,
+        //     height: size.height,
+        //   });
+        // }
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+  };
+  useEffect(function () {
+    if (parentRef.current) {
+      var parentWidth = parentRef.current.offsetWidth;
+      var parentHeight = parentRef.current.offsetHeight;
+      preParentWidth.current = parentWidth;
+      preParentHeight.current = parentHeight;
+      setPosition({
+        x: parentWidth / 2 - size.width / 2,
+        y: parentHeight - offsetHeight
+      });
+    }
+  }, [parentRef.current]);
+
+  // 监听父容器尺寸变化 重置宽度和位置
+  useEffect(function () {
+    var container = parentRef.current;
+    if (!container) return;
+    var resizeObserver = new ResizeObserver(resizeObserverCallback);
+    resizeObserver.observe(container);
+    return function () {
+      resizeObserver.disconnect();
+    };
+  }, [position, size]);
+  return /*#__PURE__*/_jsx("div", {
+    className: "fcr-draggable-subtitles-container",
+    style: style,
+    ref: parentRef,
+    children: position && /*#__PURE__*/_jsx(Rnd, {
+      size: size,
+      position: position,
+      minWidth: minWidth,
+      onDragStop: onDrag,
+      onResizeStop: onResize,
+      bounds: "parent",
+      enableResizing: enableResizing,
+      style: {
+        zIndex: 999
+      },
+      children: children
+    })
+  });
+});