revdev-components 0.127.0 → 0.129.0

package/build/audioPlayer/index.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+export interface AudioPlayerProps {
+    src: string;
+    className?: string;
+}
+export declare const AudioPlayer: React.FC<AudioPlayerProps>;

package/build/index.d.ts

@@ -28,3 +28,4 @@ export * from "./attributor";
 export * from "./optionsAutocomplete";
 export * from "./button";
 export * from "./splitLine";
+export * from "./audioPlayer";

package/build/index.js

@@ -5511,12 +5511,35 @@ var SplitLine = function (_a) {
     return React.createElement("div", { className: classNames(s.root, className) });
 };
 
+var classes = {"root":"index-module_root__VVbaB","playing":"index-module_playing__v4q8X","play-animation":"index-module_play-animation__Y-ns-"};
+
+var AudioPlayer = function (_a) {
+    var _b;
+    var src = _a.src, className = _a.className;
+    var audioRef = React.useRef(null);
+    var _c = React.useState(false), active = _c[0], setActive = _c[1];
+    var handlePlay = React.useCallback(function () {
+        if (audioRef.current) {
+            if (audioRef.current.paused) {
+                audioRef.current.play();
+            }
+            else {
+                audioRef.current.pause();
+            }
+        }
+    }, []);
+    return (React.createElement("div", { className: classNames(classes.root, className) },
+        React.createElement("audio", { ref: audioRef, src: src, onPlay: function () { return setActive(true); }, onPause: function () { return setActive(false); } }, "Your browser does not support the audio element."),
+        React.createElement(Button, { onClick: handlePlay, icon: active ? "audio" : "play-arrow", className: classNames((_b = {}, _b[classes.playing] = active, _b)), isPrimary: active })));
+};
+
 exports.AlfaAttributor = AlfaAttributor;
 exports.AlfaNavigator = AlfaNavigator;
 exports.AppForm = AppForm;
 exports.AppLink = AppLink;
 exports.AppLinkButton = AppLinkButton;
 exports.AppTooltip = AppTooltip;
+exports.AudioPlayer = AudioPlayer;
 exports.AutoCompleteField = AutoCompleteField;
 exports.BackLayout = BackLayout;
 exports.BackSidebar = BackSidebar;

package/build/styles.css

@@ -637,4 +637,33 @@ body {
   border-top: 1px solid var(--splitLineColor);
   margin-top: 1em;
   margin-bottom: 1em;
+}
+.index-module_root__VVbaB {
+  display: flex;
+}
+
+.index-module_playing__v4q8X {
+  animation-name: index-module_play-animation__Y-ns-;
+  animation-duration: 1s;
+  animation-iteration-count: infinite;
+  transition: all 0.3s ease;
+  animation-timing-function: linear;
+}
+
+@keyframes index-module_play-animation__Y-ns- {
+  0% {
+    transform: scale(1);
+  }
+  25% {
+    transform: scale(0.9);
+  }
+  50% {
+    transform: scale(1);
+  }
+  75% {
+    transform: scale(1.1);
+  }
+  100% {
+    transform: scale(1);
+  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "revdev-components",
-  "version": "0.127.0",
+  "version": "0.129.0",
   "main": "build/index.js",
   "module": "build/index.esm.js",
   "scripts": {