SWIUI Media

📖 Overview

In this package, you will find fundamental media-related features, such as audio (basic and advanced), video (video card and video player), and potentially more in the future. We will explore each feature separately, and as we did with the core package, we will explain its purpose and usage. Ready? 😎

🗒️ Features

• Pre-built UI components for audio and video-related elements.
• Utility functions for common UI logic.
• Consistent styling using Tailwind and NativeWind.
• Accessibility-focused components.
• Fully customizable with className props.

🧰 Installation and Configuration

To install @swiui/media in your project, run:

# Using yarn
yarn add @swiui/media

# Using npm
npm install @swiui/media

Note: The @swiui/core package will be installed along with this package as it's already there in the dependencies.

Add the following line to the content section inside tailwind.config.js file (if you’ve already configured Tailwind). If not, go ahead and install nativewind & tailwind and configure it.:

content: {
  ...
  "./node_modules/@swiui/core/**/*.{ts,tsx,js,jsx}",
  "./node_modules/@swiui/media/**/*.{ts,tsx,js,jsx}", // Add this
  ...
}

This will allow your app to read the Tailwind classNames from the package.

🛠️ Usage

Import components from @swiui/media and use them in your project:

import {
  VideoCard,
  VideoPlayer,
  BasicAudioPlayer,
  AdvancedAudioPlayer,
} from "@swiui/media";

🎙️ Audio

Basic Audio Player Component

The BasicAudioPlayer is a pre-built UI component designed to play audio files with a simple and intuitive interface. It includes a play/pause button, a waveform visualization, and a timer showing the remaining duration. The component is customizable and supports both left and right orientations.

To use the BasicAudioPlayer component, import it as follows:

import { BasicAudioPlayer } from "@swiui/media";

Code Example:

 const MyComponent = () => {
    return (
       <View className="w-fit border-4 border-gray-100 shadow-md rounded-xl bg-gray-100 ">
          <BasicAudioPlayer audioSource="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"
            orientation="left"
          />
        </View>
    );

Desired Outcome:

Optional Props vs. Required Props

| Prop Name | Type | Possible Values | Required | Description | | :------------------: | :---------------: | :-----------------------------: | :------: | :---------------------------------------------------------------: | | audioSource | string | "https://example.com/audio.mp3" | ✅ | The URL or path to the audio file to be played. | | orientation | "left" | "right" | "left" | "right" | ✅ | Determines the alignment of the player (left or right). | | playPauseButtonStyle | string | "bg-blue-500" , "p-2" | ❌ | Custom Tailwind or CSS classes for styling the play/pause button. | | className | string | "bg-gray-100" , "p-4" | ❌ | Custom Tailwind or CSS classes for styling the container. |

Advanced Audio Player Component

The AdvancedAudioPlayer is a feature-rich audio player component designed to handle playlists with advanced playback controls. It includes play/pause, step forward/backward, replay, shuffle, rewind, forward, and a seekable slider.

To use the AdvancedAudioPlayer component, import it as follows:

import { AdvancedAudioPlayer } from "@swiui/media";

Code Example:

 const MyComponent = () => {
   const audioSources = [
    "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3",
    "https://samplelib.com/lib/preview/mp3/sample-12s.mp3",
    "https://www.learningcontainer.com/wp-content/uploads/2020/02/Kalimba.mp3",
    "https://freetestdata.com/wp-content/uploads/2021/09/Free_Test_Data_100KB_MP3.mp3",
  ];

    return (
      <View className="bg-white rounded-lg p-5 w-10/12">
              <AdvancedAudioPlayer
                playlist={audioSources}
                className="bg-gray-100 p-4 rounded-lg"
                buttonsContainerClassName="mt-4"
                playPauseButtonStyle="text-blue-500"
              />
            </View>
      );

Desired Outcome:

Optional Props vs. Required Props

| Prop Name | Type | Possible Values | Required | Description | | :-----------------------: | :------------------: | :------------------------------------------------------------------: | :------: | :-------------------------------------------------------------------: | | playlist | string[] | number[] | ["https://example.com/audio1.mp3", "https://example.com/audio2.mp3"] | ✅ | An array of audio sources (URLs or paths) to be played as a playlist. | | className | string | "bg-gray-100 p-4" | ❌ | Custom Tailwind or CSS classes for styling the container. | | playPauseButtonStyle | string | "bg-blue-500", "p-2" | ❌ | Custom Tailwind or CSS classes for styling the play/pause button. | | buttonsContainerClassName | string | "gap-4", "p-2" | ❌ | Custom Tailwind or CSS classes for styling the buttons container. | | testID | string | "audio-player" | ❌ | A unique identifier for testing purposes. |

🎥 Video

Video Card Component

The VideoCard is designed to display a video thumbnail with a play button overlay. It is ideal for showcasing video content in a compact and interactive format. The component supports custom sizing, styling, and an on-press handler for the play button.

To use the VideoCard component, import it as follows:

import { VideoCard } from "@swiui/media";

Code Example:

 const MyComponent = () => {
    return (
      <VideoCard
        handlePress={() => alert("")}
        videoCardCover="https://picsum.photos/200"
        />
      );

Desired Outcome:

Optional Props vs. Required Props

| Prop Name | Type | Possible Values | Required | Description | | :-------------: | :--------: | :-----------------------------: | :------: | :---------------------------------------------------------------------------: | | videoCardCover | string | "https://example.com/cover.jpg" | ✅ | The URL or path to the video thumbnail image. | | width | number | 150, 200 | ❌ | The width of the card. Defaults to 150. Height is calculated as width * 1.2. | | className | string | "bg-blue-100" , "p-2" | ❌ | Custom Tailwind or CSS classes for styling the container. | | buttonClassName | string | "bg-blue-500" , "p-4" | ❌ | Custom Tailwind or CSS classes for styling the play button. | | handlePress | () => void | () => console.log("Play") | ✅ | Function to execute when the play button is pressed. |

Video Player Component

The VideoPlayer is a fully-featured video player component that supports playback of video playlists, fullscreen mode, playback controls (play/pause, rewind, forward, step forward/backward), and a seekable slider.

To use the VideoPlayer component, import it as follows:

import { VideoPlayer } from "@swiui/media";

Code Example:

 const MyComponent = () => {
    const playlistContent = [
              "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",
              "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4",
            ]

    return (
     <VideoPlayer
          videoUri={playlistContent[0]}
          playlist={playlistContent}
        />
      );

Desired Outcome:

Optional Props vs. Required Props

| Prop Name | Type | Possible Values | Required | Description | | :-------: | :-----------: | :------------------------------------------------------------------: | :------: | :-------------------------------------------------------------------: | | playlist | VideoSource[] | ["https://example.com/video1.mp4", "https://example.com/video2.mp4"] | ✅ | An array of video sources (URLs or paths) to be played as a playlist. |

Contributing

For internal use only. Please follow the project’s coding guidelines when making modifications.

License

This package is proprietary and intended for use within the company.