react-usehooks-ts
Version:
A collections of typescript supported react Custom hooks
44 lines (43 loc) • 2.35 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = require("react");
const isMediaSessionAvailable = typeof window !== "undefined" && "mediaSession" in window.navigator;
const bindActionHandler = (action, callback) => {
if (!isMediaSessionAvailable || !callback)
return;
window.navigator.mediaSession.setActionHandler(action, callback);
return () => {
window.navigator.mediaSession.setActionHandler(action, null);
};
};
const useMediaSession = ({ playbackState = "none", mediaInfo, onPause, onPlay, onNextTrack, onPreviousTrack, onSeekBackward, onSeekForward, onSeekTo, onSkipAd, onStop, }) => {
(0, react_1.useEffect)(() => {
if (!isMediaSessionAvailable)
return;
// Set the playback state
window.navigator.mediaSession.playbackState = playbackState;
return () => {
// Reset playback state on cleanup
window.navigator.mediaSession.playbackState = "none";
};
}, [playbackState]);
(0, react_1.useEffect)(() => {
if (isMediaSessionAvailable) {
navigator.mediaSession.metadata = new MediaMetadata({
title: mediaInfo === null || mediaInfo === void 0 ? void 0 : mediaInfo.title,
artist: mediaInfo === null || mediaInfo === void 0 ? void 0 : mediaInfo.artist,
artwork: mediaInfo === null || mediaInfo === void 0 ? void 0 : mediaInfo.artwork,
});
}
});
(0, react_1.useEffect)(() => bindActionHandler("play", onPlay), [onPlay]);
(0, react_1.useEffect)(() => bindActionHandler("pause", onPause), [onPause]);
(0, react_1.useEffect)(() => bindActionHandler("nexttrack", onNextTrack), [onNextTrack]);
(0, react_1.useEffect)(() => bindActionHandler("previoustrack", onPreviousTrack), [onPreviousTrack]);
(0, react_1.useEffect)(() => bindActionHandler("seekbackward", onSeekBackward), [onSeekBackward]);
(0, react_1.useEffect)(() => bindActionHandler("seekforward", onSeekForward), [onSeekForward]);
(0, react_1.useEffect)(() => bindActionHandler("seekto", onSeekTo), [onSeekTo]);
(0, react_1.useEffect)(() => bindActionHandler("skipad", onSkipAd), [onSkipAd]);
(0, react_1.useEffect)(() => bindActionHandler("stop", onStop), [onStop]);
};
exports.default = useMediaSession;