this.gui 1.0.16 → 1.0.18

package/src/stories/Molecules/AudioPlayer/AudioPlayer.jsx

@@ -1,25 +1,244 @@
-
-import React from 'react';
+//this.GUI/src/stories/Molecules/AudioPlayer/AudioPlayer.jsx
+import React, { useRef, useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
+import { FaPlay, FaPause, FaVolumeUp, FaVolumeMute, FaStepForward, FaStepBackward } from 'react-icons/fa';
 import './AudioPlayer.css';
 
-/**
- * AudioPlayer component
- */
-export const AudioPlayer = (props) => {
+export const AudioPlayer = ({
+  playlist,
+  autoPlay = false,
+  loop = false,
+  muted = false,
+  size = 'medium',
+  color = 'classy-color-1',
+  className = '',
+  style = {},
+  showMedia = true,
+  ...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 [currentTrack, setCurrentTrack] = useState(playlist[0]);
+  const [currentTrackIndex, setCurrentTrackIndex] = useState(0);
+
+  useEffect(() => {
+    const audio = audioRef.current;
+    if (audio) {
+      audio.volume = volume;
+      audio.muted = isMuted;
+      if (autoPlay) {
+        audio.play().catch(() => setIsPlaying(false));
+      }
+    }
+  }, [volume, isMuted, autoPlay, currentTrack]);
+
+  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}`;
+  };
+
+  const nextTrack = () => {
+    const nextIndex = (currentTrackIndex + 1) % playlist.length;
+    setCurrentTrackIndex(nextIndex);
+    setCurrentTrack(playlist[nextIndex]);
+  };
+
+  const prevTrack = () => {
+    const prevIndex = (currentTrackIndex - 1 + playlist.length) % playlist.length;
+    setCurrentTrackIndex(prevIndex);
+    setCurrentTrack(playlist[prevIndex]);
+  };
+
+  const handleTrackClick = (track, index) => {
+    setCurrentTrack(track);
+    setCurrentTrackIndex(index);
+    setIsPlaying(false); // Reset play state to allow clicking a new track.
+  };
+
+  const variantClass = `audio-player--${size}`;
+  const colorClass = `audio-player--${color}`;
+  const combinedClassName = `audio-player ${variantClass} ${colorClass} ${className}`.trim();
+
   return (
-    <div className="audioplayer" {...props}>
-      {/* Component implementation */}
+    <div className={combinedClassName} style={style} {...props}>
+      {showMedia && currentTrack.image && (
+        <div className="audio-player__media">
+          <img src={currentTrack.image} alt={currentTrack.title} />
+        </div>
+      )}
+
+      {/* Display Track Name Above Timeline */}
+      <div className="audio-player__track-name">{currentTrack.title}</div>
+
+      <div className="audio-player__controls">
+        <audio
+          ref={audioRef}
+          src={currentTrack.src}
+          loop={loop}
+          onTimeUpdate={handleTimeUpdate}
+          onLoadedMetadata={handleLoadedMetadata}
+          onEnded={nextTrack}
+        >
+          Your browser does not support the audio element.
+        </audio>
+        <button
+          className="audio-player__prev"
+          onClick={prevTrack}
+          aria-label="Previous Track"
+        >
+          <FaStepBackward />
+        </button>
+        <button
+          className="audio-player__play-pause"
+          onClick={togglePlayPause}
+          aria-label={isPlaying ? 'Pause' : 'Play'}
+        >
+          {isPlaying ? <FaPause /> : <FaPlay />}
+        </button>
+        <button
+          className="audio-player__next"
+          onClick={nextTrack}
+          aria-label="Next Track"
+        >
+          <FaStepForward />
+        </button>
+      </div>
+
+      {/* Timeline with Seek and Time */}
+      <div className="audio-player__seek">
+        <input
+          type="range"
+          className="audio-player__seek-slider"
+          min="0"
+          max={duration}
+          step="0.1"
+          value={currentTime}
+          onChange={handleSeekChange}
+          aria-label="Seek Slider"
+        />
+        <div className="audio-player__time">{formatTime(currentTime)} / {formatTime(duration)}</div>
+      </div>
+
+      <div className="audio-player__volume-container">
+        <button
+          className="audio-player__mute"
+          onClick={toggleMute}
+          aria-label={isMuted ? 'Unmute' : 'Mute'}
+        >
+          {isMuted ? <FaVolumeMute /> : <FaVolumeUp />}
+        </button>
+        <input
+          type="range"
+          className="audio-player__volume-slider"
+          min="0"
+          max="1"
+          step="0.01"
+          value={isMuted ? 0 : volume}
+          onChange={handleVolumeChange}
+          aria-label="Volume Slider"
+        />
+      </div>
+
+      {/* Playlist with Border */}
+      <div className="audio-player__playlist">
+        <ul>
+          {playlist.map((track, index) => (
+            <li
+              key={index}
+              className={`audio-player__track ${index === currentTrackIndex ? 'active' : ''}`}
+              onClick={() => handleTrackClick(track, index)}
+            >
+              {track.title}
+            </li>
+          ))}
+        </ul>
+      </div>
     </div>
   );
 };
 
 AudioPlayer.propTypes = {
-  // Define prop types here
+  playlist: PropTypes.arrayOf(
+    PropTypes.shape({
+      src: PropTypes.string.isRequired,
+      title: PropTypes.string.isRequired,
+      image: PropTypes.string, // Optional album cover or media
+    })
+  ).isRequired,
+  autoPlay: PropTypes.bool,
+  loop: PropTypes.bool,
+  muted: PropTypes.bool,
+  size: PropTypes.oneOf(['small', 'medium']),
+  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',
+  ]),
+  className: PropTypes.string,
+  style: PropTypes.object,
+  showMedia: PropTypes.bool,
 };
 
 AudioPlayer.defaultProps = {
-  // Define default props here
-};
-
-export default AudioPlayer;
+  autoPlay: false,
+  loop: false,
+  muted: false,
+  size: 'medium',
+  color: 'classy-color-1',
+  showMedia: true,
+};

package/src/stories/Molecules/AudioPlayer/AudioPlayer.stories.jsx

@@ -1,20 +1,55 @@
-
+//this.GUI/src/stories/Molecules/AudioPlayer/AudioPlayer.stories.jsx
+import React from 'react';
 import { AudioPlayer } from './AudioPlayer';
+import './AudioPlayer.css';
 
-// Storybook configuration for AudioPlayer component
 export default {
-  title: 'Molecules/MediaMolecules/AudioPlayer',
+  title: 'Molecules/Media/AudioPlayer',
   component: AudioPlayer,
-  parameters: {
-    layout: 'centered',
-  },
   argTypes: {
-    // Define argTypes here
+    autoPlay: { control: 'boolean', defaultValue: false },
+    loop: { control: 'boolean', defaultValue: false },
+    muted: { control: 'boolean', defaultValue: false },
+    size: {
+      control: 'select',
+      options: ['small', 'medium'],
+      defaultValue: 'medium',
+    },
+    color: {
+      control: 'select',
+      options: [
+        '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',
+      ],
+      defaultValue: 'classy-color-1',
+    },
+    showMedia: { control: 'boolean', defaultValue: true },
   },
 };
 
-export const Default = {
-  args: {
-    // Define default args here
+const playlist = [
+  {
+    src: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3',
+    title: 'Track 1',
+    image: 'https://via.placeholder.com/150?text=Track+1',
   },
-};
+  {
+    src: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3',
+    title: 'Track 2',
+    image: 'https://via.placeholder.com/150?text=Track+2',
+  },
+  {
+    src: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-3.mp3',
+    title: 'Track 3',
+    image: 'https://via.placeholder.com/150?text=Track+3',
+  },
+];
+
+export const DefaultAudioPlayer = () => <AudioPlayer playlist={playlist} />;
+export const SmallAudioPlayer = () => <AudioPlayer size="small" playlist={playlist} />;
+export const AutoplayAudioPlayer = () => <AudioPlayer autoPlay playlist={playlist} />;
+export const AudioPlayerWithoutMedia = () => <AudioPlayer showMedia={false} playlist={playlist} />;
+export const LoopingAudioPlayer = () => <AudioPlayer loop playlist={playlist} />;

package/src/stories/Molecules/AvatarWithName/AvatarWithName.css

@@ -1,4 +1,130 @@
+/* this.GUI/src/stories/Molecules/AvatarWithName/AvatarWithName.css */
+/* Base Styles */
+.avatar-with-name {
+  display: inline-flex; /* This ensures that it behaves like an inline element */
+  align-items: center;
+  gap: 8px; /* Reduced gap between the avatar and the name */
+  cursor: pointer;
+}
+
+/* Ensure no auto-centering or alignment issues */
+.avatar-with-name--below {
+  flex-direction: column; /* Stack the name below the avatar */
+  align-items: center; /* Keep the avatar and name centered with respect to each other */
+  text-align: center;
+}
+
+.avatar-with-name--side {
+  flex-direction: row; /* Place the name next to the avatar */
+  text-align: left; /* Ensure text is aligned correctly when the name is to the side */
+  align-items: center; /* Keep the avatar and name aligned vertically */
+}
+
+/* Size Variants */
+.avatar-with-name--small .avatar-with-name__avatar img,
+.avatar-with-name--small .avatar-with-name__avatar svg {
+  width: 40px;
+  height: 40px;
+}
+
+.avatar-with-name--medium .avatar-with-name__avatar img,
+.avatar-with-name--medium .avatar-with-name__avatar svg {
+  width: 80px;
+  height: 80px;
+}
+
+.avatar-with-name--large .avatar-with-name__avatar img,
+.avatar-with-name--large .avatar-with-name__avatar svg {
+  width: 120px;
+  height: 120px;
+}
+
+/* Name styling */
+.avatar-with-name__name {
+  font-size: 1.1rem;
+  color: var(--text-color, #2C2C2C);
+  margin-top: 2px;
+}
+
+/* Avatar styling */
+.avatar-with-name__avatar {
+  border-radius: 50%;
+  object-fit: cover;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #f0f0f0;
+  overflow: hidden;
+}
 
-.avatarwithname {
-  /* Default styles for AvatarWithName */
+.avatar__default-icon {
+  width: 100%;
+  height: 100%;
 }
+
+/* Modal Styles */
+.avatar-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 1000;
+}
+
+.avatar-modal__content {
+  background-color: white;
+  padding: 16px;
+  border-radius: 8px;
+  text-align: center;
+  position: relative;
+  max-width: 300px;
+  width: 100%;
+}
+
+.avatar-modal__avatar-container {
+  display: flex;
+  justify-content: center; /* Center the avatar in the modal */
+  align-items: center;
+}
+
+.avatar-modal__avatar {
+  width: 150px;
+  height: 150px;
+  border-radius: 50%;
+}
+
+.avatar-modal__name {
+  margin-top: 16px;
+  font-size: 1.5rem;
+  font-weight: bold;
+  color: var(--text-color, #2C2C2C);
+}
+
+.avatar-modal__close {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background: none;
+  border: none;
+  font-size: 1.5rem;
+  cursor: pointer;
+}
+
+/* Responsive Adjustments */
+@media (max-width: 768px) {
+  .avatar-with-name--large .avatar-with-name__avatar img,
+  .avatar-with-name--large .avatar-with-name__avatar svg {
+    width: 100px;
+    height: 100px;
+  }
+
+  .avatar-modal__avatar {
+    width: 120px;
+    height: 120px;
+  }
+}

package/src/stories/Molecules/AvatarWithName/AvatarWithName.jsx

@@ -1,25 +1,80 @@
-
-import React from 'react';
+//this.GUI/src/stories/Molecules/AvatarWithName/AvatarWithName.jsx
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import './AvatarWithName.css';
 
-/**
- * AvatarWithName component
- */
-export const AvatarWithName = (props) => {
+const defaultAvatar = (
+  <svg
+    className="avatar__default-icon"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <circle cx="12" cy="12" r="10"></circle>
+    <path d="M14.5 9a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0z"></path>
+    <path d="M12 14c-3.03 0-5.47 1.21-6 3h12c-.53-1.79-2.97-3-6-3z"></path>
+  </svg>
+);
+
+export const AvatarWithName = ({ imageSrc, name, namePosition, size, onClick }) => {
+  const [showModal, setShowModal] = useState(false);
+
+  const handleModalToggle = () => {
+    setShowModal(!showModal);
+  };
+
   return (
-    <div className="avatarwithname" {...props}>
-      {/* Component implementation */}
-    </div>
+    <>
+      <div
+        className={`avatar-with-name avatar-with-name--${namePosition} avatar-with-name--${size}`}
+        onClick={handleModalToggle}
+      >
+        <div className="avatar-with-name__avatar">
+          {imageSrc ? (
+            <img src={imageSrc} alt={name} />
+          ) : (
+            defaultAvatar /* Display the default avatar if no imageSrc is provided */
+          )}
+        </div>
+        <div className="avatar-with-name__name">{name}</div>
+      </div>
+
+      {showModal && (
+        <div className="avatar-modal" onClick={handleModalToggle}>
+          <div className="avatar-modal__content" onClick={(e) => e.stopPropagation()}>
+            <button className="avatar-modal__close" onClick={handleModalToggle}>
+              &times;
+            </button>
+            <div className="avatar-modal__avatar-container">
+              <div className="avatar-modal__avatar">
+                {imageSrc ? (
+                  <img src={imageSrc} alt={name} />
+                ) : (
+                  defaultAvatar /* Use the default avatar in the modal if no imageSrc is provided */
+                )}
+              </div>
+            </div>
+            <div className="avatar-modal__name">{name}</div>
+          </div>
+        </div>
+      )}
+    </>
   );
 };
 
 AvatarWithName.propTypes = {
-  // Define prop types here
+  imageSrc: PropTypes.string, // Image URL for the avatar
+  name: PropTypes.string.isRequired, // The name to display
+  namePosition: PropTypes.oneOf(['below', 'side']), // Position of the name relative to the avatar
+  size: PropTypes.oneOf(['small', 'medium', 'large']), // Size of the avatar
+  onClick: PropTypes.func, // Function to execute on click
 };
 
 AvatarWithName.defaultProps = {
-  // Define default props here
-};
-
-export default AvatarWithName;
+  namePosition: 'below',
+  size: 'medium',
+};

package/src/stories/Molecules/AvatarWithName/AvatarWithName.stories.jsx

@@ -1,20 +1,20 @@
-
+//this.GUI/src/stories/Molecules/AvatarWithName/AvatarWithName.stories.jsx
+import React from 'react';
 import { AvatarWithName } from './AvatarWithName';
 
-// Storybook configuration for AvatarWithName component
 export default {
-  title: 'Molecules/MediaMolecules/AvatarWithName',
+  title: 'Molecules/Display/AvatarWithName',
   component: AvatarWithName,
-  parameters: {
-    layout: 'centered',
-  },
   argTypes: {
-    // Define argTypes here
+    imageSrc: { control: 'text', defaultValue: 'https://via.placeholder.com/150' },
+    name: { control: 'text', defaultValue: 'John Doe' },
+    namePosition: { control: 'select', options: ['below', 'side'], defaultValue: 'below' },
+    size: { control: 'select', options: ['small', 'medium', 'large'], defaultValue: 'medium' },
   },
 };
 
-export const Default = {
-  args: {
-    // Define default args here
-  },
-};
+export const Default = (args) => <AvatarWithName {...args} />;
+
+export const SideName = (args) => <AvatarWithName {...args} namePosition="side" />;
+export const LargeAvatar = (args) => <AvatarWithName {...args} size="large" />;
+export const SmallAvatar = (args) => <AvatarWithName {...args} size="small" />;