@nutui/nutui-react 3.0.0-beta.1 → 3.0.0-beta.10

package/dist/es/packages/uploader/uploader.js

@@ -1,22 +1,22 @@
+import { _ as _async_to_generator } from "@swc/helpers/_/_async_to_generator";
 import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
 import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
 import { _ as _to_consumable_array } from "@swc/helpers/_/_to_consumable_array";
+import { _ as _ts_generator } from "@swc/helpers/_/_ts_generator";
 import React, { useState, useImperativeHandle, useRef, useEffect } from "react";
 import classNames from "classnames";
 import { Photograph, Failure } from "@nutui/icons-react";
-import { ERROR, SUCCESS, Utils, UPLOADING, UploadOptions } from "./utils";
 import { useConfig } from "../configprovider";
 import { funcInterceptor } from "../../utils/interceptor";
 import { ComponentDefaults } from "../../utils/typings";
 import Button from "../button";
 import { usePropsValue } from "../../utils/use-props-value";
 import { Preview } from "./preview";
-import { FileItem } from "./file-item";
+import { mergeProps } from "../../utils/merge-props";
 var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
-    url: '',
-    maxCount: 1,
+    maxCount: Number.MAX_VALUE,
     previewType: 'picture',
     fit: 'cover',
     name: 'file',
@@ -25,12 +25,6 @@ var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     autoUpload: true,
     multiple: false,
     maxFileSize: Number.MAX_VALUE,
-    data: {},
-    headers: {},
-    method: 'post',
-    xhrState: 200,
-    timeout: 1000 * 30,
-    withCredentials: false,
     clearInput: true,
     preview: true,
     deletable: true,
@@ -50,7 +44,7 @@ var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
 var InternalUploader = function(props, ref) {
     var locale = useConfig().locale;
     var fileListRef = useRef([]);
-    var _ref = _object_spread({}, defaultProps, props), children = _ref.children, uploadIcon = _ref.uploadIcon, deleteIcon = _ref.deleteIcon, uploadLabel = _ref.uploadLabel, name = _ref.name, accept = _ref.accept, defaultValue = _ref.defaultValue, value = _ref.value, previewType = _ref.previewType, fit = _ref.fit, disabled = _ref.disabled, multiple = _ref.multiple, url = _ref.url, previewUrl = _ref.previewUrl, headers = _ref.headers, timeout = _ref.timeout, method = _ref.method, xhrState = _ref.xhrState, withCredentials = _ref.withCredentials, data = _ref.data, preview = _ref.preview, deletable = _ref.deletable, maxCount = _ref.maxCount, capture = _ref.capture, maxFileSize = _ref.maxFileSize, className = _ref.className, autoUpload = _ref.autoUpload, clearInput = _ref.clearInput, onStart = _ref.onStart, onDelete = _ref.onDelete, onChange = _ref.onChange, onFileItemClick = _ref.onFileItemClick, onProgress = _ref.onProgress, onSuccess = _ref.onSuccess, onUpdate = _ref.onUpdate, onFailure = _ref.onFailure, onOversize = _ref.onOversize, beforeUpload = _ref.beforeUpload, beforeXhrUpload = _ref.beforeXhrUpload, beforeDelete = _ref.beforeDelete, restProps = _object_without_properties(_ref, [
+    var _mergeProps = mergeProps(defaultProps, props), children = _mergeProps.children, uploadIcon = _mergeProps.uploadIcon, deleteIcon = _mergeProps.deleteIcon, uploadLabel = _mergeProps.uploadLabel, name = _mergeProps.name, accept = _mergeProps.accept, defaultValue = _mergeProps.defaultValue, value = _mergeProps.value, previewType = _mergeProps.previewType, fit = _mergeProps.fit, disabled = _mergeProps.disabled, multiple = _mergeProps.multiple, previewUrl = _mergeProps.previewUrl, preview = _mergeProps.preview, deletable = _mergeProps.deletable, maxCount = _mergeProps.maxCount, capture = _mergeProps.capture, maxFileSize = _mergeProps.maxFileSize, className = _mergeProps.className, autoUpload = _mergeProps.autoUpload, clearInput = _mergeProps.clearInput, upload = _mergeProps.upload, onDelete = _mergeProps.onDelete, onChange = _mergeProps.onChange, onFileItemClick = _mergeProps.onFileItemClick, onOversize = _mergeProps.onOversize, onOverCount = _mergeProps.onOverCount, beforeUpload = _mergeProps.beforeUpload, beforeDelete = _mergeProps.beforeDelete, onUploadQueueChange = _mergeProps.onUploadQueueChange, restProps = _object_without_properties(_mergeProps, [
         "children",
         "uploadIcon",
         "deleteIcon",
@@ -63,14 +57,7 @@ var InternalUploader = function(props, ref) {
         "fit",
         "disabled",
         "multiple",
-        "url",
         "previewUrl",
-        "headers",
-        "timeout",
-        "method",
-        "xhrState",
-        "withCredentials",
-        "data",
         "preview",
         "deletable",
         "maxCount",
@@ -79,18 +66,15 @@ var InternalUploader = function(props, ref) {
         "className",
         "autoUpload",
         "clearInput",
-        "onStart",
+        "upload",
         "onDelete",
         "onChange",
         "onFileItemClick",
-        "onProgress",
-        "onSuccess",
-        "onUpdate",
-        "onFailure",
         "onOversize",
+        "onOverCount",
         "beforeUpload",
-        "beforeXhrUpload",
-        "beforeDelete"
+        "beforeDelete",
+        "onUploadQueueChange"
     ]);
     var _usePropsValue = _sliced_to_array(usePropsValue({
         value: value,
@@ -107,15 +91,29 @@ var InternalUploader = function(props, ref) {
     }, [
         fileList
     ]);
+    useEffect(function() {
+        onUploadQueueChange === null || onUploadQueueChange === void 0 ? void 0 : onUploadQueueChange(uploadQueue);
+    }, [
+        uploadQueue
+    ]);
     useImperativeHandle(ref, function() {
         return {
-            submit: function() {
-                Promise.all(uploadQueue).then(function(res) {
-                    res.forEach(function(i) {
-                        return i.upload();
-                    });
+            submit: /*#__PURE__*/ _async_to_generator(function() {
+                return _ts_generator(this, function(_state) {
+                    switch(_state.label){
+                        case 0:
+                            return [
+                                4,
+                                uploadAction(uploadQueue)
+                            ];
+                        case 1:
+                            _state.sent();
+                            return [
+                                2
+                            ];
+                    }
                 });
-            },
+            }),
             clear: function() {
                 clearUploadQueue();
             }
@@ -131,144 +129,7 @@ var InternalUploader = function(props, ref) {
             setFileList([]);
         }
     };
-    var clearInputValue = function(el) {
-        el.value = '';
-    };
-    var executeUpload = function(fileItem, index) {
-        var uploadOption = new UploadOptions();
-        uploadOption.url = url;
-        var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
-        try {
-            for(var _iterator = Object.entries(data)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true){
-                var _step_value = _sliced_to_array(_step.value, 2), key = _step_value[0], value = _step_value[1];
-                var _fileItem_formData;
-                (_fileItem_formData = fileItem.formData) === null || _fileItem_formData === void 0 ? void 0 : _fileItem_formData.append(key, value);
-            }
-        } catch (err) {
-            _didIteratorError = true;
-            _iteratorError = err;
-        } finally{
-            try {
-                if (!_iteratorNormalCompletion && _iterator.return != null) {
-                    _iterator.return();
-                }
-            } finally{
-                if (_didIteratorError) {
-                    throw _iteratorError;
-                }
-            }
-        }
-        uploadOption.formData = fileItem.formData;
-        uploadOption.timeout = timeout * 1;
-        uploadOption.method = method;
-        uploadOption.xhrState = xhrState;
-        uploadOption.headers = headers;
-        uploadOption.withCredentials = withCredentials;
-        uploadOption.beforeXhrUpload = beforeXhrUpload;
-        try {
-            var _fileItem_formData1;
-            uploadOption.sourceFile = (_fileItem_formData1 = fileItem.formData) === null || _fileItem_formData1 === void 0 ? void 0 : _fileItem_formData1.get(name);
-        } catch (error) {
-            console.warn(error);
-        }
-        uploadOption.onStart = function(option) {
-            clearUploadQueue(index);
-            setFileList(fileListRef.current.map(function(item) {
-                if (item.uid === fileItem.uid) {
-                    item.status = 'ready';
-                    item.message = locale.uploader.readyUpload;
-                }
-                return item;
-            }));
-            onStart === null || onStart === void 0 ? void 0 : onStart(option);
-        };
-        uploadOption.onProgress = function(e, option) {
-            setFileList(fileListRef.current.map(function(item) {
-                if (item.uid === fileItem.uid) {
-                    item.status = UPLOADING;
-                    item.message = locale.uploader.uploading;
-                    item.percentage = (e.loaded / e.total * 100).toFixed(0);
-                    onProgress === null || onProgress === void 0 ? void 0 : onProgress({
-                        e: e,
-                        option: option,
-                        percentage: item.percentage
-                    });
-                }
-                return item;
-            }));
-        };
-        uploadOption.onSuccess = function(responseText, option) {
-            var list = fileListRef.current.map(function(item) {
-                if (item.uid === fileItem.uid) {
-                    item.status = SUCCESS;
-                    item.message = locale.uploader.success;
-                    item.responseText = responseText;
-                }
-                return item;
-            });
-            setFileList(list);
-            onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate(list);
-            onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess({
-                responseText: responseText,
-                option: option,
-                files: list
-            });
-        };
-        uploadOption.onFailure = function(responseText, option) {
-            var list = fileListRef.current.map(function(item) {
-                if (item.uid === fileItem.uid) {
-                    item.status = ERROR;
-                    item.message = locale.uploader.error;
-                    item.responseText = responseText;
-                }
-                return item;
-            });
-            setFileList(list);
-            onFailure === null || onFailure === void 0 ? void 0 : onFailure({
-                responseText: responseText,
-                option: option,
-                files: list
-            });
-        };
-        var task = new Utils(uploadOption);
-        if (autoUpload) {
-            task.upload();
-        } else {
-            uploadQueue.push(new Promise(function(resolve, reject) {
-                resolve(task);
-            }));
-            setUploadQueue(uploadQueue);
-        }
-    };
-    var readFile = function(files) {
-        files.forEach(function(file, index) {
-            var _file_type;
-            var formData = new FormData();
-            formData.append(name, file);
-            var fileItem = new FileItem();
-            fileItem.name = file.name;
-            fileItem.status = 'ready';
-            fileItem.type = file.type;
-            fileItem.formData = formData;
-            fileItem.uid = file.lastModified + fileItem.uid;
-            fileItem.message = autoUpload ? locale.uploader.readyUpload : locale.uploader.waitingUpload;
-            executeUpload(fileItem, index);
-            if (preview && ((_file_type = file.type) === null || _file_type === void 0 ? void 0 : _file_type.includes('image'))) {
-                var reader = new FileReader();
-                reader.onload = function(event) {
-                    fileItem.url = event.target.result;
-                    setFileList(_to_consumable_array(fileList).concat([
-                        fileItem
-                    ]));
-                };
-                reader.readAsDataURL(file);
-            } else {
-                setFileList(_to_consumable_array(fileList).concat([
-                    fileItem
-                ]));
-            }
-        });
-    };
+    var idCountRef = useRef(0);
     var filterFiles = function(files) {
         var maximum = maxCount * 1;
         var oversizes = new Array();
@@ -281,6 +142,7 @@ var InternalUploader = function(props, ref) {
         });
         oversizes.length && (onOversize === null || onOversize === void 0 ? void 0 : onOversize(files));
         if (filterFile.length > maximum) {
+            onOverCount === null || onOverCount === void 0 ? void 0 : onOverCount(filterFile.length);
             filterFile.splice(maximum, filterFile.length - maximum);
         }
         if (fileList.length !== 0) {
@@ -290,7 +152,7 @@ var InternalUploader = function(props, ref) {
         return filterFile;
     };
     var deleted = function(file, index) {
-        var deletedFileList = fileList.filter(function(file, idx) {
+        var deletedFileList = fileListRef.current.filter(function(file, idx) {
             return idx !== index;
         });
         onDelete === null || onDelete === void 0 ? void 0 : onDelete(file, deletedFileList);
@@ -308,44 +170,220 @@ var InternalUploader = function(props, ref) {
             }
         });
     };
-    var fileChange = function(event) {
-        if (disabled) return;
-        var $el = event.target;
-        var files = $el.files;
-        if (beforeUpload) {
-            beforeUpload(new Array().slice.call(files)).then(function(f) {
-                var _files = filterFiles(new Array().slice.call(f));
-                if (!_files.length) $el.value = '';
-                readFile(_files);
+    var fileChange = /*#__PURE__*/ function() {
+        var _ref = _async_to_generator(function(event) {
+            var $el, files, _files, filesArr, tasks;
+            return _ts_generator(this, function(_state) {
+                switch(_state.label){
+                    case 0:
+                        if (disabled) return [
+                            2
+                        ];
+                        $el = event.target;
+                        files = $el.files;
+                        _files = [];
+                        filesArr = new Array().slice.call(files);
+                        if (!beforeUpload) return [
+                            3,
+                            2
+                        ];
+                        return [
+                            4,
+                            beforeUpload(filesArr)
+                        ];
+                    case 1:
+                        _files = _state.sent();
+                        if (!_files.length) $el.value = '';
+                        _state.label = 2;
+                    case 2:
+                        _files = filterFiles(filesArr);
+                        tasks = _files.map(function(file) {
+                            var _file_type;
+                            var info = {
+                                uid: idCountRef.current++,
+                                status: autoUpload ? 'uploading' : 'ready',
+                                file: file,
+                                message: autoUpload ? locale.uploader.uploading : locale.uploader.waitingUpload,
+                                name: file.name,
+                                type: file.type
+                            };
+                            if (preview && ((_file_type = file.type) === null || _file_type === void 0 ? void 0 : _file_type.includes('image'))) {
+                                var reader = new FileReader();
+                                reader.onload = function(event) {
+                                    fileListRef.current = _to_consumable_array(fileListRef.current).concat([
+                                        _object_spread_props(_object_spread({}, info), {
+                                            url: event.target.result
+                                        })
+                                    ]);
+                                    setFileList(fileListRef.current);
+                                };
+                                reader.readAsDataURL(file);
+                            }
+                            return info;
+                        });
+                        if (!!autoUpload) return [
+                            3,
+                            3
+                        ];
+                        setUploadQueue(tasks);
+                        return [
+                            3,
+                            5
+                        ];
+                    case 3:
+                        return [
+                            4,
+                            uploadAction(tasks)
+                        ];
+                    case 4:
+                        _state.sent();
+                        _state.label = 5;
+                    case 5:
+                        if (clearInput) {
+                            $el.value = '';
+                        }
+                        return [
+                            2
+                        ];
+                }
             });
-        } else {
-            var _files = filterFiles(new Array().slice.call(files));
-            readFile(_files);
-        }
-        if (clearInput) {
-            clearInputValue($el);
-        }
-    };
+        });
+        return function fileChange(event) {
+            return _ref.apply(this, arguments);
+        };
+    }();
+    var uploadAction = /*#__PURE__*/ function() {
+        var _ref = _async_to_generator(function(tasks) {
+            var taskIds;
+            return _ts_generator(this, function(_state) {
+                switch(_state.label){
+                    case 0:
+                        taskIds = tasks.map(function(task) {
+                            return task.uid;
+                        });
+                        setFileList(fileList.map(function(file) {
+                            if (taskIds.includes(file.uid)) {
+                                return _object_spread_props(_object_spread({}, file), {
+                                    status: 'uploading',
+                                    message: locale.uploader.uploading
+                                });
+                            }
+                            return file;
+                        }));
+                        return [
+                            4,
+                            Promise.all(tasks.map(/*#__PURE__*/ function() {
+                                var _ref = _async_to_generator(function(currentTask, index) {
+                                    var result, list, e, list1;
+                                    return _ts_generator(this, function(_state) {
+                                        switch(_state.label){
+                                            case 0:
+                                                _state.trys.push([
+                                                    0,
+                                                    2,
+                                                    ,
+                                                    3
+                                                ]);
+                                                return [
+                                                    4,
+                                                    upload(currentTask.file)
+                                                ];
+                                            case 1:
+                                                result = _state.sent();
+                                                list = fileListRef.current.map(function(item) {
+                                                    if (item.uid === currentTask.uid) {
+                                                        item.status = 'success';
+                                                        item.message = locale.uploader.success;
+                                                        item.url = result.url;
+                                                    }
+                                                    return item;
+                                                });
+                                                setFileList(list);
+                                                return [
+                                                    3,
+                                                    3
+                                                ];
+                                            case 2:
+                                                e = _state.sent();
+                                                list1 = fileListRef.current.map(function(item) {
+                                                    if (item.uid === currentTask.uid) {
+                                                        item.status = 'error';
+                                                        item.message = locale.uploader.error;
+                                                    }
+                                                    return item;
+                                                });
+                                                setFileList(list1);
+                                                throw e;
+                                            case 3:
+                                                return [
+                                                    2
+                                                ];
+                                        }
+                                    });
+                                });
+                                return function(currentTask, index) {
+                                    return _ref.apply(this, arguments);
+                                };
+                            }())).catch(function(errs) {
+                                return console.error(errs);
+                            })
+                        ];
+                    case 1:
+                        _state.sent();
+                        return [
+                            2
+                        ];
+                }
+            });
+        });
+        return function uploadAction(tasks) {
+            return _ref.apply(this, arguments);
+        };
+    }();
     var handleItemClick = function(file, index) {
         onFileItemClick === null || onFileItemClick === void 0 ? void 0 : onFileItemClick(file, index);
     };
+    var renderImageUploader = function() {
+        var shouldShow = Number(maxCount) > fileList.length && previewType === 'picture';
+        return shouldShow && /*#__PURE__*/ React.createElement("div", {
+            className: classNames('nut-uploader-upload', previewType, {
+                'nut-uploader-upload-disabled': disabled
+            })
+        }, /*#__PURE__*/ React.createElement("div", {
+            className: "nut-uploader-icon"
+        }, uploadIcon, /*#__PURE__*/ React.createElement("span", {
+            className: "nut-uploader-icon-tip"
+        }, uploadLabel)), /*#__PURE__*/ React.createElement("input", {
+            className: "nut-uploader-input",
+            type: "file",
+            capture: capture,
+            name: name,
+            accept: accept,
+            disabled: disabled,
+            multiple: multiple,
+            onChange: fileChange
+        }));
+    };
+    var renderListUploader = function() {
+        return previewType === 'list' && /*#__PURE__*/ React.createElement("div", {
+            className: "nut-uploader-slot"
+        }, /*#__PURE__*/ React.createElement(Button, {
+            size: "small",
+            type: "primary"
+        }, locale.uploader.list), Number(maxCount) > fileList.length && /*#__PURE__*/ React.createElement("input", {
+            className: "nut-uploader-input",
+            type: "file",
+            capture: capture,
+            name: name,
+            accept: accept,
+            disabled: disabled,
+            multiple: multiple,
+            onChange: fileChange
+        }));
+    };
     return /*#__PURE__*/ React.createElement("div", _object_spread({
         className: classes
-    }, restProps), (children || previewType === 'list') && /*#__PURE__*/ React.createElement("div", {
-        className: "nut-uploader-slot"
-    }, children || /*#__PURE__*/ React.createElement(Button, {
-        size: "small",
-        type: "primary"
-    }, locale.uploader.list), Number(maxCount) > fileList.length && /*#__PURE__*/ React.createElement("input", {
-        className: "nut-uploader-input",
-        type: "file",
-        capture: capture,
-        name: name,
-        accept: accept,
-        disabled: disabled,
-        multiple: multiple,
-        onChange: fileChange
-    })), /*#__PURE__*/ React.createElement(Preview, {
+    }, restProps), renderListUploader(), /*#__PURE__*/ React.createElement(Preview, {
         fileList: fileList,
         previewType: previewType,
         deletable: deletable,
@@ -354,24 +392,7 @@ var InternalUploader = function(props, ref) {
         previewUrl: previewUrl,
         children: children,
         deleteIcon: deleteIcon
-    }), Number(maxCount) > fileList.length && previewType === 'picture' && !children && /*#__PURE__*/ React.createElement("div", {
-        className: classNames('nut-uploader-upload', previewType, {
-            'nut-uploader-upload-disabled': disabled
-        })
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: "nut-uploader-icon"
-    }, uploadIcon, /*#__PURE__*/ React.createElement("span", {
-        className: "nut-uploader-icon-tip"
-    }, uploadLabel)), /*#__PURE__*/ React.createElement("input", {
-        className: "nut-uploader-input",
-        type: "file",
-        capture: capture,
-        name: name,
-        accept: accept,
-        disabled: disabled,
-        multiple: multiple,
-        onChange: fileChange
-    })));
+    }), renderImageUploader());
 };
 export var Uploader = /*#__PURE__*/ React.forwardRef(InternalUploader);
 Uploader.displayName = 'NutUploader';

package/dist/es/packages/video/style/style.css

@@ -1,3 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-video {
   width: 100%;
   height: 100%;

package/dist/es/packages/video/video.d.ts

@@ -1,18 +1,10 @@
-import React, { FunctionComponent } from 'react';
+import React from 'react';
 import { BasicComponent } from "../../utils/typings";
 export interface VideoProps extends BasicComponent {
-    /**
-    * 视频地址和类型设置
-    * @default {type: {}, src: ''}
-    */
     source: {
         type: string;
         src: string;
-    }
-    /**
-    * 控制视频播放属性
-    * @default -
-    */
+    };
     options: {
         controls?: boolean;
         muted?: boolean;
@@ -20,21 +12,13 @@ export interface VideoProps extends BasicComponent {
         poster?: string;
         playsinline?: boolean;
         loop?: boolean;
-    }
-    /**
-    * 播放
-    * @default -
-    */
-    onPlay: (element: HTMLVideoElement) => void
-    /**
-    * 暂停
-    * @default -
-    */
-    onPause: (element: HTMLVideoElement) => void
-    /**
-    * 播放完成回调
-    * @default -
-    */
-    onPlayEnd: (element: HTMLVideoElement) => void
+    };
+    onPlay: (element: HTMLVideoElement) => void;
+    onPause: (element: HTMLVideoElement) => void;
+    onPlayEnd: (element: HTMLVideoElement) => void;
 }
-export declare const Video: FunctionComponent<Partial<VideoProps> & Omit<React.HTMLAttributes<HTMLDivElement>, 'onPause' | 'onPlay'>>;
+export type VideoRef = {
+    pause: () => void;
+    play: () => void;
+};
+export declare const Video: React.ForwardRefExoticComponent<Partial<VideoProps> & Omit<React.HTMLAttributes<HTMLDivElement>, "onPause" | "onPlay"> & React.RefAttributes<VideoRef>>;

package/dist/es/packages/video/video.js

@@ -19,7 +19,7 @@ var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     }
 });
 var classPrefix = "nut-video";
-export var Video = function(props) {
+export var Video = /*#__PURE__*/ React.forwardRef(function(props, ref) {
     var _ref = _object_spread({}, defaultProps, props), children = _ref.children, source = _ref.source, options = _ref.options, className = _ref.className, onPlay = _ref.onPlay, onPause = _ref.onPause, onPlayEnd = _ref.onPlayEnd, restProps = _object_without_properties(_ref, [
         "children",
         "source",
@@ -60,6 +60,20 @@ export var Video = function(props) {
             });
         }
     };
+    var pause = function() {
+        var _rootRef_current;
+        rootRef === null || rootRef === void 0 ? void 0 : (_rootRef_current = rootRef.current) === null || _rootRef_current === void 0 ? void 0 : _rootRef_current.pause();
+    };
+    var play = function() {
+        var _rootRef_current;
+        rootRef === null || rootRef === void 0 ? void 0 : (_rootRef_current = rootRef.current) === null || _rootRef_current === void 0 ? void 0 : _rootRef_current.play();
+    };
+    React.useImperativeHandle(ref, function() {
+        return {
+            pause: pause,
+            play: play
+        };
+    });
     return /*#__PURE__*/ React.createElement("div", _object_spread({
         className: classes
     }, restProps), /*#__PURE__*/ React.createElement("video", {
@@ -77,5 +91,5 @@ export var Video = function(props) {
     }), /*#__PURE__*/ React.createElement("track", {
         kind: "captions"
     })));
-};
+});
 Video.displayName = 'NutVideo';