@videosdk.live/react-sdk 0.3.8 → 0.3.10

package/dist/index.modern.js

@@ -1,7 +1,7 @@
 import React, { createContext, useEffect, useContext, useState, useRef, useMemo, forwardRef } from 'react';
 import EventEmitter from 'events';
 import { VideoSDK } from '@videosdk.live/js-sdk';
-export { CameraDeviceInfo, DeviceInfo, MicrophoneDeviceInfo } from '@videosdk.live/js-sdk';
+export { CameraDeviceInfo, DeviceInfo, ExternalE2EEKeyProvider, MicrophoneDeviceInfo } from '@videosdk.live/js-sdk';
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -101,7 +101,12 @@ var events = {
   'whiteboard-started': eventPrifix + "-whiteboard-started",
   'whiteboard-stopped': eventPrifix + "-whiteboard-stopped",
   'paused-all-streams': eventPrifix + "-paused-all-streams",
-  'resumed-all-streams': eventPrifix + "-resumed-all-streams"
+  'resumed-all-streams': eventPrifix + "-resumed-all-streams",
+  'media-relay-started': eventPrifix + "-media-relay-started",
+  'media-relay-stopped': eventPrifix + "-media-relay-stopped",
+  'media-relay-error': eventPrifix + "-media-relay-error",
+  'media-relay-request-response': eventPrifix + "-media-relay-request-response",
+  'media-relay-request-received': eventPrifix + "-media-relay-request-received"
 };
 var eventEmitter = new EventEmitter();
 eventEmitter.setMaxListeners(9999);
@@ -189,7 +194,17 @@ var useMeeting = function useMeeting(_temp) {
     _ref$onCharacterJoine = _ref.onCharacterJoined,
     onCharacterJoined = _ref$onCharacterJoine === void 0 ? function () {} : _ref$onCharacterJoine,
     _ref$onCharacterLeft = _ref.onCharacterLeft,
-    onCharacterLeft = _ref$onCharacterLeft === void 0 ? function () {} : _ref$onCharacterLeft;
+    onCharacterLeft = _ref$onCharacterLeft === void 0 ? function () {} : _ref$onCharacterLeft,
+    _ref$onMediaRelayStar = _ref.onMediaRelayStarted,
+    onMediaRelayStarted = _ref$onMediaRelayStar === void 0 ? function () {} : _ref$onMediaRelayStar,
+    _ref$onMediaRelayStop = _ref.onMediaRelayStopped,
+    onMediaRelayStopped = _ref$onMediaRelayStop === void 0 ? function () {} : _ref$onMediaRelayStop,
+    _ref$onMediaRelayErro = _ref.onMediaRelayError,
+    onMediaRelayError = _ref$onMediaRelayErro === void 0 ? function () {} : _ref$onMediaRelayErro,
+    _ref$onMediaRelayRequ = _ref.onMediaRelayRequestResponse,
+    onMediaRelayRequestResponse = _ref$onMediaRelayRequ === void 0 ? function () {} : _ref$onMediaRelayRequ,
+    _ref$onMediaRelayRequ2 = _ref.onMediaRelayRequestReceived,
+    onMediaRelayRequestReceived = _ref$onMediaRelayRequ2 === void 0 ? function () {} : _ref$onMediaRelayRequ2;
   useEffect(function () {
     eventEmitter.on(events['participant-joined'], onParticipantJoined);
     eventEmitter.on(events['participant-left'], onParticipantLeft);
@@ -225,6 +240,11 @@ var useMeeting = function useMeeting(_temp) {
     eventEmitter.on(events['participant-mode-changed'], onParticipantModeChanged);
     eventEmitter.on(events['character-joined'], onCharacterJoined);
     eventEmitter.on(events['character-left'], onCharacterLeft);
+    eventEmitter.on(events['media-relay-started'], onMediaRelayStarted);
+    eventEmitter.on(events['media-relay-stopped'], onMediaRelayStopped);
+    eventEmitter.on(events['media-relay-error'], onMediaRelayError);
+    eventEmitter.on(events['media-relay-request-response'], onMediaRelayRequestResponse);
+    eventEmitter.on(events['media-relay-request-received'], onMediaRelayRequestReceived);
     return function () {
       eventEmitter.off(events['meeting-state-changed'], onMeetingStateChanged);
       eventEmitter.off(events['participant-joined'], onParticipantJoined);
@@ -260,6 +280,11 @@ var useMeeting = function useMeeting(_temp) {
       eventEmitter.off(events['participant-mode-changed'], onParticipantModeChanged);
       eventEmitter.off(events['character-joined'], onCharacterJoined);
       eventEmitter.off(events['character-left'], onCharacterLeft);
+      eventEmitter.off(events['media-relay-started'], onMediaRelayStarted);
+      eventEmitter.off(events['media-relay-stopped'], onMediaRelayStopped);
+      eventEmitter.off(events['media-relay-error'], onMediaRelayError);
+      eventEmitter.off(events['media-relay-request-response'], onMediaRelayRequestResponse);
+      eventEmitter.off(events['media-relay-request-received'], onMediaRelayRequestReceived);
     };
   }, []);
   return useContext(MeetingProviderContex);
@@ -333,7 +358,17 @@ var MeetingConsumer = function MeetingConsumer(_ref2) {
     _ref2$onCharacterJoin = _ref2.onCharacterJoined,
     onCharacterJoined = _ref2$onCharacterJoin === void 0 ? function () {} : _ref2$onCharacterJoin,
     _ref2$onCharacterLeft = _ref2.onCharacterLeft,
-    onCharacterLeft = _ref2$onCharacterLeft === void 0 ? function () {} : _ref2$onCharacterLeft;
+    onCharacterLeft = _ref2$onCharacterLeft === void 0 ? function () {} : _ref2$onCharacterLeft,
+    _ref2$onMediaRelaySta = _ref2.onMediaRelayStarted,
+    onMediaRelayStarted = _ref2$onMediaRelaySta === void 0 ? function () {} : _ref2$onMediaRelaySta,
+    _ref2$onMediaRelaySto = _ref2.onMediaRelayStopped,
+    onMediaRelayStopped = _ref2$onMediaRelaySto === void 0 ? function () {} : _ref2$onMediaRelaySto,
+    _ref2$onMediaRelayErr = _ref2.onMediaRelayError,
+    onMediaRelayError = _ref2$onMediaRelayErr === void 0 ? function () {} : _ref2$onMediaRelayErr,
+    _ref2$onMediaRelayReq = _ref2.onMediaRelayRequestResponse,
+    onMediaRelayRequestResponse = _ref2$onMediaRelayReq === void 0 ? function () {} : _ref2$onMediaRelayReq,
+    _ref2$onMediaRelayReq2 = _ref2.onMediaRelayRequestReceived,
+    onMediaRelayRequestReceived = _ref2$onMediaRelayReq2 === void 0 ? function () {} : _ref2$onMediaRelayReq2;
   useEffect(function () {
     eventEmitter.on(events['meeting-state-changed'], onMeetingStateChanged);
     eventEmitter.on(events['participant-joined'], onParticipantJoined);
@@ -369,6 +404,11 @@ var MeetingConsumer = function MeetingConsumer(_ref2) {
     eventEmitter.on(events['participant-mode-changed'], onParticipantModeChanged);
     eventEmitter.on(events['character-joined'], onCharacterJoined);
     eventEmitter.on(events['character-left'], onCharacterLeft);
+    eventEmitter.on(events['media-relay-started'], onMediaRelayStarted);
+    eventEmitter.on(events['media-relay-stopped'], onMediaRelayStopped);
+    eventEmitter.on(events['media-relay-error'], onMediaRelayError);
+    eventEmitter.on(events['media-relay-request-response'], onMediaRelayRequestResponse);
+    eventEmitter.on(events['media-relay-request-received'], onMediaRelayRequestReceived);
     return function () {
       eventEmitter.off(events['meeting-state-changed'], onMeetingStateChanged);
       eventEmitter.off(events['participant-joined'], onParticipantJoined);
@@ -404,12 +444,17 @@ var MeetingConsumer = function MeetingConsumer(_ref2) {
       eventEmitter.off(events['participant-mode-changed'], onParticipantModeChanged);
       eventEmitter.off(events['character-joined'], onCharacterJoined);
       eventEmitter.off(events['character-left'], onCharacterLeft);
+      eventEmitter.off(events['media-relay-started'], onMediaRelayStarted);
+      eventEmitter.off(events['media-relay-stopped'], onMediaRelayStopped);
+      eventEmitter.off(events['media-relay-error'], onMediaRelayError);
+      eventEmitter.off(events['media-relay-request-response'], onMediaRelayRequestResponse);
+      eventEmitter.off(events['media-relay-request-received'], onMediaRelayRequestReceived);
     };
   }, []);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MeetingProviderContex.Consumer, null, children));
 };
 
-var version = "0.3.0";
+var version = "0.3.10";
 
 var MeetingProvider = function MeetingProvider(_ref) {
   var children = _ref.children,
@@ -417,7 +462,8 @@ var MeetingProvider = function MeetingProvider(_ref) {
     token = _ref.token,
     joinWithoutUserInteraction = _ref.joinWithoutUserInteraction,
     _reinitialiseMeetingOnConfigChange = _ref.reinitialiseMeetingOnConfigChange,
-    deviceInfo = _ref.deviceInfo;
+    deviceInfo = _ref.deviceInfo,
+    keyProvider = _ref.keyProvider;
   var _useState = useState(null),
     meeting = _useState[0],
     setMeeting = _useState[1];
@@ -493,6 +539,7 @@ var MeetingProvider = function MeetingProvider(_ref) {
   var localWebcamOnRef = useRef();
   var localScreenShareOnRef = useRef();
   var isRecordingRef = useRef();
+  var keyProviderRef = useRef(keyProvider);
   var configRef = useRef(config);
   var tokenRef = useRef(token);
   var joinedOnFirstRender = useRef(false);
@@ -839,6 +886,21 @@ var MeetingProvider = function MeetingProvider(_ref) {
     }
     eventEmitter.emit(events['participant-mode-changed'], data);
   };
+  var _handle_media_relay_started = function _handle_media_relay_started(data) {
+    eventEmitter.emit(events['media-relay-started'], data);
+  };
+  var _handle_media_relay_stopped = function _handle_media_relay_stopped(data) {
+    eventEmitter.emit(events['media-relay-stopped'], data);
+  };
+  var _handle_media_relay_error = function _handle_media_relay_error(data) {
+    eventEmitter.emit(events['media-relay-error'], data);
+  };
+  var _handle_media_relay_request_response = function _handle_media_relay_request_response(data) {
+    eventEmitter.emit(events['media-relay-request-response'], data);
+  };
+  var _handle_media_relay_request_received = function _handle_media_relay_request_received(data) {
+    eventEmitter.emit(events['media-relay-request-received'], data);
+  };
   var join = function join() {
     var meeting = VideoSDK && VideoSDK.initMeeting(configRef.current);
     setMeeting(meeting);
@@ -887,6 +949,11 @@ var MeetingProvider = function MeetingProvider(_ref) {
     meeting.on('whiteboard-stopped', _handle_whiteboard_stopped);
     meeting.on('character-joined', _handle_character_joined);
     meeting.on('character-left', _handle_character_left);
+    meeting.on('media-relay-started', _handle_media_relay_started);
+    meeting.on('media-relay-stopped', _handle_media_relay_stopped);
+    meeting.on('media-relay-error', _handle_media_relay_error);
+    meeting.on('media-relay-request-response', _handle_media_relay_request_response);
+    meeting.on('media-relay-request-received', _handle_media_relay_request_received);
     meeting.localParticipant.on('stream-enabled', _handle_localParticipant_stream_enabled);
     meeting.localParticipant.on('stream-disabled', _handle_localParticipant_stream_disabled);
     meeting.join();
@@ -1121,8 +1188,27 @@ var MeetingProvider = function MeetingProvider(_ref) {
       meeting.disableAdaptiveSubscription();
     }
   };
-  var seekVideo = function seekVideo(_ref8) {
-    var currentTime = _ref8.currentTime;
+  var requestMediaRelay = function requestMediaRelay(_ref8) {
+    var destinationMeetingId = _ref8.destinationMeetingId,
+      token = _ref8.token,
+      kinds = _ref8.kinds;
+    var meeting = meetingRef.current;
+    if (meeting) {
+      meeting.requestMediaRelay({
+        destinationMeetingId: destinationMeetingId,
+        token: token,
+        kinds: kinds
+      });
+    }
+  };
+  var stopMediaRelay = function stopMediaRelay(destinationMeetingId) {
+    var meeting = meetingRef.current;
+    if (meeting) {
+      meeting.stopMediaRelay(destinationMeetingId);
+    }
+  };
+  var seekVideo = function seekVideo(_ref9) {
+    var currentTime = _ref9.currentTime;
     var meeting = meetingRef.current;
     if (meeting) {
       meeting.seekVideo({
@@ -1142,9 +1228,9 @@ var MeetingProvider = function MeetingProvider(_ref) {
       meeting.stopLivestream();
     }
   };
-  var connectTo = function connectTo(_ref9) {
-    var meetingId = _ref9.meetingId,
-      payload = _ref9.payload;
+  var connectTo = function connectTo(_ref10) {
+    var meetingId = _ref10.meetingId,
+      payload = _ref10.payload;
     try {
       var _meeting3 = meetingRef.current;
       var _temp = function () {
@@ -1174,6 +1260,7 @@ var MeetingProvider = function MeetingProvider(_ref) {
   };
   var initSDK = function initSDK() {
     VideoSDK.config(tokenRef.current);
+    keyProviderRef.current && VideoSDK.setKeyProvider(keyProviderRef.current);
     if (deviceInfo) {
       VideoSDK.analytics(deviceInfo);
     } else {
@@ -1260,7 +1347,9 @@ var MeetingProvider = function MeetingProvider(_ref) {
       startHls: startHls,
       stopHls: stopHls,
       enableAdaptiveSubscription: enableAdaptiveSubscription,
-      disableAdaptiveSubscription: disableAdaptiveSubscription
+      disableAdaptiveSubscription: disableAdaptiveSubscription,
+      requestMediaRelay: requestMediaRelay,
+      stopMediaRelay: stopMediaRelay
     }
   }, children);
 };
@@ -1278,7 +1367,15 @@ var useParticipant = function useParticipant(participantId, _temp) {
     _ref$onStreamPaused = _ref.onStreamPaused,
     onStreamPaused = _ref$onStreamPaused === void 0 ? function () {} : _ref$onStreamPaused,
     _ref$onStreamResumed = _ref.onStreamResumed,
-    onStreamResumed = _ref$onStreamResumed === void 0 ? function () {} : _ref$onStreamResumed;
+    onStreamResumed = _ref$onStreamResumed === void 0 ? function () {} : _ref$onStreamResumed,
+    _ref$onProducerAdded = _ref.onProducerAdded,
+    onProducerAdded = _ref$onProducerAdded === void 0 ? function () {} : _ref$onProducerAdded,
+    _ref$onProducerRemove = _ref.onProducerRemoved,
+    onProducerRemoved = _ref$onProducerRemove === void 0 ? function () {} : _ref$onProducerRemove,
+    _ref$onConsumerAdded = _ref.onConsumerAdded,
+    onConsumerAdded = _ref$onConsumerAdded === void 0 ? function () {} : _ref$onConsumerAdded,
+    _ref$onConsumerRemove = _ref.onConsumerRemoved,
+    onConsumerRemoved = _ref$onConsumerRemove === void 0 ? function () {} : _ref$onConsumerRemove;
   var _useState = useState(null),
     webcamStream = _useState[0],
     setwebcamStream = _useState[1];
@@ -1415,6 +1512,9 @@ var useParticipant = function useParticipant(participantId, _temp) {
   var setViewPort = function setViewPort(width, height) {
     participant === null || participant === void 0 ? void 0 : participant.setViewPort(width, height);
   };
+  var setScreenShareQuality = function setScreenShareQuality(quality) {
+    participant === null || participant === void 0 ? void 0 : participant.setScreenShareQuality(quality);
+  };
   var enableMic = function enableMic() {
     participant === null || participant === void 0 ? void 0 : participant.enableMic();
   };
@@ -1469,9 +1569,6 @@ var useParticipant = function useParticipant(participantId, _temp) {
   var stopConsumingMicStreams = function stopConsumingMicStreams() {
     participant === null || participant === void 0 ? void 0 : participant.stopConsumingMicStreams();
   };
-  var switchTo = function switchTo(data) {
-    return Promise.resolve(participant === null || participant === void 0 ? void 0 : participant.switchTo(data)).then(function () {});
-  };
   useEffect(function () {
     var streams = participant === null || participant === void 0 ? void 0 : participant.streams;
     if (streams) {
@@ -1495,6 +1592,18 @@ var useParticipant = function useParticipant(participantId, _temp) {
     });
     participant === null || participant === void 0 ? void 0 : participant.on('media-status-changed', _handleMediaStatusChanged);
     participant === null || participant === void 0 ? void 0 : participant.on('video-quality-changed', _handleVideoQualityChanged);
+    participant === null || participant === void 0 ? void 0 : participant.on('producer-added', function (data) {
+      onProducerAdded(data);
+    });
+    participant === null || participant === void 0 ? void 0 : participant.on('producer-removed', function (data) {
+      onProducerRemoved(data);
+    });
+    participant === null || participant === void 0 ? void 0 : participant.on('consumer-added', function (data) {
+      onConsumerAdded(data);
+    });
+    participant === null || participant === void 0 ? void 0 : participant.on('consumer-removed', function (data) {
+      onConsumerRemoved(data);
+    });
     eventEmitter.on(events['participant-mode-changed'], _handleParticipantModeChanged);
     return function () {
       participant === null || participant === void 0 ? void 0 : participant.off('stream-enabled', _handleStreamEnabled);
@@ -1525,6 +1634,7 @@ var useParticipant = function useParticipant(participantId, _temp) {
     stopConsumingMicStreams: stopConsumingMicStreams,
     stopConsumingWebcamStreams: stopConsumingWebcamStreams,
     setQuality: setQuality,
+    setScreenShareQuality: setScreenShareQuality,
     setViewPort: setViewPort,
     enableMic: enableMic,
     disableMic: disableMic,
@@ -1534,7 +1644,6 @@ var useParticipant = function useParticipant(participantId, _temp) {
     pin: pin,
     unpin: unpin,
     remove: remove,
-    switchTo: switchTo,
     getAudioStats: getAudioStats,
     getVideoStats: getVideoStats,
     getShareStats: getShareStats,
@@ -1823,6 +1932,8 @@ var useCharacter = function useCharacter(_ref, _temp) {
     onUserMessage = _ref2$onUserMessage === void 0 ? function () {} : _ref2$onUserMessage,
     _ref2$onData = _ref2.onData,
     onData = _ref2$onData === void 0 ? function () {} : _ref2$onData,
+    _ref2$onError = _ref2.onError,
+    onError = _ref2$onError === void 0 ? function () {} : _ref2$onError,
     _ref2$onCharacterJoin = _ref2.onCharacterJoined,
     onCharacterJoined = _ref2$onCharacterJoin === void 0 ? function () {} : _ref2$onCharacterJoin,
     _ref2$onCharacterLeft = _ref2.onCharacterLeft,
@@ -1914,6 +2025,9 @@ var useCharacter = function useCharacter(_ref, _temp) {
   var _handleOnData = function _handleOnData(topic, d) {
     onData(topic, d);
   };
+  var _handleOnError = function _handleOnError(d) {
+    onError(d);
+  };
   var _handleCharacterJoined = function _handleCharacterJoined() {
     onCharacterJoined();
   };
@@ -1994,6 +2108,7 @@ var useCharacter = function useCharacter(_ref, _temp) {
     character === null || character === void 0 ? void 0 : character.on('character-message', _handleCharacterMessage);
     character === null || character === void 0 ? void 0 : character.on('user-message', _handleUserMessage);
     character === null || character === void 0 ? void 0 : character.on('data', _handleOnData);
+    character === null || character === void 0 ? void 0 : character.on('error', _handleOnError);
     character === null || character === void 0 ? void 0 : character.on('stream-enabled', _handleStreamEnabled);
     character === null || character === void 0 ? void 0 : character.on('stream-disabled', _handleStreamDisabled);
     character === null || character === void 0 ? void 0 : character.on('media-status-changed', _handleMediaStatusChanged);
@@ -2005,6 +2120,7 @@ var useCharacter = function useCharacter(_ref, _temp) {
       character === null || character === void 0 ? void 0 : character.off('character-message', _handleCharacterMessage);
       character === null || character === void 0 ? void 0 : character.off('user-message', _handleUserMessage);
       character === null || character === void 0 ? void 0 : character.off('data', _handleOnData);
+      character === null || character === void 0 ? void 0 : character.off('error', _handleOnError);
       character === null || character === void 0 ? void 0 : character.off('stream-enabled', _handleStreamEnabled);
       character === null || character === void 0 ? void 0 : character.off('stream-disabled', _handleStreamDisabled);
       character === null || character === void 0 ? void 0 : character.off('media-status-changed', _handleMediaStatusChanged);
@@ -2148,12 +2264,15 @@ var createScreenShareVideoTrack = function createScreenShareVideoTrack(_ref2) {
     _ref2$optimizationMod = _ref2.optimizationMode,
     optimizationMode = _ref2$optimizationMod === void 0 ? undefined : _ref2$optimizationMod,
     _ref2$withAudio = _ref2.withAudio,
-    withAudio = _ref2$withAudio === void 0 ? 'enable' : _ref2$withAudio;
+    withAudio = _ref2$withAudio === void 0 ? 'enable' : _ref2$withAudio,
+    _ref2$multiStream = _ref2.multiStream,
+    multiStream = _ref2$multiStream === void 0 ? false : _ref2$multiStream;
   try {
     return Promise.resolve(VideoSDK.createScreenShareVideoTrack({
       encoderConfig: encoderConfig,
       optimizationMode: optimizationMode,
-      withAudio: withAudio
+      withAudio: withAudio,
+      multiStream: multiStream
     }));
   } catch (e) {
     return Promise.reject(e);
@@ -2204,27 +2323,28 @@ var withAdaptiveObservers = function withAdaptiveObservers(VideoPlayerComponent)
     var resizeObserverRef = useRef(null);
     var _useParticipant = useParticipant(participantId),
       participant = _useParticipant.participant;
+    var _useMeeting = useMeeting(),
+      localParticipant = _useMeeting.localParticipant;
     useEffect(function () {
-      if (type === 'share' || !ref.current || !participant) return;
+      if (type === 'share' || !ref.current || !participant || participantId === localParticipant.id) return;
       var element = ref.current;
       if (!element || !participant) return;
       if (observerRef.current) observerRef.current.disconnect();
       var handleIntersectionChange = debounce(function (entries) {
-        for (var _iterator = _createForOfIteratorHelperLoose(entries), _step; !(_step = _iterator()).done;) {
-          var entry = _step.value;
-          if (entry.intersectionRatio > 0) {
-            for (var _iterator2 = _createForOfIteratorHelperLoose(participant.streams.values()), _step2; !(_step2 = _iterator2()).done;) {
-              var stream = _step2.value;
-              if (stream.kind === 'video' && stream.pausedBy !== 'SUB_MANAGER') {
-                stream.resume();
-              }
+        if (!Array.isArray(entries) || entries.length === 0) return;
+        var entry = entries[entries.length - 1];
+        if (entry.intersectionRatio > 0) {
+          for (var _iterator = _createForOfIteratorHelperLoose(participant.streams.values()), _step; !(_step = _iterator()).done;) {
+            var stream = _step.value;
+            if (stream.kind === 'video' && stream.pausedBy !== 'SUB_MANAGER') {
+              stream.resume();
             }
-          } else {
-            for (var _iterator3 = _createForOfIteratorHelperLoose(participant.streams.values()), _step3; !(_step3 = _iterator3()).done;) {
-              var _stream = _step3.value;
-              if (_stream.kind === 'video') {
-                _stream.pause();
-              }
+          }
+        } else {
+          for (var _iterator2 = _createForOfIteratorHelperLoose(participant.streams.values()), _step2; !(_step2 = _iterator2()).done;) {
+            var _stream = _step2.value;
+            if (_stream.kind === 'video') {
+              _stream.pause();
             }
           }
         }
@@ -2285,6 +2405,9 @@ var VideoSDKPlayer = forwardRef(function (_ref5, ref) {
         var mediaStream = new MediaStream();
         mediaStream.addTrack(stream.track);
         videoRef.current.srcObject = mediaStream;
+        videoRef.current.setAttribute('playsinline', '');
+        videoRef.current.setAttribute('x5-playsinline', '');
+        videoRef.current.setAttribute('webkit-playsinline', '');
         videoRef.current.play()["catch"](function (error) {
           return console.error('videoRef.current.play() failed', error);
         });