this.gui 1.0.15 → 1.0.16

package/src/stories/Atoms/Audio/Audio.css

@@ -1,29 +1,259 @@
+/* src/stories/Atoms/Audio/Audio.css */
 
+/* Base Audio Player Styles */
 .audio {
-  padding: 16px;
-  border-radius: 8px;
-  background-color: #f0f0f0;
-  border: 1px solid #ddd;
+  display: flex;
+  align-items: center;
+  background-color: rgba(245, 245, 245, 0.3); /* Subtle grey with low opacity */
+  padding: var(--spacing-sm, 8px);
+  border-radius: var(--border-radius, 6px);
+  gap: var(--spacing-sm, 8px);
+  max-width: 300px; /* Default for medium size */
+  border: 1px solid var(--border-color, #dddddd); /* Added border */
+  position: relative;
+  transition: background-color var(--transition-speed, 0.3s);
 }
 
-.audio--primary {
-  background-color: #e3f2fd;
-  border-color: #1e88e5;
-}
-
-.audio--secondary {
-  background-color: #fff;
-  border-color: #ccc;
+.audio:hover {
+  background-color: rgba(245, 245, 245, 0.5);
 }
 
+/* Size Variants */
 .audio--small {
-  padding: 8px;
+  max-width: 200px;
 }
 
 .audio--medium {
-  padding: 16px;
+  max-width: 300px;
+}
+
+/* Color Classes */
+.audio--classy-color-1 {
+  --icon-color: var(--classy-color-1);
+}
+
+.audio--classy-color-2 {
+  --icon-color: var(--classy-color-2);
+}
+
+.audio--classy-color-3 {
+  --icon-color: var(--classy-color-3);
+}
+
+.audio--classy-color-4 {
+  --icon-color: var(--classy-color-4);
+}
+
+.audio--classy-color-5 {
+  --icon-color: var(--classy-color-5);
+}
+
+.audio--small-switch-color-1 {
+  --icon-color: var(--small-switch-color-1);
+}
+
+.audio--small-switch-color-2 {
+  --icon-color: var(--small-switch-color-2);
+}
+
+.audio--natural-color-1 {
+  --icon-color: var(--natural-color-1);
+}
+
+.audio--natural-color-2 {
+  --icon-color: var(--natural-color-2);
+}
+
+.audio--natural-color-3 {
+  --icon-color: var(--natural-color-3);
+}
+
+.audio--grey-friend-1 {
+  --icon-color: var(--grey-friend-1);
+}
+
+.audio--grey-friend-2 {
+  --icon-color: var(--grey-friend-2);
+}
+
+.audio--shade-1 {
+  --icon-color: var(--shade-1);
+}
+
+.audio--shade-2 {
+  --icon-color: var(--shade-2);
+}
+
+.audio--shade-3 {
+  --icon-color: var(--shade-3);
+}
+
+.audio--shade-4 {
+  --icon-color: var(--shade-4);
+}
+
+/* Play/Pause and Mute Buttons */
+.audio__play-pause,
+.audio__mute {
+  background-color: rgba(128, 128, 128, 0.2); /* Slightly darker grey */
+  border: none;
+  border-radius: 50%;
+  padding: var(--spacing-xs, 6px);
+  cursor: pointer;
+  transition: background-color var(--transition-speed, 0.3s);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--icon-color, #344b47); /* Default icon color */
 }
 
-.audio--large {
-  padding: 32px;
+.audio__play-pause:hover,
+.audio__mute:hover {
+  background-color: rgba(128, 128, 128, 0.4); /* Darker on hover */
 }
+
+/* Time Display and Seek Slider */
+.audio__seek {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs, 4px);
+  flex: 1;
+}
+
+.audio__seek-slider {
+  width: 100%;
+  cursor: pointer;
+  appearance: none;
+  height: 4px;
+  background: var(--grey-friend-2, #96b1ac);
+  border-radius: 2px;
+  outline: none;
+  transition: background var(--transition-speed, 0.3s);
+}
+
+.audio__seek-slider::-webkit-slider-thumb {
+  appearance: none;
+  width: 12px;
+  height: 12px;
+  background: var(--icon-color, #344b47);
+  border-radius: 50%;
+  cursor: pointer;
+  margin-top: -4px; /* Center the thumb */
+  transition: background var(--transition-speed, 0.3s);
+}
+
+.audio__seek-slider::-moz-range-thumb {
+  width: 12px;
+  height: 12px;
+  background: var(--icon-color, #344b47);
+  border-radius: 50%;
+  cursor: pointer;
+  transition: background var(--transition-speed, 0.3s);
+}
+
+.audio__seek-slider:hover {
+  background: var(--grey-friend-1, #344b47);
+}
+
+.audio__seek-slider:hover::-webkit-slider-thumb,
+.audio__seek-slider:hover::-moz-range-thumb {
+  background: var(--icon-color, #344b47);
+}
+
+.audio__time {
+  font-size: var(--font-size-small, 0.9em);
+  color: var(--icon-color, #344b47); /* Inherit icon color */
+  white-space: nowrap;
+}
+
+/* Volume Container */
+.audio__volume-container {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+/* Volume Slider */
+.audio__volume-slider {
+  position: absolute;
+  bottom: -30px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 100px;
+  cursor: pointer;
+  appearance: none;
+  height: 4px;
+  background: var(--grey-friend-2, #96b1ac);
+  border-radius: 2px;
+  outline: none;
+  transition: opacity var(--transition-speed, 0.3s);
+  opacity: 0;
+  pointer-events: none;
+  z-index: 10;
+}
+
+.audio__volume-slider.visible {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.audio__volume-slider::-webkit-slider-thumb {
+  appearance: none;
+  width: 12px;
+  height: 12px;
+  background: var(--icon-color, #344b47);
+  border-radius: 50%;
+  cursor: pointer;
+  transition: background var(--transition-speed, 0.3s);
+}
+
+.audio__volume-slider::-moz-range-thumb {
+  width: 12px;
+  height: 12px;
+  background: var(--icon-color, #344b47);
+  border-radius: 50%;
+  cursor: pointer;
+  transition: background var(--transition-speed, 0.3s);
+}
+
+.audio__volume-slider:hover {
+  background: var(--grey-friend-1, #344b47);
+}
+
+.audio__volume-slider:hover::-webkit-slider-thumb,
+.audio__volume-slider:hover::-moz-range-thumb {
+  background: var(--icon-color, #344b47);
+}
+
+/* Show Volume Slider on Hover or When Toggled */
+.audio:hover .audio__volume-slider,
+.audio__volume-slider.visible {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+/* Responsive Adjustments */
+@media (max-width: 768px) {
+  .audio--small {
+    max-width: 150px;
+  }
+
+  .audio--medium {
+    max-width: 250px;
+  }
+
+  .audio {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--spacing-xs, 4px);
+  }
+
+  .audio__seek {
+    width: 100%;
+  }
+
+  .audio__volume-slider {
+    bottom: -35px;
+    width: 80px;
+  }
+}

package/src/stories/Atoms/Audio/Audio.jsx

@@ -1,41 +1,216 @@
-
-import React from 'react';
+// src/stories/Atoms/Audio/Audio.jsx
+import React, { useRef, useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
+import { FaPlay, FaPause, FaVolumeUp, FaVolumeMute } from 'react-icons/fa';
 import './Audio.css';
 
-/**
- * Audio component for user interaction
- */
-export const Audio = ({ primary, size, children, ...props }) => {
-  const mode = primary ? 'audio--primary' : 'audio--secondary';
+export const Audio = ({
+  src,
+  autoPlay = false,
+  loop = false,
+  muted = false,
+  size = 'medium',
+  color = 'classy-color-1',
+  className = '',
+  style = {},
+  ...props
+}) => {
+  const audioRef = useRef(null);
+  const [isPlaying, setIsPlaying] = useState(autoPlay);
+  const [isMuted, setIsMuted] = useState(muted);
+  const [volume, setVolume] = useState(muted ? 0 : 1);
+  const [currentTime, setCurrentTime] = useState(0);
+  const [duration, setDuration] = useState(0);
+  const [showVolumeSlider, setShowVolumeSlider] = useState(false);
+
+  useEffect(() => {
+    const audio = audioRef.current;
+    if (audio) {
+      audio.volume = volume;
+      audio.muted = isMuted;
+      if (autoPlay) {
+        audio.play().catch(() => setIsPlaying(false));
+      }
+    }
+  }, [volume, isMuted, autoPlay]);
+
+  const togglePlayPause = () => {
+    const audio = audioRef.current;
+    if (!audio) return;
+
+    if (isPlaying) {
+      audio.pause();
+    } else {
+      audio.play().catch(() => setIsPlaying(false));
+    }
+    setIsPlaying(!isPlaying);
+  };
+
+  const handleTimeUpdate = () => {
+    const audio = audioRef.current;
+    if (audio) {
+      setCurrentTime(audio.currentTime);
+    }
+  };
+
+  const handleLoadedMetadata = () => {
+    const audio = audioRef.current;
+    if (audio) {
+      setDuration(audio.duration);
+    }
+  };
+
+  const handleVolumeChange = (e) => {
+    const newVolume = parseFloat(e.target.value);
+    setVolume(newVolume);
+    setIsMuted(newVolume === 0);
+  };
+
+  const toggleMute = () => {
+    setIsMuted(!isMuted);
+    setVolume(!isMuted ? 0 : 1);
+  };
+
+  const handleSeekChange = (e) => {
+    const seekTime = parseFloat(e.target.value);
+    const audio = audioRef.current;
+    if (audio) {
+      audio.currentTime = seekTime;
+      setCurrentTime(seekTime);
+    }
+  };
+
+  const formatTime = (time) => {
+    if (isNaN(time)) return '00:00';
+    const minutes = Math.floor(time / 60);
+    const seconds = Math.floor(time % 60);
+    const paddedSeconds = seconds < 10 ? `0${seconds}` : seconds;
+    return `${minutes}:${paddedSeconds}`;
+  };
+
+  // Combined handler to toggle mute and show volume slider
+  const handleMuteAndShowSlider = (e) => {
+    toggleMute();
+    setShowVolumeSlider((prev) => !prev);
+    e.stopPropagation();
+  };
+
+  // Close volume slider when clicking outside
+  const handleClickOutside = (e) => {
+    if (!e.target.closest('.audio__volume-container')) {
+      setShowVolumeSlider(false);
+    }
+  };
+
+  useEffect(() => {
+    if (showVolumeSlider) {
+      document.addEventListener('click', handleClickOutside);
+    } else {
+      document.removeEventListener('click', handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener('click', handleClickOutside);
+    };
+  }, [showVolumeSlider]);
+
+  const variantClass = `audio--${size}`;
+  const colorClass = `audio--${color}`;
+  const combinedClassName = `audio ${variantClass} ${colorClass} ${className}`.trim();
+
   return (
     <div
-      className={['audio', `audio--${size}`, mode].join(' ')}
+      className={combinedClassName}
+      style={style}
       {...props}
     >
-      {children}
+      <audio
+        ref={audioRef}
+        src={src}
+        loop={loop}
+        onTimeUpdate={handleTimeUpdate}
+        onLoadedMetadata={handleLoadedMetadata}
+        onEnded={() => setIsPlaying(false)}
+      >
+        Your browser does not support the audio element.
+      </audio>
+      <button
+        className="audio__play-pause"
+        onClick={togglePlayPause}
+        aria-label={isPlaying ? 'Pause' : 'Play'}
+      >
+        {isPlaying ? <FaPause /> : <FaPlay />}
+      </button>
+      <div className="audio__seek">
+        <input
+          type="range"
+          className="audio__seek-slider"
+          min="0"
+          max={duration}
+          step="0.1"
+          value={currentTime}
+          onChange={handleSeekChange}
+          aria-label="Seek Slider"
+        />
+        <div className="audio__time">
+          <span>{formatTime(currentTime)}</span> / <span>{formatTime(duration)}</span>
+        </div>
+      </div>
+      <div className="audio__volume-container">
+        <button
+          className="audio__mute"
+          onClick={handleMuteAndShowSlider}
+          aria-label={isMuted ? 'Unmute' : 'Mute'}
+        >
+          {isMuted ? <FaVolumeMute /> : <FaVolumeUp />}
+        </button>
+        <input
+          type="range"
+          className={`audio__volume-slider ${showVolumeSlider ? 'visible' : ''}`}
+          min="0"
+          max="1"
+          step="0.01"
+          value={isMuted ? 0 : volume}
+          onChange={handleVolumeChange}
+          aria-label="Volume Slider"
+        />
+      </div>
     </div>
   );
 };
 
 Audio.propTypes = {
-  /**
-   * Is this the primary style for the component?
-   */
-  primary: PropTypes.bool,
-  /**
-   * Size of the component
-   */
-  size: PropTypes.oneOf(['small', 'medium', 'large']),
-  /**
-   * Content to be rendered inside the component
-   */
-  children: PropTypes.node.isRequired,
-};
-
-Audio.defaultProps = {
-  primary: false,
-  size: 'medium',
-};
-
-export default Audio;
+  /** Source URL of the audio file */
+  src: PropTypes.string.isRequired,
+  /** Autoplay the audio on load */
+  autoPlay: PropTypes.bool,
+  /** Loop the audio playback */
+  loop: PropTypes.bool,
+  /** Mute the audio by default */
+  muted: PropTypes.bool,
+  /** Size of the audio player */
+  size: PropTypes.oneOf(['small', 'medium']),
+  /** Color from the global palettes */
+  color: PropTypes.oneOf([
+    'classy-color-1',
+    'classy-color-2',
+    'classy-color-3',
+    'classy-color-4',
+    'classy-color-5',
+    'small-switch-color-1',
+    'small-switch-color-2',
+    'natural-color-1',
+    'natural-color-2',
+    'natural-color-3',
+    'grey-friend-1',
+    'grey-friend-2',
+    'shade-1',
+    'shade-2',
+    'shade-3',
+    'shade-4',
+  ]),
+  /** Additional CSS classes */
+  className: PropTypes.string,
+  /** Inline styles */
+  style: PropTypes.object,
+};