@swiui/media v1.7.2

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

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

🎥 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

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

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.