cambalab / ns-vue-radio

A native white-label application built with NativeScript-Vue for community radios

Ns-Vue-Radio is a native white-label application built with NativeScript-Vue for community radios

---

Download and Install

Download the command line tools from the android website.

Follow this steps:

• NativeScript Advanced Setup: Linux
• Setup Android Emulators

Generate your radio application

Follow instructions in our guide to generate your radio app.

FCM Firebase Cloud Messaging

• Enabling Firebase Cloud Messaging

Don't forget to copy your google-services.json to -> template/app/App_Resources/Android/ folder, follow steps here:

• firebase conguration guide

"nativescript-plugin-firebase": "7.1.2",

Usage

# Install dependencies
npm install

# Build for production
tns build <platform> --bundle

# Build for development
tns build <platform> --bundle --env.development

# Build, watch for changes and debug the application
tns debug <platform> --bundle

# Build, watch for changes and debug the application for development
tns debug <platform> --bundle --env.development

# Build, watch for changes and run the application
tns run <platform> --bundle

# Build, watch for changes and run the application for development
tns run <platform> --bundle --env.development

# Build, watch for changes and run the application using json_data
tns run <platform> --bundle --env.jsondata

• Instructions to debug using VueDevtools

Clean the NativeScript application instance

i.e. rm -rf platforms

npm run clean

For detailed instructions, see vue-cli-template

Contribution

Please make sure to read the Contributing Guide before making a pull request.

License

This software is licensed under the GNU GPLv3 License, and sponsored by Cambá.

---

With 💚 💜 ❤️ by Cambá Coop 🌎 Buenos Aires, Argentina

ns-vue-radio's Issues

Add support to build x64 applications

In the app.gradle add the ndk props and the project.ext

android {
  defaultConfig {
    ndk {
      abiFilters 'armeabi-v7a','arm64-v8a','x86','x86_64'
    }
  }
}
project.ext {
    googlePlayServicesVersion = "+"
}

Refactor: decouple whatsapp phone number from WriteUs

Make the phone number dynamic by proving a phoneNumber prop in config.js with a desired phone number as value.

Configure an eslint loader into the webpack configuration

Is your feature request related to a problem? Please describe.
A good complement to a the .eslintrc file is to implement a pre-loader during the webpack compilation.

Describe the solution you'd like
When the project compiles, a loader lints the project searching for potential syntax issues, showing the errors or warnings in the terminal.

Describe alternatives you've considered
Use the Nativescript Vue Loader

Translate Services

We need to translate the services to english

Documentation Spanish translations

Spanish translation for #4 and #3

Document which Radio Servers are compatible with the app

The app is compatible with Icecast2 mp3 stream.
Are there any other platforms supported?
Which file protocols work with this app?

Translate nativescript-firebase-plugin installation guide

guia-plugin-firebase.tar.gz

and add it to the docs/

Upgrade to new version nativescript-dev-webpack

NS-vue-radio has security bug report because use version to nativescript-dev-webpack and this project use old request version with cryptile dependencies..

Today , release new version nativescript-dev-webpack with upgrade request dependencies

Implement internationalization for date selector

Is your feature request related to a problem? Please describe.
When we were translating the components we noticed that translating the date selector is not as simple as everything else because it compares the day name.

Describe the solution you'd like
Instead of the list of days as a string they should be an object with an identifier and its human readable name translated to the current locale

ESLint Cleanup: vue store

Is your feature request related to a problem? Please describe.
Just a cleanup.

Describe the solution you'd like
Clean up eslint issues in the store directory

Add i18n support

Is your feature request related to a problem? Please describe.
It would be good to have the option to have internationalization in the app. (at least english and spanish)

Describe the solution you'd like
I have been looking around and found this plugin. I'm not sure if it's the best one to do the job.

Move hardcoded social network options to config file

Right now social networks are hardcoded in this file.
The idea is to move them to a config file where you can select which ones do you want.

Easily customize application identity

It would be nice to provide a way to easily customize the application to match client needs. Here we encounter a few problems to solve, and some of them are already kind of prone to work properly. I took a few notes of what needs to be dynamically refactored in a first instance:

• Splash screen
• Navigation bar icon colors
• Social Media buttons: urls and colors
• Application logo image

We already use a config.js to define sections and social media buttons configuration, though it's not enough to provide a more dynamic customization experience.

What we need to do:

Refactor config.js so that sections are not just a string but an object containing:

• name: the name of the bound component to that section
• i18nText: the i18n property used in that section
• icon: the name of the icon

Then we'd be able to dynamically generate BottomNavigationTab objects and we'd have partially covered the Navigation bar item of the list above.

Another issue is that components are hardcoded rendered, asumming every user wants all sections to be rendered. This new feature will break. Therefore I think that we can use the :is directive along with the section.name value to define which component should be rendered.
Next, every component is shown (or not) inside the GridLayout using the v-show directive, that can be solved using the section.name value. In fact, that logic can be refactored to a method in Home.vue, like we already do with the v-if directive logic.

We have another issue regarding the BottomNavigationBar colors. We need to think about a way to dynamically assign appearance from config.json. That is no hard thing to do, we can define a new property, such as:

bottomNavigationBar: {
  activeColor: '',
  inactiveColor: '',
  backgroundColor: ''
}

note: keyLineColor seems to have been deprecated. At least, it doesn't show up in the documentation.

All this look good but, we know we can define colors using the class prop, as shown in here. We already do that in _mixins.scss and it would be nice to continue doing.

• Propose a way to dynamically assign colors from config.json that matches the ones provided by scss.
  In order to do this we'll need to know which colors are available and have them all listed (to generate documentation)

This proposal will completely cover the Navigation Bar item from the list above.

• Social buttons are already quite dynamic. We only need to generate documentation with all those available iconIds
• Logo image: write documentation telling what the proper dimensions are for a logo image.
• Write a proposal telling how to dynamically change the splash screen

Add support for http requests for Android 9

In the AndroidManifest add support for clear text traffic:

<application android:name="com.tns.NativeScriptApplication" android:allowBackup="true" android:icon="@drawable/icon" android:label="@string/app_name" android:theme="@style/AppTheme" android:usesCleartextTraffic="true">

Home: translate comments to English (if necessary)

The Home component still has documented code in Spanish. It would be nice to translate them to English, or remove them if they're trivial.

• Suggest translations in this issue
• Open PR

Update main.js

For a proper migration, we'll have to apply a few updates in the main.js

• Update nativescript-bottom-navigation to "^1.5.1"
• Rename BottomNavigation to BottomNavigationBar (this will have to be updated in the Home.vue component too
• Update vue-dev-tools usage (a host option is required now, keep it commented anyway)

Document how to use the local API or connect to any API

Improve local API

Is your feature request related to a problem? Please describe.
It doesn't have as many examples as we need to manually test while we are developing so it isnt of much help, it would also be good to use images.

Describe the solution you'd like
Increase the number of examples on each API endpoint to make it more helpful

Additional context
the data source is this file

Include screenshots in README.md

we need to add screenshots of the app working to make it more appealing

ESLint Cleanup: lang and utility modules

Is your feature request related to a problem? Please describe.
Just a cleanup

Describe the solution you'd like
Clean up eslint issues in the lang, libs and router directories.

Guide to generate your radio app

ESLint Cleanup: core js modules

Is your feature request related to a problem? Please describe.
Just a cleanup.

Describe the solution you'd like
Clean up eslint issues in the config.js, main.js and webpack.config.js

Guide to choose social networks

Write guide to choose the app social networks and add it to the docs/

Move hardcoded section options to config file

Right now sections are hardcoded in this file.
The idea is to move them to a config file where you can select which ones do you want.

Eslint is not working

Eslint is currently throwing this error in a text editor:

Error while running ESLint: Environment key "TNS_ENV is unkwown

We need to move the TNS_ENV prop from env to globals in the .eslintrc file.

Translate state management

Everything related to vuex store, actions, mutations and getters to english

Use English as default locale

It would be convenient for the community to have the application the en locale configured as default.

Update readme with logo and sponsorship

Now the readme doesn't has the logo of the ns vue radio and Cambá.

Add some style and the logos at the readme description

Tutorials and info to make great readme text

https://jesuslc.com/2016/07/12/como-escribir-un-readme-que-mole/

https://dotdev.co/how-to-write-a-readme-that-rocks-bc29f279611a

API_URL is not defined in webpack.config.js

API_URL should be defined in webpack.config.js

Guide to choose the sections

Write guide to choose the app sections and add it to the docs/

Refactor: decouple email from WriteUs component

Make the email dynamic by proving a writeEmailTo prop in config.js with a desired email as value.

html2plaintext throws inherits is not a function

We will have to replace this dependency to [email protected] and:

• update it's usage in the podcasts section:
  podcast.content = htmlToText.fromString(podcast.content, { wordwrap: 200 });
• update default value for pocasts from undefined to empty list

Documentation English translations

English translation for #4 and #3

Podcasts cleanup

Remove console.log (32)

Translate Firebase configuration guide

guia-config-firebase.tar.gz

and add it to the docs/

Store: refactor literals to string constants

Mutations and components constantly calls mutations from the store. We're currently defining them with a literal string. It would be nice to define a constants file in the store directory so that every definition depends on a unique string defined in a single file.

This proposal attempts to provide a little bit of flexibility if we ever have to rename a mutation.

This issue includes a refactor mainly in the mutations file as well as every piece of code that calls mutations using a literal string.

Create a new logo

Is your feature request related to a problem? Please describe.
The ns vue radio doesn't have any logo to help visualizations

Describe the solution you'd like
This will need a logo idea in png and svg format, 520 x 520px and 128 x 128 px

Describe alternatives you've considered
Maybe we could create a version inspired to radio icons and native vue js logo.

Define different environment configuration files

Currently we have a single environment json file that defines the backend env variables.
We could separate those urls into different files where we can easily distinguish between development and production environments.

My proposal is to deprecate backend.json and define two new files in the same directory:

• development.json
• production.json

Example:

{
  "API_URL": "my-api-url"
}

Then we will have to slightly modify the webpack config so that we don't require a single environment json file but choose between two different environments. We can use require from an interpolated string from ./environments/{production|development}. Example

const environment = require(`./environments/${mode}`);

The last technical step is to apply these changes where global variables are defined (line 243). We will have to replace api_url to the new one coming from the {development|production}.json file

After all changes are made and the application runs properly with he new configurations we'll need to add the environments directory to .gitignore and write documentation explaining how to properly setup the app with this files, because webpack will always try to look for an API_URL variable.

Depends on: #91

Removing sections causes content in other sections to be swapped or dissapear

Describe the bug
Inconsistent behavior when removing unwanted sections, some sections doesn't show content and others change in order.

To Reproduce

1. Remove a section from the section array
2. Run the app
3. Go to any section beyond the one that you deleted

Expected behavior
it should show the correct screen when changing sections.

Mutations: cleanup

• Translate to english or remove documented code
• Remove console.log (59, 76)
• Rename firebase topic subscription to english keywords as well as those in the changeTab function

Configure ESLint to enforce coding style consistency

Is your feature request related to a problem? Please describe.
In open source projects, not having coding conventions could probably lead to lack of readability and eventually the code becomes hard to read. Readability could also inspire confidence to potential contributors.

Describe the solution you'd like
It would be nice to have a configuration file with es6 and Vue syntax rules.

Describe alternatives you've considered
An ESLint configuration file would be the easier solution to promote readable coding style. We could also add a short description in the README describing the setup for popular text editors.

Implement a versioning file

Is your feature request related to a problem? Please describe.
It would be useful to have a changelog to make it easier for users and contributors to see precisely what notable changes have been made between each release (or version) of the project.

Describe the solution you'd like
Since there is no precise convention for a CHANGELOG.md I propose using Keep a Changelog

Describe alternatives you've considered
Other alternative could be to use the Github Changelog Generator

Additional context
A useful feature for the future is to implement a git hook to enforce a changelog update before every push.

Translate Components

We need to translate the components to english

Write guide to change app colors

The app has the possibility to change its main colors by changing this file:

https://github.com/Cambalab/ns-vue-radio/blob/develop/app/sass/_mixins.scss

Add vue-router to package.json

The vue-router dependency is missing in package.json, we should add it in dependencies.

Move the stream's url to config file.

ESLint Cleanup: components

Is your feature request related to a problem? Please describe.
Just a cleanup.

Describe the solution you'd like
Clean up eslint issues in the components directory.

Upgrade application to nativescript 6

In order to work with the latests nativescript updates we should consider to migrate the application to the latest nativescript cli.

Steps below:

Make sure we're working with the latest tns

npm install --global nativescript@latest

Migrate application

tns migrate

This will generate a backup directory with the assets and create the new directory for the current assets.

Update webpack configuration

./node_modules/.bin/update-ns-webpack --configs

It is possible that changes in production/development mode have to be made, since we manually configured it in the past to read values from API_URL

Check that everything is working fine

tns debug android --bundle --compileSdk 28

Some build scripts that could help

WriteUs, Social: syntax refactor

Replace require statements for import

Remove console.log from WriteUs (43)

Update license in package.json

In the package.json we're using the MIT license, we should change the atribute value to "license": "GPL-3.0".