uclaradio / uclaradio.com

UCLA Radio Website

UCLA Radio

All of the code that powers uclaradio.com.

UCLA Radio is a Javascript application, powered by Node.js and utilizing the Express.js framework. We use MongoDB for our database and React on the front-end.

In addition to the visible site, we also have a RESTful API, which powers an internal panel for managers and DJs as well as our iOS and Android apps.

UCLA Radio is a completely student-run organization offering cultural content created by 100+ DJs. Let us know if you have any suggestions! All of the software here is written by students.

Getting Started

Running

Development

Below are the primary way we recommend for Windows and Mac users to set up the repo properly on their computer to run.
If you are wondering why you can't just clone it and be done it is because we have some extra programs that need to be downloaded in order for to run and develop the website. These include Node, MongoDB, and Yarn mainly.

The Windows set up will require the usage of Windows Subsystem for Linux in order to make downloading and installing all of these software easy. It also helps to make the environment more similar to Mac users so it is easier to get help and work together.

Mac users will need Homebrew in order to have the command terminal be able to download and install programs as if it was a complete Linux system.

Windows

1. Install Windows Subsystem for Linux. Please download Ubuntu.
2. Open Ubuntu and ensure git is installed by running git --version.
3. Navigate back to the Windows c drive with cd /mnt/c/Users. (Note: if you ls and are worried about the denied permissions, that is normal because it simply means don't touch this or you might break something internally. Everything you need you have access to!)
4. Now once you are here, cd into your own user folder. Then navigate to a directory that you want to work in. (Do not just put it in your user folder--go to your desktop or documents folder) Ex) cd Bob/Desktop and mkdir radio_stuff to make a folder/directory
5. Run the command git clone https://github.com/uclaradio/uclaradio.git. While you wait for it download, give us some love by starring our repo.
6. Navigate to the set up script with cd uclaradio/scripts. Then run our setup_ubuntu.sh script.
   • Wondering what this does? Basically it installs the latest versions of Node, MongoDB, and Yarn, then uses these programs to install the packages we use and set up a local database.
   • Is yarn not working? Try yarn --version and if you see 0.3# instead of 1.#.#, then run sudo apt remove cmdtest Rerun the setup script and see if it works now. More on this issue here
   • Is the setup script not running and returning an error? Try running sudo apt-get install dos2unix and then dos2unix setup_ubuntu.sh (to fix WSL formatting error).
7. Open up another Ubuntu window by left-clicking the icon at the bottom and clicking Ubuntu. Navigate to the uclaradio repo. (To make life easier, just copy the path from the original window!)
8. Run mongo with mongod in one Ubuntu window.
9. Run yarn dev in the other Ubuntu window to start the server for development.
10. Point your browser to http://localhost:3000 😍
11. Please note that whenever you open a new ubuntu terminal you will have to navigate back to the Windows c file system. This is done as said before by going for example cd /mnt/c/Users/Bob/Desktop/uclaradio. The reason for having to do this every time you open instead of simply cloning the repo into the default WSL Ubuntu root setup is because this way you can find and open the repo with file explorer. If you'd like to edit files easily using a text/code editor, this is very crucial.

MacOS

1. Install Homebrew.
2. Install git by running brew install git or by installing Xcode command line tools (which includes git) with xcode-select --install.
3. Clone our repo by running the command git clone https://github.com/uclaradio/uclaradio.git. While you wait for it download, give us some love by starring our repo.
4. Navigate to the scripts directory and run our setup.sh script.
   • Wondering what this does? Basically it installs the latest versions of Node, MongoDB, and Yarn, then uses these programs to install the packages we use and set up a local database.
5. Run nodenv init, and follow the instructions it tells you.
   • If you have a problem that looks like error: unknown type name 'uint64_t' uint64_t ri_user_time; you're going to need to rename your /usr/local/include folder to something else. I used usr/local/include_old. This solution is from the following issue https://github.com/cython/cython/issues/2009 if you're interested in reading more about the error.
6. Run mongo with mongod.
7. Run yarn dev to start the server for development.
8. Point your browser to http://localhost:3000 😍

Production

• Make sure all packages are installed with yarn.
• Run node bin/www prod to start the server for production (will require HTTPS and listen on port 80).

Getting Started

Structure

uclaradio/
├── LICENSE.md
├── README.md
├── app                       # Backend code
│   ├── app.js                # The main server file
│   ├── database/             #
│   ├── routes/               #
│   └── services/             #
├── bin
│   └── www                   # The command to run node
├── client                    # Frontend code
│   ├── public/               #
│   ├── react/                # React files
│   └── views/                # Jade templates
├── defaultPasswords.json
├── package.json
├── scripts/                  # Scripts to set things up
├── webpack.config.babel.js
└── yarn.lock

Requirements for new code

As a student-run organization, UCLA Radio is especially liable to technical debt. We have some goals for cleaning up our codebase in the future, but most importantly new code should:

• Have new front-end pages in React. We prefer using a front-end framework with an API to complicated templates.
• Delete files that are not used anymore. It's okay, get rid of clutter.
• Follow an organized structure. Put things in the right directories.

We accept changes from both radio web members and outside contributors. Please note both our contributing guidelines and code of conduct before making a pull request. Want to join radio? We accept applications every quarter.

License

All of the code here is released under the GNU AGPL 3.0 License, which basically means you can do anything you want with the code here as long as you attribute us and release what you make under the same license. If you've made something cool with our code or are interested in relicensing our code, let us know; we'd love to hear what you made!

uclaradio.com's Issues

Layout breaks with TuneIn button

The layout of the site is wonky on site widths between 768px and 1200px. In bootstrap these are the "Default" and "Portrait Tablet" labels.

These are pretty common widths among legacy desktops and most tablets. I would think having a correct site width for these, especially the tablet width, would be best.

Here's some pics:

At first blush I'd suggest just centering and stacking the left buttons and right buttons on these page sizes, a la mobile.

Pledge Drive Overlay

Add an overlay to the site that reminds people to donate to UCLA Radio's pledge drive. Nina mentioned in the pledge drive meeting that this was very useful as a lot of the links to the pledge drive site came from uclaradio.com.

Pledge drive promotion starts May 1st, so it needs to be done by then.

Fix streaming issues

Stream is on port 8080 which doesn't work on UCLA_WIFI and UCLA_WEB. Move it to port 80 when possible to fix hill streaming issues.

Frontpage - About / Contact

React Router

Let's set up the new /beta page to use a package called react-router to switch between pages without resetting the page / stream

Generating email on reported messages

Frontpage - Bottom padding on mobile

There's not enough spacing at the bottom of the frontpage content for the stream bar... It works okay on desktop, but there's no padding on mobile:

Relevant files might be:

/react/frontpage.jsx
/public/css/radio.css

Affects all the content pages of our new frontpage, so pretty high priority ☝️

Write script (like a make file) that sets up the entire project on computer

UCLA Radio Knowledge Base

In the 3/7/17 Manager's meeting, we discussed an intern suggestion which was having a UCLA Radio internal wiki! I generalized this issue to a discussion about knowledge bases wikis aren't the only way knowledge can be stored. We'll use this issue to discuss potential solutions and any concerns.

Why have a knowledge base?

There's a lot of information about how our station is run, but unfortunately the information is all over the place. We rely a lot on bugging people on slack, which leads to some questions not being answered until way later. A knowledge base will serve as a great solution to have all the info about the station in one place. This will also assist in on-boarding new members to the station.

We currently have a FAQ setup in the DJ Panel, however FAQ's are limited in the content we can post on it and interns will not have access to it.

Features we'll need

Feel free to edit this post to add any features you think we need or comment them down below

• WYSIWG: Non-tech savy users might have issues with following systems that require specific markup
• Ability to have multiple pages with organization
• Multiple users can edit it and contribute (If this interferes with price, a possible workaround is having a single account shared between everyone)
• Backups are possible (so we don't lose all our precious info!)
• Free (or ideally free as I'm pretty sure we won't have the budget for this)

Features to discuss

Feel free to edit this post to add any features for discussion. Use the comments for your opinion

• Self-hosted or hosted by someone else?
• Public to everyone or password-protected?
• Should there be different levels of user access? (IE people with write-access, people with read-access)

If you find any cool ways to implement the knowledge base, post them in the comments! Also share pros/cons and your thoughts on them.

Clicking on play button scrolls to the top of the page

Clicking the play button forces you to scroll to the top of the page. I'm not sure why.

Reported Messages UI Bug

The reported messages section has the following UI bug:

Create Events Panel styles

Events panel components are currently sharing styles with their show counterparts. Update such that they have their own style. Relevant files include react/panel/components/panelEvents.jsx

Redesign home page to reflect new features

Current design is great, and an inspiration for other college radio stations, but should have more features visibly available from the home page.

The new design should retain the cleanliness and minimality of the current site. The worst thing we can do is become another generic, over-stuffed page.

RPU

Work on a page for Events that has DJ profiles and a request form for DJ gigs.

Login System

Login interface to edit information for each DJ

Make the promo banner a carousel

We have this really cool promo banner at the top of every page that currently displays the show of the month:

Since there's a lot of cool stuff radio does, wouldn't it be cool if we could have the promo banner should multiple images/links?

There are already a lot of carousel plugins out there, so this shouldn't be that hard to do: the key will be integrating it with the rest of the site. Check out react/frontpage/Frontpage.jsx, the promo banner code is in there.

Make /contact page

We should have a specific /contact page that shows the location of our station, emails, phone numbers, etc.

Add Digital Manager's Board

The website needs a digital manager's board that is similar to the manager board in the station. It should be accessible through uclaradio.com/managers.

Alumni Page

Create a page featuring UCLA Radio's famous alumni

Show Playlists

It would be cool to let DJs post playlists for their shows from Spotify and maybe Soundcloud.
1/20: We discussed this in department meeting: create a new collection in the database for playlists, add a section to blurbs for a playlist of the day.

note: make sure to check out the Spotify package in npm.

Buttons don't work correctly

Buttons sometimes get stuck in states of pressed and have other problems with changing colors.

Analytics

Add live analytics for viewers per show.

Frontpage - DJs

Create a React-powered DJ list on the frontpage!

Show Podcasting

Request from Board of Directors
When a listener clicks on a show page, they should be able to access previous episodes of the show.

KSDT has a similar feature in the form of playlists (although it's a little buggy).

How shows are stored:

Currently all shows are stored in the archive with the following file name:
UCLA Radio Archive [year][month][date] [time].mp3

Note: [time] is in military time

Some DJ's also host their shows via MixCloud or Soundcloud.

We'll have to decide if we are going to pull the episodes from the archive or from MixCloud/SoundCloud.

DJ Page

Let's set up a single-item DJ page on the new frontpage.

The data should already be there, in the redux store. This should be modeled after the individual show page, such as /react/frontpage/containers/ShowContainer.jsx and /react/frontpage/components/ShowPage.jsx

• url should be /djs/:djName
• you may want to move fetchUpdatedDJs: out of /containers/DJsTab.jsx and into /actions/djs.js, so you can fetch the list of djs if somebody comes right to /djs/blueberry before /djs
• any new fields we add to djs should be implemented in the panel... for example right now there's no bio field in panel

View the Rivendell Master Library in Panel

Elrond - The Lord of Rivendell

Name courtesy of @nathunsmitty

TIL that Rivendell uses a MySQL database and above is a snapshot of the most important table of all - the cart! The cart table features all the songs available in Rivendell. With access to this table, we no longer have to rely on the manually updated google sheet.

Having this data is very exciting because:

1. DJs will now be able to see whats actually on Rivendell
2. The music department no longer has to manually update the list
3. We'll be able to filter by Artist, Album, Group (Music, NMF, Liner), and of course Titles (no more CTRL+F'ing the google sheet!!)

Implementation

Here's a rough idea that I have so far:
EDIT: See update in comment below, leveraging mysql is currently not an option at the moment

• Utilize the following node mysql package: mysqljs
• Create a separate db.js, maybe call it mysql-db.js??? This will establish the mysql connection
• Create a rivendell.js model in the database folder. All this will do is simply query the mysql database for the contents of the Cart table
• Add a route to routes/panel.js that will be the GET call for the songs. The song data will be accessible via: https://uclaradio.com/panel/api/songs
• Once we have the API route setup, simply build a nice table using the data. I really like Facebook's FixedDataTable

For local dev, I have a SQL dump of the current CART table in Rivendell as of March 8th, 2017 (s/o to Brandon for hooking it up). We can use docker to spin up a MySQL container (which is what I'm currently using) for database access.

Concerns

Having two different DB's in one repo doesn't sound like best practice, so I was initially thinking of developing this in a separate repo. However, I'd like to take advantage of Panel's current setup, especially since its only accessible by UCLA radio members.

@hsuregan @ChrisLaganiere Let me know your thoughts on this and any other ideas you have!

Staffing Points View

Clean up the staffing points view so that users can have a prettier and more clear form.

Frontpage - Events

We give away a lot of tickets... Let's show the listeners all that good stuff with a React component

Log In Page

Let's redesign the /panel log in page with React.js to give indications when users request an account that's already taken and after submission

i.e. Convert Log In pages from templates (Jade, in /views) to React.js (in /react)

Update 1/17: low-priority task... if it's not broken don't replace it

Pledge Drive Countdown

Add a nifty lil' countdown to Pledge Drive in our top banner (where SoTM would be). Pledge Drive promotion is hard launching May 1st, so it needs to be done by then.

Promo for ISPs

Add a system to promo ISPs through a graphic on the homepage or something similar.

Stream tips

Add common tips to execute when stream users can't connect

Top 30 Albums Page

Create a page that features the top 30 songs by month, week, and year. This is based on the NMF list that the Music department creates every week.

Here's the mockup the design is based off:

Here's the data our front end design will take:
Currently we will be hardcoding this info until the panel version is made

{ 
    album: 'Enchant',
    artist: 'Emilie Autumn', 
    imgurl: 'https://tytmb.files.wordpress.com/2011/10/enchant1.jpg',
    albumreview: '[tumblr-link-review]'
}

Dates appear as NaN/NaN/NaN

Seems to be for all posts in the waterfall that aren't at the top. So far only seen it the latest version of Safari, not Chrome.

The relevant file is most likely WaterFallContent.jsx. All dates are wrapped in a div with a class of wf-box-content-text-date.

Frontpage - Schedule

Put that sweet sweet schedule on the frontpage with a React component!

Add Social Buttons to our Front Page

A request from marketing. Add the social buttons somewhere in the front page, ideally in the side panel above currently playing show:

To add to the sidebar area, checkout Frontpage.jsx, looking at the FrontpageContent component. Styling is in frontpage.scss.

Here are the following social media link we would like to add:
Facebook: https://www.facebook.com/uclaradio
Twitter: https://twitter.com/UCLAradio
Instagram: https://www.instagram.com/uclaradio/
Snapchat: https://www.snapchat.com/add/uclaradio

Please use FontAwesome as that's what we are already using.

Only allow PNG/JPG uploads and display error on Panel

Our API end points for file uploading /api/showPic and /api/userPic allow any type of file to be uploaded. This has allowed hackers to upload malicious scripts onto our server 😱

We should have the API cause non-jpg and png files to return a 403 Forbidden response that our frontend UI on Panel will take in to display an error.

This will require changes in the frontend and backend:

Backend Changes
Check out /routes/panel.js to modify the API endpoints

Frontend Changes
Check out /react/panelDJ.jsx for the user pic upload frontend and /react/panelShow.jsx for the show art frontend

Volume Slider

There should be a way to adjust volume from the webpage.

Frontpage - DJs List Cleanup

The DJ list is very sleek and looks great but I messed up the layout a bit so there's not enough padding for DJ name labels..

That's a pretty simple fix, but generally I want someone to take one more look and see if there's anyway we can make the layout on this page even more awesome. It's pretty great but spacing between the circles on mobile could be better, for example.

Frontpage - Fonts

The new frontpage is looking great, but one area we could work on is the text...

It's hard to read some of the text labels. Fonts are too small to read on mobile because they don't scale with the screen, so we can fix this by doing things like moving some values from px to pt in css and doing lots of testing on different screen sizes

Add a License

Even though we say the website is totally open source, we don't seem to have a license lol. Is that maybe something we want to add?

This is a pretty good resource for differentiating open source licenses.

inconsistencies between pages

Hey guys, greetings from an alum at Amazon.

I've been digging through the site because of pledge drive and I think many of the features you guys have added are super sick. I remember we really wanted to have a schedule on there and I had to keep telling people "it's too much work" because compilers class was kicking my ass. So that's fucking awesome.

I noticed a couple inconsistencies and I just wanted to point them out because I didn't see issues for them in the backlog.

The main one for me is that the main div padding is inconsistent between different pages. It's most noticable on the header image.

On the main page its 50px, on the /shows pages it is roughly ~70px (I think the header SVG has some padding built in) and the /schedule page has it at 15px.

Also the css on the schedule page seems to be screwed up.

Sorry for all the negativity. The site looks cool and I feel really lucky that my initial, super basic design that I threw together in a caffeine haze has lasted ~ 2 years so far. Getting those button colors to match the background was a fucking nightmare.

Show Genre Selector

🚨 BUG FIX 🚨 - DONE

12AM shows are not showing up on schedule :(

Pledge Drive: Genre Selector

A suggestion from pledge drive is to highlight shows of different genres! This is similar to how we highlight current show and spotlight of the week.

Social Links on Show Pages - DONE

In the grid view, there aren't any social links like there are in the list view 😢.

Grid:

List:

Let's just add social links to the bottom of the selected show box in the grid, unless you have an idea for a better spot!

You'll probably want to take a look at how it's implemented and styled in the list view, see if you can extract those parts out for reusability across the site. A look at Font Awesome (which is where we get the icons from), wouldn't hurt either if you aren't familiar with it.

Frontpage - Show Details

Now that we have data for the shows on the front-end, we can make individual show pages like on the app.

Sample data:

var show = {
  "title": "Where in the World is Carmen Sandiego?",
  "id": 14,
  "day": "Sat",
  "time": "11am",
  "djs": {
    "nscolieri": "nscolieri"
  },
  "genre": "World",
  "blurb": "The sounds of history, current events, and contemporary pop culture from around the world, featuring a single country or region every week.",
  "picture": "/uploads/39d04d699142f3b978ed1a97c4999c3e.jpg"
}

Current app design:

Events Panel

All managers should be able to access a new panel page which lets them enter events like ticket giveaways, info sessions.

Likely steps:

• Create a new model to store events, something like /database/events.js modeled after /database/shows.js
• Design API routes for events panel
  • either added to api_v1.txt or in api_v2.txt
  • this can use the existing solution for authenticating users, as in /routes/panel.js in managers routes (see comment below)
• Design a new front-end web app ("panel v2") and set this up as the first page of the new panel with react, redux, react-router, react-bootstrap like our new frontpage
  • this should definitely be structured so that we can add on more pages later

Add social links to shows

add optional social media pages to shows:

• fb
• mixcloud
• soundcloud
• tumblr

This will require adding some new properties to the model in /database/shows.js, and new text fields in the show panel /react/panelShow.jsx.

Then, on the front end we can show an icon with the relevant icon / button for any links the dj filled out

Update react-bootstrap

Breaking changes in updated version of react-bootstrap are preventing us from upgrading... some components break in panel

react-bootstrap ~0.28.5 => ~0.30.7

Let's look into fixing all the breaking changes. Update on a new branch with npm update react-bootstrap and make sure nothing's broken. Maybe update other packages too!

Add full schedule

We need a link (probably a button similar to the others on the site) at the bottom of the /shows to the full image of the schedule at the link /schedule.

404 Page

Add a 404 page with cool graphic from A&D, plus home page link, and link to TuneIn if stream is down.

Compressing all images stored

Images should be compressed to smaller files using lwip (a package that was used previously) or any other means necessary.

The reason for this is to prevent people from downloading images that may be on the order of MBs, AND so images aren't so laggy when loading--whether it be on the front page, or the DJs tab--which is poor user experience.