cadena100-radioplayer v1.0.26

Radio-player

List of news and tops from the home service of the sites: cadena 100, rockfm, megastar. This project is shared with this sites as a standalone project.

It is a server side html with styled component.

The URLs to access are:

• https://[host]/radio-player/audio: take the 2 first list of modules as a list of news from https:///app/home.
• https://[host]/radio-player/emisoras/barcelona: take the 2 first list of modules as a list of news from https://[host]/app/emisoras/barcelona.

Host project

Folder structure in host project

The files are inside src/client:

radio-player/
    /application
        /components
            /radio-player-wrapper
                radio-player-wrapper.jsx
        application.jsx 
    /config
        assets.js
        menu.js
        radio-player-data.js
        tops.js
    /server
        requests.js
    /styles
        colors.js
        fonts.js
        theme.js
    /utils
        parser-url.js
    app.jsx
    index.html
                            

Import radio-player in host project

You need to import in the radio-player-wrapper.jsx file.

import RadioPlayer from 'cadena100-radioplayer';

Example:

import React from 'react';
import RadioPlayer from 'cadena100-radioplayer';
import Ad from '@Common/components/containers/advert/components/ad';
import { mediaIcons, DefaultImage } from '../../../config/assets';
import { cad100Theme } from '../../../styles/theme';

const RadioPlayerWrapper = ({
  tops,
  newsList,
  menu,
  ads,
}) => (<RadioPlayer
  tops={tops}
  newsList={newsList}
  menu={menu}
  renderAd={() => ads && <Ad id="left" ads={ads} />}
  theme={cad100Theme}
  logo={DefaultImage}
  mediaIcons={mediaIcons}
/>);

export default RadioPlayerWrapper;

RadioPlayer need a list of props to work. This props are filled fetching request in the host project. RadioPlayer app only shows the components finished.

Also, we will pass the theme, logo, and media icons.

Radio Player Development

We will use styleguidist to show the style of the components.

npm run start-styleguide

Go to localhost:6060.

You will se the styleguidedist page to see the final style.

Radio Player Production

Firstly we need to compile de code:

npm run build-pro

Compile the code to be served in dist/index.js

After we publish to npm.

Publish to npm

This npm module is private. The file: .npmrc has the token to send to the correct way.

//registry.npmjs.org/:_authToken=545ae8be-4ff9-4ded-935e-45e59826ddd1

• Change the version: Go to package.json and increase the version

• Create dist/index.js bundle file.

  npm run build-pro

• Publish

  npm publish

In the host project, you need to increase the version in the package.json and exec npm install.