dha-assets v2.4.0

dha-assets

This module is used for image and audio assets.

Getting Started

Install

Install from npm:

• npm i dha-assets

Background/Image Component

Background Props:

• alt?: Alternate text
• name?: Image name provided in package (Takes priority if name and src are both assigned)
• scale?: Image scale with transform
• src?: Image full path and file, imported image file, or image URL
• styles?: Custom css styles

Image Props:

• alt?: Alternate text
• maxWidth?: Max width in any css unit (Defaults to none)
• name?: Image name provided in package (Takes priority if name and src are both assigned)
• src?: Image full path and file, imported image file, or image URL
• styles?: Custom css styles

Disclaimer: For this demo code to work with imported images in JS and from the public folder options, add and/or replace dha-logo.png and dha-splash.png with your own image files.

Add and/or Replace Image Files in Application:

• ./public/dha-logo.png
• ./public/dha-splash.png
• ./src/assets/images/dha-logo.png
• ./src/assets/images/dha-splash.png

Importing Your Own Local Asset Files (Audio and Images)

This package provides built-in images so this step is optional and isn't necessary for the package to work. If you want to use your own local asset files with this package there are a couple of ways to do this in create-react-app, see Option 1 and Option 2.

Option 1: Import Assets in JS Using Relative Path.

• Relative folder (./src/assets) - Add audio and/or image files to a relative folder from source. Change the path and folder name to your application structure and adjust the import path when importing the asset.

  • ex ./src/assets/audio/audio.mp3 and/or ./src/assets/images/image.png

react-app-env.d.ts (Audio Only) - Append the following line to the end of file and duplicate for all audio file extensions that are being used. Prepending this line to the start of file will throw an error.

/// <reference types="react-scripts" />

// Append the following line and any additional audio extensions
declare module '*.mp3';

Importing Assets in JS Example:

Disclaimer: This is a non-compilable example. For a compilable working example, see the full functional and class component examples below.

// Audio
import audioMp3 from '../assets/audio/audio.mp3';
createAudio('audioMp3', audioMp3);

// Image
import imagePng from '../assets/images/image.png';
<Background alt="Image alt" image={imagePng} scale={1} styles={styles.background} />;
<Image alt="Image alt" maxWidth="250px" src={imagePng} styles={styles.image} />;

Option 2: CRA Public Folder Assets - NOT Recommended

• Public folder (./public) - Add audio and/or image files to CRA public folder. Create your own folder structure and adjust the path when using the asset.

  • ex ./public/assets/audio/audio.mp3 and/or ./public/assets/images/image.png

Using CRA Public Folder Example:

Disclaimer: This is a non-compilable example. For a compilable working example, see the full functional and class component examples below.

// Audio
createAudio('audioMp3', 'assets/audio/audio.mp3');

// Image
<Background alt="Image alt" image="assets/images/image.png" scale={1} styles={styles.background} />;
<Image alt="Image alt" maxWidth="250px" src="assets/images/image.png" styles={styles.image} />;

Home.tsx - Functional component - Image Demo

import { Grid, Typography } from '@material-ui/core';
import { Background, Image } from 'dha-assets';
import React from 'react';
import dHALogoRelAssets from '../../assets/images/dha-logo.png';
import dHASplashRelAssets from '../../assets/images/dha-splash.png';

const styles: { image: object } = {
  image: {
    borderStyle: 'solid',
  },
};

const Home: React.FC = () => {
  return (
    <Grid container={true} spacing={2}>
      <Grid item={true} xs={12}>
        <Typography variant="h5">Option 1: Built-In Image</Typography>
      </Grid>
      <Grid item={true} xs={6}>
        <Background alt="DHA logo" name="dha-logo" scale={1} styles={styles.image}>
          <Typography>Add nested div or React component (optional)</Typography>
        </Background>
      </Grid>
      <Grid item={true} xs={6}>
        <Image alt="DHA splash" maxWidth="250px" name="dha-splash" styles={styles.image} />
      </Grid>
      <Grid item={true} xs={12}>
        <Typography variant="h5">Option 2: Import Image in JS Using Relative Path</Typography>
      </Grid>
      <Grid item={true} xs={6}>
        <Background alt="DHA logo" src={dHALogoRelAssets} scale={1} styles={styles.image}>
          <Typography>Add nested div or React component (optional)</Typography>
        </Background>
      </Grid>
      <Grid item={true} xs={6}>
        <Image alt="DHA splash" maxWidth="250px" src={dHASplashRelAssets} styles={styles.image} />
      </Grid>
      <Grid item={true} xs={12}>
        <Typography variant="h5">Option 3: Hosted Image</Typography>
      </Grid>
      <Grid item={true} xs={6}>
        <Background
          alt="Placeholder Background Component"
          src="https://via.placeholder.com/250"
          scale={1}
          styles={styles.image}
        >
          <Typography>Add nested div or React component (optional)</Typography>
        </Background>
      </Grid>
      <Grid item={true} xs={6}>
        <Image
          alt="Placeholder Image Component"
          maxWidth="250px"
          src="https://via.placeholder.com/250"
          styles={styles.image}
        />
      </Grid>
      <Grid item={true} xs={12}>
        <Typography variant="h5">Option 4: CRA Public Folder Image - NOT Recommended</Typography>
      </Grid>
      <Grid item={true} xs={6}>
        <Background alt="DHA logo" src="dha-logo.png" scale={1} styles={styles.image}>
          <Typography>Add nested div or React component (optional)</Typography>
        </Background>
      </Grid>
      <Grid item={true} xs={6}>
        <Image alt="DHA splash" maxWidth="250px" src="dha-splash.png" styles={styles.image} />
      </Grid>
    </Grid>
  );
};

export default Home;

Home.tsx - Class component - Image Demo

import { Grid, Typography } from '@material-ui/core';
import { Background, Image } from 'dha-assets';
import React from 'react';
import dHALogoRelAssets from '../../assets/images/dha-logo.png';
import dHASplashRelAssets from '../../assets/images/dha-splash.png';

const styles: { image: object } = {
  image: {
    borderStyle: 'solid',
  },
};

class Home extends React.Component {
  render() {
    return (
      <Grid container={true} spacing={2}>
        <Grid item={true} xs={12}>
          <Typography variant="h5">Option 1: Built-In Image</Typography>
        </Grid>
        <Grid item={true} xs={6}>
          <Background alt="DHA logo" name="dha-logo" scale={1} styles={styles.image}>
            <Typography>Add nested div or React component (optional)</Typography>
          </Background>
        </Grid>
        <Grid item={true} xs={6}>
          <Image alt="DHA splash" maxWidth="250px" name="dha-splash" styles={styles.image} />
        </Grid>
        <Grid item={true} xs={12}>
          <Typography variant="h5">Option 2: Import Image in JS Using Relative Path</Typography>
        </Grid>
        <Grid item={true} xs={6}>
          <Background alt="DHA logo" src={dHALogoRelAssets} scale={1} styles={styles.image}>
            <Typography>Add nested div or React component (optional)</Typography>
          </Background>
        </Grid>
        <Grid item={true} xs={6}>
          <Image alt="DHA splash" maxWidth="250px" src={dHASplashRelAssets} styles={styles.image} />
        </Grid>
        <Grid item={true} xs={12}>
          <Typography variant="h5">Option 3: Hosted Image</Typography>
        </Grid>
        <Grid item={true} xs={6}>
          <Background
            alt="Placeholder Background Component"
            src="https://via.placeholder.com/250"
            scale={1}
            styles={styles.image}
          >
            <Typography>Add nested div or React component (optional)</Typography>
          </Background>
        </Grid>
        <Grid item={true} xs={6}>
          <Image
            alt="Placeholder Image Component"
            maxWidth="250px"
            src="https://via.placeholder.com/250"
            styles={styles.image}
          />
        </Grid>
        <Grid item={true} xs={12}>
          <Typography variant="h5">Option 4: CRA Public Folder Image - NOT Recommended</Typography>
          <Typography>Add images to public folder and add file path/name to src prop.</Typography>
        </Grid>
        <Grid item={true} xs={6}>
          <Background alt="DHA logo" src="dha-logo.png" scale={1} styles={styles.image}>
            <Typography>Add nested div or React component (optional)</Typography>
          </Background>
        </Grid>
        <Grid item={true} xs={6}>
          <Image alt="DHA splash" maxWidth="250px" src="dha-splash.png" styles={styles.image} />
        </Grid>
      </Grid>
    );
  }
}

export default Home;

Audio Component

Disclaimer: For this demo code to work with imported audio in JS and from the public folder options, add and/or replace exhale.mp3 and inhale.mp3 with your own audio files.

Add and/or Replace Audio Files in Application:

• ./public/exhale.mp3
• ./public/inhale.mp3
• ./src/assets/audio/exhale.mp3
• ./src/assets/audio/inhale.mp3

react-app-env.d.ts (Audio Only) - Append the following line to the end of file and duplicate for all audio file extensions that are being used. Prepending this line to the start of file will throw an error.

/// <reference types="react-scripts" />

// Append the following line and any additional audio extensions
declare module '*.mp3';

Home.tsx - Functional component - Audio Demo

import { Grid, Typography } from '@material-ui/core';
import { audioFiles, createAudio, pauseAudio, playAudio, stopAudio } from 'dha-assets';
import React from 'react';
import exhaleRelAssets from '../../assets/audio/exhale.mp3';
import inhaleRelAssets from '../../assets/audio/inhale.mp3';

const Home: React.FC = () => {
  createAudio('exhaleRelAssets', exhaleRelAssets);
  createAudio('inhaleRelAssets', inhaleRelAssets);
  createAudio('pianoURL', 'http://www.kozco.com/tech/piano2.wav');
  createAudio('inhalePublic', 'exhale.mp3');
  createAudio('exhalePublic', 'inhale.mp3');

  const pauseRelAssets = () => {
    pauseAudio('exhaleRelAssets');
    pauseAudio('inhaleRelAssets');
  };
  const playRelAssets = () => {
    playAudio('exhaleRelAssets');
    playAudio('inhaleRelAssets');
  };

  const stopRelAssets = () => {
    stopAudio('exhaleRelAssets');
    stopAudio('inhaleRelAssets');
  };

  const pauseURL = () => {
    pauseAudio('pianoURL');
  };

  const playURL = () => {
    playAudio('pianoURL');
  };

  const stopURL = () => {
    stopAudio('pianoURL');
  };

  const pausePublic = () => {
    pauseAudio('exhalePublic');
    pauseAudio('inhalePublic');
  };

  const playPublic = () => {
    playAudio('exhalePublic');
    playAudio('inhalePublic');
  };

  const stopPublic = () => {
    stopAudio('exhalePublic');
    stopAudio('inhalePublic');
  };

  return (
    <Grid container={true} spacing={2}>
      <Grid item={true} xs={12}>
        <Typography>audioFiles: {JSON.stringify(audioFiles)}</Typography>
      </Grid>
      <Grid item={true} xs={12}>
        <Typography>Option 1: Import Audio in JS Using Relative Path</Typography>
      </Grid>
      <Grid item={true} xs={12}>
        <button onClick={playRelAssets}>Play</button>
        <button onClick={pauseRelAssets}>Pause</button>
        <button onClick={stopRelAssets}>Stop</button>
      </Grid>
      <Grid item={true} xs={12}>
        <Typography>Option 2: Hosted Audio</Typography>
      </Grid>
      <Grid item={true} xs={12}>
        <button onClick={playURL}>Play</button>
        <button onClick={pauseURL}>Pause</button>
        <button onClick={stopURL}>Stop</button>
      </Grid>
      <Grid item={true} xs={12}>
        <Typography>Option 3: CRA Public Folder Image - NOT Recommended</Typography>
      </Grid>
      <Grid item={true} xs={12}>
        <button onClick={playPublic}>Play</button>
        <button onClick={pausePublic}>Pause</button>
        <button onClick={stopPublic}>Stop</button>
      </Grid>
    </Grid>
  );
};

export default Home;

Home.tsx - Class component - Audio Demo

import { Grid, Typography } from '@material-ui/core';
import { audioFiles, createAudio, pauseAudio, playAudio, stopAudio } from 'dha-assets';
import React from 'react';
import exhaleRelAssets from '../../assets/audio/exhale.mp3';
import inhaleRelAssets from '../../assets/audio/inhale.mp3';

class Home extends React.Component {
  constructor(props: any) {
    super(props);

    createAudio('exhaleRelAssets', exhaleRelAssets);
    createAudio('inhaleRelAssets', inhaleRelAssets);
    createAudio('pianoURL', 'http://www.kozco.com/tech/piano2.wav');
    createAudio('inhalePublic', 'exhale.mp3');
    createAudio('exhalePublic', 'inhale.mp3');
  }

  pauseRelAssets = () => {
    pauseAudio('exhaleRelAssets');
    pauseAudio('inhaleRelAssets');
  };

  playRelAssets = () => {
    playAudio('exhaleRelAssets');
    playAudio('inhaleRelAssets');
  };

  stopRelAssets = () => {
    stopAudio('exhaleRelAssets');
    stopAudio('inhaleRelAssets');
  };

  pauseURL = () => {
    pauseAudio('pianoURL');
  };

  playURL = () => {
    playAudio('pianoURL');
  };

  stopURL = () => {
    stopAudio('pianoURL');
  };

  pausePublic = () => {
    pauseAudio('exhalePublic');
    pauseAudio('inhalePublic');
  };

  playPublic = () => {
    playAudio('exhalePublic');
    playAudio('inhalePublic');
  };

  stopPublic = () => {
    stopAudio('exhalePublic');
    stopAudio('inhalePublic');
  };

  render() {
    return (
      <Grid container={true} spacing={2}>
        <Grid item={true} xs={12}>
          <Typography>audioFiles: {JSON.stringify(audioFiles)}</Typography>
        </Grid>
        <Grid item={true} xs={12}>
          <Typography>Option 1: Import Audio in JS Using Relative Path</Typography>
        </Grid>
        <Grid item={true} xs={12}>
          <button onClick={this.playRelAssets}>Play</button>
          <button onClick={this.pauseRelAssets}>Pause</button>
          <button onClick={this.stopRelAssets}>Stop</button>
        </Grid>
        <Grid item={true} xs={12}>
          <Typography>Option 2: Hosted Audio</Typography>
        </Grid>
        <Grid item={true} xs={12}>
          <button onClick={this.playURL}>Play</button>
          <button onClick={this.pauseURL}>Pause</button>
          <button onClick={this.stopURL}>Stop</button>
        </Grid>
        <Grid item={true} xs={12}>
          <Typography>Option 3: CRA Public Folder Audio - NOT Recommended</Typography>
        </Grid>
        <Grid item={true} xs={12}>
          <button onClick={this.playPublic}>Play</button>
          <button onClick={this.pausePublic}>Pause</button>
          <button onClick={this.stopPublic}>Stop</button>
        </Grid>
      </Grid>
    );
  }
}

export default Home;

Contribute

see Github wiki

NPM

https://www.npmjs.com/package/dha-assets

License

pending