@dcp-designable/components/lib/BpmPage/BPMShowProgressNew/VoicePlayer/index.js

公共组件及业务组件

"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
var __generator = (this && this.__generator) || function (thisArg, body) {
    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
    function verb(n) { return function (v) { return step([n, v]); }; }
    function step(op) {
        if (f) throw new TypeError("Generator is already executing.");
        while (g && (g = 0, op[0] && (_ = 0)), _) try {
            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
            if (y = 0, t) op = [op[0] & 2, t.value];
            switch (op[0]) {
                case 0: case 1: t = op; break;
                case 4: _.label++; return { value: op[1], done: false };
                case 5: _.label++; y = op[1]; op = [0]; continue;
                case 7: op = _.ops.pop(); _.trys.pop(); continue;
                default:
                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
                    if (t[2]) _.ops.pop();
                    _.trys.pop(); continue;
            }
            op = body.call(thisArg, _);
        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
    }
};
var __read = (this && this.__read) || function (o, n) {
    var m = typeof Symbol === "function" && o[Symbol.iterator];
    if (!m) return o;
    var i = m.call(o), r, ar = [], e;
    try {
        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
    }
    catch (error) { e = { error: error }; }
    finally {
        try {
            if (r && !r.done && (m = i["return"])) m.call(i);
        }
        finally { if (e) throw e.error; }
    }
    return ar;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var react_1 = __importStar(require("react"));
require("./index.less");
var dcp_design_react_1 = require("dcp-design-react");
var audio_play_png_1 = __importDefault(require("../../img/audio-play.png"));
function VoicePlayer(props, ref) {
    var _this = this;
    var _a = __read((0, react_1.useState)(false), 2), isPlaying = _a[0], setIsPlaying = _a[1];
    var _b = __read((0, react_1.useState)(0), 2), currentTime = _b[0], setCurrentTime = _b[1];
    var _c = __read((0, react_1.useState)(0), 2), duration = _c[0], setDuration = _c[1]; // 新增变量用于存储音频总时长
    var _d = __read((0, react_1.useState)('0'), 2), formattedDuration = _d[0], setFormattedDuration = _d[1];
    var _e = __read((0, react_1.useState)(false), 2), transferLoading = _e[0], setTransferLoading = _e[1];
    var audioRef = (0, react_1.useRef)(null);
    var longPressTimer = (0, react_1.useRef)(null);
    var _f = __read((0, react_1.useState)(false), 2), isMenuVisible = _f[0], setIsMenuVisible = _f[1];
    var _g = __read((0, react_1.useState)(150), 2), playWidth = _g[0], setPlayWidth = _g[1];
    (0, react_1.useEffect)(function () {
        if (duration) {
            var min = 150;
            var maxWidth = 250;
            var res = Math.min(maxWidth, (duration * maxWidth) / (2 * 100) + min);
            setPlayWidth(res);
        }
    }, [duration]);
    var handlePlayPause = function () {
        if (isPlaying) {
            audioRef.current.pause();
        }
        else {
            audioRef.current.play();
        }
        setIsPlaying(!isPlaying);
    };
    var handleTimeUpdate = function (event) {
        setCurrentTime(event.currentTarget.currentTime);
        if (event.currentTarget.duration !== Infinity) {
            setDuration(event.currentTarget.duration); // 获取音频总时长
        }
    };
    var handleLoadedMetadata = function (event) {
        console.log('音频总时长', event.currentTarget.duration);
        setDuration(event.currentTarget.duration); // 获取音频总时长
    };
    function checkDuration() {
        if (Number.isNaN(audioRef.current.duration)) {
            console.log('音频时长未知，正在重试...');
            setTimeout(checkDuration, 1000); // 每秒重试一次
        }
        else {
            console.log('音频总时长:', audioRef.current.duration, '秒');
        }
    }
    var handleEnded = function () {
        setIsPlaying(false);
        setCurrentTime(0);
    };
    var formatTime = function (seconds) {
        if (seconds < 60) {
            var intSeconds = Math.floor(seconds);
            if (intSeconds < 1) {
                return "01''";
            }
            return "".concat(intSeconds < 10 ? '0' : '').concat(intSeconds, "''");
        }
        var minutes = Math.floor(seconds / 60);
        var remainingSeconds = Math.floor(seconds % 60);
        return "".concat(minutes, "'").concat(remainingSeconds < 10 ? '0' : '').concat(remainingSeconds, "''");
    };
    (0, react_1.useEffect)(function () {
        if (duration > 0) {
            setFormattedDuration(formatTime(duration));
        }
    }, [duration]);
    var handleTouchStart = function () {
        longPressTimer.current = setTimeout(function () {
            setIsMenuVisible(true);
        }, 500); // 长按 500 毫秒触发菜单显示
    };
    var handleTouchEnd = function () {
        clearTimeout(longPressTimer.current);
    };
    var handleOutsideClick = function (event) {
        if (event.target.closest('.bpm-audio-player-menu') === null) {
            setIsMenuVisible(false);
        }
    };
    (0, react_1.useEffect)(function () {
        if (isMenuVisible) {
            document.addEventListener('touchstart', handleOutsideClick);
        }
        else {
            document.removeEventListener('touchstart', handleOutsideClick);
        }
        return function () {
            document.removeEventListener('touchstart', handleOutsideClick);
        };
    }, [isMenuVisible]);
    return (react_1.default.createElement(react_1.default.Fragment, null,
        react_1.default.createElement("div", { className: "bpm-audio-player-component", style: { width: playWidth } },
            react_1.default.createElement("div", { className: "bpm-audio-player", onTouchStart: handleTouchStart, onTouchEnd: handleTouchEnd },
                react_1.default.createElement("div", { onClick: handlePlayPause, className: isPlaying ? 'audio-play-animation show' : 'bpm-audio-player-play-btn' },
                    react_1.default.createElement("img", { src: audio_play_png_1.default, className: "play-btn-img" })),
                react_1.default.createElement("span", { style: { marginLeft: '8px' } }, isPlaying ? formatTime(currentTime) : formattedDuration),
                react_1.default.createElement("audio", { ref: audioRef, onTimeUpdate: handleTimeUpdate, onLoadedMetadata: handleLoadedMetadata, onEnded: handleEnded, src: props.src, 
                    // preload={'auto'}
                    preload: "metadata" })),
            !props.transferText
                ? (react_1.default.createElement("div", { className: "bpm-audio-player-transfer-btn", onClick: function () { return __awaiter(_this, void 0, void 0, function () {
                        return __generator(this, function (_a) {
                            switch (_a.label) {
                                case 0:
                                    setTransferLoading(true);
                                    return [4 /*yield*/, props.onClickTransfer()];
                                case 1:
                                    _a.sent();
                                    setTransferLoading(false);
                                    return [2 /*return*/];
                            }
                        });
                    }); } },
                    react_1.default.createElement("span", { className: "bpm-audio-player-transfer-btn-text" }, "\u8F6C\u6587\u5B57")))
                : react_1.default.createElement("div", { className: "bpm-audio-player-transfer-empty" })),
        transferLoading && (react_1.default.createElement("div", { className: "bpm-audio-player-transfer-card" },
            react_1.default.createElement(dcp_design_react_1.DcpSpin, null))),
        props.transferText && (react_1.default.createElement("div", { className: "bpm-audio-player-transfer-card" },
            react_1.default.createElement("span", { className: "bpm-audio-player-transfer-text" }, props.transferText)))));
}
VoicePlayer.displayName = 'VoicePlayer';
exports.default = VoicePlayer;
//# sourceMappingURL=index.js.map