This repository is the main website for Radio4000, web CMS for streamed media libraries → https://radio4000.com.
Join the discussion about the evolution and the development of Radio4000 on GitHub issues and the #radio4000:matrix.org chat.
This project aims at development and discussions on building a fair and open access ecosystem of tools and services; for music and cultural goods to be globally accessed and explored.
The goals and objectives of Radio4000 are defined in its manifest.
The application in this repository is written in JavaScript, using the frontend framework Ember.js for the client part of the application. Ember Data is used for the local data store, and also to build the API calls. Emberfire is used for its adapter and serializers to our Firebase database.
The server part is, for now, using Google's Firebase and the code can be found on theradio4000-api repository.
The code for the music player used by this project can be found at radio4000-player.
The plan is to move everything to libre software, self-hosted, with decentralization in mind. It is not there yet and we would love assistance in architecture and development.
To use Radio4000, you only have to visit radio4000.com, and start discovering new user selections.
The rest of this document will introduce some of the technical aspects of:
- setting up and running an instance of Radio4000 (ex: radio3999.com)
- developping features and fixing bugs for the Radio4000 project
See the file contributing, for more information on how to contribute to the project.
To start developing on this project (namely radio4000, radio4000-cms, r4-cms), you will have to:
- have git setup.
- have npm setup (recommended install: nvm) with node version <= 12
- have the npm package yarn set up; it is then used as an alternative to npm in this project
Then, clone this repository, install dependencies and start a development server:
git clone [email protected]:internet4000/radio4000.git
cd radio4000
yarn
yarn start
The start command will launch the application locally, find it in your browser at http://localhost:4000.
By default this repository uses the radio4000-staging database. It
can also work with any other instance of Firebase Realtime database.
Run yarn test for a single test or yarn ember test --server to start a test server.
Lint scripts with:
yarn lint:jsyarn lint:js -- --fix
The site is hosted on Cloudflare pages and integrated with this git repository.
- The
productionbranch to https://radio4000.com (request new deployment)
It usually takes ~2 minutes from git push to deployment is live.
See contributing.md for more.
Some times the Cloudflare Git integration doesn't trigger a deploy, then you can deploy manually as well:
# run locally
nvm use 12
yarn build
wrangler pages deploy dist --project-name radio4000 --branch production
We use Google's Firebase as our backend (database and API, on Google Cloud Engine), as well as for authentication.
Firestore is not supported. Plans are more leaning toward moving off Google's infrastructures.
The security rules defining what can be read, updated, written,
deleted, on each API endpoints are in the
radio4000-apirepository,
in the ./database.rules.json file.
You will need to use this file to setup you database instance if you are running your instance of radio4000. In the Firebase Console of your project, under Datatbase > Rules.
To run your own firebase instance:
-
on the Firebase Console, create new project, to get an instance of Firebase Realtime database.
-
update the security rules of your project's database, as described in the section above, [Security](./#Security Rules)
-
If there you don't have an app already, create one of type
Web App. You can fin the values for your application, in your firebase project's console, atSettings > Project Settings > General > Your Apps. This will provide us the Firebase API keys.
Add your API keys to the CMS, in the file ./config/environment.js
apiKey:'your-api-key'authDomain:'your-project.firebaseapp.com'databaseURL:'your-project.firebaseio.com'
> You will have to update the following keys, for the default
> environment, as well as `production` depending on your objectives.
## Authentication
We're using a combination of [Firebase
Authentication](https://firebase.google.com/products/auth/),
[Torii](https://github.com/vestorly/torii) and
[EmberFire](https://github.com/firebase/emberfire/blob/master/docs/guide/authentication.md)
to handle authentication.
To access authentication in the Ember application, all routes and
controllers come with the `session` service already injected.
To get the current user (model), do `this.get('session.currentUser')`.
For more on auth, check the folders `app/auth` and `app/torii-adapters` as well as the above links.
## Firebase configuration
Links:
- firebase project console: https://console.firebase.google.com
- google cloud console (GCC) (> credentials): https://console.cloud.google.com/apis/credentials
> At the moment, authentication can be enabled with `Email and
> Password`, `Google`, `Facebook`. Note that social providers
> authentication with Google and Facebook will be shutdown in future versions.
For authentication to work, you need to already have setup the
Firebase keys in the file `radio4000/config/environment.js`
### Email/password
1. In your project's console, `Authentication > Sign-in methods`, activate **Email/Password** (no
need of activating email-link).
2. In the Google Cloud Console, create a new api key (name: `auth`)
- Application restrictions: HTTP referrers
- Website restriction: `https://your-domain.com/*` +
`https://your-project.firebaseapp.com/*`
- API restriction (1): Identity Toolkit API
You should be done!
#### Password reset link error
There has been issues with the reset link set to users asking for it
through the cms interface (and it using the provided firebase sdk method).
> "Your request to reset your password has expired or the link has
> already been used".
The reset link has a parameter `apiKey=abcd` that might be using a
different key that the one configured in the cms. Be sure to find that
key in the google cloud console for your project, and add it: `API
restriction (1): Identity Toolkit API`. This key needs only access to
this one service.
### oAuth2 social login
#### Google
1. In the Google cloud Console, create a new `OAuth 2.0 Client IDs`
Set the settings to:
- Authorized JavaScript origins: `https://your-domain.com`
- Authorized redirect URIs: `https://your-domain.com` +
`https://your-project.firebaseapp.com/__/auth/handler`
Copy, for the next step, the `Client ID` and `Client secret` values.
2. In your project's console, `Authentication > Sign-in methods`,
activate **Google**.
Under `Sign-in methods > Google > Web SDK configuration`, paste the
**Client ID** and **Secret** you copied before; save.
3. Check the oAuth Consent Screen section,
https://console.cloud.google.com/apis/credentials/consent
- Scopes for Google APIs: only the default (and minimum...), don't
require anything else, it is already too much (email, profile, openID).
- Authorized domains: `your-domain.com` +
`your-project.firebaseapp.com`
#### Facebook
1. On the Facebook for Developers site
(https://developers.facebook.com), get the **App ID** and an **App Secret**
for your app.
2. On your Firebase project console, at `Authentication > Sign-in
methodes > Facebook`, **activate** Facebook, then paste in **App ID**
and **Secret**
### Youtube API key
For automatic fetching of tracks title, you will need a Youtube API key.
https://console.cloud.google.com/apis/credentials
- Enable Youtube Data Api
- Create a new key, and restrict it to Youtube Data Api
- paste the key in `/config/environment.js`