cambalab / ns-vue-radio Goto Github PK
View Code? Open in Web Editor NEWA native white-label application built with NativeScript-Vue for community radios
License: GNU General Public License v3.0
A native white-label application built with NativeScript-Vue for community radios
License: GNU General Public License v3.0
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
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
We need to translate the services to english
Make the phone number dynamic by proving a phoneNumber prop in config.js with a desired phone number as value.
Write guide to choose the app sections and add it to the docs/
It would be convenient for the community to have the application the en locale configured as default.
For a proper migration, we'll have to apply a few updates in the main.js
BottomNavigation
to BottomNavigationBar
(this will have to be updated in the Home.vue component tooEverything related to vuex store, actions, mutations and getters to english
The app is compatible with Icecast2 mp3 stream.
Are there any other platforms supported?
Which file protocols work with this app?
Describe the bug
Inconsistent behavior when removing unwanted sections, some sections doesn't show content and others change in order.
To Reproduce
Expected behavior
it should show the correct screen when changing sections.
The vue-router dependency is missing in package.json, we should add it in dependencies
.
and add it to the docs/
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:
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:
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.
This proposal will completely cover the Navigation Bar item from the list above.
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.
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.
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.
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
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.
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.
Write guide to choose the app social networks and add it to the docs/
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 = "+"
}
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.
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">
Make the email dynamic by proving a writeEmailTo
prop in config.js
with a desired email as value.
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
console.log
(59, 76)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
and add it to the docs/
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.
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.
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
we need to add screenshots of the app working to make it more appealing
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.
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.
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
API_URL should be defined in webpack.config.js
We need to translate the components to english
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
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.
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:
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
We will have to replace this dependency to [email protected]
and:
podcast.content = htmlToText.fromString(podcast.content, { wordwrap: 200 });
undefined
to empty listNow 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
Remove console.log (32)
In the package.json
we're using the MIT license, we should change the atribute value to "license": "GPL-3.0"
.
Replace require statements for import
Remove console.log
from WriteUs (43)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.