Skip to content

Latest commit

 

History

History
95 lines (69 loc) · 3.77 KB

README.md

File metadata and controls

95 lines (69 loc) · 3.77 KB
Raw

SponsorExplorer

A modern rewrite of Lanrza's SBBrowser with more features and a more fancy and intuitive UI for browsing SponsorBlock segments and chapters!

SponsorExplorer Segment View Example SponsorExplorer LTT Example

Features

  • ✅ Display submitted segments
  • ✅ View submitted from username/UUID via sb.ltn.fi
  • 🚧 Play and filter segments
  • 🚧 Realtime changes for segments for one or more videos
  • 🚧 Watchlist for YT videos, playlist, as well as usernames/userIDs
  • 🚧 In-depth stats about submitted segments in videos, channels, and from usernames/userIDs
  • ✅ Browse segments on YouTube channels

Inspiration

While I was in the middle of writing a userscript for sb.ltn.fi to append titles and thumbnails using the YouTube API, along with other enhancements, I had this idea to remake SBbrowser but with an approach to a modern redesign and all the different features such as segment playback, a watchlist, etc.

Installation and Setup

Requires Node.js v20 and the Yarn package manager

Clone the repo and the SBbrowser API submodule

git clone --recurse-submodules https://github.com/kuroji-fusky/SponsorExplorer

Then install the submodule's dependencies then run the dev server

cd sbbrowser-api
yarn
yarn dev

Install root dependencies

cd ..
yarn
yarn dev

Copy the .env.local.example file

cp .env.local.example .env.local

Getting the YouTube API key

  1. Create a project on https://console.cloud.google.com, skip this step if you already have a project on the Google Cloud Platform
  2. Look for "APIs & Services" or type "api and services" in the search bar
  3. Click on "Enable APIs and Services", just below the search bar; that will take you to the API Library page
  4. Search for "youtube data api", and you'll see a result for "YouTube Data API v3", then enable it
  5. Once enabled, click on Manage; on the left side, go to Credentials, click "Create Credientals" and choose "API key"
  6. Copy the API key provided and add it as an environment variable as PUBLIC_YT_DATA_API_KEY

Warning

The YouTube Data API has a default quota limit of 10,000 cost per day and it can impact the core functionality of SponsorExplorer, so its search function has a limit of 20 search queries to mitigate the quota limit. You can increase the 10,000 cap within GCP, but it's a tedious process.

Breakdown of costs used for SponsorExplorer1

Method Cost
videos.list 1
playlistItems.list 1
channels.list 1
search.list 100

(Optional) Securing your API key

Optionally, as an added security layer, you can restrict the API key you've created, since they're unrestricted. By clicking on "Edit API key" on the dialog box or by clicking on the three dots on the right and clicking "Edit API key"

  1. Under "Set an application restriction", choose "Websites"
  2. On "Website restrictions", add an item with the field localhost:5173, then click Done
  3. Choose "Restrict key" under "API restrictions". On the dropdown menu, choose the YouTube API by filtering the results and click on the checkmark
  4. Save your changes

License

MIT

Footnotes

  1. https://developers.google.com/youtube/v3/determine_quota_cost ↩