jmbeach/trident

A chrome extension with enhancements for the music review website, Pitchfork.com

Trident

Chrome extension which provides enhancements for the music review website Pitchfork.com

Features

• Load YouTube video for currently viewed album review
  • Gets the video by scraping the page for the furthest scrolled review available.
    • Can be refreshed by clicking extension icon
  • 
• Filter the Pitchfork review list by score, published year, and genre
  • Also displays score and year published on the page, which is not default behavior of Pitchfork.
  • 

Dependencies

• NodeJS
• TypeScript

Build

To build:

1. Clone the repository
2. Run npm install
3. Run npm run-script build or npm run-script watch

The project requires that you specify a YouTube API key. To do so, create a file with contents like the following under src/config/config.json

{
    "youtubeApiKey": "<your-youtube-api-key>"
}

You can get a YouTube API key here.

Run

To use Trident, open the Chrome extensions menu and click Load unpacked extension and select the dist directory of this repo.

Project Structure Notes

The main project files which are intended to be edited exist in the src directory. These are the TypeScript files which WebPack will output into the dist directory. Files with the .js files are chrome-extension specific files and are copied to dist explicitly.

The images which are actually displayed as part of the chrome extension are contained in there as well.

Roadmap

• YouTube video loading
  • Display list of videos for search query
  • Use Spotify to get entire album if available and is user preference
  • Make loading more user-interactive as right now it doesn't request and it's not intuitive that it loads the furthest scrolled review.
    • For example, if you scroll back up the page, it should offer a prompt to let you switch songs.
  • Need a user-interactive way to hide the YouTube videos
• Filtering
  • Filtering currently uses a timer and determines if necessary to show or hide items if new items have appeared after scrolling.
    • Needs to change to only happen if more reviews appear on the page or if the custom UI input changes.
• Better Icon Art
  • Currently just have an icon of a pitchfork. Want a cool trident.
  • No icon for the large image yet.

trident's Issues

Page switching event-system

I wrote a class for knowing what type of page you're on, but there's no event system for triggering setup and teardown of custom UI for the new environments.

For example, if you go to the reviews page from the home page, the filtering does not come up. You have to refresh the page. Needs to be automatic.

Filter button not working on change 🤦‍♂️

Re-size removes controls from toolbar

Persist filter value

Filter values reset to default after you visit them again. They should be remembered

directory doesn't belong in bower.json

I put the property "directory" in the bower.json file, but it belongs in .bowerrc.

Don't inject jQuery

Instead of injecting jQuery into the app, should use document.querySelectorAll. Using jQuery on a page that doesn't already use it could cause unintended side-effects.

Going to band page will filter albums, but doesn't show controls

Need to either show controls or disable filtering when you go to band page such as S U R V I V E

Mention config in the README

Remove genre filter

Implementing the genre filter was fun and all, but Pitchfork actually already has a decent genre filter. The extension should only add functionality.

Implement end-to-end testing

If I don't start doing end-to-end testing now, it just won't happen

Break all YouTube functionality into its own class

YouTube video retrieval is currently contained inside of Trident.ts. Needs to be its own thing.

Get YouTube auth key from user input

Should use an OAuth flow to get permission to use the user's account to search YouTube. Otherwise, when I publish this to the Chrome store, I'll be abusing the limits of my account and I can't afford to pay for others to use the extension.

What I hope to accomplish is, after install, the user is prompted to login to YouTube. At the end of the login, hopefully YouTube posts the extension an API key to use which will be stored for the extensions life.

This will solve another problem which is that developers of this project have to manually configure their YouTube key. One less configuration is always good.

Ability to select any youtube video associated with the search terms

The YouTube searcher currently uses the first track it finds as the song to play and there's no way to change it from the user end. It would be nice to give them an expandable/collapsible list of song results. Maybe even just the titles, not the images.

That way, if the top YouTube search result isn't what the user expects or there's a better alternative, they can switch it themselves.

Improve style of filters

The filters for date and year are ugly and don't match the theme of the website.

Next and back buttons are broken

Make a welcome page for after install

It would be good to introduce users to the extension with a basic HTML page that opens after install that explains the basic functionality of the extension.

Improve style of the video / music player

The YouTube player is bulkier than it needs to be. It would be cool to abstract it by not actually showing the iframe and creating custom UI that is just a normal bar with a circle where dragging the circle updates the iframe which you can hear but not see.

Make the action for getting a youtube video for current review use scroll position

Currently, the action for getting a youtube video for the review uses the furthest scrolled review. Should use the one that's in-frame.

Implement unit tests

unit test any front-facing method

Make Next and Previous reviews buttons

While on the reviews page, show up and down arrow buttons to advance easily to the next or previous review. For next, you could just scroll to the bottom of the page, for previous, hopefully you could just scroll until the previous title element.

Make a custom icon

Make a custom icon to be used at both the small and large sizes.

New bower path breaks content scripts

The new bower path broke the content script for iframe_api

Remove timer for filtering reviews

Instead of using a timer to poll for changes, there should be a jquery event letting you know that new albums are added or removed.

Make UI prompt to play song

Instead of the extension automatically playing a song from YouTube, it should prompt the user if that is what they want.

Also, I want to get the prompt every time I scroll into a new review page or go to a review page.

Published shows NaN

Mark an album as seen

I think it would be nice to be able to mark albums as seen and potentially filter those out as well in case you are specifically looking for new music.

Only run filter on albums currently in-view

The extension continuously processes all albums in the page. This begins causing problems if you scroll 8+ pages down (or more). One fix is to only process what's in view. This combined with changing to an event-based system and no timers will improve the speed.