@pnp/spfx-controls-react/lib-commonjs/controls/modernAudio/ModernAudio.js

Reusable React controls for SharePoint Framework solutions

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ModernAudio = void 0;
var tslib_1 = require("tslib");
var React = tslib_1.__importStar(require("react"));
var ModernAudio_module_scss_1 = tslib_1.__importDefault(require("./ModernAudio.module.scss"));
var strings = tslib_1.__importStar(require("ControlStrings"));
var react_1 = require("@fluentui/react");
var ModernAudioLabelPosition_1 = require("./ModernAudioLabelPosition");
var ModernAudio = function (props) {
    var audioComp = React.useRef(new Audio(props.audioUrl));
    var _a = React.useState(false), muted = _a[0], setMuted = _a[1];
    var _b = React.useState(false), playing = _b[0], setPlaying = _b[1];
    React.useEffect(function () {
        audioComp.current.onended = function () { setPlaying(false); };
    }, []);
    var playAudio = function () {
        setPlaying(true);
        audioComp.current.play().then(function () { }).catch(function () { });
    };
    var pauseAudio = function () {
        setPlaying(false);
        audioComp.current.pause();
    };
    var incVolume = function () {
        if (audioComp.current.volume <= 0.9) {
            audioComp.current.volume += 0.1;
        }
        else {
            audioComp.current.volume = 1;
        }
        if (audioComp.current.muted) {
            audioComp.current.muted = false;
            setMuted(false);
        }
    };
    var decVolume = function () {
        audioComp.current.volume -= 0.1;
        if (audioComp.current.volume < 0.1) {
            audioComp.current.volume = 0;
            audioComp.current.muted = true;
            setMuted(true);
        }
    };
    var muteAudio = function () {
        audioComp.current.muted = !muted;
        setMuted(!muted);
    };
    return (React.createElement("div", { className: ModernAudio_module_scss_1.default.modernAudio },
        props.labelPosition === ModernAudioLabelPosition_1.ModernAudioLabelPosition.TopLeft &&
            props.label !== "" &&
            React.createElement("div", null,
                React.createElement("label", null, props.label)),
        props.labelPosition === ModernAudioLabelPosition_1.ModernAudioLabelPosition.TopCenter &&
            props.label !== "" &&
            React.createElement("div", { style: { textAlign: "center" } },
                React.createElement("label", null, props.label)),
        React.createElement("div", { className: ModernAudio_module_scss_1.default.audioPanel },
            props.audioUrl !== "" && React.createElement("audio", { ref: audioComp, src: props.audioUrl }),
            React.createElement(react_1.IconButton, { iconProps: { iconName: 'Play' }, className: ModernAudio_module_scss_1.default.audioIcon, title: strings.ModernAudioPlay, disabled: playing, onClick: playAudio }),
            React.createElement(react_1.IconButton, { iconProps: { iconName: 'Pause' }, className: ModernAudio_module_scss_1.default.audioIcon, title: strings.ModernAudioPause, disabled: !playing, onClick: pauseAudio }),
            React.createElement(react_1.IconButton, { iconProps: { iconName: 'Volume2' }, className: ModernAudio_module_scss_1.default.audioIcon, title: strings.ModernAudioIncVol, onClick: incVolume }),
            React.createElement(react_1.IconButton, { iconProps: { iconName: 'Volume0' }, className: ModernAudio_module_scss_1.default.audioIcon, title: strings.ModernAudioDecVol, disabled: muted, onClick: decVolume }),
            React.createElement(react_1.IconButton, { iconProps: { iconName: 'VolumeDisabled' }, className: ModernAudio_module_scss_1.default.audioIcon, title: strings.ModernAudioMute, disabled: muted, onClick: muteAudio })),
        props.labelPosition === ModernAudioLabelPosition_1.ModernAudioLabelPosition.BottomLeft &&
            props.label !== "" &&
            React.createElement("div", null,
                React.createElement("label", null, props.label)),
        props.labelPosition === ModernAudioLabelPosition_1.ModernAudioLabelPosition.BottomCenter &&
            props.label !== "" &&
            React.createElement("div", { style: { textAlign: "center" } },
                React.createElement("label", null, props.label))));
};
exports.ModernAudio = ModernAudio;
exports.ModernAudio.defaultProps = {
    label: "",
    labelPosition: ModernAudioLabelPosition_1.ModernAudioLabelPosition.TopLeft
};
//# sourceMappingURL=ModernAudio.js.map